diff --git a/AGENTS.md b/AGENTS.md
index 615f10f..064eaca 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -22,13 +22,30 @@ Resolve references inside either skill relative to its own directory. Hosts
 should point agents to `packages/ui/AGENTS.md`; they do not need to copy,
 forward, symlink, or separately register these skills under `.agents/skills`.
 
-## Enforcement is three layers
+## Enforcement is three layers (plus one narrow fourth)
 
 | Layer | Where | Role |
 |---|---|---|
 | **Tokens** | `src/style.css` (`@theme inline` / `:root` / `.dark`) | the ONLY place raw values live |
 | **This contract** | `packages/ui/AGENTS.md` | the rules + rationale |
-| **Guard** | `scripts/check-ui-contract.mjs` (wired into `mise run lint`) | mechanical block on drift |
+| **Guard** | the HOST repo's `scripts/check-ui-contract.mjs` (wired into `mise run lint`) | mechanical block on drift |
+| **DOM tests** | `src/**/__tests__/*.test.ts` (`pnpm test`) | only for promises the three above CANNOT see |
+
+The guard lives in the **consuming repository**, not here — it scans `packages/ui`
+and `apps/web` together and keeps its ratchet baselines beside itself, so
+`node scripts/check-ui-contract.mjs` does not run from a standalone clone of
+this module. Its rules are still binding on every line written here; run it from
+the host before landing anything, and add new rules there (§ Extending this
+contract).
+
+The fourth layer is **deliberately tiny and must stay that way.** All three
+layers above read SOURCE TEXT, which makes them structurally blind to exactly
+one defect class: a composition that type-checks, whose class strings are all
+legal, but whose RENDERED DOM puts them on the wrong element. `<Button as-child>`
+shipped that bug for its entire life (see § `as-child` below). A test earns its
+place here only when it pins a contract promise about **which element carries
+what** — not to re-check styling the guard already reads, and never as a
+general-purpose component test suite.
 
 ## Compose, don't style — the one principle (locality)
 
@@ -123,6 +140,47 @@ that lacks it keeps re-introducing the same class of bug.
   `[data-state=open]`) — Select, Dropdown, Popover and ghost triggers must not each pick their
   own, or they read as "fighting" (the recurring TextButton-vs-Select hover mismatch).
 
+## `as-child` — anything you render beside the slot STEALS the merge
+
+A fifth invisible mechanic, and the one that cost the most: reka's `Slot` (what
+`Primitive` renders when `asChild` is true) merges the component's props into
+**the first non-comment child it receives** — then returns the remaining
+children untouched. It does not look for "the caller's element"; it takes
+whatever is first.
+
+**So a component that forwards `asChild` must render `<slot/>` and NOTHING
+else in that branch.** One wrapper span is enough to break it completely: the
+wrapper becomes "first", absorbs the class list and every `data-*` anchor, and
+the caller's `<a>` / `<RouterLink>` renders as bare text inside it. If the
+wrapper is `display: contents` — the usual "layout-transparent" trick — the
+failure is *silent*: the classes are present in the DOM, DevTools shows them
+attached, and none of them produce a box. Nothing type-checks wrong, no class
+string is illegal, and the guard reads source text so it sees nothing.
+
+This is exactly what `<Button as-child>` did from the day its
+`data-button-content` wrapper was introduced: `inline-flex` / `h-9` / `px-4` /
+`rounded-md` all landed on the contents span, and `[data-button]` — the anchor
+EVERY hover/press/focus rule in `style.css` keys off — went with them, taking
+the `::before` fill's positioning ancestor along. `<TextButton as-child>` and
+`<BreadcrumbLink as-child>`, both documented as the way to wrap a RouterLink,
+inherited the same break. Pinned now by `src/components/button/__tests__`.
+
+Corollaries when you build or touch an `asChild`-forwarding component:
+
+- **Two directions, only one is fragile.** `<Trigger as-child><Button/></Trigger>`
+  (a reka trigger wrapping our Button — Pagination, `DialogCloseButton`,
+  NumberField steppers) is fine: the Button component vnode is itself the first
+  child, so it receives the merge and renders normally. The fragile direction is
+  a component's OWN `asChild`, where its template decides what "first" is.
+- **A capability that needs an injected node cannot survive `as-child`** — the
+  caller owns the element, so there is nowhere to put the node. Degrade it
+  explicitly and say so (Button's `loading` falls back to `loadingMode="manual"`
+  and warns in dev), never silently.
+- **Inheritance-chain tricks usually become unnecessary, not broken.** Button's
+  wrapper also forwarded `[gap:inherit]` so a nested `LabelSwap` could read the
+  button's gap; under `as-child` the gap utility is on the caller's element,
+  which IS the parent, so the value arrives directly.
+
 ## Three laws
 
 1. **Everything is a token.** No raw `#hex` / `rgb()` / `oklch()` / `color-mix()`
@@ -280,6 +338,92 @@ stashing whole features behind an in-card "Advanced" disclosure, or re-skinning
 list row (`Item` / the app-layer `BackendCard`) whose meaning is "one of many
 peers", not "one door to somewhere else".
 
+### "Nothing here yet" = `<Empty>`, and its frame is a PROP
+
+An empty state is the SAME page with no rows in it, so it keeps the frame its
+populated form has. Which frame that is depends entirely on where it sits, and
+both placements are documented — so the choice is an enumerated prop, never a
+class a page injects:
+
+- **`variant="framed"` (default)** — the standalone empty. It stands IN FOR the
+  card or grid that appears once data exists, so it draws that surface's frame:
+  one **solid** `border-border` hairline at the Card radius (`rounded-xl`, the
+  § Radius role map's container rung — the empty and the card it replaces must
+  share a corner, or a half-loaded page shows two different rounds).
+- **`variant="bare"`** — nested inside a surface that already frames it (a
+  `SettingsSection`, a `Card`). A second hairline there is card-in-card: two
+  strokes on one visual unit, the § The one rule violation.
+
+**`border-dashed` is not an empty-state look at any rung.** Dashed reads "drop
+zone / add here" and is reserved for the "+ Add another" tile that sits BESIDE
+real items in an already-populated list. And no decorative icon: an
+`EmptyMedia variant="icon"` tile carries its own border, so it is card-in-card
+too (web SKILL § empty states).
+
+(Historical note, because the bug is instructive: this component shipped
+`rounded-lg border-dashed` for its whole life. `border-dashed` sets
+border-*style* only — with no width the edge never rendered, so every standalone
+empty was centered gray text floating in whitespace, and nobody noticed because
+the class string *looked* like it framed something. Adding a bare `border` would
+have "fixed" it into the dashed look the contract bans.)
+
+### Alert vs CalloutBanner — semantic through TEXT vs through SURFACE
+
+Both report a state; they are split by **which layer carries the hue**, and
+mixing them is how a system ends up with two competing looks for one message.
+
+- **`<Alert>`** = a neutral framed message reporting the RESULT of something the
+  surface just did (a connectivity probe, a validation pass). Every variant
+  keeps the same `bg-background` + `border-border` frame; only the title and the
+  icon take the hue — one layer changing in place, § The one rule. Four rungs:
+  `default` / `success` / `warning` / `destructive`. **A result rendered as
+  `default` is an unlabelled result** — success and failure must be
+  distinguishable before the copy is read.
+- **`<CalloutBanner>`** = the tinted, interruptive lifecycle notice with its own
+  action. It owns the soft-token triplet (`--*-soft` fill + `--*-border` edge +
+  colored icon). Do not rebuild that look on an Alert by injecting `bg-*` /
+  `border-*`.
+
+**Token rung, and why it is not symmetric across hues:** `--destructive`
+(L≈0.58) is dark enough to be body text on the page surface; `--success`
+(L≈0.62) and `--warning` (L≈0.72) are icon/fill hues and are not. Their
+readable-text rung is `--*-foreground` — exactly the role that token was minted
+for, and the one `CalloutBanner` already uses. Do not "unify" success/warning
+onto the base hue to match destructive: that trades legibility for a symmetry
+the palette deliberately does not have. (`--*-solid-foreground` is the other
+direction — text ON a filled chip — and never applies to a neutral-framed
+alert.)
+
+### Machine text in a field = `Textarea variant="code"`
+
+A field holding JSON / YAML / a config blob / a prompt template declares that
+through a prop; `class="font-mono"` on a `<Textarea>` is the className red line
+(§ Compose, don't style). `variant` is a content ROLE, not a skin — it currently
+resolves to the mono family plus a tracking reset (the base +0.01em is prose
+tracking for the sans stack; stacking it on a monospace's already-wide advance
+makes columns drift), and it is where future code-surface affordances (tab-size,
+no-wrap) land instead of being re-derived per page. Orthogonal to `size`.
+
+Vocabulary note: `Badge`'s `font: sans | mono` axis is a pure family switch on a
+chip carrying a technical value. Same typeface, different question — do not
+merge the two axes.
+
+### A wrapper must forward `aria-*` to the element that carries the ROLE
+
+When a component wraps the element that owns its ARIA role — because the outer
+node exists for chrome (a sliding indicator, a measurement box) — default Vue
+attribute fallthrough parks the caller's `aria-label` on the WRAPPER, where no
+screen reader will ever read it. That failure is worse than no label: the audit
+tool goes green while the control stays anonymous.
+
+So such a component splits `$attrs` deliberately (`inheritAttrs: false`):
+`aria-*` to the role-bearing inner element, everything else (id, style,
+listeners) to the wrapper — plus a named `label` prop as the discoverable
+spelling. `TabsList` is the reference implementation (its root hosts the
+underline/thumb; `role="tablist"` is on the inner reka list). Applies to any
+future indicator-wrapping component; a page must never have to know the
+component has two nodes.
+
 ## Reference status (new vs legacy)
 
 > Confirm / extend this list with the maintainer before treating anything as gospel.
@@ -291,9 +435,13 @@ peers", not "one door to somewhere else".
   PinInput, InputOTP, TagsInput (mid-refactor — their pre-refactor code is a
   textbook § Dirty patterns exhibit; check it in git, do not copy the in-flight
   state).
-- **Legacy (do NOT use as reference):** Badge, Alert (semantic fills) — and any
-  component not listed as Reference above. When in doubt, ask; do not
-  pattern-match off legacy.
+- **Legacy (do NOT use as reference):** Badge — and any component not listed as
+  Reference above. When in doubt, ask; do not pattern-match off legacy. (Alert
+  came off this list when its variant axis was legislated above: the frame is
+  now neutral in all four rungs and only the text layer carries the hue. Its one
+  remaining wart is `destructive`'s `text-destructive/90` description tint, a
+  hand-written alpha grandfathered by § Alpha policy — the newer rungs
+  deliberately do not copy it.)
 - **`components/sidebar/` (do NOT copy its styling):** the entire directory (23
   files) is an unmigrated shadcn-vue import — it hand-rolls its own button
   chrome and a separate focus-ring vocabulary instead of the Button/field-edge
@@ -302,6 +450,13 @@ peers", not "one door to somewhere else".
   `check-ui-contract.mjs` oklch-leftover rule). Production usage is limited to
   `settings-sidebar` (via `master-detail-sidebar-layout` → `settings-section` /
   `bots/detail.vue`). Copy patterns from the Reference list, not from here.
+  - **`SidebarMenuButton`'s `tooltip` is ONLY effective under
+    `<Sidebar collapsible="icon">`.** It is gated on `state === 'collapsed'`,
+    and under `collapsible="offcanvas"` (the default) a collapsed sidebar is
+    slid off the viewport entirely — there is no visible trigger to hover, so
+    the tooltip can never render. It is suppressed on mobile too (the sidebar
+    is a Sheet there; hover does not exist). Passing one anywhere else is dead
+    copy that reads like shipped a11y text and reaches nobody.
 
 ## Color
 
@@ -785,6 +940,27 @@ pass with `node scripts/check-ui-contract.mjs --write-baseline`.
   static (fades even at the scroll ends); use this. Nest `AutoHeight` INSIDE
   it, never the other way (AutoHeight can't scroll, DialogBody can't clip a
   height tween).
+- **`SheetPanel` / `SheetBody` — the same law, on the other surface.** A form
+  drawer is a header / scrolling body / footer stack, and before these existed
+  every call site reassembled it by hand. The shape it converged on names each
+  missing contract: `sm:max-w-lg` (a width the page had to invent), `gap-0`
+  (undoing the component's own gap), `border-b`/`border-t` injected onto
+  `SheetHeader`/`SheetFooter` (a structural border painted on from outside —
+  dirty pattern 2), `flex-row` to turn the stacked mobile-nav footer into an
+  action row, `w-[calc(100%-1rem)]` (the narrow-screen width, re-derived per
+  page), and `class="contents"` wrappers whose only job was flattening the
+  author's markup back into the flow the shell should have owned. `SheetPanel`
+  owns all of it. Knobs: `width` (`sm`/`md`/`lg`/`xl` — add a rung HERE, never
+  a per-page `sm:max-w-[…]`), `side` (`left`/`right` only — the row grid is a
+  vertical stack, which a top/bottom sheet does not want), `footer` (adds the
+  third row AND its top hairline; a prop rather than slot-sniffing for
+  DialogPanel's reasons, plus a declared-but-empty row would still draw a stray
+  divider). `SheetBody` is the scrolling middle row; unlike `DialogBody` it needs
+  no `-mr-3 pr-3` gutter hack, because the sheet's padding lives on the body
+  itself so the scrollbar already lands on the panel edge. Field rhythm inside
+  stays `FieldGroup`'s job — one owner per concern. A bare `SheetContent` is
+  still right for a single flowing surface (mobile nav) that has nothing to
+  divide.
 - **`DialogViewHeader` — back / title / close on ONE centerline.** For a
   dialog that swaps views (list ↔ drill-in form) or any header where the
   built-in corner close (`top-3`) would sit off the title's centerline. Pair
@@ -822,6 +998,14 @@ rules 5/6/7 run as HARD failures. Tokens added in that pass:
 
 Remaining (non-blocking) TODOs:
 
+- **Rule debt: the guard does not detect `font-*` injection.** "A page does not
+  inject appearance classes into a component" is enforced for `bg-*` /
+  `border-*` / `shadow-*` / raw color / arbitrary radius / text-coupled px /
+  semantic alpha — but `class="font-mono"` (and `font-[NNN]`, already called out
+  in `skills/web/reference.md` as the single most common app-page drift) sails
+  through. `Textarea variant="code"` removes the last legitimate reason to write
+  it in this library; adding the detection is a host-side guard rule, and it
+  needs a ratchet baseline first because `apps/web` has existing hits.
 - Toggle `tint` active uses `--brand` (consider an accent token).
 - Dark-mode accent palette + elevation currently inherit light values.
 - SegmentedControl disabled uses CSS `opacity: 0.5`; the contract says 40 — unify
diff --git a/package.json b/package.json
index a307742..3974f4c 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",
-    "type-check": "vue-tsc --build"
+    "type-check": "vue-tsc --build",
+    "test": "vitest run"
   },
   "dependencies": {
     "@internationalized/date": "^3.12.2",
@@ -46,7 +47,9 @@
     "@types/node": "^25.9.5",
     "@vitejs/plugin-vue": "^6.0.8",
     "@vue/language-core": "^3.2.1",
+    "@vue/test-utils": "^2.4.11",
     "@vue/tsconfig": "^0.9.1",
+    "happy-dom": "^20.11.1",
     "misans-vf": "1.0.0",
     "npm-run-all2": "^8.0.4",
     "tsx": "^4.21.0",
@@ -55,6 +58,7 @@
     "unplugin-dts": "1.0.0-beta.6",
     "vite": "^8.1.5",
     "vite-plugin-vue-devtools": "^8.2.1",
+    "vitest": "^4.1.10",
     "vue-tsc": "^3.3.8"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 58961ab..d62d12d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -72,9 +72,15 @@ importers:
       '@vue/language-core':
         specifier: ^3.2.1
         version: 3.3.7
+      '@vue/test-utils':
+        specifier: ^2.4.11
+        version: 2.4.11(@vue/compiler-dom@3.5.39)(@vue/server-renderer@3.5.39(vue@3.5.39(typescript@6.0.3)))(vue@3.5.39(typescript@6.0.3))
       '@vue/tsconfig':
         specifier: ^0.9.1
         version: 0.9.1(typescript@6.0.3)(vue@3.5.39(typescript@6.0.3))
+      happy-dom:
+        specifier: ^20.11.1
+        version: 20.11.1
       misans-vf:
         specifier: 1.0.0
         version: 1.0.0
@@ -99,6 +105,9 @@ importers:
       vite-plugin-vue-devtools:
         specifier: ^8.2.1
         version: 8.2.1(vite@8.1.5(@types/node@25.9.5)(esbuild@0.28.1)(jiti@2.7.0)(tsx@4.23.0))(vue@3.5.39(typescript@6.0.3))
+      vitest:
+        specifier: ^4.1.10
+        version: 4.1.10(@types/node@25.9.5)(happy-dom@20.11.1)(vite@8.1.5(@types/node@25.9.5)(esbuild@0.28.1)(jiti@2.7.0)(tsx@4.23.0))
       vue-tsc:
         specifier: ^3.3.8
         version: 3.3.8(typescript@6.0.3)
@@ -431,6 +440,10 @@ packages:
   '@internationalized/number@3.6.7':
     resolution: {integrity: sha512-3ji1fcrT+FPAK86UqEhB/psHixYo6niWPJtt7+qRaYFynt/BaJG8GhAPimtWUpEiVSTq8ZM8L5psMxGquiB/Vg==}
 
+  '@isaacs/cliui@8.0.2':
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -466,9 +479,16 @@ packages:
       '@emnapi/core': ^1.7.1
       '@emnapi/runtime': ^1.7.1
 
+  '@one-ini/wasm@0.1.1':
+    resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
+
   '@oxc-project/types@0.139.0':
     resolution: {integrity: sha512-r9gHphtCs+1M7J0pw6Sn/hh/Wpa/iQrOOkrNAlVLF/gHq+/CJmHIWKKUUhdWjcD6CIa8idarspCsASiXCXvFUw==}
 
+  '@pkgjs/parseargs@0.11.0':
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
@@ -609,6 +629,9 @@ packages:
   '@rushstack/ts-command-line@5.3.10':
     resolution: {integrity: sha512-fwI076HYknC0IrMXdY6UmjDv+PH7NHhNJX3/pY2UblSE5XrXgndXZPiOe/6ZtuFpn6DvVDVNhtkIzQ+Qu/MhVQ==}
 
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
   '@swc/helpers@0.5.23':
     resolution: {integrity: sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==}
 
@@ -733,6 +756,12 @@ packages:
   '@types/argparse@1.0.38':
     resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
 
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
   '@types/estree@1.0.9':
     resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
 
@@ -742,6 +771,12 @@ packages:
   '@types/web-bluetooth@0.0.21':
     resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
+  '@types/whatwg-mimetype@3.0.2':
+    resolution: {integrity: sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==}
+
+  '@types/ws@8.18.1':
+    resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
+
   '@vee-validate/zod@4.15.1':
     resolution: {integrity: sha512-329Z4TDBE5Vx0FdbA8S4eR9iGCFFUNGbxjpQ20ff5b5wGueScjocUIx9JHPa79LTG06RnlUR4XogQsjN4tecKA==}
     peerDependencies:
@@ -754,6 +789,35 @@ packages:
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
       vue: ^3.2.25
 
+  '@vitest/expect@4.1.10':
+    resolution: {integrity: sha512-YsCn+qAk1GWjQOWFEsEcL2gNQ0zmVmQu3T03qP6UyjhtmdtwtbuI+DASn/7iQB3HGTXkdBwGddzxPlmiql5vlA==}
+
+  '@vitest/mocker@4.1.10':
+    resolution: {integrity: sha512-v0xaezt+DKEmKfaxg133ldzADrwLGd7Ze1MfQQTYfvs8OqZIwbxyxaYURivwV7sWy5fqn3rH5uOrSp07bp44Ow==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@4.1.10':
+    resolution: {integrity: sha512-W1HsjSH4MXQ9YfmmhLAoIYf1HRfekQCGngeIgcei6MP5QQGWUe0gkopdZQaVCFO+JDJMrAJGwa5pRpNpvy4P8Q==}
+
+  '@vitest/runner@4.1.10':
+    resolution: {integrity: sha512-IKI6kpIH+LmpROplyLwBBaCfMgOZOMsygVa6BARD6ahA04VRuJSa6OaVG7kRvSEMD870Vd91rSSw0eegtWyLGg==}
+
+  '@vitest/snapshot@4.1.10':
+    resolution: {integrity: sha512-xRkfOT1qpTAi/Ti4Y1LtfRc3kEuqxGw59eN2jN9pRWMtS/XDevekhcFSqvQqjUNGksfjMJu3Y+oJ+4Ypn2OaJw==}
+
+  '@vitest/spy@4.1.10':
+    resolution: {integrity: sha512-PLf/Ugvoq5wO/b4rwYCR1h2PSIdXz7wnkQFMiUpLdtM7l6pqVFcQIBEHyT1+l+cj7mNwAfZHzqXqDyjvOuwbDw==}
+
+  '@vitest/utils@4.1.10':
+    resolution: {integrity: sha512-fy9am/HWxbaGt/Sawrp90vt6Y6jQwf1RX77cz3uwoJwJVMli/e1IEwRPnMNJ7vKfPTwo0diXifkpPvwH9v7nGA==}
+
   '@volar/language-core@2.4.28':
     resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==}
 
@@ -834,6 +898,16 @@ packages:
   '@vue/shared@3.5.39':
     resolution: {integrity: sha512-l1rrBtBfTnmxvtsvdQDXltUUy8S1Y+ZaqdfUzmAnJkTd8Z8rv5v/ytW+TKiqEOWyHPoqtPlNFSs0lhRmYVSHVA==}
 
+  '@vue/test-utils@2.4.11':
+    resolution: {integrity: sha512-GDqaqZsA6m2E5vNzej0aYiIb6BX8xV9pNSbbbXKOfEYwg7ZNblVX8suyqmUBThq8VIrgAJNxn+z72hVtUeiWHA==}
+    peerDependencies:
+      '@vue/compiler-dom': 3.x
+      '@vue/server-renderer': 3.x
+      vue: 3.x
+    peerDependenciesMeta:
+      '@vue/server-renderer':
+        optional: true
+
   '@vue/tsconfig@0.9.1':
     resolution: {integrity: sha512-buvjm+9NzLCJL29KY1j1991YYJ5e6275OiK+G4jtmfIb+z4POywbdm0wXusT9adVWqe0xqg70TbI7+mRx4uU9w==}
     peerDependencies:
@@ -867,6 +941,10 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
+  abbrev@2.0.0:
+    resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
   acorn@8.17.0:
     resolution: {integrity: sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==}
     engines: {node: '>=0.4.0'}
@@ -894,6 +972,18 @@ packages:
   alien-signals@3.2.1:
     resolution: {integrity: sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g==}
 
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+    engines: {node: '>=12'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
   ansi-styles@6.2.3:
     resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
     engines: {node: '>=12'}
@@ -909,6 +999,13 @@ packages:
     resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
     engines: {node: '>=10'}
 
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
   balanced-match@4.0.4:
     resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
     engines: {node: 18 || 20 || >=22}
@@ -924,6 +1021,9 @@ packages:
   birpc@4.0.0:
     resolution: {integrity: sha512-LShSxJP0KTmd101b6DRyGBj57LZxSDYWKitQNW/mi8GRMvZb078Uf9+pveax1DrVL89vm7mWe+TovdI/UDOuPw==}
 
+  brace-expansion@2.1.3:
+    resolution: {integrity: sha512-DRdx5neNsG/QXbniLFWi2YmC/68oeOOmKz6zOjVk6ZS1ZLXgLIKqVEc6hWsmkjBbgii0SwaBTcJ5XKj5gzY/4A==}
+
   brace-expansion@5.0.7:
     resolution: {integrity: sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==}
     engines: {node: 18 || 20 || >=22}
@@ -933,6 +1033,10 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
+  buffer-image-size@0.6.4:
+    resolution: {integrity: sha512-nEh+kZOPY1w+gcCMobZ6ETUp9WfibndnosbpwB1iJk/8Gt5ZF2bhS6+B6bPYz424KtwsR6Rflc3tCz1/ghX2dQ==}
+    engines: {node: '>=4.0'}
+
   bundle-name@4.1.0:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
     engines: {node: '>=18'}
@@ -940,6 +1044,10 @@ packages:
   caniuse-lite@1.0.30001803:
     resolution: {integrity: sha512-g/uHREV2ZpK9qMalCsWaxmA6ol+DX8GYhuf3T40RKoP+oL7vhRJh8LNt73PCjpnR6l14FzfPrB5Yux4PKm2meg==}
 
+  chai@6.2.2:
+    resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
+    engines: {node: '>=18'}
+
   class-variance-authority@0.7.1:
     resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
@@ -947,6 +1055,17 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  commander@10.0.1:
+    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
+    engines: {node: '>=14'}
+
   compare-versions@6.1.1:
     resolution: {integrity: sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==}
 
@@ -956,6 +1075,9 @@ packages:
   confbox@0.2.4:
     resolution: {integrity: sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==}
 
+  config-chain@1.1.13:
+    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -1002,9 +1124,23 @@ packages:
     resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
     engines: {node: '>=0.3.1'}
 
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
+  editorconfig@1.0.7:
+    resolution: {integrity: sha512-e0GOtq/aTQhVdNyDU9e02+wz9oDDM+SIOQxWME2QRjzRX5yyLAuHDE+0aE8vHb9XRC8XD37eO2u57+F09JqFhw==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   electron-to-chromium@1.5.389:
     resolution: {integrity: sha512-cEto7aeOqBfU1D+c5py5pE+ooscKE75JifxLBdFUZsqAxRS6y7kebtxAZvICszSl05gPjYHDTjY+lXpyGvpJbg==}
 
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
   enhanced-resolve@5.24.3:
     resolution: {integrity: sha512-PwKooW9JUzh5chmYfHM3IQl5OkK2u2Nm011MgeZrss3JmFraUx/fqrf78kk8GUMYoibx/14MdwTl/1WKkG7TpQ==}
     engines: {node: '>=10.13.0'}
@@ -1020,6 +1156,9 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
+  es-module-lexer@2.3.1:
+    resolution: {integrity: sha512-shc1dbU90Yl/xq1QrC7QRtfcwURZuVRfPhZbDoldJ1cn1gzDvBaBWlv0eFolj5+0znnPJz5TXLxsN77X/12KTA==}
+
   esbuild@0.28.1:
     resolution: {integrity: sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==}
     engines: {node: '>=18'}
@@ -1032,6 +1171,13 @@ packages:
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
+  expect-type@1.4.0:
+    resolution: {integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==}
+    engines: {node: '>=12.0.0'}
+
   exsolve@1.1.0:
     resolution: {integrity: sha512-D+42+T12DdIlJM3uepa55qGiL3sYdLBOxIl2ifQCzCHz4c7eiolaHsi3BIqEr7JxBzxv2pYZQX9kw16ziMcEmw==}
 
@@ -1050,6 +1196,10 @@ packages:
       picomatch:
         optional: true
 
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+
   fs-extra@11.3.6:
     resolution: {integrity: sha512-w8ZNZr2mKIc7qeNaQ9AVPT1+iFaI+Avd4xudVOvdDJ8VytREi1Ft5Ih7hd9jjehod8vAM5GMsfQ/TpPf4EyoEA==}
     engines: {node: '>=14.14'}
@@ -1066,9 +1216,18 @@ packages:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
+  glob@10.5.0:
+    resolution: {integrity: sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
+    hasBin: true
+
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
+  happy-dom@20.11.1:
+    resolution: {integrity: sha512-XSt8tMzbW9ymE7687xztkO1ckR7qJNQ3LywY9vlYGhGi3zXrGBHuUo2Cl1ztZaICW+1eAGdkLbj6iwVqDT33kg==}
+    engines: {node: '>=20.0.0'}
+
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -1084,6 +1243,9 @@ packages:
     resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==}
     engines: {node: '>=8'}
 
+  ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+
   is-core-module@2.16.2:
     resolution: {integrity: sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==}
     engines: {node: '>= 0.4'}
@@ -1093,6 +1255,10 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     hasBin: true
 
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
   is-in-ssh@1.0.0:
     resolution: {integrity: sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==}
     engines: {node: '>=20'}
@@ -1117,6 +1283,9 @@ packages:
     resolution: {integrity: sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==}
     engines: {node: '>=18'}
 
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
   jiti@2.7.0:
     resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
     hasBin: true
@@ -1124,6 +1293,14 @@ packages:
   jju@1.4.0:
     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
 
+  js-beautify@1.15.4:
+    resolution: {integrity: sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  js-cookie@3.0.8:
+    resolution: {integrity: sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw==}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -1228,6 +1405,9 @@ packages:
     resolution: {integrity: sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==}
     engines: {node: '>=14'}
 
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
@@ -1248,6 +1428,14 @@ packages:
     resolution: {integrity: sha512-Rwi3pnapEqirPSbWbrZaa6N3nmqq4Xer/2XooiOKyV3q12ML06f7MOuc5DVH8ONZIFhwIYQ3yzPH4nt7iWHaTg==}
     engines: {node: 18 || 20 || >=22}
 
+  minimatch@9.0.9:
+    resolution: {integrity: sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minipass@7.1.3:
+    resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   misans-vf@1.0.0:
     resolution: {integrity: sha512-ALfVKfNNnSdTEmeVf/901hRWy6UjBRjnhwVflI/a7WiEkXBJKG8c1vjlK8r62RzHK834YuOArMJkqoA5w41mPg==}
 
@@ -1281,6 +1469,11 @@ packages:
     resolution: {integrity: sha512-J6l92tKHX6w8Jy5nO1Vuc01NoIiRGi/d6qBKVxh+IQ8Cr3b6HbVNfKiF8ZpFKufTwpwxMmce2W3iQZ861ZRyTg==}
     engines: {node: '>=18'}
 
+  nopt@7.2.1:
+    resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    hasBin: true
+
   npm-normalize-package-bin@4.0.0:
     resolution: {integrity: sha512-TZKxPvItzai9kN9H/TkmCtx/ZN/hvr3vUycjlfmH0ootY9yFBzNOpiXAdIn1Iteqsvk4lQn6B5PTrt+n6h8k/w==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -1301,6 +1494,9 @@ packages:
     resolution: {integrity: sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw==}
     engines: {node: '>=20'}
 
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
   path-browserify@1.0.1:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
 
@@ -1311,6 +1507,10 @@ packages:
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
@@ -1350,6 +1550,9 @@ packages:
     resolution: {integrity: sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==}
     engines: {node: '>=20'}
 
+  proto-list@1.2.4:
+    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
+
   quansync@0.2.11:
     resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
 
@@ -1404,6 +1607,13 @@ packages:
     resolution: {integrity: sha512-Iov+JwFv/2HcTpcwNMKd8+IWNb8tboQJNQTkAY/LLVK7gGH9jy+LGkVqPxfekHl+yMmiqXszdGWXgkfml7hjqA==}
     engines: {node: '>= 0.4'}
 
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
   sirv@3.0.2:
     resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
     engines: {node: '>=18'}
@@ -1423,10 +1633,32 @@ packages:
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  std-env@4.2.0:
+    resolution: {integrity: sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==}
+
   string-argv@0.3.2:
     resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
     engines: {node: '>=0.6.19'}
 
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.2.0:
+    resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
+    engines: {node: '>=12'}
+
   superjson@2.2.6:
     resolution: {integrity: sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==}
     engines: {node: '>=16'}
@@ -1449,10 +1681,21 @@ packages:
     resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
     engines: {node: '>=6'}
 
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@1.2.4:
+    resolution: {integrity: sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==}
+    engines: {node: '>=18'}
+
   tinyglobby@0.2.17:
     resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
     engines: {node: '>=12.0.0'}
 
+  tinyrainbow@3.1.1:
+    resolution: {integrity: sha512-yau8yJdTt989Mm0Bd/236QnzEiPf2xLLTqUZRUJOo/3CB078LSwzei343DgtJVmfJKJE3TMINY1u42SQsP6mXw==}
+    engines: {node: '>=14.0.0'}
+
   totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
@@ -1615,9 +1858,53 @@ packages:
       yaml:
         optional: true
 
+  vitest@4.1.10:
+    resolution: {integrity: sha512-R9jUTe5S4Qb0HCd4TNqpC7oGcrMssMRGXLW80ubjWsW9VH5GF8y1Y0SFLY9AbqSk6nt0PnOx4H4WNJYZ13GUPw==}
+    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@opentelemetry/api': ^1.9.0
+      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 4.1.10
+      '@vitest/browser-preview': 4.1.10
+      '@vitest/browser-webdriverio': 4.1.10
+      '@vitest/coverage-istanbul': 4.1.10
+      '@vitest/coverage-v8': 4.1.10
+      '@vitest/ui': 4.1.10
+      happy-dom: '*'
+      jsdom: '*'
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
+      '@vitest/coverage-istanbul':
+        optional: true
+      '@vitest/coverage-v8':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
   vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
+  vue-component-type-helpers@3.3.8:
+    resolution: {integrity: sha512-troqCMmQodQDqUqn63NQaFi+CDSclSe7sc8VEBFqf5GFLqmGR2Ph3P2WEC7qwpRVyEWsTi/aAr4vyOe/B1hU3g==}
+
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
@@ -1651,6 +1938,10 @@ packages:
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
+  whatwg-mimetype@3.0.0:
+    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
+    engines: {node: '>=12'}
+
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -1661,6 +1952,31 @@ packages:
     engines: {node: ^18.17.0 || >=20.5.0}
     hasBin: true
 
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
+  ws@8.21.1:
+    resolution: {integrity: sha512-+0NTnW77fFN/DjQi6k/Sq/Yvk4Sgajw7urW8V+asjXnRgDs9gyGkdb7EzgfhA4goXsRIZKE28fzIXBHEzhuiWw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   wsl-utils@0.3.1:
     resolution: {integrity: sha512-g/eziiSUNBSsdDJtCLB8bdYEUMj4jR7AGeUo96p/3dTafgjHhpF4RiCFPiRILwjQoDXx5MqkBr4fwWtR3Ky4Wg==}
     engines: {node: '>=20'}
@@ -1988,6 +2304,15 @@ snapshots:
     dependencies:
       '@swc/helpers': 0.5.23
 
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.2.0
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -2049,8 +2374,13 @@ snapshots:
       '@tybys/wasm-util': 0.10.3
     optional: true
 
+  '@one-ini/wasm@0.1.1': {}
+
   '@oxc-project/types@0.139.0': {}
 
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
+
   '@polka/url@1.0.0-next.29': {}
 
   '@rolldown/binding-android-arm64@1.1.5':
@@ -2149,6 +2479,8 @@ snapshots:
     transitivePeerDependencies:
       - '@types/node'
 
+  '@standard-schema/spec@1.1.0': {}
+
   '@swc/helpers@0.5.23':
     dependencies:
       tslib: 2.8.1
@@ -2244,6 +2576,13 @@ snapshots:
 
   '@types/argparse@1.0.38': {}
 
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
+  '@types/deep-eql@4.0.2': {}
+
   '@types/estree@1.0.9': {}
 
   '@types/node@25.9.5':
@@ -2252,6 +2591,12 @@ snapshots:
 
   '@types/web-bluetooth@0.0.21': {}
 
+  '@types/whatwg-mimetype@3.0.2': {}
+
+  '@types/ws@8.18.1':
+    dependencies:
+      '@types/node': 25.9.5
+
   '@vee-validate/zod@4.15.1(vue@3.5.39(typescript@6.0.3))(zod@3.25.76)':
     dependencies:
       type-fest: 4.41.0
@@ -2266,6 +2611,47 @@ snapshots:
       vite: 8.1.5(@types/node@25.9.5)(esbuild@0.28.1)(jiti@2.7.0)(tsx@4.23.0)
       vue: 3.5.39(typescript@6.0.3)
 
+  '@vitest/expect@4.1.10':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@types/chai': 5.2.3
+      '@vitest/spy': 4.1.10
+      '@vitest/utils': 4.1.10
+      chai: 6.2.2
+      tinyrainbow: 3.1.1
+
+  '@vitest/mocker@4.1.10(vite@8.1.5(@types/node@25.9.5)(esbuild@0.28.1)(jiti@2.7.0)(tsx@4.23.0))':
+    dependencies:
+      '@vitest/spy': 4.1.10
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 8.1.5(@types/node@25.9.5)(esbuild@0.28.1)(jiti@2.7.0)(tsx@4.23.0)
+
+  '@vitest/pretty-format@4.1.10':
+    dependencies:
+      tinyrainbow: 3.1.1
+
+  '@vitest/runner@4.1.10':
+    dependencies:
+      '@vitest/utils': 4.1.10
+      pathe: 2.0.3
+
+  '@vitest/snapshot@4.1.10':
+    dependencies:
+      '@vitest/pretty-format': 4.1.10
+      '@vitest/utils': 4.1.10
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
+  '@vitest/spy@4.1.10': {}
+
+  '@vitest/utils@4.1.10':
+    dependencies:
+      '@vitest/pretty-format': 4.1.10
+      convert-source-map: 2.0.0
+      tinyrainbow: 3.1.1
+
   '@volar/language-core@2.4.28':
     dependencies:
       '@volar/source-map': 2.4.28
@@ -2414,6 +2800,15 @@ snapshots:
 
   '@vue/shared@3.5.39': {}
 
+  '@vue/test-utils@2.4.11(@vue/compiler-dom@3.5.39)(@vue/server-renderer@3.5.39(vue@3.5.39(typescript@6.0.3)))(vue@3.5.39(typescript@6.0.3))':
+    dependencies:
+      '@vue/compiler-dom': 3.5.39
+      js-beautify: 1.15.4
+      vue: 3.5.39(typescript@6.0.3)
+      vue-component-type-helpers: 3.3.8
+    optionalDependencies:
+      '@vue/server-renderer': 3.5.39(vue@3.5.39(typescript@6.0.3))
+
   '@vue/tsconfig@0.9.1(typescript@6.0.3)(vue@3.5.39(typescript@6.0.3))':
     optionalDependencies:
       typescript: 6.0.3
@@ -2449,6 +2844,8 @@ snapshots:
     dependencies:
       vue: 3.5.39(typescript@6.0.3)
 
+  abbrev@2.0.0: {}
+
   acorn@8.17.0: {}
 
   ajv-draft-04@1.0.0(ajv@8.18.0):
@@ -2468,6 +2865,14 @@ snapshots:
 
   alien-signals@3.2.1: {}
 
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.2.2: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
   ansi-styles@6.2.3: {}
 
   ansis@4.3.1: {}
@@ -2480,6 +2885,10 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  assertion-error@2.0.1: {}
+
+  balanced-match@1.0.2: {}
+
   balanced-match@4.0.4: {}
 
   baseline-browser-mapping@2.10.42: {}
@@ -2488,6 +2897,10 @@ snapshots:
 
   birpc@4.0.0: {}
 
+  brace-expansion@2.1.3:
+    dependencies:
+      balanced-match: 1.0.2
+
   brace-expansion@5.0.7:
     dependencies:
       balanced-match: 4.0.4
@@ -2500,24 +2913,43 @@ snapshots:
       node-releases: 2.0.50
       update-browserslist-db: 1.2.3(browserslist@4.28.5)
 
+  buffer-image-size@0.6.4:
+    dependencies:
+      '@types/node': 25.9.5
+
   bundle-name@4.1.0:
     dependencies:
       run-applescript: 7.1.0
 
   caniuse-lite@1.0.30001803: {}
 
+  chai@6.2.2: {}
+
   class-variance-authority@0.7.1:
     dependencies:
       clsx: 2.1.1
 
   clsx@2.1.1: {}
 
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  commander@10.0.1: {}
+
   compare-versions@6.1.1: {}
 
   confbox@0.1.8: {}
 
   confbox@0.2.4: {}
 
+  config-chain@1.1.13:
+    dependencies:
+      ini: 1.3.8
+      proto-list: 1.2.4
+
   convert-source-map@2.0.0: {}
 
   copy-anything@4.0.5:
@@ -2551,8 +2983,21 @@ snapshots:
 
   diff@8.0.4: {}
 
+  eastasianwidth@0.2.0: {}
+
+  editorconfig@1.0.7:
+    dependencies:
+      '@one-ini/wasm': 0.1.1
+      commander: 10.0.1
+      minimatch: 9.0.9
+      semver: 7.7.4
+
   electron-to-chromium@1.5.389: {}
 
+  emoji-regex@8.0.0: {}
+
+  emoji-regex@9.2.2: {}
+
   enhanced-resolve@5.24.3:
     dependencies:
       graceful-fs: 4.2.11
@@ -2564,6 +3009,8 @@ snapshots:
 
   es-errors@1.3.0: {}
 
+  es-module-lexer@2.3.1: {}
+
   esbuild@0.28.1:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.28.1
@@ -2597,6 +3044,12 @@ snapshots:
 
   estree-walker@2.0.2: {}
 
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.9
+
+  expect-type@1.4.0: {}
+
   exsolve@1.1.0: {}
 
   fast-deep-equal@3.1.3: {}
@@ -2607,6 +3060,11 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.5
 
+  foreground-child@3.3.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
   fs-extra@11.3.6:
     dependencies:
       graceful-fs: 4.2.11
@@ -2620,8 +3078,30 @@ snapshots:
 
   gensync@1.0.0-beta.2: {}
 
+  glob@10.5.0:
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.9
+      minipass: 7.1.3
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
+
   graceful-fs@4.2.11: {}
 
+  happy-dom@20.11.1:
+    dependencies:
+      '@types/node': 25.9.5
+      '@types/whatwg-mimetype': 3.0.2
+      '@types/ws': 8.18.1
+      buffer-image-size: 0.6.4
+      entities: 7.0.1
+      whatwg-mimetype: 3.0.0
+      ws: 8.21.1
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   has-flag@4.0.0: {}
 
   hasown@2.0.4:
@@ -2632,12 +3112,16 @@ snapshots:
 
   import-lazy@4.0.0: {}
 
+  ini@1.3.8: {}
+
   is-core-module@2.16.2:
     dependencies:
       hasown: 2.0.4
 
   is-docker@3.0.0: {}
 
+  is-fullwidth-code-point@3.0.0: {}
+
   is-in-ssh@1.0.0: {}
 
   is-inside-container@1.0.0:
@@ -2654,10 +3138,26 @@ snapshots:
 
   isexe@3.1.5: {}
 
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
   jiti@2.7.0: {}
 
   jju@1.4.0: {}
 
+  js-beautify@1.15.4:
+    dependencies:
+      config-chain: 1.1.13
+      editorconfig: 1.0.7
+      glob: 10.5.0
+      js-cookie: 3.0.8
+      nopt: 7.2.1
+
+  js-cookie@3.0.8: {}
+
   js-tokens@4.0.0: {}
 
   jsesc@3.1.0: {}
@@ -2731,6 +3231,8 @@ snapshots:
       pkg-types: 2.3.1
       quansync: 0.2.11
 
+  lru-cache@10.4.3: {}
+
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -2749,6 +3251,12 @@ snapshots:
     dependencies:
       brace-expansion: 5.0.7
 
+  minimatch@9.0.9:
+    dependencies:
+      brace-expansion: 2.1.3
+
+  minipass@7.1.3: {}
+
   misans-vf@1.0.0: {}
 
   mitt@3.0.1: {}
@@ -2772,6 +3280,10 @@ snapshots:
 
   node-releases@2.0.50: {}
 
+  nopt@7.2.1:
+    dependencies:
+      abbrev: 2.0.0
+
   npm-normalize-package-bin@4.0.0: {}
 
   npm-run-all2@8.0.4:
@@ -2798,12 +3310,19 @@ snapshots:
       powershell-utils: 0.1.0
       wsl-utils: 0.3.1
 
+  package-json-from-dist@1.0.1: {}
+
   path-browserify@1.0.1: {}
 
   path-key@3.1.1: {}
 
   path-parse@1.0.7: {}
 
+  path-scurry@1.11.1:
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.3
+
   pathe@2.0.3: {}
 
   perfect-debounce@1.0.0: {}
@@ -2842,6 +3361,8 @@ snapshots:
 
   powershell-utils@0.1.0: {}
 
+  proto-list@1.2.4: {}
+
   quansync@0.2.11: {}
 
   read-package-json-fast@4.0.0:
@@ -2911,6 +3432,10 @@ snapshots:
 
   shell-quote@1.9.0: {}
 
+  siginfo@2.0.0: {}
+
+  signal-exit@4.1.0: {}
+
   sirv@3.0.2:
     dependencies:
       '@polka/url': 1.0.0-next.29
@@ -2925,8 +3450,32 @@ snapshots:
 
   sprintf-js@1.0.3: {}
 
+  stackback@0.0.2: {}
+
+  std-env@4.2.0: {}
+
   string-argv@0.3.2: {}
 
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.2.0
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.2.0:
+    dependencies:
+      ansi-regex: 6.2.2
+
   superjson@2.2.6:
     dependencies:
       copy-anything: 4.0.5
@@ -2943,11 +3492,17 @@ snapshots:
 
   tapable@2.3.3: {}
 
+  tinybench@2.9.0: {}
+
+  tinyexec@1.2.4: {}
+
   tinyglobby@0.2.17:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.5)
       picomatch: 4.0.5
 
+  tinyrainbow@3.1.1: {}
+
   totalist@3.0.1: {}
 
   tslib@2.8.1: {}
@@ -3082,8 +3637,38 @@ snapshots:
       jiti: 2.7.0
       tsx: 4.23.0
 
+  vitest@4.1.10(@types/node@25.9.5)(happy-dom@20.11.1)(vite@8.1.5(@types/node@25.9.5)(esbuild@0.28.1)(jiti@2.7.0)(tsx@4.23.0)):
+    dependencies:
+      '@vitest/expect': 4.1.10
+      '@vitest/mocker': 4.1.10(vite@8.1.5(@types/node@25.9.5)(esbuild@0.28.1)(jiti@2.7.0)(tsx@4.23.0))
+      '@vitest/pretty-format': 4.1.10
+      '@vitest/runner': 4.1.10
+      '@vitest/snapshot': 4.1.10
+      '@vitest/spy': 4.1.10
+      '@vitest/utils': 4.1.10
+      es-module-lexer: 2.3.1
+      expect-type: 1.4.0
+      magic-string: 0.30.21
+      obug: 2.1.3
+      pathe: 2.0.3
+      picomatch: 4.0.5
+      std-env: 4.2.0
+      tinybench: 2.9.0
+      tinyexec: 1.2.4
+      tinyglobby: 0.2.17
+      tinyrainbow: 3.1.1
+      vite: 8.1.5(@types/node@25.9.5)(esbuild@0.28.1)(jiti@2.7.0)(tsx@4.23.0)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 25.9.5
+      happy-dom: 20.11.1
+    transitivePeerDependencies:
+      - msw
+
   vscode-uri@3.1.0: {}
 
+  vue-component-type-helpers@3.3.8: {}
+
   vue-demi@0.14.10(vue@3.5.39(typescript@6.0.3)):
     dependencies:
       vue: 3.5.39(typescript@6.0.3)
@@ -3115,6 +3700,8 @@ snapshots:
 
   webpack-virtual-modules@0.6.2: {}
 
+  whatwg-mimetype@3.0.0: {}
+
   which@2.0.2:
     dependencies:
       isexe: 2.0.0
@@ -3123,6 +3710,25 @@ snapshots:
     dependencies:
       isexe: 3.1.5
 
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 5.1.2
+      strip-ansi: 7.2.0
+
+  ws@8.21.1: {}
+
   wsl-utils@0.3.1:
     dependencies:
       is-wsl: 3.1.1
diff --git a/showcase/specs/alert.ts b/showcase/specs/alert.ts
new file mode 100644
index 0000000..01076f0
--- /dev/null
+++ b/showcase/specs/alert.ts
@@ -0,0 +1,90 @@
+import type { ComponentSpec, SpecState } from '../lib/spec'
+import { h } from 'vue'
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from 'lucide-vue-next'
+import { Alert, AlertDescription, AlertTitle, alertVariantKeys } from '#/components/alert'
+
+// One copy table per variant so the canvas, the examples, and the matrix all
+// read the same strings — the single-source rule for specs.
+const COPY = {
+  default: {
+    icon: Info,
+    title: 'Connectivity check queued',
+    description: 'The upstream probe runs on the next scheduler tick.',
+  },
+  success: {
+    icon: CircleCheck,
+    title: 'Upstream reachable',
+    description: 'All three endpoints answered within the timeout.',
+  },
+  warning: {
+    icon: TriangleAlert,
+    title: 'Upstream degraded',
+    description: 'One endpoint answered slowly. Requests still succeed.',
+  },
+  destructive: {
+    icon: CircleAlert,
+    title: 'Upstream unreachable',
+    description: 'The probe timed out. Check the base URL and the credential.',
+  },
+} as const
+
+function renderAlert(state: SpecState) {
+  const copy = COPY[state.variant as keyof typeof COPY]
+  return h(Alert, { variant: state.variant as never, class: 'w-96' }, () => [
+    // The icon must be a DIRECT svg child: the base cva switches its grid
+    // columns on has-[>svg], so an icon inside a wrapper silently loses the
+    // leading column.
+    state.withIcon ? h(copy.icon) : null,
+    h(AlertTitle, null, () => copy.title),
+    state.withDescription ? h(AlertDescription, null, () => copy.description) : null,
+  ])
+}
+
+export const alertSpec: ComponentSpec = {
+  id: 'alert',
+  name: 'Alert',
+  description:
+    'A framed message that states the outcome of something the page just did. The frame is neutral in every variant — the semantic reads through the title and icon color.',
+  descriptionZh:
+    '陈述页面刚刚做完某件事之结果的带框消息。四档变体共用同一套中性外框——语义靠标题与图标的颜色表达。',
+  controls: [
+    { kind: 'enum', key: 'variant', label: 'Variant', options: alertVariantKeys, default: 'default', display: 'segmented' },
+    { kind: 'boolean', key: 'withIcon', label: 'Leading icon', default: true },
+    { kind: 'boolean', key: 'withDescription', label: 'Description', default: true },
+  ],
+  matrix: { rows: 'variant', cols: 'withIcon' },
+  examples: [
+    {
+      name: 'Check passed',
+      nameZh: '检测通过',
+      note: 'success and destructive must be distinguishable WITHOUT reading the copy — that is the whole job of the variant.',
+      noteZh: 'success 与 destructive 必须在不读文案的前提下就能分辨——这正是变体存在的意义。',
+      state: { variant: 'success' },
+    },
+    {
+      name: 'Check failed',
+      nameZh: '检测失败',
+      state: { variant: 'destructive' },
+    },
+    {
+      name: 'Title only',
+      nameZh: '仅标题',
+      note: 'A one-line result needs no second sentence; an empty description row is filler.',
+      noteZh: '一行就说得完的结果不需要第二句;空描述行只是填充。',
+      state: { variant: 'warning', withDescription: false },
+    },
+  ],
+  render: state => renderAlert(state),
+  usage: `Alert reports the RESULT of an operation in place, on the surface that ran it. It is not a toast (transient, global) and not a CalloutBanner (a tinted, interruptive lifecycle notice with its own action).
+
+- Pick the variant by outcome, never by emphasis: success / warning / destructive must be readable at a glance, before the copy is. A result rendered as \`default\` is an unlabelled result.
+- The frame stays neutral in all four — only the title and icon take the hue. The tinted-surface look belongs to CalloutBanner; do not rebuild it here by injecting bg-*/border-* classes.
+- The icon is optional but must be a DIRECT child of Alert (the grid switches on has-[>svg]). One lucide component, never a typed glyph.
+- Title states the outcome, description states the consequence or the next step. Drop the description when there isn't one.`,
+  usageZh: `Alert 就地报告一次操作的结果,出现在执行它的那个表面上。它不是 toast(短暂、全局),也不是 CalloutBanner(带色底、打断式的生命周期通告,自带动作)。
+
+- 按结果选变体,不要按强调程度选:success / warning / destructive 必须在读文案之前就能一眼分辨。用 \`default\` 渲染一个结果,等于没给它贴标签。
+- 四档共用中性外框——只有标题和图标取色。带色底的观感属于 CalloutBanner,不要在这里用注入 bg-*/border-* 的方式重建它。
+- 图标可选,但必须是 Alert 的直接子节点(网格靠 has-[>svg] 切换)。用 lucide 组件,不要用打出来的字符。
+- 标题写结果,描述写后果或下一步。没有下一步就不要写描述。`,
+}
diff --git a/showcase/specs/button.ts b/showcase/specs/button.ts
index 20d0478..a4281a5 100644
--- a/showcase/specs/button.ts
+++ b/showcase/specs/button.ts
@@ -68,6 +68,18 @@ export const buttonSpec: ComponentSpec = {
         h(Button, { loading: true, loadingMode: 'leading' }, () => 'Continue'),
       ],
     },
+    {
+      name: 'as-child — the link IS the button',
+      nameZh: 'as-child——链接本身就是按钮',
+      note: 'as-child hands the ELEMENT to the caller: the classes and the [data-button] chrome land on the <a> / <RouterLink> itself, so one element both navigates and looks like a button. The built-in loading spinner is unavailable here (the caller owns the element) — pass loading-mode="manual" and render your own.',
+      noteZh: 'as-child 把元素交给调用方:类和 [data-button] 铬件直接落在 <a> / <RouterLink> 上,于是同一个元素既能跳转又长得像按钮。内建 loading spinner 在这里用不了(元素归调用方所有)——传 loading-mode="manual" 自己渲染。',
+      render: () => [
+        h(Button, { asChild: true }, () => h('a', { href: '#' }, ['Open docs', h(ArrowRight)])),
+        h(Button, { asChild: true, variant: 'outline' }, () => h('a', { href: '#' }, 'Back')),
+        h(Button, { asChild: true, variant: 'ghost', size: 'icon' }, () =>
+          h('a', { 'href': '#', 'aria-label': 'Refresh' }, h(RefreshCw))),
+      ],
+    },
     {
       name: 'Icon buttons',
       nameZh: '图标按钮',
@@ -107,7 +119,8 @@ export const buttonSpec: ComponentSpec = {
 - destructive is a filled red CTA, not a ghost button with red text.
 - "Clickable text with a hover chip" is TextButton (ghost @ size="text"), not a hand-rolled hover on a span.
 - Icon-only buttons must carry an aria-label.
-- loading holds full color and blocks clicks; disabled fades to opacity-40. Busy ≠ disabled.`,
+- loading holds full color and blocks clicks; disabled fades to opacity-40. Busy ≠ disabled.
+- Wrapping a router link: as-child makes the caller's element the button (one element, both jobs). Its one limit is the built-in spinner — under as-child, loading degrades to loading-mode="manual".`,
   usageZh: `用 variant + size 表达意图,永远别手写 class。
 
 - default/primary 是深炭色高强调 CTA——一个界面最多一个。
@@ -115,5 +128,6 @@ export const buttonSpec: ComponentSpec = {
 - destructive 是实心红 CTA,不是红字 ghost。
 - "可点击、带 hover 衬底的文字"是 TextButton(ghost @ size="text"),不是给 span 手写 hover。
 - 纯图标按钮必须带 aria-label。
-- loading 保持全色并屏蔽点击;disabled 降到 opacity-40。忙 ≠ 禁用。`,
+- loading 保持全色并屏蔽点击;disabled 降到 opacity-40。忙 ≠ 禁用。
+- 要包路由链接就用 as-child:调用方的元素直接成为按钮(一个元素兼两职)。唯一的限制是内建 spinner——as-child 下 loading 降级为 loading-mode="manual"。`,
 }
diff --git a/showcase/specs/empty.ts b/showcase/specs/empty.ts
new file mode 100644
index 0000000..bde7ddc
--- /dev/null
+++ b/showcase/specs/empty.ts
@@ -0,0 +1,84 @@
+import type { ComponentSpec, SpecState } from '../lib/spec'
+import { h } from 'vue'
+import { Plus } from 'lucide-vue-next'
+import { Button } from '#/components/button'
+import { Card, CardContent, CardHeader, CardTitle } from '#/components/card'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+  emptyVariantKeys,
+} from '#/components/empty'
+
+const TITLE = 'No API keys yet'
+const DESCRIPTION = 'Keys let a service call this workspace on your behalf.'
+
+function renderEmpty(state: SpecState) {
+  return h(Empty, { variant: state.variant as never }, () => [
+    h(EmptyHeader, null, () => [
+      h(EmptyTitle, null, () => TITLE),
+      h(EmptyDescription, null, () => DESCRIPTION),
+    ]),
+    state.withAction
+      ? h(EmptyContent, null, () =>
+          h(Button, { variant: 'outline' }, () => [h(Plus), 'New key']))
+      : null,
+  ])
+}
+
+export const emptySpec: ComponentSpec = {
+  id: 'empty',
+  name: 'Empty',
+  description:
+    'The "no rows yet" surface. It is the same page with nothing in it, so it keeps the frame the populated state has — a solid hairline when it stands alone, none when a card already frames it.',
+  descriptionZh:
+    '"还没有数据"的表面。它就是同一个页面的空版本,因此保留有数据时的那个框——独立摆放时是一道实线发丝边,已被卡片包住时则不再自带边。',
+  controls: [
+    { kind: 'enum', key: 'variant', label: 'Variant', options: emptyVariantKeys, default: 'framed', display: 'segmented' },
+    { kind: 'boolean', key: 'withAction', label: 'Guiding action', default: true },
+  ],
+  examples: [
+    {
+      name: 'Standalone',
+      nameZh: '独立摆放',
+      note: 'The frame is SOLID. border-dashed reads "drop zone / add here" and is reserved for the "+ Add another" tile beside real items.',
+      noteZh: '框是实线。border-dashed 读作"拖放区 / 在此新增",只留给已有内容旁边的"+ 再加一个"格子。',
+      state: { variant: 'framed' },
+    },
+    {
+      name: 'Inside a card',
+      nameZh: '卡片内',
+      note: 'bare drops the hairline — a card already frames it, and two strokes on one unit is card-in-card.',
+      noteZh: 'bare 去掉发丝边——卡片已经框住它了,一个视觉单元上两道描边就是卡中卡。',
+      state: { variant: 'bare', withAction: true },
+      render: state => h(Card, { class: 'w-96' }, () => [
+        h(CardHeader, null, () => h(CardTitle, null, () => 'API keys')),
+        h(CardContent, null, () => renderEmpty(state)),
+      ]),
+    },
+    {
+      name: 'Message only',
+      nameZh: '仅消息',
+      note: 'Drop the action when the user cannot create the thing from here.',
+      noteZh: '当用户无法在此处创建该对象时,就不要放动作按钮。',
+      state: { variant: 'framed', withAction: false },
+    },
+  ],
+  render: state => renderEmpty(state),
+  usage: `An empty state keeps the populated skeleton — entering an empty page and a full one must not jolt the layout. Compose EmptyHeader (EmptyTitle + EmptyDescription) plus, when the user can act, one EmptyContent action.
+
+- framed (default) stands in for the card or grid that will be there once data exists: one SOLID border-border hairline at the card radius. Never dashed — dashed is the "+ Add another" tile beside real items, not "nothing yet".
+- bare is for an Empty nested in a surface that already draws the hairline (a Card, a SettingsSection). A second stroke there is card-in-card.
+- No decorative icon. EmptyMedia variant="icon" is a bordered tile — inside a card it is card-in-card, and a big glyph above the title is the icon abuse this page type attracts. Title + description + one action.
+- One guiding action, and it is the same action the populated page offers ("New key"), not a special empty-only affordance.
+- A CONDITIONAL section vanishes when it is empty instead of drawing an empty frame; only always-present content earns an Empty.`,
+  usageZh: `空态保留有数据时的骨架——进入空页面和进入满页面不应让布局跳一下。组合 EmptyHeader(EmptyTitle + EmptyDescription),以及在用户确实能动手时加一个 EmptyContent 动作。
+
+- framed(默认)顶替有数据后会出现的卡片或网格:一道实线 border-border 发丝边,取卡片圆角。绝不用虚线——虚线是已有内容旁边那个"+ 再加一个"格子,不是"还没有"。
+- bare 用于嵌在已经画了发丝边的表面里(Card、SettingsSection)。在那里再加一道描边就是卡中卡。
+- 不要装饰性图标。EmptyMedia variant="icon" 自带描边,放进卡片就是卡中卡;标题上方压一个大字形则是这类页面最容易招来的图标滥用。标题 + 描述 + 一个动作,就够了。
+- 只放一个引导动作,而且就是有数据时页面提供的那个动作("新建密钥"),不要为空态另造一个。
+- 条件性区块在为空时应整块消失,而不是画一个空框;只有始终存在的内容才配一个 Empty。`,
+}
diff --git a/showcase/specs/index.ts b/showcase/specs/index.ts
index 102c9e3..3f6924a 100644
--- a/showcase/specs/index.ts
+++ b/showcase/specs/index.ts
@@ -1,12 +1,14 @@
 import type { ComponentSpec } from '../lib/spec'
 import { accordionSpec } from './accordion'
 import { actionCardSpec } from './action-card'
+import { alertSpec } from './alert'
 import { badgeSpec } from './badge'
 import { buttonSpec } from './button'
 import { cardSpec } from './card'
 import { checkboxSpec } from './checkbox'
 import { dialogSpec } from './dialog'
 import { dropdownMenuSpec } from './dropdown-menu'
+import { emptySpec } from './empty'
 import { fieldSpec } from './field'
 import { inputSpec } from './input'
 import { inputGroupSpec } from './input-group'
@@ -15,6 +17,7 @@ import { numberFieldSpec } from './number-field'
 import { popoverSpec } from './popover'
 import { segmentedSpec } from './segmented'
 import { selectSpec } from './select'
+import { sheetSpec } from './sheet'
 import { skeletonSpec } from './skeleton'
 import { sonnerSpec } from './sonner'
 import { switchSpec } from './switch'
@@ -47,9 +50,12 @@ export const componentSpecs: ComponentSpec[] = [
   tabsSpec,
   accordionSpec,
   skeletonSpec,
+  emptySpec,
   dialogSpec,
+  sheetSpec,
   popoverSpec,
   dropdownMenuSpec,
   tooltipSpec,
   sonnerSpec,
+  alertSpec,
 ]
diff --git a/showcase/specs/sheet.ts b/showcase/specs/sheet.ts
new file mode 100644
index 0000000..7860343
--- /dev/null
+++ b/showcase/specs/sheet.ts
@@ -0,0 +1,118 @@
+import type { ComponentSpec, SpecState } from '../lib/spec'
+import { h } from 'vue'
+import { Button } from '#/components/button'
+import { Field, FieldControl, FieldDescription, FieldGroup, FieldLabel } from '#/components/field'
+import { Input } from '#/components/input'
+import {
+  Sheet,
+  SheetBody,
+  SheetClose,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetPanel,
+  SheetTitle,
+  SheetTrigger,
+  sheetPanelWidthKeys,
+} from '#/components/sheet'
+import { Textarea } from '#/components/textarea'
+
+const SIDES = ['right', 'left'] as const
+
+// Enough rows that the body actually scrolls at every width rung — a form
+// drawer that fits on one screen never proves the row grid caps the body.
+const FIELDS = [
+  { label: 'Name', placeholder: 'Production relay', description: 'Shown in the provider list.' },
+  { label: 'Base URL', placeholder: 'https://api.example.com/v1', description: '' },
+  { label: 'API key', placeholder: 'sk-…', description: 'Stored encrypted; shown once on creation.' },
+  { label: 'Organization', placeholder: 'org_…', description: '' },
+] as const
+
+// Overlay specs render UNCONTROLLED (interactive: true): a closed, live trigger
+// you click. NO `open` control — pinning a controlled overlay open writes into
+// a per-render throwaway state and its scrim freezes the page.
+function renderSheet(state: SpecState) {
+  const withFooter = Boolean(state.footer)
+  return h(Sheet, null, () => [
+    h(SheetTrigger, { asChild: true }, () => h(Button, { variant: 'outline' }, () => 'Add provider')),
+    h(SheetPanel, {
+      width: state.width as never,
+      side: state.side as never,
+      footer: withFooter,
+    }, () => [
+      h(SheetHeader, null, () => [
+        h(SheetTitle, null, () => 'Add provider'),
+        h(SheetDescription, null, () => 'Connect an OpenAI-compatible upstream to this workspace.'),
+      ]),
+      h(SheetBody, null, () => h(FieldGroup, null, () => [
+        ...FIELDS.map(f =>
+          h(Field, null, () => [
+            h(FieldLabel, null, () => f.label),
+            h(FieldControl, null, () => h(Input, { placeholder: f.placeholder })),
+            f.description ? h(FieldDescription, null, () => f.description) : null,
+          ])),
+        h(Field, null, () => [
+          h(FieldLabel, null, () => 'Extra headers'),
+          h(FieldControl, null, () => h(Textarea, { variant: 'code', placeholder: '{\n  "X-Tenant": "acme"\n}' })),
+        ]),
+      ])),
+      withFooter
+        ? h(SheetFooter, null, () => [
+            h(SheetClose, { asChild: true }, () => h(Button, { variant: 'outline' }, () => 'Cancel')),
+            h(Button, null, () => 'Add provider'),
+          ])
+        : null,
+    ]),
+  ])
+}
+
+export const sheetSpec: ComponentSpec = {
+  id: 'sheet',
+  name: 'Sheet',
+  interactive: true,
+  description:
+    'An edge-anchored secondary surface. SheetPanel is its capped three-row shell — header / scrolling body / footer — so a form drawer needs no layout classes at the call site.',
+  descriptionZh:
+    '贴边滑出的次级表面。SheetPanel 是它的三行定高外壳——头部 / 可滚动主体 / 底部——因此表单抽屉在调用处不需要写任何布局类。',
+  controls: [
+    { kind: 'enum', key: 'width', label: 'Width', options: sheetPanelWidthKeys, default: 'md', display: 'segmented' },
+    { kind: 'enum', key: 'side', label: 'Side', options: SIDES, default: 'right', display: 'segmented' },
+    { kind: 'boolean', key: 'footer', label: 'Footer', default: true },
+  ],
+  examples: [
+    {
+      name: 'Form drawer',
+      nameZh: '表单抽屉',
+      note: 'The body scrolls between two fixed hairlines; header and footer never move. That cap is the row grid, and it is the component\'s, not the page\'s.',
+      noteZh: '主体在两道固定发丝线之间滚动,头尾不动。这个上限由行栅格给出,归组件所有,不归页面。',
+      state: { width: 'lg', footer: true },
+    },
+    {
+      name: 'No footer',
+      nameZh: '无底部',
+      note: 'Read-only detail: without `footer` the panel is two rows and draws no bottom divider — a declared-but-empty row would still show one.',
+      noteZh: '只读详情:不传 footer 时面板只有两行,也不画底部分隔线——声明了却空着的行仍会画出来。',
+      state: { width: 'md', footer: false },
+    },
+    {
+      name: 'Left side',
+      nameZh: '左侧',
+      state: { side: 'left', width: 'sm' },
+    },
+  ],
+  render: state => renderSheet(state),
+  usage: `Use a Sheet sparingly: a surface flying in over the whole app is a heavy transition. Prefer an in-page push panel for "show more detail". A Sheet earns its weight for a real secondary context — a create/edit form, a deep filter drawer, mobile nav.
+
+- Compose SheetPanel + SheetHeader + SheetBody + SheetFooter. The panel owns the row grid, the width rungs, the narrow-screen width, the header/footer hairlines, and the footer's action row — a caller writes content only.
+- Width is an enumerated rung (sm/md/lg/xl). If none fits, add a rung to SheetPanel; never pass sm:max-w-[…] from a page.
+- \`footer\` is a prop, not slot detection: it adds the third row AND its divider, so an empty declared row can't leave a stray line at the bottom.
+- Stack fields with FieldGroup inside SheetBody — the body is a scroll container, the rhythm of the fields is FieldGroup's job.
+- A bare SheetContent is still right for a single flowing surface (mobile nav) that has nothing to divide.`,
+  usageZh: `Sheet 要省着用:一个盖住整个应用飞入的表面是很重的转场。"看更多细节"优先用页内推开的面板。真正的次级上下文——新建/编辑表单、深度筛选抽屉、移动端导航——才配得上它的重量。
+
+- 用 SheetPanel + SheetHeader + SheetBody + SheetFooter 组合。行栅格、宽度档位、窄屏宽度、头尾发丝线、底部动作行都归面板所有——调用方只写内容。
+- 宽度是枚举档位(sm/md/lg/xl)。没有合适的档就去 SheetPanel 加一档,绝不从页面传 sm:max-w-[…]。
+- footer 是 prop,不是槽探测:它同时加上第三行和那道分隔线,所以不会出现"声明了却空着的行"在底部留一道多余的线。
+- 在 SheetBody 里用 FieldGroup 堆字段——主体是滚动容器,字段的节奏归 FieldGroup 管。
+- 对于没什么可分隔的单一连续表面(移动端导航),裸用 SheetContent 依然是对的。`,
+}
diff --git a/showcase/specs/tabs.ts b/showcase/specs/tabs.ts
index f39ad75..d9a4815 100644
--- a/showcase/specs/tabs.ts
+++ b/showcase/specs/tabs.ts
@@ -29,7 +29,10 @@ function renderTabs(state: SpecState, withIcons = false) {
     'onUpdate:modelValue': (v: unknown) => (state.value = String(v)),
     class: 'w-96',
   }, () => [
-    h(TabsList, { variant: state.variant as never }, () =>
+    // `label` names the inner element that actually carries role="tablist" —
+    // the outer wrapper only hosts the sliding indicator, so an aria-label
+    // parked there would be invisible to a screen reader.
+    h(TabsList, { variant: state.variant as never, label: 'Account settings sections' }, () =>
       TABS.map(t =>
         h(TabsTrigger, {
           value: t.value,
@@ -78,12 +81,14 @@ export const tabsSpec: ComponentSpec = {
 
 - underline (default) is the section-nav rail: full-width bottom border with a sliding bar. The default for page- or dialog-level sections.
 - pill is the enclosed chrome for tabs embedded inside a surface where a bottom rail would clash (cards, toolbars). Same Tabs semantics — never reach for it as a value picker just because it wears the picker skin.
+- Name the tab row with TabsList's \`label\` prop whenever a visible heading doesn't already name it. It forwards to the inner element that carries role="tablist"; the outer element is only the indicator host, so an aria-label written there reaches no screen reader (aria-* attributes passed as raw attrs are forwarded for you).
 - Pair with TabsContent panels: they wire role="tabpanel" + aria linkage and mount only the active panel. Use v-if / conditional rendering only when the panel must live outside the Tabs root — then the aria wiring is on you.
 - The indicator is measured off the active trigger — any label width just works; don't force equal widths.`,
   usageZh: `Tabs 切换面板,并携带 tab 无障碍契约(tablist / tab / tabpanel、方向键漫游焦点)。从一行里选一个值——日/周/月、列表/看板——用 SegmentedControl:它返回一个值,不拥有内容。
 
 - underline(默认)是区块导航栏:通栏底边加滑动指示条。页面级、弹窗级分区的默认选择。
 - pill 是封闭铬,用于内嵌在卡片、工具栏等表面里、底栏轨道会打架的场景。语义不变——别因为它穿着选择器的皮就拿它当取值器用。
+- 只要没有可见标题为这排 tab 命名,就用 TabsList 的 label prop 给它取名。它会转发到真正带 role="tablist" 的内层元素;外层只是指示条的宿主,写在那里的 aria-label 读屏读不到(以原始 attr 形式传入的 aria-* 也会被自动转发)。
 - 面板配 TabsContent:它接好 role="tabpanel" 和 aria 关联,且只挂载激活面板。只有当面板必须长在 Tabs 根节点之外时才用 v-if 条件渲染——那时 aria 关联要自己补。
 - 指示器按激活触发器实测定位——任意 label 宽度都自然对齐,不要强行等宽。`,
 }
diff --git a/showcase/specs/textarea.ts b/showcase/specs/textarea.ts
index a29ec24..14dd3d7 100644
--- a/showcase/specs/textarea.ts
+++ b/showcase/specs/textarea.ts
@@ -1,8 +1,12 @@
 import type { ComponentSpec } from '../lib/spec'
 import { h } from 'vue'
-import { Textarea } from '#/components/textarea'
+import { Textarea, textareaSizeKeys, textareaVariantKeys } from '#/components/textarea'
 
-const SIZES = ['default', 'sm', 'lg'] as const
+const JSON_SAMPLE = `{
+  "model": "gpt-4o-mini",
+  "temperature": 0.2,
+  "tools": ["search", "sql"]
+}`
 
 export const textareaSpec: ComponentSpec = {
   id: 'textarea',
@@ -12,17 +16,46 @@ export const textareaSpec: ComponentSpec = {
   descriptionZh:
     '多行文本输入，与 Input 共享 field-edge 契约：一条内嵌发丝线，聚焦时原位换色。',
   controls: [
-    { kind: 'enum', key: 'size', label: 'Size', options: SIZES, default: 'default' },
+    { kind: 'enum', key: 'size', label: 'Size', options: textareaSizeKeys, default: 'default' },
+    { kind: 'enum', key: 'variant', label: 'Variant', options: textareaVariantKeys, default: 'default', display: 'segmented' },
     { kind: 'string', key: 'placeholder', label: 'Placeholder', default: 'Tell the bot what to do…' },
     { kind: 'number', key: 'rows', label: 'Rows', default: 3, min: 2, max: 10 },
     { kind: 'boolean', key: 'disabled', label: 'Disabled', default: false },
   ],
+  examples: [
+    {
+      name: 'Code',
+      nameZh: '代码',
+      note: 'A field holding machine text — JSON, a config blob, a prompt template — says so with variant="code". Never class="font-mono".',
+      noteZh: '装机器文本的字段——JSON、配置块、提示词模板——用 variant="code" 声明,而不是 class="font-mono"。',
+      state: { variant: 'code', rows: 5 },
+      render: state =>
+        h(Textarea, {
+          size: state.size as never,
+          variant: 'code',
+          modelValue: JSON_SAMPLE,
+          rows: Number(state.rows),
+          class: 'w-80',
+        }),
+    },
+  ],
   render: state =>
     h(Textarea, {
       size: state.size as never,
+      variant: state.variant as never,
       placeholder: String(state.placeholder),
       rows: Number(state.rows),
       disabled: Boolean(state.disabled),
       class: 'w-80',
     }),
+  usage: `Textarea is the multi-line Input — same field-edge contract, same size ladder.
+
+- variant is a CONTENT ROLE, not a skin: code marks a field that holds machine text (JSON, YAML, a config blob, a prompt template) and owns the monospace family plus its tracking reset. Injecting class="font-mono" is the className red line.
+- variant and size are orthogonal: a code field is still sm / default / lg.
+- The field engages on FOCUS only — no hover darkening, no outer ring, no border growth.`,
+  usageZh: `Textarea 就是多行版的 Input——同一套 field-edge 契约,同一条尺寸阶梯。
+
+- variant 是内容角色,不是皮肤:code 标记这个字段装的是机器文本(JSON、YAML、配置块、提示词模板),等宽字体族和随之而来的字距重置都归它管。注入 class="font-mono" 是 className 红线。
+- variant 与 size 正交:code 字段照样有 sm / default / lg。
+- 字段只在聚焦时反应——不做 hover 变深,不加外环,不在聚焦时加粗边框。`,
 }
diff --git a/skills/web/SKILL.md b/skills/web/SKILL.md
index 3e7faa4..89ca48d 100644
--- a/skills/web/SKILL.md
+++ b/skills/web/SKILL.md
@@ -445,6 +445,11 @@ recurring failures to avoid:
     populated form has — the section card, or a solid-`border` framed block for a standalone grid
     — never a dashed box, and never bare floating muted text. (This refines the older "outermost
     Empty earns a dashed border" guidance: it does not — outermost empties are solid-framed.)
+    **The frame is now a prop, so a page never writes either one:** `<Empty>` defaults to
+    `variant="framed"` (the solid hairline at the card radius, for a standalone empty), and
+    `variant="bare"` drops it for an Empty nested in a `SettingsSection` / `Card` that already
+    draws the edge. If you are reaching for a `border`/`border-dashed` class on an `Empty`, the
+    answer is one of those two rungs.
   - **No decorative icon.** An `EmptyMedia variant="icon"` glyph tile, or any big lucide glyph
     stacked above the title, is banned: it is both card-in-card and the icon-abuse below. Just
     title + description + action. (An action *button* keeps its own small action glyph — that is
diff --git a/src/components/alert/index.ts b/src/components/alert/index.ts
index a5300d9..c142cdf 100644
--- a/src/components/alert/index.ts
+++ b/src/components/alert/index.ts
@@ -5,12 +5,37 @@ export { default as Alert } from './Alert.vue'
 export { default as AlertDescription } from './AlertDescription.vue'
 export { default as AlertTitle } from './AlertTitle.vue'
 
+// Alert = a NEUTRAL framed message whose semantic reads through the TEXT layer:
+// every variant keeps the same `bg-background` + `border-border` frame and only
+// the title/icon color changes in place (§ The one rule — one layer changing,
+// nothing stacked). The tinted-surface sibling is `CalloutBanner`, which owns
+// the soft fill + matching border triplet (`--*-soft` / `--*-border`) for an
+// interruptive lifecycle notice; keeping the two distinct is what stops "status
+// message" from having two competing looks.
+//
+// Token rung, and why it differs per hue: `--destructive` is dark enough
+// (L≈0.58) to be body text on the page surface, but `--success` (L≈0.62) and
+// `--warning` (L≈0.72) are not — they are icon/fill hues. Their readable-text
+// rung is `--*-foreground` (L≈0.33 / 0.43 light, ~0.82 dark), which is exactly
+// the role that token was minted for (CalloutBanner uses the same one). Do NOT
+// swap in the base hue to "match destructive" — that trades legibility for a
+// symmetry the palette does not have. `--*-solid-foreground` is the other
+// direction (text ON a filled chip) and never applies here.
+//
+// New rungs deliberately do NOT copy destructive's
+// `*:data-[slot=alert-description]:text-destructive/90` description tint: a
+// hand-written `/NN` alpha on a semantic color is § Alpha policy debt (that one
+// line is grandfathered, not a pattern). The description stays
+// `text-muted-foreground` from AlertDescription — the hue signals once, in the
+// title/icon, and the body copy stays maximally readable.
 export const alertVariants = cva(
   'relative w-full rounded-lg border px-4 py-3 text-body grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
   {
     variants: {
       variant: {
         default: 'bg-background text-foreground border-border',
+        success: 'text-success-foreground bg-background border-border',
+        warning: 'text-warning-foreground bg-background border-border',
         destructive:
           'text-destructive bg-background border-border [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
       },
@@ -22,3 +47,14 @@ export const alertVariants = cva(
 )
 
 export type AlertVariants = VariantProps<typeof alertVariants>
+
+// Single source of truth for the variant axis. cva 0.7.1 does not expose its
+// `.config` at runtime, so the keys are mirrored here next to the cva call
+// (keep them in sync) — consumed by the showcase spec so its controls panel
+// never hand-maintains its own list (badgeVariantKeys precedent).
+export const alertVariantKeys = [
+  'default',
+  'success',
+  'warning',
+  'destructive',
+] as const satisfies readonly NonNullable<AlertVariants['variant']>[]
diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
index fa155f6..a004f2d 100644
--- a/src/components/button/Button.vue
+++ b/src/components/button/Button.vue
@@ -3,7 +3,7 @@ import type { PrimitiveProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import type { ButtonVariants } from '.'
 import { Primitive } from 'reka-ui'
-import { computed } from 'vue'
+import { computed, watchEffect } from 'vue'
 import { Spinner } from '#/components/spinner'
 import { cn } from '#/lib/utils'
 import { buttonVariants } from '.'
@@ -36,6 +36,14 @@ interface Props extends PrimitiveProps {
    *  OR it with `loading` without one clobbering the other. */
   disabled?: boolean
   class?: HTMLAttributes['class']
+  /** Render the CALLER's element as the button (reka Slot) instead of `as`.
+   *  Inherited from PrimitiveProps; redeclared only for this note.
+   *
+   *  Under `as-child` the caller owns the element, so the button cannot inject
+   *  the wrapper/spinner nodes its `loading` affordances are built from — see
+   *  `effectiveLoadingMode`. Everything else (classes, `data-button` chrome,
+   *  `data-variant`/`data-size`) lands directly on the caller's element. */
+  asChild?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -58,6 +66,33 @@ const buttonClass = computed(() =>
     props.class,
   ),
 )
+
+// as-child hands the ELEMENT to the caller, which costs the button its inner
+// scaffolding — and the loss is not optional. reka's Slot merges the button's
+// props into the FIRST NON-COMMENT CHILD it is given, so ANY node this
+// component renders alongside the slot (a leading-spinner span, the
+// data-button-content wrapper) intercepts the merge and the caller's element
+// gets nothing. That is precisely the defect the template's asChild branch
+// exists to fix; re-adding a wrapper "just for loading" would reintroduce it.
+//
+// So under as-child, loading degrades to `manual`: the busy chrome still
+// applies in full (data-loading holds the engaged color, clicks are swallowed),
+// but the button draws no spinner — the caller renders its own indicator inside
+// its own element, which is exactly what `manual` already means. Reported in
+// the DOM rather than silently ignored, so a reader of the markup can see it.
+const effectiveLoadingMode = computed<Props['loadingMode']>(() =>
+  props.asChild ? 'manual' : props.loadingMode,
+)
+
+if (import.meta.env.DEV) {
+  watchEffect(() => {
+    if (props.asChild && props.loading && props.loadingMode !== 'manual') {
+      console.warn(
+        `[@felinic/ui] <Button as-child loading loading-mode="${props.loadingMode}">: as-child gives the element to the caller, so the button cannot inject a spinner — falling back to loading-mode="manual". Render your own indicator inside the child element, or drop as-child and use \`as\`.`,
+      )
+    }
+  })
+}
 </script>
 
 <template>
@@ -76,33 +111,56 @@ const buttonClass = computed(() =>
     :data-size="size || undefined"
     :data-block="block ? '' : undefined"
     :data-loading="loading ? '' : undefined"
-    :data-loading-mode="loadingMode"
+    :data-loading-mode="effectiveLoadingMode"
     :disabled="isDisabled"
     :aria-busy="loading || undefined"
     :class="buttonClass"
   >
-    <span
-      v-if="loadingMode === 'leading'"
-      data-button-leading-spinner
-    >
-      <Spinner />
-    </span>
-    <!-- [gap:inherit]:display:contents 在布局上消失,但在 CSS 继承链上仍是 slot
-         内容的父元素 —— gap 不是继承属性,不显式转发的话,slot 里做组合的包装组件
-         (如 LabelSwap)想 [gap:inherit] 拿到的是这层的 normal(0),不是按钮的
-         gap-2/gap-1.5。这里转发一次,按钮的间距契约就能穿透到嵌套组合。 -->
-    <span
-      data-button-content
-      class="contents [gap:inherit]"
-    >
-      <slot />
-    </span>
-    <span
-      v-if="loading && loadingMode === 'overlay'"
-      data-button-spinner
-      class="absolute inset-0 grid place-items-center"
-    >
-      <Spinner />
-    </span>
+    <!-- as-child: the CALLER's element is the button, so this branch must emit
+         the slot and NOTHING else. reka's Slot merges the button's props into
+         the first non-comment child it receives — with a wrapper here, that
+         child is the wrapper, and every button class (inline-flex / h-9 / px-4
+         / rounded-md) plus the [data-button] chrome anchor lands on a
+         `display:contents` span that generates no box. Net effect: the caller's
+         <a>/<RouterLink> renders as bare text, and the ::before fill loses its
+         positioning ancestor. That was this component's behaviour from the day
+         the wrapper was introduced (it predates the LabelSwap [gap:inherit]
+         change, which only added a property to an already-wrapping span), which
+         is why `<TextButton as-child>` / `<BreadcrumbLink as-child>` — both
+         documented as the way to wrap a RouterLink — never actually looked like
+         buttons.
+
+         The wrapper's two jobs are simply not needed here: the button classes
+         (gap-2 / gap-1.5 included) are now ON the caller's element, so a nested
+         LabelSwap's [gap:inherit] reads the real gap from its actual parent;
+         and the loading affordances degrade to `manual` (see
+         effectiveLoadingMode) because a spinner node is exactly the injected
+         sibling that would break the merge. -->
+    <slot v-if="asChild" />
+    <template v-else>
+      <span
+        v-if="loadingMode === 'leading'"
+        data-button-leading-spinner
+      >
+        <Spinner />
+      </span>
+      <!-- [gap:inherit]:display:contents 在布局上消失,但在 CSS 继承链上仍是 slot
+           内容的父元素 —— gap 不是继承属性,不显式转发的话,slot 里做组合的包装组件
+           (如 LabelSwap)想 [gap:inherit] 拿到的是这层的 normal(0),不是按钮的
+           gap-2/gap-1.5。这里转发一次,按钮的间距契约就能穿透到嵌套组合。 -->
+      <span
+        data-button-content
+        class="contents [gap:inherit]"
+      >
+        <slot />
+      </span>
+      <span
+        v-if="loading && loadingMode === 'overlay'"
+        data-button-spinner
+        class="absolute inset-0 grid place-items-center"
+      >
+        <Spinner />
+      </span>
+    </template>
   </Primitive>
 </template>
diff --git a/src/components/button/__tests__/Button.test.ts b/src/components/button/__tests__/Button.test.ts
new file mode 100644
index 0000000..5e82618
--- /dev/null
+++ b/src/components/button/__tests__/Button.test.ts
@@ -0,0 +1,117 @@
+import { mount } from '@vue/test-utils'
+import { Primitive } from 'reka-ui'
+import { describe, expect, it, vi } from 'vitest'
+import { h } from 'vue'
+import { Button } from '..'
+import { TextButton } from '../../text-button'
+
+// Why this file exists at all (see vitest.config.ts): every other enforcement
+// layer in this library reads source text. `<Button as-child><a/></Button>`
+// type-checked, and every class string involved was legal — the defect was that
+// they all landed on an internal `display:contents` wrapper instead of on the
+// caller's element, which only the rendered DOM can show. So these assertions
+// are deliberately about WHICH ELEMENT carries the contract; they never inspect
+// what the class list says.
+
+// [data-button] is the chrome anchor every hover/press/focus rule in style.css
+// keys off (see the comment in Button.vue), so "the button" means "the one node
+// wearing it". Exactly one may exist — a second would mean a wrapper is also
+// claiming to be the button.
+function theButton(wrapper: ReturnType<typeof mount>) {
+  const anchored = wrapper.findAll('[data-button]')
+  expect(anchored).toHaveLength(1)
+  const el = anchored[0]!.element
+  // Box-generating layout classes are the tell: on a `display:contents` wrapper
+  // these compute to nothing, which is exactly how the bug stayed invisible.
+  // Only size-invariant base classes belong here — a size rung can legitimately
+  // merge away e.g. rounded-md (size="text" swaps in rounded-sm).
+  expect(el.className).toContain('inline-flex')
+  expect(el.className).toContain('items-center')
+  return el
+}
+
+describe('<Button as-child>', () => {
+  it('puts the button contract on the CALLER\'s element, not on a wrapper', () => {
+    const wrapper = mount(Button, {
+      props: { asChild: true, variant: 'ghost' },
+      slots: { default: () => h('a', { 'href': '/settings', 'data-probe': '' }, 'Settings') },
+    })
+
+    const el = theButton(wrapper)
+    // The identity check is the whole point: same NODE as the caller's element.
+    expect(el).toBe(wrapper.get('[data-probe]').element)
+    expect(el.tagName).toBe('A')
+    expect(el.getAttribute('data-variant')).toBe('ghost')
+    expect(el.className).toContain('h-9')
+    expect(el.className).toContain('rounded-md')
+  })
+
+  it('renders NO internal wrapper that could intercept the Slot merge', () => {
+    // reka's Slot merges into the first non-comment child it receives. Any node
+    // this component emitted alongside the slot would swallow the merge, so the
+    // as-child branch must be the slot and nothing else.
+    const wrapper = mount(Button, {
+      props: { asChild: true },
+      slots: { default: () => h('a', { href: '/x' }, 'Go') },
+    })
+
+    expect(wrapper.find('[data-button-content]').exists()).toBe(false)
+    expect(wrapper.find('[data-button-leading-spinner]').exists()).toBe(false)
+    expect(theButton(wrapper).children).toHaveLength(0)
+  })
+
+  it('degrades loading to `manual` — busy chrome, no injected spinner', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const wrapper = mount(Button, {
+      props: { asChild: true, loading: true, loadingMode: 'overlay' },
+      slots: { default: () => h('a', { href: '/x' }, 'Go') },
+    })
+
+    const el = theButton(wrapper)
+    expect(el.getAttribute('data-loading')).toBe('')
+    expect(el.getAttribute('aria-busy')).toBe('true')
+    // Honest in the DOM: no spinner exists, so the mode must not claim one.
+    expect(el.getAttribute('data-loading-mode')).toBe('manual')
+    expect(wrapper.find('[data-button-spinner]').exists()).toBe(false)
+    // …and it must say so out loud rather than silently dropping the spinner.
+    expect(warn).toHaveBeenCalledOnce()
+    warn.mockRestore()
+  })
+
+  it('reaches the caller\'s element through TextButton (the RouterLink path)', () => {
+    // TextButton / BreadcrumbLink both document as-child as the way to wrap a
+    // RouterLink; they forward straight into Button, so they broke with it.
+    const wrapper = mount(TextButton, {
+      props: { asChild: true },
+      slots: { default: () => h('a', { href: '/bots' }, 'Bots') },
+    })
+
+    expect(theButton(wrapper).tagName).toBe('A')
+  })
+})
+
+describe('<Button> without as-child', () => {
+  it('keeps the content wrapper that the loading affordances are built on', () => {
+    const wrapper = mount(Button, { slots: { default: () => 'Save' } })
+
+    expect(theButton(wrapper).tagName).toBe('BUTTON')
+    // style.css hides THIS node in place during overlay loading; losing it
+    // would silently break the zero-layout-shift spinner.
+    expect(wrapper.find('[data-button-content]').exists()).toBe(true)
+  })
+
+  it('still receives a wrapping reka trigger\'s props (the Pagination direction)', () => {
+    // The other as-child direction — <PaginationItem as-child><Button/> — was
+    // never broken, and the contract (AGENTS.md § Breadcrumb & Pagination)
+    // depends on it: the trigger's data-slot overrides data-slot="button" while
+    // data-button survives, which is why the chrome keys off data-button.
+    const wrapper = mount({
+      components: { Primitive, Button },
+      template: '<Primitive as-child data-slot="pagination-item"><Button variant="ghost">1</Button></Primitive>',
+    })
+
+    const el = theButton(wrapper)
+    expect(el.tagName).toBe('BUTTON')
+    expect(el.getAttribute('data-slot')).toBe('pagination-item')
+  })
+})
diff --git a/src/components/empty/Empty.vue b/src/components/empty/Empty.vue
index 7416ddb..97efd59 100644
--- a/src/components/empty/Empty.vue
+++ b/src/components/empty/Empty.vue
@@ -1,17 +1,57 @@
 <script setup lang="ts">
+// Empty — the "no rows yet" surface. It is the SAME page with nothing in it,
+// so it keeps the populated skeleton instead of collapsing into loose text
+// (web SKILL § "An empty state keeps the populated skeleton").
+//
+// Two documented placements want OPPOSITE frames, so the frame is an
+// enumerated prop rather than a class each page hand-writes:
+//
+// - `framed` (default) — the standalone empty. It stands IN FOR the card/grid
+//   that will be there once data exists, so it draws that card's frame: one
+//   SOLID --border hairline at the Card radius. Solid is the point —
+//   `border-dashed` reads "drop zone / add here" and is reserved for the
+//   "+ Add another" tile that sits BESIDE real items in an already-populated
+//   list (skills/web/reference.md § Dirty → clean). It is not an empty look.
+// - `bare` — the empty nested INSIDE a surface that already frames it (a
+//   SettingsSection / Card). A second hairline there is card-in-card: two
+//   strokes on one visual unit, the stacked-chrome violation (AGENTS.md
+//   § The one rule).
+//
+// History: this shipped as `rounded-lg border-dashed`. `border-dashed` sets
+// border-STYLE only — with no width the edge never rendered at all, so every
+// standalone empty read as centered gray text floating in whitespace. Adding
+// a bare `border` would have shipped the dashed look the contract bans; the
+// frame that was missing is the solid one.
 import type { HTMLAttributes } from 'vue'
+import type { EmptyVariant } from '.'
+import { computed } from 'vue'
 import { cn } from '#/lib/utils'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   class?: HTMLAttributes['class']
-}>()
+  /** Frame rung. `framed` stands alone; `bare` nests inside a card that
+   *  already carries the hairline. */
+  variant?: EmptyVariant
+}>(), {
+  variant: 'framed',
+})
+
+// Card radius (--radius-xl, 14px), not the control rung the dead `rounded-lg`
+// used: a framed empty is the stand-in for the Card/grid it replaces, so it
+// must share that corner or a half-loaded page shows two different rounds side
+// by side (§ Radius role map).
+const frameClass = computed(() => props.variant === 'framed'
+  ? 'rounded-xl border border-border'
+  : '')
 </script>
 
 <template>
   <div
     data-slot="empty"
+    :data-variant="props.variant"
     :class="cn(
-      'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12',
+      'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance p-6 text-center md:p-12',
+      frameClass,
       props.class,
     )"
   >
diff --git a/src/components/empty/index.ts b/src/components/empty/index.ts
index 8c2944a..ce25c7f 100644
--- a/src/components/empty/index.ts
+++ b/src/components/empty/index.ts
@@ -8,6 +8,14 @@ export { default as EmptyHeader } from './EmptyHeader.vue'
 export { default as EmptyMedia } from './EmptyMedia.vue'
 export { default as EmptyTitle } from './EmptyTitle.vue'
 
+// Empty.variant is a plain string-literal prop in Empty.vue (no cva — the two
+// rungs are one class each), so the axis keys live here next to the re-exports
+// as the single source the showcase spec consumes (tabsListVariantKeys
+// precedent).
+export type EmptyVariant = 'framed' | 'bare'
+
+export const emptyVariantKeys = ['framed', 'bare'] as const satisfies readonly EmptyVariant[]
+
 export const emptyMediaVariants = cva(
   'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
   {
diff --git a/src/components/sheet/SheetBody.vue b/src/components/sheet/SheetBody.vue
new file mode 100644
index 0000000..0617d37
--- /dev/null
+++ b/src/components/sheet/SheetBody.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// SheetBody — the scrollable middle row of a SheetPanel. Counterpart to
+// DialogBody, minus the scroll-gutter hack: DialogBody has to pull the
+// scrollbar out of DialogContent's own p-6 (`-mr-3 pr-3`), whereas the sheet's
+// padding lives HERE, so the scrollbar already lands on the panel edge and the
+// content keeps its full gutter. Nothing left for a caller to transcribe.
+//
+// The vertical rhythm of the fields inside is NOT this component's business —
+// stacking Fields is FieldGroup's job (gap-5). One owner per concern.
+import type { HTMLAttributes } from 'vue'
+import { cn } from '#/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="sheet-body"
+    :class="cn('overflow-y-auto p-4', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/sheet/SheetPanel.vue b/src/components/sheet/SheetPanel.vue
new file mode 100644
index 0000000..68e38c2
--- /dev/null
+++ b/src/components/sheet/SheetPanel.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+// SheetPanel — the header/body/footer sheet shell, as a COMPONENT instead of a
+// recipe. Sibling of DialogPanel (§ Motion): same reasoning, other surface.
+//
+// Before this existed, every form drawer had to reassemble the shell by hand on
+// the call site, and the shape it converged on is the tell:
+//
+//   <SheetContent class="w-[calc(100%-1rem)] sm:max-w-lg gap-0">
+//     <div class="contents"><SheetHeader class="border-b border-border">…
+//     …<SheetFooter class="border-t border-border flex-row justify-end">
+//
+// Every fragment of that is a contract failing the acceptance test in
+// § Compose, don't style: a width the caller had to invent, `gap-0` undoing the
+// component's own gap, structural borders injected onto components (dirty
+// pattern 2), and `class="contents"` wrappers whose only job was to flatten the
+// author's markup back into the flex/grid flow the shell should have owned. The
+// component now owns all four, so a caller writes content only.
+//
+// Anatomy — three children, no classes:
+//   <SheetPanel width="lg" footer>
+//     <SheetHeader> <SheetTitle/> <SheetDescription/> </SheetHeader>
+//     <SheetBody>   …fields (compose a FieldGroup)…   </SheetBody>
+//     <SheetFooter> …actions…                        </SheetFooter>
+//   </SheetPanel>
+//
+// Props are the ONLY knobs a caller should need:
+// - width:   panel width rung, enumerated so the next rung is added HERE,
+//   deliberately, instead of a per-page `sm:max-w-[…]`. Narrow screens are NOT
+//   a rung: the panel is always viewport-minus-a-sliver there, so the scrim
+//   stays visible (and tappable) without the caller doing the calc.
+// - side:    left | right only. A sheet's row grid is a vertical stack, which a
+//   top/bottom sheet doesn't want; those stay on plain SheetContent.
+// - footer:  adds the third auto row AND the footer's top hairline. Deliberately
+//   a prop, not slot-sniffing — same reason as DialogPanel: the rows must be a
+//   static class for the CSS to exist, and a declared-but-empty row would still
+//   draw a stray divider at the panel bottom.
+//
+// The structural hairlines live here, on the panel, as child-scoped variants —
+// NOT on SheetHeader/SheetFooter themselves. A bare Sheet (mobile nav, a filter
+// drawer) is a single flowing surface with nothing to divide; the dividers are
+// a property of the THREE-ROW composition, so the composition owns them. That
+// also keeps them out of reach of the page, which is the whole point.
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import type { SheetPanelWidth } from '.'
+import { reactiveOmit } from '@vueuse/core'
+import { useForwardPropsEmits } from 'reka-ui'
+import { cn } from '#/lib/utils'
+import SheetContent from './SheetContent.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<DialogContentProps & {
+  class?: HTMLAttributes['class']
+  /** Panel width rung. Add rungs here deliberately — not per-page. */
+  width?: SheetPanelWidth
+  /** Edge the panel is anchored to. */
+  side?: 'left' | 'right'
+  /** Reserve the third grid row (and its top hairline) for a SheetFooter. */
+  footer?: boolean
+}>(), {
+  width: 'md',
+  side: 'right',
+  footer: false,
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'width', 'footer')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+// Full literal strings (not interpolation) so Tailwind's scanner sees them.
+// The rungs are the Dialog family's, one notch tighter: a side drawer reads
+// narrower than a centered dialog at the same nominal width.
+const WIDTH = {
+  sm: 'sm:max-w-sm',
+  md: 'sm:max-w-md',
+  lg: 'sm:max-w-lg',
+  xl: 'sm:max-w-xl',
+} as const
+</script>
+
+<template>
+  <SheetContent
+    v-bind="{ ...$attrs, ...forwarded }"
+    :class="cn(
+      // Rows, not the base flex column: minmax(0,1fr) is what caps the body so
+      // it scrolls INSIDE the panel instead of pushing the footer off-screen
+      // (same fragment DialogPanel exists to stop people mis-copying).
+      'grid gap-0',
+      footer ? 'grid-rows-[auto_minmax(0,1fr)_auto]' : 'grid-rows-[auto_minmax(0,1fr)]',
+      // Below the sm cap the panel is the viewport minus a 1rem sliver, so the
+      // scrim stays visible and tappable. The caller never computes this.
+      'w-[calc(100%-1rem)]',
+      WIDTH[width],
+      // Structural edges (§ Borders — the solid neutral --border family, which
+      // is exactly what a container divider is for). Scoped to direct children
+      // so they can never leak into nested content.
+      '*:data-[slot=sheet-header]:border-b *:data-[slot=sheet-header]:border-border',
+      footer && '*:data-[slot=sheet-footer]:border-t *:data-[slot=sheet-footer]:border-border',
+      // …and the footer's action row. SheetFooter's own base is the STACKED
+      // mobile-nav shape (full-width buttons in a column); a form drawer wants
+      // the Dialog footer convention — quiet action first, primary last,
+      // right-aligned, stacking (primary on top) only when the panel is
+      // narrower than sm. Same ownership call as the dividers: it belongs to
+      // the three-row composition, not to SheetFooter, and never to the page.
+      footer && '*:data-[slot=sheet-footer]:flex-col-reverse sm:*:data-[slot=sheet-footer]:flex-row sm:*:data-[slot=sheet-footer]:justify-end',
+      props.class,
+    )"
+  >
+    <slot />
+  </SheetContent>
+</template>
diff --git a/src/components/sheet/index.ts b/src/components/sheet/index.ts
index ee33431..c9300d6 100644
--- a/src/components/sheet/index.ts
+++ b/src/components/sheet/index.ts
@@ -1,8 +1,18 @@
 export { default as Sheet } from './Sheet.vue'
+export { default as SheetBody } from './SheetBody.vue'
 export { default as SheetClose } from './SheetClose.vue'
 export { default as SheetContent } from './SheetContent.vue'
 export { default as SheetDescription } from './SheetDescription.vue'
 export { default as SheetFooter } from './SheetFooter.vue'
 export { default as SheetHeader } from './SheetHeader.vue'
+export { default as SheetPanel } from './SheetPanel.vue'
 export { default as SheetTitle } from './SheetTitle.vue'
 export { default as SheetTrigger } from './SheetTrigger.vue'
+
+// SheetPanel.width is a plain string-literal prop in SheetPanel.vue (no cva —
+// each rung is one `sm:max-w-*`), so the axis keys live here next to the
+// re-exports as the single source the showcase spec consumes
+// (tabsListVariantKeys precedent).
+export type SheetPanelWidth = 'sm' | 'md' | 'lg' | 'xl'
+
+export const sheetPanelWidthKeys = ['sm', 'md', 'lg', 'xl'] as const satisfies readonly SheetPanelWidth[]
diff --git a/src/components/sidebar/SidebarMenuButton.vue b/src/components/sidebar/SidebarMenuButton.vue
index 7ac7aaa..d4cc623 100644
--- a/src/components/sidebar/SidebarMenuButton.vue
+++ b/src/components/sidebar/SidebarMenuButton.vue
@@ -11,6 +11,17 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<SidebarMenuButtonProps & {
+  /**
+   * Label shown when the rail is collapsed to icons.
+   *
+   * ONLY EFFECTIVE UNDER `<Sidebar collapsible="icon">`. The tooltip is gated
+   * on `state === 'collapsed'` (see TooltipContent's `:hidden` below), and
+   * under `collapsible="offcanvas"` — the default — a collapsed sidebar is
+   * slid off the viewport entirely, so there is no visible trigger to hover:
+   * the tooltip can never render. Passing one there is dead copy that reads as
+   * shipped a11y text but reaches nobody. It is also suppressed on mobile,
+   * where the sidebar is a Sheet and hover does not exist.
+   */
   tooltip?: string | Component
 }>(), {
   as: 'button',
diff --git a/src/components/sidebar/SidebarMenuSub.vue b/src/components/sidebar/SidebarMenuSub.vue
index eac0e66..1796c39 100644
--- a/src/components/sidebar/SidebarMenuSub.vue
+++ b/src/components/sidebar/SidebarMenuSub.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <ul
     data-slot="sidebar-menu-sub"
-    data-sidebar="menu-badge"
+    data-sidebar="menu-sub"
     :class="cn(
       'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
       'group-data-[collapsible=icon]:hidden',
diff --git a/src/components/tabs/TabsList.vue b/src/components/tabs/TabsList.vue
index d93ac02..0408a8f 100644
--- a/src/components/tabs/TabsList.vue
+++ b/src/components/tabs/TabsList.vue
@@ -3,7 +3,7 @@ import type { TabsListProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { TabsList } from 'reka-ui'
-import { computed, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref } from 'vue'
+import { computed, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, useAttrs } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<TabsListProps & {
@@ -12,10 +12,46 @@ const props = defineProps<TabsListProps & {
   // chrome ported verbatim. Both keep full Tabs semantics + panels — only the
   // skin + indicator differ.
   variant?: 'underline' | 'pill'
+  /** Accessible name for the tablist. Required whenever the tab row is not
+   *  already named by a visible heading — a11y wants every tablist named, and
+   *  a page has no other way to reach the inner element (see below). */
+  label?: string
 }>()
 
+// The root here is a WRAPPER div that exists only to host the sliding
+// indicator; role="tablist" lives on the inner reka TabsList. Default
+// fallthrough would park a caller's `aria-label` on the wrapper, where no
+// screen reader will ever read it — an accessible name that silently does
+// nothing is worse than none, because it also satisfies the audit tool. So
+// attrs are split by hand: aria-* goes to the element that carries the role,
+// everything else (id, style, listeners) stays on the wrapper.
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+
 const variant = computed(() => props.variant ?? 'underline')
-const delegatedProps = reactiveOmit(props, 'class', 'variant')
+const delegatedProps = reactiveOmit(props, 'class', 'variant', 'label')
+
+const ariaAttrs = computed(() => {
+  const picked: Record<string, unknown> = {}
+  for (const [key, value] of Object.entries(attrs)) {
+    if (key.startsWith('aria-'))
+      picked[key] = value
+  }
+  // The prop is the discoverable spelling and wins over a raw attr.
+  if (props.label !== undefined)
+    picked['aria-label'] = props.label
+  return picked
+})
+
+const rootAttrs = computed(() => {
+  const rest: Record<string, unknown> = {}
+  for (const [key, value] of Object.entries(attrs)) {
+    if (!key.startsWith('aria-'))
+      rest[key] = value
+  }
+  return rest
+})
 
 // The indicator is MEASURED off the active trigger (same technique as
 // SegmentedControl) so the slide can never mismatch a trigger's footprint.
@@ -143,6 +179,7 @@ const indicatorStyle = computed(() => {
 <template>
   <div
     ref="root"
+    v-bind="rootAttrs"
     :data-variant="variant"
     :class="cn(rootClass, props.class)"
     @pointerdown="onDown"
@@ -158,7 +195,7 @@ const indicatorStyle = computed(() => {
     />
     <TabsList
       data-slot="tabs-list"
-      v-bind="delegatedProps"
+      v-bind="{ ...delegatedProps, ...ariaAttrs }"
       :class="listClass"
     >
       <slot />
diff --git a/src/components/textarea/Textarea.vue b/src/components/textarea/Textarea.vue
index 0c9929c..a180795 100644
--- a/src/components/textarea/Textarea.vue
+++ b/src/components/textarea/Textarea.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
+import type { TextareaVariant } from '.'
 import { useVModel } from '@vueuse/core'
 import { computed } from 'vue'
 import { cn } from '#/lib/utils'
@@ -9,8 +10,12 @@ const props = withDefaults(defineProps<{
   defaultValue?: string | number
   modelValue?: string | number
   size?: 'sm' | 'default' | 'lg'
+  /** Content role. `code` is the machine-text rung — a JSON body, a prompt
+   *  template, a config blob. See the note on codeClass below. */
+  variant?: TextareaVariant
 }>(), {
   size: 'default',
+  variant: 'default',
 })
 
 const emits = defineEmits<{
@@ -27,6 +32,21 @@ const sizeClass = computed(() => ({
   default: 'min-h-16 px-3 py-2 text-label',
   lg: 'min-h-20 px-3.5 py-2.5 text-control',
 }[props.size]))
+
+// `code` is a content ROLE, not a free-form skin: the caller says "this field
+// holds machine text" and the component decides what that looks like. Without
+// it, the only way to get a JSON/config editor was injecting class="font-mono"
+// — the className red line (§ Compose, don't style). The guard happens not to
+// catch `font-*` yet, but the rule already banned it.
+//
+// It resets tracking as well as swapping family: the base +0.01em is prose
+// tracking tuned for the sans stack, and stacking it on a monospace's already
+// wide advance makes columns drift. Orthogonal to `size` (that owns the type
+// rung) — a code textarea is still sm/default/lg. Vocabulary note: Badge's
+// `font: mono` axis is a pure family switch on a chip; this is the role hook a
+// code SURFACE hangs off, so future editor affordances (tab-size, no-wrap)
+// land here instead of being re-derived per page.
+const codeClass = computed(() => props.variant === 'code' ? 'font-mono tracking-normal' : '')
 </script>
 
 <template>
@@ -34,9 +54,11 @@ const sizeClass = computed(() => ({
     v-model="modelValue"
     data-slot="textarea"
     :data-size="props.size"
+    :data-variant="props.variant"
     :class="cn(
       'flex field-sizing-content w-full rounded-md tracking-[0.01em] text-foreground',
       sizeClass,
+      codeClass,
       'outline-none resize-none',
       'disabled:cursor-not-allowed disabled:opacity-40',
       props.class
diff --git a/src/components/textarea/index.ts b/src/components/textarea/index.ts
index 6a7ab2a..8d2be26 100644
--- a/src/components/textarea/index.ts
+++ b/src/components/textarea/index.ts
@@ -1 +1,11 @@
 export { default as Textarea } from './Textarea.vue'
+
+// Textarea.size / .variant are plain string-literal props in Textarea.vue (no
+// cva — each rung is one entry of a class map), so the axis keys live here next
+// to the re-export as the single source the showcase spec consumes
+// (tabsListVariantKeys precedent).
+export type TextareaVariant = 'default' | 'code'
+export type TextareaSize = 'sm' | 'default' | 'lg'
+
+export const textareaVariantKeys = ['default', 'code'] as const satisfies readonly TextareaVariant[]
+export const textareaSizeKeys = ['default', 'sm', 'lg'] as const satisfies readonly TextareaSize[]
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..aaca05e
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig, mergeConfig } from 'vitest/config'
+import viteConfig from './vite.config'
+
+// Tests live in `src/**/__tests__/` — the path tsconfig.json already excludes
+// from `vue-tsc --build`, so a test file can never widen the shipped surface.
+//
+// Scope note: this is NOT a "test every component" harness. The library's three
+// enforcement layers (tokens / this contract / the guard) all read SOURCE TEXT,
+// which makes them blind to one specific class of defect: a composition that
+// type-checks and whose class strings are all legal, but whose RENDERED DOM
+// puts them on the wrong element. Reach for a test here only when a contract
+// promise is invisible to the other three layers — see Button's as-child test.
+export default mergeConfig(viteConfig, defineConfig({
+  test: {
+    environment: 'happy-dom',
+    include: ['src/**/__tests__/*.test.ts'],
+  },
+}))