From 591db2d87f579358fa82125ef2785b6e650943bb Mon Sep 17 00:00:00 2001
From: Isaque Santos <isaque.santos@azion.com>
Date: Thu, 10 Sep 2026 10:09:52 -0300
Subject: [PATCH 1/2] chore(webkit): wire the design-system toolkit into the
 repo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Run `npx @aziontech/webkit init` and keep the parts that fit an Astro repo
which already consumes webkit 4.4.0.

Kept:
- `.stylelintrc.json` — stylelint was installed with no config at all. Adds
  `**/*.astro` to the postcss-html override, so the 41 Astro files are covered
  too (verified: it catches a hex inside an Astro `<style>` block).
- `.mcp.json` — registers the webkit MCP, so an agent working here can resolve
  components against the installed catalog instead of guessing.
- `CLAUDE.md` + `.claude/{rules,skills,agents}` — the shared guidance bundle.
- `.gitignore` — `.claude/*` with negations for the three bundle folders, so the
  bundle is versioned for the team while local settings, launch configs and
  worktrees stay ignored as before.
- `eslint.config.mjs` — a block applying the AST-based webkit rules to
  `**/*.astro`. The preset's own FILES list does not include `.astro`, so those
  41 files were outside every webkit rule; this closes it until the preset does.
  `no-style-override` is deliberately absent — it needs vue-eslint-parser's
  template visitor, which astro-eslint-parser does not provide.

Dropped, with reasons:
- The dependency additions. `tailwindcss` would land in devDependencies at
  `^4.0.0` while `dependencies` already pins `^4.3.3` (init only checks the
  target field), and `@tailwindcss/postcss` does not apply — this repo runs
  Tailwind through `@tailwindcss/vite`.
- `scripts.prepare: "husky"` and `.husky/pre-commit`. The generated hook runs
  `eslint .` on every commit; with 72 known violations that blocks all work.
  Local hooks come after the first cleanup pass, not before it.
- `src/webkit.css`. This repo already registers webkit in
  `src/styles/main.css`; a second entry would load Tailwind and the theme twice.

`webkit init` left `eslint.config.mjs` and `postcss.config.js` untouched, as
designed, and printed the merge snippets instead.

Two findings for the design system, filed separately: `webkit doctor` reports
`webkit.css @source` as FAIL because the check hardcodes `src/webkit.css`, and
its source scan omits `.astro` — both give a false reading on any Astro project.
---
 .claude/agents/webkit-adopter.md              |   50 +
 .claude/agents/webkit-adoption-auditor.md     |   48 +
 .claude/agents/webkit-expert.md               |   33 +
 .claude/agents/webkit-reviewer.md             |   43 +
 .claude/agents/webkit-ui-verifier.md          |   44 +
 .claude/rules/webkit-accessibility.md         |   83 ++
 .claude/rules/webkit-component-states.md      |   78 ++
 .claude/rules/webkit-component-structure.md   |   95 ++
 .claude/rules/webkit-composables.md           |   88 ++
 .../rules/webkit-construction-standards.md    |   38 +
 .claude/rules/webkit-deprecation.md           |   75 ++
 .claude/rules/webkit-emits.md                 |   90 ++
 .claude/rules/webkit-imports.md               |   30 +
 .claude/rules/webkit-motion.md                |   78 ++
 .claude/rules/webkit-performance.md           |   44 +
 .claude/rules/webkit-prefer-over-custom.md    |   23 +
 .claude/rules/webkit-prop-vocabulary.md       |   89 ++
 .claude/rules/webkit-props.md                 |   85 ++
 .claude/rules/webkit-root-element.md          |   95 ++
 .claude/rules/webkit-slots.md                 |   85 ++
 .claude/rules/webkit-style-override.md        |   46 +
 .claude/rules/webkit-styling.md               |  102 ++
 .claude/rules/webkit-testid.md                |   80 ++
 .claude/rules/webkit-tokens.md                |   34 +
 .claude/rules/webkit-v-model.md               |   82 ++
 .claude/skills/webkit-baseline-ui/SKILL.md    |  208 ++++
 .claude/skills/webkit-create-surface/SKILL.md |  191 ++++
 .claude/skills/webkit-data-viz/SKILL.md       |  177 +++
 .claude/skills/webkit-ds-adoption/SKILL.md    |  161 +++
 .claude/skills/webkit-errors/SKILL.md         |  328 ++++++
 .claude/skills/webkit-form/SKILL.md           | 1013 +++++++++++++++++
 .../skills/webkit-impeccable-polish/SKILL.md  |   99 ++
 .claude/skills/webkit-lists/SKILL.md          |  438 +++++++
 .claude/skills/webkit-microcopy/SKILL.md      |  299 +++++
 .claude/skills/webkit-motion-polish/SKILL.md  |  445 ++++++++
 .claude/skills/webkit-navigation/SKILL.md     |  630 ++++++++++
 .claude/skills/webkit-tables/SKILL.md         |  383 +++++++
 .../skills/webkit-theming-dark-mode/SKILL.md  |  207 ++++
 .claude/skills/webkit-ui-craft/SKILL.md       |  119 ++
 .claude/skills/webkit-ui-states/SKILL.md      |  401 +++++++
 .claude/skills/webkit-ui-verify/SKILL.md      |  183 +++
 .claude/skills/webkit-usage/SKILL.md          |  101 ++
 .claude/skills/webkit-ux-heuristics/SKILL.md  |  102 ++
 .gitignore                                    |   10 +-
 .mcp.json                                     |   13 +
 .stylelintrc.json                             |   20 +
 CLAUDE.md                                     |   69 ++
 eslint.config.mjs                             |   21 +
 48 files changed, 7255 insertions(+), 1 deletion(-)
 create mode 100644 .claude/agents/webkit-adopter.md
 create mode 100644 .claude/agents/webkit-adoption-auditor.md
 create mode 100644 .claude/agents/webkit-expert.md
 create mode 100644 .claude/agents/webkit-reviewer.md
 create mode 100644 .claude/agents/webkit-ui-verifier.md
 create mode 100644 .claude/rules/webkit-accessibility.md
 create mode 100644 .claude/rules/webkit-component-states.md
 create mode 100644 .claude/rules/webkit-component-structure.md
 create mode 100644 .claude/rules/webkit-composables.md
 create mode 100644 .claude/rules/webkit-construction-standards.md
 create mode 100644 .claude/rules/webkit-deprecation.md
 create mode 100644 .claude/rules/webkit-emits.md
 create mode 100644 .claude/rules/webkit-imports.md
 create mode 100644 .claude/rules/webkit-motion.md
 create mode 100644 .claude/rules/webkit-performance.md
 create mode 100644 .claude/rules/webkit-prefer-over-custom.md
 create mode 100644 .claude/rules/webkit-prop-vocabulary.md
 create mode 100644 .claude/rules/webkit-props.md
 create mode 100644 .claude/rules/webkit-root-element.md
 create mode 100644 .claude/rules/webkit-slots.md
 create mode 100644 .claude/rules/webkit-style-override.md
 create mode 100644 .claude/rules/webkit-styling.md
 create mode 100644 .claude/rules/webkit-testid.md
 create mode 100644 .claude/rules/webkit-tokens.md
 create mode 100644 .claude/rules/webkit-v-model.md
 create mode 100644 .claude/skills/webkit-baseline-ui/SKILL.md
 create mode 100644 .claude/skills/webkit-create-surface/SKILL.md
 create mode 100644 .claude/skills/webkit-data-viz/SKILL.md
 create mode 100644 .claude/skills/webkit-ds-adoption/SKILL.md
 create mode 100644 .claude/skills/webkit-errors/SKILL.md
 create mode 100644 .claude/skills/webkit-form/SKILL.md
 create mode 100644 .claude/skills/webkit-impeccable-polish/SKILL.md
 create mode 100644 .claude/skills/webkit-lists/SKILL.md
 create mode 100644 .claude/skills/webkit-microcopy/SKILL.md
 create mode 100644 .claude/skills/webkit-motion-polish/SKILL.md
 create mode 100644 .claude/skills/webkit-navigation/SKILL.md
 create mode 100644 .claude/skills/webkit-tables/SKILL.md
 create mode 100644 .claude/skills/webkit-theming-dark-mode/SKILL.md
 create mode 100644 .claude/skills/webkit-ui-craft/SKILL.md
 create mode 100644 .claude/skills/webkit-ui-states/SKILL.md
 create mode 100644 .claude/skills/webkit-ui-verify/SKILL.md
 create mode 100644 .claude/skills/webkit-usage/SKILL.md
 create mode 100644 .claude/skills/webkit-ux-heuristics/SKILL.md
 create mode 100644 .mcp.json
 create mode 100644 .stylelintrc.json
 create mode 100644 CLAUDE.md

diff --git a/.claude/agents/webkit-adopter.md b/.claude/agents/webkit-adopter.md
new file mode 100644
index 0000000000..496585d735
--- /dev/null
+++ b/.claude/agents/webkit-adopter.md
@@ -0,0 +1,50 @@
+---
+name: webkit-adopter
+description: Runs and explains the @aziontech/webkit adoption flow — `npx @aziontech/webkit init`. Sets up deps, lint configs, pre-commit, the webkit MCP, and the Claude Code bundle in this project, idempotently.
+scope: general
+---
+
+# Agent: webkit-adopter
+
+## Role
+
+You own onboarding this project onto `@aziontech/webkit`. You run the adoption command, explain what each step did, and verify the wiring — safely and idempotently.
+
+## The command
+
+```
+npx @aziontech/webkit init
+```
+
+Options:
+
+- `--dry-run` — print the plan without writing anything. Always offer this first if the user is unsure.
+- `--strict` (default) / `--recommended` — which ESLint preset the generated config uses.
+
+## What `init` does
+
+1. Records the design-system dependencies in `package.json` — `@aziontech/webkit`, `@aziontech/theme`, `@aziontech/icons`, and dev tools (`@aziontech/eslint-plugin-webkit`, `@aziontech/webkit/stylelint-config`, `eslint`, `stylelint`, `vue-eslint-parser`, `postcss-html`, `postcss-scss`, `husky`). It does not run an install — remind the user to run their package manager.
+2. Writes `eslint.config.mjs` (flat) wiring the webkit preset, unless an ESLint config already exists — in which case it prints a merge snippet instead of overwriting.
+3. Writes `.stylelintrc.json` (extending `@aziontech/webkit/stylelint-config`, with the `.vue` / `.scss` custom syntaxes wired), unless a Stylelint config already exists — in which case it prints a merge snippet.
+4. Merges the `webkit` server into `.mcp.json`.
+5. Adds a `prepare` script (`husky`) to `package.json` and writes `.husky/pre-commit` to lint on commit. Running the package-manager install runs `prepare`, which activates the hooks.
+6. Copies the Claude Code bundle (rules, the `webkit-usage` skill, agents) into `.claude/` — only files that are missing, never overwriting local edits.
+7. Appends a `@aziontech/webkit` fragment to `CLAUDE.md`, guarded by a marker so it is added once.
+8. If a `src/main.ts` / `src/main.js` exists without the theme import, advises adding `import '@aziontech/theme'` and `import '@aziontech/icons'`.
+
+## Idempotency
+
+`init` is safe to run repeatedly. Existing files are skipped or merged, never clobbered; the MCP server and the CLAUDE.md fragment are added only if absent. Re-run it after upgrading without fear.
+
+## How you work
+
+1. Offer `--dry-run` first so the user sees the plan.
+2. Run `init`, then relay the printed actions honestly (what was written vs skipped).
+3. Remind the user to run their package-manager install — it fetches the deps and runs `prepare` (husky), which activates the git hooks.
+4. Point them at the copied rules and the `webkit-usage` skill for day-to-day usage.
+
+## What you do not do
+
+- Do not hand-edit the consumer's entry file automatically — advise the import; let them apply it.
+- Do not overwrite an existing ESLint config or existing `.claude/` files.
+- Do not run a package install on their behalf unless they ask.
diff --git a/.claude/agents/webkit-adoption-auditor.md b/.claude/agents/webkit-adoption-auditor.md
new file mode 100644
index 0000000000..b135295419
--- /dev/null
+++ b/.claude/agents/webkit-adoption-auditor.md
@@ -0,0 +1,48 @@
+---
+name: webkit-adoption-auditor
+description: Measures how much of an app already renders through @aziontech/webkit versus hand-rolled UI, and produces a prioritized backlog of custom components that have a webkit equivalent to adopt.
+scope: general
+---
+
+# Agent: webkit-adoption-auditor
+
+## Role
+
+You measure design-system adoption. Given the app source (or a chosen set of screens), you produce a **coverage scorecard** — the share of rendered UI that comes from `@aziontech/webkit` versus hand-rolled or third-party custom UI — and a **prioritized adoption backlog** of custom UI that already has a webkit equivalent it should switch to. You are the executable companion to the `webkit-ds-adoption` skill, and you pair with the `webkit-prefer-over-custom` lint.
+
+## What you check
+
+### Coverage (the count)
+
+- Scan `.vue` files (templates + `<script setup>`). Tally, per screen and for the whole app, how many rendered UI units come from `@aziontech/webkit/*` imports versus hand-rolled or third-party ones.
+- Count as **custom**: raw interactive elements styled by hand (`<button>`, `<input>`, `<select>`, `<dialog>`); bespoke modal / dropdown / table / tooltip / tabs / toast implementations; and any third-party UI library (PrimeVue, Vuetify, Element Plus, Headless UI, ...).
+- Coverage % = webkit-rendered units ÷ (webkit + custom) units. Report it per screen and rolled up for the app.
+
+### Equivalents (the backlog)
+
+- For each hand-rolled or third-party element, look up a webkit equivalent — prefer the webkit MCP `suggest_component` with a plain-language description; cross-check `node_modules/@aziontech/webkit/catalog.json` (`imports`) so the subpath is real.
+- Flag each as `custom X → use @aziontech/webkit/Y`, with the flat import and the file:line.
+
+### Anti-patterns (misuse of what's adopted)
+
+- **Restyled webkit components** — a `class` / `style` override on a webkit tag that fights the token defaults instead of using props / `data-*` variants.
+- **Hardcoded color** — `#fff`, `rgb()`/`rgba()`, `hsl()`, `text-[#...]`, or raw Tailwind palette (`bg-blue-600`) where a `@aziontech/theme` token belongs.
+- **Category-prefixed imports** (`@aziontech/webkit/feedback/skeleton`) or bare-package barrels — flag the flat rewrite (`@aziontech/webkit/skeleton`).
+
+### Gap, not fork
+
+- When a custom component has **no** catalog equivalent but recurs across screens (a near-duplicate local fork), flag it as a **gap request** to the design system — not as a local component to keep and restyle in place.
+
+## How you report
+
+- **Scorecard first**: whole-app coverage %, then a per-screen breakdown (screen · webkit units · custom units · %).
+- **Ranked adoption backlog**: highest-impact first — most-duplicated and highest-traffic custom UI at the top — each row `custom → @aziontech/webkit/<name>`, with file:line and the flat import to switch to.
+- **Gap candidates**: the "gap not fork" list, each with why webkit has no equivalent today and how often it recurs.
+- Every finding is concrete and grounded in a real file:line. If a screen already renders fully through webkit, say so plainly.
+
+## What you do not do
+
+- Do not migrate or rewrite the code yourself unless asked — you measure and prioritize; the switch is a separate, explicit step.
+- Do not recommend a webkit component without verifying it exists in the catalog / MCP first.
+- Do not flag legitimate custom UI that webkit genuinely lacks — mark it a gap candidate instead of a violation.
+- Do not invent an import path or a component name; every suggestion must resolve to a real `@aziontech/webkit/*` subpath.
diff --git a/.claude/agents/webkit-expert.md b/.claude/agents/webkit-expert.md
new file mode 100644
index 0000000000..ed77581921
--- /dev/null
+++ b/.claude/agents/webkit-expert.md
@@ -0,0 +1,33 @@
+---
+name: webkit-expert
+description: Answers "which @aziontech/webkit component should I use, and how?" Grounds every answer in the installed catalog and the webkit MCP — never invents a component or an import path.
+scope: general
+---
+
+# Agent: webkit-expert
+
+## Role
+
+You are the webkit-expert. When someone needs UI in this project, you tell them exactly which `@aziontech/webkit` component to use and how to use it — the correct import, the props/slots that matter, and the token-based styling. You are grounded, not speculative: if the catalog does not have it, you say so.
+
+## How you work
+
+1. Understand the UI need in plain terms (a button, a data table, an empty state, a confirmation dialog, ...).
+2. Find the component:
+   - Prefer the webkit MCP tool `suggest_component` with a plain-language description.
+   - Cross-check against `node_modules/@aziontech/webkit/catalog.json` (`imports` object) — every key is a real published subpath.
+3. Give the answer as runnable code: the flat import (`@aziontech/webkit/<name>`), a PascalCase binding, and a minimal usage snippet with `@aziontech/theme` tokens for any color/spacing.
+4. Note the tree-shakeable option when relevant (`<name>-root` or individual sub-components).
+
+## Rules you enforce in every answer
+
+- Flat import path only — never category-prefixed, `/src/`, deep-internal, or a bare-package barrel.
+- Binding is PascalCase of the subpath's last segment.
+- Color/spacing/typography via `@aziontech/theme` tokens — never hex, `rgb`, `hsl`, or raw Tailwind palette.
+- Use the existing webkit component; do not suggest building a custom one when webkit ships it.
+
+## What you do not do
+
+- Do not invent a component name or an import path. If the catalog has no match, say the design system does not currently ship it and suggest raising the gap.
+- Do not recommend another component library for something webkit covers.
+- Do not write application logic beyond the usage snippet the question needs.
diff --git a/.claude/agents/webkit-reviewer.md b/.claude/agents/webkit-reviewer.md
new file mode 100644
index 0000000000..8c634cc18e
--- /dev/null
+++ b/.claude/agents/webkit-reviewer.md
@@ -0,0 +1,43 @@
+---
+name: webkit-reviewer
+description: Reviews a diff for correct and performant @aziontech/webkit usage — flat imports, theme tokens, tree-shaking, reuse over reinvention. The local (non-CI) design-system review.
+scope: general
+---
+
+# Agent: webkit-reviewer
+
+## Role
+
+You are the local design-system reviewer. Given a diff (staged changes, a branch, or a set of files), you check that every use of `@aziontech/webkit` is correct and performant, and you report violations with the exact fix. This is the review a developer runs before pushing — the complement to lint and CI.
+
+## What you check
+
+### Imports (correctness)
+
+- Flat path only: `@aziontech/webkit/<name>`. Flag any category prefix (`@aziontech/webkit/feedback/skeleton`), `/src/` path, deep-internal path, or bare-package barrel (`import { X } from '@aziontech/webkit'`).
+- Binding is PascalCase of the subpath's last segment. Flag mismatches like `import Chip from '@aziontech/webkit/chips'`.
+- Every imported subpath is real — cross-check against `node_modules/@aziontech/webkit/catalog.json` (`imports`) or the webkit MCP. Flag phantom paths.
+
+### Tokens (correctness)
+
+- No hardcoded color: `#fff`, `rgb(...)`, `rgba(...)`, `hsl(...)`, `text-[#...]`, or raw Tailwind palette (`bg-blue-600`). All color/spacing/typography must come from `@aziontech/theme` tokens.
+
+### Performance
+
+- Root-only usage should take the tree-shakeable `<name>-root` path (or import specific sub-components) rather than the full compound.
+- `@aziontech/icons` (a font) imported once for side effects (`import '@aziontech/icons'`) — flag a default/namespace binding of it.
+- Heavy overlays (dialog, drawer, table) should be lazy-loaded with `defineAsyncComponent` when off the initial render path.
+
+### Reuse
+
+- New custom UI that duplicates an existing webkit component (button, modal, table, tooltip, ...) — flag it and name the webkit component to use instead.
+
+## How you report
+
+For each finding: the file and line, what is wrong, and the corrected code. Group by severity — correctness issues (broken/incorrect imports, hardcoded colors) first, then performance and reuse suggestions. If the diff is clean, say so plainly.
+
+## What you do not do
+
+- Do not rewrite the diff yourself unless asked — report findings and fixes.
+- Do not flag legitimate custom UI that webkit genuinely does not provide.
+- Do not invent a webkit component to recommend; verify it exists in the catalog first.
diff --git a/.claude/agents/webkit-ui-verifier.md b/.claude/agents/webkit-ui-verifier.md
new file mode 100644
index 0000000000..d8d465515c
--- /dev/null
+++ b/.claude/agents/webkit-ui-verifier.md
@@ -0,0 +1,44 @@
+---
+name: webkit-ui-verifier
+description: Runs the visual and behavioral QA pass on a @aziontech/webkit app — builds and serves it, drives real routes with headless Chromium, and reports only what it observed across themes, console, a11y, states, and interaction.
+scope: general
+---
+
+# Agent: webkit-ui-verifier
+
+## Role
+
+You are the UI verifier for this project. Given a route (or a set of routes/components), you **build and serve the app**, drive it with Playwright headless Chromium, and report what you **observed** — screenshots taken, console output captured, axe results, states exercised. You never assume a screen works because the code looks right; a claim you cannot back with an observation is not a pass. You are the runtime companion to the `webkit-ui-verify` skill (its executable form) and the local mirror of the CI smoke/visual job.
+
+## How you work
+
+1. Find what to verify. Resolve component and route paths from the app itself — the router config, the pages/views directory — and confirm any `@aziontech/webkit` component in play is real via the webkit MCP (`suggest_component`) or `node_modules/@aziontech/webkit/catalog.json` (`imports`). Never assume a component's import path.
+2. Build/serve the app (its own dev or preview command) and wait for a ready signal before navigating.
+3. For each route, run every dimension below, capturing the concrete artifact each produces.
+4. Tear the server down when done.
+
+## What you check
+
+For every route, all five dimensions — each produces an observation, not an opinion:
+
+- **Visual, both themes.** Screenshot in **light** and in **dark** (`data-theme="dark"` on the root) at 2–3 widths — `375`, `768`, `1280`. Confirm the dark pass actually re-themes (tokens flip, not a light screen with a dark bar) and nothing clips, overlaps, or renders off-canvas at any width.
+- **Console clean.** Capture console + network on load **and** on the primary interaction. **Zero** `console.error`, zero Vue warnings, zero failed requests (4xx/5xx). Report the exact message and origin for any that appear.
+- **Accessibility (axe-core).** Run `axe-core` against the rendered tree; report each violation by rule id, impact, and the offending node. Re-run after opening any overlay so its contents are in the tree.
+- **State surface.** Force each state the view owns — **loading**, **empty**, **error** — and confirm each one **renders something** (a skeleton, an `EmptyState`, an error message), never a blank panel. A state that paints nothing is a fail.
+- **Interaction & focus.** Perform the primary interaction (submit, open, select) and confirm it responds. For overlays, confirm focus **moves in, is trapped, and is restored to the trigger** on close, driven by real keyboard/pointer events.
+
+## How you report
+
+Per route, a compact table: one row per dimension (visual both-themes · console · a11y/axe · states · interaction), each marked **PASS** or **FAIL**. For every FAIL, give the concrete observation (the message, the rule id, the missing state, the width) and the fix. Name or attach the screenshots you took (per theme × width). If a route is green on all five, say so plainly — a clean pass is a valid, complete result.
+
+## Prerequisites
+
+The consumer must have **`playwright`** (with its Chromium browser installed) and **`axe-core`** available in the project. If either is missing, say so and stop — do not fake a run or fall back to static inspection.
+
+## What you do not do
+
+- Do not assert on class strings, pixel coordinates, or animation timing — verify behavior and rendered state, not implementation detail.
+- Do not fix the application code unless explicitly asked — report the observation and the fix.
+- Do not run against production or any deployed environment — verify the local build only.
+- Do not assume a component's import path or that a screen works; check the catalog and drive the actual UI.
+- Do not report a PASS you did not observe — no screenshot, no capture, no pass.
diff --git a/.claude/rules/webkit-accessibility.md b/.claude/rules/webkit-accessibility.md
new file mode 100644
index 0000000000..dfb238da73
--- /dev/null
+++ b/.claude/rules/webkit-accessibility.md
@@ -0,0 +1,83 @@
+# Rule: accessibility — role, keyboard, focus, and motion are built in, never bolted on
+
+Webkit components are accessible by construction: drop in a `Dialog` or `Table` and its
+role, keyboard model, focus management, and reduced-motion fallback come with it. Anything
+you build around them — custom components, views, composed overlays — must hold the same
+contract. In this project accessibility is **convention + code review**; the one part that
+is mechanically enforced is color: raw colors (including focus rings) are blocked by the
+stylelint config and the `webkit/no-hardcoded-color` ESLint rule.
+
+## Do
+
+- Use the **native element** whose semantics match before reaching for `role`
+  (`<button>`, `<a href>`, `<input>`); add `role` only when no native element fits.
+- Mirror ARIA state with the element's `data-*` state (`aria-expanded` with
+  `data-state="open"`, `aria-disabled` with `data-disabled`, `aria-invalid` with
+  `data-invalid`).
+- On your own components, name the accessible-name prop **`ariaLabel`** (prefixed
+  `xAriaLabel` for sub-parts) and bind it to the `aria-label` attribute internally.
+- Give every interactive piece a **keyboard map** and implement exactly that
+  (dialog: `Esc` closes, `Tab` is trapped; menu: arrows move, `Enter` selects,
+  `Esc` closes). Anything clickable must be reachable and operable by keyboard.
+- Generate ids with Vue's **`useId()`** for every `for` / `aria-labelledby` /
+  `aria-describedby` association — stable across SSR.
+- Style focus with a **`focus-visible`** ring using the ring token
+  (`focus-visible:ring-(--ring-color)`).
+- Make overlays **trap focus and restore it**: focus moves into the overlay on open,
+  stays trapped while open, and returns to the trigger on close — use a focus-trap
+  composable (e.g. VueUse), not a hand-written trap.
+- Pair every motion-bearing class with **`motion-reduce:`**
+  (`motion-reduce:transition-none` / `motion-reduce:animate-none`).
+
+## Do not
+
+- Never add `role`/ARIA to fake an interactive element when a native one fits.
+- Never put `@click` on a non-interactive element without a matching key handler.
+- Never hand-roll ids — use `useId()`.
+- Never use a raw color for the focus ring — use the ring token; hardcoded colors are
+  blocked by `webkit/no-hardcoded-color` and the stylelint config.
+- Never open an overlay without trapping focus and restoring it to the trigger on close.
+- Never ship a motion class without its `motion-reduce:` fallback.
+- Never name the accessible-name prop `aria-label` — use `ariaLabel`.
+
+## Correct
+
+<!-- prettier-ignore -->
+```vue
+<script setup>
+import { useId } from 'vue'
+const hintId = useId() // stable id for the ARIA association
+</script>
+
+<template>
+  <!-- native semantics, tokenized focus ring, reduced-motion fallback -->
+  <button
+    class="inline-flex items-center gap-(--spacing-xs)
+           transition-colors duration-150 motion-reduce:transition-none
+           focus-visible:ring-2 focus-visible:ring-(--ring-color)"
+    :aria-expanded="open"
+    :data-state="open ? 'open' : 'closed'"
+    @click="toggle"
+  >
+    Save changes
+  </button>
+
+  <input type="email" :aria-describedby="hintId" />
+  <p :id="hintId">We never share your email.</p>
+</template>
+```
+
+## Wrong
+
+<!-- prettier-ignore -->
+```html
+<!-- clickable div: fake semantics, unreachable by keyboard -->
+<div role="button" @click="open">Open settings</div>
+
+<!-- hand-rolled id, raw-color focus ring, motion without a reduced-motion fallback -->
+<label for="email-1">Email</label>
+<input id="email-1" class="transition-all focus-visible:ring-[#f3652b]" />
+
+<!-- overlay that neither traps focus nor restores it to the trigger on close -->
+<div v-if="open" role="dialog">…</div>
+```
diff --git a/.claude/rules/webkit-component-states.md b/.claude/rules/webkit-component-states.md
new file mode 100644
index 0000000000..0be39bce97
--- /dev/null
+++ b/.claude/rules/webkit-component-states.md
@@ -0,0 +1,78 @@
+# Rule: render every component state through data-\* and webkit's state components
+
+Every interactive component has a **state surface** — the set of conditions it must visibly
+handle. webkit components own the rendering of their states; your screen supplies only the
+**trigger** (a boolean prop, or the async data your app owns). The same applies to components
+you author in this project: decide which states each one handles and render them through
+`data-*` attributes and webkit's own state components (`Skeleton`, `EmptyState`,
+`HelperText`) — never an ad-hoc spinner or "no results" string improvised per screen.
+This pattern is convention + code review in this project; the tokens used inside state
+styling are still checked mechanically by the stylelint config and the
+`webkit/no-hardcoded-color` ESLint rule.
+
+The canonical states and how each renders:
+
+| State             | Trigger                   | How it renders                                                        |
+| ----------------- | ------------------------- | --------------------------------------------------------------------- |
+| `disabled`        | `disabled` prop           | `data-disabled` + disabled tokens; not focusable                      |
+| `loading`         | `loading` prop            | `data-loading` + `Skeleton` / spinner affordance; interaction blocked |
+| `invalid`         | validation (form field)   | `data-invalid` + error tokens + a `HelperText` message                |
+| `readonly`        | `readonly` prop           | `data-readonly`; value visible, not editable                          |
+| `empty`           | no data (data-driven)     | the `EmptyState` component, not a hand-written "no results" string    |
+| `error`           | load/action failure       | an error slot / message, never a bare thrown error                    |
+| `open` / `closed` | `open` (+ `v-model:open`) | `data-state="open"` / `data-state="closed"` (overlays)                |
+
+Not every component has every state — a button has `disabled` + `loading`; a data table adds
+`empty` + `error`. Handle exactly the states the component owns, and handle all of them.
+
+## Do
+
+- Switch state styling with a `data-*` attribute on the element, styled by a Tailwind
+  `data-[...]:` variant inline in its `class` — the state decision lives in the markup.
+- Reuse the shipped state components: `Skeleton` for loading placeholders, `EmptyState` for
+  no-data, `HelperText` for validation messages.
+- Keep the trigger in the app: fetch data in your page/store/composable and pass `loading`,
+  `items`, or `error` down as props. Components render states; they do not fetch.
+- When authoring a local component, list its state surface up front and render every state —
+  a silent empty list or an invisible error is a missing state, not a smaller component.
+
+## Do not
+
+- Never render a state with a `:class` ternary (`loading ? 'opacity-80' : ''`) — use
+  `data-loading` + a `data-[loading]:` variant.
+- Never hand-roll a spinner, shimmer, or "Nothing here" message that `Skeleton` /
+  `EmptyState` already provides.
+- Never fetch data or own async state inside a shared component just to drive its states —
+  the trigger always comes from the consumer.
+- Never ship a data-driven view that only handles the happy path — `loading`, `empty`, and
+  `error` are part of the component, not per-screen afterthoughts.
+
+## Correct
+
+<!-- prettier-ignore -->
+```html
+<!-- the component renders its states; the page only supplies the trigger -->
+<div
+  :data-loading="loading || null"
+  :data-disabled="disabled || null"
+  class="flex flex-col gap-(--spacing-sm)
+         data-[loading]:pointer-events-none
+         data-[disabled]:cursor-not-allowed"
+>
+  <Skeleton v-if="loading" kind="shape" width="100%" height="48px" />
+  <EmptyState v-else-if="items.length === 0" title="No results" />
+  <slot v-else />
+</div>
+```
+
+## Wrong
+
+<!-- prettier-ignore -->
+```html
+<!-- :class ternary, hand-rolled placeholder and empty string, fetching inside -->
+<div :class="loading ? 'opacity-50' : ''">
+  <span v-if="loading" class="spinner" />
+  <p v-else-if="items.length === 0">Nothing here</p>
+  <slot v-else />
+</div>
+```
diff --git a/.claude/rules/webkit-component-structure.md b/.claude/rules/webkit-component-structure.md
new file mode 100644
index 0000000000..0ae5fc70cd
--- /dev/null
+++ b/.claude/rules/webkit-component-structure.md
@@ -0,0 +1,95 @@
+# Rule: one folder layout, one `<script setup>` order for every component
+
+Two components should differ only in what they _do_, never in how their files are arranged
+or in what order their `<script setup>` reads. Parts of this rule are machine-enforced by
+the `webkit/authoring-standards` ESLint rule: runtime `defineProps({})` / `defineEmits([])`
+(use the type-based forms), a manual `modelValue` prop + `update:modelValue` emit (use
+`defineModel`), a `<slot>` without a `defineSlots` declaration, a composable returning
+`reactive()` or authored as `.js`, and a bare `@deprecated` tag are all blocked. The folder
+layout and the section order themselves are convention + review.
+
+## Do
+
+- Keep **one component per `.vue` file**, named in kebab-case; the folder carries the same name:
+
+<!-- prettier-ignore -->
+```
+src/components/<name>/
+  <name>.vue              # the root component
+  index.ts                # compound root (composition components only)
+  injection-key.ts        # provide/inject key (composition only)
+  composables/            # composables used only by this component
+    use-<name>-context.ts
+  <name>-<part>/          # each public sub-component in its own folder
+    <name>-<part>.vue
+```
+
+- **Co-locate** what only this component uses (its composables, its `injection-key.ts`, its
+  sub-components). Promote to a shared `src/composables/` only when a second component needs it.
+- Start every `<script setup lang="ts">` with `defineOptions({ name, inheritAttrs: false })` —
+  `name` in PascalCase — then keep the fixed section order shown below. Omit a section that
+  does not apply; never reorder.
+- Declare props, emits, models, and slots with the **type-based macros**: `defineProps<Props>()`,
+  `defineEmits<{ ... }>()`, `defineModel<T>()`, `defineSlots<{ ... }>()`.
+- Author composables as `.ts` files returning refs/computed values.
+
+## Do not
+
+- Never put more than one component in a `.vue` file.
+- Never reorder the `<script setup>` sections or omit `defineOptions({ name, inheritAttrs: false })`.
+- Never use runtime `defineProps({...})` / `defineEmits([...])` — blocked by lint.
+- Never hand-wire a `modelValue` prop + `update:modelValue` emit; use `defineModel` — blocked by lint.
+- Never render a `<slot>` without a matching `defineSlots` declaration — blocked by lint.
+- Never hoist a component-specific composable or `injection-key.ts` out of the component
+  folder before a second consumer exists.
+- Never add a per-component `package.json`.
+
+## Correct
+
+<!-- prettier-ignore -->
+```vue
+<script setup lang="ts">
+  // 1. imports
+  import { computed, useAttrs } from 'vue'
+
+  // 2. defineOptions — name (PascalCase) + inheritAttrs
+  defineOptions({ name: 'TagChip', inheritAttrs: false })
+
+  // 3. types (props interfaces, exported variant unions)
+  export type TagChipKind = 'primary' | 'secondary'
+  interface Props { kind?: TagChipKind; disabled?: boolean }
+
+  // 4. props
+  const props = withDefaults(defineProps<Props>(), { kind: 'primary', disabled: false })
+
+  // 5. emits
+  const emit = defineEmits<{ click: [event: MouseEvent, label: string] }>()
+
+  // 6. models · 7. slots
+  const model = defineModel<string>({ default: '' })
+  defineSlots<{ default(): unknown }>()
+
+  // 8. inject / composables
+  const attrs = useAttrs()
+
+  // 9. local state · 10. computed
+  const testId = computed(() => (attrs['data-testid'] as string) ?? 'tag-chip')
+
+  // 11. watchers / lifecycle · 12. functions · 13. defineExpose (minimal, intentional)
+</script>
+```
+
+## Wrong
+
+<!-- prettier-ignore -->
+```vue
+<script setup>
+  // runtime macros, manual v-model wiring, no defineOptions, imports out of order
+  const props = defineProps({ modelValue: String, kind: { type: String, default: 'primary' } })
+  const emit = defineEmits(['update:modelValue', 'click'])
+  import { computed } from 'vue'
+</script>
+
+<!-- a slot rendered without a defineSlots declaration -->
+<template><div><slot /></div></template>
+```
diff --git a/.claude/rules/webkit-composables.md b/.claude/rules/webkit-composables.md
new file mode 100644
index 0000000000..57f789875d
--- /dev/null
+++ b/.claude/rules/webkit-composables.md
@@ -0,0 +1,88 @@
+# Rule: composables — one shape, `readonly` outward, cleanup on scope dispose
+
+A composable (`useXxx`) is a public building block: imported, typed, and relied on across
+the app, so it follows one contract — a predictable surface, a predictable lifetime, and
+no surprises on destructure. The `webkit/authoring-standards` ESLint rule blocks the two
+mechanical violations (returning a `reactive()` object, authoring the file as `.js`); the
+rest of the contract is convention, enforced in review.
+
+## Do
+
+- Name it `useXxx`, one composable per file, kebab filename, always `.ts`
+  (`use-controllable.ts`). Co-locate it in the component's own `composables/` folder when
+  it is specific to that component; put shared ones in your project's `src/composables/`.
+- Return an **object of refs / computed / functions**. Wrap reactive state that escapes
+  in `readonly()`; expose writes only through returned setter functions.
+- Accept arguments as `MaybeRefOrGetter<T>` and resolve them with `toValue()`, so a
+  caller may pass a ref, a getter, or a raw value.
+- Use generics and an **explicit return type**; export the return type when a consumer
+  needs to hold it (`UseControllableReturn<T>`).
+- Tear down everything you start: remove every listener, timer, `requestAnimationFrame`,
+  and observer in `onScopeDispose` — it also fires inside a detached `effectScope()`,
+  unlike `onUnmounted`, so the composable never leaks between tests.
+- Call lifecycle composables **synchronously in `setup`** — Vue can only bind lifecycle
+  hooks during synchronous setup.
+- Use `useId()` for generated ids (SSR-stable). Reuse VueUse primitives
+  (`useEventListener`, `onClickOutside`) — they already own their cleanup.
+- Make instance vs singleton deliberate: state created **inside** the function is
+  per-instance; state at **module scope** is a shared singleton — say which one it is in
+  the name and the doc comment, never by accident of where a `ref` was declared.
+- For state shared root-to-leaf in a compound component, write a context composable: a
+  typed `InjectionKey<T>` next to the root, and a `useXxxContext()` that injects and
+  **throws a clear error when used outside its provider**. Only the root calls
+  `provide()`; leaves only inject through the composable.
+
+## Do not
+
+- Never return a `reactive()` object — destructuring loses reactivity. Blocked by lint.
+- Never author a composable as `.js` — consumers need the derivable return type. Blocked
+  by lint.
+- Never expose mutable state outward, and never accept a `reactive` object as an
+  argument — `readonly()` out, `MaybeRefOrGetter` + `toValue()` in.
+- Never use `any` or omit the return type.
+- Never register a listener/timer/observer without `onScopeDispose` cleanup (or a VueUse
+  primitive that owns it).
+- Never call a lifecycle composable after an `await` or outside `setup`.
+- Never roll your own id counter — use `useId()`.
+- Never `provide()` from anything other than a context composable invoked at a component
+  root.
+- Never mix data fetching, HTTP clients, or store logic into a UI composable — that
+  belongs in your data layer; components reach loading/empty/error states through props.
+
+## Correct
+
+<!-- prettier-ignore -->
+```ts
+// use-controllable.ts — pure, per-instance, readonly outward
+export interface UseControllableReturn<T> {
+  value: Readonly<Ref<T>>
+  setValue: (next: T) => void
+}
+
+export function useControllable<T>(
+  modelValue: MaybeRefOrGetter<T | undefined>,
+  fallback: T,
+  emit: (value: T) => void
+): UseControllableReturn<T> {
+  const internal = ref(fallback) as Ref<T>
+  const value = computed(() => toValue(modelValue) ?? internal.value)
+  const setValue = (next: T) => {
+    internal.value = next
+    emit(next)
+  }
+  return { value: readonly(value) as Readonly<Ref<T>>, setValue }
+}
+```
+
+## Wrong
+
+<!-- prettier-ignore -->
+```ts
+// Returns reactive() (destructure loses reactivity), exposes mutable
+// state directly, and registers a listener that is never removed.
+export function useDropdown(open) {
+  const state = reactive({ open })
+  window.addEventListener('keydown', onKeydown)
+  return state
+}
+```
diff --git a/.claude/rules/webkit-construction-standards.md b/.claude/rules/webkit-construction-standards.md
new file mode 100644
index 0000000000..f6f2e55b84
--- /dev/null
+++ b/.claude/rules/webkit-construction-standards.md
@@ -0,0 +1,38 @@
+# Rule: building your own Vue components — the construction standards
+
+When this project builds a component of its own (a screen part the design system does not
+ship), it follows the same construction standards the design system's components are built
+with. One pattern per concern — follow ✅, avoid ❌.
+
+| Pattern         | ❌ Avoid                                                        | ✅ Do                                                                                                           |
+| --------------- | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| Two-way value   | `defineProps({ modelValue })` + `emit('update:modelValue')`     | `const model = defineModel<string>()`                                                                           |
+| Props           | runtime `defineProps({ kind: { type: String } })` · `any`       | typed `withDefaults(defineProps<Props>(), {…})` + JSDoc per prop                                                |
+| Prop vocabulary | `variant` · `sm/md/lg` · `isDisabled` · `closeable`             | `kind` · `small/medium/large` · `disabled` · `dismissible`                                                      |
+| Emits           | `defineEmits(['click'])` · `emit('click', item)`                | typed `defineEmits<{ 'item-click': [e, item] }>()` — DOM event first                                            |
+| Slots           | `<slot/>` with no declaration                                   | typed `defineSlots<{ default(): unknown }>()`                                                                   |
+| Composables     | `return reactive({…})` · listeners with no cleanup              | `return { value: readonly(v), set }` · args via `toValue()` · cleanup in `onScopeDispose`                       |
+| Styling         | `const kindClasses = {…}` · `<style>` blocks · hex/palette      | utilities inline on the root, variants via `data-*` + theme tokens                                              |
+| Structure       | one file, many components · random script order                 | one component per folder/file · fixed `<script setup>` order (options → props → emits → models → slots → state) |
+| Root element    | wrapper `<div>` swallowing attrs · `as` prop · `class` in props | own the root · `inheritAttrs: false` + `v-bind="$attrs"` · polymorphism via `href`                              |
+| States          | ad-hoc spinner / "no results" string                            | `data-*` states + `@aziontech/webkit/skeleton` / `empty-state`                                                  |
+| Accessibility   | `<div @click>` · ids by counter                                 | native elements · `focus-visible` · `useId()` · `motion-reduce:` on every animation                             |
+| data-testid     | none, or duplicated                                             | root `:data-testid` with a stable, derived fallback                                                             |
+| Deprecation     | silent rename/removal                                           | `@deprecated` naming the replacement + version, then remove in a major                                          |
+
+## The full rules (one per pattern)
+
+Each row above is a one-line digest; the full rule (with examples) ships alongside this
+file: `webkit-v-model.md`, `webkit-props.md`, `webkit-prop-vocabulary.md`,
+`webkit-emits.md`, `webkit-slots.md`, `webkit-composables.md`, `webkit-styling.md`,
+`webkit-component-structure.md`, `webkit-root-element.md`, `webkit-component-states.md`,
+`webkit-accessibility.md`, `webkit-testid.md`, `webkit-deprecation.md`.
+
+## Notes
+
+- These are the design system's `scope: general` standards — they apply to any Vue
+  component, not only to webkit's. The mechanizable ones are **blocked** by the
+  `webkit/authoring-standards` ESLint rule (error) at commit and in CI; the rest are
+  convention + review.
+- Before building, check the catalog first (`suggest_component` on the `webkit` MCP or
+  `node_modules/@aziontech/webkit/catalog.json`) — the component may already exist.
diff --git a/.claude/rules/webkit-deprecation.md b/.claude/rules/webkit-deprecation.md
new file mode 100644
index 0000000000..d77c5d3148
--- /dev/null
+++ b/.claude/rules/webkit-deprecation.md
@@ -0,0 +1,75 @@
+# Rule: deprecate a public part before removing it — mark, keep one major cycle, then delete
+
+Removing or renaming a public part of a component this project authors — the component
+itself, a prop, an event, a slot — is a **breaking change** for everyone who uses it. The
+lifecycle is fixed: mark the part `@deprecated` (naming its replacement and its removal
+version), ship it working for **at least one major version**, then remove it in a
+subsequent major. The `webkit/authoring-standards` ESLint rule blocks a **bare
+`@deprecated`** tag as an error; the cycle length and the version bumps are convention,
+upheld in code review.
+
+## Do
+
+- Write the tag as `@deprecated since <version> — use <replacement> instead. Removed in
+<version>.` Both the replacement and the removal version are required — a deprecation
+  with no exit is a warning that never ends.
+- Ship the marking as a `patch`/`minor`; ship the removal as a **major** (`!` on the
+  commit type or a `BREAKING CHANGE:` footer).
+- Keep the deprecated part **fully working** during its cycle — annotate it, do not
+  change its behavior.
+- When `webkit/no-deprecated-component` flags an import of a webkit component marked
+  deprecated in the catalog, migrate to the named replacement before the next major.
+
+## Do not
+
+- Never remove or rename a public part without a deprecation cycle first — no silent
+  removals.
+- Never write a bare `@deprecated` (no replacement, no removal version) — blocked by
+  `webkit/authoring-standards`.
+- Never change a deprecated part's behavior during its cycle — annotate, don't mutate.
+- Never ship a removal as anything other than a major, breaking release.
+- Never keep building on a deprecated webkit part once the replacement is named — the
+  lint warning is the migration window, not noise to suppress.
+
+## Correct
+
+<!-- prettier-ignore -->
+```ts
+interface Props {
+  /**
+   * @deprecated since 4.2 — use `kind` instead. Removed in 5.0.
+   */
+  variant?: string
+  /** Visual variant. */
+  kind?: ButtonKind
+}
+```
+
+Deprecating a whole component:
+
+<!-- prettier-ignore -->
+```vue
+<script setup lang="ts">
+  /** @deprecated since 4.2 — use `EmptyState` instead. Removed in 5.0. */
+  defineOptions({ name: 'EmptyResultsBlock' })
+</script>
+```
+
+## Wrong
+
+<!-- prettier-ignore -->
+```ts
+interface Props {
+  /** @deprecated */ // bare tag: no replacement, no removal version — blocked by lint
+  variant?: string
+}
+```
+
+<!-- prettier-ignore -->
+```ts
+// Renamed `variant` to `kind` outright in a minor release — a silent breaking
+// change. Consumers get no migration window and no machine-readable warning.
+interface Props {
+  kind?: ButtonKind
+}
+```
diff --git a/.claude/rules/webkit-emits.md b/.claude/rules/webkit-emits.md
new file mode 100644
index 0000000000..0d91d8ae10
--- /dev/null
+++ b/.claude/rules/webkit-emits.md
@@ -0,0 +1,90 @@
+# Rule: typed `defineEmits`, kebab-case names, event-first activation payloads
+
+Events are declared with the **type-only `defineEmits`** form (tuple type-literal), named in
+**kebab-case**, and split into two kinds with two payload shapes. **Model/value events**
+(`update:<name>`, `value-change`, `sort`) carry the new value only. **Activation events**
+(click, select, remove, `item-click`, `row-click`) carry the DOM event **first** and, when
+the activation targets a specific subject, that subject **second**: `(event, item)`. The
+consumer of an event must be able to tell **what happened** (the event) and **which thing
+it happened to** (the item) from the payload alone.
+
+The `webkit/authoring-standards` ESLint rule blocks the runtime array form
+(`defineEmits([...])` must become the typed form) and a hand-rolled `modelValue` prop +
+`update:modelValue` emit (use `defineModel` instead). Event naming and payload order are
+convention, upheld in code review.
+
+## Do
+
+- Declare emits with `const emit = defineEmits<{ 'item-click': [event: MouseEvent, item: MenuItem] }>()` —
+  the tuple type-literal form, so every payload is typed.
+- Name every event in **kebab-case**: `item-click`, `row-click`, `value-change`.
+- Emit activation events as `(event, item?)` — DOM event first, subject second. A lone
+  control with no distinct subject (a plain button, a close control) emits `(event)` alone.
+- Pick the smallest `item` that says which element was activated: the bound data object,
+  or its `value` / `label` / `href` when there is no richer model.
+- Use `defineModel` for any two-way value; keep `update:<name>` in `defineEmits` only for
+  a one-way "changed" signal that is not a `v-model`.
+- Keep model/value events value-only: `emit('update:value', next)`, `emit('sort', direction)` —
+  no DOM event in the payload.
+
+## Do not
+
+- Never use the runtime array form `defineEmits(['click'])` — blocked by lint; payloads
+  lose their types.
+- Never declare a manual `modelValue` prop plus `update:modelValue` emit — blocked by
+  lint; `defineModel` expresses the two-way value.
+- Never name an event in camelCase (`itemClick`) or fake it with an `on`-prefixed prop
+  (`onValueChange`) — declare the event and let consumers bind `@item-click`.
+- Never emit the subject before the event (`(item, event)`) or bury the event inside a
+  payload object (`{ value, event }`) — the event is always the first positional argument.
+- Never emit a redundant `<x>-change` alongside `update:<x>` / `v-model`. A genuinely
+  distinct commit event (e.g. commit-on-blur) is a bare `change`, never `<x>-change`.
+- Never add a DOM event to a model/value event (`update:*`, `value-change`, `sort`) —
+  those emit their value only.
+- Never pass the same datum both positionally and inside a payload object.
+
+## Correct
+
+<!-- prettier-ignore -->
+```vue
+<script setup lang="ts">
+  interface MenuItem {
+    label: string
+    href?: string
+  }
+
+  // two-way value: a model, not a manual emit pair
+  const value = defineModel<string>('value')
+
+  const emit = defineEmits<{
+    // activation with a subject — event first, item second
+    'item-click': [event: MouseEvent, item: MenuItem]
+    // lone control — event only
+    close: [event: MouseEvent]
+    // one-way value event — the new value, no DOM event
+    sort: [direction: 'asc' | 'desc']
+  }>()
+
+  function onItemClick(event: MouseEvent, item: MenuItem) {
+    emit('item-click', event, item)
+  }
+</script>
+```
+
+## Wrong
+
+<!-- prettier-ignore -->
+```vue
+<script setup lang="ts">
+  // runtime array form — untyped payloads (blocked by lint)
+  const emit = defineEmits(['itemClick', 'update:modelValue'])
+
+  // manual v-model pair instead of defineModel (blocked by lint)
+  const props = defineProps<{ modelValue: string }>()
+
+  function onItemClick(event: MouseEvent, item: { label: string }) {
+    emit('itemClick', item, event) // camelCase name, subject before event
+    emit('update:modelValue', { value: item.label, event }) // event buried in the payload
+  }
+</script>
+```
diff --git a/.claude/rules/webkit-imports.md b/.claude/rules/webkit-imports.md
new file mode 100644
index 0000000000..067a35e145
--- /dev/null
+++ b/.claude/rules/webkit-imports.md
@@ -0,0 +1,30 @@
+# Rule: importing from @aziontech/webkit
+
+Every component has one flat, single-segment import path. Get the path right and the binding name follows from it.
+
+## Do
+
+- Import from the flat path: `import Button from '@aziontech/webkit/button'`.
+- Name the binding in PascalCase matching the last path segment: `@aziontech/webkit/empty-state` -> `EmptyState`, `@aziontech/webkit/mini-button` -> `MiniButton`.
+- Import each component you use on its own line, from its own subpath.
+
+## Do not
+
+- Do not prefix with a category. Never `@aziontech/webkit/feedback/skeleton` — the category lives in the folder, not the import.
+- Do not import from `/src/`. Never `@aziontech/webkit/src/components/...`.
+- Do not reach into deep internals or a component's private files.
+- Do not use a bare-package barrel: never `import { Button } from '@aziontech/webkit'`. There is no barrel entry — it breaks tree-shaking and will not resolve.
+- Do not let the binding disagree with the subpath: `import Chip from '@aziontech/webkit/chips'` is wrong (singular binding, plural path). Pick the real path; match the binding to it.
+
+## Correct
+
+```vue
+<script setup>
+  import Button from '@aziontech/webkit/button'
+  import EmptyState from '@aziontech/webkit/empty-state'
+</script>
+```
+
+## How to find the real path
+
+The published subpaths are listed in `node_modules/@aziontech/webkit/catalog.json` (the `imports` object). If a path is not there, it does not exist — do not guess. Ask the webkit MCP (`suggest_component`) or grep the catalog.
diff --git a/.claude/rules/webkit-motion.md b/.claude/rules/webkit-motion.md
new file mode 100644
index 0000000000..49dba8f71e
--- /dev/null
+++ b/.claude/rules/webkit-motion.md
@@ -0,0 +1,78 @@
+# Rule: motion uses theme animation tokens only — never hardcoded timing or a lib
+
+Animation in UI built on `@aziontech/webkit` is constrained to the design system's motion
+vocabulary: the `animate-*` utilities and the `duration-*` / `ease-*` / `curve` tokens from
+`@aziontech/theme`. Motion confirms an action or guides attention — it never decorates — and it
+always has a reduced-motion escape. This is the invariant behind the `/webkit-motion-polish` skill
+(which is the how-to); this rule is the constraint.
+
+## Do
+
+- Animate with the catalogued `animate-*` utilities (`animate-fade-in`, `animate-slide-down`,
+  `animate-popup-scale-in/out`, …) — discover the catalog via the webkit MCP or
+  `node_modules/@aziontech/theme`. For `animate-popup-scale-*`, set `--popup-origin` per instance.
+- Take timing only from tokens: `duration-fast-01/02`, `duration-moderate-01/02`,
+  `duration-slow-01/02`; curves `ease-productive-entrance/exit`, `ease-expressive-entrance/exit`.
+- Animate **only compositor props** — `transform` and `opacity` (plus the catalogued
+  `animate-slide-down` for disclosure height). Interaction feedback is ≤ `duration-moderate-01`
+  (150ms): `ease-out` on entrance, `ease-in` on exit.
+- Pair **every** motion-bearing class with a `motion-reduce:*` escape on the same class string:
+  `motion-reduce:transition-none` / `motion-reduce:transform-none` / `motion-reduce:animate-none`.
+- For `data-state="open|closed"` overlay motion, read `duration` + `curve` from the tokens and emit
+  the inline `transition` per phase; keep transform/opacity in classes, only timing inline.
+
+## The panel recipe (sidebar / drawer / any v-if region)
+
+A conditionally rendered region never animates by itself — wrap the `v-if` in a Vue `Transition`
+and hand the enter/leave phases to the catalogued utilities. For lateral panels the pair is
+`animate-slide-in-left` / `animate-slide-out-left` (right-anchored drawers use the `-right` pair):
+
+```vue
+<Transition
+  enter-active-class="animate-slide-in-left motion-reduce:animate-none"
+  leave-active-class="animate-slide-out-left motion-reduce:animate-none"
+>
+  <aside v-if="sidebarOpen">...</aside>
+</Transition>
+```
+
+Content or backdrops appearing in place use `animate-fade-in` / `animate-fade-out` in the same
+shape; vertical disclosure uses `animate-slide-down`. Ask the webkit MCP
+(`list_tokens` with category `animations`) for every utility, its timing, and when to use it.
+
+## Never
+
+- A hardcoded duration (`duration-[180ms]`, `transition: opacity 200ms`) or an inline
+  `ease-[cubic-bezier(...)]` — the values live in the theme tokens.
+- Animating layout props (`width`, `height`, `top`, `left`, `margin`, `padding`) — they thrash
+  layout (exception: the catalogued `animate-slide-down`).
+- A component-local `@keyframes`, or any external animation library (`gsap`, `framer-motion`,
+  `motion`, `@vueuse/motion`, `@formkit/auto-animate`, lottie, popmotion). Use the utilities above +
+  Vue `<Transition>` / `<TransitionGroup>`.
+- A motion class with no `motion-reduce:*` fallback.
+
+## Enforcement
+
+- The mandatory `motion-reduce:*` escape overlaps the shipped `webkit-accessibility` rule (motion is
+  an a11y concern) and is verified at runtime by the `webkit-ui-verifier` agent (it exercises
+  `prefers-reduced-motion`).
+- The no-external-lib constraint holds because the forbidden packages are never installed — an import
+  fails the build.
+- The token discipline (no hardcoded ms / inline `cubic-bezier` / layout-prop animation) is the
+  `/webkit-motion-polish` review pass; where a stylelint rule can catch a raw `cubic-bezier(` or a
+  bare `transition: all`, wire it as the mechanical floor. Suggestion is not the ceiling: what a lint
+  can block, block.
+
+### Known `no-hardcoded-motion` gaps (review still owns these)
+
+The lint is a heuristic over class and style strings; three shapes are known to slip past it and
+stay a review concern:
+
+- **Tailwind arbitrary properties** bypass the timing check: in `[transition:opacity_200ms]` the
+  underscore defeats the word boundary, and `[animation-delay:2s]` sits outside the `animation:`
+  prefix — while `[transition:all]` is caught.
+- **Tailwind v4's dynamic numeric scale**: `duration-937` passes (only the bracketed
+  `duration-[937ms]` form is flagged).
+- **The `motion-reduce:` pairing check reads only the static `class` attribute** — when the escape
+  lives in a coexisting bound `:class` fragment, the static-side motion class is flagged even
+  though the element is correctly paired.
diff --git a/.claude/rules/webkit-performance.md b/.claude/rules/webkit-performance.md
new file mode 100644
index 0000000000..e7880ffe8c
--- /dev/null
+++ b/.claude/rules/webkit-performance.md
@@ -0,0 +1,44 @@
+# Rule: import webkit for the smallest bundle
+
+Every component is importable in a way that ships only what you render. Choose the narrow path.
+
+## Prefer the tree-shakeable path
+
+Composition components (Table, Dropdown, Dialog, and similar) expose two roots:
+
+- The compound path — `@aziontech/webkit/table` — attaches every sub-component for dot-notation (`Table.Row`, `Table.Cell`). Convenient, but a bundler keeps all the sub-components even if you only render the root.
+- The `-root` path — `@aziontech/webkit/table-root` — is the standalone root with nothing attached.
+
+Rules:
+
+- If you only need the root, import the `-root` path.
+- If you need a few sub-components, import each on its own subpath (`@aziontech/webkit/table-row`) instead of pulling the whole compound.
+- Reach for the compound path only when the dot-notation ergonomics are worth shipping the whole set.
+
+```js
+// Only the root — smallest:
+import Table from '@aziontech/webkit/table-root'
+
+// A specific sub-component — still tree-shakeable:
+import TableRow from '@aziontech/webkit/table-row'
+
+// The full compound — convenient, heavier:
+import Table from '@aziontech/webkit/table'
+```
+
+## Icons: import the font once, use CSS classes
+
+- `@aziontech/icons` is an icon font. Import it once for its side effects (`import '@aziontech/icons'`, near the app entry) and reference icons by their CSS class.
+- Do not import a default/namespace binding (`import Icons from '@aziontech/icons'`) — the entry is CSS; a binding is meaningless and usually a mistake.
+
+## Lazy-load heavy overlays
+
+Dialogs, drawers, and tables are often off-screen at first paint. Load them on demand:
+
+```js
+import { defineAsyncComponent } from 'vue'
+
+const Dialog = defineAsyncComponent(() => import('@aziontech/webkit/dialog'))
+```
+
+This keeps the overlay out of the initial bundle until it is actually opened.
diff --git a/.claude/rules/webkit-prefer-over-custom.md b/.claude/rules/webkit-prefer-over-custom.md
new file mode 100644
index 0000000000..d71eb04606
--- /dev/null
+++ b/.claude/rules/webkit-prefer-over-custom.md
@@ -0,0 +1,23 @@
+# Rule: use the webkit component before building your own
+
+Before you write UI, check whether the design system already has it. It almost always does — and its version is themed, accessible, and consistent with the rest of the product.
+
+## Do this first
+
+1. Check the catalog: the webkit MCP (`suggest_component` with a plain description of what you need) or `node_modules/@aziontech/webkit/catalog.json` (the `imports` object lists every component).
+2. If a component exists, use it. Compose it, pass its props, fill its slots.
+3. If it almost fits, prefer configuring/composing the webkit component over forking it.
+
+## Do not
+
+- Do not hand-roll a button, input, modal, table, tooltip, badge, or any common UI when webkit already ships one.
+- Do not pull in another component library (PrimeVue, a headless UI kit, a random npm widget) for something webkit covers.
+- Do not copy a component's markup into your own file to tweak it — use the real component so it stays themed and accessible.
+
+## When webkit genuinely lacks it
+
+- Build the smallest custom piece you need, using `@aziontech/theme` tokens for all color/spacing/typography (see the tokens rule).
+- Keep it composable with webkit components rather than reinventing their look.
+- Consider raising the gap with the design-system team so it can be added once for everyone.
+
+The goal: your UI looks and behaves like the rest of the product because it is built from the same parts.
diff --git a/.claude/rules/webkit-prop-vocabulary.md b/.claude/rules/webkit-prop-vocabulary.md
new file mode 100644
index 0000000000..17a5b39b69
--- /dev/null
+++ b/.claude/rules/webkit-prop-vocabulary.md
@@ -0,0 +1,89 @@
+# Rule: one prop name, one type, one default per concept
+
+The same concept ships under the **same prop name, type, and default** on every component —
+in webkit and in the components you author in this project. When one component calls it
+`variant` and another `kind`, or one spells it `closeable` and another `closable`, everyone
+relearns the API per component and AI-generated code guesses wrong. This vocabulary is
+**convention + review** in this project (no lint rule checks prop names). The adjacent
+authoring shape _is_ enforced: the `webkit/authoring-standards` ESLint rule blocks a manual
+`modelValue` prop + `update:modelValue` emit — use `defineModel` / `v-model` instead.
+
+## The dictionary
+
+| Concept                              | Canonical prop                                | Type                                                            | Default                                  | Banned aliases                                                                                                                                             |
+| ------------------------------------ | --------------------------------------------- | --------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Visual/structural variant            | `kind`                                        | component-specific string union                                 | component-specific                       | `variant`, `appearance`, `intent`                                                                                                                          |
+| Severity / status color              | `severity`                                    | shared string union                                             | per family                               | `status`                                                                                                                                                   |
+| Size                                 | `size`                                        | `'small' \| 'medium' \| 'large'` (this order; a subset is fine) | `large` for actions/links, else `medium` | `xs`/`sm`/`md`/`lg`/`xl`, reordered unions                                                                                                                 |
+| Light-dismiss (outside-click / Esc)  | `dismissible`                                 | `boolean`                                                       | overlay-specific                         | `dismissable`, `closeable`                                                                                                                                 |
+| Explicit close affordance (X button) | `closable`                                    | `boolean`                                                       | `false`                                  | — (distinct concept, not an alias of `dismissible`)                                                                                                        |
+| Primary heading text                 | `title`                                       | `string`                                                        | `''`                                     | `heading`, `header` (as a prop)                                                                                                                            |
+| Primary two-way value                | `modelValue` (default `v-model`)              | component-specific                                              | per component                            | ad-hoc names like `isToggled`                                                                                                                              |
+| Overlay open state                   | `open` (+ `v-model:open`), seed `defaultOpen` | `boolean`                                                       | `undefined` (controlled)                 | `visible`, `show`, `opened`                                                                                                                                |
+| Disabled                             | `disabled`                                    | `boolean`                                                       | `false`                                  | `isDisabled`, `enabled`                                                                                                                                    |
+| Loading                              | `loading`                                     | `boolean`                                                       | `false`                                  | `isLoading`                                                                                                                                                |
+| Leading/trailing glyph               | `icon`                                        | `string` (icon name)                                            | `''`                                     | `iconName`, `leadingIcon`, `trailingIcon`                                                                                                                  |
+| Accessible name                      | `ariaLabel` (+ prefixed `xAriaLabel`)         | `string`                                                        | per component                            | `aria-label` as a prop                                                                                                                                     |
+| Boolean (any)                        | no `is`/`has` prefix; **positive polarity**   | `boolean`                                                       | `false`                                  | `isX`, `hasX`; negatives: `hidden`→`visible`, `closed`→`open`, `inactive`→`active`, `collapsed`→`expanded` (`disabled`/`readonly` are accepted exceptions) |
+| Value change signal                  | `v-model` / `update:<x>` only                 | —                                                               | —                                        | a `<x>-change` event that echoes `update:<x>`; a genuinely distinct commit (e.g. commit-on-blur) is a bare `change`                                        |
+
+**Not banned — legitimate competing uses:** `type` for native pass-throughs (`<input type>`)
+is fine — only a _variant_ named `type` is wrong (rename to `kind`). `value` is fine for
+identity, the `v-model` payload, or display text.
+
+## Do
+
+- Reuse the canonical name whenever a concept already has one — `kind`, `size`, `severity`,
+  `disabled`, `loading`, `icon`, `title`, `open`.
+- Declare `size` with the shared tokens in canonical order; a subset (`'small' | 'medium'`)
+  is fine, a reorder is not. Default `size` to `large` on actions/links, `medium` elsewhere.
+- Name booleans positively and unprefixed: `visible`, `active`, `expanded` — not `hidden`,
+  `isActive`, `collapsed` (`disabled`/`readonly` are the accepted exceptions).
+- Use `defineModel` for two-way values; the ESLint rule `webkit/authoring-standards` blocks
+  the manual `modelValue` + `update:modelValue` pair.
+- When migrating code from another design system, rewrite its names to this vocabulary
+  (`variant` → `kind`, `sm/md/lg` → `small/medium/large`) — never carry them over.
+
+## Do not
+
+- Never introduce a prop whose concept already has a canonical name under a different name.
+- Never use `xs`/`sm`/`md`/`lg`/`xl` tokens for `size`, and never reorder the union.
+- Never prefix a boolean with `is`/`has`, and never name one negatively.
+- Never emit a `<x>-change` event alongside `update:<x>` — it is a redundant echo.
+- Never name overlay visibility `visible`/`show`/`opened` — it is `open` (`v-model:open`).
+- Never confuse `dismissible` (light-dismiss behavior) with `closable` (renders an X button);
+  they are two concepts, not two spellings.
+
+## Correct
+
+<!-- prettier-ignore -->
+```ts
+// banner.vue — canonical vocabulary throughout
+interface Props {
+  kind?: 'inline' | 'floating'            // visual variant
+  severity?: 'info' | 'warning' | 'error' // status color
+  size?: 'small' | 'medium'               // subset, canonical order
+  dismissible?: boolean                   // closes on outside-click / Esc
+  closable?: boolean                      // shows an explicit X button
+  title?: string
+  loading?: boolean                       // positive, unprefixed
+}
+const open = defineModel<boolean>('open') // overlay state: open, never visible
+```
+
+## Wrong
+
+<!-- prettier-ignore -->
+```ts
+interface Props {
+  variant?: 'inline' | 'floating'  // ❌ the variant prop is `kind`
+  status?: 'info' | 'warning'      // ❌ severity color is `severity`
+  size?: 'sm' | 'md' | 'lg'        // ❌ tokens are small / medium / large
+  isLoading?: boolean              // ❌ no is/has prefix — `loading`
+  hidden?: boolean                 // ❌ negative polarity — `visible`
+  closeable?: boolean              // ❌ `dismissible` or `closable`, by concept
+  show?: boolean                   // ❌ overlay state is `open` + v-model:open
+}
+const emit = defineEmits<{ 'update:value': [string]; 'value-change': [string] }>()
+emit('value-change', next)         // ❌ redundant echo of update:value
+```
diff --git a/.claude/rules/webkit-props.md b/.claude/rules/webkit-props.md
new file mode 100644
index 0000000000..d8fa967783
--- /dev/null
+++ b/.claude/rules/webkit-props.md
@@ -0,0 +1,85 @@
+# Rule: type props with a named `interface Props`, `withDefaults`, and JSDoc
+
+Props are the **data + scalar configuration** surface of a component — anatomy (where
+things go) is slots and sub-components, never props. Declare props with a named
+`interface Props` consumed by `defineProps<Props>()`, wrapped in `withDefaults`, with a
+one-line JSDoc on every public prop and named, exported variant unions. The
+`webkit/authoring-standards` ESLint rule blocks the runtime object form
+(`defineProps({ ... })`) as an **error**; prop naming and defaults are convention,
+checked in review.
+
+## Do
+
+- Declare a **named `interface Props`** and consume it with `defineProps<Props>()`.
+- Put every default in **`withDefaults`** — one place, not scattered `??` fallbacks in
+  the template.
+- Give every public prop a **one-line JSDoc** (`/** ... */`) — it feeds the editor hover
+  and generated prop tables. Keep it a plain sentence with **no angle brackets** in
+  script comments (they break downstream SFC parsing).
+- **Export every variant union** as a named type (`ButtonKind`, `ButtonSize`) so a
+  consumer can type a variable that holds it.
+- Default optional **text props to `''`** (never `undefined`) so the template never
+  renders the string "undefined".
+- Default **booleans to `false`** with positive polarity and no `is`/`has` prefix
+  (`disabled`, `loading`, `open`).
+- Model a two-way value with **`defineModel`**, not a plain prop plus a manual
+  `update:*` event.
+
+## Do not
+
+- Never use the runtime object form `defineProps({ kind: { type: String } })` — blocked
+  by `webkit/authoring-standards`. Same for runtime `defineEmits([...])`.
+- Never use `any` or `@ts-ignore` in a prop type — use precise unions or generics.
+- Never declare `class` or `style` in `defineProps` — consumer classes flow through
+  attribute fallthrough (`useAttrs()`), not a prop.
+- Never inline an unnamed variant union — name it and export it.
+- Never repeat the literal set of a union in JSDoc and in the type — derive it from one
+  place.
+- Never turn a slot-shaped concern into a prop (config arrays of UI). Props are data and
+  scalar config; UI structure is composed in slots.
+
+## Correct
+
+<!-- prettier-ignore -->
+```vue
+<script setup lang="ts">
+  /** Visual variant. */
+  export type ButtonKind = 'primary' | 'secondary' | 'outlined' | 'text'
+  /** Size token. */
+  export type ButtonSize = 'small' | 'medium' | 'large'
+
+  interface Props {
+    /** Visual variant. */
+    kind?: ButtonKind
+    /** Size token. */
+    size?: ButtonSize
+    /** Disables interaction. */
+    disabled?: boolean
+    /** Leading icon name. */
+    icon?: string
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    kind: 'primary',
+    size: 'large',
+    disabled: false,
+    icon: ''
+  })
+</script>
+```
+
+## Wrong
+
+<!-- prettier-ignore -->
+```vue
+<script setup lang="ts">
+  // Runtime object form — blocked by webkit/authoring-standards.
+  const props = defineProps({
+    kind: { type: String, default: 'primary' }, // inline, untyped, no exported union
+    isDisabled: Boolean, // "is" prefix — should be `disabled`
+    icon: { type: String, default: undefined }, // text default must be ''
+    label: { type: null as any }, // `any` in a prop type
+    class: String // never declare class/style as a prop
+  })
+</script>
+```
diff --git a/.claude/rules/webkit-root-element.md b/.claude/rules/webkit-root-element.md
new file mode 100644
index 0000000000..a0bb972be6
--- /dev/null
+++ b/.claude/rules/webkit-root-element.md
@@ -0,0 +1,95 @@
+# Rule: own the root element — forward attrs, switch by data, expose the minimum
+
+A component renders **its own root element**: which element it is switches on a data prop,
+consumer attributes reach it via `inheritAttrs: false` + `v-bind="$attrs"`, and the
+imperative surface (`defineExpose`) stays minimal. No wrapper `<div>` that swallows attrs,
+no `as`/`asChild` polymorphism helper, no leaked internal state. This pattern is
+**convention + code review** in this project — no lint rule checks it mechanically. (Token
+discipline inside class strings is enforced separately by the stylelint config and the
+`webkit/no-hardcoded-color` ESLint rule.)
+
+## Do
+
+- Switch the root element by **intent expressed as data**: an `href` prop drives
+  `<component :is="isLink ? 'a' : 'button'">` — anchor when there is a URL, button otherwise.
+- Set `inheritAttrs: false` in `defineOptions` and put `v-bind="$attrs"` on the **real**
+  root, so attributes (including `class`) land on the element the consumer means.
+- Merge the consumer's `class` with `cn` from `@aziontech/webkit/utils/cn` (the only
+  class-composition helper). Keep the base classes a flat literal.
+- Expose **functions only** via `defineExpose` (`focus()`, `open()`) — and only when a prop,
+  event, or `v-model` cannot express the interaction. Default to exposing nothing.
+
+## Do not
+
+- Never switch the root with an `as`/`is` **string prop** — use a data prop like `href`.
+- Never import or invent an `asChild`/`Slot` polymorphism helper — webkit does not ship one.
+- Never wrap the root in a `<div>` that eats `$attrs`.
+- Never declare `class` in `defineProps` — it flows through `useAttrs()` + `cn`.
+- Never `defineExpose` internal reactive state (`internalValue`, raw element refs) — the
+  imperative surface is a small set of named functions.
+
+## Correct
+
+<!-- prettier-ignore -->
+```vue
+<script setup lang="ts">
+  import { computed, useAttrs } from 'vue'
+  import { cn } from '@aziontech/webkit/utils/cn'
+
+  defineOptions({ name: 'ActionCard', inheritAttrs: false })
+
+  interface Props {
+    /** When set, the root renders as an anchor link to this URL. */
+    href?: string
+  }
+  const props = withDefaults(defineProps<Props>(), { href: '' })
+
+  const attrs = useAttrs()
+  const isLink = computed(() => props.href.length > 0)
+</script>
+
+<template>
+  <component
+    :is="isLink ? 'a' : 'button'"
+    v-bind="$attrs"
+    :href="isLink ? href : undefined"
+    :class="cn('rounded-(--shape-card) bg-(--bg-surface) p-(--spacing-md)', attrs.class as string)"
+  >
+    <slot />
+  </component>
+</template>
+```
+
+<!-- prettier-ignore -->
+```vue
+<script setup lang="ts">
+  import { ref } from 'vue'
+  const inputRef = ref<HTMLInputElement | null>(null)
+  defineExpose({
+    /** Move focus to the field. */
+    focus: () => inputRef.value?.focus()
+  })
+</script>
+```
+
+## Wrong
+
+<!-- prettier-ignore -->
+```vue
+<script setup lang="ts">
+  import { ref } from 'vue'
+  // ❌ `as` string prop; `class` declared as a prop; internal state exposed
+  const props = defineProps<{ as?: string; class?: string }>()
+  const internalValue = ref('')
+  defineExpose({ internalValue })
+</script>
+
+<template>
+  <!-- ❌ wrapper div swallows $attrs; the real root never receives the consumer's attributes -->
+  <div class="wrapper">
+    <component :is="props.as ?? 'button'" :class="props.class">
+      <slot />
+    </component>
+  </div>
+</template>
+```
diff --git a/.claude/rules/webkit-slots.md b/.claude/rules/webkit-slots.md
new file mode 100644
index 0000000000..445125ccd2
--- /dev/null
+++ b/.claude/rules/webkit-slots.md
@@ -0,0 +1,85 @@
+# Rule: slots are typed with defineSlots, kebab-named, with fallback inside the slot
+
+Slots are a component's anatomy surface — where the consumer puts content — the
+counterpart to props (data + scalar config). Every slot must be declared and typed with
+`defineSlots`, so the editor knows the slot exists and what a scoped slot yields. An
+untyped slot is invisible to tooling. The `webkit/authoring-standards` ESLint rule blocks
+a `<slot>` in the template with no `defineSlots` declaration; the naming and payload
+conventions below are enforced by review.
+
+## Do
+
+- Declare every slot with a typed `defineSlots<{ ... }>()` in `<script setup>`, one entry
+  per slot, each with a short JSDoc line.
+- Name multi-word slots in **kebab-case** (`prefix`, `header-actions`) — matching how the
+  consumer writes `<template #header-actions>`.
+- Give a **scoped slot** a payload typed as an **object with named keys**
+  (`{ item, index }`) — the smallest thing that identifies the subject.
+- Put fallback content **inside the `<slot>` element** in the template; the fallback
+  renders whenever the consumer passes nothing.
+
+## Do not
+
+- Never render a `<slot>` with no `defineSlots` declaration at all — blocked by lint. Keeping every rendered slot listed in the declaration is convention + review.
+- Never name a slot in camelCase (`headerActions`) — kebab-case (`header-actions`).
+- Never pass scoped-slot payload positionally — always a named-key object.
+- Never add a `label`/`text` prop as a **substitute** for a slot's content; the slot with
+  fallback content covers both cases. A display-text prop may exist as the fallback's
+  source, but the slot stays the primary path.
+
+## Correct
+
+<!-- prettier-ignore -->
+```vue
+<script setup lang="ts">
+  interface Item {
+    id: string
+    label: string
+  }
+
+  defineProps<{ items: Item[] }>()
+
+  defineSlots<{
+    /** Leading adornment. */
+    prefix(): unknown
+    /** Rendered per item; receives the record and its index. */
+    item(props: { item: Item; index: number }): unknown
+  }>()
+</script>
+
+<template>
+  <ul class="flex flex-col gap-(--spacing-xs)">
+    <li v-for="(entry, i) in items" :key="entry.id">
+      <slot name="prefix" />
+      <slot name="item" :item="entry" :index="i">
+        <!-- fallback: shown when the consumer passes no item slot -->
+        {{ entry.label }}
+      </slot>
+    </li>
+  </ul>
+</template>
+```
+
+## Wrong
+
+<!-- prettier-ignore -->
+```vue
+<script setup lang="ts">
+  // No defineSlots: the slots below are invisible to the editor — blocked by lint.
+  // A "label" prop standing in for slot content instead of slot fallback.
+  defineProps<{ items: { id: string; label: string }[]; emptyLabel: string }>()
+</script>
+
+<template>
+  <ul>
+    <!-- camelCase slot name -->
+    <slot name="headerActions" />
+    <li v-for="(entry, i) in items" :key="entry.id">
+      <!-- positional-style payload crammed into one unnamed value -->
+      <slot name="item" :value="[entry, i]" />
+    </li>
+    <!-- prop substituting for a slot's fallback content -->
+    <li v-if="!items.length">{{ emptyLabel }}</li>
+  </ul>
+</template>
+```
diff --git a/.claude/rules/webkit-style-override.md b/.claude/rules/webkit-style-override.md
new file mode 100644
index 0000000000..eb4dd268a3
--- /dev/null
+++ b/.claude/rules/webkit-style-override.md
@@ -0,0 +1,46 @@
+# Rule: never restyle a webkit component with class/style
+
+The design system owns each component's appearance. Putting `class`, `:class`, `style`, or
+`:style` on a webkit component tag overrides its tokens, breaks light/dark theming, and
+makes upgrades unpredictable. The `webkit/no-style-override` ESLint rule blocks it as an
+**error** — this rule is why, and what to do instead.
+
+## Do
+
+- Compose your own markup **inside the component's slots** — your elements, your classes:
+  the component's own surface stays untouched.
+- Use a component that is **built to be personalized** (`styleSeam` in the catalog, e.g.
+  `CardBox`) when a container must accept your classes.
+- Change behavior/appearance through the component's **props** (`kind`, `size`, `severity`).
+- If no prop or slot covers a legitimate need, request the variant in the design system —
+  do not patch it locally.
+
+## Do not
+
+- Never `<Button class="p-8" />` or `<Button :class="cls" />` — blocked by lint.
+- Never `<Dialog style="width: 800px" />` — same.
+- Never wrap a webkit component in a styled element just to force different spacing/colors
+  through inheritance or CSS descendant selectors targeting its internals.
+- Never `!important` against a webkit class, and never target its `data-testid`/internal
+  markup from your stylesheets.
+
+## Correct
+
+<!-- prettier-ignore -->
+```html
+<!-- compose in the slot: your markup, your classes -->
+<Button kind="primary" @click="submit">
+  <span class="inline-flex items-center gap-(--spacing-xs)">Create account</span>
+</Button>
+
+<!-- a styleSeam component accepts consumer classes by design -->
+<CardBox class="bg-(--bg-canvas)">…</CardBox>
+```
+
+## Wrong
+
+<!-- prettier-ignore -->
+```html
+<Button class="p-8 bg-[#0a0a0a]" @click="submit">Create account</Button>
+<Dialog :style="{ width: '800px' }" />
+```
diff --git a/.claude/rules/webkit-styling.md b/.claude/rules/webkit-styling.md
new file mode 100644
index 0000000000..f8a56cab4e
--- /dev/null
+++ b/.claude/rules/webkit-styling.md
@@ -0,0 +1,102 @@
+# Rule: styles live on the root element's class — never as JS presets or local CSS
+
+When authoring your own components alongside @aziontech/webkit, styles go on the
+**template root element's `class` attribute** — not in JavaScript variables, not in
+`<style>` blocks, not in component-local CSS files. Variants are driven by `data-*`
+attributes on the same root, consumed by Tailwind's `data-[attr=value]:` variants.
+Hardcoded colors are blocked mechanically by the `webkit/no-hardcoded-color` ESLint rule
+and the shipped stylelint config; the inline-class + `data-*` shape itself is convention,
+enforced in code review.
+
+## Do
+
+- Put **all** utilities inline on the root's single `class` attribute.
+- Mirror props as `data-*` attributes (`data-kind`, `data-size`, `data-disabled`,
+  `data-state`) and let Tailwind variants do the switching:
+  `data-[kind=primary]:bg-(--primary)` is one utility, not a JS branch.
+- Use `v-bind="$attrs"` so a caller-passed `class` merges onto the root (Vue merges
+  class strings automatically). When caller classes must **win** over internal ones, use
+  `cn` from `@aziontech/webkit/utils/cn` (clsx + tailwind-merge) — the only acceptable
+  class-composition helper, and even then pass it a flat literal string.
+- Use design tokens for every value: `var(--primary)`, `var(--bg-surface)`,
+  `var(--spacing-xs|sm|md|lg)`, `var(--shape-button)` — never raw hex or pixel guesses.
+- For conditional styling, set a `data-*` attribute and style it with a variant
+  (`:data-loading="loading || null"` + `data-[loading]:opacity-80`). The decision lives
+  in HTML, not in JS.
+- Reserve `computed` for derived state (`isAnchor`, `testId`) — never for classes.
+
+## Do not
+
+- No class-preset objects in the script: `const kindClasses = {...}`,
+  `const sizeClasses = {...}`, `const sharedClasses = [...]`, or a
+  `const rootClasses = computed(...)` that only composes classes.
+- No `<style>` blocks (scoped or not), no `.css`/`.scss` files next to a component,
+  no CSS-in-JS, no `styled()` helpers, no tagged css template literals.
+- No `:class="loading ? 'opacity-80' : ''"` ternaries and no `:class="[a, b, c]"`
+  arrays when a flat string + `data-*` variant would do.
+- No backtick multiline template literals inside `:class` in the template — the Vue SFC
+  parser runs before JavaScript and fails with a misleading "Element is missing end tag"
+  error. Use a plain multiline `class` attribute, or a single-quoted constant in
+  `<script setup>` passed to `cn`.
+- No hardcoded colors (`#0a0a0a`, `bg-blue-600`) — lint blocks them; use tokens.
+
+## Token value syntax — the canonical `prop-(--token)` form
+
+Write a token value with Tailwind v4's **paren shorthand**, not the bracket form. This is the single canonical spelling the toolkit standardizes on — it matches what upstream v4 canonicalizes to, so your editor stops flagging every styled line.
+
+- **Whole-value var:** `bg-(--primary)`, `text-(--text-default)`, `rounded-(--shape-card)` — **not** `bg-[var(--primary)]`. Variants compose: `data-[disabled]:bg-(--bg-disabled)`.
+- **Typed value:** `text-(length:--text-body-md)`, `border-(color:--border-default)`, `font-(family-name:--font-sora)`.
+- **Numeric arbitrary:** `z-1`, not `z-[1]`.
+
+Two cases **stay in brackets** — the paren form silently emits no CSS for them:
+
+- **Custom-property declarations:** `[--row-bg:var(--bg-surface)]` (there is no paren shorthand for declaring a property).
+- **Expression values:** anything more than a lone var — `w-[calc(var(--a)*2)]`, gradients, box-shadows, or a **var with a fallback** (`bg-[var(--x,var(--y))]`). Leave these bracketed; converting them drops the style with no error.
+
+## Correct
+
+<!-- prettier-ignore -->
+```vue
+<template>
+  <button
+    v-bind="$attrs"
+    :data-kind="kind"
+    :data-size="size"
+    :data-disabled="disabled || null"
+    :disabled="disabled"
+    class="
+      inline-flex items-center justify-center rounded-(--shape-button)
+      transition-colors duration-150 ease-out motion-reduce:transition-none
+      data-[kind=primary]:bg-(--primary) data-[kind=primary]:text-(--primary-contrast)
+      data-[kind=outlined]:border data-[kind=outlined]:border-(--border-default) data-[kind=outlined]:bg-transparent
+      data-[size=small]:h-7 data-[size=small]:px-(--spacing-xs)
+      data-[size=large]:h-10 data-[size=large]:px-(--spacing-md)
+      data-[disabled]:cursor-not-allowed data-[disabled]:bg-(--bg-disabled)
+    "
+  >
+    <slot />
+  </button>
+</template>
+```
+
+## Wrong
+
+<!-- prettier-ignore -->
+```vue
+<script setup>
+  const kindClasses = {
+    primary: 'bg-(--primary) text-(--primary-contrast)',
+    outlined: 'border border-(--border-default) bg-transparent'
+  }
+  const sizeClasses = { small: 'h-7 px-(--spacing-xs)', large: 'h-10 px-(--spacing-md)' }
+  const rootClasses = computed(() => [kindClasses[props.kind], sizeClasses[props.size]])
+</script>
+
+<template>
+  <button :class="rootClasses" />
+</template>
+
+<style scoped>
+  .button--primary { /* never */ }
+</style>
+```
diff --git a/.claude/rules/webkit-testid.md b/.claude/rules/webkit-testid.md
new file mode 100644
index 0000000000..3845a73703
--- /dev/null
+++ b/.claude/rules/webkit-testid.md
@@ -0,0 +1,80 @@
+# Rule: `data-testid` — derived name on the root, overridable
+
+Every webkit component root carries a **`data-testid`** derived from the component's own
+name — **`<category>-<name>`**, or **`input-<name>`** for input components (`input-chip`,
+`content-badge`, `feedback-toast`, `data-table`). Your tests target that attribute instead
+of inventing selectors, and you override it per instance by passing `data-testid` on the
+tag. Components you author in this project follow the same pattern. This is a convention
+enforced by review — no lint rule checks it, so apply it deliberately.
+
+## Do
+
+- Target components in tests via their derived `data-testid`, never via DOM structure or
+  internal classes.
+- Override the testid per instance when a page renders more than one of the same
+  component: `<Button data-testid="signup-submit" />` — the passed value always wins over
+  the derived fallback.
+- In components you author, read `attrs['data-testid']` for the fallback so a
+  consumer-supplied value is applied once, not twice with different values.
+- Give every interactive sub-element a test must reach (a sort button, a remove control)
+  its own testid derived from the root (`data-table-sort-button`).
+- Keep the `defineOptions` PascalCase name and the kebab testid derived from the same
+  canonical component name.
+
+## Do not
+
+- Do not omit `data-testid` on an interactive component root.
+- Do not hard-code a testid literal that disagrees with the `<category>-<name>` /
+  `input-<name>` derivation.
+- Do not ignore a consumer-supplied `data-testid` — it must win over the fallback.
+- Do not apply the same testid to two elements, or leave a test-critical sub-element
+  unaddressable.
+- Do not select by tag position, utility classes, or generated markup in tests — those
+  change between webkit versions; the testid does not.
+
+## Correct
+
+<!-- prettier-ignore -->
+```vue
+<script setup lang="ts">
+  import { computed, useAttrs } from 'vue'
+  defineOptions({ name: 'Chip', inheritAttrs: false })
+  const attrs = useAttrs()
+  // consumer-supplied data-testid wins; otherwise the derived fallback
+  const testId = computed(() => (attrs['data-testid'] as string) ?? 'input-chip')
+</script>
+
+<template>
+  <div v-bind="$attrs" :data-testid="testId" class="inline-flex gap-(--spacing-xs)">
+    <slot />
+  </div>
+</template>
+```
+
+<!-- prettier-ignore -->
+```html
+<!-- override per instance when the page has several of the same component -->
+<Chip data-testid="plan-chip-pro" />
+<Chip data-testid="plan-chip-free" />
+```
+
+## Wrong
+
+<!-- prettier-ignore -->
+```vue
+<script setup lang="ts">
+  defineOptions({ name: 'Chip', inheritAttrs: false })
+</script>
+
+<template>
+  <!-- hard-coded literal: disagrees with the derivation, and a consumer-supplied
+       data-testid can never win -->
+  <div data-testid="my-chip"><slot /></div>
+</template>
+```
+
+<!-- prettier-ignore -->
+```js
+// selecting by structure instead of the testid — breaks on any markup change
+const removeButton = wrapper.find('div > span:nth-child(2) > button')
+```
diff --git a/.claude/rules/webkit-tokens.md b/.claude/rules/webkit-tokens.md
new file mode 100644
index 0000000000..1e47c6c9d2
--- /dev/null
+++ b/.claude/rules/webkit-tokens.md
@@ -0,0 +1,34 @@
+# Rule: colors, spacing, and typography come from @aziontech/theme
+
+The design system ships tokens. Use them. Never hardcode a raw color or an off-scale value.
+
+## Do
+
+- Use CSS variables from `@aziontech/theme` for color: `var(--primary)`, `var(--bg-surface)`, `var(--text-default)`, `var(--border-default)`, and the other semantic tokens.
+- Use the theme's semantic spacing and radius tokens: `var(--spacing-xs)`, `var(--spacing-md)` (scale `xxs…xxl`), `var(--shape-button)`.
+- Use the generated typography classes / tokens for text (`text-button-lg`, and the other named type scales), not raw font sizes.
+- Import the theme once, near your app entry: `import '@aziontech/theme'` (and `import '@aziontech/icons'` for icons).
+
+## Do not
+
+- No hex: never `#fff`, `#0a0a0a`, `text-[#1e40af]`.
+- No `rgb(...)` / `rgba(...)` / `hsl(...)` literals for design colors.
+- No raw Tailwind palette: never `bg-blue-600`, `text-red-500`, `border-gray-200`. Those are not the design system's colors.
+- No off-scale magic numbers for spacing (`p-[13px]`) when a spacing token exists.
+- No zero with a length unit: write `0`, never `0px` / `0rem` / `0em`. A zero is identical in every unit, so the unit is noise — and it makes the same value read three different ways. This covers tokens, arbitrary values (`p-[0px]`), inline `style`, and authored CSS. Units that carry meaning at zero are fine: `0%`, `0s`, `0deg`, `0fr`. One exception: inside `calc()`/`min()`/`max()`/`clamp()` CSS requires a unit on the zero — there, write `0rem` (never `0px` / `0em`).
+
+## Correct
+
+```html
+<div class="bg-(--bg-surface) text-(--text-default) p-(--spacing-md) rounded-(--shape-card)">
+  ...
+</div>
+```
+
+## Wrong
+
+```html
+<div class="bg-[#161616] text-white p-[13px] m-[0px] rounded-md">...</div>
+```
+
+The full token catalog is generated by `@aziontech/theme`. If you need a color that has no token, that is a design-system gap — raise it, do not inline a hex.
diff --git a/.claude/rules/webkit-v-model.md b/.claude/rules/webkit-v-model.md
new file mode 100644
index 0000000000..53cbd47d5d
--- /dev/null
+++ b/.claude/rules/webkit-v-model.md
@@ -0,0 +1,82 @@
+# Rule: two-way state goes through `defineModel`
+
+Every two-way value a component exposes is declared with `defineModel()` (Vue 3.4+) —
+never a hand-written `modelValue` prop paired with an `update:modelValue` emit, and never
+a local `ref` mirrored into a `watch`. One macro solves both problems every stateful
+component has: the **controlled/uncontrolled split** (when the parent binds `v-model` the
+parent owns the value; when it doesn't, the returned ref holds local state) and the
+**boilerplate**. The `webkit/authoring-standards` ESLint rule blocks the manual
+`modelValue` + `update:modelValue` pair as an **error** — this rule is why, and what to
+write instead.
+
+## Do
+
+- Declare the primary two-way value as `const model = defineModel<Type>({ default: ... })`
+  — consumers bind it with `v-model`.
+- Declare each secondary two-way value as a **named** model —
+  `const open = defineModel<boolean>('open', { default: false })` — consumers bind
+  `v-model:open`.
+- Put the default in the `defineModel` options object, not in a separate `withDefaults`.
+- Normalize on the boundary with the `get` / `set` options (trim, clamp, coerce) so the
+  parent's value and the internal value never disagree.
+- Type every model explicitly (`defineModel<string>()`) — never let it infer `any`.
+- Name models by the shared vocabulary: the primary value is the default model; overlay
+  open state is `open` (seeded by `defaultOpen`), never `visible` / `show` / `isToggled`.
+  Naming is convention + review in this project.
+- Treat renaming a model, adding a required second model, or changing a model's type as a
+  **breaking change** — every `v-model` binding on it changes. Migrating a manual
+  `modelValue` pair onto `defineModel` is **not** breaking: the public contract
+  (`v-model`, the `update:modelValue` event) stays identical.
+
+## Do not
+
+- Never declare a `modelValue` prop plus an `update:modelValue` emit by hand when
+  `defineModel` expresses it — blocked by lint.
+- Never mirror a prop into a local `ref` via `watch` to fake two-way binding — that is
+  exactly the bug factory `defineModel` removes (forget the watch, forget to emit, emit
+  the stale value).
+- Never put a model's default in `withDefaults`; it goes in the `defineModel` options.
+- Never leave a model untyped (`defineModel()` with no generic).
+- Never name a model off-vocabulary (`visible`, `show`, `value`, `isToggled`).
+
+## Correct
+
+<!-- prettier-ignore -->
+```vue
+<script setup lang="ts">
+  // Primary value — consumer binds v-model="query".
+  // Boundary transform: what leaves the component is always trimmed.
+  const model = defineModel<string>({ default: '', set: (v) => v.trim() })
+
+  // Secondary value — consumer binds v-model:open="isOpen"
+  const open = defineModel<boolean>('open', { default: false })
+</script>
+
+<template>
+  <input :value="model" @input="model = ($event.target as HTMLInputElement).value" />
+</template>
+```
+
+<!-- prettier-ignore -->
+```html
+<!-- Consumer side: works controlled (bound) or uncontrolled (unbound) -->
+<SearchField v-model="query" v-model:open="menuOpen" />
+```
+
+## Wrong
+
+<!-- prettier-ignore -->
+```vue
+<script setup lang="ts">
+  // Hand-rolled pair — blocked by the webkit/authoring-standards ESLint rule
+  const props = defineProps<{ modelValue: string }>()
+  const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+
+  // Local mirror kept in sync by hand — the pattern defineModel removes
+  const local = ref(props.modelValue)
+  watch(
+    () => props.modelValue,
+    (v) => (local.value = v)
+  )
+</script>
+```
diff --git a/.claude/skills/webkit-baseline-ui/SKILL.md b/.claude/skills/webkit-baseline-ui/SKILL.md
new file mode 100644
index 0000000000..e4c1addf55
--- /dev/null
+++ b/.claude/skills/webkit-baseline-ui/SKILL.md
@@ -0,0 +1,208 @@
+---
+name: webkit-baseline-ui
+description: Fast deslop pass for UI built on @aziontech/webkit — enforce components-only, tokens-only (typography/color/shape/spacing/shadow), correct typography hierarchy, and consistent spacing rhythm. Use for a quick cleanup or polish review.
+status: active
+last_updated: 2026-07-21
+scope: general
+enforced_by: [webkit-tokens, webkit-prefer-over-custom, webkit-styling]
+---
+
+# Skill: webkit-baseline-ui
+
+## Purpose
+
+Remove AI-generated UI slop from product code built on `@aziontech/webkit`. This is the opinionated
+baseline: real components, real tokens, real typography hierarchy, real spacing rhythm — nothing
+hand-rolled, nothing hardcoded.
+
+## How to use
+
+- `/webkit-baseline-ui`
+  Apply the constraints below to any UI work in this conversation.
+- `/webkit-baseline-ui <file>`
+  Review the file against every constraint and output, per violation:
+  - the exact line / snippet (quoted),
+  - why it matters (1 short sentence),
+  - a concrete code-level fix.
+
+## When to invoke
+
+- The user asks to "clean up", "deslop", "polish", or "review" a screen / prototype.
+- Before shipping any UI composed on top of webkit.
+- After scaffolding a screen quickly and wanting a correctness sweep.
+
+## Constraints
+
+### Components
+
+- **MUST** compose from `@aziontech/webkit` whenever a primitive exists. To find a component and its
+  flat import path, ask the webkit MCP `suggest_component`, or read
+  `node_modules/@aziontech/webkit/catalog.json` (`imports`) — every key is a real subpath (e.g.
+  `@aziontech/webkit/button`, `@aziontech/webkit/input-text`, `@aziontech/webkit/dialog`,
+  `@aziontech/webkit/dropdown-menu`).
+- **NEVER** hand-roll a `<button>`, input, modal, tooltip, dropdown, tabs, **or divider** that webkit
+  ships — this includes a separator. A horizontal/vertical rule is **`@aziontech/webkit/divider`**
+  (`<Divider />` / `<Divider orientation="vertical" />`), **never** a hand-rolled `<hr>` or a
+  `<div class="border-t …">` / `<div class="h-px bg-…">`. If you're reaching for a border utility to draw
+  a line between sections, that's the Divider component. (A real, observed failure: a `<div>` with border
+  classes standing in for the Divider — do not.)
+- **NEVER** mix another component library's primitives onto the same surface.
+- **MUST** use `@aziontech/webkit/icon-button` with an `aria-label` for icon-only actions.
+- **MUST** use `@aziontech/webkit/utils/cn` (clsx + tailwind-merge) for any class composition.
+
+### Color — tokens only
+
+- **MUST** use `@aziontech/theme` semantic vars: `bg-(--bg-surface)`, `text-(--text-default)`,
+  `text-(--text-muted)`, `bg-(--primary)`, `text-(--primary-contrast)`,
+  `border-(--border-default)`, `ring-(--ring-color)`, feedback `var(--success|--warning|--danger|--info)`.
+- **NEVER** HEX (`#0af`), `rgb()/rgba()/hsl()`, or Tailwind palette names (`bg-blue-500`, `text-gray-700`).
+- **SHOULD** limit accent color to one per view; the rest carries on surface + text + border tokens.
+
+### Typography — tokens + hierarchy (non-negotiable)
+
+- **MUST** use only the `text-*` typography tokens (the webkit MCP lists them; they ship in
+  `@aziontech/theme`): `text-heading-2xl … text-heading-sm`, `text-body-lg … text-body-xxs`,
+  `text-label-sm/md/lg`, `text-overline-xs/sm/md`, `text-button-md/lg`, `text-link`,
+  `text-big-number-*`.
+- **NEVER** raw `text-xs/sm/base/lg`, `leading-*` (except `leading-none` on an icon set to
+  `text-[length:inherit]`), or `tracking-*` overrides — line-height and tracking are baked into the token.
+- **NEVER** make a heading visually smaller than a label. Respect the order
+  `text-heading-* > text-body-* > text-label-* > text-overline-*`, and don't skip levels arbitrarily.
+- **MUST** use `text-balance` on headings and `text-pretty` on body/paragraph copy.
+- **MUST** use `tabular-nums` for numeric / data columns.
+
+### Section titles — a small heading, optically inset
+
+A **content section** (a titled block sitting above a `CardBox`, an `Item.List`, or a table) is
+labelled with a **small heading**, not an overline:
+
+- **MUST** title the section with `text-heading-xxs text-(--text-default)` — the smallest heading
+  token. `text-overline-*` is **reserved for compact menu / popover group labels** (e.g.
+  `Dropdown.Group`, a Popover section), **not** page section titles.
+- **MUST** give the title an optical inset of `px-(--spacing-xs)` so it lines up with the card's
+  inner content directly below it (the card body pads at `--spacing-md`; the smaller `--spacing-xs`
+  title inset reads as aligned, not indented).
+- **MUST** separate the title from the card it labels by `--spacing-sm` — the section wrapper is
+  `flex flex-col gap-(--spacing-sm)`.
+- **SHOULD**, when the title row also carries a control (a filter dropdown, an action button), wrap it in
+  a `flex min-h-(--size-8) items-center` row so the title baseline matches sibling section titles in
+  other columns (e.g. a two-column page where one title stands alone and the other sits beside a control).
+
+This is the canonical section-title treatment. A section title written as
+`text-overline-sm text-(--text-muted)` is **legacy** — bring it to this pattern when you touch it.
+
+### Shape & elevation — tokens only
+
+- **MUST** use `rounded-(--shape-button)` (buttons), `rounded-(--shape-elements)` (inputs,
+  chips), `rounded-(--shape-card)` (cards), `rounded-(--shape-flat)` (none).
+- **NEVER** `rounded-md/lg` or a numeric radius.
+- **MUST** use `shadow-(--shadow-*)` for elevation (`--shadow-sm` cards, `--shadow-md` overlays);
+  never a bare Tailwind `shadow-md` or a hardcoded `box-shadow`.
+
+### Spacing rhythm — one scale
+
+- **MUST** use only `--spacing-xxs … --spacing-xxl` for padding, gap, and margin:
+  `p-(--spacing-md)`, `gap-(--spacing-sm)`, `mt-(--spacing-xs)`.
+- **NEVER** arbitrary values (`p-[13px]`, `gap-[7px]`), Tailwind's default scale (`p-4`, `gap-3`), or
+  the primitive `--spacing-1 … --spacing-96`.
+- **SHOULD** keep one consistent step between sibling elements; don't alternate `--spacing-xs` and
+  `--spacing-md` between rows of the same list.
+
+### Layout
+
+- **NEVER** `h-screen` — use `h-dvh`.
+- **MUST** respect `safe-area-inset` (`env(safe-area-inset-*)`) for fixed / sticky elements.
+- **SHOULD** use `size-*` for square elements instead of `w-* + h-*`.
+- **SHOULD** drive variant styling from `data-*` attributes (a `data-[state=...]:` Tailwind variant),
+  not from JS class-preset objects — so the switch reads in one place in the markup.
+
+### Width & containers — fluid-first shell, cap only reading width
+
+This section is the **canonical container / max-width doctrine** for webkit apps — the umbrella
+`/webkit-ui-craft` skill defers here, so treat this as the authoritative and complete source.
+
+The default is **fluid**: content fills the space the shell gives it. A container
+(`max-w-(--container-*)`) is the exception, applied only where unbounded width hurts legibility or
+balance. Reach for it in this order.
+
+- **MUST** keep the **app shell fluid-first** — never cap it with a container. The **sidebar**, the
+  **global header**, the **page heading**, and the **main content spacing** (the content zone's
+  `p-(--spacing-*)` inset) all stay full-width and stretch with the viewport. These are chrome; a
+  max-width on them only creates dead gutters.
+- **MUST** cap **reading / input width** with `max-w-(--container-2xs … xl)`: form fields, text
+  columns, focused auth/save cards, fixed side rails. Pick the tight end (`2xs … sm`) for compact
+  settings rows and the loose end (up to `xl`, 576px) for a control column that must fit a longer value.
+  A form input that spans a 2560px screen is a legibility bug, not a feature.
+- **MUST** give **focused create/edit flows** a centered page container — `mx-auto
+max-w-(--container-7xl)` on the flow's content wrapper — so the column sits centered instead of
+  drifting to the left edge on wide screens. This is the one place the _page section_ (not just a field)
+  is capped.
+- **SHOULD** center a **landing / browse / catalog page** — a page of stacked sections, card grids, and
+  tabs (e.g. a Home or Marketplace page) — in a `mx-auto w-full max-w-(--container-7xl)` container on
+  its root `main`, so the content sits centered instead of drifting to the left edge on wide screens; add
+  the page's top breathing room with `pt-(--spacing-*)`. Keep the width **identical across sibling
+  pages of the same kind** so moving between them never reflows the column. The shell around it (sidebar,
+  header, content-zone inset) stays fluid per the first bullet — the cap lives on the page's own `main`,
+  not the app layout content zone.
+- **MUST** cap a **wizard / multi-step deployment flow** tighter than a general create/edit page —
+  `mx-auto max-w-(--container-2xl)` (672px) on the flow's content wrapper. A wizard is a single
+  guided task with one thing to look at per step, so the step column stays narrow and centered; the `7xl`
+  cap above is for broader create/edit pages, not step-by-step wizards.
+- **SHOULD** keep **data-dense surfaces fluid** — tables, dashboards, log/grid views breathe to the full
+  content width; don't box them into a narrow container.
+- **MUST** express every cap as `max-w-(--container-<size>)` — the `@aziontech/theme` container
+  tokens, `--container-3xs … --container-7xl`. **NEVER** a raw `max-w-5xl` / `max-w-[768px]`, and never a
+  legacy helper (`.max-container-width`, `--container-max-width`).
+
+### Control size rhythm — same size on a horizontal line
+
+- **MUST** give buttons and fields sitting on the **same horizontal line** the **same `size`**. When a
+  `@aziontech/webkit/button` sits beside an `@aziontech/webkit/input-text` (search bar + submit, filter
+  row, toolbar, inline form), both take the same size token so their heights match and the row shares one
+  baseline. A `medium` input next to a `large` button breaks the rhythm.
+- **MUST** keep that one size consistent across every control in the group — inputs, selects, buttons,
+  icon-buttons in the same toolbar all share it. Don't mix a `small` icon-button into a row of `medium`
+  controls.
+- **SHOULD** align them on a shared baseline (`items-center` / `items-end`) so equal heights actually
+  read as one line, not stacked boxes.
+- Vertical stacks are exempt — this is about controls that sit **side by side**.
+
+### Design restraint
+
+- **NEVER** gradients, glow effects, or multicolor fills unless explicitly requested.
+- **MUST** give every empty state one clear next action.
+- **NEVER** block paste in `input` / `textarea`.
+
+## Review output
+
+For `/webkit-baseline-ui <file>`, group findings by constraint section. Each finding:
+
+```
+✗ <file>:<line>  `bg-[#0a0a0a] text-blue-500`
+  why: hardcoded HEX + palette color bypass the theme; break dark mode and brand.
+  fix: bg-(--bg-surface) text-(--primary)
+```
+
+End with a one-line verdict: `clean` or `N violations across <sections>`.
+
+## References
+
+- Token catalog: the `@aziontech/theme` tokens (typography, spacing, color, shape, shadow); the webkit
+  MCP lists the `text-*` typography tokens.
+- Component discovery: ask the webkit MCP `suggest_component`, or read
+  `node_modules/@aziontech/webkit/catalog.json` (`imports`) — every key is a real subpath.
+- Variant / styling discipline: drive variants from `data-*` attributes, and compose classes with
+  `@aziontech/webkit/utils/cn` — never a JS class-preset object.
+- For deeper UX (states, heuristics) → `/webkit-ux-heuristics`; for motion → `/webkit-motion-polish`;
+  for final sign-off → `/webkit-impeccable-polish`.
+
+## Definition of Done
+
+- [ ] Every interactive primitive is a `@aziontech/webkit` component.
+- [ ] No HEX / rgb / Tailwind palette / arbitrary spacing / `rounded-md|lg` / raw `text-*` size remains.
+- [ ] Typography uses `text-*` tokens with correct hierarchy; spacing uses only `--spacing-*`.
+- [ ] Section titles use `text-heading-xxs text-(--text-default)` with a `px-(--spacing-xs)` optical inset (and `--spacing-sm` above the card) — not `text-overline-*`, which is reserved for menu/popover group labels.
+- [ ] `h-dvh` not `h-screen`; one accent per view; empty states have an action.
+- [ ] Shell (sidebar, global header, page heading, content-zone spacing) is fluid; only reading width, focused flows, and landing/browse pages are capped, always via `max-w-(--container-*)` — wizards/deployment flows at `max-w-(--container-2xl)`, broader create/edit and landing/browse pages centered at `7xl`.
+- [ ] Buttons and fields on the same horizontal line share one `size` token and a common baseline.
+- [ ] (File mode) Every violation has a quoted line, a why, and a concrete fix.
diff --git a/.claude/skills/webkit-create-surface/SKILL.md b/.claude/skills/webkit-create-surface/SKILL.md
new file mode 100644
index 0000000000..536eab9294
--- /dev/null
+++ b/.claude/skills/webkit-create-surface/SKILL.md
@@ -0,0 +1,191 @@
+---
+name: webkit-create-surface
+description: Where a create or settings form LIVES, and what it is built from. Use whenever you add or review a flow that creates a resource, edits one, or asks a question that commits — a "New X" button, a create route, an "add" affordance inside a detail page, a settings tab. Fixes the surface (a first-level resource creates on a PAGE; anything created inside a resource opens a DRAWER; nothing creates in a dialog), the anatomy every one of them shares (Section band with a Hint glyph over a flush card of rows, control right or stacked when wide), what belongs behind the collapsed Advanced band (the endpoint's not-required, already-defaulted fields), and the commit model (create pages carry a persistent bar; settings pages mount one only once something is edited).
+status: active
+last_updated: 2026-08-13
+scope: general
+enforced_by: [ui-verify, webkit-component-states, webkit-accessibility, webkit-prefer-over-custom]
+---
+
+# Skill: webkit-create-surface
+
+## Purpose
+
+"Where does this form go?" gets asked once per module and answered differently every time. One team
+ships a create page, the next ships a modal for the same shape of task, a third puts an inline row in
+the table — and the product teaches the reader three habits for one action. The cost is not
+aesthetic: a modal cannot be linked or reloaded, a page thrown up over a list destroys the context
+the reader was working in, and a dialog that holds a nine-field form traps them in a box they cannot
+resize.
+
+This skill removes the question. The surface is a **property of what is being created**, not a choice
+the module makes. Three rules decide it, and one anatomy is shared by all of them so a reader who has
+created one resource recognizes every other.
+
+## 1. The surface rule
+
+> **A first-level resource creates on a PAGE. Anything created inside a resource opens a DRAWER.
+> Nothing creates in a dialog.**
+
+**First level** means a resource the primary navigation routes to directly — the things the sidebar
+lists. Creating one is the whole task: the reader came to do it, nothing behind it needs to stay
+visible, and the result is something they will link to, reload and share. So it gets its own URL
+(`/<module>/new`), its own screen, no sidebar, and it survives a refresh and the back button.
+
+**Inside a resource** means a thing that only exists in the context of another: a record in a zone, a
+rule in an application, a column in a table, a domain on a workload. Creating one is a step in work
+already underway. The list behind the drawer is the context, and it has to stay visible — the thing
+being added is judged against the things already there. A page here would throw that away and make
+the reader navigate back to it.
+
+**Dialogs never create.** A dialog is for a short blocking decision with one answer — a confirmation,
+a destructive guard. The moment it holds a form, it is a drawer with worse ergonomics: no resize, no
+scroll room, and a stray Escape destroys typed work.
+
+### The one exception, and how to recognize another
+
+**Variables create in a drawer at the first level.** A variable is a `KEY=value` pair; the flow is a
+repeater over one triad, and it is routinely used to paste a whole `.env` at once. A dedicated page
+for that would be a page whose entire content is one repeated row.
+
+That is the shape of the exception, and it is the only test that licenses another: **the resource is
+a single small tuple, and creating it is normally done in bulk.** "It only has three fields" is not
+enough — a certificate has three fields and still creates on a page, because one certificate is one
+deliberate act. If you cannot say both halves of the test out loud about your resource, it creates on
+a page.
+
+### Deciding
+
+| What you are creating                        | Surface                | Route                          |
+| -------------------------------------------- | ---------------------- | ------------------------------ |
+| A resource the sidebar routes to             | Page                   | `/<module>/new`                |
+| A resource inside another resource           | Drawer                 | none — it opens over the owner |
+| A tuple normally created in bulk (variables) | Drawer, at first level | none                           |
+| A confirmation, a destructive guard          | Dialog                 | none                           |
+
+**Settings use the create surface again.** The page that edits a resource is the page that created
+it, with values in it. Same bands, same rows, same order — so the two are one object seen twice, and
+nothing has to be relearned between them.
+
+## 2. The anatomy every form shares
+
+One shape, whether it is a page or a drawer:
+
+```
+Heading (what this is, one line)
+  Section — title + Hint glyph
+    card
+      row: name · guidance · control
+      row: name · guidance · control
+  Section — title + Hint glyph
+    card
+      ...
+  Section "Advanced" — collapsed, gear glyph
+    card
+      the optional, already-defaulted rows
+```
+
+- **A band is a `Section`**: a title, an optional `Hint` (the ⓘ glyph that reveals its text on hover
+  or focus), and a flush card of rows. The guidance is a **Hint, not a paragraph** — a sentence
+  printed under every band is prose the reader has to cross to reach the controls, and on a page of
+  four bands it costs more room than the fields do. The glyph costs 20px and answers only when asked.
+- **A row is the label.** The row's title names the field and its description carries the guidance,
+  so there is no separate `<Label for>` and the control takes an `aria-label`. That is what makes the
+  shape compact: name, guidance and control share one line's worth of height instead of three.
+- **The control sits right, capped at a fixed cell width**, so every field on the page ends at the
+  same x and the card reads as a column rather than a ragged edge. A switch sits hard right at its
+  natural size.
+- **A control that cannot work in that cell makes the row stack**: a textarea, a code block, a radio
+  group, a table, an editor. Name and guidance above, control at the full measure below. This is what
+  keeps the anatomy usable for long-form fields instead of forcing a page to abandon it the first
+  time it needs a textarea.
+- **The band step is the same everywhere**, and the page opens on that same step: header → heading →
+  first band → every band after it. One rhythm, top to bottom.
+
+## 3. Advanced is the endpoint's not-required set
+
+A form should ask, at rest, only what has to be answered. Everything else goes into ONE collapsed
+band at the end, titled **Advanced**, with a gear glyph.
+
+A field belongs in Advanced when **all three** are true:
+
+1. the endpoint does not require it,
+2. it already carries the endpoint's own default, and
+3. it is not what the reader came here to decide.
+
+The third clause is why this cannot be inferred from `required` alone. A firewall's modules and a WAF
+set's thresholds are entirely optional too — and burying them would hide the point of the form. Read
+the API, then ask what the person filling this in actually came to choose.
+
+Two consequences worth stating:
+
+- **Nothing required is ever inside the disclosure.** A failed submit must always point at a field
+  already on screen; a form that scrolls to a collapsed band to show an error is a form that hid the
+  question and then blamed the reader.
+- **Submitting untouched sends what the API would have applied anyway.** That is the proof the
+  defaults are right. If collapsing a field changes what gets created, it was not a default.
+
+The collapsed region must be **`inert`** while closed — the rows are still in the DOM, and without it
+a keyboard user tabs into fields nobody can see.
+
+## 4. The commit model
+
+**Create pages carry a persistent bar.** The reader arrived to fill the form in; there is always
+something to commit. Cancel and Save, on the page's own measure, at the same height as the header so
+the screen is bracketed by two equal bands.
+
+**Settings pages mount the bar only once something is edited**, and it slides up when it appears. A
+settings page opens read-mostly: a Save bar pinned from the first paint is a permanent call to action
+for work nobody started, spending height to say there is nothing to do. Mount it, do not merely hide
+it — a hidden bar still reserves its space.
+
+- **A page-level commit owes a Discard.** Without it the only way back is undoing each field by hand
+  and hoping the bar goes away.
+- **Per-band saves are for pages whose bands are genuinely separate records** (an application's build
+  configuration vs. its branch controls). When the page is ONE record, a per-band Save asks which part
+  of one record the reader meant.
+- **Drawers commit with one Save, alone on the right.** No Cancel: the panel's X, the overlay and
+  Escape are already the dismissal, and a fourth exit only competes with the commit for the eye.
+
+### Creating is not deploying
+
+**Save creates, and stops.** Publishing spends real infrastructure, and a button labelled Save must
+not do it as a side effect. Anything that costs money or serves traffic is a separate, explicit act
+from the resource itself.
+
+The same rule kills the "Save as draft / Save and deploy" pair: two buttons where one spends
+infrastructure and the other does not, with nothing on the bar saying which.
+
+**The success toast carries the resource.** Name what was created and give the toast an action that
+opens it. Without that, the reader lands on a list and has to find the row they just made — which is
+the whole reason anyone reads a success toast.
+
+## 5. The lock
+
+One flag for the whole scope while a request is in flight. The outer `<fieldset :disabled>` is the
+native safety net **and** every control takes `:disabled` from the same flag — a fieldset blocks
+interaction for the subtree, but each control renders its disabled _visual_ from its own prop, so the
+fieldset alone leaves the form looking live mid-submit. The commit button carries `:loading`. Release
+on success **and** failure.
+
+Validation runs **on submit only**. An empty required field gets the amber `required` prompt; a value
+the endpoint cannot accept gets the red `invalid` error. Required is not an error, the two are never
+both on for one field, and nothing is judged while the reader is still typing. A request-level
+failure is a toast with a way to recover — never silent, and never a validation summary.
+
+## Checklist
+
+- [ ] First-level resource → a page at `/<module>/new`. Inside a resource → a drawer. Never a dialog.
+- [ ] A first-level drawer passes BOTH halves of the exception test (small tuple **and** normally bulk).
+- [ ] Settings reuse the create page's bands, in the same order.
+- [ ] Every band is a Section with a title and a Hint — not a paragraph of prose.
+- [ ] Rows carry the name and guidance; the control has an `aria-label`, not a separate label.
+- [ ] Wide controls stack their row instead of being squeezed into the cell.
+- [ ] Advanced holds only fields that are not required, already defaulted, and not the point of the form.
+- [ ] Nothing required is inside the disclosure; the collapsed region is `inert`.
+- [ ] Create page: persistent Cancel + Save. Settings page: bar mounts on first edit, with Discard.
+- [ ] Drawer: one Save, no Cancel.
+- [ ] Save creates and stops — no deploy, no publish, no charge as a side effect.
+- [ ] The success toast names the resource and offers a way to open it.
+- [ ] One `submitting` flag locks the fieldset AND every control; released in `finally`.
+- [ ] Validation on submit only; amber `required` vs red `invalid`, never both.
diff --git a/.claude/skills/webkit-data-viz/SKILL.md b/.claude/skills/webkit-data-viz/SKILL.md
new file mode 100644
index 0000000000..2bbee4fa00
--- /dev/null
+++ b/.claude/skills/webkit-data-viz/SKILL.md
@@ -0,0 +1,177 @@
+---
+name: webkit-data-viz
+description: The token adapter that maps charts onto @aziontech/theme — every series color derived from the --color-* families (never hex), computed tokens re-read on a data-theme change so a canvas re-themes (SVG re-themes for free), and the chart's loading/empty/error surface rendered with webkit components. For chart-form and palette theory, use the generic dataviz skill; this skill covers only mapping that onto theme tokens. Use when building or reviewing a chart, dashboard, or KPI tile in a webkit app.
+status: active
+last_updated: 2026-07-20
+scope: general
+enforced_by: [webkit-tokens, webkit-component-states, ui-verify]
+---
+
+# Skill: webkit-data-viz
+
+## Purpose
+
+A chart muddy in one theme, or spinning forever on an empty dataset, is broken the same way a
+mis-tokened button is — and Azion Console is an observability product, so charts are a primary
+surface, not decoration. This skill is the **token adapter**: it takes the charting decisions and
+realizes them in `@aziontech/theme`. **For chart-form (which form answers which question) and palette
+theory (categorical / sequential / diverging, contrast math, color-blind pairing), see the generic
+`dataviz` skill; this skill covers only mapping that onto `@aziontech/theme` tokens** — deriving every
+color from the `--color-*` families (never hex), re-reading computed tokens on a `data-theme` change so
+a canvas re-themes (SVG re-themes for free), and rendering the chart's loading / empty / error surface
+with webkit components. It does **not** pick your charting library — canvas or SVG rendering is a
+consumer choice; the tokens below are not.
+
+## How to use
+
+- `/webkit-data-viz` — apply the token mapping to any chart, dashboard, or KPI tile you build in this
+  conversation. Pick the form and the palette **kind** with the generic `dataviz` skill first, then map
+  it onto tokens here.
+- `/webkit-data-viz <file>` — review the file's charts and report, per gap: the quoted line, the token
+  problem (off-token color, no theme re-read, missing state, non-tabular figures), and the concrete
+  token-mapped fix. Form and palette-kind review belong to the generic `dataviz` skill.
+
+## How to find the components + tokens
+
+Never guess an import path or a hex value. Resolve both from the contract:
+
+- **Components** (`Skeleton`, `EmptyState`, `Message`, `CardBox`, `StatusIndicator`): ask the **webkit
+  MCP** — `suggest_component` in plain words ("empty state", "stat card") — or read the `imports` keys
+  in **`node_modules/@aziontech/webkit/catalog.json`**. A subpath that is not a key there does not
+  exist.
+- **Tokens**: read the `tokens` tree in the same **`catalog.json`** (the `--color-*` families: `blue`,
+  `violet`, `green`, `orange`, `yellow`, `red`, each `50`→`950`; plus `--success`, `--warning`,
+  `--danger`, `--info`), or the human catalog in **`node_modules/@aziontech/webkit/docs/STYLEGUIDE.md`**.
+  Derive every chart color from these — never a raw hex.
+
+## Map the palette kind onto token families
+
+The generic `dataviz` skill decides the palette **kind**; here is how you realize each kind in
+`@aziontech/theme`:
+
+- **Categorical** (distinct series, no order): a **mid step** (`400`/`500`) of distinct `--color-*`
+  families in a fixed order, so each mark reads on both light and dark surfaces.
+- **Sequential** (magnitude, e.g. a heatmap): one family's ramp, light→dark
+  (`--color-blue-100` → `--color-blue-800`).
+- **Diverging** (+/- around a midpoint): two families meeting at a neutral middle
+  (`red` ↔ neutral ↔ `green`).
+- **Semantic** (`--success` / `--warning` / `--danger`): status **only** — a failed region, a
+  threshold breach. Never borrow a semantic token as a categorical accent, or a green series reads as
+  "healthy" when it just means "series 3".
+
+```ts
+// Categorical palette wired from tokens — one fixed order.
+// SVG marks: pass the var() string straight to fill/stroke — it re-themes for free.
+const SERIES = [
+  'var(--color-blue-400)',
+  'var(--color-violet-400)',
+  'var(--color-green-400)',
+  'var(--color-orange-400)',
+  'var(--color-yellow-400)',
+  'var(--color-red-400)'
+]
+
+// Canvas libraries can't read CSS vars — resolve computed values, and RE-READ on data-theme
+// change so the canvas repaints in the new theme (see /webkit-theming-dark-mode).
+const read = (v: string) => getComputedStyle(document.documentElement).getPropertyValue(v).trim()
+const seriesColors = () => SERIES.map((s) => read(s.slice(4, -1)))
+```
+
+## States — a chart is a data-backed view
+
+A chart fetches, so it owns the full state surface, rendered **in the chart's own box** (never a
+blank rectangle): **loading** → `Skeleton` sized to the chart area, reserving the layout so it doesn't
+reflow; **empty** → `EmptyState` ("No requests in this window", + a range/filter action); **error** →
+a `Message severity="danger"` with what failed and a retry. The trigger comes from the consuming app's
+data layer; webkit ships the rendering of each state. Full matrix in `/webkit-ui-states`.
+
+## Numbers — tabular figures, status via semantic tokens
+
+**`tabular-nums`** on every figure that stacks in a column or updates in place, so digits don't jitter.
+A delta's color encodes GOOD/BAD for the metric via a semantic token, not merely up/down — a rising
+error rate is `--text-danger` even though the arrow points up.
+
+```vue
+<script setup lang="ts">
+  import CardBox from '@aziontech/webkit/card-box'
+
+  const stats = [
+    { label: 'Requests', value: '3.4M', delta: '+12.4%', good: true },
+    { label: 'Cache-hit rate', value: '96.2%', delta: '+0.8%', good: true },
+    { label: 'Error rate', value: '0.42%', delta: '+0.30%', good: false }
+  ] as const
+</script>
+
+<template>
+  <div class="grid grid-cols-3 gap-(--spacing-md)">
+    <CardBox
+      v-for="s in stats"
+      :key="s.label"
+      class="flex flex-col gap-(--spacing-xs)"
+    >
+      <span class="text-body-sm text-(--text-muted)">{{ s.label }}</span>
+      <span class="text-big-number-lg text-(--text-default) tabular-nums">{{ s.value }}</span>
+      <span
+        class="text-body-sm tabular-nums"
+        :class="s.good ? 'text-(--text-success)' : 'text-(--text-danger)'"
+        >{{ s.delta }}</span
+      >
+    </CardBox>
+  </div>
+</template>
+```
+
+## Theme
+
+Because every color is a token, the chart works in light **and** dark with no per-theme branch. SVG
+`var()` marks re-theme automatically; canvas marks only re-theme if you re-read the tokens on a
+`data-theme` change (see `/webkit-theming-dark-mode`). Verify both.
+
+## Enforcement (honest)
+
+Only the hex ban is machine-checked: the **token lint** blocks any hex / rgb-hsl / Tailwind-palette
+literal in a chart's colors, so an off-token series fails the build. The canvas theme re-read, the
+state surface, and `tabular-nums` are **review**, not a hook — and form choice, palette kind, contrast,
+and anatomy live in the generic `dataviz` skill and are review there. The `/webkit-ui-verify` skill
+screenshots the chart in light and dark as the paired visual check; use it to confirm the theme claim
+above rather than eyeballing one mode.
+
+## Hard rules
+
+- Every chart color is a theme token (`var(--color-*)` / semantic) — **never** a hex, rgb/hsl, or
+  Tailwind-palette literal.
+- SVG marks take the `var()` string directly; canvas marks resolve computed values and **re-read on a
+  `data-theme` change** so the canvas repaints in the new theme.
+- Semantic tokens (`--success` / `--warning` / `--danger`) mean status only — never a categorical
+  accent.
+- Every chart renders loading, empty, and error inside its own box (`Skeleton` / `EmptyState` /
+  `Message`) — no blank async rectangle.
+- `tabular-nums` on every figure that stacks in a column or updates in place.
+- Pick the form and the palette kind with the generic `dataviz` skill **before** mapping onto tokens.
+
+## Review output
+
+For `/webkit-data-viz <file>`, list gaps grouped by chart. Each:
+
+```
+✗ TrafficChart.vue:42  stroke="#3b82f6" on the requests series
+  token: hex literal — fails the token lint and won't re-theme in dark mode.
+  fix: map the series to a token-derived palette (var(--color-blue-400)); resolve computed
+       values for the canvas and re-read on the data-theme change.
+
+✗ TrafficChart.vue:88  v-if="data.length" with no empty/error branch
+  state: Empty + Error missing — a failed or empty range renders a blank canvas.
+  fix: Skeleton sized to the chart box while loading; EmptyState + Message severity="danger" (retry).
+```
+
+End with: `charts token-mapped + complete` or `N gaps — fix before ship`.
+
+## Definition of Done
+
+- [ ] Every color is a theme token; the palette kind (chosen with the generic `dataviz` skill) is
+      realized via the `--color-*` families; status tokens used for status only.
+- [ ] SVG marks pass `var()` directly; canvas marks re-read computed tokens on a `data-theme` change.
+- [ ] Loading (`Skeleton`), empty (`EmptyState`), and error (`Message`) render in the chart's box.
+- [ ] `tabular-nums` on every stacked/updating figure.
+- [ ] Verified in light and dark (`/webkit-ui-verify` screenshots both).
+- [ ] Form and palette chosen with the generic `dataviz` skill before token mapping.
diff --git a/.claude/skills/webkit-ds-adoption/SKILL.md b/.claude/skills/webkit-ds-adoption/SKILL.md
new file mode 100644
index 0000000000..081b5f2d4e
--- /dev/null
+++ b/.claude/skills/webkit-ds-adoption/SKILL.md
@@ -0,0 +1,161 @@
+---
+name: webkit-ds-adoption
+description: Migrating an existing app onto @aziontech/webkit is a sequence of small, shippable stories in dependency order — never a big-bang rewrite. Use when adopting webkit into a legacy screen or app: decompose the migration, check the catalog before building custom, track a coverage scorecard per screen, and file gaps instead of forking. Drives each screen from custom toward webkit, story by story.
+status: active
+last_updated: 2026-07-20
+scope: general
+enforced_by: [webkit-prefer-over-custom, webkit-prop-vocabulary, webkit-style-override, review]
+---
+
+# Skill: webkit-ds-adoption
+
+## Purpose
+
+You rarely adopt a design system all at once — you adopt it one screen, one primitive at a time,
+without freezing feature work. This skill is the **method for that migration**: how to break an
+existing app's move onto `@aziontech/webkit` into small stories that each ship on their own, in an
+order where nothing depends on work that hasn't landed yet. The goal is not a rewrite; it is that
+every screen you touch comes out with **more webkit and less hand-rolled UI than it went in with**,
+and that the parts you replace stay replaced. The mechanics of _how_ to import and token a component
+live in **webkit-usage** — this skill is about _what to migrate, in what order, and how far_.
+
+## How to use
+
+- `/webkit-ds-adoption` — plan and execute the next migration story on the code in this conversation:
+  pick the smallest shippable slice in dependency order and do it.
+- `/webkit-ds-adoption <screen-or-dir>` — audit the target, produce its **coverage scorecard**
+  (webkit vs custom), and propose the migration stories in order.
+
+## Check the catalog before you build anything
+
+The default is **compose webkit**; writing a custom component is the **exception, and it must be
+justified**. Before you write UI — new or migrated — check whether the system already ships it:
+
+- Ask the **webkit MCP** — `suggest_component` in plain words ("modal", "data table", "tag input").
+- Or read **`node_modules/@aziontech/webkit/catalog.json`** — every key under `imports` is a real
+  published subpath. If a subpath is not a key there, it does not exist.
+
+If a component exists, use it — compose it, pass its props, fill its slots. A hand-rolled button,
+modal, or table when webkit ships one is not a migration; it is new debt.
+
+## Migrate in small stories, in dependency order
+
+Never a big-bang rewrite. Decompose the migration into slices that each ship independently, bottom-up:
+
+1. **Wire the dependency + tokens.** Add `@aziontech/webkit` / `@aziontech/theme` / `@aziontech/icons`
+   and import theme + icons once at the app entry (see webkit-usage). Nothing renders differently yet —
+   this is the foundation every later story stands on.
+2. **Replace primitives.** Swap the leaf controls — `button`, `input`, `modal`, `select`, `checkbox` —
+   for their webkit equivalents, one type at a time. Each swap is a small, reviewable, shippable PR.
+3. **Replace composite patterns.** Once the primitives are webkit, migrate the assemblies built on them
+   — a data table, a form section, a filter bar, an empty state — to the webkit composite (or compose it
+   from its sub-components).
+4. **Remove dead custom CSS.** After a pattern is on webkit, delete the legacy styles, class presets, and
+   one-off components it replaced. The migration isn't done until the old code is gone — a half-migrated
+   screen carries both systems.
+
+The order matters: composites depend on primitives, primitives depend on the wired dependency. Doing them
+out of order means redoing work.
+
+## Coverage scorecard
+
+Track adoption as a **percentage per screen**: of the interactive/structural elements a screen renders,
+how many come from webkit vs are still hand-rolled. Drive it up one story at a time.
+
+Eyeball it fast — count the `@aziontech/webkit/*` imports actually rendered against the hand-rolled
+interactive elements still in the template (a bare `<button>`, a `<div @click>`, a custom `<Modal>`, a
+`<table>` you styled yourself, a local `MyInput.vue`). `webkit / (webkit + custom)` is the screen's score.
+
+```
+WorkloadsList.vue   webkit 7 / custom 4  → 64%   (custom: <table>, MySpinner, 2× <button>)
+SettingsForm.vue    webkit 2 / custom 9  → 18%   (custom: MyInput ×5, MyModal, <select> ×3)
+```
+
+A screen doesn't reach 100% by accident — you get there by closing the named custom items story by story.
+The **webkit-adoption-auditor** agent produces this scorecard automatically across a screen or directory;
+run it to get the numbers and the per-item breakdown without counting by hand.
+
+## Gap, not fork
+
+When webkit genuinely lacks what you need, **do not fork it and do not hand-roll a near-duplicate** —
+either creates a second source of truth that drifts from the system forever.
+
+- First, try to **compose it from existing sub-components** (a compound's `Root` + parts) or configure a
+  close component — webkit covers more than the top-level name suggests.
+- If it truly isn't there, **open a gap/request against the design system** so the fix lands **once, for
+  everyone** — and build the smallest bridge you need meanwhile, using theme tokens, kept composable with
+  webkit so it's trivial to replace when the real component ships.
+
+A fork looks faster today and costs the whole team every upgrade after. The gap is the cheaper path.
+
+## Map foreign patterns, don't carry them
+
+A legacy component's API and look are not the target — webkit's are. As you migrate:
+
+- **Rename props to the webkit vocabulary** — `variant`→`kind`, `sm/md/lg`→`small/medium/large`,
+  `onValueChange`→`@update`. Don't preserve the old names "to reduce churn"; map them once, here.
+- **Replace hex/rgb with theme tokens** — `#1e40af` → `var(--primary)`, custom spacing → `var(--spacing-*)`.
+  See webkit-usage for the import/token mechanics.
+- **Migrate the look to the tokens — never restyle a webkit component to match the legacy look.** If the
+  old button was a different blue, the fix is the token system's blue, not overriding webkit's to match a
+  color you're retiring. The point of adoption is that the screen ends up looking like the product.
+
+## Migration story breakdown (example)
+
+`WorkloadsList.vue` today: a hand-styled `<table>`, a `MySpinner`, a custom `<Modal>` for delete, and two
+bare `<button>`s — scorecard **~40% webkit**. Broken into shippable stories:
+
+1. **Story A — deps + tokens** (if not already done app-wide): dependency wired, theme/icons imported.
+2. **Story B — buttons**: the two `<button>`s → `@aziontech/webkit/button` with `kind`/`size`. Ships alone.
+3. **Story C — loading + empty**: `MySpinner` → `Skeleton`; add the missing `EmptyState` (see webkit-ui-states).
+4. **Story D — delete modal**: custom `<Modal>` → `@aziontech/webkit/dialog`, focus-trap for free.
+5. **Story E — the table**: hand-styled `<table>` → `@aziontech/webkit/table` (compound or data-driven).
+6. **Story F — cleanup**: delete the legacy table CSS, `MySpinner.vue`, `MyModal.vue`. Scorecard **100%**.
+
+Six PRs, each shippable, each raising the score — no rewrite, no long-lived branch.
+
+## Hard rules
+
+- Never a big-bang rewrite — decompose into small stories in dependency order (deps → primitives →
+  composites → cleanup).
+- Check the catalog/MCP before writing any component; a custom build is a justified exception, not the default.
+- When webkit lacks something, file a gap or compose from sub-components — never fork or hand-roll a
+  near-duplicate.
+- Map legacy props to the webkit vocabulary and legacy colors to theme tokens; never carry the old API over.
+- Never restyle a webkit component to match the legacy look — migrate the look to the token system.
+- A story isn't done until the custom code it replaced is deleted; don't leave both systems on one screen.
+
+## Review output
+
+For `/webkit-ds-adoption <screen-or-dir>`, lead with the scorecard, then the ordered stories:
+
+```
+Screen: WorkloadsList.vue — webkit 4 / custom 6 → 40%
+  custom still present: <table> (styled), MySpinner, MyModal, 2× <button>
+
+stories (ship in order):
+  1. buttons → @aziontech/webkit/button                    (+2)
+  2. MySpinner → Skeleton, add EmptyState                   (+2)
+  3. MyModal → @aziontech/webkit/dialog                     (+1)
+  4. <table> → @aziontech/webkit/table; delete legacy CSS   (+1, cleanup)
+```
+
+End with: `target 100% in N stories` or, if already fully webkit, `adopted — no custom UI left`.
+
+## Enforcement
+
+Paired with a lint and a human. The **webkit-prefer-over-custom** rule flags UI hand-rolled when webkit
+ships an equivalent (a custom button/modal/table, or a foreign component library for something webkit
+covers) — it steers every new line toward the system so the migration doesn't regress behind you. What it
+can't judge — whether a slice is the _smallest shippable story_, whether a claimed gap is real, whether a
+fork snuck in as "composition" — a reviewer confirms. The **webkit-adoption-auditor** agent is the
+executable companion: it generates the coverage scorecard on demand, so progress is a number, not a feeling.
+
+## Definition of Done
+
+- [ ] The migration is a sequence of small shippable stories in dependency order — no big-bang branch.
+- [ ] Every component was checked against the catalog/MCP first; any custom build is justified in writing.
+- [ ] Coverage scorecard captured per screen and rising story by story (or produced via webkit-adoption-auditor).
+- [ ] Missing pieces filed as design-system gaps or composed from sub-components — nothing forked.
+- [ ] Legacy props mapped to the webkit vocabulary, legacy colors to theme tokens; look migrated, not restyled.
+- [ ] Each landed story deleted the custom code it replaced — no screen left running both systems.
diff --git a/.claude/skills/webkit-errors/SKILL.md b/.claude/skills/webkit-errors/SKILL.md
new file mode 100644
index 0000000000..c5bcd50ec0
--- /dev/null
+++ b/.claude/skills/webkit-errors/SKILL.md
@@ -0,0 +1,328 @@
+---
+name: webkit-errors
+description: Where an error goes in a @aziontech/webkit app, and what it carries when it gets there. One decision table covering all five cases — client-side validation on the field, a server rejection scoped to one field as a Message in that section (plus the field's invalid state and a scroll anchor on a long form), an unscoped request failure as a toast with Retry, the signed-out screens where auth NEVER toasts and every outcome lands in one card Message, and the async failure that outlives its screen as a permanent closable toast. Use when building or reviewing any submit, any auth screen, or any long-running action. Built on @aziontech/webkit/message, /toast, /field-*.
+status: active
+last_updated: 2026-08-13
+scope: general
+enforced_by: [webkit-component-states, webkit-accessibility, ui-verify]
+---
+
+# Skill: webkit-errors
+
+## Purpose
+
+Every screen that talks to a server can fail, and almost every failure gets put in the wrong place —
+usually a toast, because a toast is the easiest thing to reach for and it always compiles. A toast is
+wrong for a field the user must fix (it dismisses itself and points nowhere), wrong for a sign-in
+(it flies away from the only object on the page and stacks one card per attempt), and _right_ for
+exactly one case most apps never handle: the failure that arrives after the user has walked away.
+
+This skill fixes **where an error goes**, **what it carries when it gets there**, and **what it
+says**. It is the error half of `webkit-ui-states` (which owns the full loading / empty / partial
+state surface) and the failure half of `webkit-form` (which owns the field and submit mechanics).
+
+## How to use
+
+- `/webkit-errors`
+  Apply the placement table below to every failure path in this conversation.
+- `/webkit-errors <file>`
+  Review the file and output, per gap:
+  - the exact line / handler (quoted),
+  - which row of the table it breaks (1 short sentence),
+  - the concrete fix, naming the surface and what it must carry.
+
+## When to invoke
+
+- Writing or reviewing any `catch` around a submit, a create, a delete, or a sign-in.
+- Building a signed-out screen (sign in, sign up, reset password, MFA).
+- Building a long-running action (deploy, import, provision) the user can navigate away from.
+- The user asks "where does this error go", "should this be a toast", "the error disappeared before
+  I read it", "the user can't find what failed", "how do I show a 500".
+
+## How to find the components
+
+Never guess an import path — files move. Resolve every primitive the same way:
+
+- Ask the **webkit MCP** — `suggest_component` in plain words ("inline message", "toast", "password
+  field").
+- Or read **`node_modules/@aziontech/webkit/catalog.json`** — every key under `imports` is a real
+  published subpath. If a subpath is not a key there, it does not exist.
+
+The surfaces this skill uses — `message`, `toast`, the `field-*` family, `helper-text` — all resolve
+this way. Use **@aziontech/theme tokens** for spacing and color, never raw px or hex.
+
+## The one question
+
+> **What can the user do about it, and will they still be there when it lands?**
+
+Everything below follows from that. The failure's HTTP status does not decide the surface — its
+_recoverability_ and the user's _presence_ do.
+
+| The failure…                                                     | Goes to                                                                            | Carries                                            |
+| ---------------------------------------------------------------- | ---------------------------------------------------------------------------------- | -------------------------------------------------- |
+| **1.** Empty or malformed input, caught before any request       | the **field itself** — amber `required` prompt / red `invalid`                     | nothing — the field is the recovery                |
+| **2.** Server rejection **scoped to one field**                  | a **`Message`** inside **that field's own section**, + the field's `invalid` state | the fix, in words; on a long form, a scroll anchor |
+| **3.** Request failed, tied to **no** field (5xx, network)       | **`toast.error`**                                                                  | **Retry**                                          |
+| **4.** Anything on a **signed-out** screen                       | **one `Message` in the card** — auth never toasts                                  | Retry only if the user can't fix it                |
+| **5.** A failure that arrives **after the user left the screen** | a **permanent, closable toast** — the only global surface                          | the ways out (retry + an escape)                   |
+
+Rows 1–3 are the create-form ladder. Row 4 is the same question asked where the answer collapses to
+one surface. Row 5 is the inversion: the page that owned the error may not be mounted any more.
+
+## 1. Client-side validation → the field
+
+An empty or malformed value never reaches the server, so it never reaches a `Message` or a toast. It
+belongs on the control that holds it. Validate **on submit**, not on every keystroke, and keep the two
+states distinct:
+
+- **amber `required`** — the value is missing. A prompt, not an accusation.
+- **red `invalid`** — the value is present and wrong.
+
+Mechanics (the `field-*` triad, `aria-describedby`, submit-time validation, the locked scope) live in
+**`/webkit-form`**. The only rule this skill adds: **client-side validation is the one thing that does
+not go in a `Message`.** The `Message` is for what the **server** said.
+
+## 2. Server rejection scoped to one field → a `Message` in that section
+
+The case most apps get wrong. Two people work the same module: User 1 fills in a form and links a
+resource; User 2 deletes that resource through the API before User 1 saves. User 1's browser is never
+told — its copy of the list is simply stale. The create request is the moment the drift surfaces, and
+the API rejects it naming the field.
+
+This is neither field validation (nothing the user typed is malformed) nor a plain request failure
+(it _is_ tied to a field). It is a third case, and it decides the surface:
+
+```js
+try {
+  await createApplication(payload)
+} catch (error) {
+  if (error?.code === 'object_not_found' && error?.field === 'connectorId') {
+    // Field-scoped rejection → the section that owns the field…
+    originError.value =
+      `Connector "${connectorLabel(payload.connectorId)}" no longer exists. ` +
+      `Another user deleted it while you were filling in this form, so the ` +
+      `Application wasn't created. Nothing else was lost: reload the connector ` +
+      `list and select another one.`
+    // …plus the field's own state. The value is PRESENT but no longer valid,
+    // so it is the red `invalid`, never the amber `required` prompt.
+    errors.connectorId = 'This connector no longer exists.'
+  } else {
+    // Unscoped → row 3.
+    toast.error('Could not create the application.', {
+      description: error?.message ?? 'Check your connection and try again.',
+      action: { label: 'Retry', onClick: () => submit() }
+    })
+  }
+} finally {
+  submitting.value = false // release the lock on success AND failure
+}
+```
+
+- **A toast is wrong here**: it dismisses itself and points nowhere, while the only place the user can
+  recover is one `Select`, possibly six sections down.
+- **The `Message` renders inside that section's own heading region**, so the section that needs
+  attention carries the notice itself. Animate the region's height so nothing below it jumps.
+- **It stays until the user recovers** — no auto-dismiss on something that names a required action.
+- **The field takes its own state too.** The `Message` says what happened; the red `invalid` field
+  says _which control_ to touch. Neither alone is enough on a long form.
+- **Nothing is lost.** The form keeps every value: the request was rejected, not partially applied.
+  Say so in the copy — that sentence is what stops the user from starting over.
+
+### On a long form, add a positional scroll anchor
+
+If the erroring section can be below the fold, telling the user is not enough — you have to _take_
+them there. Smooth-scroll the scroll container to the section's own offset, parked just under the top
+edge, then land focus on the field to fix:
+
+```js
+if (originError.value) {
+  await nextTick()
+  scrollToOriginAnchor() // primary: the section becomes the scroll anchor
+  focusConnector() // and the caret lands on the field, un-trapped
+}
+```
+
+Three details that decide whether this works:
+
+- **Move the user only after the lock is released.** The scope is `:disabled` while submitting, and a
+  disabled control cannot take focus.
+- **Compute the target container-relative** (`container.scrollTop + section.top - container.top -
+offset`), so it is correct wherever the section sits and however far the container is already
+  scrolled.
+- **Re-assert once the message region has finished expanding.** At the first scroll the region is
+  still collapsed, so the container is shorter than it will be — near the end of a long form that is
+  enough for the browser to clamp the target and leave the section short of the anchor. A second call
+  after the expand is a no-op when the first one landed.
+- **Honour `prefers-reduced-motion`**: `behavior: 'auto'` instead of `'smooth'`.
+
+Focus is moved, not trapped — the rest of the form stays reachable by keyboard the whole time.
+
+## 3. Unscoped request failure → `toast.error` + Retry
+
+A 5xx or a network failure that names no field has nowhere better to go: there is no control to
+attach it to, and blocking the whole form with a banner over-weights something a retry may fix.
+
+- Use the typed shortcut (`toast.error`), not a generic notification with a severity prop.
+- **Carry `Retry`**, and make sure the lock was released in `finally` so the action can actually re-run.
+- Say what failed and what to do next — see the words section below.
+
+The mechanics of the in-flight lock (one flag, trigger `:loading`, every field `:disabled`, released
+in `finally`) belong to **`/webkit-ui-states`**.
+
+## 4. Signed-out screens → auth never toasts
+
+On the signed-out screens the placement question collapses to **one answer**, and it is the one most
+apps get backwards:
+
+> **Auth never toasts.** Every outcome the server returns — including success — lands in **one
+> `Message`, inside the card, in the same slot, at the same size.**
+
+A toast is wrong here for reasons that do not apply inside the console. There is exactly **one object
+on the page and the user cannot leave it**, so a notice that flies to a screen corner has travelled
+away from the only thing they are looking at. It **self-dismisses**, so the reason a sign-in failed can
+expire while the user is still typing. And it **stacks**: three attempts leave three corner cards
+saying the same thing, none of them near the fields.
+
+| Outcome                           | Status        | Severity  | Carries             |
+| --------------------------------- | ------------- | --------- | ------------------- |
+| signed in / account created       | 200           | `success` | nothing             |
+| credentials rejected              | 401           | `danger`  | nothing             |
+| the service itself is down        | 503           | `warning` | Retry               |
+| request failed, tied to no field  | 500           | `danger`  | Retry               |
+| no answer came back               | (no response) | `warning` | Retry               |
+| the address is already registered | 409           | `danger`  | two exits, as links |
+
+With the placement settled, three decisions are left per outcome:
+
+1. **401 is not field-scoped.** Which half of the pair is wrong is not yours to disclose — saying
+   "wrong password" confirms the address exists. So it goes above **both** fields, and the password is
+   cleared and refocused under it.
+2. **Whether the `Message` carries an action, decided by whether the user can fix it.** After a 401 the
+   credentials are right there to retype, so a button would only repeat the form. A 503, a 500 and a
+   timeout are fixable by nobody, so the `Message` carries the one move left — **Retry** — and stays
+   until it works. A 409 _is_ fixable, but not only here, so it carries the two exits (sign in, reset
+   your password) as links in the copy.
+3. **Severity follows certainty, not severity of tone.** A 500 is a failure → `danger`. A timeout is an
+   _unknown_ → `warning`: the POST may well have landed, so its copy must not claim the account was
+   not created.
+
+**Client-side validation is still row 1**, even here: an empty or malformed value is caught before any
+request and belongs on the field.
+
+Two rendering notes worth carrying over:
+
+- **`size="small"` on every auth `Message`.** It sits inside a card under a heading — it is a notice on
+  the form, not a second banner competing with it.
+- **Put the copy in the default slot, not the `label` prop**, if any variant needs to slot links; and
+  animate the notice's entrance on a **wrapper**, not on `<Message>` itself (the component sets an
+  inline `transition` on its own root, and an inline style beats a utility class).
+
+## 5. The failure that outlives its screen → a permanent, closable toast
+
+A deploy takes tens of seconds, asks nothing of the user while it runs, and the whole point of it being
+async is that they are free to go elsewhere. So its error has nowhere on the originating page to land —
+that page may not be mounted when the failure arrives. This inverts everything above:
+
+| The failure arrives…                   | Report it in…                         |
+| -------------------------------------- | ------------------------------------- |
+| while the user is on the form          | a `Message` in the owning section     |
+| scoped to one field they must fix      | + that field's `invalid` state        |
+| after they left, from a background job | a **toast** — the only global surface |
+
+Three things follow:
+
+1. **The run cannot live in the component.** Its timer, state and toast live at module scope in a small
+   store, so navigating away does not cancel it — the page unmounting is not an event the run hears.
+2. **Progress is a `loading` toast** (spinner, `duration: 0`, not closable). It is the only thing that
+   travels with the user through the whole app.
+3. **The error toast is permanent and closable.** `duration: 0` — a failure the user was not present for
+   must not expire unseen — and `closable: true`, because anything that never expires must be
+   dismissible by hand. It carries **both ways out** (retry, and an escape to the module that lists the
+   runs), because once dismissed the toast was the only reference to the failure on screen.
+
+The success counterpart is the ordinary case: `duration: 6000`, closable, no action needed.
+
+## Severity, and the words
+
+- **`danger`** = it failed, and we know it failed. **`warning`** = we don't know (a timeout, a service
+  that may recover). Never dress an unknown as a failure; the copy must not claim an outcome the
+  server never confirmed.
+- **Every error says what happened and what to do next**, in that order. `"Could not create the
+application. Check your connection and try again."` — not `"Error 500"`.
+- **The status code goes last**, if at all. It is for the support ticket, not the lede.
+- **Say what was _not_ lost.** On a rejected submit, `"Nothing else was lost"` is the sentence that
+  stops a user from re-entering a six-section form.
+- **`Retry`**, never "Try again". Sentence case, no em dash. Full copy rules: **`/webkit-microcopy`**.
+
+## Hard rules
+
+- **Never a toast for a field-level error.** If the user must fix a control, the error renders on or
+  beside that control.
+- **Never a toast on a signed-out screen.** Every auth outcome lands in one `Message` in the card.
+- **A field-scoped server rejection takes both surfaces** — the `Message` in its section _and_ the
+  field's red `invalid` state. Never the amber `required` prompt: the value is present, just no longer
+  valid.
+- **Never auto-dismiss an error that names a required action.** `Message`s stay until recovery;
+  background-job error toasts are `duration: 0` **and** `closable`.
+- **Release the lock in `finally`**, on success and failure alike — otherwise Retry cannot re-run.
+- **Move the user to the problem only after the lock is released**; a disabled control cannot take
+  focus.
+- **Never scroll or focus without honouring `prefers-reduced-motion`.**
+- **An async run's state never lives in the component that started it.** If unmounting the page can
+  cancel the run or lose the failure, the run is in the wrong place.
+- **Never claim an outcome the server did not confirm.** A timeout is a `warning` about an unknown.
+
+## Review output
+
+For `/webkit-errors <file>`, list gaps. Each:
+
+```
+✗ CreateApplication.vue:118  toast.error for a rejection that names `connectorId`
+  rule: A field-scoped rejection goes to a Message in that field's section, not a toast.
+  fix: render Message severity="danger" in the Origin section + set the field's invalid state.
+
+✗ SignIn.vue:64  toast.error('Incorrect credentials')
+  rule: Auth never toasts — one Message in the card, same slot, every outcome.
+  fix: render a size="small" danger Message above both fields; clear and refocus the password.
+
+✗ Deploy.vue:52  error toast uses the default duration
+  rule: A failure the user was not present for must not expire unseen.
+  fix: duration: 0 + closable: true, carrying Redeploy and an escape to Deployments.
+
+✗ ErrorValidation.vue:301  scrollToSection() runs before `submitting` is released
+  rule: Move the user only after the lock is released — a disabled control cannot take focus.
+  fix: scroll + focus after the `finally`, then re-assert once the message region has expanded.
+```
+
+End with: `errors placed correctly` or `N gaps — fix before polish`.
+
+## References
+
+- **Surfaces** (resolve each via the MCP / catalog — see "How to find the components"):
+  `@aziontech/webkit/message` (inline notice: `severity`, `size`, `#action` slot, default slot for
+  copy with links), `@aziontech/webkit/toast` (`toast.error` / `.success` / `.loading`, `duration`,
+  `closable`, `action`), the `@aziontech/webkit/field-*` family + `/helper-text` (the field's own
+  required / invalid state).
+- **Companion skills:** `/webkit-form` (the field triad, submit-time validation, the locked scope),
+  `/webkit-ui-states` (the full loading / empty / partial / error surface and async behaviour),
+  `/webkit-microcopy` (what the words are), `/webkit-navigation` (which shell the failing page sits
+  in), `/webkit-ux-heuristics` (the right component per moment).
+
+## Definition of Done
+
+- [ ] Every `catch` on the screen routes to a surface picked from the table — not to whichever one was
+      easiest.
+- [ ] Client-side validation renders on the field (amber `required` / red `invalid`), never in a
+      `Message` or a toast.
+- [ ] Field-scoped server rejections render a `Message` in the owning section **and** set that field's
+      red `invalid` state, and say what was not lost.
+- [ ] On a long form, the erroring section is scroll-anchored and the field takes focus — after the
+      lock is released, re-asserted after the message region expands, `prefers-reduced-motion` honoured.
+- [ ] Unscoped request failures use `toast.error` and carry `Retry`, with the lock released in
+      `finally`.
+- [ ] No signed-out screen toasts: every auth outcome is one `size="small"` `Message` in the card, and
+      only the outcomes the user cannot fix carry an action.
+- [ ] A long-running action's state lives outside the component; its progress is a non-dismissing
+      `loading` toast and its failure a `duration: 0` + `closable` toast carrying both ways out.
+- [ ] Severity matches certainty (`warning` for an unknown, `danger` for a confirmed failure), and every
+      message says what happened then what to do next.
diff --git a/.claude/skills/webkit-form/SKILL.md b/.claude/skills/webkit-form/SKILL.md
new file mode 100644
index 0000000000..3be3b3d133
--- /dev/null
+++ b/.claude/skills/webkit-form/SKILL.md
@@ -0,0 +1,1013 @@
+---
+name: webkit-form
+description: Accessible forms on @aziontech/webkit — one Form Layout spacing reference (xs inside a field, lg between fields/rows) shared by five form types (Drawer, nested Drawer, Dialog, ItemGroup settings, CardBox with independent saves) that differ only in container + save model, with two internal layouts (Cards + ItemGroups / Fields separated) composing inside each. Every field carries a real label (never a placeholder-as-label), errors are tied to the control via aria-describedby, and related fields group in a real <fieldset>/<legend>; validated only on submit with the field's own required/invalid state as the feedback — no custom error-summary block, no Message callout for field validation. The a11y companion to /webkit-ux-heuristics (states) and /webkit-ui-states (locking + toast).
+status: active
+last_updated: 2026-07-21
+scope: general
+enforced_by: [webkit-accessibility, webkit-component-states, ui-verify]
+---
+
+# Skill: webkit-form
+
+## Purpose
+
+Forms are where a product is most keyboard- and screen-reader-tested and most often fails: a label
+that is really a placeholder, a select whose `<label for>` points at nothing, a validation error shown
+only in colour, a field that never says it was required. This skill fixes the accessibility of a form
+built on `@aziontech/webkit` so it is operable by keyboard, understandable by a screen reader, and
+recoverable when it rejects input. It is the a11y companion to `/webkit-ux-heuristics`
+(which establishes the states) and `/webkit-ui-states` (which locks the scope and
+toasts request errors) — this skill owns **layout, labels, grouping, validation semantics, and submit**.
+
+There are **two ways to lay out a form**, and both are first-class:
+
+- **Approach A — Cards + ItemGroups.** Sections are a flush `CardBox` wrapping an `Item.List`; every
+  field is one `Item` row (name/guidance on the left, control on the right). This is the default for
+  **grouped, settings-style, or list-like** forms — an account settings page, a resource's config or
+  create page, a create drawer.
+- **Approach B — Fields separated.** Standalone `field-*` triads stacked in a column. This is for
+  **short, focused, single-purpose** forms — a sign-in flow, a rename or delete-confirmation dialog, a
+  short create drawer, a single step in a wizard.
+
+Pick one per form; don't mix row-fields and stacked-fields in the same section.
+
+## How to use
+
+- `/webkit-form`
+  Apply the layout + patterns below to any form you build in this conversation.
+- `/webkit-form <file>`
+  Review the file's form against the patterns and output, per gap:
+  - the exact line / element (quoted),
+  - which pattern it breaks (1 short sentence),
+  - the concrete fix, naming the webkit component to use.
+
+## When to invoke
+
+- Building or reviewing any create/edit page, settings panel, drawer form, or multi-field form.
+- The user asks "is this form accessible", "wire up the labels", "the screen reader skips this",
+  "where do errors go", "which layout for this form".
+- After `/webkit-ux-heuristics` establishes the states and before `/webkit-ui-states` locks the async submit.
+
+## Reach for the complete `Field*` first — loose inputs are the fallback
+
+webkit ships two tiers of form control. **Default to the complete `Field*` component**; reach for a loose
+input only when no `Field*` fits.
+
+- **`Field*` (complete, preferred):** `FieldText`, `FieldTextarea`, `FieldPassword`, `FieldPhoneNumber`,
+  `FieldRadio` / `FieldRadioBlock`, `FieldCheckbox` / `FieldCheckboxBlock`, `FieldSwitch` /
+  `FieldSwitchBlock`, `FieldTextSwitch`, `FieldInputGroup`. Each bundles the **label ↔ control
+  association**, the on-field `HelperText`, and the `required` / `invalid` a11y wiring (`aria-required` /
+  `aria-invalid` / `aria-describedby`) that this skill otherwise asks you to wire by hand. Using it means
+  the accessible-name / error-association rules below are satisfied **by construction**.
+- **Loose (`InputText`, `InputNumber`, `Textarea`, `Select`, `Checkbox`, `RadioButton`, `Switch`,
+  `InputGroup`, …):** the bare control, no label/helper/validation shell. Use one only when the matching
+  `Field*` genuinely doesn't fit — a composed `Select` inside a custom row, a control in an `Item.Actions`
+  cell, a bespoke layout the `Field*` wrapper can't express. When you do, **you** own the label
+  association + `aria-describedby` per the rules below.
+
+This is a **preference, not a prohibition**: check whether a `Field*` covers the need first; if it does,
+use it; if it truly doesn't, drop to the loose control and wire the a11y yourself.
+
+```vue
+<!-- ✅ Preferred — the field owns label + helper + validation -->
+<FieldText
+  id="app-name"
+  label="Application name"
+  v-model="form.name"
+  :invalid="!!errors.name"
+  :helper-text="errors.name || 'Shown in the dashboard.'"
+  required
+/>
+
+<!-- ⚠️ Loose — only when no Field* fits; now YOU wire the label + aria-describedby -->
+<Label for="app-name">Application name</Label>
+<InputText
+  id="app-name"
+  v-model="form.name"
+  aria-describedby="app-name-help"
+  :invalid="!!errors.name"
+/>
+<HelperText id="app-name-help">{{ errors.name || 'Shown in the dashboard.' }}</HelperText>
+```
+
+## Label association — every control names itself (both approaches)
+
+The one non-negotiable both layouts share: every control has a **programmatic accessible name**, its
+error is **tied to it**, and related controls are **grouped** — so a screen reader announces the field,
+its state, and the group it belongs to. The mechanics differ per approach, the contract does not:
+
+- **A real label, never a placeholder.** Approach B (and a composed `Select`) wires a real `<label for>`
+  to the control `id` — via a `field-*` wrapper or a hand-rendered `Label`; a composed `Select` points
+  `for` at `Select.Trigger`'s `id` (labelling the wrapper labels nothing). Approach A (ItemGroup) uses
+  `Item.Title` as the field name and gives the control an `aria-label`. A placeholder is **never** the
+  label — it disappears on input and is not a reliable accessible name.
+- **Errors associated via `aria-describedby`.** The on-field `HelperText` carries an `id` and the control
+  points `aria-describedby` at it, so the message is announced when focus lands; the control's
+  `:required` / `:invalid` props set `aria-required` / `aria-invalid` — don't hand-roll them. A `field-*`
+  wrapper wires this for you; in an ItemGroup you set `aria-describedby` on the control and the `id` on
+  the `<HelperText>` yourself.
+- **Groups in `<fieldset>` + `<legend>`.** Each section is a native `<fieldset>` with a `<legend>`
+  (`sr-only` when a visible title already names it); a radio/checkbox set is its own `<fieldset>` whose
+  `<legend>` is the question.
+
+The sections below show each mechanism in place; this is the contract they satisfy.
+
+## Form Layout — the spacing reference
+
+Every form sits on the same **Form Layout**: the shared spacing spec for field rows and columns — the
+gutter between columns, the vertical rhythm between rows, and the label-to-control spacing. **This is the
+reference.** The _form types_ below only change the **container** the form lives in and its **save
+model**; the two internal layouts (Approach A / B) compose inside any of them. The spacing itself never
+changes.
+
+### Field spacing — the macro rule (one rhythm, everywhere)
+
+The same spacing applies in **every** container and **both** approaches. Never hand-pick a one-off gap;
+if a form seems to need a different rhythm, it's in the wrong container.
+
+| Between                                          | Token          | px                                     |
+| ------------------------------------------------ | -------------- | -------------------------------------- |
+| Label → control → HelperText (inside one field)  | `--spacing-xs` | 8 — already baked into every `field-*` |
+| Field → field (and row → row)                    | `--spacing-lg` | 24                                     |
+| Section → section                                | `--spacing-lg` | 24                                     |
+| Section overline → its card (Cards + ItemGroups) | `--spacing-sm` | 12                                     |
+| Compact modal body (Dialog / Drawer)             | `--spacing-md` | 16 — the **only** allowed tightening   |
+
+### Hierarchy (top → down, never inverted)
+
+form title (`text-heading-*` — `PageHeading size="medium"` on a page, a `CardBox` title / `text-heading-sm`
+in a contained card, `DialogTitle` in a modal) → form description (`text-body-sm text-(--text-muted)`)
+→ section overline (`text-overline-sm`) or sub-heading (`text-heading-xs`) → **field label** (`Label`,
+which carries the required tag) → control → **helper** (`HelperText` — guidance, or the required/invalid
+feedback). A label is never smaller than its helper; a section title is never smaller than a field label.
+
+## Form types — container and save model
+
+Every form sits on the same **Form Layout** (above); a _type_ only changes the **container** the form
+lives in and its **save model**. Approach A / B still applies inside each one. There are **five form
+contexts** in Azion products:
+
+- **Drawer form.** In-context creation — the user is deep inside a navigated module and needs to create
+  a resource _without leaving the page they're on_. One scoped save (the drawer's primary action).
+  Approach A for grouped/config-heavy creates (one flush ItemGroup, or several overline-titled sections),
+  Approach B for short ones.
+
+- **Nested drawer.** A drawer form whose Select points at a _related_ resource that may not exist yet — a
+  Function, a Cache Setting, a Team. Rather than sending the user away to create it (losing the parent
+  form's in-progress state), a "Create …" quick-add opens a **second, smaller drawer** stacked over the
+  first; on save the new resource is appended to the Select's options and selected back into the parent.
+  **Each drawer is its own form** — its own scoped save, its own `submitting` flag, its own `<fieldset>`;
+  the two never share a lock. Approach A inside each. This is the create-a-related-resource-inline case,
+  documented below.
+
+- **Dialog form.** Small, focused, usually confirmational or destructive — e.g. removing a resource.
+  Few (or zero) fields, a single confirm action. Approach B (stacked fields). A destructive confirm
+  typically gates its action on a typed phrase (error prevention) rather than surfacing a required-error.
+
+- **ItemGroup settings.** Account-level configuration surfaces built from `Item` rows (Approach A). The
+  rows organize **either as multiple Cards** (grouped by topic — e.g. Billing split into Plan, Payment,
+  Invoices; each card titled by an `OVERLINE` above it, see Approach A § _Section title_) **or as a
+  single flush block** (all rows in one container, for shorter or flat settings). Used for Billing,
+  Integrations, Account Settings — "define and manage personal account preferences and profile config".
+
+- **CardBox with independent saves.** Long configuration pages split into multiple `CardBox` sections
+  where **each card owns its own save**, so the user commits changes in parts instead of one giant
+  submit. Approach A inside each card.
+
+**Save model follows partitioning, not the container type.** A form that is one logical unit has **one
+save** — a Drawer, a Dialog, or an ItemGroup (whether a single flush block **or** several overline-titled
+sections, like Account Settings; the sections group the topic, not the save). A form deliberately split
+into independently-committed cards — the **CardBox with independent saves** type — has **one save per
+card**, each locking off its own `submitting` flag (the `/webkit-ui-states` contract).
+
+### Example — CardBox with its own save
+
+A self-contained settings card (one of possibly several on the page, each committing independently): the
+card's name is the `CardBox` **`title`** (it renders in the card header), then a short description at the
+top of the body, the fields, an optional inline note, and the card's **own save in the footer**.
+`CardBox`'s footer is centered by default, so a full-width `justify-between` child puts a "Learn more"
+link on the left and Save on the right. Canonical pattern:
+
+```vue
+<script setup>
+  import Button from '@aziontech/webkit/button'
+  import CardBox from '@aziontech/webkit/card-box'
+  import Label from '@aziontech/webkit/label'
+  import Link from '@aziontech/webkit/link'
+  import Message from '@aziontech/webkit/message'
+  import Select from '@aziontech/webkit/select'
+  import { reactive, ref } from 'vue'
+
+  const form = reactive({ preprod: 'default', prod: 'default' })
+  const options = [
+    { label: 'Default (controlled at the team level)', value: 'default' },
+    { label: 'Enabled', value: 'enabled' },
+    { label: 'Disabled', value: 'disabled' }
+  ]
+  const displayValue = (v) => options.find((o) => o.value === v)?.label ?? ''
+  const submitting = ref(false) // /webkit-ui-states: Save :loading + fields :disabled off one flag
+</script>
+
+<template>
+  <CardBox
+    title="Azion Toolbar"
+    class="w-full"
+  >
+    <template #content>
+      <!-- body rhythm: fields are --spacing-lg apart; each field triad is --spacing-xs -->
+      <div class="flex flex-col gap-(--spacing-lg)">
+        <p class="text-body-sm text-(--text-muted)">
+          Enable the Azion Toolbar on your Deployments.
+        </p>
+
+        <div class="grid grid-cols-1 gap-(--spacing-lg) sm:grid-cols-2">
+          <div class="flex flex-col gap-(--spacing-xs)">
+            <Label for="tb-preprod">Pre-Production Deployments</Label>
+            <Select
+              v-model="form.preprod"
+              size="large"
+              :display-value="displayValue"
+            >
+              <Select.Trigger id="tb-preprod" />
+              <Select.Content>
+                <Select.Option
+                  v-for="o in options"
+                  :key="o.value"
+                  :value="o.value"
+                  >{{ o.label }}</Select.Option
+                >
+              </Select.Content>
+            </Select>
+          </div>
+          <div class="flex flex-col gap-(--spacing-xs)">
+            <Label for="tb-prod">Production Deployments</Label>
+            <Select
+              v-model="form.prod"
+              size="large"
+              :display-value="displayValue"
+            >
+              <Select.Trigger id="tb-prod" />
+              <Select.Content>
+                <Select.Option
+                  v-for="o in options"
+                  :key="o.value"
+                  :value="o.value"
+                  >{{ o.label }}</Select.Option
+                >
+              </Select.Content>
+            </Select>
+          </div>
+        </div>
+
+        <Message severity="info">
+          To use the toolbar in production your team members need the Chrome extension, or
+          <a href="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/docs/toolbar">enable the toolbar for that domain</a>
+          in the toolbar menu.
+        </Message>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex w-full items-center justify-between gap-(--spacing-sm)">
+        <Link
+          href="#"
+          label="Learn more about the Azion Toolbar"
+          size="medium"
+        />
+        <Button
+          label="Save"
+          kind="primary"
+          size="medium"
+          :loading="submitting"
+        />
+      </div>
+    </template>
+  </CardBox>
+</template>
+```
+
+### Example — Dialog form (destructive confirm)
+
+A modal for a short, blocking decision. Compose `Dialog` + `DialogPortal`/`DialogOverlay`/`DialogContent`
+with the `Panel*` regions; the body uses the compact `--spacing-md` rhythm. The primary (destructive)
+action stays disabled until the user types the exact confirmation phrase — error prevention, not a toast.
+Canonical pattern:
+
+```vue
+<script setup>
+  import Button from '@aziontech/webkit/button'
+  import Dialog from '@aziontech/webkit/dialog'
+  import DialogClose from '@aziontech/webkit/dialog-close'
+  import DialogContent from '@aziontech/webkit/dialog-content'
+  import DialogOverlay from '@aziontech/webkit/dialog-overlay'
+  import DialogPortal from '@aziontech/webkit/dialog-portal'
+  import DialogTitle from '@aziontech/webkit/dialog-title'
+  import InputText from '@aziontech/webkit/input-text'
+  import Message from '@aziontech/webkit/message'
+  import PanelContent from '@aziontech/webkit/panel-content'
+  import PanelFooter from '@aziontech/webkit/panel-footer'
+  import PanelHeader from '@aziontech/webkit/panel-header'
+  import { computed, ref } from 'vue'
+
+  const open = ref(false)
+  const phrase = 'webkit-storybook-dev'
+  const confirmation = ref('')
+  const canDelete = computed(() => confirmation.value.trim() === phrase)
+
+  const remove = () => {
+    if (!canDelete.value) return
+    open.value = false
+    confirmation.value = ''
+  }
+</script>
+
+<template>
+  <Dialog
+    v-model:open="open"
+    size="medium"
+  >
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogContent>
+        <PanelHeader class="w-full">
+          <DialogTitle>Delete Application</DialogTitle>
+          <DialogClose />
+        </PanelHeader>
+
+        <!-- compact modal body: --spacing-md between blocks -->
+        <PanelContent class="flex flex-col gap-(--spacing-md)">
+          <Message
+            severity="warning"
+            label="Once confirmed, this action can't be reversed."
+          />
+          <p class="m-0 text-body-sm text-(--text-muted)">
+            The selected Application will be deleted, along with all associated settings or
+            instances.
+          </p>
+          <label
+            for="confirm-delete"
+            class="text-body-sm text-(--text-default)"
+          >
+            To confirm, type "{{ phrase }}" in the box below:
+          </label>
+          <InputText
+            id="confirm-delete"
+            v-model="confirmation"
+            autocomplete="off"
+            class="w-full"
+          />
+        </PanelContent>
+
+        <PanelFooter class="flex-col md:flex-row md:justify-end">
+          <Button
+            class="w-full md:w-auto"
+            label="Cancel"
+            kind="outlined"
+            @click="open = false"
+          />
+          <Button
+            class="w-full md:w-auto"
+            label="Delete"
+            kind="danger"
+            :disabled="!canDelete"
+            @click="remove"
+          />
+        </PanelFooter>
+      </DialogContent>
+    </DialogPortal>
+  </Dialog>
+</template>
+```
+
+### Example — Nested drawer (create a related resource inline)
+
+A drawer form whose `Select` points at a resource the user may not have created yet. Rather than sending
+them away to make it — and losing everything they've typed in the parent — a "Create …" affordance in the
+`Select`'s footer opens a **second, smaller drawer** on top. The child creates the resource, appends it to
+the `Select`'s options, selects it back into the parent, and closes; the parent form is exactly as the user
+left it. This is the pattern behind _Functions Instance → Edge Function → Create Function_ in the
+Applications module.
+
+Three decisions make it safe:
+
+- **Independent scopes.** The parent and child are separate `<form>`s, each with its **own** `submitting`
+  flag, its own `<fieldset :disabled>`, its own Save `:loading` (the `/webkit-ui-states` Pattern 1 lock, per
+  drawer). Submitting the child never locks the parent, and the parent's save never touches the child.
+- **A controlled Select + a sentinel value.** The parent `Select` is **controlled** (`:model-value`, not
+  `v-model`) so picking the quick-add never commits a real value. The quick-add is a normal
+  `Select.Option` in the `#footer` slot carrying a sentinel value; `@update:model-value` intercepts it,
+  closes the dropdown, and opens the child instead of assigning `form.*`.
+- **Explicit stacking.** A webkit `Drawer` panel sits at `z-1001` and a `Select.Content` teleports to
+  `<body>` at `z-50`, so each layer must opt its overlay / content / popups **above** the layer beneath
+  it: the child drawer's overlay `z-1002` / content `z-1003`, any `Select.Content` inside the child
+  `z-1004`; a `Select.Content` in the **parent** drawer needs `z-1002` to clear the parent panel.
+  (These `!z-[…]` overrides are the current stopgap for a webkit bug where overlay popups render behind a
+  `Drawer` — remove them once webkit stacks overlay content above `Drawer`.)
+
+Canonical pattern:
+
+```vue
+<script setup>
+  // PARENT large drawer holds a Select of Functions; the CHILD medium drawer creates one.
+  const functions = ref([{ value: 'fn-auth', label: 'auth-handler' }])
+  const functionLabel = (v) => functions.value.find((f) => f.value === v)?.label ?? ''
+
+  // The PARENT form's own scope.
+  const form = reactive({ functionId: '' })
+  const errors = reactive({ functionId: '' })
+  const submitting = ref(false)
+
+  // A sentinel Select value for the quick-add. The Select is CONTROLLED (:model-value),
+  // so picking the sentinel never commits a real value — it opens the child instead.
+  const CREATE_FUNCTION = '__create-function__'
+  const functionSelectOpen = ref(false) // control the dropdown so we can close it first
+  const onFunctionModel = (value) => {
+    if (value === CREATE_FUNCTION) {
+      functionSelectOpen.value = false // close the dropdown …
+      functionOpen.value = true // … then open the child over the parent
+      return
+    }
+    form.functionId = value
+    errors.functionId = ''
+  }
+
+  // The CHILD form's own, SEPARATE scope — its own submitting flag.
+  const functionOpen = ref(false)
+  const functionForm = reactive({ name: '' })
+  const functionSubmitting = ref(false)
+
+  const submitFunction = async () => {
+    if (functionSubmitting.value) return // re-entrancy lock, on the CHILD's flag
+    functionSubmitting.value = true
+    try {
+      const value = `fn-${uid()}`
+      functions.value = [{ value, label: functionForm.name.trim() }, ...functions.value]
+      form.functionId = value // select the new resource back into the parent
+      errors.functionId = ''
+      toast.success(`Function "${functionForm.name.trim()}" created.`)
+      functionOpen.value = false
+    } catch (error) {
+      toast.error('Could not create the function.', { description: error?.message })
+    } finally {
+      functionSubmitting.value = false // release on success AND failure
+    }
+  }
+</script>
+
+<template>
+  <!-- PARENT: the Function Select with a quick-add in its footer slot -->
+  <Select
+    :model-value="form.functionId"
+    v-model:open="functionSelectOpen"
+    :display-value="functionLabel"
+    :disabled="submitting"
+    placeholder="Select a function"
+    :required="!!errors.functionId"
+    @update:model-value="onFunctionModel"
+  >
+    <Select.Trigger
+      id="fi-function"
+      aria-label="Edge Function"
+    />
+    <Select.Content class="!z-1002">
+      <!-- above the parent drawer panel (z-1001) -->
+      <Select.Option
+        v-for="fn in functions"
+        :key="fn.value"
+        :value="fn.value"
+        >{{ fn.label }}</Select.Option
+      >
+      <template #footer>
+        <Select.Option
+          :value="CREATE_FUNCTION"
+          icon="pi pi-plus-circle"
+          >Create Function</Select.Option
+        >
+      </template>
+    </Select.Content>
+  </Select>
+
+  <!-- CHILD medium drawer — its own form + submitting flag; stacks above the parent -->
+  <Drawer
+    v-model:open="functionOpen"
+    size="medium"
+    side="right"
+  >
+    <DrawerPortal>
+      <DrawerOverlay class="z-1002" />
+      <DrawerContent class="z-1003">
+        <form
+          class="flex min-h-0 flex-1 flex-col"
+          aria-label="Create Function"
+          novalidate
+          @submit.prevent="submitFunction"
+        >
+          <fieldset
+            class="m-0 flex min-w-0 flex-col gap-(--spacing-lg) border-0 p-0"
+            :disabled="functionSubmitting"
+          >
+            <legend class="sr-only">Create function</legend>
+            <!-- Approach A ItemGroup sections here; a nested Select uses !z-1004 -->
+          </fieldset>
+          <!-- PanelFooter: Cancel + Save :loading="functionSubmitting" + sr-only submit -->
+        </form>
+      </DrawerContent>
+    </DrawerPortal>
+  </Drawer>
+</template>
+```
+
+Rules:
+
+- **Parent and child are two independent forms.** Each has its own `submitting` flag, `<fieldset :disabled>`,
+  and Save `:loading`; neither save locks the other. Guard each handler and release in `finally`.
+- **The parent `Select` is controlled + intercepted.** Use `:model-value` (not `v-model`), a sentinel
+  value for the quick-add `Select.Option` (in the `#footer` slot), and an `@update:model-value` that opens
+  the child on the sentinel and only otherwise assigns `form.*` and clears the error.
+- **Close the dropdown before opening the child.** Control the parent `Select`'s open state
+  (`v-model:open`) and set it `false` in the same handler that opens the child, so the popup doesn't linger
+  under the new drawer.
+- **On the child's save, wire the resource back into the parent** — append it to the `Select`'s options,
+  set the parent's model to the new value, clear the parent's error for that field, `toast.success`, close
+  the child. The parent form keeps everything else the user had typed.
+- **Stack every layer explicitly** — child overlay `z-1002`, child content `z-1003`, a `Select.Content`
+  inside the child `z-1004`, a `Select.Content` in the parent `z-1002` (temporary overrides for the
+  webkit `Drawer`/overlay-popup stacking bug).
+- Everything else follows the **Drawer form** rules: Approach A ItemGroup sections inside each drawer,
+  validation on submit only (`Item.Title` as the label, `HelperText` under the control), Enter submits via
+  an `sr-only` `<button type="submit">`.
+
+## Approach A — Cards + ItemGroups (grouped / settings forms)
+
+Each section is a flush `CardBox` (`:padded="false"`) whose body is an `Item.List`. `Item.List` draws
+the dividers between rows automatically, so every field reads as a divided row inside one box: the
+field's name + guidance on the left (`Item.Content`), the control on the right (`Item.Actions`).
+Multiple sections stack, each with a small `OVERLINE` title above its card.
+
+**In an ItemGroup, `Item.Title` IS the label.** Do **not** use `<Label>` inside an `Item` — the field
+name is `Item.Title`, its guidance is `Item.Description`, and the control carries an `aria-label` for its
+accessible name. `<Label>` is reserved for **Fields separated** (Approach B) and composed `Select`
+fields, where there is a real `<label for>` wired to a control `id`. (`Label` renders at
+`text-label-sm`, smaller than `Item.Description` — using it as a row title inverts the hierarchy.)
+
+**Items are `size="small"`.** Small is the density that gives grouped forms the best rhythm and
+hierarchy — tight enough that a section reads as one unit, roomy enough that each row is a clear field.
+Use `size="small"` on **every** `Item` in a form; reserve `medium` for content/marketing rows.
+Canonical pattern:
+
+```vue
+<script setup>
+  import CardBox from '@aziontech/webkit/card-box'
+  import HelperText from '@aziontech/webkit/helper-text'
+  import Item from '@aziontech/webkit/item'
+  import InputText from '@aziontech/webkit/input-text'
+</script>
+
+<template>
+  <section class="flex flex-col gap-(--spacing-sm)">
+    <p class="px-(--spacing-xs) text-overline-sm text-(--text-muted)">General</p>
+    <CardBox :padded="false">
+      <template #content>
+        <Item.List>
+          <Item
+            size="small"
+            class="items-start"
+          >
+            <Item.Content>
+              <!-- Item.Title is the label; control takes an aria-label -->
+              <Item.Title>Name</Item.Title>
+              <Item.Description>A unique, descriptive name for the application.</Item.Description>
+            </Item.Content>
+            <Item.Actions class="flex-1 justify-end">
+              <!-- Control + feedback stack in one field-width column: the
+                   HelperText renders UNDER the control, --spacing-xs apart, only
+                   after a failed submit. An empty required field is amber
+                   `required` (a prompt, NOT an error); a filled-but-malformed value
+                   is red `invalid`. Emptiness picks the state — never both at once. -->
+              <div class="flex w-full max-w-(--container-xl) flex-col gap-(--spacing-xs)">
+                <InputText
+                  v-model="form.name"
+                  size="large"
+                  class="w-full"
+                  aria-label="Name"
+                  :required="!!errors.name && !form.name.trim()"
+                  :invalid="!!errors.name && !!form.name.trim()"
+                  :aria-describedby="errors.name ? 'name-error' : undefined"
+                  @update:model-value="errors.name = ''"
+                />
+                <HelperText
+                  v-if="errors.name"
+                  id="name-error"
+                  :kind="form.name.trim() ? 'invalid' : 'required'"
+                  :value="errors.name"
+                />
+              </div>
+            </Item.Actions>
+          </Item>
+        </Item.List>
+      </template>
+    </CardBox>
+  </section>
+</template>
+```
+
+Rules:
+
+- **`CardBox :padded="false"` + `Item.List`** — one box, dividers from the list, no box-in-box.
+- **Every `Item` is `size="small"`.** Consistent across the whole form.
+- **`Item.Title` is the label; the control takes an `aria-label`.** Name in `Item.Title`, guidance in
+  `Item.Description`, control on the right in `Item.Actions class="flex-1 justify-end"`. No `<Label>`
+  inside an `Item` — validation feedback is the control's own `:required`/`:invalid` on submit.
+- **The validation message renders as a `HelperText` under the control.** Since there is no `Label` (so
+  no `HelperText` triad) and no guidance region on the right, wrap the control in a field-width
+  `flex flex-col gap-(--spacing-xs)` column — capped at `max-w-(--container-xl)` (576px) so the
+  control column stays a legible field width on wide pages — and render a `<HelperText>` **below** it, shown only
+  after a failed submit and linked to the control via `aria-describedby`. This is still the field saying
+  what it needs, on the field — **not** a summary block or a `Message` callout. `Item.Description` stays
+  as the always-on guidance on the left.
+- **Required is NOT an error — pick the state by what failed.** An empty required field is a _prompt_:
+  `<HelperText kind="required">` (amber) + the control's `:required` (amber). A field whose value is
+  present but malformed is an _error_: `<HelperText kind="invalid">` (red) + the control's `:invalid`
+  (red). Never set both `:required` and `:invalid` at once — that yields an amber border with a red
+  helper. When one field can fail both ways, emptiness is the discriminator
+  (`:kind="value.trim() ? 'invalid' : 'required'"`). Note `Select`/`MultiSelect` have no amber border,
+  so for an empty-required Select the amber `HelperText` (and `:required` for `aria-required`) carries
+  the cue — never colour it red.
+- **A row whose left column wraps to two lines uses `class="items-start"`** so the title aligns to the
+  control's top, not its centre.
+- **Richer controls that don't fit a one-line row** (a radio group, a block of `field-radio-block`s)
+  stay a full-width block inside `Item.Actions` (or their own `Item`), not forced onto the row.
+
+### Section title — an OVERLINE above the card
+
+When a settings surface is split into topic sections (a multi-Card ItemGroup — the Account Settings
+pattern), **each section is titled by an `OVERLINE` above its flush `CardBox`**, not by the card's own
+header. The `<section>` stacks the overline over the card with `--spacing-sm` (12px); the `CardBox` stays
+`:padded="false"` and header-less (content only). This keeps the topic label lightweight and lets the
+card read as a single divided block of rows.
+
+```vue
+<section class="flex flex-col gap-(--spacing-sm)">
+  <p class="px-(--spacing-xs) text-overline-sm text-(--text-muted)">General</p>
+  <CardBox :padded="false">
+    <template #content>
+      <Item.List>
+        <!-- Item rows … -->
+      </Item.List>
+    </template>
+  </CardBox>
+</section>
+```
+
+Rules:
+
+- **The section title is `text-overline-sm text-(--text-muted)`** with `px-(--spacing-xs)`
+  inset so it aligns with the card's content; `--spacing-sm` gap to the card (per the spacing macro rule).
+- **The card is header-less** (`:padded="false"`, only `#content`). Don't also set a `CardBox` `title` —
+  the overline is the section title; a card header would double it.
+- **A dangerous section** (Danger Zone) reuses the pattern with the danger tokens: overline in
+  `text-(--danger-contrast)` above a `CardBox class="border-(--danger-border) bg-(--danger)"`.
+- **Overline vs `CardBox` title — pick by role.** An **OVERLINE above** the card titles a _section of a
+  larger page_ (multi-Card ItemGroup). A **`CardBox` `title`** (in the card header) names a _self-contained
+  card that is the form_ — the "CardBox with its own save" / Contained form. Never use both on one card.
+
+## Approach B — Fields separated (short focused forms)
+
+A field is a **triad**: a visible `Label`, the control, and a `HelperText`. Ship it as one of the
+`@aziontech/webkit/field-*` components — they render the triad and wire the a11y for you: the `Label`'s
+`for` matches the control `id`, the helper is linked via `aria-describedby`, `required` sets
+`aria-required`, and `invalid` sets `aria-invalid`. Stack the fields in a single column.
+
+The `required` tag on the `Label` is **persistent** — it advertises the field is mandatory from first
+render, independent of validation. Because `field-*`'s own `label` prop couples the Label tag to the
+same `required` that drives the field's amber state, render the `Label` **yourself** (always `required`)
+and give the wrapper **no** `label`; then bind the wrapper's `:required` to the post-submit empty state
+so only the field's amber (border + helper) is revealed on submit. Canonical pattern:
+
+```vue
+<script setup>
+  import FieldText from '@aziontech/webkit/field-text'
+  import Label from '@aziontech/webkit/label'
+</script>
+
+<template>
+  <div class="flex flex-col gap-(--spacing-md)">
+    <!-- Label required ALWAYS (rendered here; the wrapper gets no `label`). Empty →
+         :required (amber), the wrapper's helper flips to kind=required. A malformed
+         value → :invalid (red). Never both at once. `errors.name` holds the message
+         ("" = valid), so the helper falls back to guidance when clear. -->
+    <div class="flex w-full flex-col gap-(--spacing-xs)">
+      <Label
+        for="app-name"
+        required
+        >Name</Label
+      >
+      <FieldText
+        v-model="form.name"
+        input-id="app-name"
+        name="name"
+        placeholder="my-application"
+        :required="!!errors.name && !form.name.trim()"
+        :invalid="!!errors.name && !!form.name.trim()"
+        :helper-text="errors.name || 'A unique name for this application.'"
+        @update:model-value="errors.name = ''"
+      />
+    </div>
+  </div>
+</template>
+```
+
+Available wrappers (ask the webkit MCP `suggest_component`, or read
+`node_modules/@aziontech/webkit/catalog.json` (`imports`) — every key is a real subpath): `field-text`,
+`field-textarea`, `field-password`, `field-phone-number`, `field-input-group`, `field-checkbox` /
+`field-checkbox-block`, `field-radio` / `field-radio-block`, `field-switch` / `field-switch-block`,
+`field-text-switch`.
+
+Rules:
+
+- **Never a bare `InputText` / `Textarea` next to a floating `<p>` "label".** Use the `field-*`
+  wrapper. A placeholder is **not** a label — it vanishes on input and is not a reliable accessible name.
+- **The helper region is the guidance region.** Feed it the field's guidance; on a failed submit swap it
+  for the message and flip the state — `:required` (amber, `kind=required`) for an empty field,
+  `:invalid` (red, `kind=invalid`) for a malformed one. Never pass both `:required` and `:invalid` true
+  together (amber border + red helper). It's still the wrapper's own helper row, not a second error node.
+- **A composed `Select` labels its TRIGGER, not the wrapper** — see the next pattern.
+
+## Composed Select — label the TRIGGER, not the wrapper
+
+There is no `field-select`. When you compose one from `Label` + `Select` + options, the focusable
+element is the **trigger** (a `role="combobox"` `<button>`), and `Select`'s `$attrs` land on its outer
+wrapper `<div>`, _not_ the button. So the `Label`'s `for` and the `id` must go on **`<Select.Trigger>`**.
+Pointing `<label for>` at the `<Select>` wrapper labels nothing. This holds in **both** approaches.
+
+```vue
+<!-- Label required ALWAYS; empty-required → :required (amber semantics), not
+     :invalid (red). Select has no amber border, so pair with a HelperText. -->
+<Label for="app-country" required>Country</Label>
+<Select
+  v-model="form.country"
+  placeholder="Select an option…"
+  :required="!!errors.country"
+  :display-value="labelOf(countries)"
+  @update:model-value="errors.country = ''"
+>
+  <Select.Trigger id="app-country" />
+  <Select.Content>
+    <Select.Option v-for="o in countries" :key="o.value" :value="o.value">{{ o.label }}</Select.Option>
+  </Select.Content>
+</Select>
+```
+
+Rules:
+
+- **`Label for` === `Select.Trigger id`.** Same string, and it must be the trigger's.
+- **`Select` already sets `aria-required` / `aria-invalid`** on the trigger from its `required` /
+  `invalid` props — pass the props, don't hand-roll the aria.
+
+## Grouping — a real `<fieldset>` + `<legend>`
+
+Each section is a **group of related controls**. Give it programmatic grouping with a native
+`<fieldset>` and an `sr-only` `<legend>` (the visible section title — the `OVERLINE` or `CardBox title`
+— already names it, so it isn't drawn twice). A `<fieldset>` also disables its whole subtree in one
+attribute, which is how you lock the scope on submit.
+
+```vue
+<fieldset class="m-0 flex min-w-0 flex-col gap-(--spacing-lg) border-0 p-0" :disabled="submitting">
+  <legend class="sr-only">Account settings</legend>
+  <!-- sections: CardBox + Item.List (Approach A) OR stacked field-* (Approach B) -->
+</fieldset>
+```
+
+Rules:
+
+- **`<legend>` is the fieldset's first child**, and `sr-only` when a visible title already shows it.
+- **Related radios/checkboxes are their own group** — a set of radios is a `<fieldset>` whose
+  `<legend>` is the question; the `field-radio-block` labels are the options.
+
+## Validation — required (amber) vs invalid (red), surfaced only on submit
+
+Validation runs **on submit, once** — not on every keystroke, not on blur. The **feedback is the
+field's own state plus an on-field `HelperText`** — there is **no separate error-summary block and no
+`Message` callout** for field validation; the field says what it needs, where it is.
+
+**Required is not an error.** Two failure kinds, two states:
+
+- **Required-but-empty** → the amber `required` state (`:required` on the control, `HelperText
+kind="required"`). It is a _prompt to fill_, not a rejection — never the red danger state.
+- **Filled-but-malformed** → the red `invalid` state (`:invalid` on the control, `HelperText
+kind="invalid"`). The value is present and wrong.
+
+Never set both on one field at once (amber border + red helper is the bug this rule prevents). When a
+field can fail both ways, emptiness is the discriminator. Store a real message so the `HelperText` has
+something to show.
+
+**Where a field has a `Label`, its required tag is persistent** — it shows from first render, not just
+on a failed submit, so the user knows the field is mandatory before touching it. Only the field's amber
+state (border + helper) is revealed on submit. Because `field-*`'s `label` prop couples the tag to the
+same `required` that colours the field, render the `Label` yourself (always `required`) and leave the
+wrapper's `label` unset (see Approach B). An **ItemGroup** has no `Label`, so it has no persistent tag —
+its required feedback is the on-submit amber `HelperText` only.
+
+```js
+const errors = reactive({ name: '', country: '' }) // "" = valid; populated ONLY by validate()
+
+const validate = () => {
+  // Empty → a required prompt; a non-empty bad value → an invalid message.
+  errors.name = form.name.trim() ? '' : 'This field is required.'
+  errors.country = form.country ? '' : 'This field is required.'
+  return !errors.name && !errors.country
+}
+
+const submit = async () => {
+  if (submitting.value) return // re-entrancy lock
+  if (!validate()) return // errors now drive :required / :invalid — no focus dance, no summary
+  submitting.value = true
+  try {
+    await save(form)
+    toast.success('Saved.')
+  } catch (error) {
+    toast.error('Could not save.', {
+      description: error?.message,
+      action: { label: 'Retry', onClick: submit }
+    })
+  } finally {
+    submitting.value = false
+  }
+}
+```
+
+Rules:
+
+- **`<form novalidate @submit.prevent>`** — own the validation; the native bubble UI is inconsistent
+  and unstyleable.
+- **Validate on submit only.** No live validation while the user types the first time.
+- **The feedback is `:required` OR `:invalid` bound to the error** (amber for empty, red for malformed —
+  never both), appearing only after a failed submit and clearing as the user edits
+  (`@update:model-value="errors.x = ''"`). Colour is never the only signal — the required tag / helper
+  text is the non-colour cue.
+- **The message lives on the field, as a `HelperText`.** In **Fields separated** it is the `field-*`
+  wrapper's own helper row (its `kind` flips to `required` when you pass `:required`, `invalid` when you
+  pass `:invalid`); in an **ItemGroup** it is a `<HelperText>` rendered under the control, its `kind`
+  matching the failure (`required` amber / `invalid` red — see Approach A). Either way it is
+  `aria-describedby`-linked to the control and appears only after a failed submit.
+- **No custom error-summary block** (`role="alert"` list of links) and **no `Message` callout** for
+  field validation. Those were removed on purpose: the field's own state + its `HelperText` is the feedback.
+- **Never `toast` a field error.** Missing/invalid input stays on the field. Toast is for
+  request/API failures only (see `/webkit-ui-states`).
+
+> **A server rejection scoped to one field is a different case**, and it is the one place a `Message`
+> is right. The value is not malformed — the API rejected it (a referenced object was deleted, a name
+> is already taken), so it takes **both** surfaces: a `Message` inside that field's own section _and_
+> the field's red `invalid` state (never the amber `required` prompt — the value is present). On a
+> long form, scroll-anchor the erroring section. The full placement table — field, section `Message`,
+> toast, auth card, background-job toast — is **`/webkit-errors`**.
+
+## Submission — native submit, one locked scope, sticky actions
+
+The primary action drives the native submit so **Enter submits**. While the request runs, **one flag
+locks the whole scope** — this is `/webkit-ui-states` **Pattern 1**; this skill **references it, does not
+re-derive it**. Save shows `:loading`, and **every field the action reads takes `:disabled` off the same
+flag**. On a long form, the actions live in a **sticky bar** so Save/Cancel are always reachable.
+
+**Bind `:disabled` on the controls, not only the `<fieldset>`.** A native `<fieldset :disabled>` blocks
+_interaction_ for the whole subtree, but webkit controls (`Select`, `Switch`, `field-*`, `InputText`)
+render their **disabled visual** from their own `disabled` prop — a fieldset alone leaves them looking
+active mid-submit. Keep the `<fieldset :disabled="submitting">` as the native safety net **and** pass
+`:disabled="submitting"` to each control (`field-*` forward it to their inner input). Multi-save forms
+(CardBox with independent saves) bind each card's controls to _that card's_ flag.
+
+```vue
+<footer
+  class="sticky bottom-0 border-t-(length:--border-width-default) border-(--border-muted) bg-(--bg-surface)"
+>
+  <div class="mx-auto flex max-w-(--container-5xl) items-center justify-end gap-(--spacing-sm) px-(--spacing-xl) py-(--spacing-sm)">
+    <Button type="button" label="Cancel" kind="outlined" size="medium" :disabled="submitting" @click="cancel" />
+    <Button label="Save" kind="primary" size="medium" :loading="submitting" @click="submit" />
+  </div>
+</footer>
+```
+
+Rules:
+
+- **Enter must submit.** The webkit `Button` renders a native `type="button"` and doesn't forward a
+  `type`, so drive `submit` from its `@click`; where the form is a drawer/dialog, add a hidden
+  `<button type="submit" class="sr-only">` inside the `<form>` so Enter still submits.
+- **Lock off one flag.** `<fieldset :disabled="submitting">` + `:disabled="submitting"` on **every**
+  control + Save `:loading="submitting"`; guard the handler and release in `finally` (this IS
+  `/webkit-ui-states` Pattern 1 — the fieldset is the native lock, the per-control
+  `:disabled` is what makes webkit `Select`/`Switch`/`field-*` show the disabled visual).
+- **Report the request result where the user is looking** — `toast.success` on the happy path,
+  `toast.error` with a Retry on failure. Field errors stay inline.
+
+## Disabled state — the disabled helper is optional context, not submit feedback
+
+A `HelperText` with `kind="disabled"` (it prepends a lock glyph, muted text) is an **optional** element
+whose only job is to explain **why a field is disabled** and how to lift the lock. It is **not**
+validation feedback and it is **not** required by the submit lock. Two cases:
+
+- **Submit lock — you don't need a helper, and you get none.** The `:disabled="submitting"` applied to
+  every control during a save is transient (it clears in `finally`) and the Save button's `:loading`
+  already says the form is busy. **Don't add a disabled-reason helper just because fields are locked
+  mid-submit.** A `field-*` that already has a guidance `helper-text` keeps showing it (its `kind` flips
+  to `disabled`, so the lock glyph joins it for the ~1s of the request); one with **no** `helper-text`
+  renders **no helper row at all** — the field writes no copy of its own, so nothing appears and
+  disappears under the field mid-save. Do **not** invent a lock explanation for a lock that lasts a
+  second.
+
+- **Persistent disable — use the disabled helper when the reason isn't obvious.** When a field is
+  disabled by a **dependency** (a plan tier, a toggle that must be on first, a mode that doesn't apply),
+  the disabled `HelperText` is the right, optional tool — e.g. _"Enable HTTPS support to choose HTTPS
+  ports."_ It gives the user the context to understand and lift the lock. In an **ItemGroup** that
+  context usually already lives in `Item.Description` (e.g. a disabled "HTTPS Ports" row whose
+  description reads _"Applies when the Application serves HTTPS traffic."_), so a separate disabled
+  helper is redundant — add one only when it says something the description doesn't.
+
+Rules:
+
+- **The submit lock needs no disabled-reason helper** — it's transient and the Save `:loading` covers it.
+- **A disabled helper is optional and explains the dependency**, never validation — it answers only
+  "why is this locked and how do I unlock it".
+- **Don't fabricate a disabled explanation for a transient lock.** Reserve `kind="disabled"` for a
+  persistent, non-obvious dependency.
+- **A disabled field is never also `required`/`invalid`.** `disabled` wins the control's state (and the
+  `HelperText` `kind`), so a locked field shows neither the amber required nor the red invalid cue.
+
+## Choosing an approach
+
+| Situation                                                            | Approach                                                                             |
+| -------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
+| Settings page, resource config, many grouped fields, a Create drawer | **A — Cards + ItemGroups** (`Item.List`, `size="small"`)                             |
+| Login, rename, a short 1–3 field dialog, one wizard step             | **B — Fields separated** (`field-*` stacked)                                         |
+| A section mixes a couple of simple rows with a radio block           | **A**, with the radio block as a full-width child inside its `Item`                  |
+| A drawer's Select needs a related resource that doesn't exist yet    | **Nested drawer** — quick-add opens a second drawer; each drawer its own scoped save |
+
+The module **create** action for a long form lands on a dedicated **page** (route `/<module>/new`), not
+a modal, so it is linkable and back-button-safe; a short create can live in a drawer.
+
+## Review output
+
+For `/webkit-form <file>`, list gaps grouped by pattern. Each:
+
+```
+✗ SomeForm.vue:NN  <Label for="runtime" /> but no element has id="runtime"
+  pattern: composed Select labels its trigger — for points at nothing; the combobox has no accessible name.
+  fix: add id="runtime" to <Select.Trigger>, matching the Label's for.
+
+✗ SomeForm.vue:NN  <Item> with no size
+  pattern: Cards + ItemGroups — form Items are size="small" for rhythm/hierarchy.
+  fix: <Item size="small">.
+```
+
+End with: `form is accessible` or `N gaps — fix before polish`.
+
+## References
+
+- Field wrappers, `Label`, `HelperText`, `Item`, `CardBox`, `Select`, `Button` import paths: ask the
+  webkit MCP `suggest_component`, or read `node_modules/@aziontech/webkit/catalog.json` (`imports`) —
+  every key is a real subpath.
+- Companion skills: `/webkit-ux-heuristics` (states + inline error placement), `/webkit-ui-states`
+  (lock-the-scope + toast for request errors), and `/webkit-errors` (where every failure goes: the
+  field, a section `Message`, a toast, the auth card — including the signed-out screens, which never
+  toast).
+- Token catalog (spacing, colour, shape, typography): the `@aziontech/theme` tokens (the `--*` CSS
+  variables it ships; the webkit MCP lists them).
+- Compose only webkit components and theme tokens — no external UI libraries, no hex/rgb colours, no
+  component-local CSS.
+
+## Definition of Done
+
+- [ ] Every control is a complete `Field*` (`FieldText`, `FieldTextarea`, `FieldPassword`, `FieldRadioBlock`,
+      `FieldSwitch`, …) unless no `Field*` fits; a loose input (`InputText`, `Select`, …) is used only as
+      the fallback, and then the label + `aria-describedby` are wired by hand.
+- [ ] The form type fits the flow (Drawer / nested Drawer / Dialog / ItemGroup settings / CardBox with
+      independent saves), and the **save model follows partitioning**: one save for a logical unit (Drawer,
+      Dialog, or an ItemGroup — single block _or_ multiple overline-titled sections); one save per card only
+      for the CardBox-with-independent-saves type.
+- [ ] A **nested drawer** keeps parent and child as independent forms — each its own `submitting` flag,
+      `<fieldset :disabled>`, and Save `:loading`; the parent `Select` is controlled with a sentinel
+      quick-add; the child wires its new resource back into the parent on save; every layer is stacked
+      explicitly (child overlay/content and any nested `Select.Content` above the parent panel).
+- [ ] Field spacing follows the macro rule: `--spacing-xs` inside a field, `--spacing-lg` between fields
+      and sections (`--spacing-md` only in a compact modal body). No one-off gaps.
+- [ ] Hierarchy is not inverted: title → description → section title → field label → control → helper.
+- [ ] Section titling matches role: a multi-Card ItemGroup titles each section with an `OVERLINE`
+      (`text-overline-sm`) above a header-less flush `CardBox`; a self-contained card that _is_ the form
+      uses the `CardBox` `title` in its header. Never both on one card.
+- [ ] The form uses **one** layout: Cards + ItemGroups (`Item.List`, every `Item` `size="small"`) or
+      Fields separated (`field-*` stacked) — not a mix within a section.
+- [ ] Field naming matches the type: in an **ItemGroup**, `Item.Title` is the label and the control
+      takes an `aria-label` (no `<Label>` inside an `Item`); in **Fields separated**, a real `Label`
+      (or `field-*` wrapper) with `for`→`id`, and a composed `Select` labels its trigger. No bare
+      control with a floating `<p>` label, no placeholder-as-label.
+- [ ] Where a required field has a `Label`, its required tag is **persistent** (always `required`, not
+      revealed on submit) — render the `Label` yourself and leave the `field-*` `label` unset so the tag
+      stays on while only the field's amber state is revealed on submit.
+- [ ] Each section is a native `<fieldset>` with an `sr-only` `<legend>`.
+- [ ] Validation runs on submit only; feedback is the field's state **and** an on-field `HelperText`
+      message (the `field-*` helper row in Fields separated; a `<HelperText>` under the control in an
+      ItemGroup), bound to the error and cleared on edit. Required-but-empty uses the amber `required`
+      state/`kind` (required is NOT an error); filled-but-malformed uses the red `invalid` state/`kind`;
+      never both on one field. No error-summary block, no `Message` callout for field validation.
+- [ ] `<form novalidate @submit.prevent>`; Enter submits; the scope locks off one flag
+      (`<fieldset :disabled>` **and** `:disabled` on every control + Save `:loading`, per `/webkit-ui-states`
+      Pattern 1); request errors toast, field errors stay inline.
diff --git a/.claude/skills/webkit-impeccable-polish/SKILL.md b/.claude/skills/webkit-impeccable-polish/SKILL.md
new file mode 100644
index 0000000000..67fa126fbb
--- /dev/null
+++ b/.claude/skills/webkit-impeccable-polish/SKILL.md
@@ -0,0 +1,99 @@
+---
+name: webkit-impeccable-polish
+description: The "feels finished" sign-off for UI on @aziontech/webkit — a whole-screen cross-axis pass that confirms state completeness, optical balance, and coherence AFTER the per-axis skills ran, plus an optional earned-delight pass (at most one or two restrained, token-driven moments at a completion / first-time / recovery / milestone). It names each axis and defers the token rules to the skill that owns them; it does not re-teach token sets.
+status: active
+last_updated: 2026-07-20
+scope: general
+enforced_by: [ui-verify, webkit-component-states, webkit-motion, review]
+---
+
+# Skill: webkit-impeccable-polish
+
+## Purpose
+
+The last 10% that separates "functional" from "finished". This is a **sign-off**, not a rulebook: it
+runs after `/webkit-ux-heuristics`, `/webkit-baseline-ui`, and `/webkit-motion-polish`, and checks the
+things each of those touches but none guarantees end-to-end — a coherent scale across the _whole_
+screen, every state accounted for, and optical balance. It names the axis and points at the skill
+that owns the rule; it deliberately does **not** re-enumerate token sets (that is
+`/webkit-baseline-ui`'s job — restating them here would only let the two drift).
+
+## How to use
+
+- `/webkit-impeccable-polish` — hold UI work in this conversation to the checklist below.
+- `/webkit-impeccable-polish <file>` — review the file and report, per issue: the quoted line, why it
+  falls short (one sentence), and the concrete fix.
+
+## The sign-off checklist
+
+Each item is a **cross-screen** check. Where a token set or rule is involved, the owning skill is
+named — go there for the allowed values; here you only confirm the screen as a whole holds together.
+
+1. **Typography hierarchy is coherent across the screen.** No inverted or skipped levels; a heading is
+   never smaller than a label; `text-balance` on headings, `text-pretty` on body, `tabular-nums` on
+   aligned figures, `truncate`/`line-clamp` in dense areas. Allowed token set: `/webkit-baseline-ui`.
+2. **Spacing rhythm is steady.** One predictable step between related elements; consistent section
+   padding; related items grouped tighter than unrelated (proximity reads as grouping). Scale:
+   `/webkit-baseline-ui`.
+3. **State completeness — the part no single skill guarantees end-to-end:**
+   - Every interactive element has **hover, focus-visible, active, disabled** (visible focus ring).
+   - Every async surface has **loading, empty, error** — cross-check `/webkit-ui-states`.
+   - Selected / current states are visible (not just inferable).
+     This is the highest-value check here: a screen usually fails "finished" on a missing state, not on
+     a wrong token.
+4. **Shape & elevation are coherent per role.** All cards share one radius, all inputs another;
+   elevation is monotonic with stacking (overlays sit above cards), not every surface floating.
+   Token roles: `/webkit-baseline-ui`.
+5. **Optical balance & restraint.** Shared edges and consistent optical centers; icons aligned to the
+   text baseline; **one accent per view**, the rest on surface/text/border tokens; no gradient/glow
+   unless requested; nothing that doesn't earn its place. Motion is smooth and reduced-motion-safe —
+   confirm via `/webkit-motion-polish`.
+6. **Two themes hold.** The screen reads correctly in light and dark without per-theme edits — confirm
+   via `/webkit-theming-dark-mode`, and observe it for real with `/webkit-ui-verify`.
+
+## Earned delight (optional)
+
+Once the six checks hold, **at most one or two** moments may earn a touch of delight — never sprinkled
+across hover states and every button (that is exactly the noise the restraint check, item 5, exists to
+catch). A moment is earned only at a **completion** (saved / deployed / published), a **first-time**
+success, an **error recovery**, or a **milestone** crossed.
+
+Keep it inside the register:
+
+- **Token-driven motion only** — a `transform`/`opacity` transition on the right curve (values per
+  `/webkit-motion-polish`). No new dependency, no confetti, no component-local `@keyframes`.
+- **Copy is the cheapest delight** — product-specific and technical. Say what the product actually did
+  ("Deployed to 24 edge locations"), never generic filler ("All done! 🎉") or AI-slop loading lines.
+- **Never block** — each moment is `< 1s`, skippable, and carries a `motion-reduce:*` escape; it
+  amplifies the result, never gates or obscures it.
+- **Nothing playful on a critical error path** — be calm and clear, not cute.
+
+## Hard rules
+
+- Do not re-teach token sets here — name the axis, defer the allowed values to the owning skill.
+- Do not sprinkle delight — at most one or two earned moments (completion / first-time / recovery /
+  milestone), token motion + product-specific copy only; no new lib, no confetti, no `@keyframes`.
+- Do not sign off a screen with a missing interactive or async state — that is what this pass exists
+  to catch.
+- Do not add polish that the structure skills haven't cleared: a missing empty/error state is a
+  `/webkit-ux-heuristics` gap, not something a taste pass can paper over.
+
+## Review output
+
+For `/webkit-impeccable-polish <file>`, group issues by checklist item. Each:
+
+```
+✗ SomeCard.vue:42  <button class="… focus:outline-none">  (no visible focus state)
+  why: keyboard users lose track of focus — fails state completeness (item 3).
+  fix: add a focus-visible ring using the ring token (see /webkit-baseline-ui for the exact token).
+```
+
+End with a verdict: `finished` or `N issues across <items>`.
+
+## Definition of Done
+
+- [ ] Type scale and spacing rhythm coherent across the whole screen (values per `/webkit-baseline-ui`).
+- [ ] Every interactive state present; every async state present (`/webkit-ui-states`); selected/current visible.
+- [ ] Radii and elevation coherent per role; one accent per view; no unrequested ornament.
+- [ ] Motion reduced-motion-safe; the screen holds in both themes (verified, not assumed).
+- [ ] Delight, if any, is at most one or two earned moments — token motion + product-specific copy, `< 1s`, skippable, `motion-reduce:*`-safe, no new lib/confetti.
diff --git a/.claude/skills/webkit-lists/SKILL.md b/.claude/skills/webkit-lists/SKILL.md
new file mode 100644
index 0000000000..d303155732
--- /dev/null
+++ b/.claude/skills/webkit-lists/SKILL.md
@@ -0,0 +1,438 @@
+---
+name: webkit-lists
+description: The list page — the one shape every resource index takes on @aziontech/webkit, and the filter system that narrows it. Fixes the page skeleton (shell → page heading carrying the create action → controls row → filter bar → card-wrapped Table), the split between search and filters (search runs through the table's own global filter; filters pre-narrow the data outside it), and the filter model itself — a field catalog the page declares plus a flat `{ fieldId: values[] }` applied state where fields intersect and the values inside one field union. Ships the chip-bar composition (one Popover walking fields then values, one chip per field, dimmed until it narrows something) so filtering looks and behaves the same on every index in the product, instead of one Select per column on one page and an operator builder on the next. Use when building or reviewing any resource index, list, or "all X" page. The page-level companion to /webkit-tables (which owns the Table and its cell recipes).
+status: active
+last_updated: 2026-08-24
+scope: general
+enforced_by: [webkit-prefer-over-custom, webkit-component-states, webkit-styling, ui-verify, review]
+---
+
+# Skill: webkit-lists
+
+## Purpose
+
+A product's list pages are the screens people spend the most time on and the ones that drift the fastest.
+Each one is built by whoever needed it, so one index puts a row of Selects above the table, the next hides
+the same job behind a badged funnel button, a third uses an operator builder with a `contains` dropdown
+nobody changes from the default — and none of them agree on where the search field goes or how much air
+sits between the controls and the rows they narrow.
+
+They are all the same page. This skill fixes that page: **one skeleton**, **one filter model**, and **one
+rule for which columns become filters**. `/webkit-tables` owns what happens inside the `Table` — the
+column model, the toolbar, the cell recipes. This skill owns everything around it: the page's structure,
+the controls row, the filter bar, and the state that connects them.
+
+Find the components named here through the `webkit` MCP (`suggest_component` / `get_component`) or
+`node_modules/@aziontech/webkit/catalog.json`.
+
+## How to use
+
+- `/webkit-lists` — build any index page in this conversation to the shape below.
+- `/webkit-lists <file>` — review that page against the patterns; per gap report the exact line/element
+  (quoted), which pattern it breaks (one sentence), and the concrete fix.
+
+Related: `/webkit-tables` (the Table, columns, cells) · `/webkit-navigation` (the app shell the page sits
+in) · `/webkit-ui-states` (the empty and loading states a filtered list must render) ·
+`/webkit-microcopy` (field labels, the empty-state sentence).
+
+## When to invoke
+
+- Building any "all X" / resource index / management list page.
+- Adding filtering to an existing table, or being asked "how do I filter this".
+- Reviewing a page whose controls row has grown a third `Select`.
+- The user says the filters look different from the other pages, the table jumps to an empty page after
+  filtering, or the search and the filters fight each other.
+
+---
+
+## 1. The list page, one shape
+
+A heading, then three nested bands, and nothing else:
+
+```vue
+<template>
+  <AppShell
+    active="applications"
+    :breadcrumb="[{ label: 'Applications' }]"
+  >
+    <main class="layout-column flex min-h-full flex-col">
+      <!-- THE PAGE HEADING. At first level this is the only place the module's name
+           appears: the shell renders the breadcrumb from the SECOND crumb up, so the
+           single crumb above is passed and not drawn. The create action lives HERE,
+           and it is the page's one `large` control. -->
+      <PageHeading
+        size="medium"
+        title="Applications"
+        description="Build, deploy, and manage your applications."
+      >
+        <template #actions>
+          <Button
+            label="Create application"
+            kind="primary"
+            size="large"
+            icon="pi pi-plus"
+          />
+        </template>
+      </PageHeading>
+
+      <!-- the band below the heading; `layout-section-start` opens it at the boundary
+           step, and zeroes itself when the heading is absent (empty account) -->
+      <section class="layout-section-start flex min-w-0 flex-col gap-(--layout-section-gap)">
+        <!-- ONE band: the controls, the filters, and the rows they narrow -->
+        <section class="flex min-w-0 flex-col gap-(--layout-group-gap)">
+          <!-- NARROWING ONLY, and all of it `medium`. The page's own action is in the
+               heading above; `#actions` here is for an action on the LISTING (a bulk
+               operation over the rows a filter selected), and is omitted when there is
+               none. -->
+          <ControlsHeader>
+            <InputText
+              v-model="search"
+              size="medium"
+              placeholder="Search applications..."
+              aria-label="Search applications"
+              class="min-w-36 grow basis-(--container-2xs)"
+            >
+              <template #iconLeft
+                ><i
+                  class="pi pi-search"
+                  aria-hidden="true"
+              /></template>
+            </InputText>
+          </ControlsHeader>
+
+          <FilterBar
+            v-model="filters"
+            :fields="filterFields"
+          />
+
+          <section class="flex min-h-0 flex-col">
+            <CardBox :padded="false">
+              <template #content>
+                <Table
+                  v-model:pagination="pagination"
+                  v-model:globalFilter="search"
+                  :data="visibleRows"
+                  :columns="columns"
+                  row-key="id"
+                  enable-sorting
+                  paginated
+                  :page-size="8"
+                  :border="false"
+                  @row-click="open"
+                />
+              </template>
+            </CardBox>
+          </section>
+        </section>
+      </section>
+    </main>
+  </AppShell>
+</template>
+```
+
+**A first-level module index opens with a `PageHeading`, and the module's create action lives in it.**
+The crumb does not name the page any more: the shell draws the breadcrumb only from the **second** crumb
+up (`/webkit-navigation`), because at first level a lone crumb repeated the word the highlighted nav row
+was already showing. So the heading is the only place the module's name appears in the content — a page
+without one is named nowhere but the rail. Title, one line of what the module is, `size="medium"`, and the
+create button in `#actions`.
+
+**The size ladder is what makes the two rows read as two rows.** The heading's action is the page's only
+`large` (40px) control; **everything** on the controls row is `medium` (32px) — search, the filter anchor,
+any listing action beside them. That difference IS the hierarchy: what the page is _for_ reads first, what
+_narrows_ the list reads second. At 40px both rows competed and the create button stopped being the
+biggest thing on screen. Promote or demote a row **whole**: one 32px control beside a 40px one leaves a
+4px break top and bottom.
+
+**Where each action goes.** The page's create action is the heading's; `ControlsHeader #actions` is for an
+action on the **listing** — a bulk operation over the rows a filter selected — and renders nothing when
+there is none. Never move the create button onto the controls row: its place would then depend on how the
+list is filtered, or on whether the list has rows at all.
+
+**The label is not a per-page choice.** A list the sidebar routes to reads `Create <object>`, the object
+lowercase because it is an instance and not the module (`Create application`, `Create network list`); a
+list that is a **tab inside a resource** reads `Add <Product Module>` in that module's exact
+capitalization (`Add Cache Settings`). Never a bare noun, never `New` — see `/webkit-microcopy`.
+
+**Two states keep the heading out of the way.** An empty account leads with its first-use screen instead
+(`v-if="!accountEmpty"`), whose hero already names the module; and `layout-section-start` zeroes its own
+step when it lands first, so the band below needs no change when the heading is absent.
+
+(A _second_-level list — a tab inside a resource — carries a `size="small"` heading: there the crumb
+_does_ name the resource, so the heading only labels the list inside it.)
+
+**The controls, the filter bar and the table are ONE band**, joined by the group step
+(`--layout-group-gap`), not the section step. They are not three things stacked on a page; they are one
+thing — a set of rows and the two controls that narrow it. Pushing the search a full section step away
+from the table it filters is the single most common version of this page done wrong.
+
+**The card is unpadded and the table is unbordered** (`:padded="false"` + `:border="false"`), so the card
+frames the table edge to edge. A padded card inside a bordered table gives you two nested rectangles with
+a stripe of dead space between them.
+
+**Empty and loading are the table's, not the page's.** Pass `:loading` and let the `Table` render its
+skeleton; render the empty state through `EmptyState` — see `/webkit-ui-states`. A filtered-to-nothing
+list needs a _different_ sentence from a genuinely empty account ("No applications match these filters"
+vs "Create your first application"), and only the page knows which it is.
+
+---
+
+## 2. Search and filters narrow different things
+
+They are not two flavours of the same control, and they do not live in the same place.
+
+|         | Search                                               | Filters                                           |
+| ------- | ---------------------------------------------------- | ------------------------------------------------- |
+| Answers | "where is the one I already know the name of"        | "show me the subset that shares a property"       |
+| Runs    | inside the table, `v-model:globalFilter`             | outside it, over `:data` before the table sees it |
+| Covers  | the free-text columns (name, id, repository, domain) | the enumerable ones (status, type, author, date)  |
+| Lives   | in the controls row, growing to fill it              | in its own row below                              |
+
+```js
+const visibleRows = computed(() => applyFilters(allRows.value, filterFields, filters.value))
+// → :data="visibleRows"   v-model:globalFilter="search"
+```
+
+**Filters narrow `:data` from outside the table** for two reasons. First, a field is often not a column at
+all — "Author" is a tooltip on the Last Modified avatar, not its own column, and a filter on it could
+never come from the table's own column state. Second, the table's applied-filter band only exists once a
+filter exists, so the affordance that _starts_ filtering has nowhere to live inside the table.
+
+**The filter bar is its own row, and it wraps.** It grows every time a filter is applied — a chip gains a
+value half, and on a narrow viewport the row becomes two rows. Sitting it inside the controls row makes
+the search field jump width as filters come and go. It never scrolls horizontally: a filter you cannot
+see is a filter you will not remove.
+
+---
+
+## 3. The field catalog — the columns decide the fields
+
+The page declares what it can be narrowed by. Only the page knows which of its columns are enumerable and
+how a row answers for each one, so the catalog is page data, not a component prop schema:
+
+```js
+const filterFields = [
+  {
+    id: 'author', // key in the applied state
+    label: 'Author', // chip prefix and menu row
+    kind: 'options', // many values, or exactly one
+    options: authorOptions, // [{ value, label, avatar?, icon? }]
+    match: (row, values) => values.includes(row.author)
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    kind: 'options',
+    options: [
+      { value: 'Active', label: 'Active' },
+      { value: 'Inactive', label: 'Inactive' }
+    ],
+    match: (row, values) => values.includes(row.status)
+  },
+  {
+    id: 'modified',
+    label: 'Last Modified',
+    kind: 'range', // one window at a time
+    options: DATE_PRESETS, // 24h · 7d · 30d · 3m · Custom…
+    formatValue: formatDateRange, // for a value not in `options`
+    match: (row, values) => matchDate(row.modifiedAt, values)
+  }
+]
+```
+
+**Which columns become fields:**
+
+- **Enumerable column → one field.** Status, type, environment, runtime, author, team. If you can list its
+  values, it is a field.
+- **Date column → relative periods, plus `Custom…`.** People arrive asking "what changed this week", not
+  "what changed between the 3rd and the 9th". Ship the periods as the values and put the month grid behind
+  a `Custom…` row, so the common ask is one click and the rare one costs the extra step it is worth. The
+  periods are open-ended (`end: null`) — each means _since_, and pinning the end to `now` silently drops a
+  row that lands while the panel is open.
+- **Free-text column → nothing.** Name, id, repository, domain are covered by the search field. One field
+  per text column gives you six chips nobody opens.
+- **A column with two values that are never both interesting → nothing.** A field that is always set to
+  the same value is a control with one option.
+
+**`kind` says how many values a field holds, not how it looks.** `options` accumulates — three authors is
+still one filter on Author. `range` replaces — two date windows at once contradict each other, so picking
+a second swaps it and picking the same one again clears it. The bar reads `kind` to decide whether picking
+a value keeps the panel open or returns to the field list.
+
+**Order the options the way the domain does, not alphabetically,** when the domain has an order:
+Production · Staging · Development reads as a promotion path; Development · Production · Staging reads as
+a sorted list of unrelated words.
+
+---
+
+## 4. The applied state — one flat object
+
+```js
+const filters = ref({}) // { status: ['Active'], modified: ['7d'] }
+```
+
+Keyed by field id, each holding the **array** of picked values. A missing or empty entry is not a filter.
+That one rule is what the whole bar reads from:
+
+| Question                          | Answer                                                     |
+| --------------------------------- | ---------------------------------------------------------- |
+| Is this field narrowing anything? | its entry is non-empty                                     |
+| How many filters are applied?     | the count of non-empty entries — never the count of values |
+| What does the chip show?          | the first pick's label, plus `+N` for the rest             |
+| Which chips are dimmed?           | the ones whose entry is empty                              |
+
+**Fields intersect; the values inside a field union.** Author _and_ Status, but author A _or_ author B.
+Every list filter implies this arrangement and almost none of them state it, so state it once in one
+helper instead of re-deriving it per page:
+
+```js
+export const applyFilters = (rows, fields, state) =>
+  rows.filter((row) =>
+    fields.every((field) => {
+      const values = state[field.id]
+      if (!values?.length) return true
+      return field.match(row, values)
+    })
+  )
+```
+
+**Count fields, not values.** Three authors is one filter on Author; reading "3" suggests three columns are
+cut when only one is.
+
+**The chip's value half names something concrete.** "Author Bruno Germano +2" beats "3 selected": they are
+the same width, and the second tells you nothing — you have to open the panel to learn a single one of the
+three, which is the exact cost the whole pattern exists to remove.
+
+---
+
+## 5. Compose the bar from webkit primitives
+
+There is no `@aziontech/webkit/filter-bar`. The bar is a small component you own, built from `Popover` and
+`Chip`, because the field catalog and its `match` functions are your data — a package component would have
+to take them as props anyway, and then you would own the same file with more indirection.
+
+**Anatomy:**
+
+```
+[⚙ Add Filter ▾]  [Author · Bruno Germano +2 ×]  [Status]  [Last Modified]
+ dashed chip,      filled chip, removable          outlined chips —
+ opens the panel                                   available, not applied
+```
+
+- **One anchor, not one popover per chip.** A single `Popover` whose panel walks two levels: the field list,
+  then that field's values. Clicking any chip opens the panel _onto that field_. One anchor means one focus
+  contract and one dismiss contract, instead of N popovers competing to be open.
+- **The trigger is a `Chip kind="dashed"`** — the dashed border is the "add one" affordance, and it sits in
+  the same row as the chips it creates. A `Chip` with `clickable` works as a `Popover.Trigger` child from
+  the keyboard: `Enter`/`Space` dispatch a real click.
+- **Applied chips are `kind="filled"` + `removable`; idle chips are `kind="outlined"`.** Every field gets a
+  chip, always, in catalog order — the bar shows what the page _can_ be narrowed by, not only what it is.
+- **Never reorder the chips.** Moving an applied chip to the front re-inserts its DOM node, which discards
+  any transition that was about to run on it, and moves the target out from under the pointer that just
+  clicked it.
+- **The remove `×` clears the field, and the chip stays.** `Chip` emits `remove` and does not unmount
+  itself — presence is yours. Here the chip must survive its own removal: it goes from filled back to
+  outlined, because the field is still available.
+- **One search field serves both levels.** Typing narrows the field list at level one and the value list at
+  level two.
+- **Keyboard: `↑`/`↓` walk the rows of the _current_ level only.** Scope the query to the level's own
+  container, or a level sliding out will steal focus.
+- **Restore focus to the chip that opened the panel**, not to the bar.
+
+**Accessibility:** value rows carry `role="menuitemcheckbox"` when the field accumulates and
+`role="menuitemradio"` when it replaces. The trigger's accessible name carries the applied count out loud
+("Add filter, 2 applied") — a count badge that is only a coloured dot is invisible to a screen reader.
+
+---
+
+## 6. Rewind pagination when the filters change
+
+Filtering `:data` from outside the table does **not** trip the table's own auto-reset, because from its
+point of view the data simply changed. Filter down from page 4 and you land on an empty page 4.
+
+```js
+watch(filters, () => {
+  pagination.value = { ...pagination.value, pageIndex: 0 }
+})
+```
+
+Rewind on anything that re-narrows the set from outside: the filters, and a tenancy/scope switch.
+
+**Fold the four repeated pieces into one helper** rather than re-typing them per page — the applied-state
+ref, `applyFilters`, the pagination ref, and this watcher. Every index page then declares its catalog and
+its columns and nothing else.
+
+---
+
+## Hard rules
+
+- The controls row, the filter bar and the table are **one band** at the group step — never a section step
+  between the search and the rows it filters.
+- A first-level module index **opens with a `PageHeading`** (`size="medium"`) carrying the module's
+  create action — the breadcrumb starts at the second level, so nothing else names the page.
+- **The heading's action is the page's only `large` control; the whole controls row is `medium`.**
+- `CardBox :padded="false"` + `Table :border="false"` — never a padded card around a bordered table.
+- **Search runs inside the table** (`v-model:globalFilter`); **filters narrow `:data` outside it**. Never
+  route a membership filter through an operator builder — `is one of` on every row is a control with one
+  option.
+- **No row of Selects** above the table, and no badged funnel button hiding them. One chip row, one anchor.
+- The filter bar **wraps; it never scrolls horizontally**.
+- The applied state is `{ fieldId: values[] }` — flat, arrays, empty means absent. Not a list of
+  `{ field, operator, value }` conditions.
+- **Count fields, not values.**
+- Chips render in **catalog order, always** — applied chips are never floated to the front.
+- **Rewind `pageIndex` to 0** whenever the filters or the scope change.
+- A free-text column does **not** get a field; the search field covers it.
+- Every field needs a `match` — the catalog is what narrows the rows, not a parallel `if` chain in the page.
+
+## Review output
+
+Per gap:
+
+```
+✗ ApplicationsList.vue:38
+  quoted: <section class="layout-section-start flex flex-col gap-(--layout-section-gap)">
+  rule:   the controls row and the table it narrows are one band, joined at the group step
+  fix:    gap-(--layout-group-gap) — keep the section step for the gap ABOVE the band
+
+✗ WorkloadsIndex.vue:71
+  quoted: <Select v-model="statusFilter" :options="statusOptions" />
+  rule:   filtering is one chip row behind one anchor, not one Select per column
+  fix:    declare status in the field catalog and render the shared filter bar
+
+✗ ConnectorsList.vue:22
+  quoted: <ControlsHeader> … <template #actions><Button label="New Connector" size="large" /></template>
+  rule:   the create action is the PAGE's, so it belongs to the heading — the controls row
+          narrows the list and runs entirely at `medium`
+  fix:    add the size="medium" PageHeading (the crumb no longer names the page) and move the
+          button into its #actions as `Create connector`, large
+```
+
+Close with `List sound` or `N gaps — fix before polish`.
+
+## References
+
+- `/webkit-tables` — the `Table`, the column model, the toolbar and the cell recipes inside the card.
+- `/webkit-navigation` — the shell the page sits in and how its nav row is activated.
+- `/webkit-ui-states` — the loading skeleton, and the two different empty states (no rows vs no matches).
+- `/webkit-microcopy` — field labels, the empty-state sentence, the search placeholder.
+- Components used here, all resolvable through the MCP or the catalog: `Table`, `CardBox`, `Popover`,
+  `Chip`, `InputText`, `Button`, `EmptyState`, `Avatar`, `Tooltip`.
+
+## Definition of Done
+
+- [ ] Page is shell → column → heading → section → one band holding controls, filters and the card.
+- [ ] First-level index carries a `size="medium"` `PageHeading` with the create action in `#actions`.
+- [ ] Heading action `large`; every control on the controls row `medium`.
+- [ ] Search is in the controls row and bound to the table's global filter; filters narrow `:data`.
+- [ ] A field catalog exists, with a `match` per field and `kind` chosen deliberately.
+- [ ] Every enumerable column is a field; no free-text column is.
+- [ ] The date field offers relative periods plus `Custom…`, and its periods are open-ended.
+- [ ] Applied state is `{ fieldId: values[] }`; the applied count counts fields.
+- [ ] One anchor, chips in catalog order, applied chips filled and removable, idle chips outlined.
+- [ ] The `×` clears the field and the chip remains, dimmed.
+- [ ] Value rows carry `menuitemcheckbox` / `menuitemradio`; the trigger's name says the applied count.
+- [ ] `↑`/`↓` are scoped to the current level; focus returns to the chip that opened the panel.
+- [ ] `pageIndex` rewinds to 0 on any filter or scope change.
+- [ ] Filtered-to-nothing renders a different empty state from a genuinely empty account.
+- [ ] Verified in both themes with `/webkit-ui-verify`.
diff --git a/.claude/skills/webkit-microcopy/SKILL.md b/.claude/skills/webkit-microcopy/SKILL.md
new file mode 100644
index 0000000000..91d25aef4f
--- /dev/null
+++ b/.claude/skills/webkit-microcopy/SKILL.md
@@ -0,0 +1,299 @@
+---
+name: webkit-microcopy
+description: The writing rules for Azion product interfaces (Console). Use whenever you author or review any interface string: page and section titles, field labels, helper text, buttons, menu and nav items, table headers, tags, tooltips, empty states, toasts, dialogs, validation messages. Fixes punctuation and capitalization (no em dash, no ampersand, no parentheses in labels, no bold in running text, sentence case with Azion product names capitalized), which surface each kind of copy belongs on (label names, description constrains, Message explains impact, Popover defines, Tag states), one word per concept (Select not Pick, Include dependencies not Additional dependencies, Deployment topology not Composition, Review and deploy not Build and activate, Application not Edge Application, and no `edge` as a prefix or a location), navigation and IA naming, and copy that survives every breakpoint.
+status: active
+last_updated: 2026-08-20
+scope: general
+enforced_by: [ui-verify, webkit-component-states, webkit-prefer-over-custom, review]
+---
+
+# Skill: webkit-microcopy
+
+## Purpose
+
+Interface copy is part of the design system, not a per screen decision. When one screen says "Pick a
+workload" and the next says "Choose an application", when a label carries a warning that belongs in a
+message, or when an em dash splices two sentences inside a toast, the product reads as assembled by
+different people, and the reader pays for it with attention.
+
+This skill fixes three things, in priority order:
+
+1. **Mechanics.** Punctuation and capitalization are settled, not stylistic. The bans below are hard.
+2. **Placement.** Every kind of copy has one surface that owns it. A label names an input; it never
+   explains, warns, or gives feedback. Explanation comes **before** the input that needs it.
+3. **Terminology.** One word per concept, across every surface where that concept appears.
+
+Scope: strings the user reads inside Azion products. It does not govern docs, marketing pages, code
+comments, or commit messages. Copy is authored in English; translation follows the Azion brand
+glossary, and every rule here survives translation because none of it depends on a specific wording.
+
+## How to use
+
+- `/webkit-microcopy` while building: apply the rules to every string you write, and place each
+  string on the surface that owns it before styling anything.
+- `/webkit-microcopy <file|screen>` as a review: walk the seven sections in order and report each
+  violation as `current → corrected`, with the surface it should move to when placement is wrong.
+
+Related: `/webkit-ui-states` owns how loading, empty, and error **render** and where request failures
+go. `/webkit-form` owns field structure and validation timing. This skill owns the **words** on all of
+them.
+
+## 1. Mechanics: the hard bans
+
+| Ban                                        | Why                                                                                      | Instead                                                                             |
+| ------------------------------------------ | ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| **Em dash and en dash** (`—`, `–`)         | Splices two thoughts into one unreadable line, and reads as unfinished editing           | A period, a comma, or a colon. Two sentences are two sentences                      |
+| **Ampersand** (`&`)                        | Not a word; noise in a label                                                             | `and`                                                                               |
+| **Parentheses in labels**                  | Flattens hierarchy: the aside competes with the name of the field                        | Move the aside to the field description, or to a `Message` above the group          |
+| **Bold inside running text**               | Emphasis mid sentence fights the typography scale and reads as shouting                  | One idea per sentence. If it deserves prominence it deserves its own heading or tag |
+| **Feedback or consequence in a label**     | The reader has to parse a warning while looking for the field name                       | `Message` before the inputs it governs                                              |
+| **Exclamation marks and decorative emoji** | Infrastructure product, technical register                                               | State the fact                                                                      |
+| **`please`, `sorry`, `oops`, `whoops`**    | Padding, and it apologizes instead of resolving                                          | Say what happened and what to do next                                               |
+| **`simply`, `just`, `easy`, `quick`**      | Tells the reader their difficulty is their fault                                         | Delete the word; the sentence is already shorter                                    |
+| **ALL CAPS for emphasis**                  | Only the overline token and acronyms are uppercase                                       | Sentence case                                                                       |
+| **A colon ending a field label**           | The input already shows where the value goes                                             | `Version`, never `Version:`                                                         |
+| **`...` (three periods)**                  | Not an ellipsis                                                                          | The single character `…`, and only for genuine in-progress state (`Deploying…`)     |
+| **Copy that names a layout position**      | The position changes at other widths, and in a drawer or bottom sheet it is simply false | Name the thing, not where it sits (`in Deployment settings`, not `on the right`)    |
+
+Punctuation that stays: the hyphen inside compound words (`real-time`, `read-only`, `pre-selected`),
+the period at the end of a full sentence, the colon that introduces a list or a value.
+
+**Terminal punctuation.** Full sentences take a period, including toasts, descriptions, messages, and
+validation text. Fragments do not: labels, buttons, headings, nav items, table headers, tags, and
+single fragment tooltips. Never mix the two styles inside one list.
+
+## 2. Capitalization
+
+**Sentence case everywhere.** Page titles, section headings, field labels, buttons, menu items, tab
+names, table headers, tags, toasts. First word capitalized, the rest lowercase.
+
+Three exceptions, and only three:
+
+1. **`Azion`** is always capitalized, in every position. Never `azion`, `AZION`, or a misspelling.
+2. **Azion product and entity names** keep their capitalization when they name the product or the
+   Console entity: `Azion Console`, `Azion Marketplace`, `Applications`, `Workloads`, `Deployments`,
+   `Firewall`, `Connectors`, `Network Lists`, `Custom Pages`, `Functions`, `Edge DNS`,
+   `Object Storage`, `SQL Database`, `Variables`. The same word lowercases when it means the generic
+   thing rather than the entity: `Select a network list` refers to an item, `Network Lists` is the
+   page that holds them.
+3. **Acronyms** are uppercase: `API`, `DNS`, `TLS`, `WAF`, `HTTP`, `URL`, `JSON`, `TTL`, `CNAME`.
+
+```
+❌ Review And Deploy        ❌ include Dependencies      ❌ Deploy to azion
+✅ Review and deploy        ✅ Include dependencies      ✅ Deploy to Azion
+```
+
+## 3. Placement: which surface owns which copy
+
+This is where most interface copy goes wrong, and it is not a wording problem. **Explain, then ask:**
+anything the reader needs in order to answer appears before the input, never inside its label.
+
+| The copy is…                               | Surface                                    | Shape                                     | Example                                                                                       |
+| ------------------------------------------ | ------------------------------------------ | ----------------------------------------- | --------------------------------------------------------------------------------------------- |
+| The name of an input                       | `Label`                                    | 1 to 3 words, no punctuation              | `Version`                                                                                     |
+| A constraint or format the value must meet | field description / `HelperText`           | One short sentence, with a period         | `Lowercase letters, numbers, and hyphens.`                                                    |
+| Why this input exists, or what it affects  | `Message` above the group                  | 1 to 2 sentences                          | `This connector is shared. Changing its version affects every deployment that references it.` |
+| A definition, or how a feature works       | `Tooltip` / `Popover` on a help affordance | A short paragraph, optionally a docs link | What a deployment topology is                                                                 |
+| The state of an object                     | `Tag` / `Badge` / `StatusIndicator`        | 1 to 2 words, never a sentence            | `Active release`, `Draft`                                                                     |
+| The result of something the user did       | `Toast`                                    | One sentence, past tense, with a period   | `Deployment created.`                                                                         |
+| Why a value was rejected                   | field error, inline at the field           | What is wrong plus what to do             | `Version 1.2.0 was already deployed. Select another version.`                                 |
+| There is nothing here yet                  | `EmptyState`                               | One sentence plus one action              | `No deployments yet. Create your first deployment to start receiving traffic.`                |
+
+Three consequences worth stating on their own, because each one is a real defect when skipped:
+
+- **A repeated per row aside is a message, not a decoration.** When the same caveat would appear as a
+  tag or a suffix on several rows, it belongs once, as a `Message` above them. Repeating it per row
+  is visual clutter that the reader learns to skip.
+- **Never compress a long explanation into a label.** If it does not fit in three words, it is not a
+  label. Give it a help affordance with a `Popover`, or a `Message` above the section.
+- **Optionality is not a parenthetical.** Required fields carry the required indicator. If a field's
+  optionality must be said, the description says it: `Optional.` Never `Version (optional)`.
+
+## 4. Terminology: one word per concept
+
+The same concept uses the same word on every surface it appears on: nav item, page title, breadcrumb,
+section heading, table header, dialog title, button, toast, empty state.
+
+**Verbs.**
+
+| Use                 | Not                                      | Note                                                          |
+| ------------------- | ---------------------------------------- | ------------------------------------------------------------- |
+| `Select`            | `Pick`, `Choose`                         | For choosing among existing options                           |
+| `Create`            | `New`, `Add new`, `Set up`               | The object the page lists. See the create button rule below   |
+| `Include`           | `Add additional`, `Attach extra`         | See `Include dependencies` below                              |
+| `Deploy`            | `Publish`, `Activate`, `Ship`, `Go live` | One verb for putting a package into traffic                   |
+| `Review and deploy` | `Build and activate`                     | Names the two steps the reader actually performs              |
+| `Remove`            | `Delete`                                 | Detaches a reference; the object survives                     |
+| `Delete`            | `Remove`, `Destroy`, `Erase`             | Permanent. Always behind a confirmation that repeats the verb |
+| `Save`              | `Apply`, `Confirm`, `Submit`, `OK`       | Persists edits to an existing object                          |
+| `Cancel`            | `Back`, `Discard`, `Nevermind`           | Always exactly `Cancel`                                       |
+| `Retry`             | `Try again`, `Reload`                    | After a failed request                                        |
+
+**Nouns.** `deployment`, `release`, `version`, `workload`, `application`, `firewall`, `connector`,
+`network list`, `custom page`, `function`, `dependency`, `variable`. A collection is plural
+(`Workloads`), a single object is singular (`Workload`), and the page, breadcrumb, and dialog for the
+same object all pick the same one.
+
+**Settled renames.** These were decided for the deployment flow and hold product wide:
+
+| Current                   | Corrected              | Why                                                                                                                   |
+| ------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| `Additional dependencies` | `Include dependencies` | `Additional` reads as optional. A dynamically referenced connector or network list is required for the deploy to work |
+| `Composition`             | `Deployment topology`  | Names what the screen does: how the resources connect into the package that receives traffic                          |
+| `Build and activate`      | `Review and deploy`    | The reader reviews a package, then deploys it. Nothing is built at that step                                          |
+| `Pick a workload`         | `Select a workload`    | One verb for selection                                                                                                |
+| `Edge Application`        | `Application`          | The product dropped the prefix. `Edge` named a network the reader never configures, on an object they do              |
+
+### The `edge` prefix
+
+`Edge` is not part of any object's name, and it is not a fact about an object worth telling the
+reader. It survives in exactly two places, and nowhere else.
+
+**Never as a prefix on a product or entity name.** The object is an `Application`, a `Function`, a
+`Firewall`, a `Connector`. The prefix is the older name for the same thing, so a screen carrying it
+gives one object two names, which is the bug section 4 opens with.
+
+```
+❌ Edge Application     ❌ Edge Function     ❌ your edge applications
+✅ Application          ✅ Function          ✅ your applications
+```
+
+**Never as a location in a description.** `served at the edge`, `runs on the edge`,
+`stops serving traffic at the edge`: in every one of these the phrase can be deleted and the sentence
+says the same thing, because the reader has no other place to serve from. Say what the object does,
+not where the network does it.
+
+```
+❌ An application is the code and configuration served at the edge.
+✅ An application is the code Azion runs, and the configuration it runs with.
+
+❌ When disabled, the application is created but stops serving traffic at the edge.
+✅ When disabled, the application is created but does not serve traffic.
+
+❌ Build ultra-low latency functions that run on the edge.
+✅ Build ultra-low latency functions that run on Azion.
+```
+
+**The two places it stays.** Both are cases where deleting the word loses information:
+
+| Keep                                                                         | Because                                                                                            |
+| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| A product whose registered name has it (`Edge DNS`)                          | It is the name, capitalized per section 2. It changes here only when the product itself is renamed |
+| A layer the reader is choosing between (`Edge cache` beside `Browser cache`) | The word is the distinction. Two caches with one name is worse than the prefix                     |
+
+Everywhere else, deleting `edge` shortens the sentence and costs the reader nothing.
+
+**Never invent a synonym for an existing concept.** Before naming anything, search the product for
+the concept and reuse the word already in use. A second word for one concept is a bug, and it costs
+every future screen.
+
+## 5. Actions
+
+- **A button names its action, verb first**, in the reader's terms: `Deploy`, `Create workload`,
+  `Include dependencies`. Never `OK`, `Submit`, `Yes`, `Continue` when a real verb exists.
+- **At most three words.** A button is never a sentence.
+- **A destructive confirmation repeats the verb and names the object.** The title asks, the body
+  states the consequence in one sentence, the confirm button says `Delete workload`, not `Confirm`.
+  The reader must be able to act on the button alone.
+- **Two different actions never share a label on one screen**, and one action never changes label
+  between its trigger and its confirmation.
+- **An in-progress action switches to the progressive form** and keeps the same verb: `Deploy` becomes
+  `Deploying…`, never `Please wait` or a bare spinner with no words.
+
+### The create button
+
+Every list has one create action, and its label is decided by **where the list sits**, not by
+whoever built the page. Three shapes were in use across the Console for the same act: `New Workload`,
+`Create Bucket`, and a bare `Connector` with a plus icon. Only one is correct.
+
+| The list is…                                                                | Label                  | Examples                                                                        |
+| --------------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------- |
+| A **module the sidebar routes to** (Applications, Workloads, Functions, …)  | `Create <object>`      | `Create application`, `Create function`, `Create network list`, `Create bucket` |
+| A **tab or section inside a resource** (an application's Cache Settings, …) | `Add <Product Module>` | `Add Cache Settings`, `Add Device Group`, `Add Functions Instance`, `Add Rule`  |
+
+- **`Create` at module level, `Add` inside a resource.** At module level the reader brings an object
+  into existence in the collection they navigated to. Inside a resource they attach a configuration
+  to the resource already open, and `Add` is what the Console says for that. This is the one place
+  `Add` covers something that is created rather than attached.
+- **Never a bare noun.** `Connector` under a plus icon is not a label. The icon is not the verb.
+- **Never `New`.** `New Workload` and `New release` use the banned verb from section 4.
+- **Capitalization follows section 2.** At module level the object is an instance, so it is
+  lowercase: `Create workload`, never `Create Workload`. Inside a resource the object is the product
+  module the tab is named for, so it keeps that name's exact capitalization: `Add Cache Settings`,
+  `Add Functions Instance`. Acronyms stay uppercase either way: `Create WAF rule set`.
+- **The label does not change on the way in.** The create page's title and breadcrumb, the drawer's
+  title, and the confirm button repeat the trigger's string exactly. A button reading
+  `Create variable` that opens a drawer titled `Add environment variable` is two names for one act.
+- **The empty state's action is that same button.** A module's first use call to action carries the
+  identical label as the heading's create button, because it starts the identical flow.
+
+## 6. Feedback
+
+- **An error states what happened and what to do next**, in that order, in the reader's terms. No
+  blame, no apology, no raw error code without a sentence around it. A code the reader may need for
+  support goes at the end, or in a copyable block.
+- **Where it goes follows `/webkit-ui-states`:** a rejected value is inline at its field, a failed
+  request is a toast. The words here, the routing there.
+- **A success toast names the object and the outcome in the past tense.** `Deployment created.`, not
+  `Success!`.
+- **An empty state says what the surface is for and offers one action.** Never a bare `No data`.
+- **Nothing silent.** Every action the reader takes produces a visible sentence about its outcome.
+
+## 7. Navigation, IA, and progressive disclosure
+
+- **One name per destination**, identical in the nav item, page title, breadcrumb, and document
+  title. A rename changes all of them in the same commit.
+- **Nav items are nouns**, plural for collections. Actions never appear as nav items.
+- **Two or three words maximum**, and never an abbreviation that appears nowhere else in the product.
+- **A section heading names the domain, not the widget:** `Deployment settings`, never
+  `Settings section` or `Configuration area`.
+- **A collapsed accordion's title has to be enough to decide whether to open it.** When settings are
+  collapsed by default with a common option pre-selected, the closed row states the choice in effect,
+  so a reader who never opens it still knows what will happen. A title that hides the current value
+  makes collapsing a trap instead of a simplification.
+- **Tabs are nouns and never verbs**, and a tab label matches the heading of the panel it reveals.
+
+## 8. Copy that survives every width
+
+Copy is responsive, or the layout is not. Write for the narrowest width the surface supports, then
+let it breathe wider. Never write long and rely on truncation.
+
+- **Labels at three words or fewer** so a two column form collapsing to one column does not wrap
+  every field name.
+- **Table headers at one or two words.** At narrow widths a table shows fewer columns, so the primary
+  column's header must make sense with no neighbours.
+- **Truncation is for data, never for interface copy.** When a value must truncate, keep the
+  identifying part at the start and expose the full value through a tooltip or a copy action.
+- **A button keeps its words at every width.** When a surface shows an icon only variant, the
+  `ariaLabel` carries exactly the same words as the visible label it replaces.
+- **An overlay's title is the same string in every presentation** it takes across breakpoints
+  (dialog, drawer, bottom sheet), because it is the same task.
+- **No copy that depends on position, order, or input device.** No `on the right`, no `below`, no
+  `click` when the surface is also touch operated. Name the thing, and use `select` for the action.
+
+## Review checklist
+
+- [ ] No em dash, en dash, or ampersand anywhere in the interface strings.
+- [ ] No parentheses, colon, or feedback text in any label; asides moved to description, `Message`, or
+      `Popover`.
+- [ ] No bold inside running text.
+- [ ] Sentence case throughout, with `Azion`, product and entity names, and acronyms correct.
+- [ ] Every explanation appears before the input it governs, not inside it.
+- [ ] A repeated per row caveat was consolidated into one `Message`.
+- [ ] One word per concept, checked against the verb and noun tables, including the settled renames.
+- [ ] Every button names a real action, verb first, three words or fewer; `Cancel` is `Cancel`.
+- [ ] The create button is `Create <object>` at module level, `Add <Product Module>` inside a
+      resource, and the same string appears on the page or drawer it opens.
+- [ ] Every error says what happened and what to do next; every success names the object.
+- [ ] Nav item, page title, breadcrumb, and document title use one identical name.
+- [ ] Every collapsed section's closed title states the choice in effect.
+- [ ] Labels and headers survive the narrowest supported width without wrapping or truncating.
+- [ ] No copy naming a position, an order, or a pointer device.
+
+## Definition of Done
+
+- [ ] Every string on the screen was read against sections 1 to 4, not skimmed.
+- [ ] Nothing that explains, warns, or reports sits inside a label.
+- [ ] No concept on the screen has two names anywhere in the product.
+- [ ] The screen was read at the narrowest and widest supported width, in both themes, with real
+      content and with empty content (`/webkit-ui-verify`).
diff --git a/.claude/skills/webkit-motion-polish/SKILL.md b/.claude/skills/webkit-motion-polish/SKILL.md
new file mode 100644
index 0000000000..dcc02942bb
--- /dev/null
+++ b/.claude/skills/webkit-motion-polish/SKILL.md
@@ -0,0 +1,445 @@
+---
+name: webkit-motion-polish
+description: Make motion smooth using only @aziontech/theme animate tokens — animate-* utilities, duration-*/ease-*/curve tokens, compositor-props-only, ≤150ms interaction feedback, and a mandatory motion-reduce escape on every motion class. No external animation library, no inline cubic-bezier, no hardcoded ms.
+status: active
+last_updated: 2026-08-12
+scope: general
+enforced_by: [webkit-motion, webkit-accessibility, ui-verify]
+---
+
+# Skill: webkit-motion-polish
+
+## Purpose
+
+Apply motion that feels native to the design system: token-driven, fast, accessible, and limited to
+properties the compositor can animate cheaply. Motion should confirm an action or guide attention —
+never decorate.
+
+## How to use
+
+- `/webkit-motion-polish`
+  Apply the motion constraints below to any animated UI in this conversation.
+- `/webkit-motion-polish <file>`
+  Review the file's animations and output, per violation:
+  - the exact line / snippet (quoted),
+  - why it's wrong (1 short sentence),
+  - the token-based fix.
+
+## How to find the tokens
+
+Never guess a duration, curve, or utility name. Resolve them the same way every time:
+
+- Ask the **webkit MCP** — it lists the `animate-*` utilities and the `duration-*` / `ease-*` / `curve`
+  tokens that ship in `@aziontech/theme`.
+- If a utility or token name is not one the MCP lists, it does not exist — do not invent a
+  `duration-[…]` or an inline `cubic-bezier`.
+
+## When to invoke
+
+- After structure (`webkit-ux-heuristics`) and baseline (`webkit-baseline-ui`) are sound.
+- Adding entrances/exits, hover/active feedback, or overlay open/close motion.
+- The user asks to "make it smooth", "add a transition", "animate this".
+
+## Constraints
+
+### Use only the catalogued utilities
+
+The `animate-*` utilities from the animation token catalog (listed by the webkit MCP) — they ship with
+`motion-safe` / `motion-reduce` variants:
+
+| Utility                                              | Behavior                                                         |
+| ---------------------------------------------------- | ---------------------------------------------------------------- |
+| `animate-fade-in` / `animate-fade-out`               | opacity in / out                                                 |
+| `animate-slide-down`                                 | height 0 → auto (the one catalogued height animation — see note) |
+| `animate-popup-scale-in` / `animate-popup-scale-out` | scale + fade for popovers/menus                                  |
+| `animate-slide-in-left` / `animate-slide-out-left`   | left-anchored panel enter/leave (sidebar, nav drawer)            |
+| `animate-slide-in-right` / `animate-slide-out-right` | right-anchored panel enter/leave (settings/detail drawer)        |
+| `animate-blink`                                      | caret/blink                                                      |
+| `animate-highlight-fade`                             | row-flash highlight                                              |
+
+For `animate-popup-scale-in/out`, set `--popup-origin` per instance to match the trigger anchor.
+
+### The panel recipe (sidebar / drawer / any v-if region)
+
+A conditionally rendered region never animates by itself — wrap the `v-if` in a Vue `Transition`
+and hand the phases to the catalogued pair:
+
+```vue
+<Transition
+  enter-active-class="animate-slide-in-left motion-reduce:animate-none"
+  leave-active-class="animate-slide-out-left motion-reduce:animate-none"
+>
+  <aside v-if="sidebarOpen">...</aside>
+</Transition>
+```
+
+Same shape with `animate-fade-in/out` for in-place content and backdrops, and
+`animate-slide-down` for vertical disclosure.
+
+### Size transitions — the two sanctioned layout exceptions
+
+A box whose content changes (a form that swaps steps, a chip that gains a value, a panel that
+drills into a sub-level) **snaps** to its new size. That snap is the glitch: it reads as one
+element being replaced by a different one rather than as the same element answering. Neither case
+has a catalogued `animate-*` — a keyframe cannot know the two heights — so both are transitions,
+and both are allowed only in the exact shapes below.
+
+#### A. Height — the box follows its content
+
+CSS cannot interpolate to or from `height: auto`, and `auto` is what the box must be at rest: a
+height pinned in JS stops responding to a resize, a late-loading font, or a validation line
+appearing. So height is measured and pinned **only for the length of the move**, then released.
+
+Two ways to drive it. Use the **observer** when the content resizes continuously (a field appears,
+a Skeleton swaps for a button):
+
+```js
+// The measured element is INSIDE the one being sized and never gets a height of
+// its own — otherwise the wrapper animating to it feeds straight back into the read.
+const cardContent = ref(null)
+const cardHeight = ref(0)
+let observer = null
+
+onMounted(() => {
+  observer = new ResizeObserver(([entry]) => {
+    cardHeight.value = Math.round(entry.contentRect.height)
+  })
+  observer.observe(cardContent.value)
+})
+onBeforeUnmount(() => observer?.disconnect())
+```
+
+```vue
+<!-- Padding lives OUTSIDE the sized box: the read is content-box, so padding on the
+     animated element is counted out of the height it travels to and clips by 2× the step. -->
+<div class="p-(--spacing-lg)">
+  <div
+    :style="cardHeight ? { height: `${cardHeight}px` } : undefined"
+    :data-resizing="resizing || null"
+    class="transition-[height] duration-moderate-02 ease-productive-entrance data-[resizing]:overflow-hidden motion-reduce:transition-none"
+  >
+    <div ref="cardContent"><!-- never sized --></div>
+  </div>
+</div>
+```
+
+Use the **measure-mutate-measure** form when the change is discrete (a wizard step, a panel level):
+
+```js
+const from = node.offsetHeight // still auto — this is what the user is looking at
+mutate()
+await nextTick()
+const to = node.offsetHeight // new content, STILL auto, not yet painted
+if (to === from) return // nothing to animate; height stays auto
+
+height.value = `${from}px` // pin the old value…
+requestAnimationFrame(() =>
+  requestAnimationFrame(() => {
+    height.value = `${to}px` // …let it paint, then travel: px → px interpolates
+  })
+)
+// release to '' (auto) on transitionend, plus a timeout fallback so an interrupted
+// move can never leave the height pinned
+```
+
+Order is load-bearing. The obvious shortcut — pin the old height first, _then_ read
+`scrollHeight` — silently breaks every **shrink**: with a height pinned, `scrollHeight` returns
+the greater of content and box, so a step that got shorter reports the old height and never moves.
+Measure while still `auto` and growing and shrinking behave the same.
+
+- **`overflow-hidden` only while moving** (`data-[resizing]:overflow-hidden`). Permanently on, it
+  shaves the focus ring (`ring-2` + `ring-offset-2` = 4px) off any control flush with the content
+  edge. Permanently off, an out-of-flow leaving block hangs below the box as it shrinks.
+- **Always release on `transitionend` AND a fallback timer** (longest duration + a frame or two).
+  An interrupted or unmounted move never fires `transitionend`, and a box stuck at a pinned height
+  is worse than one that snapped.
+- **Re-entrancy:** land the run in flight before measuring again, or `from` is a value the previous
+  transition is still easing through.
+
+#### B. Width — grow a value into a `0fr → 1fr` grid track
+
+A grid track cannot be transitioned from `auto`, but it **can** from `0fr` to `1fr`. That is the
+whole recipe: put the appearing content in a single-column grid, animate the track, and let the
+element's own `auto` width follow.
+
+```vue
+<span
+  class="grid grid-cols-[0fr] transition-[grid-template-columns] duration-moderate-01 ease-productive-entrance data-[shown]:grid-cols-[1fr] motion-reduce:transition-none"
+  :data-shown="applied || null"
+>
+  <!-- The clip is BARE. Padding on it survives the collapse (it is not content, so
+       `min-width: 0` cannot shrink it) and leaves dead space in the empty state —
+       so the gap and padding live on the row INSIDE, which is clipped with the text. -->
+  <span class="min-w-0 overflow-hidden">
+    <span class="flex min-w-0 items-center gap-(--spacing-xxs) whitespace-nowrap pl-(--spacing-xxs)">…</span>
+  </span>
+</span>
+```
+
+It only reads as growth if the element **keeps its DOM position**. A list that reorders when the
+value is applied re-inserts the node, which discards the pending transition — see the glitch
+catalog.
+
+### Entrance choreography (first-paint screens)
+
+A screen that is a composition — a form beside an illustration, a card beside a panel — assembles
+from its parts instead of fading in as one flat block: each part travels in from **its own outer
+edge**, one leading and the other a beat behind.
+
+```js
+const ENTER = `${duration['slow-01']} ${curve['expressive-entrance']}`
+const leadStyle = { transition: `opacity ${ENTER}, translate ${ENTER}, transform ${ENTER}` }
+const followStyle = { ...leadStyle, transitionDelay: duration['fast-01'] }
+
+// TWO frames, not one. A single requestAnimationFrame can land in the frame the
+// browser is already painting, so the from-state is never committed, there is no
+// change left to interpolate, and the move snaps.
+const entered = ref(false)
+onMounted(() => {
+  requestAnimationFrame(() => requestAnimationFrame(() => (entered.value = true)))
+})
+```
+
+```vue
+<div
+  :data-entered="entered || null"
+  :style="leadStyle"
+  class="-translate-x-6 opacity-0 data-[entered]:translate-x-0 data-[entered]:opacity-100 motion-reduce:translate-x-0 motion-reduce:opacity-100 motion-reduce:transition-none"
+>
+```
+
+- **`slow-01` + `expressive-entrance`, not the interaction budget.** A card- or console-sized object
+  crossing real distance reads as confident at 400ms and as a twitch at 150. The ≤150ms rule governs
+  _feedback_; this is a scene arriving. Keep it to first paint — never replay it on a step change.
+- **Stagger, don't synchronise.** One `fast-01` between lead and follow. Simultaneous arrival reads
+  as a slide transition; the offset reads as choreography.
+- **Timing rides `style`, states ride `data-*`.** Tailwind cannot emit a per-state duration/easing
+  from theme tokens, so the two `transition` declarations are inline (read from `duration` / `curve`
+  — still never a literal) while the offsets and opacities stay in `data-[entered]:` classes.
+- **Scale the offset to the element's relationship with the page edge.** A panel that _is_ the right
+  edge travels a short step (a longer one opens a visible strip of bare canvas beside it on the way
+  in); an element that runs off-page can travel further.
+- **Direction carries meaning.** If two screens sit in a flow, enter each from the side it occupies
+  in that flow, so moving between them reads as a direction rather than as two unrelated page loads.
+- **Reduced motion kills it whole**: `transition: 'none'` in the style _and_ the
+  `motion-reduce:translate-x-0 motion-reduce:opacity-100` landing classes, so the from-state is
+  never what the user is left looking at.
+- **The entrance belongs to the LAYOUT, not the screen.** If three steps share a shell, put the
+  shell (and the entrance) on the parent route so it mounts once — the chrome holds still and only
+  the card swaps. Give each step its own copy and every step change replays the 400ms slide, so the
+  user reads three page loads where they only changed step.
+
+### The two arrivals ship in the theme — do not hand-roll them
+
+`@aziontech/theme` carries both entrances an app shell needs, as ordinary utilities. Use them; a
+per-app copy is a copy that drifts, and the reasoning below is already baked into these.
+
+| Utility                 | What it is for                                                                                                                                                                                                                                  | Where it goes                                                        |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
+| `animate-page-enter`    | A page arriving on a route change. Travels in from the LEFT — navigation lives on that edge, so a page arriving from it reads as coming FROM the row that was clicked; a plain fade has no origin and a right-side arrival reads as going back. | The **content zone only**, keyed on the route path. Never the shell. |
+| `animate-content-enter` | Content settling inside a page that is already on screen — a load resolving, a list swapping, a step changing. Rises a hair rather than travelling: the page is in place and only its contents changed.                                         | The block that changed.                                              |
+
+```vue
+<!-- the content zone, in the shell -->
+<div :key="route.path" class="animate-page-enter motion-reduce:animate-none overflow-auto">
+  <slot />
+</div>
+
+<!-- two columns assembling in reading order: lead, then follow one fast-01 behind -->
+<aside class="animate-content-enter motion-reduce:animate-none">…</aside>
+<section
+  class="animate-content-enter motion-reduce:animate-none [--content-enter-delay:var(--transition-duration-fast-01)]"
+>…</section>
+```
+
+- **`--content-enter-delay`** is the stagger knob (default `0s`). One `fast-01` between lead and
+  follow — simultaneous arrival reads as a swap, the offset reads as choreography.
+- **`--page-enter-distance`** is the travel (default: one `--layout-boundary-inline`). Retune it per
+  shell, not per page.
+- **Neither fills forwards, on purpose.** A filled entrance leaves a `translate` on the element,
+  which makes it a containing block for any `position: fixed` descendant — and the page-enter box is
+  usually the scroll container, so its sticky children would start measuring against it.
+- **`motion-reduce:animate-none` on both**, always.
+
+### A page arrives once
+
+The route transition **is** the page's entrance. Anything inside that page which also animates **on
+mount** runs concurrently with it — and because both usually take their timing from the same tokens,
+they run in lockstep, which does not read as two animations. It reads as one element travelling on a
+diagonal.
+
+The signature, sampled across `requestAnimationFrame` on a real navigation:
+
+```
+  8ms   block: opacity 0.10, rising 7.2px      page: opacity 0.10, sliding -21.5px
+ 91ms   block: opacity 0.63, rising 2.96px     page: opacity 0.63, sliding -8.88px
+```
+
+**Identical opacities frame for frame is the tell** — one entrance, played twice, on two axes. Fix it
+so the page lands first (`opacity 1`, `translate none`) and only then does anything inside it move.
+
+A content-settle entrance is earned only when the content changes inside a page that is **already
+standing**. Three shapes this goes wrong in:
+
+| Shape                                                    | What you see                                                            | Fix                                                                                                 |
+| -------------------------------------------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| A settle class on a block that _is_ the page             | The diagonal above                                                      | Drop it. The route transition carries the arrival; animate only on a swap, or after a load resolves |
+| Two variants of one screen, each rendering its own shell | Chrome blinks and the page re-slides on a switch that navigated nowhere | Hoist the shell to the parent that swaps them, so only the content zone changes                     |
+| A screen whose content is genuinely read on arrival      | Content pops in when the read lands                                     | A wire for the read, then the settle after it — two beats, never overlapping                        |
+
+- **A wire is per shape, not per route.** If one URL resolves to two different layouts, each needs a
+  wire of **its own** shape. A wire that resolves into a different layout is the jump it exists to
+  prevent. Verify by measuring the block's top and height in the wire and after it settles — a couple
+  of px is a settle, tens of px is a jump.
+- **Measure, never eyeball.** A snap and a 240ms ease are indistinguishable by eye in review. Sample
+  the animated property across `requestAnimationFrame` and assert there are interpolated frames
+  between the two ends — and that the page's own frames are finished before the content's begin.
+
+### Route and step transitions
+
+```vue
+<RouterView v-slot="{ Component, route }">
+  <Transition
+    mode="out-in"
+    enter-active-class="transition-opacity duration-moderate-01 ease-productive-entrance motion-reduce:transition-none"
+    enter-from-class="opacity-0"
+    leave-active-class="transition-opacity duration-fast-02 ease-productive-entrance motion-reduce:transition-none"
+    leave-to-class="opacity-0"
+  >
+    <!-- THE KEYED WRAPPER IS LOAD-BEARING — see the glitch catalog. -->
+    <div :key="route.path">
+      <component :is="Component" />
+    </div>
+  </Transition>
+</RouterView>
+```
+
+- **A step swap is an order of magnitude smaller than an entrance.** Leave `fast-02`, enter
+  `moderate-01`: the old card is gone before the new one commits, which is what makes a step change
+  read as a step change rather than as a change of screen.
+- **`out-in` between siblings of different heights**, so the two never fight for the same column.
+  But **never `out-in` inside a box that is resizing** — the field area collapses to nothing in
+  between and the box dips on the way. There, cross-fade with the leaving block taken out of flow
+  (`leave-active-class="absolute inset-x-0 top-0"`) so the incoming one owns the layout immediately
+  and the box has a single height to travel to.
+- **Every routed step needs exactly one root element.** A fragment root cannot be animated.
+- **Match the skeleton to what replaces it.** A Skeleton in the exact geometry of its target button
+  makes the swap a pure cross-fade with no height to travel, so nothing jumps under the cursor.
+
+### The glitch catalog
+
+Every entry here compiles, lints, and passes type-check. They fail **silently** — that is what makes
+them expensive. When motion "doesn't work" and nothing is red, start here.
+
+| Symptom                                                      | Cause                                                                                                                                     | Fix                                                                                      |
+| ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| Element lands in the right place, no motion at all           | `transition-[transform]` beside `translate-x-*` / `scale-*` — v4 compiles those to `translate` / `scale`                                  | Name the real properties: `transition-[translate,scale,opacity]`                         |
+| Entrance snaps to its final state                            | A single `requestAnimationFrame` — the from-state was never painted                                                                       | Two nested `requestAnimationFrame`s                                                      |
+| Routed step is blank when navigated to, correct on reload    | `<component :is>` as the direct child of `<Transition mode="out-in">` — the leave completes and the entering branch is dropped            | Wrap it in a stable keyed **element**; keying the component does nothing                 |
+| `<Transition>` around a component does nothing               | The component's root is a fragment                                                                                                        | Give it one root element                                                                 |
+| Growing animates, shrinking snaps                            | Height pinned _before_ `scrollHeight` was read                                                                                            | Measure both heights while still `auto`                                                  |
+| Box stays stuck at a pinned height                           | `transitionend` never arrived (interrupted, unmounted)                                                                                    | Release on a timeout fallback too                                                        |
+| Height transition jitters / never settles                    | `ResizeObserver` is watching the element being sized                                                                                      | Observe an inner element that is never given a height                                    |
+| Box dips mid-swap                                            | `out-in` inside a height-animated container                                                                                               | Cross-fade with the leaving block `absolute`                                             |
+| Focus ring is clipped on flush-edge controls                 | Permanent `overflow-hidden` on the animated box                                                                                           | Clip only while moving, via `data-[resizing]:`                                           |
+| Consumer's `transition-*` class is ignored                   | An inline `style="transition: …"` on the same element beats every class                                                                   | Express it as a utility, or accept the component owns that transition                    |
+| Enter-from opacity has no effect                             | A base `opacity-*` on the same element is emitted after `opacity-0`                                                                       | Recede with token colours (border/fill), and leave `opacity` to the transition           |
+| Reordering a list kills the item's own animation             | Re-inserting a node discards any transition pending on it or inside it                                                                    | A list either reorders or its items animate in place — not both on one interaction       |
+| A badge/dot is cut off, or the control jumps when it appears | The host clips to its own shape (`overflow-hidden`), and an in-flow marker widens the box                                                 | Overlay it on a `relative` wrapper _outside_ the control, `pointer-events-none`          |
+| Content rises while the page is still sliding in             | A mount-time entrance inside a page whose route transition is already running — same tokens, so they lockstep into one diagonal move      | Let the route transition own the arrival; animate content only on a swap or after a load |
+| Chrome blinks and the page re-slides, but nothing navigated  | Two variants of one screen each render their own shell, so swapping variants unmounts the sidebar/header and replays the route transition | Hoist the shell to the parent that swaps the variants                                    |
+| Element fades out but never leaves                           | A DS component's own remove animation completed and _then_ emitted — correct for a thing going away, wrong for a thing that stays         | Own the control locally when the element must survive                                    |
+
+### Timing only from tokens
+
+- **Durations**: `duration-fast-01` (70ms), `duration-fast-02` (110ms), `duration-moderate-01`
+  (150ms), `duration-moderate-02` (240ms), `duration-slow-01` (400ms), `duration-slow-02` (700ms).
+- **Curves**: `ease-productive-entrance` / `ease-productive-exit` (UI chrome),
+  `ease-expressive-entrance` / `ease-expressive-exit` (prominent surfaces), and the generic
+  `ease-in` / `ease-out` / `ease-in-out`.
+- **NEVER** a hardcoded `duration-[180ms]` / `transition: opacity 200ms`, and **NEVER** an inline
+  `ease-[cubic-bezier(...)]` — use the `duration-*` / `ease-*` tokens (the webkit MCP lists them; they
+  ship in `@aziontech/theme`).
+
+### Property discipline
+
+- **MUST** animate compositor props only: `transform` and `opacity`.
+- **NEVER** animate layout props (`width`, `height`, `top`, `left`, `margin`, `padding`) — they
+  thrash layout. Three exceptions, and only three: the catalogued `animate-slide-down` for a
+  0 → auto disclosure, and the two recipes in **Size transitions** below (a box that follows its
+  own content's height, a value that grows into a `0fr → 1fr` grid track). Anything else that
+  wants to resize is a `transform` in disguise — find it.
+- **Name the property the utility actually sets.** Tailwind v4 compiles `translate-x-*` to the
+  standalone `translate` property and `scale-*` to `scale`, **not** to `transform`. So
+  `transition-[transform]` beside a `translate-x-*` compiles, lints, emits CSS — and animates
+  nothing. Write `transition-[translate,opacity]`, `transition-[scale,opacity]`. A
+  `<TransitionGroup>` sets an inline `transform` for its own move, so its `move-class` names all
+  three: `transition-[transform,translate,scale,opacity]`.
+- **SHOULD** avoid animating paint props (`background`, `color`) except small, local UI (a single
+  icon, a chip). For hover/active surface fills use the `::before`/`::after` ghost-layer pattern from
+  the Interactive states catalog (listed by the webkit MCP) — fade `opacity` on the pseudo-layer, not
+  `background` on the root.
+
+### Feel
+
+- **Interaction feedback ≤ `duration-moderate-01` (150ms)** — use `fast-01`/`fast-02` for hover/active.
+- **`ease-out` (decelerate) on entrance, `ease-in` (accelerate) on exit** — or the productive/
+  expressive entrance/exit pair.
+- **NEVER** introduce a custom easing curve unless explicitly requested.
+
+### `data-state` / open-close motion
+
+For overlays with `data-state="open|closed"` (or Vue `<Transition>`), read the `duration` + `curve`
+tokens and emit an inline `transition` per phase; keep transform/opacity in classes, only timing goes
+inline; defer unmount until the longest close duration elapses.
+
+### Accessibility & performance (mandatory)
+
+- **MUST** pair every motion-bearing class with a `motion-reduce:*` escape on the same class string:
+  `motion-reduce:transition-none`, `motion-reduce:transform-none`, `motion-reduce:animate-none`. This
+  is the consumer-facing rule — no motion class ships without its reduced-motion escape.
+- **MUST** `aria-hidden="true"` on decorative spinning/looping elements; pause loops off-screen;
+  nothing looping > 5s without being pausable.
+- **NEVER** animate large `blur()` / `backdrop-filter` surfaces; **NEVER** `will-change` outside an
+  active animation; **SHOULD** avoid animating full-screen surfaces or large images.
+
+### Forbidden
+
+- **NEVER** a component-local `@keyframes`, inline `cubic-bezier`, or hardcoded ms literal.
+- **NEVER** an external animation library — use the animate tokens + Vue `<Transition>` /
+  `<TransitionGroup>`.
+
+## Review output
+
+For `/webkit-motion-polish <file>`, list violations. Each:
+
+```
+✗ <file>:<line>  transition: all 0.3s cubic-bezier(0.2,0,0,1)
+  why: hardcoded duration + inline curve + animates `all` (layout props); no reduced-motion escape.
+  fix: transition-transform duration-moderate-01 ease-productive-entrance motion-reduce:transition-none
+```
+
+End with: `motion clean` or `N violations`.
+
+## References
+
+- Motion catalog (listed by the webkit MCP): Animations, Motion primitives, Interactive states,
+  Reduced motion.
+
+## Definition of Done
+
+- [ ] Only `animate-*` utilities and `duration-*` / `ease-*` / `curve` tokens are used.
+- [ ] Only `transform` / `opacity` animate — plus catalogued `animate-slide-down` and the two
+      sanctioned size recipes, each in the exact shape above.
+- [ ] Every `transition-[…]` names the property the utility actually sets (`translate` / `scale`,
+      not `transform`).
+- [ ] Interaction feedback ≤ 150ms; entrance `ease-out`, exit `ease-in`. A first-paint entrance is
+      exempt (`slow-01` + expressive) and runs once, on mount only.
+- [ ] Any animated height releases back to `auto` — on `transitionend` **and** a fallback timer —
+      and clips only while it moves.
+- [ ] Motion was **measured, not eyeballed**: sample the animated property across
+      `requestAnimationFrame` and confirm interpolated frames between start and end. A snap and a
+      150ms ease are indistinguishable by eye, and every entry in the glitch catalog looks fine in
+      a screenshot.
+- [ ] Every motion class has a `motion-reduce:*` escape; decorative loops are `aria-hidden` and pause off-screen.
+- [ ] No `@keyframes`, inline `cubic-bezier`, hardcoded ms, or external animation lib.
diff --git a/.claude/skills/webkit-navigation/SKILL.md b/.claude/skills/webkit-navigation/SKILL.md
new file mode 100644
index 0000000000..5560e68c5a
--- /dev/null
+++ b/.claude/skills/webkit-navigation/SKILL.md
@@ -0,0 +1,630 @@
+---
+name: webkit-navigation
+description: Two navigation shells for UI on @aziontech/webkit — the persistent console shell (full sidebar + in-content GlobalHeader, always shown) for hub/browse pages, and the focused creation shell (no sidebar, GlobalHeader with back + brand + breadcrumb) for create/edit/deploy flows. A page picks exactly ONE shell, renders exactly ONE GlobalHeader, and the signed-in user stays visible in both. Also fixes second-level navigation and the content layout inside the persistent shell: a --spacing-md inset matching the header, a first-level module list with NO PageHeading (the crumb names it) opening on a controls row over a flush borderless CardBox table, tabbed pages putting the primary button on the TAB ROW (medium) while untabbed pages put it on the CONTROLS ROW (large), and the breadcrumb levels — one unlinked crumb at first level, `module › resource name` at second level, and never a tab. Built on @aziontech/webkit/global-header, /sidebar, /breadcrumb, /tab-view.
+status: active
+last_updated: 2026-08-13
+scope: general
+enforced_by: [webkit-accessibility, webkit-prefer-over-custom, ui-verify]
+---
+
+# Skill: webkit-navigation
+
+## Purpose
+
+Every screen in a console lives in one of **two** navigation shells, and picking the wrong one — or
+worse, blending them — is where a prototype stops feeling like one product. A browse page with no way
+back to the rest of the console strands the user; a focused create flow that keeps the full sidebar
+lets the user wander off mid-task and lose their work. This skill fixes which shell a page uses, how
+each is composed on `@aziontech/webkit`, and the one invariant they share: **the signed-in user is
+always visible.** It is the layout-shell companion to `webkit-form` (what goes _inside_ a focused
+flow) and `webkit-ux-heuristics` (states + feedback).
+
+## How to use
+
+- `/webkit-navigation`
+  Apply the shell rules below to any page or flow you build in this conversation.
+- `/webkit-navigation <file>`
+  Review the file against the rules and output, per gap:
+  - the exact line / element (quoted),
+  - which rule it breaks (1 short sentence),
+  - the concrete fix, naming the shell or webkit primitive to use.
+
+## When to invoke
+
+- Starting a new page and deciding how it sits in the app (a hub page vs a create/edit/deploy flow).
+- The user asks "which header goes here", "should this have a sidebar", "how do I get back", "the user
+  disappeared on the create screen".
+- Reviewing a screen for whether it uses the right shell and shows exactly one header.
+
+## How to find the components
+
+Never guess an import path, and never copy one from another repo or sample app — files move. Resolve
+every webkit primitive the same way:
+
+- Ask the **webkit MCP** — `suggest_component` in plain words ("sidebar", "app header", "breadcrumb").
+- Or read **`node_modules/@aziontech/webkit/catalog.json`** — every key under `imports` is a real
+  published subpath. If a subpath is not a key there, it does not exist.
+
+The primitives you compose the shells from — `sidebar` (+ `sidebar-header`, `sidebar-group`,
+`sidebar-footer`), `global-header`, `breadcrumb`, `tab-view` — all resolve this way. **There is no
+`@aziontech/webkit/app-layout` and no `@aziontech/webkit/creation-header`:** the two shells are
+components _you_ compose in your own app (shown below), not webkit imports — never copy a dead import
+for them.
+
+For spacing / color / typography use the **@aziontech/theme tokens (the webkit MCP lists them)** —
+`--spacing-md`, `--spacing-lg`, `var(--bg-canvas)`, `text-heading-xxs` — never raw px.
+
+## The two shells
+
+A page picks **exactly one**. The choice is not stylistic — it follows from what the page is _for_.
+
+|                | **Persistent console shell**                                                                                     | **Focused creation shell**                                                                                                         |
+| -------------- | ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| What it is     | A shell **you** compose (e.g. `components/AppShell.vue`) around a full `Sidebar` + one in-content `GlobalHeader` | A shell **you** compose (e.g. `components/CreationShell.vue`): one `GlobalHeader` (back + brand + breadcrumb + avatar), no sidebar |
+| Use for        | Hubs, lists, dashboards, settings — anywhere the user _browses_ and moves laterally                              | Create / edit / deploy / wizard — a single task with a start and an end                                                            |
+| Sidebar        | **Yes** — full console nav, always present                                                                       | **No** — removed so the task is the only focus                                                                                     |
+| Header         | `GlobalHeader` inside the content zone: breadcrumb + Create/Docs actions + account avatar                        | `GlobalHeader`: back button + Azion brand + breadcrumb + account avatar                                                            |
+| Way out        | Lateral — pick any other module from the sidebar                                                                 | Linear — the **back** button (and breadcrumb) returns to where the flow started                                                    |
+| Signed-in user | Sidebar footer (avatar + account menu) **and** header avatar                                                     | Header avatar (right)                                                                                                              |
+| Typical pages  | dashboards, list / index pages, settings hubs, resource-detail pages                                             | create / edit forms, multi-step wizards, deploy / publish flows                                                                    |
+
+### Shell 1 — persistent console
+
+For pages the user **browses**. A full-height `Sidebar` on the left carries the whole console
+navigation (grouped by product area) plus the team switcher and the user footer; one `GlobalHeader`
+lives inside the content zone and carries the module breadcrumb and the primary actions. The page
+renders only its own content through the shell's default slot.
+
+**The shell is yours to compose** — there is no `@aziontech/webkit/app-layout`. Build it once from
+the webkit primitives and reuse it on every browse page:
+
+```vue
+<!-- components/AppShell.vue — a shell YOU compose in your app. NOT importable
+     from webkit; it wraps the webkit primitives below (each resolved via the
+     MCP / catalog, see "How to find the components"). -->
+<script setup lang="ts">
+  import Sidebar from '@aziontech/webkit/sidebar'
+  import SidebarHeader from '@aziontech/webkit/sidebar-header'
+  import SidebarGroup from '@aziontech/webkit/sidebar-group'
+  import SidebarFooter from '@aziontech/webkit/sidebar-footer'
+  import GlobalHeader from '@aziontech/webkit/global-header'
+  import Breadcrumb from '@aziontech/webkit/breadcrumb'
+
+  defineProps<{
+    active: string
+    breadcrumb: { label: string; href?: string }[]
+    collapsible?: boolean // default true — the sidebar toggle in GlobalHeader.Left
+  }>()
+</script>
+
+<template>
+  <div class="flex h-dvh">
+    <!-- The way out: full console nav + team switcher + the signed-in user -->
+    <Sidebar :active="active">
+      <SidebarHeader><!-- team / account switcher --></SidebarHeader>
+      <SidebarGroup label="Build"><!-- grouped module links --></SidebarGroup>
+      <SidebarFooter><!-- avatar + name + account menu (theme / logout) --></SidebarFooter>
+    </Sidebar>
+
+    <div class="flex min-w-0 flex-1 flex-col">
+      <!-- EXACTLY ONE GlobalHeader, inside the content zone -->
+      <GlobalHeader>
+        <GlobalHeader.Left>
+          <!-- sidebar toggle (pi pi-bars) + the location breadcrumb -->
+          <Breadcrumb :items="breadcrumb" />
+        </GlobalHeader.Left>
+        <GlobalHeader.Right>
+          <!-- Create / Docs actions + the account avatar (always visible) -->
+        </GlobalHeader.Right>
+      </GlobalHeader>
+
+      <!-- The shell owns the --spacing-md inset ONCE; pages never re-pad -->
+      <main class="min-h-0 flex-1 overflow-auto p-(--spacing-md)">
+        <slot />
+      </main>
+    </div>
+  </div>
+</template>
+```
+
+A browse page then imports **your** shell — not a webkit path — and renders only its content:
+
+```vue
+<script setup lang="ts">
+  import AppShell from '@/components/AppShell.vue' // your shell — NOT a webkit import
+</script>
+
+<template>
+  <AppShell
+    active="applications"
+    :breadcrumb="[{ label: 'Applications' }]"
+  >
+    <!-- page content only -->
+  </AppShell>
+</template>
+```
+
+- The sidebar is the way out — the user moves laterally to any other module. Never remove it on a
+  browse page.
+- The breadcrumb names where the user is on **every** level: a single crumb at the first level
+  (`[{ label: 'Applications' }]`), a full trail (`Applications › New Application`) once nested.
+
+#### The header always names the location (breadcrumb) + the sidebar toggle (`collapsible`)
+
+1. **The breadcrumb renders on every level.** The header always names where the user is: a page that
+   passes a single first-level crumb (`[{ label: 'Home' }]`, `[{ label: 'Applications' }]`) shows that
+   one crumb, and a nested page shows the full trail (`Applications › New Application`). This is
+   consistent across the console — first-level pages are **not** special-cased to hide the crumb. Crumb
+   links (`href`) navigate; the last crumb is the current page.
+2. **Sidebar toggle (`collapsible`, default `true`).** A toggle (`pi pi-bars`) sits at the far left of
+   `GlobalHeader.Left` on **every** console page. Clicking it collapses the rail **totally** (not to a
+   mini-rail — it is removed, and the content zone spans the full width); clicking again restores it.
+   The user stays visible via the header avatar while collapsed, so the shared invariant holds even
+   with no sidebar footer. It is standard chrome — you don't opt in; pass `:collapsible="false"` only
+   to suppress it on a page that must not collapse its rail.
+
+```vue
+<template>
+  <!-- Home: the header names the module via its single crumb; the sidebar
+       toggle is present by default. Home leads with content (no page heading). -->
+  <AppShell
+    active="home"
+    :breadcrumb="[{ label: 'Home' }]"
+  >
+    <!-- content only -->
+  </AppShell>
+</template>
+```
+
+- The breadcrumb naming the location and an in-page `PageHeading` are **different roles**: the crumb is
+  top chrome that says _where you are_; the `PageHeading` is the page's own title + description +
+  actions. A second-level page carries both (the crumb _and_ its `PageHeading`); Home carries only the
+  crumb and lets its content lead.
+
+### Shell 2 — focused creation
+
+For a **single task** — create, edit, deploy, a wizard step. The sidebar is gone so nothing competes
+with the form. The only chrome is one `GlobalHeader`: a **back** button, the Azion brand, the flow
+breadcrumb, and the account avatar. The page owns its own full-bleed body below the header.
+
+Again, **you compose this shell** — there is no `@aziontech/webkit/creation-header`. It is one
+`GlobalHeader` with no sidebar:
+
+```vue
+<!-- components/CreationShell.vue — a focused shell YOU compose. NOT importable
+     from webkit; it is one GlobalHeader (back + brand + breadcrumb + avatar)
+     with NO sidebar, wrapping webkit primitives. -->
+<script setup lang="ts">
+  import GlobalHeader from '@aziontech/webkit/global-header'
+  import Breadcrumb from '@aziontech/webkit/breadcrumb'
+  import IconButton from '@aziontech/webkit/icon-button'
+
+  defineProps<{
+    breadcrumb: { label: string; href?: string }[]
+    backLabel?: string
+    showBack?: boolean // default true — hide only on a terminal success screen
+  }>()
+  const emit = defineEmits<{ back: [event: MouseEvent]; navigate: [event: MouseEvent] }>()
+</script>
+
+<template>
+  <div class="flex h-dvh flex-col bg-(--bg-canvas)">
+    <!-- EXACTLY ONE GlobalHeader; it IS the whole chrome for a focused flow -->
+    <GlobalHeader>
+      <GlobalHeader.Brand><!-- Azion brand --></GlobalHeader.Brand>
+      <GlobalHeader.Left>
+        <!-- the ONLY way out: back button + the flow breadcrumb -->
+        <IconButton
+          v-if="showBack !== false"
+          icon="pi pi-arrow-left"
+          :aria-label="backLabel"
+          @click="emit('back', $event)"
+        />
+        <Breadcrumb :items="breadcrumb" />
+      </GlobalHeader.Left>
+      <GlobalHeader.Right>
+        <!-- the account avatar — the persistent identity in a focused flow -->
+      </GlobalHeader.Right>
+    </GlobalHeader>
+
+    <main class="min-h-0 flex-1 overflow-auto">
+      <slot />
+    </main>
+  </div>
+</template>
+```
+
+A create page uses **your** shell and wires the exit:
+
+```vue
+<script setup lang="ts">
+  import CreationShell from '@/components/CreationShell.vue' // your shell — NOT a webkit import
+  const cancel = () => {
+    /* route back to where the flow started */
+  }
+</script>
+
+<template>
+  <CreationShell
+    :breadcrumb="[{ label: 'Applications', href: '/applications' }, { label: 'Create' }]"
+    back-label="Back to Applications"
+    @back="cancel"
+    @navigate="cancel"
+  >
+    <!-- the focused task -->
+  </CreationShell>
+</template>
+```
+
+- The **back** button (and the breadcrumb links) are the _only_ way out — the exit is linear and
+  explicit, so a half-finished task is never abandoned by an accidental sidebar click.
+- Hide the back button (`:show-back="false"`) only on a terminal state (a success screen with nowhere
+  left to go back to).
+
+## The shared invariant — the user is never signed out
+
+**Both shells keep the signed-in user visible.** A focused flow drops the sidebar, but it does **not**
+drop the account avatar — it stays anchored to `GlobalHeader.Right`, mirroring the console header. A
+user who is mid-create must still see they're signed in and reach their account; a header with no
+identity reads as "logged out" and breaks trust.
+
+- **Persistent shell:** the user shows twice — the sidebar footer (avatar + name + account menu with
+  theme + logout) and the header avatar.
+- **Focused shell:** the header avatar (`GlobalHeader.Right`) is the persistent identity. It routes to
+  the same account destination as the console header, so identity is continuous across shells.
+
+Wire this into the focused shell itself (render the avatar in `GlobalHeader.Right` there), so every
+creation page gets it for free — a page must **not** have to remember to add it.
+
+## Content layout (inside the persistent shell)
+
+The shell frames the page; this is how the page's own content sits inside it. Every browse/list page
+and every resource-detail page follows the **same** layout and spacing, so moving between modules
+never feels like a different app.
+
+### The inset matches the header (`--spacing-md`)
+
+The content zone's padding is `--spacing-md` — the same edge padding as `GlobalHeader` — so page
+content lines up with the breadcrumb and the header actions. Your persistent shell applies this inset
+**once** (e.g. on its `<main>`, as in `AppShell` above); **don't** re-pad the page with a bespoke
+inset (`p-(--spacing-lg)`). A resource-detail page that opts out of the shell inset (to run a
+full-bleed tab bar) re-applies the same `p-(--spacing-md)` on its own scrolling content region —
+never `lg`.
+
+### First-level module list — the controls row leads, and there is no `PageHeading`
+
+A **first-level** page is one the sidebar routes to directly (Applications, Workloads, Object Storage,
+Deployments). It is **already named by the header breadcrumb**, so an `<h1>` repeating that name buys
+nothing and costs the first row of the table above the fold. The page opens instead on what the user
+came to do — **narrow the list, or add to it**:
+
+```
+┌──────────────────────────────────────────────────────────────────────────────┐
+│  [ search ][ filter chips … ]                    Documentation  + New Thing  │  ← controls row
+├──────────────────────────────────────────────────────────────────────────────┤
+│  ╭────────────────────────────────────────────────────────────────────────╮  │
+│  │  table (flush, borderless, inside the card)                            │  │
+│  ╰────────────────────────────────────────────────────────────────────────╯  │
+└──────────────────────────────────────────────────────────────────────────────┘
+```
+
+```vue
+<template>
+  <AppShell
+    active="applications"
+    :breadcrumb="[{ label: 'Applications' }]"
+  >
+    <main class="flex h-full flex-col">
+      <!-- The controls row REPLACES the PageHeading on a first-level list.
+           Narrowing reads left (where the eye starts); the module's own actions
+           sit right (where a control belongs); the table follows. -->
+      <header class="flex items-center gap-(--layout-group-gap)">
+        <div class="flex min-w-0 grow items-center gap-(--layout-group-gap)">
+          <!-- Hoisted out of the card, so it is a plain InputText bound to the
+               table's global filter — `Table.Search` is context-aware and only
+               works INSIDE `<Table>`. -->
+          <InputText
+            v-model="search"
+            size="large"
+            placeholder="Search..."
+            aria-label="Search applications"
+            class="min-w-36 grow"
+          />
+          <!-- filter chips / selects — the narrowing group grows and wraps -->
+        </div>
+        <div class="flex shrink-0 items-center gap-(--layout-group-gap)">
+          <Button
+            label="New Application"
+            kind="primary"
+            size="large"
+            icon="pi pi-plus"
+            @click="…"
+          />
+        </div>
+      </header>
+
+      <!-- The Table lives in a flush, borderless CardBox: the card supplies the
+           frame, so the table is edge-to-edge (padded=false) and border-free. -->
+      <section class="flex min-h-0 flex-col">
+        <CardBox :padded="false">
+          <template #content>
+            <Table
+              v-model:globalFilter="search"
+              :data="…"
+              :columns="…"
+              row-key="id"
+              :border="false"
+            />
+          </template>
+        </CardBox>
+      </section>
+    </main>
+  </AppShell>
+</template>
+```
+
+- **No `PageHeading` on a first-level module list.** The breadcrumb crumb is the module's name; a
+  second one is a duplicate that only pushes the data down.
+- **The controls live OUT of the table, not in its `#toolbar`.** They belong to the **page** — the
+  create button acts on the module, not on the table — and hoisting them keeps the card a frame around
+  data only. The trade is that the search field must be a plain `InputText` bound to
+  `v-model:globalFilter`, because `Table.Search` only resolves inside `<Table>`.
+- **The controls row and the table are ONE band**, stacked at the group step — not two sections.
+- **The table is framed by the card, not itself:** `CardBox :padded="false"` + `Table :border="false"`
+  — the card is the only border, so the table sits edge-to-edge.
+- **`Documentation` is a first-level affordance only.** It introduces the module. An internal level is
+  already inside the module, so it carries only the action that level can perform; reference material
+  a band needs is a `documentation` link on that band's own section heading instead.
+- **A `PageHeading` still belongs** on a page that is _not_ a module list — a second-level page that
+  names its own subject (an async deploy view, a gallery, a utility page). There it sits **out** of the
+  card, `--spacing-lg` above it.
+
+## Second-level navigation — tabs, and where the primary button goes
+
+A resource you navigate INTO (an application, a workload, a DNS zone, a database), and any module
+whose contents split into more than one page, carries a **full-bleed tab bar** as the bottom edge of
+the header. Each tab is **its own page**, not a filter.
+
+**This is the rule that decides where the page's primary button lives — and there is exactly one
+answer per page shape:**
+
+| The page…                                     | Second-level nav   | The primary action sits…                                                | Size     |
+| --------------------------------------------- | ------------------ | ----------------------------------------------------------------------- | -------- |
+| **Has tabs** (detail page, or a split module) | full-bleed tab bar | **on the tab row**, trailing the tabs, right-aligned                    | `medium` |
+| **Has no tabs** (a plain first-level list)    | none               | **on the controls row**, right of the search / filters, above the table | `large`  |
+
+The reason is positional, not stylistic: on a tabbed page the action belongs to the **page**, so its
+position must never move as tabs change — only its **label** does. On a page with no tabs there is no
+row above the table to put it on except the controls row, which is where narrowing already lives.
+
+### Tabs → the button rides the tab row
+
+```vue
+<template>
+  <AppShell
+    active="applications"
+    :padded="false"
+    :breadcrumb="[{ label: 'Applications', href: '/applications' }, { label: application.name }]"
+  >
+    <main class="flex h-full flex-col">
+      <!-- The tab bar IS the bottom of the header: full-bleed, its own bottom
+           border, and it does not scroll. NO PageHeading on this page. -->
+      <div class="border-b border-(--border-default) pr-(--spacing-lg) pl-(--spacing-sm)">
+        <div class="flex items-center gap-(--spacing-sm) py-(--spacing-sm)">
+          <TabView
+            v-model:value="activeTab"
+            class="min-w-0 flex-1"
+          >
+            <TabView.List>
+              <TabView.Item
+                v-for="tab in tabs"
+                :key="tab.value"
+                :value="tab.value"
+                :label="tab.label"
+              />
+            </TabView.List>
+          </TabView>
+
+          <!-- The page's action, trailing the tabs. `min-h-8` RESERVES a medium
+               button's height for the tab that renders nothing here, so switching
+               tabs never nudges the page by 2px. -->
+          <div class="flex min-h-8 shrink-0 items-center gap-(--spacing-xs)">
+            <Button
+              v-if="activeView.action"
+              :label="activeView.action.label"
+              :icon="activeView.action.icon"
+              :loading="actionPending"
+              kind="primary"
+              size="medium"
+              @click="runTabAction"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Only this region scrolls; each tab's view brings its own inset. -->
+      <section class="min-h-0 flex-1 overflow-auto">
+        <KeepAlive>
+          <component
+            :is="activeView.component"
+            ref="viewRef"
+            v-bind="activeView.props"
+          />
+        </KeepAlive>
+      </section>
+    </main>
+  </AppShell>
+</template>
+```
+
+- **The row is `items-center`, not `items-end`.** A 32px `size="medium"` button centres against the
+  30px tab items; aligning their bottoms makes the button overhang by 2px and forces a hand-written
+  `mb-*` to undo.
+- **`min-w-0 flex-1` on the `TabView`** lets the tab list shrink (and scroll horizontally on a narrow
+  viewport) instead of pushing the action off the row.
+- **Reserve the action's height (`min-h-8`)** on the wrapper, not on the row: a row's own padding
+  counts against a min-height, so a floor there never binds. Without the reservation the row is
+  content-sized — 30px with tabs alone, 32px with a button — so every switch between a tab that has an
+  action and one that doesn't shifts the whole page below it.
+- **The tab owns the flow; the row only positions the button.** Declare the action's _label and icon_
+  on the tab entry and its _behaviour_ in the view, reached through the mounted view's `defineExpose`
+  — so the drawer, the form, and the pending flag never leave the file that renders them. A tab with
+  nothing to create simply declares no action.
+- **The active tab lives in the URL (`?tab=`)**, so it survives reload and is linkable.
+- **Inside a tab, a list keeps its controls row for narrowing but takes no actions** — its create
+  button was hoisted to the tab row. Two create buttons on one page is the failure this rule prevents.
+
+### No tabs → the button rides the controls row
+
+The first-level list above. Nothing else changes: search and filters left, the module's actions right,
+`size="large"` (the row has no 30px tab items to centre against), table below.
+
+### A tabbed page renders no `PageHeading`
+
+The tab bar is **navigation**, not a heading — each tab is its own page, so the bar carries no `<h1>`,
+and each tab's own heading (if it needs one) lives inside that tab's view. A `PageHeading` folded into
+the bar would be a heading block that renders no heading.
+
+The one page shape that shows **both** is a first-level list whose tabs sit _in content, below_ the
+heading, with no border and no full-bleed inset — that is a different element, not this bar with a
+flag flipped.
+
+Each tab renders one of two bodies:
+
+- **A list tab** → the list pattern above (controls row + flush borderless `Table`), with its create
+  action **on the tab row**.
+- **A settings tab** → the `ItemGroup` form: `--spacing-sm`-titled sections (`text-heading-xxs`) each
+  over a flush `CardBox` + `Item.List`, committed as **one block** by a single Save bar pinned below
+  the scroll region (see `webkit-form` and `webkit-ui-states`).
+
+## Breadcrumb — first level and second-level resource nav
+
+The breadcrumb is the **only** thing naming the page's location, which is why it renders on every
+level and why first-level pages dropped their `PageHeading`. It is top chrome that says _where you
+are_; it is not the page's title block.
+
+| Level                                              | Items                                                                                                    |
+| -------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| **First level** — a module the sidebar routes to   | `[{ label: 'Applications' }]` — one crumb, no `href`                                                     |
+| **Second level** — a resource you opened           | `[{ label: 'Applications', href: '/applications' }, { label: application.name }]`                        |
+| **Second level** — a sub-page that is not a record | `[{ label: 'Deployments', href: '/deployments' }, { label: 'Async deployment' }]`                        |
+| **Third level** — a typed sub-collection           | `[{ label: 'Edge DNS', href: '/edge-dns' }, { label: 'Zone', href: '/edge-dns' }, { label: zone.name }]` |
+| **Focused creation flow**                          | `[{ label: 'Applications', href: '/applications' }, { label: 'Create' }]`                                |
+
+Four rules hold across every row:
+
+1. **First-level pages are not special-cased to hide the crumb.** One crumb is still a breadcrumb —
+   it is what names the module now that there is no `PageHeading`.
+2. **The second-level crumb is the resource's own name**, not the page type: `webkit-sample-vue`, not
+   `Application detail`. That name is the page's identity, which is exactly why the page needs no
+   heading repeating it.
+3. **Every non-last crumb links; the last crumb is the current page and never links.** In a focused
+   flow the crumb links are the way out alongside the back button.
+4. **A tab is never a crumb.** Switching tabs does not change the breadcrumb — the tab is second-level
+   _navigation within one page_, and it already has its own visible bar. It travels in `?tab=`, not in
+   the trail.
+
+## Hard rules
+
+- **One shell per page.** A page is either a persistent-console page or a focused-creation page —
+  never both, never neither.
+- **Exactly one `GlobalHeader` per page.** The persistent shell renders it inside the content zone;
+  the focused shell _is_ it. Never render a second header inside the content.
+- **The user is always visible.** Every shell shows the account avatar; a focused flow keeps it in
+  `GlobalHeader.Right`. Never ship a screen where the user looks signed out.
+- **Focused flows have no sidebar.** If a create/edit/deploy page renders a sidebar, it's the wrong
+  shell. Remove the sidebar or switch to a browse page.
+- **Focused flows have a back way out.** A focused shell without a working `@back` (or a terminal state
+  that justifies `:show-back="false"`) strands the user.
+- **The header always names the location.** The breadcrumb renders on every level — a single
+  first-level crumb (Home, Applications) or a nested trail (Applications › New Application). Crumb
+  links (`href`) navigate; the last crumb is the current page. The sidebar toggle (`collapsible`) is
+  separate chrome and on by default.
+- **Compose the shells, don't hand-roll.** Build each shell from `@aziontech/webkit/global-header`,
+  `/sidebar`, `/breadcrumb` (resolved via the MCP / catalog). Never build a bare `<header>`/`<nav>`
+  when the primitives exist, and never import a nonexistent `@aziontech/webkit/app-layout` or
+  `/creation-header`.
+- **The content inset is `--spacing-md`** — the header's edge padding. Take it from your shell (applied
+  once); a page that runs a full-bleed tab bar re-applies `p-(--spacing-md)` on its own content
+  region. Never a bespoke `p-(--spacing-lg)` page inset.
+- **A list table lives in a flush, borderless `CardBox`.** `CardBox :padded="false"` +
+  `Table :border="false"`; the card is the only border. Never ship a bare bordered table, never wrap
+  the table in a padded card. Where a page does carry a `PageHeading`, it sits **out** of the card,
+  `--spacing-lg` above it — never buried in the card's `#header`.
+- **A first-level module list carries no `PageHeading`.** The breadcrumb crumb already names the
+  module; the page opens on its controls row (narrowing left, the module's actions right) over the
+  table. Never ship an `<h1>` that repeats the crumb.
+- **One place for the page's primary button, decided by whether the page has tabs.** Tabs → the tab
+  row (`size="medium"`, `items-center`, height reserved with `min-h-8`). No tabs → the controls row
+  (`size="large"`). Never both: a tab's own list must not re-render the create button its tab row
+  already carries.
+- **A tabbed page renders no `PageHeading`.** The tab bar is navigation; each tab's heading lives
+  inside that tab's view. The active tab travels in `?tab=`.
+- **The breadcrumb names the level, and a tab is never a crumb.** One unlinked crumb at first level;
+  `module › resource name` at second level; every non-last crumb links. Switching tabs must not change
+  the trail.
+
+## Review output
+
+For `/webkit-navigation <file>`, list gaps. Each:
+
+```
+✗ CreateResource.vue:12  renders a sidebar inside a create flow
+  rule: One shell per page — a create flow is the focused shell, which has no sidebar.
+  fix: drop the sidebar; wrap the page in your focused shell (back + brand + breadcrumb + avatar).
+
+✗ NewResourceForm.vue:40  GlobalHeader.Right is empty on a focused flow
+  rule: The user is always visible — a header with no identity reads as signed out.
+  fix: render the account avatar in GlobalHeader.Right (your focused shell should anchor it for you).
+
+✗ Applications.vue:28  PageHeading title="Applications" above the table
+  rule: A first-level module list carries no PageHeading — the breadcrumb crumb already names it.
+  fix: drop the heading; open on the controls row (search/filters left, + New Application right).
+
+✗ WorkloadDetail.vue:64  create button inside the Deployments tab's own controls row
+  rule: One place for the primary button — a tabbed page puts it on the tab row, not per tab.
+  fix: hoist it to the tab row (size="medium"), and reach the tab's flow via defineExpose.
+
+✗ ApplicationDetail.vue:15  breadcrumb includes the active tab ("… › Build")
+  rule: A tab is never a crumb — it is navigation within one page and travels in ?tab=.
+  fix: end the trail at the resource name: [{ label: 'Applications', href }, { label: app.name }].
+```
+
+End with: `navigation sound` or `N gaps — fix before polish`.
+
+## References
+
+- **Persistent console shell** — a shell you compose that renders exactly one `GlobalHeader` inside the
+  content zone and a full-height `Sidebar` (with its header / grouped links / user footer) beside the
+  page content. Not importable from webkit; you build it once and every browse page reuses it.
+- **Focused creation shell** — a focused shell = one `GlobalHeader` with a back button + Azion brand +
+  flow breadcrumb + account avatar, and **no** sidebar. Also consumer-composed.
+- **The webkit primitives both shells wrap** (resolve each via the MCP / catalog — see "How to find the
+  components"): `@aziontech/webkit/global-header` (regions `GlobalHeader.Left` / `.Middle` / `.Right` /
+  `.Brand`), `@aziontech/webkit/sidebar` (+ `/sidebar-header`, `/sidebar-group`, `/sidebar-footer`),
+  `@aziontech/webkit/breadcrumb`. There is no `@aziontech/webkit/app-layout` or `/creation-header` — do
+  not import one.
+- **Companion skills:** `webkit-form` (what fills a focused flow), `webkit-errors` (where a failure on
+  the page goes), `webkit-ux-heuristics` (states + feedback), `webkit-ui-states` (locking + toast),
+  `webkit-lists` (the index page around the table), `webkit-baseline-ui` (components + tokens).
+
+## Definition of Done
+
+- [ ] The page uses exactly one shell (persistent console **or** focused creation), matching its job.
+- [ ] Exactly one `GlobalHeader` renders on the page.
+- [ ] The signed-in user is visible: sidebar footer + header avatar (persistent), or the
+      `GlobalHeader.Right` avatar (focused).
+- [ ] Focused flows have no sidebar and a working back way out (`@back` / breadcrumb).
+- [ ] The breadcrumb names the location on every level; crumb links navigate, the last crumb is current.
+- [ ] Shells are composed from the webkit primitives (`global-header` / `sidebar` / `breadcrumb` via the
+      MCP / catalog), not hand-rolled, and there is no dead `@aziontech/webkit/app-layout` import.
+- [ ] Content inset is `--spacing-md` (from the shell); a table sits in a flush borderless `CardBox`,
+      and any `PageHeading` is out of the card, `--spacing-lg` above it. No bespoke `lg` page inset.
+- [ ] A first-level module list has no `PageHeading` — it opens on the controls row (narrowing left,
+      module actions right) over the table.
+- [ ] The page's primary button is in exactly one place: the tab row (`medium`) if the page has tabs,
+      the controls row (`large`) if it doesn't — never duplicated inside a tab's own list.
+- [ ] A tabbed page renders no `PageHeading`, keeps the tab row `items-center` with the action's height
+      reserved, and carries the active tab in `?tab=`.
+- [ ] The breadcrumb matches the level (one unlinked crumb at first level; `module › resource name` at
+      second level), every non-last crumb links, and no tab appears in the trail.
diff --git a/.claude/skills/webkit-tables/SKILL.md b/.claude/skills/webkit-tables/SKILL.md
new file mode 100644
index 0000000000..038ae9d78a
--- /dev/null
+++ b/.claude/skills/webkit-tables/SKILL.md
@@ -0,0 +1,383 @@
+---
+name: webkit-tables
+description: Data tables on @aziontech/webkit — one data-driven <Table :data :columns row-key> with a column model (principal, grow, enableSorting, kind:'action', hideable) and a fixed toolbar (Filter · Search · RefreshButton · Export · ColumnSelector) + AppliedFilters, scrolling its body internally via the h-full/min-h-0 chain. Ships a fixed set of cell recipes so every table reads the same — principal name cell, Tag/status-severity cell, actions Dropdown cell, copy-value cell, "+N" overflow Popover, a Last Modified cell (Avatar + relative time in one column), and the canonical domain cell (link + external arrow, copy button pinned to the cell's right edge for common-width alignment). The tabular companion to /webkit-form and /webkit-ui-states.
+status: active
+last_updated: 2026-07-21
+scope: general
+enforced_by: [webkit-prefer-over-custom, webkit-component-states, webkit-tokens, ui-verify]
+---
+
+# Skill: webkit-tables
+
+## Purpose
+
+A table is where a product shows the most data in the least room, so it is where inconsistency shows
+most: one table right-pins its actions and another left-floats them, one domain cell puts a copy button
+flush against the text so it lands at a different x on every row, one table overflows the page instead of
+scrolling its own body. This skill fixes the **structure** of a data table built on the webkit `Table`
+(`@aziontech/webkit/table`) and the **cell recipes** it composes, so every table in the app reads the
+same and every recurring cell type (name, status, domain, actions, copy) looks identical across screens.
+
+It is the tabular companion to `/webkit-form` (form layout) and `/webkit-ui-states` (the loading / empty /
+error states a table must render). This skill owns **the Table setup, the column model, the toolbar,
+internal scroll, and the cell recipes** — including the aligned domain cell.
+
+Find the `Table` and its sub-components through the `webkit` MCP (`suggest_component` / `get_component`)
+or `node_modules/@aziontech/webkit/catalog.json` — never by reading a component source path.
+
+## How to use
+
+- `/webkit-tables` — apply the structure + cell recipes below to any table you build in this conversation.
+- `/webkit-tables <file>` — review the file's table against the patterns; per gap report the exact
+  line/element (quoted), which pattern it breaks (one sentence), and the concrete fix naming the webkit
+  component to use.
+
+## When to invoke
+
+- Building or reviewing any list/index page, resource table, or any `<Table>` with cell slots.
+- The user asks "the copy button is misaligned", "how do I lay out this cell", "the table overflows the
+  page", "which toolbar controls", "how do actions/status/domain cells look".
+- After `/webkit-ui-states` establishes the empty/loading/error states, and before `/webkit-impeccable-polish`.
+
+## The Table — data-driven, one shape
+
+Tables are **data-driven**, not hand-authored rows: pass `:data` + `:columns` and render each column
+through a `#cell-<accessorKey>` slot. Never build `<tr>`/`<td>` by hand, and never restyle the Table's
+internals — compose inside its slots.
+
+```vue
+<script setup>
+  import Table from '@aziontech/webkit/table'
+</script>
+
+<template>
+  <Table
+    :data="applications"
+    :columns="columns"
+    :filter-fields="filterFields"
+    row-key="id"
+    enable-sorting
+    paginated
+    :page-size="8"
+    :border="false"
+    max-height="100%"
+    class="h-full"
+    @row-click="openApp"
+  >
+    <!-- toolbar · filters · #cell-* slots -->
+  </Table>
+</template>
+```
+
+- `row-key` is the stable id accessor; `@row-click` opens the detail view (see the `@click.stop`
+  discipline below so cell controls don't trigger it).
+- `enable-sorting` + per-column `enableSorting: true` turns on the sort affordance for that column.
+- `paginated` + `:page-size` paginates client-side; `:border="false"` for a flush table inside a `CardBox`.
+
+### Column model
+
+One flat `columns` array. Each column is `{ accessorKey, header }` plus the options it needs:
+
+```js
+const columns = [
+  { accessorKey: 'name', header: 'Name', enableSorting: true, principal: true },
+  { accessorKey: 'repository', header: 'Repository', grow: 2 },
+  { accessorKey: 'id', header: 'ID', enableSorting: true },
+  { accessorKey: 'domainName', header: 'Domain Name', grow: 3 },
+  { accessorKey: 'status', header: 'Status', enableSorting: true },
+  { accessorKey: 'lastModified', header: 'Last Modified', enableSorting: true, grow: 2 },
+  { id: 'actions', kind: 'action', hideable: false } // auto-pinned to the right edge
+]
+```
+
+- **`principal: true`** marks the emphasized identity column (the name) — one per table.
+- **`grow: N`** gives a flexible column a larger share of the width (default share is `1`). Use it for
+  long-content columns (repository, domain, timestamps).
+- **`kind: 'action'`** is the trailing actions column; it auto-pins to the right edge. Pair with
+  `hideable: false` so the column selector can't hide it.
+- **`enableSorting: true`** per sortable column (with `enable-sorting` on the root).
+
+### Toolbar + applied filters
+
+The toolbar is a fixed, ordered set of compound `Table.*` controls in the `#toolbar` slot; the
+applied-filter chips render in `#filters` via `Table.AppliedFilters`. `filterFields` (`{ id, label,
+type, options? }`) drives the `Table.Filter` builder.
+
+```vue
+<template #toolbar>
+  <div class="flex w-full items-center gap-(--spacing-xs)">
+    <Table.Filter :fields="filterFields" />
+    <Table.Search
+      size="large"
+      placeholder="Search..."
+      class="flex-1"
+    />
+    <Table.RefreshButton />
+    <Table.Export />
+    <Table.ColumnSelector />
+  </div>
+</template>
+
+<template #filters>
+  <Table.AppliedFilters />
+</template>
+```
+
+Order left→right: **Filter · Search (`flex-1`) · Refresh · Export · ColumnSelector**. `Table.Search`
+drives the global filter through the injected table context — it takes no `v-model` (compound API).
+
+### Scroll the body internally — never the page
+
+A full-height index scrolls its own **body** while the toolbar/header stay pinned. Do it with a height
+chain, not a fixed pixel height:
+
+```vue
+<section class="flex min-h-0 flex-1 flex-col">
+  <CardBox :padded="false" class="h-full">
+    <template #content>
+      <Table … max-height="100%" class="h-full">…</Table>
+    </template>
+  </CardBox>
+</section>
+```
+
+`min-h-0` on the flex parent (so it can shrink), `h-full` down the chain (`CardBox` → `Table`), and
+`max-height="100%"` on the `Table` — the body scrolls inside, the toolbar and column headers don't move.
+
+## Cell recipes
+
+Render each column with `#cell-<accessorKey>` (`#cell-actions` for the action column). Reuse these
+recipes verbatim so a cell type looks identical across every table.
+
+### Principal / name cell — icon + truncate + hover-underline
+
+```vue
+<template #cell-name="{ value, row }">
+  <div class="flex min-w-0 items-center gap-(--spacing-xs)">
+    <i
+      :class="presetIcon(row.preset)"
+      class="shrink-0 text-[1.15em]"
+      aria-hidden="true"
+    />
+    <span class="truncate cursor-pointer hover:underline">{{ value }}</span>
+  </div>
+</template>
+```
+
+`min-w-0` on the wrapper + `truncate` on the label so a long name ellipsizes instead of overflowing; the
+leading glyph is `shrink-0`.
+
+### Tag / chip cell + status-severity cell
+
+Use `Tag` for a chip; for status, map the value to a semantic `severity` — **never a raw color**.
+
+```vue
+<template #cell-repository="{ value }">
+  <Tag
+    severity="secondary"
+    size="medium"
+    icon="pi pi-github"
+    rounded
+    class="max-w-full"
+  >
+    <span class="min-w-0 truncate">{{ value }}</span>
+  </Tag>
+</template>
+
+<template #cell-status="{ value }">
+  <Tag
+    :label="value"
+    :severity="value === 'Active' ? 'success' : 'secondary'"
+    size="medium"
+  />
+</template>
+```
+
+### Domain cell — link + arrow, copy button pinned to the cell's right edge
+
+**The rule that fixes misalignment:** the copy button never sits flush against the domain text (its
+x-position would then vary per row with the domain length). It is **pinned to the cell's right edge** with
+`ml-auto shrink-0`, the domain link **truncates** (`min-w-0` + inner `truncate`), and the cell fills its
+column (`w-full`) — so every copy button lines up vertically no matter how long the domain is.
+
+```vue
+<template #cell-domainName="{ value }">
+  <!-- Domain link (truncates) + external-redirect arrow; copy button pinned right so it aligns across rows. -->
+  <div class="flex w-full min-w-0 items-center gap-(--spacing-xs)">
+    <a
+      :href="`https://${value}`"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="flex min-w-0 items-center gap-(--spacing-xxs) hover:underline"
+      @click.stop
+    >
+      <span class="truncate">{{ value }}</span>
+      <i
+        class="pi pi-arrow-up-right shrink-0 text-(--text-muted)"
+        aria-hidden="true"
+      />
+    </a>
+    <CopyButton
+      kind="outlined"
+      :value="value"
+      aria-label="Copy domain name"
+      class="ml-auto shrink-0"
+    />
+  </div>
+</template>
+```
+
+Do **not**:
+
+- put `CopyButton` immediately after the text with no `ml-auto` (the misalignment this recipe fixes);
+- use `whitespace-nowrap` on the link instead of `truncate` (a long domain then shoves the button off);
+- omit `@click.stop` on the link/button when the row has `@row-click` (the click would open the row).
+
+### "+N" overflow cell — Popover, not a wrapped list
+
+When a cell holds a primary value plus overflow (multiple domains, tags), show the primary + a `+N` `Tag`
+that opens a `Popover` listing the rest. The `+N` tag is `shrink-0` and sits right after the primary;
+copy (if any) still pins right.
+
+```vue
+<Popover v-if="row.domainCount" placement="bottom-start" width="medium">
+  <Popover.Trigger @click.stop>
+    <Tag :label="`+${row.domainCount}`" severity="secondary" size="small" class="shrink-0 cursor-pointer" />
+  </Popover.Trigger>
+  <Popover.Content @click.stop>
+    <div class="flex max-h-(--container-xs) flex-col overflow-auto p-(--spacing-xxs)">
+      <p class="px-(--spacing-xs) py-(--spacing-xxs) text-overline-sm text-(--text-muted)">
+        {{ row.domains.length }} domains
+      </p>
+      <span v-for="d in row.domains" :key="d" class="truncate px-(--spacing-xs) py-(--spacing-xxs) text-body-sm">
+        {{ d }}
+      </span>
+    </div>
+  </Popover.Content>
+</Popover>
+```
+
+### Copy-value cell — text + CopyButton at the end
+
+Any cell that exposes a copyable value (token, ID, variable value) uses the same **text-then-copy** shape,
+copy pinned to the right edge:
+
+```vue
+<template #cell-value="{ value }">
+  <div class="flex w-full min-w-0 items-center gap-(--spacing-xs)">
+    <span class="min-w-0 truncate">{{ value }}</span>
+    <CopyButton
+      kind="outlined"
+      :value="value"
+      aria-label="Copy value"
+      class="ml-auto shrink-0"
+    />
+  </div>
+</template>
+```
+
+### Last Modified cell — Avatar + relative time (one column, not two)
+
+A "Last Modified" / "Updated" / "Deployed" column shows **the modifier's `Avatar` + a relative timestamp**
+("3 days ago", "2 min ago") — never a raw absolute date, and never a _separate_ "Last Modified By" /
+"Author" column. The person is conveyed by the avatar (name on its `Tooltip`), so the two former columns
+**fold into one**. Extract the recipe into your own small cell component so every table's time column is
+identical:
+
+```vue
+<!-- your own LastModifiedCell — Avatar (tooltip = name) + relative time -->
+<template #cell-lastModified="{ value, row }">
+  <div class="flex min-w-0 items-center gap-(--spacing-xs)">
+    <Tooltip
+      v-if="row.author"
+      :text="row.author"
+    >
+      <Avatar
+        :label="row.author"
+        size="small"
+      />
+    </Tooltip>
+    <span class="truncate text-body-sm text-(--text-muted)">{{ relativeTime(value) }}</span>
+  </div>
+</template>
+```
+
+- **`relativeTime(date)`** is a small formatter you own in your app — "just now" / "N min ago" /
+  "N hours ago" / "N days ago" / "N weeks/months/years ago" (return `''` for empty/unparseable input so a
+  missing date renders nothing). It is app logic, not a webkit component.
+- **The avatar identifies the modifier**; the name (humanize an email: `maria.silva@azion.com` →
+  `Maria Silva`) lives on the `Tooltip`, so there is no separate name column.
+- Do **not**: render the raw absolute date; keep a separate "Last Modified By"/"Author" column beside this
+  cell (two avatars per row).
+
+### Actions cell — Dropdown + ellipsis IconButton
+
+The trailing `kind:'action'` column renders a `Dropdown` triggered by an ellipsis `IconButton`. Group
+destructive actions in their own `Dropdown.Group`.
+
+```vue
+<template #cell-actions="{ row }">
+  <Dropdown
+    placement="bottom-end"
+    @select="(event, value) => onRowAction(event, value, row)"
+  >
+    <Dropdown.Trigger>
+      <IconButton
+        icon="pi pi-ellipsis-h"
+        kind="outlined"
+        size="small"
+        aria-label="Row actions"
+      />
+    </Dropdown.Trigger>
+    <Dropdown.Group>
+      <Dropdown.Option
+        value="view"
+        label="View details"
+      >
+        <template #left
+          ><i
+            class="pi pi-eye"
+            aria-hidden="true"
+        /></template>
+      </Dropdown.Option>
+      <!-- edit, clone … -->
+    </Dropdown.Group>
+    <Dropdown.Group>
+      <Dropdown.Option
+        value="delete"
+        label="Delete"
+      >
+        <template #left
+          ><i
+            class="pi pi-trash"
+            aria-hidden="true"
+        /></template>
+      </Dropdown.Option>
+    </Dropdown.Group>
+  </Dropdown>
+</template>
+```
+
+`@select` follows the webkit event contract `(event, value)` — event first, value second. The in-cell
+`IconButton` is inside the action column, so it doesn't need `@click.stop`; any interactive control in a
+**non-action** cell of a row-clickable table does (`@click.stop`).
+
+## Checklist
+
+- [ ] Table is data-driven: `:data` + `:columns` + `row-key`, rows via `#cell-<key>` — no hand-built `<tr>`.
+- [ ] Exactly one `principal: true` column; the actions column is `{ kind: 'action', hideable: false }`.
+- [ ] `grow: N` on long columns (repository, domain, timestamps); no fixed pixel widths.
+- [ ] Toolbar order: Filter · Search (`flex-1`) · Refresh · Export · ColumnSelector; `#filters` → `Table.AppliedFilters`.
+- [ ] Body scrolls internally: `min-h-0 flex-1` parent → `CardBox h-full` → `Table max-height="100%" class="h-full"` — the page doesn't scroll.
+- [ ] Domain cell = link + arrow + `CopyButton` with `ml-auto shrink-0`; link `min-w-0` + `truncate`; cell `w-full`. Copy buttons align across rows.
+- [ ] Every copyable cell uses text-then-copy with the copy button pinned right (`ml-auto shrink-0`), never flush against the text.
+- [ ] "Last Modified" cell = `Avatar` + relative time in one column, name on the avatar tooltip; no raw absolute date and no separate "Last Modified By"/"Author" column beside it.
+- [ ] Overflow shown as a `+N` `Tag` opening a `Popover`, not a wrapped inline list.
+- [ ] Status via `Tag :severity`, never a raw color; long text `truncate`s inside `min-w-0`.
+- [ ] Interactive controls in non-action cells use `@click.stop` when the table has `@row-click`.
+
+## Related skills
+
+- `/webkit-form` — form layout & accessibility (the create/edit view a table's "New" button opens).
+- `/webkit-ui-states` — the loading / empty / error states a table must render.
+- `/webkit-impeccable-polish` — final rhythm/alignment pass over the assembled table.
diff --git a/.claude/skills/webkit-theming-dark-mode/SKILL.md b/.claude/skills/webkit-theming-dark-mode/SKILL.md
new file mode 100644
index 0000000000..35c038ade0
--- /dev/null
+++ b/.claude/skills/webkit-theming-dark-mode/SKILL.md
@@ -0,0 +1,207 @@
+---
+name: webkit-theming-dark-mode
+description: Every screen in a @aziontech/webkit app works in BOTH light and dark with zero per-theme edits, because it is styled only through semantic tokens (var(--bg-surface), var(--text-default), var(--primary)…) that carry a role and swap value per theme — never a hex, rgb/hsl, Tailwind palette color, or a value that reads in one theme only. Use when building or reviewing any screen, and before calling one done. Covers the data-theme mechanism, elevation-in-dark, and the two-theme check.
+status: active
+last_updated: 2026-07-20
+scope: general
+enforced_by: [webkit-tokens, ui-verify]
+---
+
+# Skill: webkit-theming-dark-mode
+
+## Purpose
+
+A screen that "looks right" is only half-verified — it looks right in the theme you happened to open.
+The `@aziontech/theme` tokens make both themes free **if** you style through them: a token names a
+**role** (`--bg-surface`, `--text-default`, `--border-default`), and its value flips per theme
+automatically. The moment a hex, an `rgb()`, or a Tailwind palette color (`bg-zinc-900`,
+`text-white`) lands on an element, you have hard-coded one theme and broken the other. This skill
+fixes the discipline that keeps every screen theme-correct with no per-theme branches.
+
+## How to use
+
+- `/webkit-theming-dark-mode` — apply the token discipline to any screen you build in this
+  conversation, and switch to the dark check before declaring it done.
+- `/webkit-theming-dark-mode <file>` — review the file and report, per gap: the quoted line, the
+  hard-coded color, and the semantic token that replaces it.
+
+## How to find the tokens and components
+
+Never guess a token or an import path. Resolve both from the contract, not from memory:
+
+- Token names: read **`node_modules/@aziontech/theme`** (the semantic color set) — a name that is not
+  defined there does not exist. Roles you will reach for most: `--bg-canvas`, `--bg-surface`,
+  `--bg-surface-raised`, `--bg-surface-overlay`, `--text-default`, `--text-secondary`,
+  `--border-default`, `--primary`, `--primary-contrast`.
+- Components: ask the **webkit MCP** (`suggest_component`) or read
+  **`node_modules/@aziontech/webkit/catalog.json`** — every key under `imports` is a real subpath.
+
+## How theming works — light is default, dark is opt-in
+
+The tokens default to **light**: the light values live in `:root` (and `[data-theme=light]`). **Dark
+is opt-in** — set `data-theme="dark"` on the `<html>` element (the tokens also respond to a `.dark`
+class on any ancestor). Nothing else changes; the same `var(--bg-surface)` now resolves to its dark
+value.
+
+```html
+<!-- dark from the first paint -->
+<html data-theme="dark"></html>
+```
+
+A runtime toggle is just a write to that attribute — the whole tree re-themes with no re-render:
+
+```ts
+function toggleTheme() {
+  const el = document.documentElement
+  el.dataset.theme = el.dataset.theme === 'dark' ? 'light' : 'dark'
+}
+```
+
+## The core rule — style through the role, never the value
+
+A token carries the role; its value is the theme's job. Reference the role and both themes are handled
+at once. Bind a raw color and you have pinned one theme.
+
+```vue
+<!-- ✅ role-based: correct in both themes, no branches -->
+<div class="bg-(--bg-surface) text-(--text-default) border border-(--border-default)">
+  <span class="text-(--primary)">Active</span>
+</div>
+
+<!-- ❌ value-based: legible in one theme, broken in the other -->
+<div class="bg-white text-[#1a1a1a] border border-zinc-200">
+  <span class="text-blue-600">Active</span>
+</div>
+```
+
+This is the same token catalog the design-system components render with, so a screen built on tokens
+sits seamlessly next to `<Button>`, `<Card>`, and the rest in either theme.
+
+## Elevation in dark = a lighter surface, not a heavier shadow
+
+Shadows barely read on a dark ground — stacking depth comes from **surface lightness**, not from a
+bigger `box-shadow`. That is exactly what the surface tokens encode: `--bg-surface-raised` and
+`--bg-surface-overlay` are _lighter_ than `--bg-surface` in dark, and correctly _shadowed/tinted_ in
+light. Use the role for the layer and both themes get the right depth cue. Discover the exact surface
+names from the theme package; never invent a `surface-3`.
+
+```vue
+<!-- page → card → menu: each layer is a role, depth reads in both themes -->
+<div class="bg-(--bg-canvas)">
+  <div class="bg-(--bg-surface)">...</div>
+  <div class="bg-(--bg-surface-raised)">popover / menu</div>
+</div>
+```
+
+## Loading placeholders use a translucent role, not a surface
+
+A surface token is opaque and tuned for one background, so a skeleton built from one is only legible on
+the surface it was picked against — and it inverts badly across themes. `--bg-placeholder` (the fill)
+and `--bg-placeholder-highlight` (the sweep) are **translucent**: they composite over whatever layer
+they sit on, so the same token holds its contrast on canvas, surface, raised and overlay alike, in both
+themes. Keep the fill as `background-color` and put the sweep in a gradient whose other stops are
+`transparent`, so the animated and static states share one base tone.
+
+```vue
+<!-- ❌ opaque surface as a placeholder: near-invisible on a card in light -->
+<div class="bg-(--bg-surface-overlay)" />
+<!-- ✅ translucent placeholder role, correct on any layer in both themes -->
+<div class="bg-(--bg-placeholder)" />
+```
+
+Prefer the design system's `Skeleton` component over hand-rolling this — it already pairs the tokens
+with the shimmer animation and its reduced-motion fallback.
+
+## Don't fight the tokens with `dark:` overrides
+
+If a role has a token, the token already handles both themes — adding `dark:bg-…` on top is redundant
+at best and drifts the two themes apart at worst. Reach for Tailwind's `dark:` variant **only** for
+the rare property no token expresses (and even then, prefer proposing the missing token). A screen
+full of `dark:` overrides is a screen that stopped trusting the tokens.
+
+```vue
+<!-- ❌ re-implements what --bg-surface already does per theme -->
+<div class="bg-white dark:bg-zinc-900 text-black dark:text-white">
+<!-- ✅ one role, no per-theme branch -->
+<div class="bg-(--bg-surface) text-(--text-default)">
+```
+
+## A card that needs zero changes across themes
+
+Every color here is a role. Toggle `data-theme` and it re-themes with no edit — surface, text, border,
+and accent all move together.
+
+```vue
+<script setup lang="ts">
+  function toggleTheme() {
+    const el = document.documentElement
+    el.dataset.theme = el.dataset.theme === 'dark' ? 'light' : 'dark'
+  }
+</script>
+
+<template>
+  <article
+    class="rounded-(--shape-card) p-(--spacing-md)
+           bg-(--bg-surface) text-(--text-default)
+           border border-(--border-default)"
+  >
+    <h3 class="text-(--text-default)">Workload health</h3>
+    <p class="text-(--text-secondary)">Requests are within normal range.</p>
+    <span class="text-(--primary)">View details</span>
+    <button
+      class="mt-(--spacing-sm) text-(--primary)"
+      @click="toggleTheme"
+    >
+      Toggle theme
+    </button>
+  </article>
+</template>
+```
+
+## Accents that appear on both grounds
+
+A brand accent tuned for a white page can vibrate or wash out on a dark one. Use the theme's own
+accent tokens (`--primary` and friends), which are already balanced per theme; if you must introduce a
+new accent, verify its **contrast against both** `--bg-canvas` values and desaturate it until it reads
+on both — do not ship a single saturated hex for both grounds.
+
+## Validate BOTH themes before "done"
+
+A screen tested in one theme is **not done**. The `webkit-ui-verify` runtime check screenshots the
+view in light **and** dark — run it, look at both, and confirm text contrast, surface separation, and
+accents all hold. A regression that only shows in dark is invisible until someone opens dark mode in
+production; the two-theme screenshot is what catches it first.
+
+## Hard rules
+
+- Style through **semantic tokens** only — no hex, `rgb()`/`hsl()`, or Tailwind palette color
+  (`bg-white`, `text-zinc-900`, `border-slate-200`) anywhere on the screen.
+- Dark is `data-theme="dark"` on `<html>` (or a `.dark` ancestor); light is the default `:root`. Don't
+  ship a second stylesheet or a JS color map for dark.
+- Depth in dark comes from **lighter surface tokens** (`--bg-surface-raised` / `--bg-surface-overlay`),
+  not a heavier shadow.
+- No `dark:` override for a role a token already covers; reserve `dark:` for the property no token
+  expresses, and prefer proposing the token.
+- Every new accent is contrast-checked and desaturated for **both** grounds.
+- A screen is done only after it is verified in **both** themes (`webkit-ui-verify` two-theme
+  screenshots).
+
+## Review output
+
+For `/webkit-theming-dark-mode <file>`, list gaps grouped by element. Each:
+
+```
+✗ WorkloadCard.vue:14  class="bg-white text-zinc-900 border-slate-200"
+  theme: hard-coded light values — dark renders white-on-dark, unreadable.
+  fix: bg-(--bg-surface) text-(--text-default) border-(--border-default)
+```
+
+End with: `theme-safe (both themes)` or `N gaps — fix before verifying`.
+
+## Definition of Done
+
+- [ ] Every color on the screen is a semantic token — zero hex / rgb / palette / one-theme values.
+- [ ] Dark is driven by `data-theme` / `.dark`, not a duplicate stylesheet or JS color branch.
+- [ ] Stacked layers use surface-role tokens; depth reads correctly in dark without heavier shadows.
+- [ ] No `dark:` override stands in for a role a token already carries.
+- [ ] The screen was screenshotted and checked in **both** light and dark before being called done.
diff --git a/.claude/skills/webkit-ui-craft/SKILL.md b/.claude/skills/webkit-ui-craft/SKILL.md
new file mode 100644
index 0000000000..f99cffcd3f
--- /dev/null
+++ b/.claude/skills/webkit-ui-craft/SKILL.md
@@ -0,0 +1,119 @@
+---
+name: webkit-ui-craft
+description: Umbrella entry for building product UI on @aziontech/webkit with taste and PRO UX. Explains the 3 principles and the non-negotiable rules, then routes to the focused skills — mechanics (usage), structure (ux-heuristics, ui-states, form, create-surface, errors, tables, lists, navigation), foundation (baseline-ui), cross-cutting quality (theming-dark-mode, data-viz), polish (motion-polish, impeccable-polish), verification (ui-verify), and adoption (ds-adoption).
+status: active
+last_updated: 2026-08-13
+scope: general
+enforced_by: [webkit-prefer-over-custom, webkit-tokens, webkit-accessibility, ui-verify]
+---
+
+# Skill: webkit-ui-craft
+
+## Purpose
+
+Make UI built **on top of** `@aziontech/webkit` + `@aziontech/theme` look and feel like the design
+system intended: technical, minimal, polished, PRO-UX-first. This is the **map** to a pack of focused
+skills — it carries the shared principles and routes each task to the skill that owns the detail. It
+is for **consuming** apps (composing screens from shipped components and tokens), not for authoring
+webkit primitives.
+
+## How to use
+
+- `/webkit-ui-craft` — apply the principles below to all UI work in this conversation and route to the
+  right child skill for the task at hand.
+- `/webkit-ui-craft <file>` — run the progression as a review: structure (`/webkit-ux-heuristics` →
+  `/webkit-ui-states` → `/webkit-form` → `/webkit-create-surface` → `/webkit-errors` →
+  `/webkit-tables` → `/webkit-lists` → `/webkit-navigation`) → foundation (`/webkit-baseline-ui`) →
+  cross-cutting quality (`/webkit-theming-dark-mode`, `/webkit-data-viz`) → polish
+  (`/webkit-motion-polish` → `/webkit-impeccable-polish`) → verify (`/webkit-ui-verify`). Output each
+  child skill's findings under its own heading.
+
+## The 3 principles
+
+1. **Tech language.** Infrastructure-grade product UI: copy and visuals are precise, calm, and literal
+   — no emoji-as-decoration, no marketing fluff inside the product.
+2. **Minimal and polished.** Remove before you add. Every element earns its place; ornament is the
+   exception that has to justify itself.
+3. **PRO UX first.** Get flow, states, and feedback right before any aesthetic pass. A beautiful
+   screen with a missing empty/error/loading state is not done.
+
+## The non-negotiable rules (detail lives in the owning skill)
+
+1. **Components only** — compose from `@aziontech/webkit`; never hand-roll a button/input/modal/
+   dropdown the system ships. (Find them via the webkit MCP `suggest_component` or
+   `node_modules/@aziontech/webkit/catalog.json`.) See `/webkit-usage`, `/webkit-ds-adoption`.
+2. **Tokens only** — color, typography, shape, spacing, shadow come from `@aziontech/theme`; no hex,
+   `rgb`, `hsl`, or Tailwind palette. See `/webkit-baseline-ui`.
+3. **Typography hierarchy** — only the `text-*` tokens, never inverted (`text-heading-* >
+text-body-* > text-label-* > text-overline-*`). See `/webkit-baseline-ui`.
+4. **Spacing rhythm** — one `--spacing-*` step, applied consistently. See `/webkit-baseline-ui`.
+5. **One content column** — inside a vertical list (nav rail, menu, settings list, any stack of rows),
+   **every row's content starts on the same x**, whatever the row is. A section title's text, a row's
+   leading glyph, and a row with no glyph at all all begin on that one column; a row that reserves a
+   glyph box pads by the column minus the glyph's own centring, so the glyph — not the box — lands on
+   it. Nesting shifts the whole column by exactly one indent step, so the alignment cascades at every
+   depth instead of being re-derived per level.
+   Three things follow, and each is a real bug when skipped:
+   - **Never reserve an empty glyph box.** A box with no glyph in it misreports where the row's
+     content starts: the label sits off the column its siblings hold, and anything drawn from that
+     content (a tree rail, a hover surface) anchors to blank space. Render the box only when there is
+     a glyph.
+   - **Derive the indent from tokens, never a literal.** Hold the step and the column in two custom
+     properties and compute everything else from them, so an elbow or rail cannot come unstuck from
+     the rows it connects. Avoid any `--spacing-*` token that is redefined at a breakpoint — the
+     column would drift as the viewport grows.
+   - **Structure lines live in the gutter, never over a row.** A tree rail, elbow or depth guide
+     stops at the row's box edge — not at its text. The row's hover and selected surfaces fill that
+     box, so a line drawn any further is painted underneath them and reads as a glitch on exactly
+     the states a user interacts with.
+   - **Verify it by measuring, not by looking.** Read the rendered `x` of each row type and assert
+     they are equal, and assert a rail's right edge never exceeds the row surface's left edge. A 4px
+     break is invisible in review and obvious in production.
+6. **Contain the page** — cap reading/content width with `max-w-(--container-*)`, keep
+   data-dense surfaces fluid; never a raw `px`/`rem` width. The full container doctrine (fluid-first
+   shell, focused-flow centering) lives in `/webkit-baseline-ui`.
+7. **Token motion only** — `animate-*` utilities + `duration-*`/`ease-*` tokens, with a
+   `motion-reduce:*` escape; no animation library. See `/webkit-motion-polish`.
+8. **Accessible by construction** — labels, focus, ARIA state, target size. See `/webkit-form`,
+   `/webkit-ui-verify`.
+9. **Works in both themes** — style through role tokens so light and dark need no per-theme edits.
+   See `/webkit-theming-dark-mode`.
+
+> Accessibility is enforced by the shipped `accessibility` rule and verified at runtime by
+> `/webkit-ui-verify` (axe on the rendered screen).
+
+## The progression — route by phase
+
+Run roughly in this order; polish amplifies a sound structure, it can't rescue a broken one.
+
+| Phase      | Goal                                                                                      | Skill                       |
+| ---------- | ----------------------------------------------------------------------------------------- | --------------------------- |
+| Mechanics  | Import path, tokens, tree-shaking                                                         | `/webkit-usage`             |
+| Structure  | Right component + Nielsen heuristics; the 3 states must exist                             | `/webkit-ux-heuristics`     |
+| Structure  | Full loading/empty/error/partial state surface + async scope-lock & toasts                | `/webkit-ui-states`         |
+| Structure  | Accessible forms: fieldset/legend, submit-time required/invalid                           | `/webkit-form`              |
+| Structure  | Where a create lives: page vs drawer, the Advanced band, the commit bar                   | `/webkit-create-surface`    |
+| Structure  | Where a failure goes: the field, a section Message, a toast, the auth card                | `/webkit-errors`            |
+| Structure  | Data tables: data-driven `<Table :data :columns>`, toolbar, internal scroll, cell recipes | `/webkit-tables`            |
+| Structure  | The index page around the table: one band, search vs filters, the chip filter bar         | `/webkit-lists`             |
+| Structure  | The two console shells; one GlobalHeader; user always visible                             | `/webkit-navigation`        |
+| Foundation | Deslop: components-only, tokens-only, hierarchy, rhythm, containers                       | `/webkit-baseline-ui`       |
+| Quality    | Both themes work with zero per-theme edits                                                | `/webkit-theming-dark-mode` |
+| Quality    | Charts mapped to tokens: form by question, palette, anatomy                               | `/webkit-data-viz`          |
+| Polish     | Smooth motion with tokens only                                                            | `/webkit-motion-polish`     |
+| Polish     | The "feels finished" cross-screen sign-off, incl. an earned delight moment                | `/webkit-impeccable-polish` |
+| Verify     | Drive the screen: both themes, widths, console, axe/a11y, states                          | `/webkit-ui-verify`         |
+| Migrate    | Adopt webkit incrementally in an existing app; coverage scorecard                         | `/webkit-ds-adoption`       |
+
+## When to invoke
+
+- Building or reviewing a product screen/flow that consumes `@aziontech/webkit`.
+- The user asks for "polish", "make this feel better", "deslop", "is this good UX", "review this UI".
+- You're about to write UI on top of webkit and want the constraints and the right child skill loaded.
+
+## Definition of Done
+
+- [ ] The right child skill ran for the task (structure before polish).
+- [ ] Every component is from `@aziontech/webkit`; every visual value is a token.
+- [ ] Structure is sound (states, feedback, a11y) before any polish or delight was added.
+- [ ] The screen was verified for real (`/webkit-ui-verify`), not assumed — both themes, no console errors.
diff --git a/.claude/skills/webkit-ui-states/SKILL.md b/.claude/skills/webkit-ui-states/SKILL.md
new file mode 100644
index 0000000000..c3bae2b427
--- /dev/null
+++ b/.claude/skills/webkit-ui-states/SKILL.md
@@ -0,0 +1,401 @@
+---
+name: webkit-ui-states
+description: Every data-backed view in a @aziontech/webkit app declares its full state surface — loading, empty, partial, error, success — not just the happy path, AND behaves correctly while an async action is in flight and when it fails. Use when building or reviewing any screen that fetches, filters, submits, or paginates. Maps each state to the shipped component (Skeleton, EmptyState, Message), locks the scope off one flag while an action runs (trigger :loading + every field :disabled, released in finally), and reports request errors via toast.
+status: active
+last_updated: 2026-07-21
+scope: general
+enforced_by: [webkit-component-states, webkit-prefer-over-custom, ui-verify]
+---
+
+# Skill: webkit-ui-states
+
+## Purpose
+
+Most "unfinished" UI is not a styling problem — it is a missing state or a mishandled async moment.
+A view that fetches renders beautifully with data and breaks with none: a spinner that never
+resolves, a blank panel where an empty result should explain itself, a red toast where an inline
+field error belongs. And the async moments leak just as badly: a submit that stays clickable fires
+twice, a form whose fields stay editable mid-request sends data the user has already changed, a
+request that fails silently leaves the user staring at a spinner that never clears.
+
+This skill fixes **both halves** of a trustworthy data-backed view:
+
+1. **The state surface** every view owns — loading, empty, partial, error, success — each mapped to
+   the `@aziontech/webkit` component that renders it, so the loading/empty/error of every screen
+   looks the same.
+2. **The async behavior** — what happens **while** an action is in flight (lock the scope off one
+   flag) and **when it fails** (report the failure where the user is looking, via toast) — so the
+   screen behaves the same everywhere too.
+
+## How to use
+
+- `/webkit-ui-states` — apply the state matrix **and** the async-behavior contract to any view you
+  build in this conversation.
+- `/webkit-ui-states <file>` — review the file's views and async flows and report, per gap: the
+  quoted line, which state or behavior is missing or mis-handled, and the concrete fix naming the
+  webkit component.
+
+## When to invoke
+
+- Building or reviewing any screen that fetches, filters, submits, paginates, or mutates data.
+- The user asks "handle the empty state", "where do errors go", "why did it submit twice", "the form
+  didn't lock", "handle the API error", "why does the spinner keep spinning after it's done".
+
+## How to find the components
+
+Never guess an import path. Resolve it the same way for every component below:
+
+- Ask the **webkit MCP** — `suggest_component` in plain words ("empty state", "loading placeholder",
+  "toast").
+- Or read **`node_modules/@aziontech/webkit/catalog.json`** — every key under `imports` is a real
+  published subpath. If a subpath is not a key there, it does not exist.
+
+Do **not** rely on a path you saw in another repo file — files move; the catalog and MCP are the
+contract.
+
+## The state matrix — every data-backed view
+
+A view that fetches, filters, submits, or paginates owns **all** of these. Declare each one; a view
+missing any is not done.
+
+| State                                    | When                                            | Render with                                                                               |
+| ---------------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------- |
+| **Loading** (first paint / route enter)  | data is arriving, nothing actionable yet        | `Skeleton` in the shape of the arriving content — reserve the layout so it doesn't reflow |
+| **Loading** (inline / a control is busy) | a button/section is working, the rest is usable | `Spinner` inside the control (or the button's own `loading` prop)                         |
+| **Empty** (no data at all)               | the collection is genuinely empty (first run)   | `EmptyState` — a one-line reason + one clear next action                                  |
+| **Empty** (no results for a filter)      | data exists, the current filter matches nothing | `EmptyState` with a "clear filters" action — distinct copy from first-run empty           |
+| **Partial**                              | some rows loaded, more paging in                | render what arrived + an inline `Spinner`/"load more"; never blank the list               |
+| **Error** (request failed)               | network / 5xx / 4xx not tied to one field       | a `Message` in the view (or a `toast` for a transient action) with what failed + a retry  |
+| **Success** (transient)                  | a mutation completed                            | optional toast; don't leave the user guessing whether it worked                           |
+
+Field-level validation is **not** in this matrix — a bad email or a required value stays inline next
+to the field (see `/webkit-form` and the toast-vs-field boundary below). This skill is about the
+**view's** data states, not a single input's.
+
+## Loading: pick by the direction of the flow
+
+The loading affordances answer different questions and are **not** interchangeable. Pick by the
+**direction** of the flow — data coming _in_ vs. an action going _out_:
+
+- **Reading data _into_ a view → `Skeleton`.** There is nothing for the user to act on yet; the
+  screen is arriving. Reserve the layout with skeletons so it doesn't reflow when the data lands, and
+  do **not** render disabled-but-empty fields as a "loading" state — a disabled empty input reads as
+  broken, not loading.
+- **Committing an action _out_ of a view → the trigger's `loading` + every field `:disabled`.** The
+  screen is already here and the user has committed a payload; lock the scope off one flag (see the
+  next section). Only the busy control shows motion.
+
+Rules of thumb:
+
+- **Never a Skeleton on a form the user is filling.** Filling ≠ loading; a Skeleton over live inputs
+  hides the fields the user is trying to use.
+- **Never a Button spinner while a view is still loading its data.** There's no committed action to
+  reflect — use Skeletons for the content and only show a `:loading` trigger once the user submits.
+- **A view can do both in sequence:** Skeletons while the initial data loads, then Button `:loading`
+  - `:disabled` fields when the user submits the now-populated form. Two different flags, two
+    different affordances.
+
+For **ongoing activity** that is neither first paint nor a committed submit, pick by whether you can
+count the work:
+
+- **Indeterminate / streaming → `Spinner`, low emphasis, always with a label.** "Preparing
+  repository…", "Provisioning… 12s", or the running step in a multi-step list — a `Spinner` beside
+  text, never a bare spinner with no label. Remove it the instant the process settles.
+- **A measurable whole → `ProgressBar` (`:value` / `:max`).** When you can compute "N of M done"
+  (an upload, a deploy with countable phases), show forward motion, not a spinner. Remove it on
+  completion.
+- **Both together only** when you have per-unit liveness _and_ a countable whole (a per-step `Spinner`
+  over an overall `ProgressBar`). Every ongoing affordance clears the moment the flow finishes.
+
+The state-matrix render — Skeleton (data in), then Message / EmptyState / data:
+
+```vue
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue'
+  import Skeleton from '@aziontech/webkit/skeleton'
+  import EmptyState from '@aziontech/webkit/empty-state'
+  import Message from '@aziontech/webkit/message'
+  import Button from '@aziontech/webkit/button'
+
+  type Row = { id: string; name: string }
+  const rows = ref<Row[]>([])
+  const loading = ref(true)
+  const error = ref('')
+
+  const load = async () => {
+    loading.value = true
+    error.value = ''
+    try {
+      rows.value = await fetchRows()
+    } catch (e) {
+      error.value = (e as Error).message
+    } finally {
+      loading.value = false
+    }
+  }
+  onMounted(load)
+</script>
+
+<template>
+  <!-- Loading: reserve the shape of the arriving content -->
+  <div
+    v-if="loading"
+    class="flex flex-col gap-(--spacing-sm)"
+  >
+    <Skeleton
+      kind="shape"
+      width="100%"
+      height="44px"
+    />
+    <Skeleton
+      kind="shape"
+      width="100%"
+      height="44px"
+    />
+    <Skeleton
+      kind="shape"
+      width="100%"
+      height="44px"
+    />
+  </div>
+
+  <!-- Error: located in the view, recoverable -->
+  <Message
+    v-else-if="error"
+    severity="danger"
+    :label="error"
+  >
+    <Button
+      label="Retry"
+      kind="outlined"
+      size="small"
+      @click="load"
+    />
+  </Message>
+
+  <!-- Empty: one reason + one action -->
+  <EmptyState
+    v-else-if="!rows.length"
+    title="No workloads yet"
+    description="Create your first workload to see it here."
+  >
+    <Button
+      label="Create workload"
+      kind="primary"
+      @click="onCreate"
+    />
+  </EmptyState>
+
+  <!-- Success: the data -->
+  <ul
+    v-else
+    class="flex flex-col gap-(--spacing-xs)"
+  >
+    <li
+      v-for="r in rows"
+      :key="r.id"
+    >
+      {{ r.name }}
+    </li>
+  </ul>
+</template>
+```
+
+The trigger for each state comes from the **consuming app** (its data layer / async state). The
+design system ships the _rendering_ of each state; it never fetches. Keep the state flags where the
+app owns them (a `ref`, a store, a query result), and route them to the components above.
+
+## Lock the scope while an action is in flight
+
+While an async action runs, **one boolean drives the whole scope**: the trigger shows `:loading`, and
+**every field the action reads is `:disabled` off that same flag**. Not the button alone — a loading
+button next to editable fields still lets the user change the payload after they committed it.
+
+Why both, off one flag:
+
+- **No double-submit.** `:loading` disables the trigger and shows a spinner; the handler also guards
+  on the flag (`if (submitting.value) return`).
+- **No mid-flight edits.** Disabling the inputs freezes the payload the user just committed.
+- **One source of truth.** A single `ref` flips on entry and off on settle (success _or_ failure), so
+  the button and the fields can never disagree.
+
+```vue
+<script setup>
+  import { ref } from 'vue'
+  import Button from '@aziontech/webkit/button'
+  import InputText from '@aziontech/webkit/input-text'
+  import Select from '@aziontech/webkit/select'
+
+  const submitting = ref(false)
+  const scope = ref('')
+  const repoName = ref('')
+
+  const runDeploy = async () => {
+    // Guard: the flag is also the re-entrancy lock.
+    if (submitting.value) return
+    submitting.value = true
+    try {
+      await deploy({ scope: scope.value, repoName: repoName.value })
+    } finally {
+      // Release on BOTH paths — success and failure — so the scope never stays stuck.
+      submitting.value = false
+    }
+  }
+</script>
+
+<template>
+  <Select
+    v-model="scope"
+    :disabled="submitting"
+  >
+    <Select.Trigger />
+    <Select.Content><!-- options --></Select.Content>
+  </Select>
+  <InputText
+    v-model="repoName"
+    :disabled="submitting"
+  />
+  <Button
+    label="Deploy"
+    kind="primary"
+    :loading="submitting"
+    @click="runDeploy"
+  />
+</template>
+```
+
+Rules:
+
+- **Bind `:loading` and every field's `:disabled` to the same flag.** Never a loading button over
+  live fields.
+- **Guard the handler on the flag** (`if (submitting.value) return`) — `:loading` disabling the
+  button is the visual lock, the guard is the logical one.
+- **Release in `finally`.** The flag must clear on failure too, or a failed request bricks the form.
+- **`:disabled` is not `:loading`.** Only the trigger takes `:loading` (spinner); the fields take
+  `:disabled`. Don't put a spinner on every input.
+
+## Report request/API errors via toast
+
+A request-level failure (network down, 4xx/5xx not tied to one field, "Deploy failed") is a
+**transient, screen-level event** — it surfaces through `@aziontech/webkit/toast`, not by mutating the
+form and not by a silent `console.error`. Mount the region once; raise from anywhere.
+
+```js
+// main.js — mount the region once for the whole app.
+import { ToastPlugin } from '@aziontech/webkit/toast'
+createApp(App).use(router).use(ToastPlugin).mount('#app')
+// ToastPlugin registers <Toaster> globally. (Alternatively: place a single
+// <Toaster /> at the app root and import { toast } directly.)
+```
+
+```vue
+<script setup>
+  import { ref } from 'vue'
+  import { toast } from '@aziontech/webkit/toast'
+
+  const submitting = ref(false)
+
+  const runDeploy = async () => {
+    if (submitting.value) return
+    submitting.value = true
+    try {
+      await deploy()
+      toast.success('Deployment started.')
+    } catch (error) {
+      // Say what failed and how to recover — never just "Error".
+      toast.error('Deployment failed.', {
+        description: error?.message ?? 'Check your connection and try again.',
+        action: { label: 'Retry', onClick: () => runDeploy() }
+      })
+    } finally {
+      submitting.value = false // release the lock from the section above on failure too
+    }
+  }
+</script>
+```
+
+Prefer `toast.promise` when the whole lifecycle maps to one request — it raises a loading toast and
+settles it to success/error in place:
+
+```js
+toast.promise(deploy(), {
+  loading: 'Deploying…',
+  success: 'Deployment started.',
+  error: (e) => `Deployment failed: ${e?.message ?? 'unknown error'}`
+})
+```
+
+Rules:
+
+- **Mount `<Toaster>` exactly once** (via `ToastPlugin` or a single `<Toaster />` at the app root).
+  The store is a singleton — a second region does not duplicate toasts, but there must be one.
+- **Use the typed shortcut for the severity:** `toast.error` for failures, `toast.success` for the
+  happy path, `toast.promise` to track a request end-to-end.
+- **The message is actionable.** State what failed and the recovery; attach an
+  `action: { label, onClick }` (e.g. "Retry") when the user can retry. Never a bare "Error".
+- **Release the lock on error** (the `finally` above) so the toast's Retry actually re-runs.
+
+### The toast-vs-inline-field boundary (do not cross it)
+
+`toast` is for **request / system** errors. **Field validation is not.** A bad email, a missing
+required value, an out-of-range number stays **next to the field** with the field/message components
+(`/webkit-form`, and `/webkit-ux-heuristics` for error placement) — validating before submit is error
+prevention, and it never fires a global toast.
+
+| Failure                                                  | Where it goes                                   |
+| -------------------------------------------------------- | ----------------------------------------------- |
+| Field is invalid / required / malformed                  | inline `field-*` + `message`, next to the field |
+| Request failed (network, 5xx, 4xx not tied to one field) | `toast.error` / `toast.promise`                 |
+| Long request succeeded / started                         | `toast.success` (optional)                      |
+
+Two more rows exist, and both are places a toast is **wrong**: a server rejection **scoped to one
+field** (→ a `Message` in that field's own section + the field's `invalid` state) and anything on a
+**signed-out** screen (→ one `Message` in the card; **auth never toasts**). The inverse case — a
+failure that arrives **after** the user left the screen — is the one that _must_ be a toast, and a
+permanent, closable one. The full table lives in **`/webkit-errors`**.
+
+## Hard rules
+
+- Every fetch/filter/submit/paginate view renders loading **and** empty **and** error — not just the
+  happy path; plus partial where it paginates.
+- First-run empty and no-filter-results empty are **different copy** and different actions.
+- Skeleton for data arriving; the control's own loading for an action leaving. Never a full-page
+  spinner for content that has a shape, and never a Skeleton over a form the user is filling.
+- Every async action locks its scope off **one** flag — trigger `:loading`, every field `:disabled`;
+  the handler guards on the flag and releases it in `finally` (success **and** failure).
+- Request/API errors raise `toast.error` / `toast.promise` with what failed + how to recover;
+  `<Toaster>` is mounted once. Never a silent `console.error`.
+- Hand-rolled "Nothing here" strings or bespoke spinners are forbidden when `EmptyState` / `Skeleton`
+  / `Spinner` exist — resolve them via the MCP/catalog.
+- Field validation is inline (`field-*` + `message`), never in this matrix and never a toast.
+
+## Review output
+
+For `/webkit-ui-states <file>`, list gaps grouped by view / flow. Each:
+
+```
+✗ WorkloadsList.vue:31  v-if="items.length" with no empty/error branch
+  state: Empty + Error missing — a failed or empty fetch renders a blank panel.
+  fix: add EmptyState (reason + Create action) and a Message severity="danger" with Retry.
+
+✗ SomeForm.vue:44  Button :loading="submitting" but fields have no :disabled
+  behavior: Lock the scope — a loading trigger over editable fields lets the payload change mid-request.
+  fix: bind :disabled="submitting" on the Select / InputText / Switch in the same card; guard the handler, release in finally.
+
+✗ api.js:31  catch (e) { console.error(e) }
+  behavior: Report request errors — the failure is silent; the user sees a spinner that never clears.
+  fix: toast.error("Request failed.", { description: e.message, action: { label: "Retry", onClick } }); release the lock in finally.
+```
+
+End with: `states + async sound` or `N gaps — fix before polish`.
+
+## Definition of Done
+
+- [ ] Every data-backed view renders loading, empty, and error — plus partial where it paginates.
+- [ ] Skeleton reserves the arriving layout; controls show their own loading; no blank async panels.
+- [ ] First-run empty ≠ no-results empty (distinct copy + action).
+- [ ] Every async action locks its scope off **one** flag: trigger `:loading`, every field `:disabled`.
+- [ ] The handler guards on the flag and releases it in `finally` (success **and** failure).
+- [ ] `<Toaster>` is mounted once; request/API errors raise `toast.error` / `toast.promise` with what failed + how to recover (Retry where it applies).
+- [ ] Field validation stays inline (`field-*` + `message`) — never a toast.
+- [ ] Every state component came from the MCP/catalog, not a guessed or borrowed path.
diff --git a/.claude/skills/webkit-ui-verify/SKILL.md b/.claude/skills/webkit-ui-verify/SKILL.md
new file mode 100644
index 0000000000..6edf370120
--- /dev/null
+++ b/.claude/skills/webkit-ui-verify/SKILL.md
@@ -0,0 +1,183 @@
+---
+name: webkit-ui-verify
+description: Drive a finished @aziontech/webkit screen in a real browser (Playwright, headless Chromium) and OBSERVE before declaring it done — screenshot both themes at multiple widths, assert zero console errors, run axe-core against the live tree, and exercise the loading/empty/error states and the primary interaction. The runtime a11y gate the accessibility rule defers to: axe on the rendered tree, focus trap/restore observed, live-region announcements. Use as the runtime gate that verifies what the other skills prescribe, before you call any route finished.
+status: active
+last_updated: 2026-07-20
+scope: general
+enforced_by: [ui-verify, webkit-accessibility, webkit-component-states]
+---
+
+# Skill: webkit-ui-verify
+
+## Purpose
+
+The other skills in this pack _prescribe_ — tokens for both themes, a full state surface, WCAG at the
+composition layer, layout across breakpoints. This one _verifies_ they held, by driving the running
+screen in a real browser and looking. A screen "looks done" only in the one theme, one width, and one
+data state you happened to open; the regressions the other skills warn about — a dark-mode-only
+contrast break, an empty fetch that renders a blank panel, a focus that never returns to its trigger,
+a Vue warning in the console — are invisible until something exercises them. This is the executable
+companion to the whole pack: the runtime gate you run **before** calling any route finished.
+
+The method is **reconnaissance, then action** — OBSERVE, never assume. Navigate, screenshot, read the
+live accessibility tree, and let what is actually on the page drive the next step. Do not assert
+against selectors or state you _expect_ to exist; find them, then act.
+
+## How to use
+
+- `/webkit-ui-verify` — run the full pass against the route you just built in this conversation.
+- `/webkit-ui-verify <route-or-file>` — verify a specific route (`/workloads`) or the view a `.vue`
+  file renders; report per finding: what failed, the evidence (console line, axe rule, screenshot),
+  and the fix.
+
+The agent form is **webkit-ui-verifier** — hand it a route and it runs this loop end to end and reports
+back. Either way the loop is the same; only who drives it changes.
+
+## Before you run
+
+- Build/serve the app locally first (`pnpm dev` / `pnpm build && pnpm preview`), and verify the URL
+  responds — the pass drives a **live** server, not a static file.
+- The consumer installs two devDeps: **`playwright`** (the browser) and **`axe-core`** (the a11y
+  engine). Install Chromium once with `npx playwright install chromium`.
+
+## The loop — capture, then assert
+
+Run every route through all four, in both themes and at 2–3 widths. A pass that skipped a theme, a
+width, or a state did not verify the screen.
+
+- **Visual, both themes × widths.** Screenshot in **light** and in `data-theme="dark"`, at **375**,
+  **768**, and **1280** px. This is the check `webkit-theming-dark-mode` and `webkit-baseline-ui`
+  (responsive widths) defer to — two-theme screenshots catch the dark-only regression; multi-width catches the layout that
+  only breaks on a phone. Look at every shot; a saved file is not a passed check.
+- **Console, zero tolerance.** Collect `console` errors, `pageerror`, and `requestfailed` on load
+  **and** during the primary interaction. A Vue warning or a failed request is a **fail**, not noise.
+- **Accessibility (runtime).** This is the executable a11y check **the accessibility rule defers to** —
+  the runtime gate for the behavioral surface lint cannot see. Run **axe-core** against the rendered
+  tree (contrast on real surfaces, names, roles as rendered); any violation is a finding. Then observe
+  the two things axe cannot assert on its own: **focus trap/restore** on overlays (focus moves in on
+  open, stays trapped while open, returns to the trigger on close — see Interaction + focus below), and
+  **live-region announcements** — a status that changes asynchronously (loading, saved, error) must
+  reach an `aria-live` region / webkit status surface, not be conveyed by colour or a silent spinner
+  alone.
+- **States, forced.** Do not wait for the happy path to be the only path. Force **loading** (throttle
+  or delay the request), **empty** (make it return no data), and **error** (make the request fail), and
+  confirm each renders per `webkit-ui-states` — a `Skeleton`, an `EmptyState`, a `Message` — never a
+  blank or broken screen. Intercept with `page.route()` to force empty/error without touching the app:
+
+```js
+await page.route('**/api/workloads', (r) => r.fulfill({ status: 500 })) // error
+await page.route('**/api/workloads', (r) => r.fulfill({ json: [] })) // empty
+```
+
+- **Interaction + focus.** Drive the primary flow — submit the form, open the overlay, paginate — and
+  confirm the action's feedback appears (a toast/message, the new rows) and focus behaves: an overlay
+  **traps** focus while open and **restores** it to the trigger on close (compare
+  `document.activeElement` before open and after close).
+
+## The runtime check
+
+Self-contained Node script — navigate, set the theme before first paint, screenshot both themes at two
+widths, collect console/network problems, and run axe against the live tree. Save it in your app and
+run `node verify.mjs http://localhost:5173/workloads`.
+
+```js
+// verify.mjs — devDeps: playwright, axe-core
+import { chromium } from 'playwright'
+import { createRequire } from 'node:module'
+import { mkdir } from 'node:fs/promises'
+
+const require = createRequire(import.meta.url)
+const axePath = require.resolve('axe-core/axe.min.js')
+
+const url = process.argv[2] ?? 'http://localhost:5173/'
+const themes = ['light', 'dark']
+const widths = [375, 1280] // add 768 for a third breakpoint
+const outDir = 'verify-shots'
+
+await mkdir(outDir, { recursive: true })
+const browser = await chromium.launch() // headless by default
+let failures = 0
+
+for (const theme of themes) {
+  for (const width of widths) {
+    const page = await browser.newPage({ viewport: { width, height: 900 } })
+
+    // A console error, a page error, or a failed request is a FAIL — collect them all.
+    const problems = []
+    page.on('console', (m) => m.type() === 'error' && problems.push(`console: ${m.text()}`))
+    page.on('pageerror', (e) => problems.push(`pageerror: ${e.message}`))
+    page.on('requestfailed', (r) => problems.push(`request: ${r.url()} ${r.failure()?.errorText}`))
+
+    // Set the theme BEFORE the app paints, the way webkit-theming-dark-mode prescribes.
+    await page.addInitScript((t) => {
+      document.documentElement.dataset.theme = t
+    }, theme)
+    await page.goto(url, { waitUntil: 'networkidle' })
+
+    // OBSERVE — screenshot each theme × width; look at every shot afterward.
+    await page.screenshot({ path: `${outDir}/${theme}-${width}.png`, fullPage: true })
+
+    // Runtime a11y — inject axe-core and run it against the live tree.
+    await page.addScriptTag({ path: axePath })
+    const { violations } = await page.evaluate(() => window.axe.run())
+
+    for (const p of problems) (failures++, console.log(`✗ ${theme} @ ${width}px  ${p}`))
+    for (const v of violations)
+      (failures++, console.log(`✗ ${theme} @ ${width}px  axe ${v.id} (${v.impact}): ${v.help}`))
+    if (!problems.length && !violations.length)
+      console.log(`✓ ${theme} @ ${width}px  clean — ${outDir}/${theme}-${width}.png`)
+
+    await page.close()
+  }
+}
+
+await browser.close()
+process.exit(failures ? 1 : 0)
+```
+
+Extend it per route: add `page.route()` calls to force empty/error, and a `userEvent`-style
+`page.click()` / `page.fill()` block to drive the primary flow and re-check console + focus after it.
+
+## Hard rules
+
+- OBSERVE before you assert — screenshot and read the live tree first; never assume a selector or a
+  state is present.
+- Screenshot **both** themes and at **2–3** widths; a single-theme, single-width pass is not a pass.
+- **Zero** console errors on load and on the primary interaction — a Vue warning or a failed request
+  fails the route.
+- Run **axe-core** against the rendered tree; any violation is a finding to fix, not to note.
+- Force loading, empty, and error, and confirm each renders a webkit state component — never a blank or
+  broken screen.
+- Overlays trap focus while open and restore it to the trigger on close; the action's feedback appears.
+- Async status (loading, saved, error) is announced via an `aria-live` region / webkit status surface —
+  not colour or a silent spinner alone.
+- Assert **behavior, console, a11y, and visual snapshots** — never class strings, pixel positions, or
+  animation timing.
+
+## Review output
+
+For `/webkit-ui-verify <route-or-file>`, report the pass as a checklist with the evidence for each:
+
+```
+Route: /workloads
+
+[✓] Visual     light + dark, 375/768/1280 — shots saved, checked
+[✗] Console    dark @ 1280: "[Vue warn] Missing required prop: title"
+[✗] a11y       axe color-contrast (serious): .status-pill text on --bg-surface-raised in dark
+[✗] States     empty fetch → blank panel, no EmptyState rendered
+[✓] Interaction dialog traps + restores focus; success toast appears
+
+fix: pass :label to <Message>; darken the pill text token; add EmptyState to the no-data branch.
+```
+
+End with: `verified — ship` or `N findings — fix before ship`.
+
+## Definition of Done
+
+- [ ] The route was driven in a real headless browser; every screenshot was looked at, not just saved.
+- [ ] Both themes and 2–3 widths captured; no dark-only or narrow-width regression.
+- [ ] Zero console errors / failed requests on load and on the primary interaction.
+- [ ] axe-core run against the live tree with no violations; async status announced via a live region.
+- [ ] Loading, empty, and error each forced and each renders its webkit state component.
+- [ ] Primary flow driven; focus traps + restores; the action's feedback appears.
+- [ ] Wired into CI as a smoke/visual job — this runtime gate runs on every PR, not just locally.
diff --git a/.claude/skills/webkit-usage/SKILL.md b/.claude/skills/webkit-usage/SKILL.md
new file mode 100644
index 0000000000..0ffeefc4c8
--- /dev/null
+++ b/.claude/skills/webkit-usage/SKILL.md
@@ -0,0 +1,101 @@
+---
+name: webkit-usage
+description: Consume the @aziontech/webkit design system correctly. Use when adding or reviewing UI in a project that depends on @aziontech/webkit — how to find the right component, import it with the flat path, style with @aziontech/theme tokens, and keep bundles small.
+scope: general
+status: active
+last_updated: 2026-07-22
+enforced_by: [webkit-imports, webkit-tokens, webkit-prefer-over-custom, webkit-performance]
+---
+
+# Skill: webkit-usage
+
+## Overview
+
+`@aziontech/webkit` is the Azion design system: a set of themed, accessible Vue 3 components. This project depends on it. When you build or review UI here, reach for a webkit component first, import it with the flat path, and style with `@aziontech/theme` tokens. This skill is the paste-safe reference for doing that right.
+
+## How to find a component
+
+Do not guess a component name or import path. Look it up.
+
+1. Ask the webkit MCP. The server exposes tools grounded in the exact webkit version this project installed:
+   - `suggest_component` — describe what you need in plain words; it returns the matching component(s).
+   - Import/validation tools — confirm a subpath is real and get the canonical path.
+2. Read the catalog directly. `node_modules/@aziontech/webkit/catalog.json` has an `imports` object; every key is a real published subpath (`button`, `empty-state`, `table`, ...). If a subpath is not a key there, it does not exist.
+
+## App-level setup (`setup` in the catalog)
+
+A few components need **one-time wiring in the app entry before first use** — the catalog entry (and `get_component` on the MCP) carries it in a `setup` field. When `setup` is non-null, apply it BEFORE emitting code that uses the component, and check whether the project already has it (do not duplicate).
+
+- **Toast**: fire-from-anywhere (`toast.success('Saved')`) only renders if a region is mounted. Wire the service once in the entry — `import { ToastPlugin } from '@aziontech/webkit/toast'` and chain `.use(ToastPlugin)` onto `createApp()`; the plugin mounts the region automatically (options: `app.use(ToastPlugin, { position: 'top-right' })`). A manually mounted Toaster also counts — never add both blindly (the store keeps only the first region active, but one wiring is enough). `npx webkit doctor` flags toast usage with no wired region.
+
+## Must Have
+
+- ✅ Flat import: `import Button from '@aziontech/webkit/button'`.
+- ✅ PascalCase binding matching the last path segment: `@aziontech/webkit/mini-button` -> `MiniButton`.
+- ✅ Color, spacing, radius, and typography from `@aziontech/theme` tokens (`var(--primary)`, `var(--spacing-md)`, `text-button-lg`).
+- ✅ `import '@aziontech/theme'` and `import '@aziontech/icons'` once near the app entry (e.g. `src/main.ts`).
+- ✅ The tree-shakeable `<name>-root` path (or specific sub-components) when you only need the root.
+- ✅ Icons via the `@aziontech/icons` font: side-effect import once (`import '@aziontech/icons'`) + the icon CSS classes.
+- ✅ A webkit component reused instead of a hand-rolled or third-party equivalent.
+
+## Must Not Have
+
+- ❌ Category-prefixed import: `@aziontech/webkit/feedback/skeleton`.
+- ❌ `/src/` or deep-internal imports: `@aziontech/webkit/src/components/...`.
+- ❌ Barrel import: `import { Button } from '@aziontech/webkit'` (no barrel exists).
+- ❌ Binding that disagrees with the path: `import Chip from '@aziontech/webkit/chips'`.
+- ❌ Hardcoded color: `#fff`, `rgb(...)`, `hsl(...)`, `text-[#1e40af]`, or raw Tailwind palette (`bg-blue-600`).
+- ❌ A default/namespace binding of `@aziontech/icons` (`import Icons from '@aziontech/icons'`) — it is a font; import it for side effects only.
+- ❌ A custom Button, Modal, Table, Tooltip, etc. when webkit ships one.
+
+## Common Patterns
+
+### Import + tokens
+
+```vue
+<script setup>
+  import Button from '@aziontech/webkit/button'
+</script>
+
+<template>
+  <Button class="bg-(--primary) text-(--primary-contrast)">Save</Button>
+</template>
+```
+
+### Compound vs tree-shakeable root
+
+`Table` (and other composition components) has two import shapes. Use the narrow one when you can:
+
+```js
+import Table from '@aziontech/webkit/table-root' // root only — smallest
+import TableRow from '@aziontech/webkit/table-row' // one sub-component
+import Table from '@aziontech/webkit/table' // full compound: Table.Row, Table.Cell, ...
+```
+
+### Lazy-load a heavy overlay
+
+```js
+import { defineAsyncComponent } from 'vue'
+
+const Dialog = defineAsyncComponent(() => import('@aziontech/webkit/dialog'))
+```
+
+### App entry (styles + icons)
+
+```ts
+// src/main.ts
+import '@aziontech/theme'
+import '@aziontech/icons'
+```
+
+## Quality Checklist
+
+Before you finish UI work in this project:
+
+- [ ] Every webkit import is flat (`@aziontech/webkit/<name>`), no category, no `/src/`, no barrel.
+- [ ] Every binding is PascalCase of its subpath's last segment.
+- [ ] No hardcoded colors — all color/spacing/typography via `@aziontech/theme` tokens.
+- [ ] Icons imported individually; the whole set is never bulk-imported.
+- [ ] Root-only usage takes the `-root` path; heavy overlays are lazy-loaded.
+- [ ] No custom component reinvents something webkit already provides (checked via MCP or `catalog.json`).
+- [ ] `@aziontech/theme` and `@aziontech/icons` are imported once at the app entry.
diff --git a/.claude/skills/webkit-ux-heuristics/SKILL.md b/.claude/skills/webkit-ux-heuristics/SKILL.md
new file mode 100644
index 0000000000..c17c5bd844
--- /dev/null
+++ b/.claude/skills/webkit-ux-heuristics/SKILL.md
@@ -0,0 +1,102 @@
+---
+name: webkit-ux-heuristics
+description: Component-map discovery pass — for each UX moment (loading→Skeleton, destructive→Dialog confirm, field error→Field*/Message inline, overlay→shipped focus-trap, empty→one action) name the @aziontech/webkit component that already serves it, so the flow is sound before polish. State rendering + async behavior lives in /webkit-ui-states.
+status: active
+last_updated: 2026-07-20
+scope: general
+enforced_by: [webkit-prefer-over-custom, webkit-component-states, webkit-accessibility, review]
+---
+
+# Skill: webkit-ux-heuristics
+
+## Purpose
+
+Get the flow right before it is made to look good. Most UI slop is not a styling problem — it is a
+missing loading state, an error in the wrong place, an empty screen with no next step, or a
+destructive action with no confirmation. This is the **discovery pass**: for each moment in a flow,
+name the `@aziontech/webkit` component that already serves it, so you compose shipped behavior instead
+of hand-rolling it. **Before polish, the flow must be sound.**
+
+Boundary: this skill picks the component per moment. How each state actually **renders** (the loading
+shape, the empty layout, the error affordance) and how **async behavior** sequences belong to
+`/webkit-ui-states`.
+
+## How to use
+
+- `/webkit-ux-heuristics`
+  Apply the component map to any flow you design or build in this conversation.
+- `/webkit-ux-heuristics <file>`
+  Review the file's flow against the map and output, per gap:
+  - the exact line / element (quoted),
+  - the moment it mishandles (1 short sentence),
+  - the concrete fix, naming the webkit component to use.
+
+## When to invoke
+
+- Designing or reviewing a flow, form, list, or screen — **before** `/webkit-baseline-ui` /
+  `/webkit-motion-polish`.
+- The user asks "is this good UX", "what am I missing", "review this flow".
+
+## Component map (the right tool per moment)
+
+Each moment below is a Nielsen heuristic made concrete — the map **is** the checklist. Pick the
+component for the moment; don't re-derive the principle.
+
+| Moment                            | Use                                                                                                                     | Don't                                                 |
+| --------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+| Loading (content vs. inline)      | `@aziontech/webkit/skeleton` for content shape; the control's own loading / `@aziontech/webkit/spinner` for inline busy | a bare full-page spinner for content that has a shape |
+| Destructive / irreversible action | `@aziontech/webkit/dialog` (confirm)                                                                                    | a silent immediate action                             |
+| Field validation error            | `@aziontech/webkit/field-*` + `@aziontech/webkit/message` **next to the field**                                         | a global toast for a field error                      |
+| Page / section status             | `@aziontech/webkit/message`, `@aziontech/webkit/status-indicator`                                                       | inventing a banner                                    |
+| Empty state                       | `@aziontech/webkit/button` for the one next action + a one-line reason it's empty                                       | a dead-end "no results" string                        |
+| Contextual actions / menu         | `@aziontech/webkit/dropdown-menu`                                                                                       | a hand-rolled popover                                 |
+| Side surface                      | `@aziontech/webkit/panel`, `@aziontech/webkit/drawer`                                                                   | a fixed div without focus management                  |
+| Tooltip help                      | `@aziontech/webkit/tooltip`                                                                                             | `title` attribute only                                |
+| Field label                       | `@aziontech/webkit/label`                                                                                               | placeholder-as-label                                  |
+
+Overlays (`dialog`, `drawer`, `dropdown-menu`, `panel`) must trap focus and restore it on close — use
+the **shipped focus-trap composable** (discover its exact import via the MCP / catalog); don't rebuild
+focus/escape behavior by hand.
+
+## Three states every fetch/submit surface needs
+
+- **Loading** — reserve content shape while data arrives; show inline busy on the working control.
+- **Empty** — one clear next action (a `@aziontech/webkit/button`) and a one-line reason it's empty.
+- **Error** — recoverable, located next to the cause, with a retry/fix affordance.
+
+A surface that fetches or submits but is missing any of these three is **not done** — flag it. How each
+one renders, and how the async sequence behaves, lives in `/webkit-ui-states`.
+
+## Hard rules
+
+- Same action → same component, in the same place, with the same label, everywhere. Never two
+  components for one job.
+- Destructive / irreversible → `dialog` confirm; never a silent immediate action.
+- Field errors sit next to the field (`field-*` + `message`); never a global toast for a field-level
+  error.
+- Overlays trap and restore focus via the shipped focus-trap composable; never hand-roll focus/escape.
+- Labels are literal; use `label`, never placeholder-as-label; never block paste.
+- No motion or delight here — this pass is structure only. Defer ornament to `/webkit-motion-polish` /
+  `/webkit-impeccable-polish`.
+- Component discovery is always the webkit MCP `suggest_component` or
+  `node_modules/@aziontech/webkit/catalog.json` (`imports`) — never a source path.
+
+## Review output
+
+For `/webkit-ux-heuristics <file>`, list gaps grouped by moment. Each:
+
+```
+✗ <file>:<line>  delete handler fires immediately on click
+  moment: destructive action — irreversible, no confirmation.
+  fix: wrap in @aziontech/webkit/dialog confirm; primary action "Delete", default focus on Cancel.
+```
+
+End with: `flow sound` or `N gaps — fix before polish`.
+
+## Definition of Done
+
+- [ ] Every moment uses the correct webkit component (see map).
+- [ ] Every fetch/submit surface has loading + empty + error states (rendered per `/webkit-ui-states`).
+- [ ] Destructive actions confirm; field errors sit next to their cause; paste is never blocked.
+- [ ] Overlays trap and restore focus via the shipped focus-trap composable (import resolved via the MCP/catalog).
+- [ ] No motion or delight added here (structure only).
diff --git a/.gitignore b/.gitignore
index e90cd65f14..99c63b6ff4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -45,5 +45,13 @@ sandbox.config.json
 .open-next
 
 # Agent tooling scratch: local settings, launch configs and worktrees.
-.claude/
+# The @aziontech/webkit bundle (rules/skills/agents, installed by `webkit init`) IS
+# versioned — it is shared guidance for the whole team, not local scratch.
+.claude/*
+!.claude/rules/
+!.claude/skills/
+!.claude/agents/
 .codex/
+
+# Intermediate ESLint JSON for the webkit adoption report.
+.eslint-report.json
diff --git a/.mcp.json b/.mcp.json
new file mode 100644
index 0000000000..00f6a2eec5
--- /dev/null
+++ b/.mcp.json
@@ -0,0 +1,13 @@
+{
+  "mcpServers": {
+    "webkit": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "-p",
+        "@aziontech/webkit",
+        "webkit-mcp"
+      ]
+    }
+  }
+}
diff --git a/.stylelintrc.json b/.stylelintrc.json
new file mode 100644
index 0000000000..be556c2d2c
--- /dev/null
+++ b/.stylelintrc.json
@@ -0,0 +1,20 @@
+{
+  "extends": [
+    "@aziontech/webkit/stylelint-config"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "**/*.vue",
+        "**/*.astro"
+      ],
+      "customSyntax": "postcss-html"
+    },
+    {
+      "files": [
+        "**/*.scss"
+      ],
+      "customSyntax": "postcss-scss"
+    }
+  ]
+}
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000000..3a4e212886
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,69 @@
+<!-- @aziontech/webkit -->
+## @aziontech/webkit design system
+
+This project uses the Azion design system. Its guidance is organized in four layers — know which
+layer you're in, because only one of them is optional:
+
+1. **Invariants (always-on, below)** — the non-negotiables. Follow them in every UI change.
+2. **Enforcement (the machine — non-optional)** — ESLint blocks the mechanical invariants at lint/CI;
+   the `webkit` MCP grounds every component choice; the `webkit-ui-verifier` agent checks the rest at
+   runtime (axe, both themes, states). If lint or the verifier fails, the change is not done.
+3. **Skills (on-demand guidance)** — invoke `/webkit-*` skills for how to do a task well.
+4. **Reference (depth)** — `.claude/rules/webkit-*.md` carry the full standards behind the invariants.
+
+### Invariants — always follow
+
+- **Components first.** Reach for an `@aziontech/webkit` component before writing custom UI. Find one
+  via the `webkit` MCP (`suggest_component`) or `node_modules/@aziontech/webkit/catalog.json`.
+- **Flat imports.** `import Button from '@aziontech/webkit/button'` (PascalCase binding = the subpath).
+  Never category-prefixed, `/src/`, deep-internal, or a bare-package barrel.
+- **Tokens only.** Color, typography, shape, spacing come from `@aziontech/theme`
+  (`var(--primary)`, `var(--spacing-md)`, `text-button-lg`) — never hex, `rgb`, `hsl`, or Tailwind palette.
+- **Never restyle a webkit component.** No `class`/`:class`/`style` on its tag — compose inside its
+  slots or use its props.
+- **Styles + theme.** Load `src/webkit.css` once at the app entry — it `@import`s the theme's
+  Tailwind v4 stylesheet (tokens + `@import "tailwindcss"` + fonts) and `@source`s webkit so its
+  component classes compile. Import `webkit.css`, not `@aziontech/theme` bare (the `@source` is what
+  compiles webkit's classes). Light is the default; for dark set `<html data-theme="dark">`.
+- **Accessible & keyboard-operable.** Label every field, keep a visible focus ring, mirror state in
+  ARIA, no click handler without a key handler.
+- **Small bundles.** Prefer the `<name>-root` path (or specific sub-components), import icons
+  individually, lazy-load heavy overlays.
+- **App-level setup at first use.** A few components declare a one-time wiring in their catalog
+  `setup` field (via the MCP's `get_component`). Toast: before the first `toast(...)` call, wire
+  `import { ToastPlugin } from '@aziontech/webkit/toast'` + `.use(ToastPlugin)` on `createApp()`
+  in the entry (the plugin mounts the region automatically); skip if already wired. `webkit doctor`
+  flags usage with missing setup.
+
+### Enforced by lint (blocks — nothing here is a suggestion)
+
+ESLint (`@aziontech/webkit/eslint-plugin` + `vuejs-accessibility`, wired by `webkit init`) fails the
+build on: category-prefixed / deep-internal / barrel imports · hardcoded color · restyling a webkit
+component · a custom element where a webkit component exists · a hand-rolled `modelValue`+`update`
+instead of `defineModel` · a deprecated component · a whole-icon-set import · missing the
+tree-shakeable root · and the static a11y set (alt-text, aria-props, aria-role, click-without-key,
+label-has-for, no-autofocus). The rest — states, motion-reduce, contrast/behavioral a11y, both
+themes, microcopy — is verified at runtime by `/webkit-ui-verify` (the `webkit-ui-verifier` agent
+runs axe + screenshots), and taste is a review concern.
+
+### Skills — invoke for how to build UI well
+
+Start with `/webkit-ui-craft` (the umbrella that routes the rest). Get structure and states right
+before any polish:
+
+- **Structure:** `/webkit-ux-heuristics` (right component per moment) · `/webkit-ui-states` (state surface + async behavior) · `/webkit-form` · `/webkit-create-surface` (where a create lives: page vs drawer, Advanced, the commit bar) · `/webkit-errors` (where a failure goes: field, section Message, toast, auth card) · `/webkit-tables` (data-driven `<Table>` + cell recipes) · `/webkit-lists` (the index page around it + the filter system) · `/webkit-navigation`
+- **Words:** `/webkit-microcopy` (Azion product copy: punctuation, sentence case, label vs message, one word per concept)
+- **Foundation:** `/webkit-baseline-ui` (tokens, hierarchy, containers, responsive widths)
+- **Cross-cutting quality:** `/webkit-theming-dark-mode` · `/webkit-data-viz`
+- **Polish:** `/webkit-motion-polish` · `/webkit-impeccable-polish` (finish + earned delight)
+- **Verify + migrate:** `/webkit-ui-verify` (runtime axe + both themes + states) · `/webkit-ds-adoption`
+
+Mechanics of consuming the package (imports, tokens, tree-shaking) live in `/webkit-usage`.
+
+### Agents — delegate a whole task
+
+`webkit-expert` (which component + how) · `webkit-adopter` (the init/adoption flow) · `webkit-reviewer`
+(review a diff for correct/performant usage) · `webkit-ui-verifier` (drive the screen: both themes,
+widths, console, axe, states) · `webkit-adoption-auditor` (coverage scorecard: custom → webkit).
+
+Full standards behind the invariants: `.claude/rules/webkit-*.md`.
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 2de93c67d8..a51a4d6633 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -70,6 +70,27 @@ export default tseslint.config(
 
 	...webkit.configs.recommended,
 
+	// The webkit preset only applies to the extensions in its own FILES list, which does
+	// not include `.astro` — so our 41 Astro files fall outside every webkit rule. This
+	// block applies the AST-based rules to them until the preset itself covers `.astro`.
+	// `no-style-override` is deliberately absent: it needs vue-eslint-parser's template
+	// visitor, which astro-eslint-parser does not provide.
+	{
+		files: ['**/*.astro'],
+		plugins: { webkit },
+		rules: {
+			'webkit/valid-import-path': 'error',
+			'webkit/no-deep-internal-import': 'error',
+			'webkit/no-barrel-import': 'error',
+			'webkit/no-whole-icon-set-import': 'error',
+			'webkit/no-hardcoded-color': 'error',
+			'webkit/no-hardcoded-motion': 'error',
+			'webkit/no-deprecated-component': 'error',
+			'webkit/prefer-webkit-component': 'error',
+			'webkit/prefer-tree-shakeable-root': 'error',
+		},
+	},
+
 	{
 		files: [
 			'*.{js,mjs,cjs,ts}',

From 51e7a87ecade62e2b8ba56367be43b5fc71098cb Mon Sep 17 00:00:00 2001
From: Isaque Santos <isaque.santos@azion.com>
Date: Thu, 10 Sep 2026 10:10:10 -0300
Subject: [PATCH 2/2] chore(webkit): report design-system adoption on every PR
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The webkit ESLint rules were already configured in this repo and nothing ran
them, so the distance between this codebase and the design system was invisible.
This makes it a number in the run Summary on every PR.

- `scripts/webkit-adoption-report.mjs` reads the ESLint JSON and aggregates only
  `webkit/*` results: totals, a table per rule with what each one catches, the 15
  worst files, and an adoption score (share of `.vue`/`.astro` files with no
  violation — the same "clean files" shape the console-kit architecture report
  uses). Markdown on stdout, progress on stderr, so it redirects cleanly.
- It states what it did *not* look at. `no-style-override` cannot run on
  `.astro`, and raw HTML where a webkit component exists is caught by no rule at
  all — a report that hides its own blind spots is worse than no report. It also
  checks the catalog resolves: without it the plugin silently disables 8 of its
  12 rules, and "clean" would be indistinguishable from "blind".
- `pnpm lint:webkit` / `pnpm report:webkit-adoption`, plus `lint:style` for the
  stylelint config that now exists.
- The CI step is `if: always()` + `continue-on-error: true`: it runs even when a
  step above fails and never turns the check red. `pnpm --silent` matters —
  without it pnpm's own "Already up to date" lands in the Summary.
- `pr-checks.yml` also now runs on PRs to `release/new-azion-docs`. That branch
  is where the new-docs work lands today and it had no CI at all — not build,
  not frontmatter, not title.

Baseline on this branch: 72 `webkit/*` violations in 30 files, 65% of UI files
clean. The largest group is 26 `no-style-override` spread over 17 different
components, and only `frame-box` declares a `styleSeam` in the catalog — so most
of that number is a design-system backlog, not a docs one. One
`valid-import-path` hit is a false positive from our own local patch, which adds
`./use-mounted` to the package exports without it existing in the catalog.

This script is a stopgap. The design system is building a `webkit report`
command that will own this measurement for every consumer; when it lands, the CI
step calls that and this file goes away.
---
 .github/GOVERNANCE.md              |   2 +
 .github/workflows/pr-checks.yml    |  12 ++
 package.json                       |   3 +
 scripts/webkit-adoption-report.mjs | 245 +++++++++++++++++++++++++++++
 4 files changed, 262 insertions(+)
 create mode 100644 scripts/webkit-adoption-report.mjs

diff --git a/.github/GOVERNANCE.md b/.github/GOVERNANCE.md
index d4c228224b..0f3c26f2a5 100644
--- a/.github/GOVERNANCE.md
+++ b/.github/GOVERNANCE.md
@@ -68,6 +68,8 @@ AI-assisted PRs follow the same rules as any other. The author, not the agent, i
 
 On every PR: the site builds, frontmatter namespaces and permalinks are present and unique, and the PR title matches the convention. A broken build or a duplicate permalink blocks the merge.
 
+On every PR, informational only: a **webkit adoption report** runs the design-system ESLint rules over the UI and writes the result to the run Summary — how many `webkit/*` violations there are, which rules, which files, and what the check did *not* look at. It never blocks the merge. It exists so the distance between this codebase and the design system is a number someone can watch, instead of something noticed in review.
+
 Weekly: a link check crawls the built site for broken internal links and opens an issue when it finds them.
 
 Everything else in this document is a convention that reviewers uphold, which is how most of it will always work.
diff --git a/.github/workflows/pr-checks.yml b/.github/workflows/pr-checks.yml
index 001534daad..9f2d182ec7 100644
--- a/.github/workflows/pr-checks.yml
+++ b/.github/workflows/pr-checks.yml
@@ -3,6 +3,8 @@ on:
   pull_request:
     branches:
       - main
+      # The new-docs work lands here first, so PRs to it need the same checks.
+      - release/new-azion-docs
     types: [opened, synchronize, reopened]
 
 concurrency:
@@ -39,3 +41,13 @@ jobs:
         run: pnpm build:local
         env:
           NODE_OPTIONS: --max-old-space-size=8120
+
+      # Design-system adoption: measured, never enforced. The report lands in the run
+      # Summary; `if: always()` so it still appears when a step above fails, and
+      # `continue-on-error` so a red number never blocks the PR.
+      - name: Webkit adoption report
+        if: always()
+        continue-on-error: true
+        run: |
+          pnpm lint:webkit
+          pnpm --silent report:webkit-adoption >> "$GITHUB_STEP_SUMMARY"
diff --git a/package.json b/package.json
index ee4a4a5382..4f7ab9a094 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,9 @@
     "nav:migrate": "tsm --require=./scripts/lib/filter-warnings.cjs ./scripts/nav/migrate-permalinks.ts",
     "nav:retarget": "tsm --require=./scripts/lib/filter-warnings.cjs ./scripts/nav/retarget-links.ts",
     "lint:eslint": "eslint .",
+    "lint:style": "stylelint \"src/**/*.{css,scss,vue,astro}\"",
+    "lint:webkit": "eslint . -f json -o .eslint-report.json || true",
+    "report:webkit-adoption": "node scripts/webkit-adoption-report.mjs .eslint-report.json",
     "translation-status": "tsm --require=./scripts/lib/filter-warnings.cjs ./scripts/translation-status.ts",
     "cp-doc-helpcenter": "cp -R ../docs_help_center/* src/includes/help_center/en/",
     "test:frontmatter": "node test-frontmatter.js"
diff --git a/scripts/webkit-adoption-report.mjs b/scripts/webkit-adoption-report.mjs
new file mode 100644
index 0000000000..49a333e42d
--- /dev/null
+++ b/scripts/webkit-adoption-report.mjs
@@ -0,0 +1,245 @@
+#!/usr/bin/env node
+// Aggregates an ESLint JSON report into a design-system adoption report.
+//
+// Reads only `webkit/*` rule results — everything else in the ESLint output belongs to
+// other concerns. Markdown goes to stdout so the caller can redirect it straight into
+// $GITHUB_STEP_SUMMARY; progress and warnings go to stderr.
+//
+//   node scripts/webkit-adoption-report.mjs .eslint-report.json [--format markdown|json]
+//
+// This is a stopgap: the design system is building a `webkit report` command that will
+// own this measurement for every consumer. When it lands, the CI step calls that instead
+// and this file goes away.
+
+import { readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+
+/** Extensions the design system governs — the denominator of the adoption score. */
+const UI_EXTENSIONS = new Set(['vue', 'astro']);
+
+const RULE_PURPOSE = {
+	'webkit/valid-import-path': 'import path that does not exist in the installed version',
+	'webkit/no-deep-internal-import': 'reaches into `@aziontech/webkit/src/` internals',
+	'webkit/no-barrel-import': 'bare-package barrel import (the package has no barrel)',
+	'webkit/no-whole-icon-set-import': 'pulls the whole icon set instead of one icon',
+	'webkit/no-hardcoded-color': 'hardcoded colour, palette class or raw text size',
+	'webkit/no-hardcoded-motion': 'literal duration/easing, or motion without `motion-reduce:`',
+	'webkit/prefer-tree-shakeable-root': 'compound entry imported where the root would do',
+	'webkit/no-deprecated-component': 'component marked deprecated in the catalog',
+	'webkit/prefer-webkit-component': 'foreign UI library where webkit has an equivalent',
+	'webkit/prefer-define-model': 'hand-rolled `modelValue` + `update:modelValue` pair',
+	'webkit/no-style-override': '`class`/`style` on a webkit component — restyling it',
+	'webkit/authoring-standards': 'shared authoring standards (typed slots, comments, …)',
+};
+
+function parseArgs(argv) {
+	const args = argv.slice(2);
+	const file = args.find((a) => !a.startsWith('--'));
+	const formatIndex = args.indexOf('--format');
+	const format = formatIndex === -1 ? 'markdown' : args[formatIndex + 1];
+	if (!file) {
+		process.stderr.write(
+			'usage: node scripts/webkit-adoption-report.mjs <eslint-report.json> [--format markdown|json]\n',
+		);
+		process.exit(1);
+	}
+	if (format !== 'markdown' && format !== 'json') {
+		process.stderr.write(`unknown --format "${format}" (expected markdown or json)\n`);
+		process.exit(1);
+	}
+	return { file, format };
+}
+
+/** The installed catalog is what the rules validate against — name the version we measured. */
+function readCatalog() {
+	try {
+		const path = require.resolve('@aziontech/webkit/catalog.json');
+		const catalog = JSON.parse(readFileSync(path, 'utf-8'));
+		return { available: true, version: catalog.webkitVersion ?? null };
+	} catch {
+		return { available: false, version: null };
+	}
+}
+
+function extensionOf(filePath) {
+	const base = filePath.split('/').pop() ?? '';
+	const dot = base.lastIndexOf('.');
+	return dot === -1 ? '' : base.slice(dot + 1);
+}
+
+function collect(results, cwd) {
+	const byRule = new Map();
+	const byFile = new Map();
+	const byExtension = new Map();
+	const uiFiles = new Set();
+	let total = 0;
+
+	for (const result of results) {
+		const relative = result.filePath.startsWith(cwd)
+			? result.filePath.slice(cwd.length + 1)
+			: result.filePath;
+		const extension = extensionOf(relative);
+		if (UI_EXTENSIONS.has(extension)) uiFiles.add(relative);
+
+		for (const message of result.messages) {
+			if (!message.ruleId?.startsWith('webkit/')) continue;
+			total += 1;
+			byRule.set(message.ruleId, (byRule.get(message.ruleId) ?? 0) + 1);
+			byExtension.set(extension, (byExtension.get(extension) ?? 0) + 1);
+			const entry = byFile.get(relative) ?? { count: 0, rules: new Set() };
+			entry.count += 1;
+			entry.rules.add(message.ruleId);
+			byFile.set(relative, entry);
+		}
+	}
+
+	const dirtyUiFiles = [...byFile.keys()].filter((f) => UI_EXTENSIONS.has(extensionOf(f)));
+	// Same shape as the architecture report in azion-console-kit: share of files that are
+	// clean, not of violations. One file with 20 findings weighs the same as one with 1.
+	const score =
+		uiFiles.size === 0 ? 100 : Math.round((1 - dirtyUiFiles.length / uiFiles.size) * 100);
+
+	return {
+		total,
+		filesAffected: byFile.size,
+		uiFilesTotal: uiFiles.size,
+		uiFilesClean: uiFiles.size - dirtyUiFiles.length,
+		score,
+		byRule: [...byRule.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])),
+		byExtension: [...byExtension.entries()].sort((a, b) => b[1] - a[1]),
+		byFile: [...byFile.entries()]
+			.map(([file, entry]) => ({ file, count: entry.count, rules: [...entry.rules].sort() }))
+			.sort((a, b) => b.count - a.count || a.file.localeCompare(b.file)),
+	};
+}
+
+function statusFor(score) {
+	if (score === 100) return 'every UI file clean';
+	if (score >= 90) return 'close';
+	if (score >= 75) return 'needs work';
+	return 'far from it';
+}
+
+function renderMarkdown(report, catalog) {
+	const lines = [];
+	const push = (line = '') => lines.push(line);
+
+	push('## Webkit adoption');
+	push();
+
+	if (!catalog.available) {
+		push(
+			'> **The webkit catalog could not be resolved, so 8 of the 12 rules silently did nothing.** ' +
+				'This report is not a clean bill of health — install `@aziontech/webkit` or set ' +
+				'`WEBKIT_CATALOG_PATH`, then run it again.',
+		);
+		push();
+	}
+
+	const version = catalog.version ? `\`@aziontech/webkit@${catalog.version}\`` : 'unknown version';
+	push(`Measured against ${version}.`);
+	push();
+	push('| | |');
+	push('|---|---|');
+	push(`| Violations | **${report.total}** |`);
+	push(`| Files affected | ${report.filesAffected} |`);
+	push(
+		`| UI files clean | ${report.uiFilesClean} of ${report.uiFilesTotal} — **${report.score}%** (${statusFor(report.score)}) |`,
+	);
+	push();
+
+	if (report.total === 0) {
+		push('No `webkit/*` violations. Read the coverage note below before celebrating.');
+	} else {
+		push('### By rule');
+		push();
+		push('| Rule | Count | What it catches |');
+		push('|---|---:|---|');
+		for (const [rule, count] of report.byRule) {
+			const purpose = RULE_PURPOSE[rule] ?? '—';
+			push(`| \`${rule.replace('webkit/', '')}\` | ${count} | ${purpose} |`);
+		}
+		push();
+
+		push('### By file');
+		push();
+		push('| File | Count | Rules |');
+		push('|---|---:|---|');
+		const shown = report.byFile.slice(0, 15);
+		for (const { file, count, rules } of shown) {
+			const ruleList = rules.map((r) => `\`${r.replace('webkit/', '')}\``).join(', ');
+			push(`| \`${file}\` | ${count} | ${ruleList} |`);
+		}
+		if (report.byFile.length > shown.length) {
+			push();
+			push(`_${report.byFile.length - shown.length} more file(s) not shown._`);
+		}
+		push();
+	}
+
+	push('### Coverage — what this did and did not look at');
+	push();
+	const extensions = report.byExtension.length
+		? report.byExtension.map(([ext, n]) => `\`.${ext}\` (${n})`).join(', ')
+		: 'none';
+	push(`- Violations found in: ${extensions}.`);
+	push(
+		`- The adoption score counts ${[...UI_EXTENSIONS].map((e) => `\`.${e}\``).join(' and ')} files only — ` +
+			'those are the ones the design system governs.',
+	);
+	push(
+		'- `no-style-override` does **not** run on `.astro`: it needs vue-eslint-parser\'s template ' +
+			'visitor, which astro-eslint-parser does not provide. Restyled webkit components inside ' +
+			'Astro files are invisible here.',
+	);
+	push(
+		'- Raw HTML where a webkit component exists (`<button>`, `<input>`, a hand-rolled modal) is ' +
+			'caught by **no rule at all** — `prefer-webkit-component` only matches imports from a ' +
+			'foreign package. That gap is tracked in the design system.',
+	);
+	push();
+	push('This check never fails the build. It measures.');
+
+	return lines.join('\n') + '\n';
+}
+
+function main() {
+	const { file, format } = parseArgs(process.argv);
+	const catalog = readCatalog();
+
+	process.stderr.write(`Reading ${file}…\n`);
+	let results;
+	try {
+		results = JSON.parse(readFileSync(file, 'utf-8'));
+	} catch (error) {
+		process.stderr.write(`Could not read the ESLint report at ${file}: ${error.message}\n`);
+		process.stderr.write('Run `pnpm lint:webkit` first — it writes the JSON this script reads.\n');
+		process.exit(1);
+	}
+	if (!Array.isArray(results)) {
+		process.stderr.write(`${file} is not an ESLint JSON report (expected an array).\n`);
+		process.exit(1);
+	}
+
+	if (!catalog.available) {
+		process.stderr.write(
+			'WARNING: could not resolve @aziontech/webkit/catalog.json — the catalog-backed rules ' +
+				'were disabled during the lint, so this report undercounts.\n',
+		);
+	}
+
+	const report = collect(results, process.cwd());
+	process.stderr.write(
+		`${report.total} webkit/* violation(s) in ${report.filesAffected} file(s); adoption ${report.score}%.\n`,
+	);
+
+	process.stdout.write(
+		format === 'json'
+			? JSON.stringify({ webkitVersion: catalog.version, ...report }, null, 2) + '\n'
+			: renderMarkdown(report, catalog),
+	);
+}
+
+main();