From fb0667f99094892ddeaa7e8ee3c30017c85ee9fa Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 00:20:33 +0200
Subject: [PATCH 001/185] docs: add theme studio master plan

Plan for the Nuxt UI theme customizer: standalone /theme page in the main
header nav, ThemeDoc + provenance resolver engine, OKLCH palette curve
editor, inheritance drill-down, presets + shuffle, minimal CSS/app.config
exports, bento + template previews, and a phased roadmap with upstream
core-gap PRs.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 THEME_STUDIO_PLAN.md | 328 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 328 insertions(+)
 create mode 100644 THEME_STUDIO_PLAN.md

diff --git a/THEME_STUDIO_PLAN.md b/THEME_STUDIO_PLAN.md
new file mode 100644
index 0000000000..6cd4a11f20
--- /dev/null
+++ b/THEME_STUDIO_PLAN.md
@@ -0,0 +1,328 @@
+# Nuxt UI Theme Studio — Master Plan
+
+> Working plan for the "ultimate theme customizer" contribution, targeting Nuxt UI v5.
+> Status: draft for discussion.
+
+## 1. Vision
+
+Bootstrap sites "all looked the same" only when people shipped the default CSS. The fix was
+never more components — it was making deep customization *approachable*. Nuxt UI has the
+best raw material of any component system today: a clean chain of Tailwind palette → color
+aliases → semantic CSS variables → component variants, split across CSS and `app.config`.
+What it lacks is a rich theming ecosystem and a tool that exposes that chain.
+
+The Theme Studio is a standalone page (main header navigation, not part of the docs) that:
+
+- lets you go from "pick a primary color" to "edit the OKLCH curve of your neutral palette"
+  on one continuous slope of drill-down, Blender-style;
+- shows *where every value comes from* (inherited vs. overridden), Bootstrap-variable-chain-style;
+- ships opinionated presets (Shadcn, Neo-brutalist, Anthropic, Spotify, …) and a taste-constrained shuffle;
+- exports the **minimal** `main.css` + `app.config.ts` diff — only what you changed;
+- previews live on a component bento and on template-scale pages (SaaS, Chat, Dashboard).
+
+North star: someone who has never opened the theming docs produces a theme that doesn't
+look like default Nuxt UI in 60 seconds — and someone who cares can drill all the way down
+to a single semantic token or component slot without leaving the page.
+
+## 2. Ground truth: how Nuxt UI theming works today (v4)
+
+The studio must be a *lens over the real system*, not a parallel one. The real system is a
+five-level inheritance chain:
+
+| Level | What | Where | Mechanism |
+|---|---|---|---|
+| L0 | Palette: `--color-{name}-{50..950}` | Tailwind `@theme` / CSS | Tailwind defaults, overridable in `@theme static` |
+| L1 | Alias shades: `--ui-color-{alias}-{shade}` | `src/runtime/plugins/colors.ts` | Generated at runtime from `app.config ui.colors` (`primary`, `secondary`, `success`, `info`, `warning`, `error`, `neutral`), each shade falls back through `var(--color-{value}-{shade}, hex)` |
+| L2 | Semantic tokens: `--ui-text[-dimmed/muted/toned/highlighted/inverted]`, `--ui-bg[-muted/elevated/accented/inverted]`, `--ui-border[-muted/accented/inverted]`, `--ui-primary` (=shade 500 light / 400 dark), `--ui-radius`, `--font-sans` | `src/runtime/index.css` (`:root` / `.dark`) | Plain CSS custom properties referencing L1 |
+| L3 | Component themes: slots / variants / compoundVariants | `src/theme/*.ts` via `tv()` | Tailwind classes referencing L2 utilities (`text-muted`, `bg-elevated`, `rounded-md`…) |
+| L4 | Defaults & overrides: `defaultVariants` + `app.config ui.<component>` | components spread `appConfig.ui?.<name>` into their `tv()` options | Runtime-mergeable, including `defaultVariants` per component |
+
+Facts that matter for the design (verified in source):
+
+- **Per-component `defaultVariants` are already overridable at runtime** via
+  `app.config ui.button.defaultVariants` etc. (`Button.vue:95-108` spreads `appConfig.ui?.button`
+  into the `tv()` options).
+- **Global `defaultVariants`** exist only as a *build-time* module option and only for
+  `color` and `size` (`src/module.ts:67`) — there is no global "default variant = subtle"
+  switch. Gap → §7.
+- The docs site already live-applies themes with zero flash: `useHead` inline `<style>`
+  blocks + direct `app.config` mutation + localStorage persistence + FOUC inline scripts
+  (`docs/app/composables/useTheme.ts`, `docs/app/plugins/theme.ts`). There is also a
+  sanitized `applyThemeSettings()` path used by the AI theme feature — the studio must
+  stay compatible with (and eventually power) it.
+- The current popover exports are already **minimal-diff** (compare against defaults, emit
+  only overrides, for both Nuxt `app.config.ts` and Vue `vite.config.ts`). This philosophy
+  scales up; the mechanism (ad-hoc conditionals) doesn't — it becomes a generic
+  diff-against-defaults engine (§4).
+- The docs site already has custom neutral palettes (`taupe`, `mauve`, `mist`, `olive`)
+  injected as `--color-*-{shade}` hex values — exactly the pattern the palette editor
+  generalizes.
+
+## 3. Core concept: the Theme Document and its resolver
+
+Everything in the studio is a view over one serializable, versioned **Theme Document**.
+The rule that makes inheritance, drill-down, shuffle, presets, share-links and minimal
+export all fall out of one design:
+
+> **A ThemeDoc stores only explicit overrides. Everything else is `inherit`.**
+
+```ts
+interface ThemeDoc {
+  version: 1
+  meta?: { name?: string, base?: string /* preset id this was forked from */, seed?: number }
+
+  /** L0 — custom or tweaked palettes. Generator params kept so palettes stay editable. */
+  palettes?: Record<string, {
+    /** explicit shades win over generated ones */
+    shades?: Partial<Record<Shade, string>>
+    /** OKLCH curve generator params (see §5.2) */
+    curve?: { anchor?: string, lightness?: CurveParams, chroma?: CurveParams, hue?: CurveParams }
+    /** when tweaking an existing tailwind palette rather than creating one */
+    extends?: string
+  }>
+
+  /** L1 — alias → palette name ('indigo', 'neutral', or a key of `palettes`) */
+  colors?: Partial<Record<'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral', string>>
+
+  /** L2 — semantic token overrides per mode; values are `var(--ui-color-…)` refs or raw colors */
+  tokens?: { light?: Record<string, string>, dark?: Record<string, string> }
+  radius?: number
+  font?: { sans?: string /* future: mono, heading */ }
+  icons?: string
+
+  /** L4 — global defaults, expanded to per-component app.config on export until core supports it */
+  defaultVariants?: { color?: string, size?: string, variant?: string }
+
+  /** L4 — per-component overrides: defaultVariants + slot/variant class overrides */
+  components?: Record<string, Record<string, unknown>>
+}
+```
+
+Around it, a small pure-TypeScript **theme engine** (no Vue imports, fully unit-testable):
+
+- `resolve(doc): ResolvedTheme` — walks the chain and computes every effective value **with
+  provenance**: `{ value, source: 'default' | 'override', chain: ['--ui-border', '--ui-color-neutral-200', '--color-slate-200', '#e2e8f0'] }`.
+  Provenance is what powers the Blender-style UI: overridden controls get a highlight dot,
+  every control has "reset to inherited", and hovering a value shows its inheritance
+  breadcrumb.
+- `materializePalette(def): Record<Shade, string>` — runs the OKLCH curve generator.
+- `diff(doc): { css: string, appConfig: object }` — the export generators. Because the doc
+  *is* the diff, minimal export is free: serialize what's there, route each override to the
+  right medium (CSS vs config) per the table in §5.6.
+- `applyRuntime(doc)` — thin Vue adapter: mutates `app.config` + feeds `useHead` styles,
+  extending the exact mechanism `useTheme` uses today (same localStorage keys, so the
+  existing popover and the studio stay in sync — the popover becomes the "mini" remote
+  control of the same state, plus an "Open Theme Studio →" link).
+
+## 4. The page
+
+**Placement** — standalone page in the main header navigation (like Templates, Showcase,
+Figma), *not* under `/docs`. Proposed route: `/theme` (bikeshed: `/studio`, `/themes`).
+Added to `desktopLinks` / mobile links in `docs/app/components/header/`. The page gets the
+full viewport; the docs chrome (aside, toc) doesn't apply.
+
+**Layout** — three zones:
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│ Presets ▾   🎲 Shuffle   [locks]        Share ⧉  Export ⬇  ↺ │
+├───────────────┬──────────────────────────────────────────────┤
+│ CONTROLS      │ PREVIEW                                      │
+│               │  [Bento | SaaS | Dashboard | Chat]  ☀/🌙  ⤢  │
+│ ▸ Essentials  │                                              │
+│ ▸ Palette     │   live components / template page            │
+│ ▸ Tokens      │                                              │
+│ ▸ Components  │                                              │
+└───────────────┴──────────────────────────────────────────────┘
+```
+
+**Control altitudes** (the drill-down slope — each level is optional, defaults flow up):
+
+1. **Essentials** — parity with today's popover: primary, neutral, radius, font, icons,
+   color mode, plus the new *global default variant* control ("solid / soft / subtle /
+   outline everywhere"). One screen, 60-second theme.
+2. **Palette** — the OKLCH curve editor (§5.2). Edit primary's ramp, replace the neutral
+   ramp ("I want my -50s less white"), create named custom palettes.
+3. **Tokens** — the semantic layer: every `--ui-*` variable per light/dark, each shown with
+   its inheritance chain and a picker constrained to sensible values (a shade of an alias,
+   another token, or a raw color). This is where "background color (and edit)" lives beyond
+   the neutral swap: remap `--ui-bg` to `neutral-950` in dark, tint `--ui-bg-muted`, etc.
+4. **Components** — per-component `defaultVariants` and (expert mode) slot class overrides,
+   fed by the same theme metadata the docs' ComponentTheme pages use. Search box + the
+   handful of components people actually restyle (Button, Input, Card, Badge, Alert…)
+   surfaced first.
+
+Every control at every altitude follows the same contract: shows effective value, shows
+override state (dot), offers reset-to-inherited, and edits write into the ThemeDoc — never
+into derived state.
+
+## 5. Feature specs
+
+### 5.1 Primary & background color — choose *and edit*
+
+- Choose: swatch grid of Tailwind palettes (as today) + black-as-primary + custom palettes.
+- Edit: any chosen palette opens in the curve editor pre-loaded with its current values
+  (`extends: 'indigo'` + sparse `shades` overrides → export emits only changed shades).
+- Background = the neutral alias + the `--ui-bg*` token remaps in the Tokens altitude.
+
+### 5.2 OKLCH palette curve editor (the gray-generator, generalized)
+
+Port of the Tailwind gray palette generator concept, on OKLCH (perceptually uniform, what
+Tailwind v4 itself uses):
+
+- Three curves across the 11 shade stops: **Lightness** (monotonic, eased), **Chroma**
+  (bell-ish curve — where does color concentrate), **Hue** (base + drift, for warm-dark /
+  cool-light ramps). Parametric (a few draggable handles per curve), not 33 free numbers —
+  with per-shade nudge overrides on top.
+- **Anchor color**: paste a brand hex, pin it to a stop (e.g. 500), curves fit around it.
+- Rendering: `culori` (tiny, tree-shakeable) for OKLCH↔sRGB + gamut clamping.
+- Guardrails inline: WCAG/APCA contrast badges for the token pairs that matter
+  (`text` on `bg`, `text-inverted` on `primary-500`, `text-muted` on `bg-elevated`…).
+- Output: 11 hex values injected as `--color-{name}-{shade}` (exactly how the docs' custom
+  neutrals work today) — plus the generator params stored in the doc so it stays editable.
+
+### 5.3 Inheritance & drill-down (Blender × Bootstrap)
+
+Covered structurally by §3/§4. UI specifics:
+
+- Overridden values get a colored dot + bold label (Blender's "changed from default" cue).
+- Hover/expand shows the chain: `--ui-border ← --ui-color-neutral-200 ← --color-slate-200 ← #e2e8f0`.
+- "Reset" exists at every granularity: single value, section, altitude, whole theme.
+- Editing an inherited value forks it into an override *at that level only* — e.g. changing
+  `--ui-bg-elevated` doesn't touch the neutral palette; changing the neutral palette flows
+  into every token still inheriting from it.
+
+### 5.4 Default variants
+
+- Global control in Essentials: default `variant` (+ `color`, `size`) for all components
+  that have them. Until core has a global runtime switch (§7), the engine expands it to
+  per-component `defaultVariants` entries in the exported `app.config` (the mechanism that
+  already works today).
+- Per-component refinement in the Components altitude ("Buttons solid, everything else subtle").
+
+### 5.5 Presets & shuffle
+
+Presets are just ThemeDocs shipped as static JSON — each one deliberately exercises a
+different engine capability (they double as milestones and as living tests):
+
+| Preset | What it proves |
+|---|---|
+| **Nuxt UI** (default) | empty doc, everything inherited |
+| **Shadcn** | neutral=zinc, black-as-primary, radius 0.5, tight shadows, global subtle-ish variants |
+| **Neo-brutalist** | radius 0, thick borders, hard offset shadows, bold type → component class overrides + the shadow/border token gap (§7) |
+| **Anthropic** | custom warm neutral ramp (ivory/kraft/book-cloth) + clay primary (~`#CC785C`) → the palette curve editor |
+| **Spotify** | dark-first, custom `#1DB954` ramp, near-black green-tinted neutrals, pill buttons → per-component defaultVariants + token remaps |
+
+- Selecting a preset *replaces* the doc (with confirm if dirty); `meta.base` tracks the fork
+  so "changed vs. preset" provenance still works.
+- **Shuffle** 🎲: seeded, taste-constrained randomness — pick an archetype (preset family),
+  then hue, curve params, radius, font pairing and variant defaults from curated
+  compatibility sets. Per-section **locks** (lock primary, shuffle the rest — coolors.co
+  model). Seed stored in `meta.seed` so a great roll is reproducible and shareable.
+- Later: community preset gallery — presets are JSON, submissions are PRs adding a file.
+
+### 5.6 Export — minimal by construction
+
+Routing table (each ThemeDoc field has exactly one export medium):
+
+| Doc field | `main.css` | `app.config.ts` / `vite.config.ts` |
+|---|---|---|
+| `palettes` | `@theme static { --color-… }` (only changed/generated shades) | — |
+| `colors` (aliases) | — | `ui.colors` |
+| `tokens` | `:root, .light { --ui-… }` / `.dark { … }` | — |
+| `radius`, `font` | `:root { --ui-radius }` / `@theme { --font-sans }` | — |
+| `icons` | — | `ui.icons` |
+| `defaultVariants` (global) | — | expanded per-component (until core support) |
+| `components` | — | `ui.<component>` |
+
+- Both targets rendered for Nuxt and Vue (as today), shown in a side-by-side code panel
+  with copy buttons, not just clipboard-only.
+- **Share URL**: lz-string-compressed doc in the hash (`/theme#<payload>`) → paste a link
+  in a PR/issue/Discord and the recipient sees your exact theme. Also "Copy JSON" for
+  preset submissions and for feeding the AI theme endpoint.
+
+### 5.7 Preview
+
+- **Bento** (default): a dense grid of real components rendered in-page — buttons in all
+  variants, form cluster, card, table, tabs, chat bubbles, pricing card, calendar, toast
+  trigger, auth form. Same Vue app ⇒ live theming is free via the existing head-style +
+  app.config mechanism. Light/dark toggle, and a split view showing both modes at once.
+- **Template previews**: the real templates (SaaS, Chat, Dashboard…) are separate repos
+  deployed cross-origin — CSS injection is impossible there. Instead: lightweight
+  replica pages inside the docs app (`/theme/preview/saas` etc.), rendered in a
+  **same-origin iframe** (isolates full-page layout from the studio chrome) and themed via
+  `BroadcastChannel`/localStorage — the persistence layer already broadcasts. Start with
+  one (SaaS landing), add more as the bento proves insufficient.
+
+## 6. Architecture & repo layout
+
+```
+docs/app/
+  utils/theme-engine/          # pure TS, unit-tested (vitest)
+    schema.ts                  # ThemeDoc types + zod-ish validation + version migration
+    resolve.ts                 # provenance resolver
+    palette.ts                 # OKLCH curve generator (culori)
+    export-css.ts, export-config.ts
+    presets/*.json
+  composables/useThemeStudio.ts  # doc state, persistence (same keys as useTheme), applyRuntime
+  pages/theme/index.vue          # the studio
+  pages/theme/preview/*.vue      # iframe template replicas
+  components/theme-studio/       # ControlRow, ProvenanceChip, PaletteCurveEditor,
+                                 # TokenGrid, PresetGallery, ShuffleBar, ExportPanel, BentoPreview…
+```
+
+- Engine stays framework-free so it can graduate later into a package
+  (`@nuxt/ui-theme-tools`) usable by a CLI (`npx nuxt-ui-theme`) or third parties — but we
+  don't build the package first. Docs-side proves it.
+- `useTheme` (popover) is refactored to read/write through the same store; the popover
+  shrinks to Essentials + "Open Theme Studio →".
+- The AI theme path (`applyThemeSettings`) migrates to "AI produces a ThemeDoc" — same
+  sanitization boundary, richer output. Optional later phase: a "describe your brand" box
+  in the studio itself.
+
+## 7. Core gaps → small upstream PRs (the contribution trail)
+
+The studio mostly needs zero core changes (it's docs-side). But it exposes real gaps worth
+individual, well-scoped PRs to `nuxt/ui` — nice contribution artifacts on their own:
+
+1. **Global `defaultVariants.variant`** — module option today only covers `color`/`size`
+   and is build-time; propose adding `variant` and/or a runtime `app.config` equivalent.
+2. **Semantic shadow & border-width tokens** (`--ui-shadow-*`, `--ui-border-width`) —
+   without them, neo-brutalism needs per-component class hacks; with them it's two tokens.
+3. **Font pairing** — only `--font-sans` is themed today; a heading/serif slot would
+   unlock editorial presets (Anthropic-style).
+4. **Custom alias names** are build-time (`theme.colors` module option) — fine for the
+   studio (works with the seven standard aliases), documented as a known limit.
+
+Each lands independently; the studio degrades gracefully without them.
+
+## 8. Phased roadmap (each phase ships)
+
+- **P0 — RFC.** Open a discussion/issue on `nuxt/ui`: this document, distilled. Align on
+  naming, the header-nav placement, v5 timing, and appetite for the §7 core PRs before
+  building big. (The team is active; theme tooling touches their website — buy-in first.)
+- **P1 — Engine.** `theme-engine/` with schema, resolver+provenance, palette generator,
+  export generators. Pure TS + tests. Snapshot tests: preset → expected css/config output.
+- **P2 — Studio shell.** `/theme` page + header nav entry, bento preview, Essentials
+  altitude at parity with the popover, shared state with it, reset. *Already useful.*
+- **P3 — Palette editor.** OKLCH curves, anchor color, contrast badges, custom
+  primary/neutral flowing into minimal `@theme` export.
+- **P4 — Drill-down.** Tokens altitude with provenance UI + reset-to-inherited; Components
+  altitude with per-component/global defaultVariants.
+- **P5 — Presets & shuffle.** The five launch presets, seeded shuffle with locks, share
+  URLs, JSON import/export.
+- **P6 — Scale-out.** Template preview iframes, a11y/contrast audit panel, community preset
+  gallery, AI → ThemeDoc integration.
+
+## 9. Risks & open questions
+
+- **v5 timing** — repo is v4.9.0; "v5" scope/schedule unknown. Mitigation: build against
+  v4 branch, version the ThemeDoc schema, keep the engine independent of component
+  internals (it only knows tokens + app.config shapes).
+- **Scope creep** — this plan is deliberately phase-gated; P2 alone already beats the
+  status quo. Resist starting the palette editor before the engine has tests.
+- **Preview drift** — replica template pages need upkeep; start with one, treat the bento
+  as the primary surface.
+- **Upstream acceptance** — worst case the studio lives as a community site first; the
+  engine/package split keeps that door open. P0 exists to avoid finding out late.
+- **Naming** — "Theme Studio"? route `/theme`? To settle in P0.

From ccaa4caa9cc4a17a65c65b5f2d95ae3617fc5860 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 00:32:05 +0200
Subject: [PATCH 002/185] feat(docs): add Theme Studio v0 page

Standalone /theme page in the main header nav: Essentials controls
(primary, neutral, radius, font, icons, color mode) sharing state with
the existing popover via useTheme, a live component bento preview,
seeded-taste shuffle, minimal-diff export panel (main.css + app.config),
and an Open Theme Studio link in the popover.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/theme-picker/ThemePicker.vue   |  12 ++
 .../theme-studio/ThemeStudioBento.vue         | 195 ++++++++++++++++++
 .../theme-studio/ThemeStudioControls.vue      | 193 +++++++++++++++++
 .../theme-studio/ThemeStudioExport.vue        |  88 ++++++++
 docs/app/composables/useHeader.ts             |   7 +
 docs/app/pages/theme.vue                      | 101 +++++++++
 6 files changed, 596 insertions(+)
 create mode 100644 docs/app/components/theme-studio/ThemeStudioBento.vue
 create mode 100644 docs/app/components/theme-studio/ThemeStudioControls.vue
 create mode 100644 docs/app/components/theme-studio/ThemeStudioExport.vue
 create mode 100644 docs/app/pages/theme.vue

diff --git a/docs/app/components/theme-picker/ThemePicker.vue b/docs/app/components/theme-picker/ThemePicker.vue
index badfc7b9f7..269cfb8c7f 100644
--- a/docs/app/components/theme-picker/ThemePicker.vue
+++ b/docs/app/components/theme-picker/ThemePicker.vue
@@ -224,6 +224,18 @@ const {
         </div>
       </fieldset>
 
+      <UButton
+        to="/theme"
+        label="Open Theme Studio"
+        icon="i-lucide-swatch-book"
+        color="neutral"
+        variant="soft"
+        size="sm"
+        block
+        class="text-[11px] -mx-2 w-[calc(100%+1rem)]"
+        @click="open = false"
+      />
+
       <fieldset v-if="hasCSSChanges || hasConfigChanges">
         <legend class="text-[11px] leading-none font-semibold mb-2 select-none">
           Export
diff --git a/docs/app/components/theme-studio/ThemeStudioBento.vue b/docs/app/components/theme-studio/ThemeStudioBento.vue
new file mode 100644
index 0000000000..5af032c55c
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioBento.vue
@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { CalendarDate } from '@internationalized/date'
+
+const toast = useToast()
+
+const variants = ['solid', 'outline', 'soft', 'subtle', 'ghost'] as const
+
+const checked = ref(true)
+const switched = ref(true)
+const slider = ref(40)
+const page = ref(3)
+const pin = ref([])
+const calendarDate = shallowRef(new CalendarDate(2026, 7, 5))
+
+const tabItems = [
+  { label: 'Account', icon: 'i-lucide-user' },
+  { label: 'Password', icon: 'i-lucide-lock' },
+  { label: 'Billing', icon: 'i-lucide-credit-card' }
+]
+
+const breadcrumbItems = [
+  { label: 'Home', icon: 'i-lucide-house' },
+  { label: 'Components', to: '/docs/components' },
+  { label: 'Theme Studio' }
+]
+
+const accordionItems = [
+  { label: 'Is it accessible?', icon: 'i-lucide-accessibility', content: 'Yes. It adheres to the WAI-ARIA design pattern.' },
+  { label: 'Is it themeable?', icon: 'i-lucide-swatch-book', content: 'Yes. That is rather the point of this page.' }
+]
+
+const selectItems = ['Backlog', 'Todo', 'In Progress', 'Done']
+const selectValue = ref('Todo')
+
+function showToast() {
+  toast.add({
+    title: 'Theme applied',
+    description: 'This toast is styled by your theme too.',
+    icon: 'i-lucide-swatch-book'
+  })
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 items-start">
+    <UCard :ui="{ body: 'flex flex-col gap-3' }">
+      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
+        Buttons
+      </p>
+
+      <div v-for="color in ['primary', 'neutral', 'error'] as const" :key="color" class="flex flex-wrap items-center gap-2">
+        <UButton
+          v-for="variant in variants"
+          :key="variant"
+          :color="color"
+          :variant="variant"
+          :label="variant"
+          size="sm"
+          class="capitalize"
+        />
+      </div>
+
+      <div class="flex flex-wrap items-center gap-2">
+        <UButton icon="i-lucide-plus" size="sm" label="New item" />
+        <UButton
+          icon="i-lucide-settings"
+          size="sm"
+          color="neutral"
+          variant="outline"
+          square
+          aria-label="Settings"
+        />
+        <UButton size="sm" color="neutral" variant="ghost" label="Cancel" />
+        <UButton size="sm" loading label="Saving" />
+      </div>
+    </UCard>
+
+    <UCard :ui="{ body: 'flex flex-col gap-4' }">
+      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
+        Form
+      </p>
+
+      <UFormField label="Email" required help="We'll never share it.">
+        <UInput icon="i-lucide-at-sign" placeholder="you@example.com" class="w-full" />
+      </UFormField>
+
+      <UFormField label="Status">
+        <USelect v-model="selectValue" :items="selectItems" class="w-full" />
+      </UFormField>
+
+      <div class="flex items-center justify-between gap-4">
+        <UCheckbox v-model="checked" label="Remember me" />
+        <USwitch v-model="switched" label="Notifications" />
+      </div>
+
+      <USlider v-model="slider" />
+
+      <UButton label="Submit" block />
+    </UCard>
+
+    <UCard :ui="{ body: 'flex flex-col gap-3' }">
+      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
+        Feedback
+      </p>
+
+      <UAlert
+        title="Heads up!"
+        description="Semantic tokens keep this readable in any theme."
+        icon="i-lucide-terminal"
+        color="primary"
+        variant="subtle"
+      />
+
+      <div class="flex flex-wrap items-center gap-2">
+        <UBadge label="Badge" />
+        <UBadge label="Outline" variant="outline" />
+        <UBadge label="Soft" variant="soft" color="neutral" />
+        <UBadge label="Subtle" variant="subtle" color="error" />
+        <UBadge label="Success" variant="subtle" color="success" />
+      </div>
+
+      <UProgress :model-value="65" />
+
+      <div class="flex items-center gap-2">
+        <UButton
+          label="Show toast"
+          color="neutral"
+          variant="outline"
+          size="sm"
+          icon="i-lucide-bell"
+          @click="showToast"
+        />
+        <UTooltip text="Tooltips follow the theme too">
+          <UButton label="Hover me" color="neutral" variant="ghost" size="sm" />
+        </UTooltip>
+      </div>
+    </UCard>
+
+    <UCard :ui="{ body: 'flex flex-col gap-3' }">
+      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
+        Navigation
+      </p>
+
+      <UBreadcrumb :items="breadcrumbItems" />
+
+      <UTabs :items="tabItems" :content="false" />
+
+      <UPagination v-model:page="page" :total="50" size="sm" />
+    </UCard>
+
+    <UCard :ui="{ body: 'flex flex-col gap-3' }">
+      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
+        Content
+      </p>
+
+      <div class="flex items-center gap-3">
+        <UChip inset color="success">
+          <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
+        </UChip>
+        <div class="text-sm">
+          <p class="font-medium text-highlighted">
+            Benjamin Canac
+          </p>
+          <p class="text-muted">
+            benjamincanac
+          </p>
+        </div>
+        <UButton label="Follow" size="xs" color="neutral" variant="subtle" class="ms-auto" />
+      </div>
+
+      <USeparator />
+
+      <UAccordion :items="accordionItems" />
+
+      <div class="flex items-center gap-1.5 text-sm text-muted">
+        Press
+
+        <UKbd value="meta" />
+        <UKbd value="K" />
+
+        to search
+      </div>
+    </UCard>
+
+    <UCard :ui="{ body: 'flex flex-col gap-3 items-center' }">
+      <p class="text-xs font-semibold text-muted uppercase tracking-wide self-start">
+        Pickers
+      </p>
+
+      <UCalendar v-model="calendarDate" size="sm" class="w-full" />
+
+      <UPinInput v-model="pin" :length="4" placeholder="○" />
+    </UCard>
+  </div>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
new file mode 100644
index 0000000000..4f901ae081
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+
+const {
+  neutralColors,
+  neutral,
+  primaryColors,
+  primary,
+  blackAsPrimary,
+  setBlackAsPrimary,
+  radiuses,
+  radius,
+  fonts,
+  font,
+  icon,
+  icons,
+  modes,
+  mode
+} = useTheme()
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <fieldset>
+      <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
+        Primary
+
+        <UButton
+          to="/docs/getting-started/theme/css-variables#colors"
+          size="xs"
+          color="neutral"
+          variant="link"
+          icon="i-lucide-help-circle"
+          class="p-0 -my-0.5"
+          :ui="{ leadingIcon: 'size-3' }"
+        />
+      </legend>
+
+      <div class="grid grid-cols-3 gap-1">
+        <ThemePickerButton
+          label="Black"
+          :selected="blackAsPrimary"
+          @click="setBlackAsPrimary(true)"
+        >
+          <template #leading>
+            <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
+          </template>
+        </ThemePickerButton>
+
+        <ThemePickerButton
+          v-for="color in primaryColors"
+          :key="color"
+          :label="color"
+          :chip="color"
+          :selected="!blackAsPrimary && primary === color"
+          @click="primary = color"
+        />
+      </div>
+    </fieldset>
+
+    <fieldset>
+      <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
+        Neutral
+
+        <UButton
+          to="/docs/getting-started/theme/css-variables#text"
+          size="xs"
+          color="neutral"
+          variant="link"
+          icon="i-lucide-help-circle"
+          class="p-0 -my-0.5"
+          :ui="{ leadingIcon: 'size-3' }"
+        />
+      </legend>
+
+      <div class="grid grid-cols-3 gap-1">
+        <ThemePickerButton
+          v-for="color in neutralColors"
+          :key="color"
+          :label="color"
+          :chip="color === 'neutral' ? 'old-neutral' : color"
+          :selected="neutral === color"
+          @click="neutral = color"
+        />
+      </div>
+    </fieldset>
+
+    <fieldset>
+      <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
+        Radius
+
+        <UButton
+          to="/docs/getting-started/theme/css-variables#radius"
+          size="xs"
+          color="neutral"
+          variant="link"
+          icon="i-lucide-help-circle"
+          class="p-0 -my-0.5"
+          :ui="{ leadingIcon: 'size-3' }"
+        />
+      </legend>
+
+      <div class="grid grid-cols-5 gap-1">
+        <ThemePickerButton
+          v-for="r in radiuses"
+          :key="r"
+          :label="String(r)"
+          class="justify-center px-0"
+          :selected="radius === r"
+          @click="radius = r"
+        />
+      </div>
+    </fieldset>
+
+    <fieldset>
+      <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
+        Font
+
+        <UButton
+          to="/docs/getting-started/integrations/fonts"
+          size="xs"
+          color="neutral"
+          variant="link"
+          icon="i-lucide-help-circle"
+          class="p-0 -my-0.5"
+          :ui="{ leadingIcon: 'size-3' }"
+        />
+      </legend>
+
+      <USelect
+        v-model="font"
+        size="sm"
+        color="neutral"
+        icon="i-lucide-type"
+        :items="fonts"
+        class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
+        :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+      />
+    </fieldset>
+
+    <fieldset>
+      <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
+        Icons
+
+        <UButton
+          to="/docs/getting-started/integrations/icons"
+          size="xs"
+          color="neutral"
+          variant="link"
+          icon="i-lucide-help-circle"
+          class="p-0 -my-0.5"
+          :ui="{ leadingIcon: 'size-3' }"
+        />
+      </legend>
+
+      <USelect
+        v-model="icon"
+        size="sm"
+        color="neutral"
+        :icon="icons.find(i => i.value === icon)?.icon"
+        :items="icons"
+        class="w-full ring-default rounded-sm hover:bg-elevated/50 capitalize text-xs data-[state=open]:bg-elevated/50"
+        :ui="{ item: 'capitalize text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+      />
+    </fieldset>
+
+    <fieldset>
+      <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
+        Color Mode
+
+        <UButton
+          to="/docs/getting-started/integrations/color-mode"
+          size="xs"
+          color="neutral"
+          variant="link"
+          icon="i-lucide-help-circle"
+          class="p-0 -my-0.5"
+          :ui="{ leadingIcon: 'size-3' }"
+        />
+      </legend>
+
+      <div class="grid grid-cols-3 gap-1">
+        <ThemePickerButton
+          v-for="m in modes"
+          :key="m.label"
+          v-bind="m"
+          :selected="colorMode.preference === m.label"
+          @click="mode = m.label"
+        />
+      </div>
+    </fieldset>
+  </div>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioExport.vue b/docs/app/components/theme-studio/ThemeStudioExport.vue
new file mode 100644
index 0000000000..de28abcc6c
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioExport.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+const { copy: copyCSS, copied: copiedCSS } = useClipboard()
+const { copy: copyConfig, copied: copiedConfig } = useClipboard()
+
+const { exportCSS, exportConfig, configLabel, hasCSSChanges, hasConfigChanges } = useTheme()
+
+const open = ref(false)
+
+const css = ref('')
+const config = ref('')
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    css.value = exportCSS()
+    config.value = exportConfig()
+  }
+})
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    title="Export theme"
+    description="Copy only what you changed — everything else stays inherited from Nuxt UI defaults."
+    :ui="{ content: 'max-w-3xl' }"
+  >
+    <UButton
+      label="Export"
+      icon="i-lucide-download"
+      color="neutral"
+      variant="outline"
+      size="sm"
+    />
+
+    <template #body>
+      <div class="flex flex-col gap-4">
+        <UAlert
+          v-if="!hasCSSChanges && !hasConfigChanges"
+          title="No changes yet"
+          description="You are on the default theme. Tweak something and come back."
+          icon="i-lucide-info"
+          color="neutral"
+          variant="subtle"
+        />
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          <div class="flex flex-col gap-2 min-w-0">
+            <div class="flex items-center justify-between gap-2">
+              <p class="text-xs font-semibold text-muted font-mono">
+                main.css
+              </p>
+
+              <UButton
+                size="xs"
+                color="neutral"
+                variant="ghost"
+                :icon="copiedCSS ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+                aria-label="Copy CSS"
+                @click="copyCSS(css)"
+              />
+            </div>
+
+            <pre class="text-xs font-mono bg-muted rounded-md p-3 overflow-x-auto max-h-96 whitespace-pre">{{ css }}</pre>
+          </div>
+
+          <div class="flex flex-col gap-2 min-w-0">
+            <div class="flex items-center justify-between gap-2">
+              <p class="text-xs font-semibold text-muted font-mono">
+                {{ configLabel }}
+              </p>
+
+              <UButton
+                size="xs"
+                color="neutral"
+                variant="ghost"
+                :icon="copiedConfig ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+                aria-label="Copy config"
+                @click="copyConfig(config)"
+              />
+            </div>
+
+            <pre class="text-xs font-mono bg-muted rounded-md p-3 overflow-x-auto max-h-96 whitespace-pre">{{ config }}</pre>
+          </div>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>
diff --git a/docs/app/composables/useHeader.ts b/docs/app/composables/useHeader.ts
index 8008eddece..50518d4d43 100644
--- a/docs/app/composables/useHeader.ts
+++ b/docs/app/composables/useHeader.ts
@@ -8,6 +8,9 @@ export function useHeader() {
   }, {
     label: 'Templates',
     to: '/templates'
+  }, {
+    label: 'Theme',
+    to: '/theme'
   }, {
     label: 'Resources',
     active: route.path.startsWith('/showcase') || route.path.startsWith('/community') || route.path.startsWith('/blog'),
@@ -65,6 +68,10 @@ export function useHeader() {
     label: 'Templates',
     icon: 'i-lucide-panels-top-left',
     to: '/templates'
+  }, {
+    label: 'Theme Studio',
+    icon: 'i-lucide-swatch-book',
+    to: '/theme'
   }, {
     label: 'Showcase',
     icon: 'i-lucide-presentation',
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
new file mode 100644
index 0000000000..ed87afe6d0
--- /dev/null
+++ b/docs/app/pages/theme.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+const title = 'Theme Studio'
+const description = 'Customize Nuxt UI live: colors, radius, fonts and icons — then export only what you changed.'
+
+useSeoMeta({
+  title,
+  description,
+  ogTitle: title,
+  ogDescription: description
+})
+
+useCanonical()
+
+if (import.meta.server) {
+  defineOgImage('Docs.takumi', {
+    title,
+    description
+  })
+}
+
+const { track } = useAnalytics()
+
+const {
+  primaryColors,
+  primary,
+  setBlackAsPrimary,
+  neutralColors,
+  neutral,
+  radiuses,
+  radius,
+  fonts,
+  font,
+  resetTheme
+} = useTheme()
+
+function pick<T>(items: readonly T[]): T {
+  return items[Math.floor(Math.random() * items.length)] as T
+}
+
+function shuffle() {
+  if (Math.random() < 0.125) {
+    setBlackAsPrimary(true)
+  } else {
+    primary.value = pick(primaryColors)
+  }
+
+  neutral.value = pick(neutralColors)
+  radius.value = pick(radiuses)
+  font.value = pick(fonts)
+
+  track('Theme Studio Shuffled')
+}
+</script>
+
+<template>
+  <main class="flex flex-col lg:flex-row lg:h-[calc(100vh-var(--ui-header-height))]">
+    <aside class="shrink-0 lg:w-80 border-b lg:border-b-0 lg:border-r border-default lg:overflow-y-auto p-4 sm:p-6">
+      <ThemeStudioControls />
+    </aside>
+
+    <div class="flex-1 flex flex-col min-w-0">
+      <div class="flex items-center gap-2 border-b border-default px-4 sm:px-6 py-3">
+        <h1 class="text-sm font-semibold text-highlighted me-2">
+          Theme Studio
+        </h1>
+
+        <UBadge label="v0" variant="subtle" size="sm" />
+
+        <span class="flex-1" />
+
+        <UTooltip text="Random theme">
+          <UButton
+            label="Shuffle"
+            icon="i-lucide-dices"
+            color="neutral"
+            variant="outline"
+            size="sm"
+            @click="shuffle"
+          />
+        </UTooltip>
+
+        <ThemeStudioExport />
+
+        <UTooltip text="Reset theme">
+          <UButton
+            icon="i-lucide-rotate-ccw"
+            color="neutral"
+            variant="outline"
+            size="sm"
+            aria-label="Reset theme"
+            @click="resetTheme"
+          />
+        </UTooltip>
+      </div>
+
+      <div class="flex-1 lg:overflow-y-auto p-4 sm:p-6">
+        <ThemeStudioBento />
+      </div>
+    </div>
+  </main>
+</template>

From 8c26772a29b4d3c01c3cbaaf33032418acf021bc Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 00:47:00 +0200
Subject: [PATCH 003/185] feat(docs): add theme engine and studio presets

Pure theme-engine module (ThemeDoc schema, provenance resolver, minimal
CSS/app.config export generators) with unit tests; useTheme now snapshots
its state as a ThemeDoc and delegates exports to the engine. New
useThemeStudio composable applies docs through the sanitized
applyThemeSettings path, powering a Presets menu (Nuxt UI, Shadcn,
Anthropic, Spotify) and a doc-based shuffle in the studio toolbar.

Also fixes the theme-color computed crashing on custom neutral palettes
(undefined tailwind lookup aborted the whole unhead flush, so injected
palette styles never rendered).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/composables/useTheme.ts       | 143 +++++++----------
 docs/app/composables/useThemeStudio.ts |  65 ++++++++
 docs/app/pages/theme.vue               |  54 +++----
 docs/app/utils/theme-engine/export.ts  | 138 ++++++++++++++++
 docs/app/utils/theme-engine/index.ts   |   4 +
 docs/app/utils/theme-engine/presets.ts | 164 +++++++++++++++++++
 docs/app/utils/theme-engine/resolve.ts |  84 ++++++++++
 docs/app/utils/theme-engine/types.ts   |  70 ++++++++
 test/utils/theme-engine.spec.ts        | 211 +++++++++++++++++++++++++
 9 files changed, 810 insertions(+), 123 deletions(-)
 create mode 100644 docs/app/composables/useThemeStudio.ts
 create mode 100644 docs/app/utils/theme-engine/export.ts
 create mode 100644 docs/app/utils/theme-engine/index.ts
 create mode 100644 docs/app/utils/theme-engine/presets.ts
 create mode 100644 docs/app/utils/theme-engine/resolve.ts
 create mode 100644 docs/app/utils/theme-engine/types.ts
 create mode 100644 test/utils/theme-engine.spec.ts

diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 9d643c8c54..40fb247537 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -1,6 +1,8 @@
 import { defu } from 'defu'
 import { useLocalStorage } from '@vueuse/core'
 import { themeIcons, cssVariableDefaults } from '../utils/theme'
+import { generateCSS, generateConfig, DEFAULT_COLORS, THEME_DEFAULTS } from '../utils/theme-engine'
+import type { ThemeDoc, ThemePalette } from '../utils/theme-engine'
 import { omit } from '#ui/utils'
 import colors from 'tailwindcss/colors'
 
@@ -56,10 +58,18 @@ export function useTheme() {
   const { track } = useAnalytics()
   const { framework } = useFrameworks()
 
-  const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
-
   const aiThemeExtras = useState<Record<string, any>>('nuxt-ui-ai-theme', () => readLocalStorage('nuxt-ui-ai-theme', {}))
   const customColorsData = useState<Record<string, Record<string, string>>>('nuxt-ui-custom-colors', () => readLocalStorage('nuxt-ui-custom-colors', {}))
+
+  // The neutral may be a custom palette (AI themes, studio presets) with no entry in
+  // tailwindcss/colors — a throw here would abort the whole unhead flush, taking every
+  // other theme <style> down with it.
+  const color = computed(() => {
+    if (colorMode.value !== 'dark') return 'white'
+
+    const neutral = appConfig.ui.colors.neutral
+    return (colors as any)[neutral]?.[900] || customColorsData.value[neutral]?.[900] || (colors as any).slate[900]
+  })
   const cssVariablesData = useState<{ light?: Record<string, string>, dark?: Record<string, string> }>('nuxt-ui-css-variables', () => readLocalStorage('nuxt-ui-css-variables', {}))
   const _radius = useLocalStorage('nuxt-ui-radius', 0.25)
   const _font = useLocalStorage('nuxt-ui-font', 'Public Sans')
@@ -225,111 +235,62 @@ export function useTheme() {
       || !!aiThemeExtras.value.ui
   })
 
-  function exportCSS(): string {
-    track('Theme Exported', { type: 'CSS' })
-
-    const lines = [
-      '@import "tailwindcss";',
-      '@import "@nuxt/ui";'
-    ]
-
-    if (_font.value !== 'Public Sans') {
-      lines.push('', '@theme {', `  --font-sans: '${_font.value}', sans-serif;`, '}')
-    }
-
-    const colorLines: string[] = []
-    for (const [name, shades] of Object.entries(customColorsData.value)) {
-      for (const [shade, hex] of Object.entries(shades)) {
-        colorLines.push(`  --color-${name}-${shade}: ${hex};`)
+  /**
+   * Snapshot the live theme state as a sparse ThemeDoc — the single input
+   * for the theme-engine export generators and, eventually, the studio's
+   * source of truth.
+   */
+  function currentDoc(): ThemeDoc {
+    const doc: ThemeDoc = { version: 1 }
+
+    const colorOverrides: Record<string, string> = {}
+    for (const [key, def] of Object.entries(DEFAULT_COLORS)) {
+      const value = (appConfig.ui.colors as any)[key]
+      if (value && value !== def) {
+        colorOverrides[key] = value
       }
     }
-
-    if (colorLines.length) {
-      lines.push('', '@theme static {', ...colorLines, '}')
+    if (Object.keys(colorOverrides).length) {
+      doc.colors = colorOverrides
     }
 
-    const lightOverrides = Object.entries(cssVariablesData.value.light || {}).filter(([key, val]) => val !== cssVariableDefaults.light[key as keyof typeof cssVariableDefaults.light])
-    const darkOverrides = Object.entries(cssVariablesData.value.dark || {}).filter(([key, val]) => val !== cssVariableDefaults.dark[key as keyof typeof cssVariableDefaults.dark])
+    if (_blackAsPrimary.value) doc.blackAsPrimary = true
+    if (_radius.value !== THEME_DEFAULTS.radius) doc.radius = _radius.value
+    if (_font.value !== THEME_DEFAULTS.font) doc.font = { sans: _font.value }
+    if (_iconSet.value !== THEME_DEFAULTS.icons) doc.icons = _iconSet.value
 
-    const rootLines: string[] = []
-    if (_radius.value !== 0.25) {
-      rootLines.push(`  --ui-radius: ${_radius.value}rem;`)
-    }
-    if (_blackAsPrimary.value) {
-      rootLines.push('  --ui-primary: black;')
+    const paletteEntries = Object.entries(customColorsData.value)
+    if (paletteEntries.length) {
+      doc.palettes = Object.fromEntries(paletteEntries.map(([name, shades]) => [name, { shades: shades as ThemePalette['shades'] }]))
     }
 
-    if (rootLines.length) {
-      lines.push('', ':root {', ...rootLines, '}')
+    const light = Object.fromEntries(Object.entries(cssVariablesData.value.light || {}).filter(([key, val]) => val !== cssVariableDefaults.light[key as keyof typeof cssVariableDefaults.light]))
+    const dark = Object.fromEntries(Object.entries(cssVariablesData.value.dark || {}).filter(([key, val]) => val !== cssVariableDefaults.dark[key as keyof typeof cssVariableDefaults.dark]))
+    if (Object.keys(light).length || Object.keys(dark).length) {
+      doc.tokens = {
+        ...(Object.keys(light).length ? { light } : {}),
+        ...(Object.keys(dark).length ? { dark } : {})
+      }
     }
 
-    if (lightOverrides.length) {
-      lines.push('', ':root, .light {', ...lightOverrides.map(([key, val]) => `  ${key}: ${val};`), '}')
+    const extras = aiThemeExtras.value
+    if (extras.ui && Object.keys(extras.ui).length) {
+      doc.components = extras.ui
     }
 
-    const darkLines: string[] = []
-    if (_blackAsPrimary.value) {
-      darkLines.push('  --ui-primary: white;')
-    }
-    if (darkOverrides.length) {
-      darkLines.push(...darkOverrides.map(([key, val]) => `  ${key}: ${val};`))
-    }
+    return doc
+  }
 
-    if (darkLines.length) {
-      lines.push('', '.dark {', ...darkLines, '}')
-    }
+  function exportCSS(): string {
+    track('Theme Exported', { type: 'CSS' })
 
-    return lines.join('\n')
+    return generateCSS(currentDoc())
   }
 
   function exportConfig(): string {
     track('Theme Exported', { type: 'Config', framework: framework.value })
 
-    const config: Record<string, any> = {}
-
-    const defaultColors: Record<string, string> = { primary: 'green', neutral: 'slate', secondary: 'blue', success: 'green', info: 'blue', warning: 'yellow', error: 'red' }
-    const colorEntries = Object.entries(defaultColors).filter(([key, def]) => (appConfig.ui.colors as any)[key] !== def)
-    if (colorEntries.length) {
-      config.ui = { colors: Object.fromEntries(colorEntries.map(([key]) => [key, (appConfig.ui.colors as any)[key]])) }
-    }
-
-    if (_iconSet.value !== 'lucide') {
-      const iconMapping = themeIcons[_iconSet.value as keyof typeof themeIcons]
-      config.ui = config.ui || {}
-      config.ui.icons = iconMapping
-    }
-
-    const extras = aiThemeExtras.value
-    if (extras.ui) {
-      config.ui = config.ui || {}
-      Object.assign(config.ui, extras.ui)
-    }
-
-    const configString = JSON.stringify(config, null, 2)
-      .replace(/"([^"]+)":/g, '$1:')
-      .replace(/"/g, '\'')
-
-    if (framework.value === 'vue') {
-      const pluginConfig = config.ui
-        ? JSON.stringify({ ui: config.ui }, null, 2)
-            .replace(/"([^"]+)":/g, '$1:')
-            .replace(/"/g, '\'')
-        : '{}'
-      return [
-        'import { defineConfig } from \'vite\'',
-        'import vue from \'@vitejs/plugin-vue\'',
-        'import ui from \'@nuxt/ui/vite\'',
-        '',
-        `export default defineConfig({`,
-        '  plugins: [',
-        '    vue(),',
-        `    ui(${pluginConfig.split('\n').map((line, i) => i === 0 ? line : '    ' + line).join('\n')})`,
-        '  ]',
-        '})'
-      ].join('\n')
-    }
-
-    return `export default defineAppConfig(${configString})`
+    return generateConfig(currentDoc(), framework.value)
   }
 
   function injectCustomColors(customColors: Record<string, Record<string, string>>) {
@@ -358,7 +319,8 @@ export function useTheme() {
     }
 
     if (settings.primary && SAFE_NAME.test(settings.primary)) primary.value = settings.primary
-    if (settings.neutral && neutralColors.includes(settings.neutral)) neutral.value = settings.neutral
+    // Custom palettes (injected via customColors) are valid neutrals too, e.g. presets shipping their own ramp.
+    if (settings.neutral && SAFE_NAME.test(settings.neutral) && (neutralColors.includes(settings.neutral) || settings.customColors?.[settings.neutral])) neutral.value = settings.neutral
     if (settings.radius !== undefined && Number.isFinite(Number(settings.radius))) radius.value = Number(settings.radius)
     if (settings.font && SAFE_NAME.test(settings.font)) font.value = settings.font
     if (settings.icons && settings.icons in themeIcons) icon.value = settings.icons
@@ -455,6 +417,7 @@ export function useTheme() {
     hasCSSChanges,
     hasConfigChanges,
     configLabel: computed(() => framework.value === 'vue' ? 'vite.config.ts' : 'app.config.ts'),
+    currentDoc,
     exportCSS,
     exportConfig,
     applyThemeSettings,
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
new file mode 100644
index 0000000000..3c0c7539b1
--- /dev/null
+++ b/docs/app/composables/useThemeStudio.ts
@@ -0,0 +1,65 @@
+import { presets, docToSettings, isDefaultTheme } from '../utils/theme-engine'
+import type { ThemeDoc, ThemePreset } from '../utils/theme-engine'
+
+export function useThemeStudio() {
+  const theme = useTheme()
+  const { track } = useAnalytics()
+
+  const activePreset = useState<string | undefined>('nuxt-ui-theme-preset', () => undefined)
+
+  /** Replace the current theme with a document: reset, then apply overrides. */
+  function applyDoc(doc: ThemeDoc) {
+    theme.resetTheme()
+
+    if (!isDefaultTheme(doc)) {
+      theme.applyThemeSettings(docToSettings(doc))
+    }
+  }
+
+  function applyPreset(preset: ThemePreset) {
+    applyDoc(preset.doc)
+    activePreset.value = preset.id
+
+    track('Theme Preset Applied', { preset: preset.id })
+  }
+
+  function pick<T>(items: readonly T[]): T {
+    return items[Math.floor(Math.random() * items.length)] as T
+  }
+
+  function shuffle() {
+    const doc: ThemeDoc = {
+      version: 1,
+      colors: {
+        primary: pick(theme.primaryColors),
+        neutral: pick(theme.neutralColors)
+      },
+      radius: pick(theme.radiuses),
+      font: { sans: pick(theme.fonts) }
+    }
+
+    if (Math.random() < 0.125) {
+      doc.blackAsPrimary = true
+      delete doc.colors!.primary
+    }
+
+    applyDoc(doc)
+    activePreset.value = undefined
+
+    track('Theme Studio Shuffled')
+  }
+
+  function reset() {
+    theme.resetTheme()
+    activePreset.value = undefined
+  }
+
+  return {
+    presets,
+    activePreset,
+    applyDoc,
+    applyPreset,
+    shuffle,
+    reset
+  }
+}
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index ed87afe6d0..7c053e324f 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -18,38 +18,15 @@ if (import.meta.server) {
   })
 }
 
-const { track } = useAnalytics()
-
-const {
-  primaryColors,
-  primary,
-  setBlackAsPrimary,
-  neutralColors,
-  neutral,
-  radiuses,
-  radius,
-  fonts,
-  font,
-  resetTheme
-} = useTheme()
-
-function pick<T>(items: readonly T[]): T {
-  return items[Math.floor(Math.random() * items.length)] as T
-}
-
-function shuffle() {
-  if (Math.random() < 0.125) {
-    setBlackAsPrimary(true)
-  } else {
-    primary.value = pick(primaryColors)
-  }
-
-  neutral.value = pick(neutralColors)
-  radius.value = pick(radiuses)
-  font.value = pick(fonts)
-
-  track('Theme Studio Shuffled')
-}
+const { presets, activePreset, applyPreset, shuffle, reset } = useThemeStudio()
+
+const presetItems = computed(() => presets.map(preset => ({
+  label: preset.name,
+  icon: preset.icon,
+  type: 'checkbox' as const,
+  checked: activePreset.value === preset.id,
+  onSelect: () => applyPreset(preset)
+})))
 </script>
 
 <template>
@@ -68,6 +45,17 @@ function shuffle() {
 
         <span class="flex-1" />
 
+        <UDropdownMenu :items="presetItems" :content="{ align: 'end' }">
+          <UButton
+            label="Presets"
+            icon="i-lucide-layout-grid"
+            trailing-icon="i-lucide-chevron-down"
+            color="neutral"
+            variant="outline"
+            size="sm"
+          />
+        </UDropdownMenu>
+
         <UTooltip text="Random theme">
           <UButton
             label="Shuffle"
@@ -88,7 +76,7 @@ function shuffle() {
             variant="outline"
             size="sm"
             aria-label="Reset theme"
-            @click="resetTheme"
+            @click="reset"
           />
         </UTooltip>
       </div>
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
new file mode 100644
index 0000000000..292d0d129f
--- /dev/null
+++ b/docs/app/utils/theme-engine/export.ts
@@ -0,0 +1,138 @@
+import { themeIcons } from '../theme'
+import type { ThemeDoc } from './types'
+import { DEFAULT_COLORS, THEME_DEFAULTS } from './types'
+
+/**
+ * Generate the minimal `main.css`. The document only holds overrides, so
+ * everything present is emitted and nothing else.
+ */
+export function generateCSS(doc: ThemeDoc): string {
+  const lines = [
+    '@import "tailwindcss";',
+    '@import "@nuxt/ui";'
+  ]
+
+  if (doc.font?.sans && doc.font.sans !== THEME_DEFAULTS.font) {
+    lines.push('', '@theme {', `  --font-sans: '${doc.font.sans}', sans-serif;`, '}')
+  }
+
+  const colorLines: string[] = []
+  for (const [name, palette] of Object.entries(doc.palettes || {})) {
+    for (const [shade, hex] of Object.entries(palette.shades)) {
+      colorLines.push(`  --color-${name}-${shade}: ${hex};`)
+    }
+  }
+
+  if (colorLines.length) {
+    lines.push('', '@theme static {', ...colorLines, '}')
+  }
+
+  const rootLines: string[] = []
+  if (doc.radius !== undefined && doc.radius !== THEME_DEFAULTS.radius) {
+    rootLines.push(`  --ui-radius: ${doc.radius}rem;`)
+  }
+  if (doc.blackAsPrimary) {
+    rootLines.push('  --ui-primary: black;')
+  }
+
+  if (rootLines.length) {
+    lines.push('', ':root {', ...rootLines, '}')
+  }
+
+  const lightOverrides = Object.entries(doc.tokens?.light || {})
+  if (lightOverrides.length) {
+    lines.push('', ':root, .light {', ...lightOverrides.map(([key, val]) => `  ${key}: ${val};`), '}')
+  }
+
+  const darkLines: string[] = []
+  if (doc.blackAsPrimary) {
+    darkLines.push('  --ui-primary: white;')
+  }
+  darkLines.push(...Object.entries(doc.tokens?.dark || {}).map(([key, val]) => `  ${key}: ${val};`))
+
+  if (darkLines.length) {
+    lines.push('', '.dark {', ...darkLines, '}')
+  }
+
+  return lines.join('\n')
+}
+
+/** The `app.config.ts` / `vite.config.ts` side of the export. */
+export function generateConfig(doc: ThemeDoc, framework: string = 'nuxt'): string {
+  const config: Record<string, any> = {}
+
+  const colorEntries = Object.entries(doc.colors || {}).filter(([key, value]) => value !== DEFAULT_COLORS[key as keyof typeof DEFAULT_COLORS])
+  if (colorEntries.length) {
+    config.ui = { colors: Object.fromEntries(colorEntries) }
+  }
+
+  if (doc.icons && doc.icons !== THEME_DEFAULTS.icons && doc.icons in themeIcons) {
+    config.ui = config.ui || {}
+    config.ui.icons = themeIcons[doc.icons as keyof typeof themeIcons]
+  }
+
+  if (doc.components) {
+    config.ui = config.ui || {}
+    Object.assign(config.ui, doc.components)
+  }
+
+  const configString = JSON.stringify(config, null, 2)
+    .replace(/"([^"]+)":/g, '$1:')
+    .replace(/"/g, '\'')
+
+  if (framework === 'vue') {
+    const pluginConfig = config.ui
+      ? JSON.stringify({ ui: config.ui }, null, 2)
+          .replace(/"([^"]+)":/g, '$1:')
+          .replace(/"/g, '\'')
+      : '{}'
+    return [
+      'import { defineConfig } from \'vite\'',
+      'import vue from \'@vitejs/plugin-vue\'',
+      'import ui from \'@nuxt/ui/vite\'',
+      '',
+      `export default defineConfig({`,
+      '  plugins: [',
+      '    vue(),',
+      `    ui(${pluginConfig.split('\n').map((line, i) => i === 0 ? line : '    ' + line).join('\n')})`,
+      '  ]',
+      '})'
+    ].join('\n')
+  }
+
+  return `export default defineAppConfig(${configString})`
+}
+
+/**
+ * Translate a document into the shape `useTheme().applyThemeSettings()`
+ * accepts — the sanitized write path shared with the AI theme feature, which
+ * also persists everything to the localStorage keys the FOUC scripts restore.
+ */
+export function docToSettings(doc: ThemeDoc): Record<string, any> {
+  const settings: Record<string, any> = {}
+
+  for (const [alias, palette] of Object.entries(doc.colors || {})) {
+    settings[alias] = palette
+  }
+
+  if (doc.blackAsPrimary) settings.blackAsPrimary = true
+  if (doc.radius !== undefined) settings.radius = doc.radius
+  if (doc.font?.sans) settings.font = doc.font.sans
+  if (doc.icons) settings.icons = doc.icons
+
+  if (doc.palettes) {
+    settings.customColors = Object.fromEntries(
+      Object.entries(doc.palettes).map(([name, palette]) => [name, palette.shades])
+    )
+  }
+
+  if (doc.tokens) {
+    settings.cssVariables = doc.tokens
+  }
+
+  if (doc.components) {
+    settings.ui = doc.components
+  }
+
+  return settings
+}
diff --git a/docs/app/utils/theme-engine/index.ts b/docs/app/utils/theme-engine/index.ts
new file mode 100644
index 0000000000..756befa5d1
--- /dev/null
+++ b/docs/app/utils/theme-engine/index.ts
@@ -0,0 +1,4 @@
+export * from './types'
+export * from './resolve'
+export * from './export'
+export * from './presets'
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
new file mode 100644
index 0000000000..e8c4a33f65
--- /dev/null
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -0,0 +1,164 @@
+import type { ThemeDoc } from './types'
+
+export interface ThemePreset {
+  id: string
+  name: string
+  description: string
+  icon: string
+  doc: ThemeDoc
+}
+
+/**
+ * Presets are plain ThemeDocs: applying one replaces the current document.
+ * Each deliberately exercises a different engine capability, so they double
+ * as living tests of the schema.
+ */
+export const presets: ThemePreset[] = [{
+  id: 'nuxt-ui',
+  name: 'Nuxt UI',
+  description: 'The stock theme — everything inherited.',
+  icon: 'i-simple-icons-nuxt',
+  doc: {
+    version: 1,
+    meta: { name: 'Nuxt UI' }
+  }
+}, {
+  id: 'shadcn',
+  name: 'Shadcn',
+  description: 'Black on zinc, generous radius, quiet surfaces.',
+  icon: 'i-simple-icons-shadcnui',
+  doc: {
+    version: 1,
+    meta: { name: 'Shadcn', base: 'shadcn' },
+    blackAsPrimary: true,
+    colors: {
+      neutral: 'zinc'
+    },
+    radius: 0.5,
+    font: { sans: 'Geist' },
+    tokens: {
+      dark: {
+        '--ui-bg': 'var(--ui-color-neutral-950)',
+        '--ui-bg-muted': 'var(--ui-color-neutral-900)',
+        '--ui-bg-elevated': 'var(--ui-color-neutral-900)'
+      }
+    }
+  }
+}, {
+  id: 'anthropic',
+  name: 'Anthropic',
+  description: 'Warm parchment neutrals with a book-cloth clay primary.',
+  icon: 'i-simple-icons-anthropic',
+  doc: {
+    version: 1,
+    meta: { name: 'Anthropic', base: 'anthropic' },
+    palettes: {
+      clay: {
+        shades: {
+          50: '#FBF5F2',
+          100: '#F5E9E2',
+          200: '#EBD4C7',
+          300: '#E0BCA8',
+          400: '#D69C7F',
+          500: '#CC785C',
+          600: '#B86146',
+          700: '#9A4F38',
+          800: '#7D402E',
+          900: '#663527',
+          950: '#371B12'
+        }
+      },
+      parchment: {
+        shades: {
+          50: '#FAF9F5',
+          100: '#F0EEE5',
+          200: '#E4E0D3',
+          300: '#D1CBB8',
+          400: '#AFA893',
+          500: '#8E8672',
+          600: '#726B59',
+          700: '#5C5648',
+          800: '#454034',
+          900: '#33302A',
+          950: '#1B1A15'
+        }
+      }
+    },
+    colors: {
+      primary: 'clay',
+      neutral: 'parchment'
+    },
+    radius: 0.375,
+    font: { sans: 'DM Sans' },
+    tokens: {
+      light: {
+        '--ui-bg': 'var(--ui-color-neutral-50)'
+      },
+      dark: {
+        '--ui-bg': 'var(--ui-color-neutral-950)'
+      }
+    }
+  }
+}, {
+  id: 'spotify',
+  name: 'Spotify',
+  description: 'Dark-first ink surfaces, signal green, pill buttons.',
+  icon: 'i-simple-icons-spotify',
+  doc: {
+    version: 1,
+    meta: { name: 'Spotify', base: 'spotify' },
+    palettes: {
+      signal: {
+        shades: {
+          50: '#EAFBF0',
+          100: '#CFF5DD',
+          200: '#A2EBBE',
+          300: '#6EDD9B',
+          400: '#3ECC76',
+          500: '#1DB954',
+          600: '#169C46',
+          700: '#12813B',
+          800: '#106631',
+          900: '#0D5229',
+          950: '#062B15'
+        }
+      },
+      ink: {
+        shades: {
+          50: '#F8F8F8',
+          100: '#EFEFEF',
+          200: '#DEDEDE',
+          300: '#B3B3B3',
+          400: '#8F8F8F',
+          500: '#6E6E6E',
+          600: '#535353',
+          700: '#404040',
+          800: '#2A2A2A',
+          900: '#181818',
+          950: '#121212'
+        }
+      }
+    },
+    colors: {
+      primary: 'signal',
+      neutral: 'ink'
+    },
+    radius: 0.5,
+    font: { sans: 'DM Sans' },
+    tokens: {
+      dark: {
+        '--ui-bg': 'var(--ui-color-neutral-950)',
+        '--ui-bg-muted': 'var(--ui-color-neutral-900)',
+        '--ui-bg-elevated': 'var(--ui-color-neutral-800)',
+        '--ui-border': 'var(--ui-color-neutral-800)'
+      }
+    },
+    components: {
+      button: {
+        slots: {
+          base: 'rounded-full'
+        }
+      }
+    }
+  }
+}]
diff --git a/docs/app/utils/theme-engine/resolve.ts b/docs/app/utils/theme-engine/resolve.ts
new file mode 100644
index 0000000000..c27aa9d35d
--- /dev/null
+++ b/docs/app/utils/theme-engine/resolve.ts
@@ -0,0 +1,84 @@
+import colors from 'tailwindcss/colors'
+import { cssVariableDefaults } from '../theme'
+import type { ColorAlias, Shade, ThemeDoc } from './types'
+import { DEFAULT_COLORS } from './types'
+
+export type ColorMode = 'light' | 'dark'
+
+export interface ResolvedToken {
+  token: string
+  /** The declared value at this level (`var(--ui-color-neutral-200)`, `white`, `#fff`…) */
+  raw: string
+  /** The final computed color when the chain resolves to one, otherwise the last known reference */
+  value: string
+  source: 'default' | 'override'
+  /**
+   * Inheritance breadcrumb, outermost first, e.g.
+   * `['--ui-border', '--ui-color-neutral-200', '--color-slate-200', '#e2e8f0']`
+   */
+  chain: string[]
+}
+
+const UI_COLOR_RE = /^var\(--ui-color-([a-z]+)-(\d{2,3})\)$/
+
+export function resolveAlias(doc: ThemeDoc, alias: ColorAlias): string {
+  return doc.colors?.[alias] || DEFAULT_COLORS[alias]
+}
+
+/** Hex for a palette shade: custom palette first, then its base, then tailwind. */
+export function resolveShade(doc: ThemeDoc, palette: string, shade: Shade): string | undefined {
+  const custom = doc.palettes?.[palette]
+  if (custom) {
+    const hex = custom.shades[shade]
+    if (hex) return hex
+    if (custom.extends) return resolveShade(doc, custom.extends, shade)
+    return undefined
+  }
+  const tailwind = (colors as Record<string, unknown>)[palette]
+  if (tailwind && typeof tailwind === 'object') {
+    return (tailwind as Record<string, string>)[shade]
+  }
+  return undefined
+}
+
+export function resolveToken(doc: ThemeDoc, mode: ColorMode, token: string): ResolvedToken {
+  const defaults = cssVariableDefaults[mode] as Record<string, string>
+  const override = doc.tokens?.[mode]?.[token]
+  const raw = override ?? defaults[token] ?? ''
+
+  const chain = [token]
+  let value = raw
+
+  const match = raw.match(UI_COLOR_RE)
+  if (match) {
+    const [, alias, shade] = match
+    chain.push(`--ui-color-${alias}-${shade}`)
+
+    const palette = resolveAlias(doc, alias as ColorAlias)
+    chain.push(`--color-${palette}-${shade}`)
+
+    const hex = resolveShade(doc, palette, Number(shade) as Shade)
+    if (hex) {
+      chain.push(hex)
+      value = hex
+    }
+  } else if (raw) {
+    chain.push(raw)
+  }
+
+  return {
+    token,
+    raw,
+    value,
+    source: override !== undefined ? 'override' : 'default',
+    chain
+  }
+}
+
+/** Resolve every semantic token for a mode, with provenance. */
+export function resolveTokens(doc: ThemeDoc, mode: ColorMode): Record<string, ResolvedToken> {
+  const defaults = cssVariableDefaults[mode] as Record<string, string>
+  const tokens = new Set([...Object.keys(defaults), ...Object.keys(doc.tokens?.[mode] || {})])
+
+  return Object.fromEntries([...tokens].map(token => [token, resolveToken(doc, mode, token)]))
+}
diff --git a/docs/app/utils/theme-engine/types.ts b/docs/app/utils/theme-engine/types.ts
new file mode 100644
index 0000000000..988348f380
--- /dev/null
+++ b/docs/app/utils/theme-engine/types.ts
@@ -0,0 +1,70 @@
+export const SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
+
+export type Shade = typeof SHADES[number]
+
+export type ColorAlias = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
+
+export interface ThemePalette {
+  /** Tailwind palette this one is based on, when only some shades differ */
+  extends?: string
+  shades: Partial<Record<Shade, string>>
+}
+
+/**
+ * A theme is a sparse document: it stores only explicit overrides and
+ * everything absent stays inherited from the Nuxt UI defaults. Serializing
+ * the document therefore *is* the minimal export.
+ */
+export interface ThemeDoc {
+  version: 1
+  meta?: {
+    name?: string
+    /** Preset id this document was forked from */
+    base?: string
+    /** Seed used by shuffle, kept for reproducible rolls */
+    seed?: number
+  }
+  /** L0 — custom palettes, injected as `--color-{name}-{shade}` */
+  palettes?: Record<string, ThemePalette>
+  /** L1 — alias → palette name (tailwind or a key of `palettes`) */
+  colors?: Partial<Record<ColorAlias, string>>
+  blackAsPrimary?: boolean
+  /** L2 — semantic `--ui-*` token overrides per mode */
+  tokens?: {
+    light?: Record<string, string>
+    dark?: Record<string, string>
+  }
+  radius?: number
+  font?: {
+    sans?: string
+  }
+  icons?: string
+  /** L4 — per-component overrides merged into `app.config ui.<component>` */
+  components?: Record<string, Record<string, unknown>>
+}
+
+export const DEFAULT_COLORS: Record<ColorAlias, string> = {
+  primary: 'green',
+  secondary: 'blue',
+  success: 'green',
+  info: 'blue',
+  warning: 'yellow',
+  error: 'red',
+  neutral: 'slate'
+}
+
+export const THEME_DEFAULTS = {
+  radius: 0.25,
+  font: 'Public Sans',
+  icons: 'lucide'
+} as const
+
+export function createThemeDoc(): ThemeDoc {
+  return { version: 1 }
+}
+
+/** A document with no overrides means "stock Nuxt UI". */
+export function isDefaultTheme(doc: ThemeDoc): boolean {
+  return !doc.palettes && !doc.colors && !doc.blackAsPrimary && !doc.tokens
+    && doc.radius === undefined && !doc.font?.sans && !doc.icons && !doc.components
+}
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
new file mode 100644
index 0000000000..367750b21b
--- /dev/null
+++ b/test/utils/theme-engine.spec.ts
@@ -0,0 +1,211 @@
+import { describe, it, expect } from 'vitest'
+import {
+  createThemeDoc,
+  isDefaultTheme,
+  generateCSS,
+  generateConfig,
+  docToSettings,
+  resolveToken,
+  resolveTokens,
+  presets
+} from '../../docs/app/utils/theme-engine'
+import type { ThemeDoc } from '../../docs/app/utils/theme-engine'
+import colors from 'tailwindcss/colors'
+
+describe('theme-engine', () => {
+  describe('isDefaultTheme', () => {
+    it('treats an empty doc as default', () => {
+      expect(isDefaultTheme(createThemeDoc())).toBe(true)
+    })
+
+    it('treats any override as non-default', () => {
+      expect(isDefaultTheme({ version: 1, radius: 0 })).toBe(false)
+      expect(isDefaultTheme({ version: 1, colors: { primary: 'indigo' } })).toBe(false)
+      expect(isDefaultTheme({ version: 1, blackAsPrimary: true })).toBe(false)
+    })
+  })
+
+  describe('generateCSS', () => {
+    it('emits only the imports for a default doc', () => {
+      expect(generateCSS(createThemeDoc())).toBe('@import "tailwindcss";\n@import "@nuxt/ui";')
+    })
+
+    it('emits only what the doc overrides', () => {
+      const doc: ThemeDoc = {
+        version: 1,
+        blackAsPrimary: true,
+        radius: 0,
+        font: { sans: 'Geist' },
+        tokens: {
+          light: { '--ui-bg': 'var(--ui-color-neutral-50)' },
+          dark: { '--ui-bg': 'var(--ui-color-neutral-950)' }
+        }
+      }
+
+      expect(generateCSS(doc)).toBe([
+        '@import "tailwindcss";',
+        '@import "@nuxt/ui";',
+        '',
+        '@theme {',
+        `  --font-sans: 'Geist', sans-serif;`,
+        '}',
+        '',
+        ':root {',
+        '  --ui-radius: 0rem;',
+        '  --ui-primary: black;',
+        '}',
+        '',
+        ':root, .light {',
+        '  --ui-bg: var(--ui-color-neutral-50);',
+        '}',
+        '',
+        '.dark {',
+        '  --ui-primary: white;',
+        '  --ui-bg: var(--ui-color-neutral-950);',
+        '}'
+      ].join('\n'))
+    })
+
+    it('does not emit values matching the defaults', () => {
+      const css = generateCSS({ version: 1, radius: 0.25, font: { sans: 'Public Sans' } })
+
+      expect(css).not.toContain('--ui-radius')
+      expect(css).not.toContain('--font-sans')
+    })
+
+    it('emits custom palettes as @theme static shades', () => {
+      const css = generateCSS({
+        version: 1,
+        palettes: { clay: { shades: { 500: '#CC785C' } } }
+      })
+
+      expect(css).toContain('@theme static {')
+      expect(css).toContain('  --color-clay-500: #CC785C;')
+    })
+  })
+
+  describe('generateConfig', () => {
+    it('emits an empty app config for a default doc', () => {
+      expect(generateConfig(createThemeDoc())).toBe('export default defineAppConfig({})')
+    })
+
+    it('only includes color aliases that differ from the defaults', () => {
+      const config = generateConfig({
+        version: 1,
+        colors: { primary: 'indigo', neutral: 'slate', success: 'green' }
+      })
+
+      expect(config).toContain(`primary: 'indigo'`)
+      expect(config).not.toContain('neutral')
+      expect(config).not.toContain('success')
+    })
+
+    it('includes component overrides under ui', () => {
+      const config = generateConfig({
+        version: 1,
+        components: { button: { slots: { base: 'rounded-full' } } }
+      })
+
+      expect(config).toContain('button')
+      expect(config).toContain(`base: 'rounded-full'`)
+    })
+
+    it('wraps the config in a vite plugin for vue', () => {
+      const config = generateConfig({ version: 1, colors: { primary: 'indigo' } }, 'vue')
+
+      expect(config).toContain(`import ui from '@nuxt/ui/vite'`)
+      expect(config).toContain(`primary: 'indigo'`)
+    })
+  })
+
+  describe('docToSettings', () => {
+    it('maps the doc onto the applyThemeSettings shape', () => {
+      const settings = docToSettings({
+        version: 1,
+        colors: { primary: 'signal', neutral: 'ink' },
+        palettes: { signal: { shades: { 500: '#1DB954' } } },
+        radius: 0.5,
+        font: { sans: 'DM Sans' },
+        tokens: { dark: { '--ui-bg': 'var(--ui-color-neutral-950)' } },
+        components: { button: { slots: { base: 'rounded-full' } } }
+      })
+
+      expect(settings).toEqual({
+        primary: 'signal',
+        neutral: 'ink',
+        radius: 0.5,
+        font: 'DM Sans',
+        customColors: { signal: { 500: '#1DB954' } },
+        cssVariables: { dark: { '--ui-bg': 'var(--ui-color-neutral-950)' } },
+        ui: { button: { slots: { base: 'rounded-full' } } }
+      })
+    })
+  })
+
+  describe('resolveToken', () => {
+    it('resolves a default token through the alias chain with provenance', () => {
+      const resolved = resolveToken(createThemeDoc(), 'light', '--ui-border')
+
+      expect(resolved.source).toBe('default')
+      expect(resolved.chain).toEqual(['--ui-border', '--ui-color-neutral-200', '--color-slate-200', colors.slate[200]])
+      expect(resolved.value).toBe(colors.slate[200])
+    })
+
+    it('follows alias remaps into custom palettes', () => {
+      const doc: ThemeDoc = {
+        version: 1,
+        colors: { neutral: 'ink' },
+        palettes: { ink: { shades: { 200: '#DEDEDE' } } }
+      }
+
+      const resolved = resolveToken(doc, 'light', '--ui-border')
+
+      expect(resolved.chain).toEqual(['--ui-border', '--ui-color-neutral-200', '--color-ink-200', '#DEDEDE'])
+      expect(resolved.value).toBe('#DEDEDE')
+    })
+
+    it('marks token overrides and resolves their new target', () => {
+      const doc: ThemeDoc = {
+        version: 1,
+        tokens: { dark: { '--ui-bg': 'var(--ui-color-neutral-950)' } }
+      }
+
+      const resolved = resolveToken(doc, 'dark', '--ui-bg')
+
+      expect(resolved.source).toBe('override')
+      expect(resolved.chain).toEqual(['--ui-bg', '--ui-color-neutral-950', '--color-slate-950', colors.slate[950]])
+    })
+
+    it('keeps literals as-is', () => {
+      const resolved = resolveToken(createThemeDoc(), 'light', '--ui-bg')
+
+      expect(resolved.value).toBe('white')
+      expect(resolved.chain).toEqual(['--ui-bg', 'white'])
+    })
+  })
+
+  describe('presets', () => {
+    it.each(presets.map(preset => [preset.id, preset] as const))('%s generates valid exports', (_id, preset) => {
+      const css = generateCSS(preset.doc)
+      const config = generateConfig(preset.doc)
+
+      expect(css).toContain('@import "@nuxt/ui";')
+      expect(config).toContain('export default defineAppConfig(')
+    })
+
+    it('nuxt-ui preset is the default theme', () => {
+      expect(isDefaultTheme(presets.find(preset => preset.id === 'nuxt-ui')!.doc)).toBe(true)
+    })
+
+    it('every token override in presets resolves to a color', () => {
+      for (const preset of presets) {
+        for (const mode of ['light', 'dark'] as const) {
+          const resolved = resolveTokens(preset.doc, mode)
+          for (const token of Object.keys(preset.doc.tokens?.[mode] || {})) {
+            expect(resolved[token]!.value, `${preset.id} ${mode} ${token}`).toMatch(/^#|^oklch\(|^white$|^black$/)
+          }
+        }
+      }
+    })
+  })
+})

From 9301f24d818d8447d03401bd1afa87df95dcb6fb Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 01:05:42 +0200
Subject: [PATCH 004/185] feat(docs): add OKLCH palette curve editor to theme
 studio

Dependency-free sRGB<->OKLCH math (gamut clamping, WCAG contrast) and a
parametric ramp generator: anchor hex pinned exactly at shade 500 with
adjustable light/dark endpoints, vibrance, chroma spread and hue drift.
Inline editors under the Primary/Neutral pickers live-apply the generated
ramp through the doc path with a WCAG badge and swatch preview; curve
params persist across reloads and exports stay minimal (unreferenced
palettes are now filtered out of the doc).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      |   4 +
 .../theme-studio/ThemeStudioPaletteEditor.vue | 145 ++++++++++++++++++
 docs/app/composables/useTheme.ts              |  16 +-
 docs/app/composables/useThemeStudio.ts        |  46 +++++-
 docs/app/utils/theme-engine/index.ts          |   2 +
 docs/app/utils/theme-engine/oklch.ts          | 123 +++++++++++++++
 docs/app/utils/theme-engine/palette.ts        |  97 ++++++++++++
 docs/app/utils/theme-engine/types.ts          |   6 +
 test/utils/theme-palette.spec.ts              | 112 ++++++++++++++
 9 files changed, 548 insertions(+), 3 deletions(-)
 create mode 100644 docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
 create mode 100644 docs/app/utils/theme-engine/oklch.ts
 create mode 100644 docs/app/utils/theme-engine/palette.ts
 create mode 100644 test/utils/theme-palette.spec.ts

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 4f901ae081..585a250d5e 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -56,6 +56,8 @@ const {
           @click="primary = color"
         />
       </div>
+
+      <ThemeStudioPaletteEditor alias="primary" />
     </fieldset>
 
     <fieldset>
@@ -83,6 +85,8 @@ const {
           @click="neutral = color"
         />
       </div>
+
+      <ThemeStudioPaletteEditor alias="neutral" />
     </fieldset>
 
     <fieldset>
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
new file mode 100644
index 0000000000..89bf46d172
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core'
+import { SHADES, CURVE_DEFAULTS, generatePalette, contrastRatio } from '../../utils/theme-engine'
+import type { PaletteCurveParams } from '../../utils/theme-engine'
+
+const props = defineProps<{
+  alias: 'primary' | 'neutral'
+}>()
+
+const { paletteParams, isCustomPalette, setPaletteFromCurve, clearCustomPalette } = useThemeStudio()
+
+const DEFAULT_ANCHORS = {
+  primary: '#00C16A',
+  neutral: '#71717A'
+}
+
+const open = ref(false)
+
+const params = reactive<Required<PaletteCurveParams>>({
+  anchor: DEFAULT_ANCHORS[props.alias],
+  ...CURVE_DEFAULTS,
+  ...paletteParams.value[props.alias]
+})
+
+const active = computed(() => isCustomPalette(props.alias))
+
+const shades = computed(() => generatePalette(params))
+
+// White text on shade 500 is what solid buttons render — the pair worth watching.
+const contrast = computed(() => contrastRatio(shades.value[500]!, '#FFFFFF'))
+
+const apply = useDebounceFn(() => {
+  setPaletteFromCurve(props.alias, { ...params })
+}, 200)
+
+let touched = false
+watch(params, () => {
+  touched = true
+  apply()
+})
+
+// First expansion applies the initial ramp so the preview and page agree.
+watch(open, (isOpen) => {
+  if (isOpen && !active.value && !touched) {
+    apply()
+  }
+})
+
+function remove() {
+  clearCustomPalette(props.alias)
+  open.value = false
+  touched = false
+}
+
+const sliders = [
+  { key: 'lightest', label: 'Light end', min: 0.9, max: 1, step: 0.005 },
+  { key: 'darkest', label: 'Dark end', min: 0.05, max: 0.35, step: 0.005 },
+  { key: 'vibrance', label: 'Vibrance', min: 0, max: 2, step: 0.05 },
+  { key: 'spread', label: 'Spread', min: 0.15, max: 0.8, step: 0.01 },
+  { key: 'hueDrift', label: 'Hue drift', min: -60, max: 60, step: 1 }
+] as const
+</script>
+
+<template>
+  <UCollapsible v-model:open="open" class="mt-1.5">
+    <UButton
+      :label="active ? 'Custom palette' : 'Create custom palette'"
+      :icon="active ? 'i-lucide-paintbrush' : 'i-lucide-wand-sparkles'"
+      color="neutral"
+      variant="ghost"
+      size="xs"
+      block
+      class="justify-start text-[11px]"
+      :ui="{ leadingIcon: active ? 'text-primary size-3.5' : 'size-3.5' }"
+      trailing-icon="i-lucide-chevron-down"
+    />
+
+    <template #content>
+      <div class="flex flex-col gap-3 pt-3 pb-1">
+        <div class="flex items-center gap-2">
+          <UPopover>
+            <button
+              type="button"
+              aria-label="Pick anchor color"
+              class="size-7 shrink-0 rounded-sm ring ring-default cursor-pointer"
+              :style="{ backgroundColor: params.anchor }"
+            />
+
+            <template #content>
+              <UColorPicker v-model="params.anchor" class="p-2" />
+            </template>
+          </UPopover>
+
+          <UInput
+            v-model="params.anchor"
+            size="sm"
+            class="flex-1 font-mono"
+            :ui="{ base: 'text-[11px]' }"
+          />
+
+          <UTooltip :text="`White on 500: ${contrast.toFixed(1)}:1`">
+            <UBadge
+              :label="contrast >= 4.5 ? 'AA' : contrast >= 3 ? 'AA18' : 'Low'"
+              :color="contrast >= 4.5 ? 'success' : contrast >= 3 ? 'warning' : 'error'"
+              variant="subtle"
+              size="sm"
+            />
+          </UTooltip>
+        </div>
+
+        <div class="flex rounded-sm overflow-hidden ring ring-default">
+          <UTooltip v-for="shade in SHADES" :key="shade" :text="`${shade} · ${shades[shade]}`">
+            <div class="h-6 flex-1" :style="{ backgroundColor: shades[shade] }" />
+          </UTooltip>
+        </div>
+
+        <div v-for="slider in sliders" :key="slider.key" class="flex items-center gap-2">
+          <span class="text-[11px] text-muted w-16 shrink-0 select-none">{{ slider.label }}</span>
+
+          <USlider
+            v-model="params[slider.key]"
+            :min="slider.min"
+            :max="slider.max"
+            :step="slider.step"
+            size="xs"
+          />
+
+          <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ params[slider.key] }}</span>
+        </div>
+
+        <UButton
+          v-if="active"
+          label="Remove custom palette"
+          icon="i-lucide-trash-2"
+          color="neutral"
+          variant="soft"
+          size="xs"
+          block
+          class="text-[11px]"
+          @click="remove"
+        />
+      </div>
+    </template>
+  </UCollapsible>
+</template>
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 40fb247537..73601e6512 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -259,7 +259,10 @@ export function useTheme() {
     if (_font.value !== THEME_DEFAULTS.font) doc.font = { sans: _font.value }
     if (_iconSet.value !== THEME_DEFAULTS.icons) doc.icons = _iconSet.value
 
-    const paletteEntries = Object.entries(customColorsData.value)
+    // Only palettes actually referenced by an alias belong in the export —
+    // leftovers from a previous custom palette would bloat the @theme block.
+    const referenced = new Set(Object.values(colorOverrides))
+    const paletteEntries = Object.entries(customColorsData.value).filter(([name]) => referenced.has(name))
     if (paletteEntries.length) {
       doc.palettes = Object.fromEntries(paletteEntries.map(([name, shades]) => [name, { shades: shades as ThemePalette['shades'] }]))
     }
@@ -299,6 +302,16 @@ export function useTheme() {
     window.localStorage.setItem('nuxt-ui-custom-colors', JSON.stringify(merged))
   }
 
+  function removeCustomColors(names: string[]) {
+    const remaining = Object.fromEntries(Object.entries(customColorsData.value).filter(([name]) => !names.includes(name)))
+    customColorsData.value = remaining
+    if (Object.keys(remaining).length) {
+      window.localStorage.setItem('nuxt-ui-custom-colors', JSON.stringify(remaining))
+    } else {
+      window.localStorage.removeItem('nuxt-ui-custom-colors')
+    }
+  }
+
   function injectCSSVariables(cssVariables: { light?: Record<string, string>, dark?: Record<string, string> }) {
     const merged = {
       light: { ...cssVariablesData.value.light, ...cssVariables.light },
@@ -418,6 +431,7 @@ export function useTheme() {
     hasConfigChanges,
     configLabel: computed(() => framework.value === 'vue' ? 'vite.config.ts' : 'app.config.ts'),
     currentDoc,
+    removeCustomColors,
     exportCSS,
     exportConfig,
     applyThemeSettings,
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 3c0c7539b1..8166d4fbe8 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,15 +1,52 @@
-import { presets, docToSettings, isDefaultTheme } from '../utils/theme-engine'
-import type { ThemeDoc, ThemePreset } from '../utils/theme-engine'
+import { useLocalStorage } from '@vueuse/core'
+import { presets, docToSettings, isDefaultTheme, generatePalette, DEFAULT_COLORS } from '../utils/theme-engine'
+import type { ThemeDoc, ThemePreset, PaletteCurveParams } from '../utils/theme-engine'
 
 export function useThemeStudio() {
   const theme = useTheme()
+  const appConfig = useAppConfig()
   const { track } = useAnalytics()
 
   const activePreset = useState<string | undefined>('nuxt-ui-theme-preset', () => undefined)
 
+  /** Curve params per alias, kept so the editor stays editable across reloads. */
+  const paletteParams = useLocalStorage<Partial<Record<string, PaletteCurveParams>>>('nuxt-ui-palette-params', {})
+
+  function customPaletteName(alias: string) {
+    return `custom-${alias}`
+  }
+
+  function isCustomPalette(alias: string) {
+    return (appConfig.ui.colors as Record<string, string>)[alias] === customPaletteName(alias)
+  }
+
+  /** Generate a ramp from curve params and point the alias at it. */
+  function setPaletteFromCurve(alias: 'primary' | 'neutral', params: PaletteCurveParams) {
+    const name = customPaletteName(alias)
+
+    theme.applyThemeSettings({
+      customColors: { [name]: generatePalette(params) },
+      [alias]: name
+    })
+    paletteParams.value = { ...paletteParams.value, [alias]: params }
+    activePreset.value = undefined
+
+    track('Theme Custom Palette', { alias })
+  }
+
+  /** Drop the custom ramp and return the alias to its default palette. */
+  function clearCustomPalette(alias: 'primary' | 'neutral') {
+    theme.removeCustomColors([customPaletteName(alias)])
+    theme.applyThemeSettings({ [alias]: DEFAULT_COLORS[alias] })
+
+    const { [alias]: _, ...rest } = paletteParams.value
+    paletteParams.value = rest
+  }
+
   /** Replace the current theme with a document: reset, then apply overrides. */
   function applyDoc(doc: ThemeDoc) {
     theme.resetTheme()
+    paletteParams.value = {}
 
     if (!isDefaultTheme(doc)) {
       theme.applyThemeSettings(docToSettings(doc))
@@ -51,12 +88,17 @@ export function useThemeStudio() {
 
   function reset() {
     theme.resetTheme()
+    paletteParams.value = {}
     activePreset.value = undefined
   }
 
   return {
     presets,
     activePreset,
+    paletteParams,
+    isCustomPalette,
+    setPaletteFromCurve,
+    clearCustomPalette,
     applyDoc,
     applyPreset,
     shuffle,
diff --git a/docs/app/utils/theme-engine/index.ts b/docs/app/utils/theme-engine/index.ts
index 756befa5d1..944a41df8b 100644
--- a/docs/app/utils/theme-engine/index.ts
+++ b/docs/app/utils/theme-engine/index.ts
@@ -2,3 +2,5 @@ export * from './types'
 export * from './resolve'
 export * from './export'
 export * from './presets'
+export * from './oklch'
+export * from './palette'
diff --git a/docs/app/utils/theme-engine/oklch.ts b/docs/app/utils/theme-engine/oklch.ts
new file mode 100644
index 0000000000..5c8799b6ff
--- /dev/null
+++ b/docs/app/utils/theme-engine/oklch.ts
@@ -0,0 +1,123 @@
+/**
+ * Minimal sRGB ↔ OKLCH conversion (Björn Ottosson's OKLab), kept
+ * dependency-free so the engine stays portable. Only what the palette
+ * generator needs: parse a hex, move through OKLCH space, come back to a
+ * gamut-safe hex.
+ */
+
+export interface Oklch {
+  /** Perceptual lightness, 0–1 */
+  l: number
+  /** Chroma, 0–~0.4 in sRGB */
+  c: number
+  /** Hue in degrees, 0–360 */
+  h: number
+}
+
+function srgbToLinear(c: number): number {
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+}
+
+function linearToSrgb(c: number): number {
+  return c <= 0.0031308 ? c * 12.92 : 1.055 * Math.pow(c, 1 / 2.4) - 0.055
+}
+
+export function hexToRgb(hex: string): [number, number, number] {
+  let value = hex.replace('#', '')
+  if (value.length === 3) {
+    value = value.split('').map(ch => ch + ch).join('')
+  }
+  return [
+    Number.parseInt(value.slice(0, 2), 16) / 255,
+    Number.parseInt(value.slice(2, 4), 16) / 255,
+    Number.parseInt(value.slice(4, 6), 16) / 255
+  ]
+}
+
+export function rgbToHex([r, g, b]: [number, number, number]): string {
+  const to = (c: number) => Math.round(Math.min(1, Math.max(0, c)) * 255).toString(16).padStart(2, '0')
+  return `#${to(r)}${to(g)}${to(b)}`.toUpperCase()
+}
+
+export function rgbToOklch([r, g, b]: [number, number, number]): Oklch {
+  const lr = srgbToLinear(r)
+  const lg = srgbToLinear(g)
+  const lb = srgbToLinear(b)
+
+  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb)
+  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb)
+  const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb)
+
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s
+  const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s
+  const bb = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+
+  const c = Math.sqrt(a * a + bb * bb)
+  let h = Math.atan2(bb, a) * 180 / Math.PI
+  if (h < 0) h += 360
+
+  return { l: L, c, h }
+}
+
+/** Raw conversion — channels may fall outside [0, 1] when out of gamut. */
+function oklchToLinearRgb({ l: L, c, h }: Oklch): [number, number, number] {
+  const hr = h * Math.PI / 180
+  const a = Math.cos(hr) * c
+  const b = Math.sin(hr) * c
+
+  const l = Math.pow(L + 0.3963377774 * a + 0.2158037573 * b, 3)
+  const m = Math.pow(L - 0.1055613458 * a - 0.0638541728 * b, 3)
+  const s = Math.pow(L - 0.0894841775 * a - 1.291485548 * b, 3)
+
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ]
+}
+
+const GAMUT_EPSILON = 0.000005
+
+export function inGamut(color: Oklch): boolean {
+  return oklchToLinearRgb(color).every(channel => channel >= -GAMUT_EPSILON && channel <= 1 + GAMUT_EPSILON)
+}
+
+/** Reduce chroma (binary search) until the color fits in sRGB. */
+export function clampToGamut(color: Oklch): Oklch {
+  if (inGamut(color)) return color
+
+  let low = 0
+  let high = color.c
+  for (let i = 0; i < 24; i++) {
+    const mid = (low + high) / 2
+    if (inGamut({ ...color, c: mid })) {
+      low = mid
+    } else {
+      high = mid
+    }
+  }
+  return { ...color, c: low }
+}
+
+export function oklchToHex(color: Oklch): string {
+  const clamped = clampToGamut(color)
+  return rgbToHex(oklchToLinearRgb(clamped).map(linearToSrgb) as [number, number, number])
+}
+
+export function hexToOklch(hex: string): Oklch {
+  return rgbToOklch(hexToRgb(hex))
+}
+
+/** WCAG 2.x relative luminance. */
+function luminance(hex: string): number {
+  const [r, g, b] = hexToRgb(hex).map(srgbToLinear) as [number, number, number]
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+/** WCAG 2.x contrast ratio between two hex colors, 1–21. */
+export function contrastRatio(hexA: string, hexB: string): number {
+  const la = luminance(hexA)
+  const lb = luminance(hexB)
+  const [lighter, darker] = la > lb ? [la, lb] : [lb, la]
+  return (lighter + 0.05) / (darker + 0.05)
+}
diff --git a/docs/app/utils/theme-engine/palette.ts b/docs/app/utils/theme-engine/palette.ts
new file mode 100644
index 0000000000..4914400e14
--- /dev/null
+++ b/docs/app/utils/theme-engine/palette.ts
@@ -0,0 +1,97 @@
+import type { Shade } from './types'
+import { SHADES } from './types'
+import { hexToOklch, oklchToHex } from './oklch'
+
+/**
+ * Parametric ramp generator: an anchor color pinned at shade 500 with three
+ * curves fitted around it — lightness (monotonic, endpoints adjustable),
+ * chroma (bell around the anchor) and hue (linear drift). A handful of
+ * knobs instead of 33 free numbers; per-shade overrides can still be layered
+ * on top via `ThemePalette.shades`.
+ */
+export interface PaletteCurveParams {
+  /** Hex color pinned exactly at shade 500 */
+  anchor: string
+  /** Lightness of shade 50 (0–1). Lower it when the default -50s feel too white. */
+  lightest?: number
+  /** Lightness of shade 950 (0–1) */
+  darkest?: number
+  /** Chroma multiplier applied to the whole ramp */
+  vibrance?: number
+  /** Width of the chroma bell — higher keeps the ends more saturated */
+  spread?: number
+  /** Total hue rotation in degrees across the ramp (light end −½, dark end +½) */
+  hueDrift?: number
+}
+
+export const CURVE_DEFAULTS = {
+  lightest: 0.985,
+  darkest: 0.13,
+  vibrance: 1,
+  spread: 0.35,
+  hueDrift: 0
+} as const
+
+/**
+ * Tailwind-like perceptual lightness targets per stop, used as the base
+ * curve shape and rescaled piecewise so the anchor's own lightness lands
+ * exactly on shade 500.
+ */
+const BASE_LIGHTNESS: Record<Shade, number> = {
+  50: 0.985,
+  100: 0.967,
+  200: 0.928,
+  300: 0.872,
+  400: 0.707,
+  500: 0.551,
+  600: 0.446,
+  700: 0.373,
+  800: 0.278,
+  900: 0.21,
+  950: 0.13
+}
+
+export function generatePalette(params: PaletteCurveParams): Record<Shade, string> {
+  const { anchor } = params
+  const anchorColor = hexToOklch(anchor)
+
+  // Keep the curve monotonic even for very light/dark anchors.
+  const lightest = Math.max(params.lightest ?? CURVE_DEFAULTS.lightest, anchorColor.l + 0.005)
+  const darkest = Math.min(params.darkest ?? CURVE_DEFAULTS.darkest, anchorColor.l - 0.005)
+  const vibrance = params.vibrance ?? CURVE_DEFAULTS.vibrance
+  const spread = params.spread ?? CURVE_DEFAULTS.spread
+  const hueDrift = params.hueDrift ?? CURVE_DEFAULTS.hueDrift
+
+  const result = {} as Record<Shade, string>
+
+  for (const [index, shade] of SHADES.entries()) {
+    if (shade === 500) {
+      result[shade] = anchor.toUpperCase()
+      continue
+    }
+
+    // Rescale the base lightness curve piecewise around the anchor so its
+    // shape is preserved on both sides of shade 500.
+    const base = BASE_LIGHTNESS[shade]
+    const anchorBase = BASE_LIGHTNESS[500]
+    let l: number
+    if (shade < 500) {
+      const t = (base - anchorBase) / (BASE_LIGHTNESS[50] - anchorBase)
+      l = anchorColor.l + t * (lightest - anchorColor.l)
+    } else {
+      const t = (anchorBase - base) / (anchorBase - BASE_LIGHTNESS[950])
+      l = anchorColor.l + t * (darkest - anchorColor.l)
+    }
+
+    // Chroma bell centered on the anchor stop, normalized to 1 there.
+    const t = index / (SHADES.length - 1)
+    const bell = Math.exp(-((t - 0.5) ** 2) / (2 * spread ** 2))
+    const c = anchorColor.c * vibrance * bell
+
+    const h = anchorColor.h + hueDrift * (t - 0.5)
+
+    result[shade] = oklchToHex({ l, c, h })
+  }
+
+  return result
+}
diff --git a/docs/app/utils/theme-engine/types.ts b/docs/app/utils/theme-engine/types.ts
index 988348f380..204fc051cf 100644
--- a/docs/app/utils/theme-engine/types.ts
+++ b/docs/app/utils/theme-engine/types.ts
@@ -8,6 +8,12 @@ export interface ThemePalette {
   /** Tailwind palette this one is based on, when only some shades differ */
   extends?: string
   shades: Partial<Record<Shade, string>>
+  /**
+   * Generator params the shades were materialized from (see palette.ts),
+   * kept so the palette stays editable in the studio. Purely metadata:
+   * exports and application always use the materialized `shades`.
+   */
+  curve?: import('./palette').PaletteCurveParams
 }
 
 /**
diff --git a/test/utils/theme-palette.spec.ts b/test/utils/theme-palette.spec.ts
new file mode 100644
index 0000000000..acfb15076c
--- /dev/null
+++ b/test/utils/theme-palette.spec.ts
@@ -0,0 +1,112 @@
+import { describe, it, expect } from 'vitest'
+import {
+  hexToOklch,
+  oklchToHex,
+  inGamut,
+  clampToGamut,
+  contrastRatio,
+  generatePalette,
+  SHADES
+} from '../../docs/app/utils/theme-engine'
+
+describe('oklch', () => {
+  it('matches reference values', () => {
+    // Reference values from the CSS Color 4 / OKLab reference implementation
+    const red = hexToOklch('#ff0000')
+    expect(red.l).toBeCloseTo(0.6279, 3)
+    expect(red.c).toBeCloseTo(0.2577, 3)
+    expect(red.h).toBeCloseTo(29.23, 1)
+
+    const white = hexToOklch('#ffffff')
+    expect(white.l).toBeCloseTo(1, 3)
+    expect(white.c).toBeCloseTo(0, 3)
+
+    const black = hexToOklch('#000000')
+    expect(black.l).toBeCloseTo(0, 3)
+  })
+
+  it('round-trips hex colors', () => {
+    for (const hex of ['#1DB954', '#CC785C', '#3B82F6', '#FAF9F5', '#121212']) {
+      expect(oklchToHex(hexToOklch(hex))).toBe(hex.toUpperCase())
+    }
+  })
+
+  it('supports short hex notation', () => {
+    expect(oklchToHex(hexToOklch('#f00'))).toBe('#FF0000')
+  })
+
+  it('clamps out-of-gamut colors by reducing chroma only', () => {
+    const impossible = { l: 0.5, c: 0.4, h: 145 }
+    expect(inGamut(impossible)).toBe(false)
+
+    const clamped = clampToGamut(impossible)
+    expect(inGamut(clamped)).toBe(true)
+    expect(clamped.l).toBe(impossible.l)
+    expect(clamped.h).toBe(impossible.h)
+    expect(clamped.c).toBeLessThan(impossible.c)
+  })
+
+  it('computes WCAG contrast ratios', () => {
+    expect(contrastRatio('#000000', '#ffffff')).toBeCloseTo(21, 1)
+    expect(contrastRatio('#ffffff', '#ffffff')).toBeCloseTo(1, 2)
+    // symmetric
+    expect(contrastRatio('#1DB954', '#ffffff')).toBeCloseTo(contrastRatio('#ffffff', '#1DB954'), 5)
+  })
+})
+
+describe('generatePalette', () => {
+  it('produces 11 valid hex shades with the anchor exact at 500', () => {
+    const palette = generatePalette({ anchor: '#1DB954' })
+
+    expect(Object.keys(palette)).toHaveLength(SHADES.length)
+    expect(palette[500]).toBe('#1DB954')
+    for (const shade of SHADES) {
+      expect(palette[shade]).toMatch(/^#[0-9A-F]{6}$/)
+    }
+  })
+
+  it('keeps lightness monotonically decreasing from 50 to 950', () => {
+    for (const anchor of ['#1DB954', '#CC785C', '#3B82F6', '#8E8672']) {
+      const palette = generatePalette({ anchor })
+      const lightnesses = SHADES.map(shade => hexToOklch(palette[shade]).l)
+
+      for (let i = 1; i < lightnesses.length; i++) {
+        expect(lightnesses[i]!, `${anchor} shade ${SHADES[i]}`).toBeLessThan(lightnesses[i - 1]!)
+      }
+    }
+  })
+
+  it('honors the lightest/darkest endpoints', () => {
+    const palette = generatePalette({ anchor: '#8E8672', lightest: 0.94, darkest: 0.2 })
+
+    expect(hexToOklch(palette[50]).l).toBeCloseTo(0.94, 2)
+    expect(hexToOklch(palette[950]).l).toBeCloseTo(0.2, 2)
+  })
+
+  it('scales chroma with vibrance', () => {
+    const muted = generatePalette({ anchor: '#3B82F6', vibrance: 0.5 })
+    const vivid = generatePalette({ anchor: '#3B82F6', vibrance: 1.5 })
+
+    // Compare a dark shade — very light shades gamut-clamp to the same ceiling.
+    expect(hexToOklch(muted[700]).c).toBeLessThan(hexToOklch(vivid[700]).c)
+  })
+
+  it('drifts hue across the ramp', () => {
+    const palette = generatePalette({ anchor: '#3B82F6', hueDrift: 40, vibrance: 1 })
+
+    const light = hexToOklch(palette[100]).h
+    const dark = hexToOklch(palette[900]).h
+    expect(dark).toBeGreaterThan(light)
+  })
+
+  it('stays monotonic for near-extreme anchors', () => {
+    for (const anchor of ['#F5F5F0', '#16130F']) {
+      const palette = generatePalette({ anchor })
+      const lightnesses = SHADES.map(shade => hexToOklch(palette[shade]).l)
+
+      for (let i = 1; i < lightnesses.length; i++) {
+        expect(lightnesses[i]!, `${anchor} shade ${SHADES[i]}`).toBeLessThan(lightnesses[i - 1]!)
+      }
+    }
+  })
+})

From 4ba2c59cc41a93f1bcfc7b0b1e7b60bd01465c8b Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 01:11:30 +0200
Subject: [PATCH 005/185] fix(docs): make palette editor opt-in and escapable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Opening the editor no longer hijacks the theme (preview only until a user
edit or explicit 'Use this palette'). With a custom palette active, the
standard swatches re-anchor the custom ramp to the chosen palette instead
of being dead ends, and an always-visible ✕ on the trigger row drops the
custom palette entirely. Adds parseCssColor (hex/oklch/rgb) so anchors
can seed from tailwind JS values or the docs' CSS-only palettes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      |  6 +-
 .../theme-studio/ThemeStudioPaletteEditor.vue | 95 ++++++++++++++-----
 docs/app/composables/useThemeStudio.ts        | 38 +++++++-
 docs/app/utils/theme-engine/oklch.ts          | 25 +++++
 test/utils/theme-color-parse.spec.ts          | 31 ++++++
 5 files changed, 170 insertions(+), 25 deletions(-)
 create mode 100644 test/utils/theme-color-parse.spec.ts

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 585a250d5e..a16636fd13 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -17,6 +17,8 @@ const {
   modes,
   mode
 } = useTheme()
+
+const { selectPalette } = useThemeStudio()
 </script>
 
 <template>
@@ -53,7 +55,7 @@ const {
           :label="color"
           :chip="color"
           :selected="!blackAsPrimary && primary === color"
-          @click="primary = color"
+          @click="selectPalette('primary', color)"
         />
       </div>
 
@@ -82,7 +84,7 @@ const {
           :label="color"
           :chip="color === 'neutral' ? 'old-neutral' : color"
           :selected="neutral === color"
-          @click="neutral = color"
+          @click="selectPalette('neutral', color)"
         />
       </div>
 
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 89bf46d172..172f710eb0 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -7,7 +7,8 @@ const props = defineProps<{
   alias: 'primary' | 'neutral'
 }>()
 
-const { paletteParams, isCustomPalette, setPaletteFromCurve, clearCustomPalette } = useThemeStudio()
+const appConfig = useAppConfig()
+const { paletteParams, isCustomPalette, anchorFromPalette, setPaletteFromCurve, clearCustomPalette } = useThemeStudio()
 
 const DEFAULT_ANCHORS = {
   primary: '#00C16A',
@@ -29,27 +30,52 @@ const shades = computed(() => generatePalette(params))
 // White text on shade 500 is what solid buttons render — the pair worth watching.
 const contrast = computed(() => contrastRatio(shades.value[500]!, '#FFFFFF'))
 
-const apply = useDebounceFn(() => {
+// Programmatic writes into `params` (seeding, external sync) must not
+// live-apply — only user edits do.
+let suppress = false
+function seed(values: Partial<PaletteCurveParams>) {
+  suppress = true
+  Object.assign(params, values)
+  nextTick(() => {
+    suppress = false
+  })
+}
+
+const debouncedApply = useDebounceFn(() => {
   setPaletteFromCurve(props.alias, { ...params })
 }, 200)
 
-let touched = false
 watch(params, () => {
-  touched = true
-  apply()
+  if (!suppress) {
+    debouncedApply()
+  }
 })
 
-// First expansion applies the initial ramp so the preview and page agree.
-watch(open, (isOpen) => {
-  if (isOpen && !active.value && !touched) {
-    apply()
+// Swatch clicks while active re-anchor via the studio — reflect them here.
+watch(() => paletteParams.value[props.alias], (stored) => {
+  if (stored && stored.anchor !== params.anchor) {
+    seed(stored)
   }
 })
 
+// While inactive, follow the selected palette so opening the editor starts
+// from the color already on screen instead of hijacking it.
+watch(() => (appConfig.ui.colors as Record<string, string>)[props.alias], (palette) => {
+  if (!active.value && palette) {
+    const anchor = anchorFromPalette(palette)
+    if (anchor) {
+      seed({ anchor })
+    }
+  }
+}, { immediate: true })
+
+function apply() {
+  setPaletteFromCurve(props.alias, { ...params })
+}
+
 function remove() {
   clearCustomPalette(props.alias)
   open.value = false
-  touched = false
 }
 
 const sliders = [
@@ -63,17 +89,31 @@ const sliders = [
 
 <template>
   <UCollapsible v-model:open="open" class="mt-1.5">
-    <UButton
-      :label="active ? 'Custom palette' : 'Create custom palette'"
-      :icon="active ? 'i-lucide-paintbrush' : 'i-lucide-wand-sparkles'"
-      color="neutral"
-      variant="ghost"
-      size="xs"
-      block
-      class="justify-start text-[11px]"
-      :ui="{ leadingIcon: active ? 'text-primary size-3.5' : 'size-3.5' }"
-      trailing-icon="i-lucide-chevron-down"
-    />
+    <div class="flex items-center gap-1">
+      <UButton
+        :label="active ? 'Custom palette' : 'Create custom palette'"
+        :icon="active ? 'i-lucide-paintbrush' : 'i-lucide-wand-sparkles'"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        block
+        class="justify-start text-[11px]"
+        :ui="{ leadingIcon: active ? 'text-primary size-3.5' : 'size-3.5' }"
+        trailing-icon="i-lucide-chevron-down"
+      />
+
+      <UTooltip v-if="active" text="Remove custom palette">
+        <UButton
+          icon="i-lucide-x"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          aria-label="Remove custom palette"
+          :ui="{ leadingIcon: 'size-3.5' }"
+          @click.stop="remove"
+        />
+      </UTooltip>
+    </div>
 
     <template #content>
       <div class="flex flex-col gap-3 pt-3 pb-1">
@@ -129,7 +169,18 @@ const sliders = [
         </div>
 
         <UButton
-          v-if="active"
+          v-if="!active"
+          label="Use this palette"
+          icon="i-lucide-check"
+          color="neutral"
+          variant="soft"
+          size="xs"
+          block
+          class="text-[11px]"
+          @click="apply"
+        />
+        <UButton
+          v-else
           label="Remove custom palette"
           icon="i-lucide-trash-2"
           color="neutral"
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 8166d4fbe8..5dfddaf14c 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,5 +1,6 @@
 import { useLocalStorage } from '@vueuse/core'
-import { presets, docToSettings, isDefaultTheme, generatePalette, DEFAULT_COLORS } from '../utils/theme-engine'
+import colors from 'tailwindcss/colors'
+import { presets, docToSettings, isDefaultTheme, generatePalette, parseCssColor, DEFAULT_COLORS } from '../utils/theme-engine'
 import type { ThemeDoc, ThemePreset, PaletteCurveParams } from '../utils/theme-engine'
 
 export function useThemeStudio() {
@@ -20,6 +21,39 @@ export function useThemeStudio() {
     return (appConfig.ui.colors as Record<string, string>)[alias] === customPaletteName(alias)
   }
 
+  /** The 500 hex of a named palette — tailwind's JS values first, CSS variables as fallback. */
+  function anchorFromPalette(name: string): string | undefined {
+    const tailwind = (colors as Record<string, any>)[name]?.[500]
+    if (tailwind) return parseCssColor(tailwind)
+
+    if (import.meta.client) {
+      const cssValue = getComputedStyle(document.documentElement).getPropertyValue(`--color-${name === 'neutral' ? 'old-neutral' : name}-500`)
+      if (cssValue) return parseCssColor(cssValue)
+    }
+    return undefined
+  }
+
+  /**
+   * Swatch-click entry point. With a custom palette active the swatches act
+   * as anchor pickers — the custom ramp re-anchors to the chosen palette's
+   * color and keeps its curve. Otherwise it is a plain alias switch.
+   */
+  function selectPalette(alias: 'primary' | 'neutral', name: string) {
+    if (isCustomPalette(alias)) {
+      const anchor = anchorFromPalette(name)
+      if (anchor) {
+        setPaletteFromCurve(alias, { ...paletteParams.value[alias], anchor })
+        return
+      }
+    }
+
+    if (alias === 'primary') {
+      theme.primary.value = name
+    } else {
+      theme.neutral.value = name
+    }
+  }
+
   /** Generate a ramp from curve params and point the alias at it. */
   function setPaletteFromCurve(alias: 'primary' | 'neutral', params: PaletteCurveParams) {
     const name = customPaletteName(alias)
@@ -97,6 +131,8 @@ export function useThemeStudio() {
     activePreset,
     paletteParams,
     isCustomPalette,
+    anchorFromPalette,
+    selectPalette,
     setPaletteFromCurve,
     clearCustomPalette,
     applyDoc,
diff --git a/docs/app/utils/theme-engine/oklch.ts b/docs/app/utils/theme-engine/oklch.ts
index 5c8799b6ff..b3f4a11aa8 100644
--- a/docs/app/utils/theme-engine/oklch.ts
+++ b/docs/app/utils/theme-engine/oklch.ts
@@ -108,6 +108,31 @@ export function hexToOklch(hex: string): Oklch {
   return rgbToOklch(hexToRgb(hex))
 }
 
+/**
+ * Normalize a CSS color value to hex. Handles the forms the studio actually
+ * meets: hex, `oklch(…)` (tailwind v4's format) and `rgb(…)`.
+ */
+export function parseCssColor(value: string): string | undefined {
+  const input = value.trim()
+
+  if (input.startsWith('#')) {
+    return rgbToHex(hexToRgb(input))
+  }
+
+  const oklch = input.match(/^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)/i)
+  if (oklch) {
+    const l = Number(oklch[1]) / (oklch[2] === '%' ? 100 : 1)
+    return oklchToHex({ l, c: Number(oklch[3]), h: Number(oklch[4]) })
+  }
+
+  const rgb = input.match(/^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/i)
+  if (rgb) {
+    return rgbToHex([Number(rgb[1]) / 255, Number(rgb[2]) / 255, Number(rgb[3]) / 255])
+  }
+
+  return undefined
+}
+
 /** WCAG 2.x relative luminance. */
 function luminance(hex: string): number {
   const [r, g, b] = hexToRgb(hex).map(srgbToLinear) as [number, number, number]
diff --git a/test/utils/theme-color-parse.spec.ts b/test/utils/theme-color-parse.spec.ts
new file mode 100644
index 0000000000..9d24408058
--- /dev/null
+++ b/test/utils/theme-color-parse.spec.ts
@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest'
+import { parseCssColor } from '../../docs/app/utils/theme-engine'
+import colors from 'tailwindcss/colors'
+
+describe('parseCssColor', () => {
+  it('passes hex through normalized', () => {
+    expect(parseCssColor('#cc785c')).toBe('#CC785C')
+    expect(parseCssColor(' #F00 ')).toBe('#FF0000')
+  })
+
+  it('parses tailwind v4 oklch values', () => {
+    // Every tailwind palette value must survive the round trip.
+    const hex = parseCssColor(colors.blue[500])
+    expect(hex).toMatch(/^#[0-9A-F]{6}$/)
+  })
+
+  it('parses oklch with percentage lightness', () => {
+    expect(parseCssColor('oklch(100% 0 0)')).toBe('#FFFFFF')
+    expect(parseCssColor('oklch(0 0 0)')).toBe('#000000')
+  })
+
+  it('parses rgb values', () => {
+    expect(parseCssColor('rgb(255, 0, 0)')).toBe('#FF0000')
+    expect(parseCssColor('rgb(29 185 84)')).toBe('#1DB954')
+  })
+
+  it('returns undefined for unknown formats', () => {
+    expect(parseCssColor('hotpink')).toBeUndefined()
+    expect(parseCssColor('var(--color-red-500)')).toBeUndefined()
+  })
+})

From f2f8f50b41796bc74e47866873b49205f1ca56fd Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 01:16:58 +0200
Subject: [PATCH 006/185] fix(docs): match generated ramps to tailwind's color
 scale shape

The base lightness curve was taken from tailwind's gray scale, so color
ramps came out far too dark at the 800-950 end (dL up to -0.17) and the
too-light wings gamut-clamped their chroma away. Rebased the curve on
tailwind's color ramps, widened the chroma bell, gave neutrals their own
deeper dark end, and widened the extreme-anchor guard so near-black
anchors still produce distinct shades.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioPaletteEditor.vue |  4 +-
 docs/app/utils/theme-engine/palette.ts        | 52 ++++++++++++-------
 test/utils/theme-palette.spec.ts              |  6 ++-
 3 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 172f710eb0..b926a753a0 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useDebounceFn } from '@vueuse/core'
-import { SHADES, CURVE_DEFAULTS, generatePalette, contrastRatio } from '../../utils/theme-engine'
+import { SHADES, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, generatePalette, contrastRatio } from '../../utils/theme-engine'
 import type { PaletteCurveParams } from '../../utils/theme-engine'
 
 const props = defineProps<{
@@ -19,7 +19,7 @@ const open = ref(false)
 
 const params = reactive<Required<PaletteCurveParams>>({
   anchor: DEFAULT_ANCHORS[props.alias],
-  ...CURVE_DEFAULTS,
+  ...(props.alias === 'neutral' ? NEUTRAL_CURVE_DEFAULTS : CURVE_DEFAULTS),
   ...paletteParams.value[props.alias]
 })
 
diff --git a/docs/app/utils/theme-engine/palette.ts b/docs/app/utils/theme-engine/palette.ts
index 4914400e14..2898c055de 100644
--- a/docs/app/utils/theme-engine/palette.ts
+++ b/docs/app/utils/theme-engine/palette.ts
@@ -25,39 +25,51 @@ export interface PaletteCurveParams {
 }
 
 export const CURVE_DEFAULTS = {
-  lightest: 0.985,
-  darkest: 0.13,
+  lightest: 0.977,
+  darkest: 0.27,
   vibrance: 1,
-  spread: 0.35,
+  spread: 0.5,
   hueDrift: 0
 } as const
 
 /**
- * Tailwind-like perceptual lightness targets per stop, used as the base
- * curve shape and rescaled piecewise so the anchor's own lightness lands
- * exactly on shade 500.
+ * Neutral ramps want a much deeper dark end than color ramps: tailwind's
+ * color palettes stop near L 0.27 (a near-black blue is useless), while the
+ * grays run to L 0.13 so dark-mode backgrounds stay genuinely dark.
+ */
+export const NEUTRAL_CURVE_DEFAULTS = {
+  ...CURVE_DEFAULTS,
+  darkest: 0.13
+} as const
+
+/**
+ * Lightness targets per stop averaged from tailwind v4's color ramps
+ * (blue/green/orange), used as the base curve shape and rescaled piecewise
+ * so the anchor's own lightness lands exactly on shade 500.
  */
 const BASE_LIGHTNESS: Record<Shade, number> = {
-  50: 0.985,
-  100: 0.967,
-  200: 0.928,
-  300: 0.872,
-  400: 0.707,
-  500: 0.551,
-  600: 0.446,
-  700: 0.373,
-  800: 0.278,
-  900: 0.21,
-  950: 0.13
+  50: 0.977,
+  100: 0.949,
+  200: 0.903,
+  300: 0.838,
+  400: 0.749,
+  500: 0.684,
+  600: 0.607,
+  700: 0.523,
+  800: 0.447,
+  900: 0.393,
+  950: 0.271
 }
 
 export function generatePalette(params: PaletteCurveParams): Record<Shade, string> {
   const { anchor } = params
   const anchorColor = hexToOklch(anchor)
 
-  // Keep the curve monotonic even for very light/dark anchors.
-  const lightest = Math.max(params.lightest ?? CURVE_DEFAULTS.lightest, anchorColor.l + 0.005)
-  const darkest = Math.min(params.darkest ?? CURVE_DEFAULTS.darkest, anchorColor.l - 0.005)
+  // Keep the curve monotonic even for very light/dark anchors — 0.04 of
+  // lightness spread is roughly the minimum that survives 8-bit rounding
+  // without adjacent stops collapsing into the same hex.
+  const lightest = Math.max(params.lightest ?? CURVE_DEFAULTS.lightest, Math.min(anchorColor.l + 0.04, 0.995))
+  const darkest = Math.min(params.darkest ?? CURVE_DEFAULTS.darkest, Math.max(anchorColor.l - 0.04, 0.005))
   const vibrance = params.vibrance ?? CURVE_DEFAULTS.vibrance
   const spread = params.spread ?? CURVE_DEFAULTS.spread
   const hueDrift = params.hueDrift ?? CURVE_DEFAULTS.hueDrift
diff --git a/test/utils/theme-palette.spec.ts b/test/utils/theme-palette.spec.ts
index acfb15076c..8d0489e191 100644
--- a/test/utils/theme-palette.spec.ts
+++ b/test/utils/theme-palette.spec.ts
@@ -99,13 +99,15 @@ describe('generatePalette', () => {
     expect(dark).toBeGreaterThan(light)
   })
 
-  it('stays monotonic for near-extreme anchors', () => {
+  it('stays ordered for near-extreme anchors', () => {
+    // At true extremes the ramp degenerates by design; 8-bit rounding may
+    // produce equal neighbors, but the order must never invert.
     for (const anchor of ['#F5F5F0', '#16130F']) {
       const palette = generatePalette({ anchor })
       const lightnesses = SHADES.map(shade => hexToOklch(palette[shade]).l)
 
       for (let i = 1; i < lightnesses.length; i++) {
-        expect(lightnesses[i]!, `${anchor} shade ${SHADES[i]}`).toBeLessThan(lightnesses[i - 1]!)
+        expect(lightnesses[i]!, `${anchor} shade ${SHADES[i]}`).toBeLessThanOrEqual(lightnesses[i - 1]!)
       }
     }
   })

From 19bdb2d8270ffcfbcd30349297797c6580db92b4 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 01:32:32 +0200
Subject: [PATCH 007/185] feat(docs): channel-curve palette editor with
 tailwind reverse-fitting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the hex-anchor abstraction: a palette is now three transition
curves (lightness, chroma, hue) edited in a devtools-easing-style square
with draggable endpoint Ys and free handles, one tab per channel. Any
existing palette (tailwind or the docs' CSS-only neutrals) is
reverse-fitted into curves via coordinate-descent so editing always
starts from the real thing — swatch clicks while a custom palette is
active refit to the chosen palette, resetting the scales.

Custom neutrals also re-route the hardcoded white tokens (light --ui-bg /
--ui-text-inverted, dark --ui-text-highlighted) through the ramp so a
tinted neutral finally reaches the app background in light mode; the
remaps are cleaned up on removal.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioCurveEditor.vue   | 190 ++++++++++++++
 .../theme-studio/ThemeStudioPaletteEditor.vue | 163 ++++++------
 docs/app/composables/useTheme.ts              |  17 ++
 docs/app/composables/useThemeStudio.ts        |  61 +++--
 docs/app/utils/theme-engine/palette.ts        | 248 ++++++++++++------
 test/utils/theme-palette.spec.ts              | 108 +++++---
 6 files changed, 587 insertions(+), 200 deletions(-)
 create mode 100644 docs/app/components/theme-studio/ThemeStudioCurveEditor.vue

diff --git a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
new file mode 100644
index 0000000000..de02809c38
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { sampleCurve, SHADES } from '../../utils/theme-engine'
+import type { ChannelCurve } from '../../utils/theme-engine'
+
+const props = defineProps<{
+  /** Display window for the channel value axis */
+  yMin: number
+  yMax: number
+  /** Fill colors for the 11 stop dots along the curve */
+  stopColors?: string[]
+}>()
+
+const curve = defineModel<ChannelCurve>({ required: true })
+
+const W = 200
+const H = 120
+const PAD = 10
+
+function toX(x: number) {
+  return PAD + x * (W - 2 * PAD)
+}
+
+function toY(value: number) {
+  return PAD + (1 - (value - props.yMin) / (props.yMax - props.yMin)) * (H - 2 * PAD)
+}
+
+function fromX(px: number) {
+  return Math.min(1, Math.max(0, (px - PAD) / (W - 2 * PAD)))
+}
+
+function fromY(py: number) {
+  return props.yMin + (1 - (py - PAD) / (H - 2 * PAD)) * (props.yMax - props.yMin)
+}
+
+const path = computed(() => {
+  const c = curve.value
+  return `M ${toX(0)} ${toY(c.y0)} C ${toX(c.p1x)} ${toY(c.p1y)}, ${toX(c.p2x)} ${toY(c.p2y)}, ${toX(1)} ${toY(c.y1)}`
+})
+
+const stops = computed(() => SHADES.map((shade, index) => {
+  const x = index / (SHADES.length - 1)
+  return {
+    shade,
+    cx: toX(x),
+    cy: toY(sampleCurve(x, curve.value)),
+    fill: props.stopColors?.[index] || 'currentColor'
+  }
+}))
+
+const svgRef = ref<SVGSVGElement>()
+const dragging = ref<'y0' | 'y1' | 'p1' | 'p2' | null>(null)
+
+function svgPoint(event: PointerEvent): { x: number, y: number } {
+  const rect = svgRef.value!.getBoundingClientRect()
+  return {
+    x: (event.clientX - rect.left) * (W / rect.width),
+    y: (event.clientY - rect.top) * (H / rect.height)
+  }
+}
+
+function onPointerDown(event: PointerEvent) {
+  const point = svgPoint(event)
+  const c = curve.value
+
+  const targets = [
+    { id: 'p1' as const, x: toX(c.p1x), y: toY(c.p1y) },
+    { id: 'p2' as const, x: toX(c.p2x), y: toY(c.p2y) },
+    { id: 'y0' as const, x: toX(0), y: toY(c.y0) },
+    { id: 'y1' as const, x: toX(1), y: toY(c.y1) }
+  ]
+
+  let best: { id: typeof dragging.value, distance: number } = { id: null, distance: 14 }
+  for (const target of targets) {
+    const distance = Math.hypot(target.x - point.x, target.y - point.y)
+    if (distance < best.distance) {
+      best = { id: target.id, distance }
+    }
+  }
+
+  if (best.id) {
+    dragging.value = best.id
+    svgRef.value!.setPointerCapture(event.pointerId)
+    event.preventDefault()
+  }
+}
+
+function onPointerMove(event: PointerEvent) {
+  if (!dragging.value) return
+
+  const point = svgPoint(event)
+  const value = fromY(point.y)
+  // Allow moderate overshoot beyond the window, devtools-style.
+  const overshoot = (props.yMax - props.yMin) * 0.15
+  const clamped = Math.min(props.yMax + overshoot, Math.max(props.yMin - overshoot, value))
+
+  if (dragging.value === 'y0') {
+    curve.value = { ...curve.value, y0: clamped }
+  } else if (dragging.value === 'y1') {
+    curve.value = { ...curve.value, y1: clamped }
+  } else if (dragging.value === 'p1') {
+    curve.value = { ...curve.value, p1x: fromX(point.x), p1y: clamped }
+  } else {
+    curve.value = { ...curve.value, p2x: fromX(point.x), p2y: clamped }
+  }
+}
+
+function onPointerUp(event: PointerEvent) {
+  if (dragging.value) {
+    dragging.value = null
+    svgRef.value!.releasePointerCapture(event.pointerId)
+  }
+}
+</script>
+
+<template>
+  <svg
+    ref="svgRef"
+    :viewBox="`0 0 ${W} ${H}`"
+    class="w-full rounded-sm ring ring-default bg-elevated/30 touch-none select-none cursor-crosshair"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+    @pointercancel="onPointerUp"
+  >
+    <!-- grid -->
+    <line
+      v-for="fraction in [0.25, 0.5, 0.75]"
+      :key="`v${fraction}`"
+      :x1="toX(fraction)"
+      :x2="toX(fraction)"
+      :y1="PAD"
+      :y2="H - PAD"
+      class="stroke-(--ui-border) opacity-40"
+      stroke-width="0.5"
+    />
+    <line
+      v-for="fraction in [0.25, 0.5, 0.75]"
+      :key="`h${fraction}`"
+      :x1="PAD"
+      :x2="W - PAD"
+      :y1="PAD + fraction * (H - 2 * PAD)"
+      :y2="PAD + fraction * (H - 2 * PAD)"
+      class="stroke-(--ui-border) opacity-40"
+      stroke-width="0.5"
+    />
+
+    <!-- handle connectors -->
+    <line
+      :x1="toX(0)"
+      :y1="toY(curve.y0)"
+      :x2="toX(curve.p1x)"
+      :y2="toY(curve.p1y)"
+      class="stroke-(--ui-text-dimmed)"
+      stroke-width="0.75"
+      stroke-dasharray="2 2"
+    />
+    <line
+      :x1="toX(1)"
+      :y1="toY(curve.y1)"
+      :x2="toX(curve.p2x)"
+      :y2="toY(curve.p2y)"
+      class="stroke-(--ui-text-dimmed)"
+      stroke-width="0.75"
+      stroke-dasharray="2 2"
+    />
+
+    <!-- curve -->
+    <path :d="path" fill="none" class="stroke-(--ui-primary)" stroke-width="1.5" />
+
+    <!-- shade stops on the curve -->
+    <circle
+      v-for="stop in stops"
+      :key="stop.shade"
+      :cx="stop.cx"
+      :cy="stop.cy"
+      r="2.25"
+      :fill="stop.fill"
+      class="stroke-(--ui-bg)"
+      stroke-width="0.5"
+    />
+
+    <!-- handles -->
+    <circle :cx="toX(curve.p1x)" :cy="toY(curve.p1y)" r="4" class="fill-(--ui-bg) stroke-(--ui-text-muted)" stroke-width="1.25" />
+    <circle :cx="toX(curve.p2x)" :cy="toY(curve.p2y)" r="4" class="fill-(--ui-bg) stroke-(--ui-text-muted)" stroke-width="1.25" />
+
+    <!-- endpoints -->
+    <circle :cx="toX(0)" :cy="toY(curve.y0)" r="4.5" class="fill-(--ui-text-highlighted)" />
+    <circle :cx="toX(1)" :cy="toY(curve.y1)" r="4.5" class="fill-(--ui-text-highlighted)" />
+  </svg>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index b926a753a0..a40afc3c7e 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useDebounceFn } from '@vueuse/core'
-import { SHADES, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, generatePalette, contrastRatio } from '../../utils/theme-engine'
+import { SHADES, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, generatePalette, fitPalette, contrastRatio } from '../../utils/theme-engine'
 import type { PaletteCurveParams } from '../../utils/theme-engine'
 
 const props = defineProps<{
@@ -8,42 +8,70 @@ const props = defineProps<{
 }>()
 
 const appConfig = useAppConfig()
-const { paletteParams, isCustomPalette, anchorFromPalette, setPaletteFromCurve, clearCustomPalette } = useThemeStudio()
-
-const DEFAULT_ANCHORS = {
-  primary: '#00C16A',
-  neutral: '#71717A'
-}
+const { paletteParams, isCustomPalette, paletteShades, setPaletteFromCurve, clearCustomPalette } = useThemeStudio()
 
 const open = ref(false)
+const tab = ref<'lightness' | 'chroma' | 'hue'>('lightness')
 
-const params = reactive<Required<PaletteCurveParams>>({
-  anchor: DEFAULT_ANCHORS[props.alias],
-  ...(props.alias === 'neutral' ? NEUTRAL_CURVE_DEFAULTS : CURVE_DEFAULTS),
-  ...paletteParams.value[props.alias]
-})
+const tabs = [
+  { label: 'Lightness', value: 'lightness' as const },
+  { label: 'Chroma', value: 'chroma' as const },
+  { label: 'Hue', value: 'hue' as const }
+]
+
+function defaults(): PaletteCurveParams {
+  return structuredClone(props.alias === 'neutral' ? NEUTRAL_CURVE_DEFAULTS : CURVE_DEFAULTS)
+}
+
+const stored = paletteParams.value[props.alias]
+const params = reactive<PaletteCurveParams>(
+  // Older stored shapes (anchor/slider based) are simply refitted on open.
+  stored && 'lightness' in stored ? structuredClone(toRaw(stored)) as PaletteCurveParams : defaults()
+)
 
 const active = computed(() => isCustomPalette(props.alias))
 
 const shades = computed(() => generatePalette(params))
+const stopColors = computed(() => SHADES.map(shade => shades.value[shade]))
 
 // White text on shade 500 is what solid buttons render — the pair worth watching.
 const contrast = computed(() => contrastRatio(shades.value[500]!, '#FFFFFF'))
 
+/**
+ * The hue axis window floats around the curve (a full 0–360 axis would make
+ * drifts invisible); frozen while editing so the canvas doesn't chase the
+ * pointer. Lightness and chroma have fixed, comparable windows.
+ */
+const hueWindow = ref({ min: 0, max: 360 })
+
+function recenterHueWindow() {
+  const values = [params.hue.y0, params.hue.y1, params.hue.p1y, params.hue.p2y]
+  const center = (Math.min(...values) + Math.max(...values)) / 2
+  const span = Math.max(90, (Math.max(...values) - Math.min(...values)) + 40)
+  hueWindow.value = { min: center - span / 2, max: center + span / 2 }
+}
+
+const windows = computed(() => ({
+  lightness: { min: 0, max: 1 },
+  chroma: { min: 0, max: 0.35 },
+  hue: hueWindow.value
+}))
+
 // Programmatic writes into `params` (seeding, external sync) must not
 // live-apply — only user edits do.
 let suppress = false
-function seed(values: Partial<PaletteCurveParams>) {
+function seed(values: PaletteCurveParams) {
   suppress = true
-  Object.assign(params, values)
+  Object.assign(params, structuredClone(toRaw(values)))
+  recenterHueWindow()
   nextTick(() => {
     suppress = false
   })
 }
 
 const debouncedApply = useDebounceFn(() => {
-  setPaletteFromCurve(props.alias, { ...params })
-}, 200)
+  setPaletteFromCurve(props.alias, structuredClone(toRaw(params)))
+}, 150)
 
 watch(params, () => {
   if (!suppress) {
@@ -51,40 +79,40 @@ watch(params, () => {
   }
 })
 
-// Swatch clicks while active re-anchor via the studio — reflect them here.
-watch(() => paletteParams.value[props.alias], (stored) => {
-  if (stored && stored.anchor !== params.anchor) {
-    seed(stored)
+/** Fit curves from whatever palette the alias currently shows. */
+function seedFromCurrent() {
+  const name = (appConfig.ui.colors as Record<string, string>)[props.alias]
+  if (!name) return
+
+  const source = paletteShades(name)
+  if (source) {
+    seed(fitPalette(source))
+  }
+}
+
+// Swatch clicks while active refit via the studio — reflect them here.
+watch(() => paletteParams.value[props.alias], (value) => {
+  if (value && 'lightness' in value && JSON.stringify(value) !== JSON.stringify(toRaw(params))) {
+    seed(value as PaletteCurveParams)
   }
 })
 
 // While inactive, follow the selected palette so opening the editor starts
-// from the color already on screen instead of hijacking it.
-watch(() => (appConfig.ui.colors as Record<string, string>)[props.alias], (palette) => {
-  if (!active.value && palette) {
-    const anchor = anchorFromPalette(palette)
-    if (anchor) {
-      seed({ anchor })
-    }
+// from the curves of the color already on screen.
+watch([() => (appConfig.ui.colors as Record<string, string>)[props.alias], open], ([, isOpen]) => {
+  if (isOpen && !active.value) {
+    seedFromCurrent()
   }
-}, { immediate: true })
+})
 
 function apply() {
-  setPaletteFromCurve(props.alias, { ...params })
+  setPaletteFromCurve(props.alias, structuredClone(toRaw(params)))
 }
 
 function remove() {
   clearCustomPalette(props.alias)
   open.value = false
 }
-
-const sliders = [
-  { key: 'lightest', label: 'Light end', min: 0.9, max: 1, step: 0.005 },
-  { key: 'darkest', label: 'Dark end', min: 0.05, max: 0.35, step: 0.005 },
-  { key: 'vibrance', label: 'Vibrance', min: 0, max: 2, step: 0.05 },
-  { key: 'spread', label: 'Spread', min: 0.15, max: 0.8, step: 0.01 },
-  { key: 'hueDrift', label: 'Hue drift', min: -60, max: 60, step: 1 }
-] as const
 </script>
 
 <template>
@@ -116,27 +144,30 @@ const sliders = [
     </div>
 
     <template #content>
-      <div class="flex flex-col gap-3 pt-3 pb-1">
-        <div class="flex items-center gap-2">
-          <UPopover>
-            <button
-              type="button"
-              aria-label="Pick anchor color"
-              class="size-7 shrink-0 rounded-sm ring ring-default cursor-pointer"
-              :style="{ backgroundColor: params.anchor }"
-            />
+      <div class="flex flex-col gap-2.5 pt-3 pb-1">
+        <UTabs
+          v-model="tab"
+          :items="tabs"
+          :content="false"
+          size="xs"
+          color="neutral"
+          :ui="{ trigger: 'text-[11px]' }"
+          @update:model-value="tab === 'hue' && recenterHueWindow()"
+        />
 
-            <template #content>
-              <UColorPicker v-model="params.anchor" class="p-2" />
-            </template>
-          </UPopover>
+        <ThemeStudioCurveEditor
+          v-model="params[tab]"
+          :y-min="windows[tab].min"
+          :y-max="windows[tab].max"
+          :stop-colors="stopColors"
+        />
 
-          <UInput
-            v-model="params.anchor"
-            size="sm"
-            class="flex-1 font-mono"
-            :ui="{ base: 'text-[11px]' }"
-          />
+        <div class="flex items-center gap-2">
+          <div class="flex flex-1 rounded-sm overflow-hidden ring ring-default">
+            <UTooltip v-for="shade in SHADES" :key="shade" :text="`${shade} · ${shades[shade]}`">
+              <div class="h-5 flex-1" :style="{ backgroundColor: shades[shade] }" />
+            </UTooltip>
+          </div>
 
           <UTooltip :text="`White on 500: ${contrast.toFixed(1)}:1`">
             <UBadge
@@ -148,26 +179,6 @@ const sliders = [
           </UTooltip>
         </div>
 
-        <div class="flex rounded-sm overflow-hidden ring ring-default">
-          <UTooltip v-for="shade in SHADES" :key="shade" :text="`${shade} · ${shades[shade]}`">
-            <div class="h-6 flex-1" :style="{ backgroundColor: shades[shade] }" />
-          </UTooltip>
-        </div>
-
-        <div v-for="slider in sliders" :key="slider.key" class="flex items-center gap-2">
-          <span class="text-[11px] text-muted w-16 shrink-0 select-none">{{ slider.label }}</span>
-
-          <USlider
-            v-model="params[slider.key]"
-            :min="slider.min"
-            :max="slider.max"
-            :step="slider.step"
-            size="xs"
-          />
-
-          <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ params[slider.key] }}</span>
-        </div>
-
         <UButton
           v-if="!active"
           label="Use this palette"
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 73601e6512..da87073f8e 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -302,6 +302,22 @@ export function useTheme() {
     window.localStorage.setItem('nuxt-ui-custom-colors', JSON.stringify(merged))
   }
 
+  function removeCSSVariables(keys: { light?: string[], dark?: string[] }) {
+    const next = {
+      light: Object.fromEntries(Object.entries(cssVariablesData.value.light || {}).filter(([key]) => !keys.light?.includes(key))),
+      dark: Object.fromEntries(Object.entries(cssVariablesData.value.dark || {}).filter(([key]) => !keys.dark?.includes(key)))
+    }
+    cssVariablesData.value = next
+    if (Object.keys(next.light).length || Object.keys(next.dark).length) {
+      window.localStorage.setItem('nuxt-ui-css-variables', JSON.stringify(next))
+    } else {
+      window.localStorage.removeItem('nuxt-ui-css-variables')
+      if (import.meta.client) {
+        document.getElementById('chat-css-variables')?.replaceChildren()
+      }
+    }
+  }
+
   function removeCustomColors(names: string[]) {
     const remaining = Object.fromEntries(Object.entries(customColorsData.value).filter(([name]) => !names.includes(name)))
     customColorsData.value = remaining
@@ -432,6 +448,7 @@ export function useTheme() {
     configLabel: computed(() => framework.value === 'vue' ? 'vite.config.ts' : 'app.config.ts'),
     currentDoc,
     removeCustomColors,
+    removeCSSVariables,
     exportCSS,
     exportConfig,
     applyThemeSettings,
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 5dfddaf14c..4de9b38603 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,7 +1,7 @@
 import { useLocalStorage } from '@vueuse/core'
 import colors from 'tailwindcss/colors'
-import { presets, docToSettings, isDefaultTheme, generatePalette, parseCssColor, DEFAULT_COLORS } from '../utils/theme-engine'
-import type { ThemeDoc, ThemePreset, PaletteCurveParams } from '../utils/theme-engine'
+import { presets, docToSettings, isDefaultTheme, generatePalette, fitPalette, parseCssColor, DEFAULT_COLORS, SHADES } from '../utils/theme-engine'
+import type { ThemeDoc, ThemePreset, PaletteCurveParams, Shade } from '../utils/theme-engine'
 
 export function useThemeStudio() {
   const theme = useTheme()
@@ -21,28 +21,37 @@ export function useThemeStudio() {
     return (appConfig.ui.colors as Record<string, string>)[alias] === customPaletteName(alias)
   }
 
-  /** The 500 hex of a named palette — tailwind's JS values first, CSS variables as fallback. */
-  function anchorFromPalette(name: string): string | undefined {
-    const tailwind = (colors as Record<string, any>)[name]?.[500]
-    if (tailwind) return parseCssColor(tailwind)
+  /** All 11 shade hexes of a named palette — tailwind's JS values first, CSS variables as fallback. */
+  function paletteShades(name: string): Partial<Record<Shade, string>> | undefined {
+    const tailwind = (colors as Record<string, any>)[name]
+    if (tailwind && typeof tailwind === 'object') {
+      return Object.fromEntries(SHADES.map(shade => [shade, parseCssColor(tailwind[shade])]).filter(([, hex]) => hex))
+    }
 
     if (import.meta.client) {
-      const cssValue = getComputedStyle(document.documentElement).getPropertyValue(`--color-${name === 'neutral' ? 'old-neutral' : name}-500`)
-      if (cssValue) return parseCssColor(cssValue)
+      const styles = getComputedStyle(document.documentElement)
+      const cssName = name === 'neutral' ? 'old-neutral' : name
+      const entries = SHADES
+        .map(shade => [shade, parseCssColor(styles.getPropertyValue(`--color-${cssName}-${shade}`))] as const)
+        .filter(([, hex]) => hex)
+      if (entries.length >= 2) {
+        return Object.fromEntries(entries)
+      }
     }
     return undefined
   }
 
   /**
    * Swatch-click entry point. With a custom palette active the swatches act
-   * as anchor pickers — the custom ramp re-anchors to the chosen palette's
-   * color and keeps its curve. Otherwise it is a plain alias switch.
+   * as curve seeds: the chosen palette is reverse-fitted so the editor shows
+   * the curves that reproduce it, replacing whatever was sculpted before.
+   * Otherwise it is a plain alias switch.
    */
   function selectPalette(alias: 'primary' | 'neutral', name: string) {
     if (isCustomPalette(alias)) {
-      const anchor = anchorFromPalette(name)
-      if (anchor) {
-        setPaletteFromCurve(alias, { ...paletteParams.value[alias], anchor })
+      const shades = paletteShades(name)
+      if (shades) {
+        setPaletteFromCurve(alias, fitPalette(shades))
         return
       }
     }
@@ -54,13 +63,29 @@ export function useThemeStudio() {
     }
   }
 
+  /**
+   * Light mode hardcodes `--ui-bg`/`--ui-text-inverted` to `white` (and dark
+   * `--ui-text-highlighted`), so a tinted neutral ramp would never reach the
+   * app background. A custom neutral re-routes them through the ramp.
+   */
+  const NEUTRAL_TOKEN_REMAPS = {
+    light: {
+      '--ui-bg': 'var(--ui-color-neutral-50)',
+      '--ui-text-inverted': 'var(--ui-color-neutral-50)'
+    },
+    dark: {
+      '--ui-text-highlighted': 'var(--ui-color-neutral-50)'
+    }
+  }
+
   /** Generate a ramp from curve params and point the alias at it. */
   function setPaletteFromCurve(alias: 'primary' | 'neutral', params: PaletteCurveParams) {
     const name = customPaletteName(alias)
 
     theme.applyThemeSettings({
       customColors: { [name]: generatePalette(params) },
-      [alias]: name
+      [alias]: name,
+      ...(alias === 'neutral' ? { cssVariables: NEUTRAL_TOKEN_REMAPS } : {})
     })
     paletteParams.value = { ...paletteParams.value, [alias]: params }
     activePreset.value = undefined
@@ -71,6 +96,12 @@ export function useThemeStudio() {
   /** Drop the custom ramp and return the alias to its default palette. */
   function clearCustomPalette(alias: 'primary' | 'neutral') {
     theme.removeCustomColors([customPaletteName(alias)])
+    if (alias === 'neutral') {
+      theme.removeCSSVariables({
+        light: Object.keys(NEUTRAL_TOKEN_REMAPS.light),
+        dark: Object.keys(NEUTRAL_TOKEN_REMAPS.dark)
+      })
+    }
     theme.applyThemeSettings({ [alias]: DEFAULT_COLORS[alias] })
 
     const { [alias]: _, ...rest } = paletteParams.value
@@ -131,7 +162,7 @@ export function useThemeStudio() {
     activePreset,
     paletteParams,
     isCustomPalette,
-    anchorFromPalette,
+    paletteShades,
     selectPalette,
     setPaletteFromCurve,
     clearCustomPalette,
diff --git a/docs/app/utils/theme-engine/palette.ts b/docs/app/utils/theme-engine/palette.ts
index 2898c055de..fab8ff2f17 100644
--- a/docs/app/utils/theme-engine/palette.ts
+++ b/docs/app/utils/theme-engine/palette.ts
@@ -1,109 +1,203 @@
 import type { Shade } from './types'
 import { SHADES } from './types'
 import { hexToOklch, oklchToHex } from './oklch'
+import type { Oklch } from './oklch'
 
 /**
- * Parametric ramp generator: an anchor color pinned at shade 500 with three
- * curves fitted around it — lightness (monotonic, endpoints adjustable),
- * chroma (bell around the anchor) and hue (linear drift). A handful of
- * knobs instead of 33 free numbers; per-shade overrides can still be layered
- * on top via `ThemePalette.shades`.
+ * A palette is three transition curves — lightness, chroma and hue — sampled
+ * across the 11 shade stops (x: 0 = shade 50 … 1 = shade 950). Each channel
+ * is a cubic bezier in the devtools-easing sense: endpoints pinned to the
+ * left/right edges with adjustable y, plus two free control handles.
+ * All y values are in channel units (L 0–1, C 0–0.4, H degrees); handles may
+ * overshoot the endpoints.
  */
+export interface ChannelCurve {
+  /** Channel value at shade 50 */
+  y0: number
+  /** Channel value at shade 950 */
+  y1: number
+  p1x: number
+  p1y: number
+  p2x: number
+  p2y: number
+}
+
 export interface PaletteCurveParams {
-  /** Hex color pinned exactly at shade 500 */
-  anchor: string
-  /** Lightness of shade 50 (0–1). Lower it when the default -50s feel too white. */
-  lightest?: number
-  /** Lightness of shade 950 (0–1) */
-  darkest?: number
-  /** Chroma multiplier applied to the whole ramp */
-  vibrance?: number
-  /** Width of the chroma bell — higher keeps the ends more saturated */
-  spread?: number
-  /** Total hue rotation in degrees across the ramp (light end −½, dark end +½) */
-  hueDrift?: number
+  lightness: ChannelCurve
+  chroma: ChannelCurve
+  hue: ChannelCurve
 }
 
-export const CURVE_DEFAULTS = {
-  lightest: 0.977,
-  darkest: 0.27,
-  vibrance: 1,
-  spread: 0.5,
-  hueDrift: 0
-} as const
+/**
+ * Fallback curves fitted to tailwind v4's color ramps. In practice params
+ * come from `fitPalette()` over a real palette, so these only seed empty
+ * states.
+ */
+export const CURVE_DEFAULTS: PaletteCurveParams = {
+  lightness: { y0: 0.977, y1: 0.27, p1x: 0.1, p1y: 1.012, p2x: 0.925, p2y: 0.376 },
+  chroma: { y0: 0.016, y1: 0.08, p1x: 0.4, p1y: 0.3, p2x: 0.6, p2y: 0.25 },
+  hue: { y0: 250, y1: 250, p1x: 0.33, p1y: 250, p2x: 0.66, p2y: 250 }
+}
 
 /**
  * Neutral ramps want a much deeper dark end than color ramps: tailwind's
- * color palettes stop near L 0.27 (a near-black blue is useless), while the
  * grays run to L 0.13 so dark-mode backgrounds stay genuinely dark.
  */
-export const NEUTRAL_CURVE_DEFAULTS = {
-  ...CURVE_DEFAULTS,
-  darkest: 0.13
-} as const
+export const NEUTRAL_CURVE_DEFAULTS: PaletteCurveParams = {
+  lightness: { ...CURVE_DEFAULTS.lightness, y1: 0.13 },
+  chroma: { y0: 0.005, y1: 0.01, p1x: 0.4, p1y: 0.01, p2x: 0.6, p2y: 0.01 },
+  hue: CURVE_DEFAULTS.hue
+}
+
+function cubicBezier(t: number, a: number, b: number, c: number, d: number): number {
+  const u = 1 - t
+  return u * u * u * a + 3 * u * u * t * b + 3 * u * t * t * c + t * t * t * d
+}
 
 /**
- * Lightness targets per stop averaged from tailwind v4's color ramps
- * (blue/green/orange), used as the base curve shape and rescaled piecewise
- * so the anchor's own lightness lands exactly on shade 500.
+ * Sample a channel curve at ramp position `x` (0–1). Control x values are
+ * clamped into [0, 1], keeping x(t) monotonic so the solve is well-defined.
  */
-const BASE_LIGHTNESS: Record<Shade, number> = {
-  50: 0.977,
-  100: 0.949,
-  200: 0.903,
-  300: 0.838,
-  400: 0.749,
-  500: 0.684,
-  600: 0.607,
-  700: 0.523,
-  800: 0.447,
-  900: 0.393,
-  950: 0.271
+export function sampleCurve(x: number, curve: ChannelCurve): number {
+  const p1x = Math.min(1, Math.max(0, curve.p1x))
+  const p2x = Math.min(1, Math.max(0, curve.p2x))
+
+  let lo = 0
+  let hi = 1
+  for (let i = 0; i < 32; i++) {
+    const mid = (lo + hi) / 2
+    if (cubicBezier(mid, 0, p1x, p2x, 1) < x) {
+      lo = mid
+    } else {
+      hi = mid
+    }
+  }
+  const t = (lo + hi) / 2
+
+  return cubicBezier(t, curve.y0, curve.p1y, curve.p2y, curve.y1)
 }
 
 export function generatePalette(params: PaletteCurveParams): Record<Shade, string> {
-  const { anchor } = params
-  const anchorColor = hexToOklch(anchor)
-
-  // Keep the curve monotonic even for very light/dark anchors — 0.04 of
-  // lightness spread is roughly the minimum that survives 8-bit rounding
-  // without adjacent stops collapsing into the same hex.
-  const lightest = Math.max(params.lightest ?? CURVE_DEFAULTS.lightest, Math.min(anchorColor.l + 0.04, 0.995))
-  const darkest = Math.min(params.darkest ?? CURVE_DEFAULTS.darkest, Math.max(anchorColor.l - 0.04, 0.005))
-  const vibrance = params.vibrance ?? CURVE_DEFAULTS.vibrance
-  const spread = params.spread ?? CURVE_DEFAULTS.spread
-  const hueDrift = params.hueDrift ?? CURVE_DEFAULTS.hueDrift
-
   const result = {} as Record<Shade, string>
 
   for (const [index, shade] of SHADES.entries()) {
-    if (shade === 500) {
-      result[shade] = anchor.toUpperCase()
-      continue
+    const x = index / (SHADES.length - 1)
+
+    result[shade] = oklchToHex({
+      l: sampleCurve(x, params.lightness),
+      c: Math.max(0, sampleCurve(x, params.chroma)),
+      h: sampleCurve(x, params.hue)
+    })
+  }
+
+  return result
+}
+
+/**
+ * Fit a channel curve to sampled points (x ascending, 0 and 1 included).
+ * Endpoints are pinned to the first/last values; the two handles are found
+ * by coordinate descent — small, deterministic and fast enough to run on
+ * every palette selection.
+ */
+export function fitCurve(points: Array<[number, number]>): ChannelCurve {
+  const y0 = points[0]![1]
+  const y1 = points[points.length - 1]![1]
+  const span = Math.max(Math.abs(y1 - y0), 1e-6)
+
+  const lerp = (x: number) => y0 + (y1 - y0) * x
+
+  const error = (curve: ChannelCurve) => {
+    let sum = 0
+    for (const [x, y] of points) {
+      const d = sampleCurve(x, curve) - y
+      sum += d * d
     }
+    return sum
+  }
 
-    // Rescale the base lightness curve piecewise around the anchor so its
-    // shape is preserved on both sides of shade 500.
-    const base = BASE_LIGHTNESS[shade]
-    const anchorBase = BASE_LIGHTNESS[500]
-    let l: number
-    if (shade < 500) {
-      const t = (base - anchorBase) / (BASE_LIGHTNESS[50] - anchorBase)
-      l = anchorColor.l + t * (lightest - anchorColor.l)
-    } else {
-      const t = (anchorBase - base) / (anchorBase - BASE_LIGHTNESS[950])
-      l = anchorColor.l + t * (darkest - anchorColor.l)
+  const keys = ['p1x', 'p1y', 'p2x', 'p2y'] as const
+
+  // Coordinate descent with per-parameter line search, from a few handle
+  // placements so a bad basin doesn't trap the fit.
+  let winner: ChannelCurve | undefined
+  let winnerError = Infinity
+
+  for (const [p1x, p2x] of [[0.33, 0.66], [0.15, 0.85], [0.45, 0.55]] as const) {
+    const curve: ChannelCurve = { y0, y1, p1x, p1y: lerp(p1x), p2x, p2y: lerp(p2x) }
+    let best = error(curve)
+    let stepX = 0.2
+    let stepY = span * 0.4
+
+    for (let round = 0; round < 200; round++) {
+      let improved = false
+      for (const key of keys) {
+        const isX = key === 'p1x' || key === 'p2x'
+        const step = isX ? stepX : stepY
+        for (const direction of [1, -1]) {
+          // Walk while it keeps improving.
+          for (;;) {
+            const previous = curve[key]
+            const next = previous + direction * step
+            curve[key] = isX ? Math.min(1, Math.max(0, next)) : next
+            const err = error(curve)
+            if (err < best - 1e-14) {
+              best = err
+              improved = true
+            } else {
+              curve[key] = previous
+              break
+            }
+          }
+        }
+      }
+      if (!improved) {
+        stepX /= 2
+        stepY /= 2
+        if (stepX < 1e-4) break
+      }
+    }
+
+    if (best < winnerError) {
+      winnerError = best
+      winner = curve
     }
+  }
+
+  return winner!
+}
 
-    // Chroma bell centered on the anchor stop, normalized to 1 there.
-    const t = index / (SHADES.length - 1)
-    const bell = Math.exp(-((t - 0.5) ** 2) / (2 * spread ** 2))
-    const c = anchorColor.c * vibrance * bell
+/**
+ * Work backwards from an existing palette (e.g. a tailwind ramp) to curve
+ * params that reproduce it — so editing always starts from the real thing.
+ * Hue needs care: it is unwrapped around the color wheel and meaningless on
+ * near-gray stops, where it borrows the nearest chromatic neighbor.
+ */
+export function fitPalette(shades: Partial<Record<Shade, string>>): PaletteCurveParams {
+  const stops: Array<{ x: number, color: Oklch }> = []
+  for (const [index, shade] of SHADES.entries()) {
+    const hex = shades[shade]
+    if (hex) {
+      stops.push({ x: index / (SHADES.length - 1), color: hexToOklch(hex) })
+    }
+  }
 
-    const h = anchorColor.h + hueDrift * (t - 0.5)
+  // Hue is noise below ~0.01 chroma — borrow the nearest chromatic stop.
+  const chromatic = stops.filter(stop => stop.color.c >= 0.01)
+  const hues = stops.map((stop) => {
+    if (stop.color.c >= 0.01 || !chromatic.length) return stop.color.h
+    const nearest = chromatic.reduce((a, b) => Math.abs(a.x - stop.x) < Math.abs(b.x - stop.x) ? a : b)
+    return nearest.color.h
+  })
 
-    result[shade] = oklchToHex({ l, c, h })
+  // Unwrap so the sequence is continuous even across the 0/360 seam.
+  for (let i = 1; i < hues.length; i++) {
+    while (hues[i]! - hues[i - 1]! > 180) hues[i]! -= 360
+    while (hues[i]! - hues[i - 1]! < -180) hues[i]! += 360
   }
 
-  return result
+  return {
+    lightness: fitCurve(stops.map(stop => [stop.x, stop.color.l])),
+    chroma: fitCurve(stops.map(stop => [stop.x, stop.color.c])),
+    hue: fitCurve(stops.map((stop, i) => [stop.x, hues[i]!]))
+  }
 }
diff --git a/test/utils/theme-palette.spec.ts b/test/utils/theme-palette.spec.ts
index 8d0489e191..d7800f6760 100644
--- a/test/utils/theme-palette.spec.ts
+++ b/test/utils/theme-palette.spec.ts
@@ -1,13 +1,25 @@
 import { describe, it, expect } from 'vitest'
+import colors from 'tailwindcss/colors'
 import {
   hexToOklch,
   oklchToHex,
   inGamut,
   clampToGamut,
   contrastRatio,
+  parseCssColor,
   generatePalette,
+  fitCurve,
+  fitPalette,
+  sampleCurve,
+  CURVE_DEFAULTS,
+  NEUTRAL_CURVE_DEFAULTS,
   SHADES
 } from '../../docs/app/utils/theme-engine'
+import type { Shade } from '../../docs/app/utils/theme-engine'
+
+function tailwindShades(name: keyof typeof colors): Record<Shade, string> {
+  return Object.fromEntries(SHADES.map(shade => [shade, parseCssColor((colors[name] as Record<string, string>)[shade]!)!])) as Record<Shade, string>
+}
 
 describe('oklch', () => {
   it('matches reference values', () => {
@@ -54,61 +66,93 @@ describe('oklch', () => {
   })
 })
 
+describe('sampleCurve', () => {
+  it('hits the endpoints exactly', () => {
+    const curve = CURVE_DEFAULTS.lightness
+    expect(sampleCurve(0, curve)).toBeCloseTo(curve.y0, 5)
+    expect(sampleCurve(1, curve)).toBeCloseTo(curve.y1, 5)
+  })
+
+  it('interpolates a straight line when handles sit on it', () => {
+    const curve = { y0: 0, y1: 1, p1x: 0.33, p1y: 0.33, p2x: 0.66, p2y: 0.66 }
+    expect(sampleCurve(0.5, curve)).toBeCloseTo(0.5, 3)
+  })
+})
+
+describe('fitCurve', () => {
+  it('recovers a bezier from its own samples', () => {
+    const original = { y0: 1, y1: 0, p1x: 0.2, p1y: 0.9, p2x: 0.8, p2y: 0.2 }
+    const points = Array.from({ length: 11 }, (_, i) => {
+      const x = i / 10
+      return [x, sampleCurve(x, original)] as [number, number]
+    })
+
+    const fitted = fitCurve(points)
+    for (const [x, y] of points) {
+      expect(sampleCurve(x, fitted)).toBeCloseTo(y, 2)
+    }
+  })
+})
+
 describe('generatePalette', () => {
-  it('produces 11 valid hex shades with the anchor exact at 500', () => {
-    const palette = generatePalette({ anchor: '#1DB954' })
+  it('produces 11 valid hex shades', () => {
+    const palette = generatePalette(CURVE_DEFAULTS)
 
     expect(Object.keys(palette)).toHaveLength(SHADES.length)
-    expect(palette[500]).toBe('#1DB954')
     for (const shade of SHADES) {
       expect(palette[shade]).toMatch(/^#[0-9A-F]{6}$/)
     }
   })
 
-  it('keeps lightness monotonically decreasing from 50 to 950', () => {
-    for (const anchor of ['#1DB954', '#CC785C', '#3B82F6', '#8E8672']) {
-      const palette = generatePalette({ anchor })
+  it('keeps default ramps monotonically darkening', () => {
+    for (const hue of [30, 145, 250]) {
+      const flat = { ...CURVE_DEFAULTS.hue, y0: hue, y1: hue, p1y: hue, p2y: hue }
+      const palette = generatePalette({ ...CURVE_DEFAULTS, hue: flat })
       const lightnesses = SHADES.map(shade => hexToOklch(palette[shade]).l)
 
       for (let i = 1; i < lightnesses.length; i++) {
-        expect(lightnesses[i]!, `${anchor} shade ${SHADES[i]}`).toBeLessThan(lightnesses[i - 1]!)
+        expect(lightnesses[i]!, `hue ${hue} shade ${SHADES[i]}`).toBeLessThan(lightnesses[i - 1]!)
       }
     }
   })
 
-  it('honors the lightest/darkest endpoints', () => {
-    const palette = generatePalette({ anchor: '#8E8672', lightest: 0.94, darkest: 0.2 })
-
-    expect(hexToOklch(palette[50]).l).toBeCloseTo(0.94, 2)
-    expect(hexToOklch(palette[950]).l).toBeCloseTo(0.2, 2)
+  it('neutral defaults reach a deep dark end', () => {
+    const palette = generatePalette(NEUTRAL_CURVE_DEFAULTS)
+    expect(hexToOklch(palette[950]).l).toBeLessThan(0.16)
   })
+})
 
-  it('scales chroma with vibrance', () => {
-    const muted = generatePalette({ anchor: '#3B82F6', vibrance: 0.5 })
-    const vivid = generatePalette({ anchor: '#3B82F6', vibrance: 1.5 })
+describe('fitPalette (work backwards from real palettes)', () => {
+  it.each(['blue', 'green', 'orange', 'rose', 'zinc'] as const)('round-trips tailwind %s', (name) => {
+    const original = tailwindShades(name)
+    const regenerated = generatePalette(fitPalette(original))
 
-    // Compare a dark shade — very light shades gamut-clamp to the same ceiling.
-    expect(hexToOklch(muted[700]).c).toBeLessThan(hexToOklch(vivid[700]).c)
+    for (const shade of SHADES) {
+      const want = hexToOklch(original[shade])
+      const got = hexToOklch(regenerated[shade])
+
+      // A single cubic can't hit every tailwind stop exactly — ~0.045 L is
+      // the model floor (worst case rose-900), well under a visible step.
+      expect(Math.abs(got.l - want.l), `${name}-${shade} lightness`).toBeLessThan(0.045)
+      expect(Math.abs(got.c - want.c), `${name}-${shade} chroma`).toBeLessThan(0.045)
+    }
   })
 
-  it('drifts hue across the ramp', () => {
-    const palette = generatePalette({ anchor: '#3B82F6', hueDrift: 40, vibrance: 1 })
+  it('handles the hue wheel seam', () => {
+    // rose/red hues sit near 0/360 — fitting must not zigzag across the seam
+    const params = fitPalette(tailwindShades('rose'))
+    const sampled = SHADES.map((_, i) => sampleCurve(i / 10, params.hue))
 
-    const light = hexToOklch(palette[100]).h
-    const dark = hexToOklch(palette[900]).h
-    expect(dark).toBeGreaterThan(light)
+    for (let i = 1; i < sampled.length; i++) {
+      expect(Math.abs(sampled[i]! - sampled[i - 1]!), `step ${i}`).toBeLessThan(90)
+    }
   })
 
-  it('stays ordered for near-extreme anchors', () => {
-    // At true extremes the ramp degenerates by design; 8-bit rounding may
-    // produce equal neighbors, but the order must never invert.
-    for (const anchor of ['#F5F5F0', '#16130F']) {
-      const palette = generatePalette({ anchor })
-      const lightnesses = SHADES.map(shade => hexToOklch(palette[shade]).l)
+  it('keeps hue stable across near-gray stops', () => {
+    const params = fitPalette(tailwindShades('zinc'))
+    const hues = SHADES.map((_, i) => sampleCurve(i / 10, params.hue))
+    const spread = Math.max(...hues) - Math.min(...hues)
 
-      for (let i = 1; i < lightnesses.length; i++) {
-        expect(lightnesses[i]!, `${anchor} shade ${SHADES[i]}`).toBeLessThanOrEqual(lightnesses[i - 1]!)
-      }
-    }
+    expect(spread).toBeLessThan(120)
   })
 })

From e3837d591283e58b0933b6c995820d4bc1bf1772 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 01:44:40 +0200
Subject: [PATCH 008/185] feat(docs): stream theme updates live while dragging
 curves

Curve edits now apply on a 60ms throttle (leading + trailing) instead of
a trailing debounce, so the whole page restyles during the drag. A
temporary html class enables short background/color/border transitions
(excluding the curve editor itself) so throttle ticks glide instead of
stepping, and the analytics event is rate-limited to one per burst.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/assets/css/main.css                  |  5 +++
 .../theme-studio/ThemeStudioCurveEditor.vue   |  8 +++++
 .../theme-studio/ThemeStudioPaletteEditor.vue | 34 ++++++++++++++++---
 docs/app/composables/useThemeStudio.ts        |  8 ++++-
 4 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index f806c7ed78..b0ffda4a1d 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -54,3 +54,8 @@ html.dark .shiki span {
   -webkit-mask-image: var(--shiki-icon-url);
   mask-image: var(--shiki-icon-url);
 }
+
+/* Smooth color changes while dragging theme studio curves */
+html.theme-studio-dragging body *:not([data-curve-editor] *) {
+  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
+}
diff --git a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
index de02809c38..1bdd7c8cce 100644
--- a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
@@ -12,6 +12,11 @@ const props = defineProps<{
 
 const curve = defineModel<ChannelCurve>({ required: true })
 
+const emit = defineEmits<{
+  dragStart: []
+  dragEnd: []
+}>()
+
 const W = 200
 const H = 120
 const PAD = 10
@@ -81,6 +86,7 @@ function onPointerDown(event: PointerEvent) {
     dragging.value = best.id
     svgRef.value!.setPointerCapture(event.pointerId)
     event.preventDefault()
+    emit('dragStart')
   }
 }
 
@@ -108,6 +114,7 @@ function onPointerUp(event: PointerEvent) {
   if (dragging.value) {
     dragging.value = null
     svgRef.value!.releasePointerCapture(event.pointerId)
+    emit('dragEnd')
   }
 }
 </script>
@@ -115,6 +122,7 @@ function onPointerUp(event: PointerEvent) {
 <template>
   <svg
     ref="svgRef"
+    data-curve-editor
     :viewBox="`0 0 ${W} ${H}`"
     class="w-full rounded-sm ring ring-default bg-elevated/30 touch-none select-none cursor-crosshair"
     @pointerdown="onPointerDown"
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index a40afc3c7e..532adea2c4 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useDebounceFn } from '@vueuse/core'
+import { useThrottleFn } from '@vueuse/core'
 import { SHADES, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, generatePalette, fitPalette, contrastRatio } from '../../utils/theme-engine'
 import type { PaletteCurveParams } from '../../utils/theme-engine'
 
@@ -69,13 +69,37 @@ function seed(values: PaletteCurveParams) {
   })
 }
 
-const debouncedApply = useDebounceFn(() => {
+// Throttled (not debounced) so the theme streams live while dragging a
+// curve — the trailing call catches the release position.
+const throttledApply = useThrottleFn(() => {
   setPaletteFromCurve(props.alias, structuredClone(toRaw(params)))
-}, 150)
+}, 60, true, true)
 
 watch(params, () => {
   if (!suppress) {
-    debouncedApply()
+    throttledApply()
+  }
+})
+
+// While dragging, a global class turns on short color transitions so the
+// page glides between throttle ticks instead of stepping.
+let dragEndTimeout: ReturnType<typeof setTimeout> | undefined
+
+function onDragStart() {
+  clearTimeout(dragEndTimeout)
+  document.documentElement.classList.add('theme-studio-dragging')
+}
+
+function onDragEnd() {
+  dragEndTimeout = setTimeout(() => {
+    document.documentElement.classList.remove('theme-studio-dragging')
+  }, 200)
+}
+
+onUnmounted(() => {
+  clearTimeout(dragEndTimeout)
+  if (import.meta.client) {
+    document.documentElement.classList.remove('theme-studio-dragging')
   }
 })
 
@@ -160,6 +184,8 @@ function remove() {
           :y-min="windows[tab].min"
           :y-max="windows[tab].max"
           :stop-colors="stopColors"
+          @drag-start="onDragStart"
+          @drag-end="onDragEnd"
         />
 
         <div class="flex items-center gap-2">
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 4de9b38603..c2e2d056f2 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -13,6 +13,8 @@ export function useThemeStudio() {
   /** Curve params per alias, kept so the editor stays editable across reloads. */
   const paletteParams = useLocalStorage<Partial<Record<string, PaletteCurveParams>>>('nuxt-ui-palette-params', {})
 
+  let trackedAt: number | undefined
+
   function customPaletteName(alias: string) {
     return `custom-${alias}`
   }
@@ -90,7 +92,11 @@ export function useThemeStudio() {
     paletteParams.value = { ...paletteParams.value, [alias]: params }
     activePreset.value = undefined
 
-    track('Theme Custom Palette', { alias })
+    // Live drags call this at ~16Hz — one analytics event per burst is plenty.
+    if (!trackedAt || Date.now() - trackedAt > 2000) {
+      trackedAt = Date.now()
+      track('Theme Custom Palette', { alias })
+    }
   }
 
   /** Drop the custom ramp and return the alias to its default palette. */

From 6135c970996e95e58d84635e497cbe9572734f9f Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 01:50:07 +0200
Subject: [PATCH 009/185] feat(docs): neutral-50 light background baseline +
 tighter drag transition
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Light-mode --ui-bg now follows the neutral ramp app-wide (main.css +
docs render baseline) instead of hardcoded white, so tinted neutrals show
without editing anything. The engine gains LIBRARY_TOKEN_DEFAULTS — the
stock @nuxt/ui token values — and export diffing compares against those
rather than the docs baseline, so themes that rely on the ramp-following
background still export it for stock installs.

Drag transition matched to the 60ms apply throttle (was 150ms lagging
behind the pointer).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/assets/css/main.css           | 10 ++++--
 docs/app/composables/useTheme.ts       |  8 +++--
 docs/app/utils/theme-engine/resolve.ts | 48 ++++++++++++++++++++++++--
 docs/app/utils/theme.ts                |  6 +++-
 4 files changed, 63 insertions(+), 9 deletions(-)

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index b0ffda4a1d..f36614f47b 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -55,7 +55,13 @@ html.dark .shiki span {
   mask-image: var(--shiki-icon-url);
 }
 
-/* Smooth color changes while dragging theme studio curves */
+/* Smooth color changes while dragging theme studio curves — matched to the 60ms apply throttle */
 html.theme-studio-dragging body *:not([data-curve-editor] *) {
-  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
+  transition: background-color 60ms linear, color 60ms linear, border-color 60ms linear;
+}
+
+/* Studio baseline: the app background follows the neutral ramp instead of
+   being hardcoded white, so tinted neutrals reach the page in light mode. */
+:root, .light {
+  --ui-bg: var(--ui-color-neutral-50);
 }
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index da87073f8e..9f12c8939e 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -1,7 +1,7 @@
 import { defu } from 'defu'
 import { useLocalStorage } from '@vueuse/core'
 import { themeIcons, cssVariableDefaults } from '../utils/theme'
-import { generateCSS, generateConfig, DEFAULT_COLORS, THEME_DEFAULTS } from '../utils/theme-engine'
+import { generateCSS, generateConfig, DEFAULT_COLORS, THEME_DEFAULTS, LIBRARY_TOKEN_DEFAULTS } from '../utils/theme-engine'
 import type { ThemeDoc, ThemePalette } from '../utils/theme-engine'
 import { omit } from '#ui/utils'
 import colors from 'tailwindcss/colors'
@@ -267,8 +267,10 @@ export function useTheme() {
       doc.palettes = Object.fromEntries(paletteEntries.map(([name, shades]) => [name, { shades: shades as ThemePalette['shades'] }]))
     }
 
-    const light = Object.fromEntries(Object.entries(cssVariablesData.value.light || {}).filter(([key, val]) => val !== cssVariableDefaults.light[key as keyof typeof cssVariableDefaults.light]))
-    const dark = Object.fromEntries(Object.entries(cssVariablesData.value.dark || {}).filter(([key, val]) => val !== cssVariableDefaults.dark[key as keyof typeof cssVariableDefaults.dark]))
+    // Diff against the LIBRARY defaults, not the docs baseline — the export
+    // must reproduce the preview on top of a stock @nuxt/ui install.
+    const light = Object.fromEntries(Object.entries(cssVariablesData.value.light || {}).filter(([key, val]) => val !== LIBRARY_TOKEN_DEFAULTS.light[key as keyof typeof LIBRARY_TOKEN_DEFAULTS.light]))
+    const dark = Object.fromEntries(Object.entries(cssVariablesData.value.dark || {}).filter(([key, val]) => val !== LIBRARY_TOKEN_DEFAULTS.dark[key as keyof typeof LIBRARY_TOKEN_DEFAULTS.dark]))
     if (Object.keys(light).length || Object.keys(dark).length) {
       doc.tokens = {
         ...(Object.keys(light).length ? { light } : {}),
diff --git a/docs/app/utils/theme-engine/resolve.ts b/docs/app/utils/theme-engine/resolve.ts
index c27aa9d35d..736f077ad9 100644
--- a/docs/app/utils/theme-engine/resolve.ts
+++ b/docs/app/utils/theme-engine/resolve.ts
@@ -1,10 +1,52 @@
 import colors from 'tailwindcss/colors'
-import { cssVariableDefaults } from '../theme'
 import type { ColorAlias, Shade, ThemeDoc } from './types'
 import { DEFAULT_COLORS } from './types'
 
 export type ColorMode = 'light' | 'dark'
 
+/**
+ * The semantic token defaults as @nuxt/ui ships them (src/runtime/index.css).
+ * Exports diff against THESE — the docs site's own baseline diverges (e.g.
+ * its light `--ui-bg` follows the neutral ramp), but an exported theme must
+ * reproduce the preview on top of a stock library install.
+ */
+export const LIBRARY_TOKEN_DEFAULTS = {
+  light: {
+    '--ui-text-dimmed': 'var(--ui-color-neutral-400)',
+    '--ui-text-muted': 'var(--ui-color-neutral-500)',
+    '--ui-text-toned': 'var(--ui-color-neutral-600)',
+    '--ui-text': 'var(--ui-color-neutral-700)',
+    '--ui-text-highlighted': 'var(--ui-color-neutral-900)',
+    '--ui-text-inverted': 'white',
+    '--ui-bg': 'white',
+    '--ui-bg-muted': 'var(--ui-color-neutral-50)',
+    '--ui-bg-elevated': 'var(--ui-color-neutral-100)',
+    '--ui-bg-accented': 'var(--ui-color-neutral-200)',
+    '--ui-bg-inverted': 'var(--ui-color-neutral-900)',
+    '--ui-border': 'var(--ui-color-neutral-200)',
+    '--ui-border-muted': 'var(--ui-color-neutral-200)',
+    '--ui-border-accented': 'var(--ui-color-neutral-300)',
+    '--ui-border-inverted': 'var(--ui-color-neutral-900)'
+  },
+  dark: {
+    '--ui-text-dimmed': 'var(--ui-color-neutral-500)',
+    '--ui-text-muted': 'var(--ui-color-neutral-400)',
+    '--ui-text-toned': 'var(--ui-color-neutral-300)',
+    '--ui-text': 'var(--ui-color-neutral-200)',
+    '--ui-text-highlighted': 'white',
+    '--ui-text-inverted': 'var(--ui-color-neutral-900)',
+    '--ui-bg': 'var(--ui-color-neutral-900)',
+    '--ui-bg-muted': 'var(--ui-color-neutral-800)',
+    '--ui-bg-elevated': 'var(--ui-color-neutral-800)',
+    '--ui-bg-accented': 'var(--ui-color-neutral-700)',
+    '--ui-bg-inverted': 'white',
+    '--ui-border': 'var(--ui-color-neutral-800)',
+    '--ui-border-muted': 'var(--ui-color-neutral-700)',
+    '--ui-border-accented': 'var(--ui-color-neutral-700)',
+    '--ui-border-inverted': 'white'
+  }
+} as const
+
 export interface ResolvedToken {
   token: string
   /** The declared value at this level (`var(--ui-color-neutral-200)`, `white`, `#fff`…) */
@@ -42,7 +84,7 @@ export function resolveShade(doc: ThemeDoc, palette: string, shade: Shade): stri
 }
 
 export function resolveToken(doc: ThemeDoc, mode: ColorMode, token: string): ResolvedToken {
-  const defaults = cssVariableDefaults[mode] as Record<string, string>
+  const defaults = LIBRARY_TOKEN_DEFAULTS[mode] as Record<string, string>
   const override = doc.tokens?.[mode]?.[token]
   const raw = override ?? defaults[token] ?? ''
 
@@ -77,7 +119,7 @@ export function resolveToken(doc: ThemeDoc, mode: ColorMode, token: string): Res
 
 /** Resolve every semantic token for a mode, with provenance. */
 export function resolveTokens(doc: ThemeDoc, mode: ColorMode): Record<string, ResolvedToken> {
-  const defaults = cssVariableDefaults[mode] as Record<string, string>
+  const defaults = LIBRARY_TOKEN_DEFAULTS[mode] as Record<string, string>
   const tokens = new Set([...Object.keys(defaults), ...Object.keys(doc.tokens?.[mode] || {})])
 
   return Object.fromEntries([...tokens].map(token => [token, resolveToken(doc, mode, token)]))
diff --git a/docs/app/utils/theme.ts b/docs/app/utils/theme.ts
index 6e708a2a30..185efa2459 100644
--- a/docs/app/utils/theme.ts
+++ b/docs/app/utils/theme.ts
@@ -96,6 +96,10 @@ export const themeIcons = {
 
 export type ThemeIcons = keyof typeof themeIcons
 
+// The docs' own render baseline. It intentionally diverges from the library
+// defaults in one place: light `--ui-bg` follows the neutral ramp (set in
+// main.css) so tinted neutrals reach the page background. Export diffing
+// uses the engine's LIBRARY_TOKEN_DEFAULTS instead.
 export const cssVariableDefaults = {
   light: {
     '--ui-text-dimmed': 'var(--ui-color-neutral-400)',
@@ -104,7 +108,7 @@ export const cssVariableDefaults = {
     '--ui-text': 'var(--ui-color-neutral-700)',
     '--ui-text-highlighted': 'var(--ui-color-neutral-900)',
     '--ui-text-inverted': 'white',
-    '--ui-bg': 'white',
+    '--ui-bg': 'var(--ui-color-neutral-50)',
     '--ui-bg-muted': 'var(--ui-color-neutral-50)',
     '--ui-bg-elevated': 'var(--ui-color-neutral-100)',
     '--ui-bg-accented': 'var(--ui-color-neutral-200)',

From f14e17643b1e5d3c7d94c6954f95f05e790e8c9c Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 01:52:24 +0200
Subject: [PATCH 010/185] fix(docs): keep dark mode background intact under the
 neutral-50 baseline

The :root baseline rule shared specificity with the library's .dark
override and won on cascade order, painting dark mode with the light 50.
Scope it with :root:not(.dark).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/assets/css/main.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index f36614f47b..bf92012a63 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -61,7 +61,9 @@ html.theme-studio-dragging body *:not([data-curve-editor] *) {
 }
 
 /* Studio baseline: the app background follows the neutral ramp instead of
-   being hardcoded white, so tinted neutrals reach the page in light mode. */
-:root, .light {
+   being hardcoded white, so tinted neutrals reach the page in light mode.
+   `:not(.dark)` keeps this from out-cascading the library's .dark value,
+   which shares :root's specificity. */
+:root:not(.dark), .light {
   --ui-bg: var(--ui-color-neutral-50);
 }

From 6853b9628fef9b2aa8a9e0b41576d0acbaab36a1 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 02:07:46 +0200
Subject: [PATCH 011/185] feat(docs): shadow/border style controls and
 neo-brutalist preset
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a style axis to the studio modeled on Shadcn Studio's configurator:
Shadows (none/soft/hard offset) and Borders (thin/bold), expanded into
static per-component class bundles over the app.config ui path — the
stopgap for the missing --ui-shadow/--ui-border-width core tokens. Hard
shadows use --ui-border-inverted so they stay black-on-light and
white-on-dark, with the classic press-down hover on buttons.

Ships a Neo-brutalist preset (hard shadows, bold borders, radius 0,
yellow primary, black borders via token remaps) and teaches shuffle to
occasionally roll style treatments.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 47 ++++++++++-
 docs/app/composables/useTheme.ts              | 19 +++++
 docs/app/composables/useThemeStudio.ts        | 33 +++++++-
 docs/app/utils/theme-engine/export.ts         | 19 ++++-
 docs/app/utils/theme-engine/index.ts          |  1 +
 docs/app/utils/theme-engine/presets.ts        | 25 ++++++
 docs/app/utils/theme-engine/styles.ts         | 84 +++++++++++++++++++
 docs/app/utils/theme-engine/types.ts          |  6 ++
 test/utils/theme-engine.spec.ts               | 29 +++++++
 9 files changed, 255 insertions(+), 8 deletions(-)
 create mode 100644 docs/app/utils/theme-engine/styles.ts

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index a16636fd13..dafcb77f6d 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -18,7 +18,18 @@ const {
   mode
 } = useTheme()
 
-const { selectPalette } = useThemeStudio()
+const { selectPalette, style, setStyle } = useThemeStudio()
+
+const shadowOptions = [
+  { label: 'None', value: 'none', icon: 'i-lucide-square' },
+  { label: 'Soft', value: 'soft', icon: 'i-lucide-square-stack' },
+  { label: 'Hard', value: 'hard', icon: 'i-lucide-squares-exclude' }
+] as const
+
+const borderOptions = [
+  { label: 'Thin', value: 'default' },
+  { label: 'Bold', value: 'bold' }
+] as const
 </script>
 
 <template>
@@ -118,6 +129,40 @@ const { selectPalette } = useThemeStudio()
       </div>
     </fieldset>
 
+    <fieldset>
+      <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
+        Shadows
+      </legend>
+
+      <div class="grid grid-cols-3 gap-1">
+        <ThemePickerButton
+          v-for="option in shadowOptions"
+          :key="option.value"
+          :label="option.label"
+          class="justify-center px-0"
+          :selected="(style.shadow || 'none') === option.value"
+          @click="setStyle({ shadow: option.value })"
+        />
+      </div>
+    </fieldset>
+
+    <fieldset>
+      <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
+        Borders
+      </legend>
+
+      <div class="grid grid-cols-2 gap-1">
+        <ThemePickerButton
+          v-for="option in borderOptions"
+          :key="option.value"
+          :label="option.label"
+          class="justify-center px-0"
+          :selected="(style.border || 'default') === option.value"
+          @click="setStyle({ border: option.value })"
+        />
+      </div>
+    </fieldset>
+
     <fieldset>
       <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
         Font
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 9f12c8939e..edbec4c17f 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -320,6 +320,24 @@ export function useTheme() {
     }
   }
 
+  /** Unset `ui.<component>` overrides previously applied via applyThemeSettings. */
+  function resetComponentOverrides(keys: string[]) {
+    const extras = { ...aiThemeExtras.value }
+    if (extras.ui) {
+      extras.ui = Object.fromEntries(Object.entries(extras.ui).filter(([key]) => !keys.includes(key)))
+      if (!Object.keys(extras.ui).length) delete extras.ui
+    }
+    for (const key of keys) {
+      (appConfig.ui as any)[key] = undefined
+    }
+    aiThemeExtras.value = extras
+    if (Object.keys(extras).length) {
+      window.localStorage.setItem('nuxt-ui-ai-theme', JSON.stringify(extras))
+    } else {
+      window.localStorage.removeItem('nuxt-ui-ai-theme')
+    }
+  }
+
   function removeCustomColors(names: string[]) {
     const remaining = Object.fromEntries(Object.entries(customColorsData.value).filter(([name]) => !names.includes(name)))
     customColorsData.value = remaining
@@ -451,6 +469,7 @@ export function useTheme() {
     currentDoc,
     removeCustomColors,
     removeCSSVariables,
+    resetComponentOverrides,
     exportCSS,
     exportConfig,
     applyThemeSettings,
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index c2e2d056f2..c8d7adcb5a 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,7 +1,7 @@
 import { useLocalStorage } from '@vueuse/core'
 import colors from 'tailwindcss/colors'
-import { presets, docToSettings, isDefaultTheme, generatePalette, fitPalette, parseCssColor, DEFAULT_COLORS, SHADES } from '../utils/theme-engine'
-import type { ThemeDoc, ThemePreset, PaletteCurveParams, Shade } from '../utils/theme-engine'
+import { presets, docToSettings, isDefaultTheme, generatePalette, fitPalette, parseCssColor, styleComponents, DEFAULT_COLORS, SHADES, STYLE_COMPONENT_KEYS } from '../utils/theme-engine'
+import type { ThemeDoc, ThemePreset, PaletteCurveParams, Shade, StyleOptions } from '../utils/theme-engine'
 
 export function useThemeStudio() {
   const theme = useTheme()
@@ -13,6 +13,24 @@ export function useThemeStudio() {
   /** Curve params per alias, kept so the editor stays editable across reloads. */
   const paletteParams = useLocalStorage<Partial<Record<string, PaletteCurveParams>>>('nuxt-ui-palette-params', {})
 
+  /** Shadow/border treatment; the expanded overrides live in the ai-theme extras. */
+  const style = useLocalStorage<StyleOptions>('nuxt-ui-style', {})
+
+  function setStyle(options: StyleOptions) {
+    style.value = { ...style.value, ...options }
+
+    // Clear the previous bundle first — defu merging can't unset classes.
+    theme.resetComponentOverrides(STYLE_COMPONENT_KEYS)
+
+    const components = styleComponents(style.value)
+    if (Object.keys(components).length) {
+      theme.applyThemeSettings({ ui: components })
+    }
+    activePreset.value = undefined
+
+    track('Theme Style Changed', { shadow: style.value.shadow || 'none', border: style.value.border || 'default' })
+  }
+
   let trackedAt: number | undefined
 
   function customPaletteName(alias: string) {
@@ -118,6 +136,7 @@ export function useThemeStudio() {
   function applyDoc(doc: ThemeDoc) {
     theme.resetTheme()
     paletteParams.value = {}
+    style.value = doc.style || {}
 
     if (!isDefaultTheme(doc)) {
       theme.applyThemeSettings(docToSettings(doc))
@@ -143,7 +162,12 @@ export function useThemeStudio() {
         neutral: pick(theme.neutralColors)
       },
       radius: pick(theme.radiuses),
-      font: { sans: pick(theme.fonts) }
+      font: { sans: pick(theme.fonts) },
+      // Weighted so most rolls stay clean, with the occasional loud one.
+      style: {
+        shadow: pick(['none', 'none', 'soft', 'hard'] as const),
+        border: pick(['default', 'default', 'bold'] as const)
+      }
     }
 
     if (Math.random() < 0.125) {
@@ -160,12 +184,15 @@ export function useThemeStudio() {
   function reset() {
     theme.resetTheme()
     paletteParams.value = {}
+    style.value = {}
     activePreset.value = undefined
   }
 
   return {
     presets,
     activePreset,
+    style,
+    setStyle,
     paletteParams,
     isCustomPalette,
     paletteShades,
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index 292d0d129f..27f1e8a66c 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -1,6 +1,7 @@
 import { themeIcons } from '../theme'
 import type { ThemeDoc } from './types'
 import { DEFAULT_COLORS, THEME_DEFAULTS } from './types'
+import { styleComponents } from './styles'
 
 /**
  * Generate the minimal `main.css`. The document only holds overrides, so
@@ -71,9 +72,13 @@ export function generateConfig(doc: ThemeDoc, framework: string = 'nuxt'): strin
     config.ui.icons = themeIcons[doc.icons as keyof typeof themeIcons]
   }
 
-  if (doc.components) {
+  const componentOverrides = {
+    ...(doc.style ? styleComponents(doc.style) : {}),
+    ...(doc.components || {})
+  }
+  if (Object.keys(componentOverrides).length) {
     config.ui = config.ui || {}
-    Object.assign(config.ui, doc.components)
+    Object.assign(config.ui, componentOverrides)
   }
 
   const configString = JSON.stringify(config, null, 2)
@@ -130,8 +135,14 @@ export function docToSettings(doc: ThemeDoc): Record<string, any> {
     settings.cssVariables = doc.tokens
   }
 
-  if (doc.components) {
-    settings.ui = doc.components
+  // Expand the shadow/border treatment into component overrides; explicit
+  // per-component overrides win over the expansion.
+  const ui = {
+    ...(doc.style ? styleComponents(doc.style) : {}),
+    ...(doc.components || {})
+  }
+  if (Object.keys(ui).length) {
+    settings.ui = ui
   }
 
   return settings
diff --git a/docs/app/utils/theme-engine/index.ts b/docs/app/utils/theme-engine/index.ts
index 944a41df8b..f992fc5c35 100644
--- a/docs/app/utils/theme-engine/index.ts
+++ b/docs/app/utils/theme-engine/index.ts
@@ -4,3 +4,4 @@ export * from './export'
 export * from './presets'
 export * from './oklch'
 export * from './palette'
+export * from './styles'
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index e8c4a33f65..79e8f35b88 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -44,6 +44,31 @@ export const presets: ThemePreset[] = [{
       }
     }
   }
+}, {
+  id: 'neo-brutalist',
+  name: 'Neo-brutalist',
+  description: 'Hard offset shadows, bold borders, zero radius, loud yellow.',
+  icon: 'i-lucide-zap',
+  doc: {
+    version: 1,
+    meta: { name: 'Neo-brutalist', base: 'neo-brutalist' },
+    colors: {
+      primary: 'yellow',
+      neutral: 'neutral'
+    },
+    radius: 0,
+    font: { sans: 'Outfit' },
+    style: {
+      shadow: 'hard',
+      border: 'bold'
+    },
+    tokens: {
+      light: {
+        '--ui-border': 'var(--ui-color-neutral-900)',
+        '--ui-border-accented': 'var(--ui-color-neutral-900)'
+      }
+    }
+  }
 }, {
   id: 'anthropic',
   name: 'Anthropic',
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
new file mode 100644
index 0000000000..021d6d4d97
--- /dev/null
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -0,0 +1,84 @@
+/**
+ * Shadow and border treatments, expressed as per-component class bundles.
+ *
+ * Nuxt UI has no semantic `--ui-shadow` / `--ui-border-width` tokens yet
+ * (a known core gap), so these ride the `app.config ui.<component>` override
+ * path instead. The class strings must stay STATIC literals in this file —
+ * tailwind compiles what it can see in source, not what appears at runtime.
+ */
+
+export type ShadowStyle = 'none' | 'soft' | 'hard'
+export type BorderStyle = 'default' | 'bold'
+
+export interface StyleOptions {
+  shadow?: ShadowStyle
+  border?: BorderStyle
+}
+
+export const SHADOW_STYLES: ShadowStyle[] = ['none', 'soft', 'hard']
+export const BORDER_STYLES: BorderStyle[] = ['default', 'bold']
+
+type SlotFragments = Record<string, Record<string, string>>
+
+/** component → slot → classes appended to the theme's own. */
+const SHADOW_FRAGMENTS: Record<ShadowStyle, SlotFragments> = {
+  none: {},
+  soft: {
+    button: { base: 'shadow-sm' },
+    card: { root: 'shadow-md' },
+    input: { base: 'shadow-xs' },
+    select: { base: 'shadow-xs' },
+    textarea: { base: 'shadow-xs' },
+    alert: { root: 'shadow-md' },
+    badge: { base: 'shadow-xs' }
+  },
+  hard: {
+    button: {
+      base: 'shadow-[3px_3px_0_0_var(--ui-border-inverted)] hover:translate-x-[1.5px] hover:translate-y-[1.5px] hover:shadow-[1.5px_1.5px_0_0_var(--ui-border-inverted)] active:translate-x-[3px] active:translate-y-[3px] active:shadow-none transition-[box-shadow,translate,background-color]'
+    },
+    card: { root: 'shadow-[5px_5px_0_0_var(--ui-border-inverted)]' },
+    input: { base: 'shadow-[3px_3px_0_0_var(--ui-border-inverted)]' },
+    select: { base: 'shadow-[3px_3px_0_0_var(--ui-border-inverted)]' },
+    textarea: { base: 'shadow-[3px_3px_0_0_var(--ui-border-inverted)]' },
+    alert: { root: 'shadow-[5px_5px_0_0_var(--ui-border-inverted)]' },
+    badge: { base: 'shadow-[2px_2px_0_0_var(--ui-border-inverted)]' }
+  }
+}
+
+const BORDER_FRAGMENTS: Record<BorderStyle, SlotFragments> = {
+  default: {},
+  bold: {
+    card: { root: 'ring-2 ring-(--ui-border-inverted)' },
+    input: { base: 'ring-2 ring-(--ui-border-inverted)' },
+    select: { base: 'ring-2 ring-(--ui-border-inverted)' },
+    textarea: { base: 'ring-2 ring-(--ui-border-inverted)' },
+    alert: { root: 'ring-2 ring-(--ui-border-inverted)' },
+    button: { base: 'ring-2 ring-inset ring-(--ui-border-inverted)' },
+    badge: { base: 'ring-2 ring-inset ring-(--ui-border-inverted)' }
+  }
+}
+
+/**
+ * Expand style options into the `ui.<component>` override shape, merging the
+ * shadow and border fragments slot-wise (both may touch the same slot).
+ */
+export function styleComponents(style: StyleOptions): Record<string, { slots: Record<string, string> }> {
+  const result: Record<string, { slots: Record<string, string> }> = {}
+
+  for (const fragments of [SHADOW_FRAGMENTS[style.shadow ?? 'none'], BORDER_FRAGMENTS[style.border ?? 'default']]) {
+    for (const [component, slots] of Object.entries(fragments)) {
+      result[component] ||= { slots: {} }
+      for (const [slot, classes] of Object.entries(slots)) {
+        result[component]!.slots[slot] = [result[component]!.slots[slot], classes].filter(Boolean).join(' ')
+      }
+    }
+  }
+
+  return result
+}
+
+/** Every component key a style bundle may touch — cleared before re-applying. */
+export const STYLE_COMPONENT_KEYS = [...new Set([
+  ...Object.values(SHADOW_FRAGMENTS).flatMap(fragments => Object.keys(fragments)),
+  ...Object.values(BORDER_FRAGMENTS).flatMap(fragments => Object.keys(fragments))
+])]
diff --git a/docs/app/utils/theme-engine/types.ts b/docs/app/utils/theme-engine/types.ts
index 204fc051cf..eb60c40c86 100644
--- a/docs/app/utils/theme-engine/types.ts
+++ b/docs/app/utils/theme-engine/types.ts
@@ -45,6 +45,11 @@ export interface ThemeDoc {
     sans?: string
   }
   icons?: string
+  /**
+   * Shadow/border treatment, expanded into per-component overrides on apply
+   * and export (no semantic shadow/border-width tokens in core yet).
+   */
+  style?: import('./styles').StyleOptions
   /** L4 — per-component overrides merged into `app.config ui.<component>` */
   components?: Record<string, Record<string, unknown>>
 }
@@ -73,4 +78,5 @@ export function createThemeDoc(): ThemeDoc {
 export function isDefaultTheme(doc: ThemeDoc): boolean {
   return !doc.palettes && !doc.colors && !doc.blackAsPrimary && !doc.tokens
     && doc.radius === undefined && !doc.font?.sans && !doc.icons && !doc.components
+    && !doc.style?.shadow && !doc.style?.border
 }
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 367750b21b..6ee2a25f10 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -209,3 +209,32 @@ describe('theme-engine', () => {
     })
   })
 })
+
+describe('styleComponents', () => {
+  it('returns nothing for the default treatment', async () => {
+    const { styleComponents } = await import('../../docs/app/utils/theme-engine')
+    expect(styleComponents({})).toEqual({})
+    expect(styleComponents({ shadow: 'none', border: 'default' })).toEqual({})
+  })
+
+  it('merges shadow and border fragments slot-wise', async () => {
+    const { styleComponents } = await import('../../docs/app/utils/theme-engine')
+    const components = styleComponents({ shadow: 'hard', border: 'bold' })
+
+    expect(components.button!.slots.base).toContain('shadow-[3px_3px_0_0_var(--ui-border-inverted)]')
+    expect(components.button!.slots.base).toContain('ring-2')
+    expect(components.card!.slots.root).toContain('shadow-[5px_5px_0_0_var(--ui-border-inverted)]')
+  })
+
+  it('expands doc.style in docToSettings with explicit components winning', async () => {
+    const { docToSettings } = await import('../../docs/app/utils/theme-engine')
+    const settings = docToSettings({
+      version: 1,
+      style: { shadow: 'soft' },
+      components: { button: { slots: { base: 'rounded-full' } } }
+    })
+
+    expect(settings.ui.card.slots.root).toBe('shadow-md')
+    expect(settings.ui.button.slots.base).toBe('rounded-full')
+  })
+})

From 89c27a2de6f6f5c4b1ed48b105371f6b6f4a5ae9 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 02:14:22 +0200
Subject: [PATCH 012/185] fix(docs): make bold/hard borders win over variant
 ring colors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

outline/subtle variants take their rings from theme compoundVariants,
which render after slot-base classes — so the bold bundle's width AND
inverted color were both dropped there (visible as 1px primary/error/
success rings in dark mode). The bundle now also ships extension
compoundVariants for those variants on button/badge/alert, which append
after the theme's and win the merge; inputs keep the slot-level override
that already worked.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/utils/theme-engine/styles.ts | 98 ++++++++++++++++++---------
 1 file changed, 67 insertions(+), 31 deletions(-)

diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 021d6d4d97..90da884746 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -5,6 +5,12 @@
  * (a known core gap), so these ride the `app.config ui.<component>` override
  * path instead. The class strings must stay STATIC literals in this file —
  * tailwind compiles what it can see in source, not what appears at runtime.
+ *
+ * Ring overrides need two altitudes: slot-base classes cover variants
+ * without their own ring (solid/soft/ghost), while `outline`/`subtle` rings
+ * come from theme compoundVariants which render AFTER slot classes — so
+ * those are overridden with extension compoundVariants, which append later
+ * still and win the merge.
  */
 
 export type ShadowStyle = 'none' | 'soft' | 'hard'
@@ -18,43 +24,69 @@ export interface StyleOptions {
 export const SHADOW_STYLES: ShadowStyle[] = ['none', 'soft', 'hard']
 export const BORDER_STYLES: BorderStyle[] = ['default', 'bold']
 
-type SlotFragments = Record<string, Record<string, string>>
+interface ComponentFragment {
+  slots?: Record<string, string>
+  compoundVariants?: Array<Record<string, unknown>>
+}
+
+type Fragments = Record<string, ComponentFragment>
 
-/** component → slot → classes appended to the theme's own. */
-const SHADOW_FRAGMENTS: Record<ShadowStyle, SlotFragments> = {
+const BOLD_RING = 'ring-2 ring-(--ui-border-inverted)'
+
+const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
   none: {},
   soft: {
-    button: { base: 'shadow-sm' },
-    card: { root: 'shadow-md' },
-    input: { base: 'shadow-xs' },
-    select: { base: 'shadow-xs' },
-    textarea: { base: 'shadow-xs' },
-    alert: { root: 'shadow-md' },
-    badge: { base: 'shadow-xs' }
+    button: { slots: { base: 'shadow-sm' } },
+    card: { slots: { root: 'shadow-md' } },
+    input: { slots: { base: 'shadow-xs' } },
+    select: { slots: { base: 'shadow-xs' } },
+    textarea: { slots: { base: 'shadow-xs' } },
+    alert: { slots: { root: 'shadow-md' } },
+    badge: { slots: { base: 'shadow-xs' } }
   },
   hard: {
     button: {
-      base: 'shadow-[3px_3px_0_0_var(--ui-border-inverted)] hover:translate-x-[1.5px] hover:translate-y-[1.5px] hover:shadow-[1.5px_1.5px_0_0_var(--ui-border-inverted)] active:translate-x-[3px] active:translate-y-[3px] active:shadow-none transition-[box-shadow,translate,background-color]'
+      slots: {
+        base: 'shadow-[3px_3px_0_0_var(--ui-border-inverted)] hover:translate-x-[1.5px] hover:translate-y-[1.5px] hover:shadow-[1.5px_1.5px_0_0_var(--ui-border-inverted)] active:translate-x-[3px] active:translate-y-[3px] active:shadow-none transition-[box-shadow,translate,background-color]'
+      }
     },
-    card: { root: 'shadow-[5px_5px_0_0_var(--ui-border-inverted)]' },
-    input: { base: 'shadow-[3px_3px_0_0_var(--ui-border-inverted)]' },
-    select: { base: 'shadow-[3px_3px_0_0_var(--ui-border-inverted)]' },
-    textarea: { base: 'shadow-[3px_3px_0_0_var(--ui-border-inverted)]' },
-    alert: { root: 'shadow-[5px_5px_0_0_var(--ui-border-inverted)]' },
-    badge: { base: 'shadow-[2px_2px_0_0_var(--ui-border-inverted)]' }
+    card: { slots: { root: 'shadow-[5px_5px_0_0_var(--ui-border-inverted)]' } },
+    input: { slots: { base: 'shadow-[3px_3px_0_0_var(--ui-border-inverted)]' } },
+    select: { slots: { base: 'shadow-[3px_3px_0_0_var(--ui-border-inverted)]' } },
+    textarea: { slots: { base: 'shadow-[3px_3px_0_0_var(--ui-border-inverted)]' } },
+    alert: { slots: { root: 'shadow-[5px_5px_0_0_var(--ui-border-inverted)]' } },
+    badge: { slots: { base: 'shadow-[2px_2px_0_0_var(--ui-border-inverted)]' } }
   }
 }
 
-const BORDER_FRAGMENTS: Record<BorderStyle, SlotFragments> = {
+const BORDER_FRAGMENTS: Record<BorderStyle, Fragments> = {
   default: {},
   bold: {
-    card: { root: 'ring-2 ring-(--ui-border-inverted)' },
-    input: { base: 'ring-2 ring-(--ui-border-inverted)' },
-    select: { base: 'ring-2 ring-(--ui-border-inverted)' },
-    textarea: { base: 'ring-2 ring-(--ui-border-inverted)' },
-    alert: { root: 'ring-2 ring-(--ui-border-inverted)' },
-    button: { base: 'ring-2 ring-inset ring-(--ui-border-inverted)' },
-    badge: { base: 'ring-2 ring-inset ring-(--ui-border-inverted)' }
+    card: { slots: { root: BOLD_RING } },
+    input: { slots: { base: `${BOLD_RING} ring-inset` } },
+    select: { slots: { base: `${BOLD_RING} ring-inset` } },
+    textarea: { slots: { base: `${BOLD_RING} ring-inset` } },
+    alert: {
+      slots: { root: BOLD_RING },
+      compoundVariants: [
+        { variant: 'outline', class: { root: BOLD_RING } },
+        { variant: 'subtle', class: { root: BOLD_RING } }
+      ]
+    },
+    button: {
+      slots: { base: `${BOLD_RING} ring-inset` },
+      compoundVariants: [
+        { variant: 'outline', class: `${BOLD_RING} ring-inset` },
+        { variant: 'subtle', class: `${BOLD_RING} ring-inset` }
+      ]
+    },
+    badge: {
+      slots: { base: `${BOLD_RING} ring-inset` },
+      compoundVariants: [
+        { variant: 'outline', class: `${BOLD_RING} ring-inset` },
+        { variant: 'subtle', class: `${BOLD_RING} ring-inset` }
+      ]
+    }
   }
 }
 
@@ -62,14 +94,18 @@ const BORDER_FRAGMENTS: Record<BorderStyle, SlotFragments> = {
  * Expand style options into the `ui.<component>` override shape, merging the
  * shadow and border fragments slot-wise (both may touch the same slot).
  */
-export function styleComponents(style: StyleOptions): Record<string, { slots: Record<string, string> }> {
-  const result: Record<string, { slots: Record<string, string> }> = {}
+export function styleComponents(style: StyleOptions): Fragments {
+  const result: Fragments = {}
 
   for (const fragments of [SHADOW_FRAGMENTS[style.shadow ?? 'none'], BORDER_FRAGMENTS[style.border ?? 'default']]) {
-    for (const [component, slots] of Object.entries(fragments)) {
-      result[component] ||= { slots: {} }
-      for (const [slot, classes] of Object.entries(slots)) {
-        result[component]!.slots[slot] = [result[component]!.slots[slot], classes].filter(Boolean).join(' ')
+    for (const [component, fragment] of Object.entries(fragments)) {
+      const target = result[component] ||= {}
+      for (const [slot, classes] of Object.entries(fragment.slots || {})) {
+        target.slots ||= {}
+        target.slots[slot] = [target.slots[slot], classes].filter(Boolean).join(' ')
+      }
+      if (fragment.compoundVariants) {
+        target.compoundVariants = [...(target.compoundVariants || []), ...fragment.compoundVariants]
       }
     }
   }

From 0a1a7401764fb3b6c61362046a59162653299516 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 02:23:13 +0200
Subject: [PATCH 013/185] fix(docs): correct bold-border and hard-shadow
 semantics
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bold now only thickens borders that already exist, keeping each
element's own ring color — ghost/solid/soft variants no longer gain
frames they never had. Hard shadows switch from --ui-border-inverted
(white in dark mode, reading as a glow) to a new --ui-shadow-color
variable: near-black over light surfaces, pure black in dark, defined
in the docs CSS and emitted by generateCSS whenever the hard treatment
is active so exports stand alone. Ghost/link buttons cast no shadow.

The uniform outlined-everything look moves into the Neo-brutalist
preset itself (per-mode border token remaps plus explicit component
frames on solid/outline/subtle/soft, ghost stays flat).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/assets/css/main.css           |  9 ++++
 docs/app/composables/useTheme.ts       |  7 +++
 docs/app/utils/theme-engine/export.ts  | 14 ++++++
 docs/app/utils/theme-engine/presets.ts | 45 ++++++++++++++++++
 docs/app/utils/theme-engine/styles.ts  | 63 ++++++++++++++------------
 test/utils/theme-engine.spec.ts        | 11 +++--
 6 files changed, 118 insertions(+), 31 deletions(-)

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index bf92012a63..56b8a013e6 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -67,3 +67,12 @@ html.theme-studio-dragging body *:not([data-curve-editor] *) {
 :root:not(.dark), .light {
   --ui-bg: var(--ui-color-neutral-50);
 }
+
+/* Shadow color for the studio's hard-shadow treatment — a shadow, not a
+   glow: near-black over light surfaces, pure black in dark mode. */
+:root, .light {
+  --ui-shadow-color: var(--ui-color-neutral-950);
+}
+.dark {
+  --ui-shadow-color: black;
+}
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index edbec4c17f..cf4f8991bb 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -283,6 +283,13 @@ export function useTheme() {
       doc.components = extras.ui
     }
 
+    // The studio's shadow/border prefs — generateCSS needs style.shadow to
+    // emit the --ui-shadow-color definitions the component classes reference.
+    const style = readLocalStorage<{ shadow?: string, border?: string }>('nuxt-ui-style', {})
+    if (style.shadow || style.border) {
+      doc.style = style as ThemeDoc['style']
+    }
+
     return doc
   }
 
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index 27f1e8a66c..e7d0948bb1 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -40,6 +40,20 @@ export function generateCSS(doc: ThemeDoc): string {
     lines.push('', ':root {', ...rootLines, '}')
   }
 
+  // The hard-shadow component classes reference this variable.
+  if (doc.style?.shadow === 'hard') {
+    lines.push(
+      '',
+      ':root, .light {',
+      '  --ui-shadow-color: var(--ui-color-neutral-950);',
+      '}',
+      '',
+      '.dark {',
+      '  --ui-shadow-color: black;',
+      '}'
+    )
+  }
+
   const lightOverrides = Object.entries(doc.tokens?.light || {})
   if (lightOverrides.length) {
     lines.push('', ':root, .light {', ...lightOverrides.map(([key, val]) => `  ${key}: ${val};`), '}')
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 79e8f35b88..f14504745d 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -66,6 +66,51 @@ export const presets: ThemePreset[] = [{
       light: {
         '--ui-border': 'var(--ui-color-neutral-900)',
         '--ui-border-accented': 'var(--ui-color-neutral-900)'
+      },
+      dark: {
+        '--ui-border': 'var(--ui-color-neutral-100)',
+        '--ui-border-accented': 'var(--ui-color-neutral-100)'
+      }
+    },
+    // The uniform outlined look is this preset's identity, not the generic
+    // bold control's: solid/outline/subtle buttons and badges get the frame
+    // (ghost and link stay borderless, as in the reference neobrutalism kits).
+    components: {
+      button: {
+        compoundVariants: [
+          { variant: 'solid', class: 'ring-2 ring-inset ring-(--ui-border-accented)' },
+          { variant: 'outline', class: 'ring-2 ring-inset ring-(--ui-border-accented)' },
+          { variant: 'subtle', class: 'ring-2 ring-inset ring-(--ui-border-accented)' },
+          { variant: 'soft', class: 'ring-2 ring-inset ring-(--ui-border-accented)' }
+        ]
+      },
+      badge: {
+        compoundVariants: [
+          { variant: 'solid', class: 'ring-2 ring-inset ring-(--ui-border-accented)' },
+          { variant: 'outline', class: 'ring-2 ring-inset ring-(--ui-border-accented)' },
+          { variant: 'subtle', class: 'ring-2 ring-inset ring-(--ui-border-accented)' },
+          { variant: 'soft', class: 'ring-2 ring-inset ring-(--ui-border-accented)' }
+        ]
+      },
+      alert: {
+        compoundVariants: [
+          { variant: 'solid', class: { root: 'ring-2 ring-inset ring-(--ui-border-accented)' } },
+          { variant: 'outline', class: { root: 'ring-2 ring-inset ring-(--ui-border-accented)' } },
+          { variant: 'subtle', class: { root: 'ring-2 ring-inset ring-(--ui-border-accented)' } },
+          { variant: 'soft', class: { root: 'ring-2 ring-inset ring-(--ui-border-accented)' } }
+        ]
+      },
+      card: {
+        slots: { root: 'ring-2 ring-(--ui-border-accented)' }
+      },
+      input: {
+        slots: { base: 'ring-2 ring-inset ring-(--ui-border-accented)' }
+      },
+      select: {
+        slots: { base: 'ring-2 ring-inset ring-(--ui-border-accented)' }
+      },
+      textarea: {
+        slots: { base: 'ring-2 ring-inset ring-(--ui-border-accented)' }
       }
     }
   }
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 90da884746..fbdd1446eb 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -6,11 +6,15 @@
  * path instead. The class strings must stay STATIC literals in this file —
  * tailwind compiles what it can see in source, not what appears at runtime.
  *
- * Ring overrides need two altitudes: slot-base classes cover variants
- * without their own ring (solid/soft/ghost), while `outline`/`subtle` rings
- * come from theme compoundVariants which render AFTER slot classes — so
- * those are overridden with extension compoundVariants, which append later
- * still and win the merge.
+ * Semantics:
+ * - `border: bold` only THICKENS borders that already exist, keeping each
+ *   element's own ring color. Borderless variants (ghost, solid, soft) stay
+ *   borderless. outline/subtle rings come from theme compoundVariants which
+ *   render after slot classes, so their width overrides ship as extension
+ *   compoundVariants (appended later, they win the merge).
+ * - `shadow: hard` uses `--ui-shadow-color` (near-black in light, black in
+ *   dark — a shadow, not a glow) defined in the docs CSS and emitted by the
+ *   export when the treatment is active.
  */
 
 export type ShadowStyle = 'none' | 'soft' | 'hard'
@@ -31,8 +35,6 @@ interface ComponentFragment {
 
 type Fragments = Record<string, ComponentFragment>
 
-const BOLD_RING = 'ring-2 ring-(--ui-border-inverted)'
-
 const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
   none: {},
   soft: {
@@ -47,44 +49,49 @@ const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
   hard: {
     button: {
       slots: {
-        base: 'shadow-[3px_3px_0_0_var(--ui-border-inverted)] hover:translate-x-[1.5px] hover:translate-y-[1.5px] hover:shadow-[1.5px_1.5px_0_0_var(--ui-border-inverted)] active:translate-x-[3px] active:translate-y-[3px] active:shadow-none transition-[box-shadow,translate,background-color]'
-      }
+        base: 'shadow-[3px_3px_0_0_var(--ui-shadow-color)] hover:translate-x-[1.5px] hover:translate-y-[1.5px] hover:shadow-[1.5px_1.5px_0_0_var(--ui-shadow-color)] active:translate-x-[3px] active:translate-y-[3px] active:shadow-none transition-[box-shadow,translate,background-color]'
+      },
+      // A floating shadow under an invisible box reads as a glitch — ghost
+      // and link buttons stay flat, as in the reference neobrutalism kits.
+      compoundVariants: [
+        { variant: 'ghost', class: 'shadow-none hover:translate-x-0 hover:translate-y-0 hover:shadow-none active:translate-x-0 active:translate-y-0' },
+        { variant: 'link', class: 'shadow-none hover:translate-x-0 hover:translate-y-0 hover:shadow-none active:translate-x-0 active:translate-y-0' }
+      ]
     },
-    card: { slots: { root: 'shadow-[5px_5px_0_0_var(--ui-border-inverted)]' } },
-    input: { slots: { base: 'shadow-[3px_3px_0_0_var(--ui-border-inverted)]' } },
-    select: { slots: { base: 'shadow-[3px_3px_0_0_var(--ui-border-inverted)]' } },
-    textarea: { slots: { base: 'shadow-[3px_3px_0_0_var(--ui-border-inverted)]' } },
-    alert: { slots: { root: 'shadow-[5px_5px_0_0_var(--ui-border-inverted)]' } },
-    badge: { slots: { base: 'shadow-[2px_2px_0_0_var(--ui-border-inverted)]' } }
+    card: { slots: { root: 'shadow-[5px_5px_0_0_var(--ui-shadow-color)]' } },
+    input: { slots: { base: 'shadow-[3px_3px_0_0_var(--ui-shadow-color)]' } },
+    select: { slots: { base: 'shadow-[3px_3px_0_0_var(--ui-shadow-color)]' } },
+    textarea: { slots: { base: 'shadow-[3px_3px_0_0_var(--ui-shadow-color)]' } },
+    alert: { slots: { root: 'shadow-[5px_5px_0_0_var(--ui-shadow-color)]' } },
+    badge: { slots: { base: 'shadow-[2px_2px_0_0_var(--ui-shadow-color)]' } }
   }
 }
 
 const BORDER_FRAGMENTS: Record<BorderStyle, Fragments> = {
   default: {},
   bold: {
-    card: { slots: { root: BOLD_RING } },
-    input: { slots: { base: `${BOLD_RING} ring-inset` } },
-    select: { slots: { base: `${BOLD_RING} ring-inset` } },
-    textarea: { slots: { base: `${BOLD_RING} ring-inset` } },
+    // Width only — each element keeps its own ring color, and elements
+    // without a ring don't gain one.
+    card: { slots: { root: 'ring-2' } },
+    input: { slots: { base: 'ring-2' } },
+    select: { slots: { base: 'ring-2' } },
+    textarea: { slots: { base: 'ring-2' } },
     alert: {
-      slots: { root: BOLD_RING },
       compoundVariants: [
-        { variant: 'outline', class: { root: BOLD_RING } },
-        { variant: 'subtle', class: { root: BOLD_RING } }
+        { variant: 'outline', class: { root: 'ring-2' } },
+        { variant: 'subtle', class: { root: 'ring-2' } }
       ]
     },
     button: {
-      slots: { base: `${BOLD_RING} ring-inset` },
       compoundVariants: [
-        { variant: 'outline', class: `${BOLD_RING} ring-inset` },
-        { variant: 'subtle', class: `${BOLD_RING} ring-inset` }
+        { variant: 'outline', class: 'ring-2' },
+        { variant: 'subtle', class: 'ring-2' }
       ]
     },
     badge: {
-      slots: { base: `${BOLD_RING} ring-inset` },
       compoundVariants: [
-        { variant: 'outline', class: `${BOLD_RING} ring-inset` },
-        { variant: 'subtle', class: `${BOLD_RING} ring-inset` }
+        { variant: 'outline', class: 'ring-2' },
+        { variant: 'subtle', class: 'ring-2' }
       ]
     }
   }
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 6ee2a25f10..7b17d98c70 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -221,9 +221,14 @@ describe('styleComponents', () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
     const components = styleComponents({ shadow: 'hard', border: 'bold' })
 
-    expect(components.button!.slots.base).toContain('shadow-[3px_3px_0_0_var(--ui-border-inverted)]')
-    expect(components.button!.slots.base).toContain('ring-2')
-    expect(components.card!.slots.root).toContain('shadow-[5px_5px_0_0_var(--ui-border-inverted)]')
+    expect(components.button!.slots!.base).toContain('shadow-[3px_3px_0_0_var(--ui-shadow-color)]')
+    // bold only thickens existing rings: buttons gain no base ring, the
+    // outline/subtle compound overrides carry width only
+    expect(components.button!.slots!.base).not.toContain('ring')
+    expect(components.button!.compoundVariants).toContainEqual({ variant: 'outline', class: 'ring-2' })
+    expect(components.card!.slots!.root).toContain('shadow-[5px_5px_0_0_var(--ui-shadow-color)]')
+    expect(components.card!.slots!.root).toContain('ring-2')
+    expect(components.card!.slots!.root).not.toContain('ring-(')
   })
 
   it('expands doc.style in docToSettings with explicit components winning', async () => {

From 41babb00cf6404e5a3ce4fdf1083ee72e5ad4faf Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 02:43:26 +0200
Subject: [PATCH 014/185] feat(docs): holistic style system, masonry bento,
 reference brutalist palette
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Border and shadow colors become first-class settings: Borders gain a
Frame option (outlines solid/soft surfaces too; ghost/link stay flat)
plus a color select (inverted/black/white/primary/neutral), Shadows gain
graded colors (black/dark/medium gray/inverted/primary — pure black
disappears against dark surfaces, which also made the previous defaults
invisible in dark mode). Colors ride two CSS variables so every
combination is a variable swap over static class bundles; all ring
overrides move to extension compoundVariants after discovering card and
input rings live at variant level and silently beat slot overrides.

Studio CSS baselines are now :where()-wrapped — unlayered rules beat the
library's @layer theme but zero specificity lets user theme overrides
win regardless of load order (previously --ui-shadow-color choices and
preset --ui-bg overrides lost the cascade to main.css).

The Neo-brutalist preset adopts the reference palette (#FF3333/#FF6666
custom red ramp, yellow secondary, pure white/black surfaces) and is now
pure configuration. The preview becomes a masonry column layout with five
new tiles: Table, Stats, Chat, Team, Notifications.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/assets/css/main.css                  |  19 +-
 .../theme-studio/ThemeStudioBento.vue         | 179 +++++++++++++++++-
 .../theme-studio/ThemeStudioControls.vue      |  63 +++++-
 docs/app/composables/useThemeStudio.ts        |  16 +-
 docs/app/utils/theme-engine/export.ts         |  38 ++--
 docs/app/utils/theme-engine/presets.ts        |  80 +++-----
 docs/app/utils/theme-engine/styles.ts         | 168 +++++++++++++---
 docs/app/utils/theme-engine/types.ts          |   2 +-
 test/utils/theme-engine.spec.ts               |  45 ++++-
 9 files changed, 483 insertions(+), 127 deletions(-)

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index 56b8a013e6..2582a1ad2d 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -60,19 +60,16 @@ html.theme-studio-dragging body *:not([data-curve-editor] *) {
   transition: background-color 60ms linear, color 60ms linear, border-color 60ms linear;
 }
 
-/* Studio baseline: the app background follows the neutral ramp instead of
-   being hardcoded white, so tinted neutrals reach the page in light mode.
-   `:not(.dark)` keeps this from out-cascading the library's .dark value,
-   which shares :root's specificity. */
-:root:not(.dark), .light {
+/* Studio baselines. :where() keeps them at zero specificity: being
+   unlayered they still beat the library's @layer theme defaults, but any
+   user override from the theme studio (plain .light/.dark rules injected
+   via useHead) wins regardless of load order. */
+:where(:root:not(.dark), .light) {
+  /* the app background follows the neutral ramp instead of hardcoded white */
   --ui-bg: var(--ui-color-neutral-50);
-}
-
-/* Shadow color for the studio's hard-shadow treatment — a shadow, not a
-   glow: near-black over light surfaces, pure black in dark mode. */
-:root, .light {
+  /* hard-shadow treatment: a shadow, not a glow */
   --ui-shadow-color: var(--ui-color-neutral-950);
 }
-.dark {
+:where(.dark) {
   --ui-shadow-color: black;
 }
diff --git a/docs/app/components/theme-studio/ThemeStudioBento.vue b/docs/app/components/theme-studio/ThemeStudioBento.vue
index 5af032c55c..61296ba35f 100644
--- a/docs/app/components/theme-studio/ThemeStudioBento.vue
+++ b/docs/app/components/theme-studio/ThemeStudioBento.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
+import { h, resolveComponent } from 'vue'
 import { CalendarDate } from '@internationalized/date'
+import type { TableColumn } from '@nuxt/ui'
+
+const UBadge = resolveComponent('UBadge')
 
 const toast = useToast()
 
@@ -32,6 +36,78 @@ const accordionItems = [
 const selectItems = ['Backlog', 'Todo', 'In Progress', 'Done']
 const selectValue = ref('Todo')
 
+type Invoice = {
+  id: string
+  customer: string
+  status: 'paid' | 'pending' | 'failed'
+  amount: number
+}
+
+const invoices: Invoice[] = [
+  { id: '3021', customer: 'Alex Turner', status: 'paid', amount: 594 },
+  { id: '3022', customer: 'Mia Chen', status: 'pending', amount: 276 },
+  { id: '3023', customer: 'Sam Ortiz', status: 'failed', amount: 315 },
+  { id: '3024', customer: 'Emma Davis', status: 'paid', amount: 529 }
+]
+
+const invoiceColumns: TableColumn<Invoice>[] = [{
+  accessorKey: 'id',
+  header: '#',
+  cell: ({ row }) => `#${row.getValue('id')}`
+}, {
+  accessorKey: 'customer',
+  header: 'Customer'
+}, {
+  accessorKey: 'status',
+  header: 'Status',
+  cell: ({ row }) => {
+    const color = ({
+      paid: 'success' as const,
+      pending: 'warning' as const,
+      failed: 'error' as const
+    })[row.getValue('status') as string]
+
+    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
+  }
+}, {
+  accessorKey: 'amount',
+  header: 'Amount',
+  meta: {
+    class: {
+      th: 'text-right',
+      td: 'text-right font-medium'
+    }
+  },
+  cell: ({ row }) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(Number.parseFloat(row.getValue('amount')))
+  }
+}]
+
+const stats = [
+  { label: 'Revenue', value: '$45.2k', delta: '+12%', color: 'success' as const },
+  { label: 'Users', value: '2,350', delta: '+8%', color: 'success' as const },
+  { label: 'Churn', value: '1.9%', delta: '-4%', color: 'error' as const },
+  { label: 'Sessions', value: '12.4k', delta: '+23%', color: 'success' as const }
+]
+
+const chatMessage = ref('')
+
+const roleItems = ['Owner', 'Member', 'Viewer']
+const teamMembers = ref([
+  { name: 'Benjamin Canac', username: 'benjamincanac', role: 'Owner' },
+  { name: 'Sébastien Chopin', username: 'atinux', role: 'Member' },
+  { name: 'Daniel Roe', username: 'danielroe', role: 'Viewer' }
+])
+
+const notificationSettings = ref([
+  { label: 'Email digest', description: 'A weekly summary of activity.', enabled: true },
+  { label: 'Push notifications', description: 'Mentions, replies and reactions.', enabled: true },
+  { label: 'Marketing emails', description: 'Product news and tips.', enabled: false }
+])
+
 function showToast() {
   toast.add({
     title: 'Theme applied',
@@ -42,8 +118,8 @@ function showToast() {
 </script>
 
 <template>
-  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 items-start">
-    <UCard :ui="{ body: 'flex flex-col gap-3' }">
+  <div class="columns-1 md:columns-2 xl:columns-3 gap-4 space-y-4">
+    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
       <p class="text-xs font-semibold text-muted uppercase tracking-wide">
         Buttons
       </p>
@@ -75,7 +151,7 @@ function showToast() {
       </div>
     </UCard>
 
-    <UCard :ui="{ body: 'flex flex-col gap-4' }">
+    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-4' }">
       <p class="text-xs font-semibold text-muted uppercase tracking-wide">
         Form
       </p>
@@ -98,7 +174,7 @@ function showToast() {
       <UButton label="Submit" block />
     </UCard>
 
-    <UCard :ui="{ body: 'flex flex-col gap-3' }">
+    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
       <p class="text-xs font-semibold text-muted uppercase tracking-wide">
         Feedback
       </p>
@@ -136,7 +212,7 @@ function showToast() {
       </div>
     </UCard>
 
-    <UCard :ui="{ body: 'flex flex-col gap-3' }">
+    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
       <p class="text-xs font-semibold text-muted uppercase tracking-wide">
         Navigation
       </p>
@@ -148,7 +224,7 @@ function showToast() {
       <UPagination v-model:page="page" :total="50" size="sm" />
     </UCard>
 
-    <UCard :ui="{ body: 'flex flex-col gap-3' }">
+    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
       <p class="text-xs font-semibold text-muted uppercase tracking-wide">
         Content
       </p>
@@ -182,7 +258,7 @@ function showToast() {
       </div>
     </UCard>
 
-    <UCard :ui="{ body: 'flex flex-col gap-3 items-center' }">
+    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3 items-center' }">
       <p class="text-xs font-semibold text-muted uppercase tracking-wide self-start">
         Pickers
       </p>
@@ -191,5 +267,94 @@ function showToast() {
 
       <UPinInput v-model="pin" :length="4" placeholder="○" />
     </UCard>
+
+    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
+      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
+        Table
+      </p>
+
+      <UTable :data="invoices" :columns="invoiceColumns" class="border border-default rounded-md" />
+    </UCard>
+
+    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
+      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
+        Stats
+      </p>
+
+      <div class="grid grid-cols-2 gap-3">
+        <div v-for="stat in stats" :key="stat.label" class="flex flex-col gap-1 p-3 rounded-lg bg-elevated/50">
+          <p class="text-xs text-muted">
+            {{ stat.label }}
+          </p>
+          <div class="flex items-center justify-between gap-2">
+            <p class="text-2xl font-bold text-highlighted">
+              {{ stat.value }}
+            </p>
+            <UBadge :label="stat.delta" :color="stat.color" variant="subtle" size="sm" />
+          </div>
+        </div>
+      </div>
+    </UCard>
+
+    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
+      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
+        Chat
+      </p>
+
+      <div class="text-sm bg-elevated rounded-lg px-3 py-2 me-8">
+        Hey! How does this bubble look with your primary color?
+      </div>
+      <div class="text-sm bg-primary text-inverted rounded-lg px-3 py-2 ms-auto max-w-[80%]">
+        Looking sharp, ship it.
+      </div>
+
+      <div class="flex items-center gap-2">
+        <UInput v-model="chatMessage" placeholder="Type a message..." class="flex-1" />
+        <UButton icon="i-lucide-send" square aria-label="Send message" />
+      </div>
+    </UCard>
+
+    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
+      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
+        Team
+      </p>
+
+      <div v-for="member in teamMembers" :key="member.username" class="flex items-center gap-3">
+        <UAvatar :src="`https://github.com/${member.username}.png`" :alt="member.name" />
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-medium text-highlighted truncate">
+            {{ member.name }}
+          </p>
+          <p class="text-xs text-muted truncate">
+            {{ member.role }}
+          </p>
+        </div>
+        <USelect v-model="member.role" :items="roleItems" size="sm" class="w-28" />
+      </div>
+
+      <UButton label="Invite member" icon="i-lucide-user-plus" variant="soft" block />
+    </UCard>
+
+    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
+      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
+        Notifications
+      </p>
+
+      <template v-for="(setting, index) in notificationSettings" :key="setting.label">
+        <USeparator v-if="index > 0" />
+
+        <div class="flex items-center justify-between gap-4">
+          <div>
+            <p class="text-sm text-highlighted">
+              {{ setting.label }}
+            </p>
+            <p class="text-xs text-muted">
+              {{ setting.description }}
+            </p>
+          </div>
+          <USwitch v-model="setting.enabled" />
+        </div>
+      </template>
+    </UCard>
   </div>
 </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index dafcb77f6d..c5007b4e37 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -21,15 +21,44 @@ const {
 const { selectPalette, style, setStyle } = useThemeStudio()
 
 const shadowOptions = [
-  { label: 'None', value: 'none', icon: 'i-lucide-square' },
-  { label: 'Soft', value: 'soft', icon: 'i-lucide-square-stack' },
-  { label: 'Hard', value: 'hard', icon: 'i-lucide-squares-exclude' }
+  { label: 'None', value: 'none' },
+  { label: 'Soft', value: 'soft' },
+  { label: 'Hard', value: 'hard' }
 ] as const
 
 const borderOptions = [
   { label: 'Thin', value: 'default' },
-  { label: 'Bold', value: 'bold' }
+  { label: 'Bold', value: 'bold' },
+  { label: 'Frame', value: 'frame' }
 ] as const
+
+const borderColorItems = [
+  { label: 'Default', value: 'default' },
+  { label: 'Inverted', value: 'inverted' },
+  { label: 'Black', value: 'black' },
+  { label: 'White', value: 'white' },
+  { label: 'Primary', value: 'primary' },
+  { label: 'Neutral', value: 'neutral' }
+]
+
+const shadowColorItems = [
+  { label: 'Default (ink)', value: 'default' },
+  { label: 'Black', value: 'black' },
+  { label: 'Dark gray', value: 'dark' },
+  { label: 'Medium gray', value: 'medium' },
+  { label: 'Inverted', value: 'inverted' },
+  { label: 'Primary', value: 'primary' }
+]
+
+const borderColor = computed({
+  get: () => style.value.borderColor || 'default',
+  set: (value: any) => setStyle({ borderColor: value })
+})
+
+const shadowColor = computed({
+  get: () => style.value.shadowColor || 'default',
+  set: (value: any) => setStyle({ shadowColor: value })
+})
 </script>
 
 <template>
@@ -144,6 +173,18 @@ const borderOptions = [
           @click="setStyle({ shadow: option.value })"
         />
       </div>
+
+      <div v-if="(style.shadow || 'none') !== 'none'" class="mt-1.5">
+        <USelect
+          v-model="shadowColor"
+          size="sm"
+          color="neutral"
+          icon="i-lucide-paint-bucket"
+          :items="shadowColorItems"
+          class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
+          :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+        />
+      </div>
     </fieldset>
 
     <fieldset>
@@ -151,7 +192,7 @@ const borderOptions = [
         Borders
       </legend>
 
-      <div class="grid grid-cols-2 gap-1">
+      <div class="grid grid-cols-3 gap-1">
         <ThemePickerButton
           v-for="option in borderOptions"
           :key="option.value"
@@ -161,6 +202,18 @@ const borderOptions = [
           @click="setStyle({ border: option.value })"
         />
       </div>
+
+      <div class="mt-1.5">
+        <USelect
+          v-model="borderColor"
+          size="sm"
+          color="neutral"
+          icon="i-lucide-paint-bucket"
+          :items="borderColorItems"
+          class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
+          :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+        />
+      </div>
     </fieldset>
 
     <fieldset>
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index c8d7adcb5a..035c6bd9c6 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,6 +1,6 @@
 import { useLocalStorage } from '@vueuse/core'
 import colors from 'tailwindcss/colors'
-import { presets, docToSettings, isDefaultTheme, generatePalette, fitPalette, parseCssColor, styleComponents, DEFAULT_COLORS, SHADES, STYLE_COMPONENT_KEYS } from '../utils/theme-engine'
+import { presets, docToSettings, isDefaultTheme, generatePalette, fitPalette, parseCssColor, styleComponents, styleTokens, DEFAULT_COLORS, SHADES, STYLE_COMPONENT_KEYS, STYLE_TOKEN_KEYS } from '../utils/theme-engine'
 import type { ThemeDoc, ThemePreset, PaletteCurveParams, Shade, StyleOptions } from '../utils/theme-engine'
 
 export function useThemeStudio() {
@@ -19,16 +19,22 @@ export function useThemeStudio() {
   function setStyle(options: StyleOptions) {
     style.value = { ...style.value, ...options }
 
-    // Clear the previous bundle first — defu merging can't unset classes.
+    // Clear the previous bundle and color variables first — defu merging
+    // can't unset classes, and a stale --ui-frame-color would leak.
     theme.resetComponentOverrides(STYLE_COMPONENT_KEYS)
+    theme.removeCSSVariables({ light: STYLE_TOKEN_KEYS, dark: STYLE_TOKEN_KEYS })
 
     const components = styleComponents(style.value)
-    if (Object.keys(components).length) {
-      theme.applyThemeSettings({ ui: components })
+    const tokens = styleTokens(style.value)
+    const settings: Record<string, any> = {}
+    if (Object.keys(components).length) settings.ui = components
+    if (Object.keys(tokens.light).length || Object.keys(tokens.dark).length) settings.cssVariables = tokens
+    if (Object.keys(settings).length) {
+      theme.applyThemeSettings(settings)
     }
     activePreset.value = undefined
 
-    track('Theme Style Changed', { shadow: style.value.shadow || 'none', border: style.value.border || 'default' })
+    track('Theme Style Changed', { ...style.value })
   }
 
   let trackedAt: number | undefined
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index e7d0948bb1..a0412a95d9 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -1,7 +1,7 @@
 import { themeIcons } from '../theme'
 import type { ThemeDoc } from './types'
 import { DEFAULT_COLORS, THEME_DEFAULTS } from './types'
-import { styleComponents } from './styles'
+import { styleComponents, styleTokens } from './styles'
 
 /**
  * Generate the minimal `main.css`. The document only holds overrides, so
@@ -40,18 +40,19 @@ export function generateCSS(doc: ThemeDoc): string {
     lines.push('', ':root {', ...rootLines, '}')
   }
 
-  // The hard-shadow component classes reference this variable.
-  if (doc.style?.shadow === 'hard') {
-    lines.push(
-      '',
-      ':root, .light {',
-      '  --ui-shadow-color: var(--ui-color-neutral-950);',
-      '}',
-      '',
-      '.dark {',
-      '  --ui-shadow-color: black;',
-      '}'
-    )
+  // Color variables behind the style treatment. Hard shadows always need
+  // --ui-shadow-color defined; explicit color choices override per mode.
+  const style = styleTokens(doc.style || {})
+  if (doc.style?.shadow === 'hard' && !style.light['--ui-shadow-color']) {
+    style.light['--ui-shadow-color'] = 'var(--ui-color-neutral-950)'
+    style.dark['--ui-shadow-color'] = 'black'
+  }
+
+  if (Object.keys(style.light).length) {
+    lines.push('', ':root, .light {', ...Object.entries(style.light).map(([key, val]) => `  ${key}: ${val};`), '}')
+  }
+  if (Object.keys(style.dark).length) {
+    lines.push('', '.dark {', ...Object.entries(style.dark).map(([key, val]) => `  ${key}: ${val};`), '}')
   }
 
   const lightOverrides = Object.entries(doc.tokens?.light || {})
@@ -145,8 +146,15 @@ export function docToSettings(doc: ThemeDoc): Record<string, any> {
     )
   }
 
-  if (doc.tokens) {
-    settings.cssVariables = doc.tokens
+  // Token overrides plus the style treatment's color variables.
+  const style = doc.style ? styleTokens(doc.style) : { light: {}, dark: {} }
+  const light = { ...style.light, ...doc.tokens?.light }
+  const dark = { ...style.dark, ...doc.tokens?.dark }
+  if (Object.keys(light).length || Object.keys(dark).length) {
+    settings.cssVariables = {
+      ...(Object.keys(light).length ? { light } : {}),
+      ...(Object.keys(dark).length ? { dark } : {})
+    }
   }
 
   // Expand the shadow/border treatment into component overrides; explicit
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index f14504745d..5a29d015c7 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -47,71 +47,51 @@ export const presets: ThemePreset[] = [{
 }, {
   id: 'neo-brutalist',
   name: 'Neo-brutalist',
-  description: 'Hard offset shadows, bold borders, zero radius, loud yellow.',
+  description: 'Hard black shadows, inked frames, zero radius, alarm red.',
   icon: 'i-lucide-zap',
   doc: {
     version: 1,
     meta: { name: 'Neo-brutalist', base: 'neo-brutalist' },
+    // Reference palette (tweakcn/shadcn studio): #FF3333 primary light,
+    // #FF6666 dark, yellow secondary, pure white/black surfaces.
+    palettes: {
+      brut: {
+        shades: {
+          50: '#FFECEC',
+          100: '#FFD6D6',
+          200: '#FFB3B3',
+          300: '#FF8F8F',
+          400: '#FF6666',
+          500: '#FF3333',
+          600: '#E61A1A',
+          700: '#C21212',
+          800: '#9E0E0E',
+          900: '#800C0C',
+          950: '#450505'
+        }
+      }
+    },
     colors: {
-      primary: 'yellow',
+      primary: 'brut',
+      secondary: 'yellow',
       neutral: 'neutral'
     },
     radius: 0,
     font: { sans: 'Outfit' },
-    style: {
-      shadow: 'hard',
-      border: 'bold'
-    },
     tokens: {
       light: {
-        '--ui-border': 'var(--ui-color-neutral-900)',
-        '--ui-border-accented': 'var(--ui-color-neutral-900)'
+        '--ui-bg': 'white'
       },
       dark: {
-        '--ui-border': 'var(--ui-color-neutral-100)',
-        '--ui-border-accented': 'var(--ui-color-neutral-100)'
+        '--ui-bg': 'black'
       }
     },
-    // The uniform outlined look is this preset's identity, not the generic
-    // bold control's: solid/outline/subtle buttons and badges get the frame
-    // (ghost and link stay borderless, as in the reference neobrutalism kits).
-    components: {
-      button: {
-        compoundVariants: [
-          { variant: 'solid', class: 'ring-2 ring-inset ring-(--ui-border-accented)' },
-          { variant: 'outline', class: 'ring-2 ring-inset ring-(--ui-border-accented)' },
-          { variant: 'subtle', class: 'ring-2 ring-inset ring-(--ui-border-accented)' },
-          { variant: 'soft', class: 'ring-2 ring-inset ring-(--ui-border-accented)' }
-        ]
-      },
-      badge: {
-        compoundVariants: [
-          { variant: 'solid', class: 'ring-2 ring-inset ring-(--ui-border-accented)' },
-          { variant: 'outline', class: 'ring-2 ring-inset ring-(--ui-border-accented)' },
-          { variant: 'subtle', class: 'ring-2 ring-inset ring-(--ui-border-accented)' },
-          { variant: 'soft', class: 'ring-2 ring-inset ring-(--ui-border-accented)' }
-        ]
-      },
-      alert: {
-        compoundVariants: [
-          { variant: 'solid', class: { root: 'ring-2 ring-inset ring-(--ui-border-accented)' } },
-          { variant: 'outline', class: { root: 'ring-2 ring-inset ring-(--ui-border-accented)' } },
-          { variant: 'subtle', class: { root: 'ring-2 ring-inset ring-(--ui-border-accented)' } },
-          { variant: 'soft', class: { root: 'ring-2 ring-inset ring-(--ui-border-accented)' } }
-        ]
-      },
-      card: {
-        slots: { root: 'ring-2 ring-(--ui-border-accented)' }
-      },
-      input: {
-        slots: { base: 'ring-2 ring-inset ring-(--ui-border-accented)' }
-      },
-      select: {
-        slots: { base: 'ring-2 ring-inset ring-(--ui-border-accented)' }
-      },
-      textarea: {
-        slots: { base: 'ring-2 ring-inset ring-(--ui-border-accented)' }
-      }
+    // The rest is plain configuration: outlined everything in inverted ink,
+    // hard offset shadows.
+    style: {
+      shadow: 'hard',
+      border: 'frame',
+      borderColor: 'inverted'
     }
   }
 }, {
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index fbdd1446eb..0dd851be95 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -1,32 +1,47 @@
 /**
- * Shadow and border treatments, expressed as per-component class bundles.
+ * Shadow and border treatments, expressed as per-component class bundles
+ * plus two CSS variables for the colors.
  *
  * Nuxt UI has no semantic `--ui-shadow` / `--ui-border-width` tokens yet
- * (a known core gap), so these ride the `app.config ui.<component>` override
- * path instead. The class strings must stay STATIC literals in this file —
- * tailwind compiles what it can see in source, not what appears at runtime.
+ * (a known core gap), so structure rides the `app.config ui.<component>`
+ * override path with STATIC class literals (tailwind compiles what it can
+ * see in source), while the color choices are pure CSS variables:
+ *
+ * - `--ui-shadow-color` — referenced by every hard-shadow class
+ * - `--ui-frame-color`  — referenced by every border-color override class
+ *
+ * so any color configuration is a variable swap, not a new class bundle.
+ *
+ * Placement rule: every ring in Nuxt UI themes lives at variant or
+ * compoundVariant level (card/input variants, button/badge/alert compounds),
+ * all of which render after slot classes — so width/color overrides MUST be
+ * extension compoundVariants (appended after the theme's, they win the
+ * tailwind-merge). Only shadows, which no theme variant sets, ride slots.
  *
  * Semantics:
- * - `border: bold` only THICKENS borders that already exist, keeping each
- *   element's own ring color. Borderless variants (ghost, solid, soft) stay
- *   borderless. outline/subtle rings come from theme compoundVariants which
- *   render after slot classes, so their width overrides ship as extension
- *   compoundVariants (appended later, they win the merge).
- * - `shadow: hard` uses `--ui-shadow-color` (near-black in light, black in
- *   dark — a shadow, not a glow) defined in the docs CSS and emitted by the
- *   export when the treatment is active.
+ * - `border: bold` thickens borders that already exist, keeping ring colors.
+ * - `border: frame` additionally frames solid/soft surfaces — the
+ *   neobrutalist outline-everything look. Ghost/link stay flat.
+ * - `borderColor`/`shadowColor` recolor via the variables; 'default' leaves
+ *   each element's own ring color / the dark shadow color untouched.
  */
 
 export type ShadowStyle = 'none' | 'soft' | 'hard'
-export type BorderStyle = 'default' | 'bold'
+export type BorderStyle = 'default' | 'bold' | 'frame'
+export type BorderColor = 'default' | 'inverted' | 'black' | 'white' | 'primary' | 'neutral'
+export type ShadowColor = 'default' | 'black' | 'dark' | 'medium' | 'inverted' | 'primary'
 
 export interface StyleOptions {
   shadow?: ShadowStyle
   border?: BorderStyle
+  borderColor?: BorderColor
+  shadowColor?: ShadowColor
 }
 
 export const SHADOW_STYLES: ShadowStyle[] = ['none', 'soft', 'hard']
-export const BORDER_STYLES: BorderStyle[] = ['default', 'bold']
+export const BORDER_STYLES: BorderStyle[] = ['default', 'bold', 'frame']
+export const BORDER_COLORS: BorderColor[] = ['default', 'inverted', 'black', 'white', 'primary', 'neutral']
+export const SHADOW_COLORS: ShadowColor[] = ['default', 'black', 'dark', 'medium', 'inverted', 'primary']
 
 interface ComponentFragment {
   slots?: Record<string, string>
@@ -67,44 +82,136 @@ const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
   }
 }
 
+/** compound entries thickening the rings a variant already has */
+function widen(variants: string[], slot?: string): Array<Record<string, unknown>> {
+  return variants.map(variant => ({ variant, class: slot ? { [slot]: 'ring-2' } : 'ring-2' }))
+}
+
+const FRAME = 'ring-2 ring-inset ring-(--ui-border-accented)'
+
 const BORDER_FRAGMENTS: Record<BorderStyle, Fragments> = {
   default: {},
   bold: {
-    // Width only — each element keeps its own ring color, and elements
-    // without a ring don't gain one.
-    card: { slots: { root: 'ring-2' } },
-    input: { slots: { base: 'ring-2' } },
-    select: { slots: { base: 'ring-2' } },
-    textarea: { slots: { base: 'ring-2' } },
+    card: { compoundVariants: widen(['outline', 'subtle'], 'root') },
+    input: { compoundVariants: widen(['outline', 'subtle']) },
+    select: { compoundVariants: widen(['outline', 'subtle']) },
+    textarea: { compoundVariants: widen(['outline', 'subtle']) },
+    alert: { compoundVariants: widen(['outline', 'subtle'], 'root') },
+    button: { compoundVariants: widen(['outline', 'subtle']) },
+    badge: { compoundVariants: widen(['outline', 'subtle']) }
+  },
+  frame: {
+    card: {
+      compoundVariants: [
+        ...widen(['outline', 'subtle'], 'root'),
+        { variant: 'solid', class: { root: 'ring-2 ring-(--ui-border-accented)' } },
+        { variant: 'soft', class: { root: 'ring-2 ring-(--ui-border-accented)' } }
+      ]
+    },
+    input: { compoundVariants: widen(['outline', 'subtle']) },
+    select: { compoundVariants: widen(['outline', 'subtle']) },
+    textarea: { compoundVariants: widen(['outline', 'subtle']) },
     alert: {
       compoundVariants: [
-        { variant: 'outline', class: { root: 'ring-2' } },
-        { variant: 'subtle', class: { root: 'ring-2' } }
+        ...widen(['outline', 'subtle'], 'root'),
+        { variant: 'solid', class: { root: 'ring-2 ring-inset ring-(--ui-border-accented)' } },
+        { variant: 'soft', class: { root: 'ring-2 ring-inset ring-(--ui-border-accented)' } }
       ]
     },
     button: {
       compoundVariants: [
-        { variant: 'outline', class: 'ring-2' },
-        { variant: 'subtle', class: 'ring-2' }
+        ...widen(['outline', 'subtle']),
+        { variant: 'solid', class: FRAME },
+        { variant: 'soft', class: FRAME }
       ]
     },
     badge: {
       compoundVariants: [
-        { variant: 'outline', class: 'ring-2' },
-        { variant: 'subtle', class: 'ring-2' }
+        ...widen(['outline', 'subtle']),
+        { variant: 'solid', class: FRAME },
+        { variant: 'soft', class: FRAME }
       ]
     }
   }
 }
 
+/** compound entries recoloring whatever ring is present via the variable */
+function recolor(variants: string[], slot?: string): Array<Record<string, unknown>> {
+  return variants.map(variant => ({ variant, class: slot ? { [slot]: 'ring-(--ui-frame-color)' } : 'ring-(--ui-frame-color)' }))
+}
+
+const FRAME_COLOR_FRAGMENTS: Fragments = {
+  card: { compoundVariants: recolor(['outline', 'subtle', 'solid', 'soft'], 'root') },
+  input: { compoundVariants: recolor(['outline', 'subtle']) },
+  select: { compoundVariants: recolor(['outline', 'subtle']) },
+  textarea: { compoundVariants: recolor(['outline', 'subtle']) },
+  alert: { compoundVariants: recolor(['outline', 'subtle', 'solid', 'soft'], 'root') },
+  button: { compoundVariants: recolor(['outline', 'subtle', 'solid', 'soft']) },
+  badge: { compoundVariants: recolor(['outline', 'subtle', 'solid', 'soft']) }
+}
+
+/** Per-mode values behind the two color variables, per palette choice. */
+const FRAME_COLOR_VALUES: Record<Exclude<BorderColor, 'default'>, { light: string, dark: string }> = {
+  inverted: { light: 'var(--ui-color-neutral-950)', dark: 'white' },
+  black: { light: 'black', dark: 'black' },
+  white: { light: 'white', dark: 'white' },
+  primary: { light: 'var(--ui-color-primary-500)', dark: 'var(--ui-color-primary-400)' },
+  neutral: { light: 'var(--ui-color-neutral-900)', dark: 'var(--ui-color-neutral-100)' }
+}
+
+/**
+ * Graded shades matter most in dark mode, where a pure-black shadow
+ * disappears against near-black surfaces — dark/medium grays read as
+ * physical offset blocks on both schemes.
+ */
+const SHADOW_COLOR_VALUES: Record<Exclude<ShadowColor, 'default'>, { light: string, dark: string }> = {
+  black: { light: 'black', dark: 'black' },
+  dark: { light: 'var(--ui-color-neutral-800)', dark: 'var(--ui-color-neutral-800)' },
+  medium: { light: 'var(--ui-color-neutral-600)', dark: 'var(--ui-color-neutral-600)' },
+  inverted: { light: 'var(--ui-color-neutral-950)', dark: 'white' },
+  primary: { light: 'var(--ui-color-primary-500)', dark: 'var(--ui-color-primary-400)' }
+}
+
+export const STYLE_TOKEN_KEYS = ['--ui-frame-color', '--ui-shadow-color']
+
+/**
+ * The CSS-variable side of a style: per-mode values for the frame and
+ * shadow color choices. 'default' contributes nothing (the docs CSS /
+ * export defaults apply).
+ */
+export function styleTokens(style: StyleOptions): { light: Record<string, string>, dark: Record<string, string> } {
+  const light: Record<string, string> = {}
+  const dark: Record<string, string> = {}
+
+  if (style.borderColor && style.borderColor !== 'default') {
+    const value = FRAME_COLOR_VALUES[style.borderColor]
+    light['--ui-frame-color'] = value.light
+    dark['--ui-frame-color'] = value.dark
+  }
+  if (style.shadowColor && style.shadowColor !== 'default') {
+    const value = SHADOW_COLOR_VALUES[style.shadowColor]
+    light['--ui-shadow-color'] = value.light
+    dark['--ui-shadow-color'] = value.dark
+  }
+
+  return { light, dark }
+}
+
 /**
- * Expand style options into the `ui.<component>` override shape, merging the
- * shadow and border fragments slot-wise (both may touch the same slot).
+ * Expand style options into the `ui.<component>` override shape. Sources
+ * merge in shadow → width → color order, so the color compounds append last
+ * and win the tailwind-merge for ring color.
  */
 export function styleComponents(style: StyleOptions): Fragments {
+  const sources = [
+    SHADOW_FRAGMENTS[style.shadow ?? 'none'],
+    BORDER_FRAGMENTS[style.border ?? 'default'],
+    style.borderColor && style.borderColor !== 'default' ? FRAME_COLOR_FRAGMENTS : {}
+  ]
+
   const result: Fragments = {}
 
-  for (const fragments of [SHADOW_FRAGMENTS[style.shadow ?? 'none'], BORDER_FRAGMENTS[style.border ?? 'default']]) {
+  for (const fragments of sources) {
     for (const [component, fragment] of Object.entries(fragments)) {
       const target = result[component] ||= {}
       for (const [slot, classes] of Object.entries(fragment.slots || {})) {
@@ -123,5 +230,6 @@ export function styleComponents(style: StyleOptions): Fragments {
 /** Every component key a style bundle may touch — cleared before re-applying. */
 export const STYLE_COMPONENT_KEYS = [...new Set([
   ...Object.values(SHADOW_FRAGMENTS).flatMap(fragments => Object.keys(fragments)),
-  ...Object.values(BORDER_FRAGMENTS).flatMap(fragments => Object.keys(fragments))
+  ...Object.values(BORDER_FRAGMENTS).flatMap(fragments => Object.keys(fragments)),
+  ...Object.keys(FRAME_COLOR_FRAGMENTS)
 ])]
diff --git a/docs/app/utils/theme-engine/types.ts b/docs/app/utils/theme-engine/types.ts
index eb60c40c86..8811b58ce5 100644
--- a/docs/app/utils/theme-engine/types.ts
+++ b/docs/app/utils/theme-engine/types.ts
@@ -78,5 +78,5 @@ export function createThemeDoc(): ThemeDoc {
 export function isDefaultTheme(doc: ThemeDoc): boolean {
   return !doc.palettes && !doc.colors && !doc.blackAsPrimary && !doc.tokens
     && doc.radius === undefined && !doc.font?.sans && !doc.icons && !doc.components
-    && !doc.style?.shadow && !doc.style?.border
+    && !Object.values(doc.style || {}).some(value => value && value !== 'none' && value !== 'default')
 }
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 7b17d98c70..cd6db190b2 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -226,9 +226,9 @@ describe('styleComponents', () => {
     // outline/subtle compound overrides carry width only
     expect(components.button!.slots!.base).not.toContain('ring')
     expect(components.button!.compoundVariants).toContainEqual({ variant: 'outline', class: 'ring-2' })
-    expect(components.card!.slots!.root).toContain('shadow-[5px_5px_0_0_var(--ui-shadow-color)]')
-    expect(components.card!.slots!.root).toContain('ring-2')
-    expect(components.card!.slots!.root).not.toContain('ring-(')
+    // card rings live at variant level, so bold ships compounds, not slots
+    expect(components.card!.slots?.root ?? '').toContain('shadow-[5px_5px_0_0_var(--ui-shadow-color)]')
+    expect(components.card!.compoundVariants).toContainEqual({ variant: 'outline', class: { root: 'ring-2' } })
   })
 
   it('expands doc.style in docToSettings with explicit components winning', async () => {
@@ -243,3 +243,42 @@ describe('styleComponents', () => {
     expect(settings.ui.button.slots.base).toBe('rounded-full')
   })
 })
+
+describe('style colors', () => {
+  it('frame adds outlines to solid/soft but never ghost', async () => {
+    const { styleComponents } = await import('../../docs/app/utils/theme-engine')
+    const components = styleComponents({ border: 'frame' })
+
+    expect(components.button!.compoundVariants).toContainEqual({ variant: 'solid', class: 'ring-2 ring-inset ring-(--ui-border-accented)' })
+    expect(JSON.stringify(components.button!.compoundVariants)).not.toContain('"ghost"')
+  })
+
+  it('borderColor appends recolor compounds after width ones', async () => {
+    const { styleComponents } = await import('../../docs/app/utils/theme-engine')
+    const compounds = styleComponents({ border: 'bold', borderColor: 'black' }).button!.compoundVariants!
+
+    const widthIndex = compounds.findIndex(entry => entry.class === 'ring-2')
+    const colorIndex = compounds.findIndex(entry => entry.class === 'ring-(--ui-frame-color)')
+    expect(widthIndex).toBeGreaterThanOrEqual(0)
+    expect(colorIndex).toBeGreaterThan(widthIndex)
+  })
+
+  it('styleTokens maps color choices per mode and default contributes nothing', async () => {
+    const { styleTokens } = await import('../../docs/app/utils/theme-engine')
+
+    expect(styleTokens({})).toEqual({ light: {}, dark: {} })
+    expect(styleTokens({ borderColor: 'inverted', shadowColor: 'black' })).toEqual({
+      light: { '--ui-frame-color': 'var(--ui-color-neutral-950)', '--ui-shadow-color': 'black' },
+      dark: { '--ui-frame-color': 'white', '--ui-shadow-color': 'black' }
+    })
+  })
+
+  it('generateCSS emits style color variables', async () => {
+    const { generateCSS } = await import('../../docs/app/utils/theme-engine')
+    const css = generateCSS({ version: 1, style: { shadow: 'hard', border: 'frame', borderColor: 'inverted' } })
+
+    expect(css).toContain('--ui-frame-color: var(--ui-color-neutral-950);')
+    expect(css).toContain('--ui-shadow-color: var(--ui-color-neutral-950);')
+    expect(css).toContain('--ui-shadow-color: black;')
+  })
+})

From a3076dd77d1772d8cb006277b7b8c35d31536b5f Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 02:47:47 +0200
Subject: [PATCH 015/185] feat(docs): four new presets and a compact settings
 panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Presets grow to nine with Art Deco (gilded amber lines via primary
border color), Marshmallow (pastel pink on mauve), Ghibli (custom moss
ramp on sun-warmed amber paper) and Marvel (comic red/blue with black
frames and hard shadows) — translated from shadcn studio's registry
values into ThemeDoc form, each composing the new style axes rather
than bespoke component hacks.

The sidebar gets compact: primary/neutral collapse into popover swatch
rows with live color dots, radius becomes a slider, everything fits
without scrolling.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 139 +++++++++++++-----
 docs/app/utils/theme-engine/presets.ts        | 115 +++++++++++++++
 2 files changed, 217 insertions(+), 37 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index c5007b4e37..2deb398ecf 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -8,7 +8,6 @@ const {
   primary,
   blackAsPrimary,
   setBlackAsPrimary,
-  radiuses,
   radius,
   fonts,
   font,
@@ -18,7 +17,25 @@ const {
   mode
 } = useTheme()
 
-const { selectPalette, style, setStyle } = useThemeStudio()
+const { selectPalette, isCustomPalette, style, setStyle } = useThemeStudio()
+
+const primarySwatch = computed(() => {
+  if (blackAsPrimary.value) {
+    return { label: 'Black', color: undefined }
+  }
+  if (isCustomPalette('primary')) {
+    return { label: 'Custom', color: 'var(--color-custom-primary-500)' }
+  }
+  return { label: primary.value, color: `var(--color-${primary.value}-500)` }
+})
+
+const neutralSwatch = computed(() => {
+  if (isCustomPalette('neutral')) {
+    return { label: 'Custom', color: 'var(--color-custom-neutral-500)' }
+  }
+  const chip = neutral.value === 'neutral' ? 'old-neutral' : neutral.value
+  return { label: neutral.value, color: `var(--color-${chip}-500)` }
+})
 
 const shadowOptions = [
   { label: 'None', value: 'none' },
@@ -62,7 +79,7 @@ const shadowColor = computed({
 </script>
 
 <template>
-  <div class="flex flex-col gap-6">
+  <div class="flex flex-col gap-5">
     <fieldset>
       <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
         Primary
@@ -78,26 +95,50 @@ const shadowColor = computed({
         />
       </legend>
 
-      <div class="grid grid-cols-3 gap-1">
-        <ThemePickerButton
-          label="Black"
-          :selected="blackAsPrimary"
-          @click="setBlackAsPrimary(true)"
+      <UPopover :content="{ side: 'bottom', align: 'start' }">
+        <UButton
+          color="neutral"
+          variant="outline"
+          size="sm"
+          block
+          trailing-icon="i-lucide-chevron-down"
+          class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
+          :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
         >
           <template #leading>
-            <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
+            <span
+              class="inline-block size-3 rounded-full"
+              :class="{ 'bg-black dark:bg-white': blackAsPrimary }"
+              :style="primarySwatch.color ? { backgroundColor: primarySwatch.color } : undefined"
+            />
           </template>
-        </ThemePickerButton>
 
-        <ThemePickerButton
-          v-for="color in primaryColors"
-          :key="color"
-          :label="color"
-          :chip="color"
-          :selected="!blackAsPrimary && primary === color"
-          @click="selectPalette('primary', color)"
-        />
-      </div>
+          {{ primarySwatch.label }}
+        </UButton>
+
+        <template #content>
+          <div class="grid grid-cols-3 gap-1 w-72 p-2">
+            <ThemePickerButton
+              label="Black"
+              :selected="blackAsPrimary"
+              @click="setBlackAsPrimary(true)"
+            >
+              <template #leading>
+                <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
+              </template>
+            </ThemePickerButton>
+
+            <ThemePickerButton
+              v-for="color in primaryColors"
+              :key="color"
+              :label="color"
+              :chip="color"
+              :selected="!blackAsPrimary && primary === color"
+              @click="selectPalette('primary', color)"
+            />
+          </div>
+        </template>
+      </UPopover>
 
       <ThemeStudioPaletteEditor alias="primary" />
     </fieldset>
@@ -117,16 +158,39 @@ const shadowColor = computed({
         />
       </legend>
 
-      <div class="grid grid-cols-3 gap-1">
-        <ThemePickerButton
-          v-for="color in neutralColors"
-          :key="color"
-          :label="color"
-          :chip="color === 'neutral' ? 'old-neutral' : color"
-          :selected="neutral === color"
-          @click="selectPalette('neutral', color)"
-        />
-      </div>
+      <UPopover :content="{ side: 'bottom', align: 'start' }">
+        <UButton
+          color="neutral"
+          variant="outline"
+          size="sm"
+          block
+          trailing-icon="i-lucide-chevron-down"
+          class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
+          :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+        >
+          <template #leading>
+            <span
+              class="inline-block size-3 rounded-full"
+              :style="{ backgroundColor: neutralSwatch.color }"
+            />
+          </template>
+
+          {{ neutralSwatch.label }}
+        </UButton>
+
+        <template #content>
+          <div class="grid grid-cols-3 gap-1 w-72 p-2">
+            <ThemePickerButton
+              v-for="color in neutralColors"
+              :key="color"
+              :label="color"
+              :chip="color === 'neutral' ? 'old-neutral' : color"
+              :selected="neutral === color"
+              @click="selectPalette('neutral', color)"
+            />
+          </div>
+        </template>
+      </UPopover>
 
       <ThemeStudioPaletteEditor alias="neutral" />
     </fieldset>
@@ -146,15 +210,16 @@ const shadowColor = computed({
         />
       </legend>
 
-      <div class="grid grid-cols-5 gap-1">
-        <ThemePickerButton
-          v-for="r in radiuses"
-          :key="r"
-          :label="String(r)"
-          class="justify-center px-0"
-          :selected="radius === r"
-          @click="radius = r"
+      <div class="flex items-center gap-3">
+        <USlider
+          v-model="radius"
+          :min="0"
+          :max="0.5"
+          :step="0.125"
+          size="sm"
         />
+
+        <span class="text-[11px] font-mono text-muted tabular-nums shrink-0 w-14 text-right">{{ radius }}rem</span>
       </div>
     </fieldset>
 
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 5a29d015c7..939efb9c91 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -94,6 +94,121 @@ export const presets: ThemePreset[] = [{
       borderColor: 'inverted'
     }
   }
+}, {
+  id: 'art-deco',
+  name: 'Art Deco',
+  description: 'Gilded amber lines on warm cream and charcoal.',
+  icon: 'i-lucide-landmark',
+  doc: {
+    version: 1,
+    meta: { name: 'Art Deco', base: 'art-deco' },
+    colors: {
+      primary: 'amber',
+      secondary: 'yellow',
+      neutral: 'stone'
+    },
+    radius: 0.5,
+    font: { sans: 'Raleway' },
+    tokens: {
+      light: {
+        '--ui-bg': 'var(--ui-color-primary-50)',
+        '--ui-border': 'var(--ui-color-primary-200)',
+        '--ui-border-accented': 'var(--ui-color-primary-300)'
+      },
+      dark: {
+        '--ui-border': 'var(--ui-color-primary-900)',
+        '--ui-border-accented': 'var(--ui-color-primary-800)'
+      }
+    },
+    style: {
+      border: 'bold',
+      borderColor: 'primary'
+    }
+  }
+}, {
+  id: 'marshmallow',
+  name: 'Marshmallow',
+  description: 'Pastel pink softness with mauve-tinted grays.',
+  icon: 'i-lucide-candy',
+  doc: {
+    version: 1,
+    meta: { name: 'Marshmallow', base: 'marshmallow' },
+    colors: {
+      primary: 'pink',
+      secondary: 'violet',
+      neutral: 'mauve'
+    },
+    radius: 0.5,
+    font: { sans: 'Poppins' },
+    style: {
+      shadow: 'soft'
+    }
+  }
+}, {
+  id: 'ghibli',
+  name: 'Ghibli',
+  description: 'Moss green and sun-warmed paper, gentle corners.',
+  icon: 'i-lucide-leaf',
+  doc: {
+    version: 1,
+    meta: { name: 'Ghibli', base: 'ghibli' },
+    palettes: {
+      moss: {
+        shades: {
+          50: '#F7F9EC',
+          100: '#EDF2D8',
+          200: '#DCE5B5',
+          300: '#C6D48E',
+          400: '#ADBE71',
+          500: '#96A65C',
+          600: '#7A894A',
+          700: '#62703C',
+          800: '#4C5730',
+          900: '#3D4628',
+          950: '#212614'
+        }
+      }
+    },
+    colors: {
+      primary: 'moss',
+      secondary: 'amber',
+      neutral: 'stone'
+    },
+    radius: 0.5,
+    font: { sans: 'Poppins' },
+    tokens: {
+      light: {
+        '--ui-bg': 'var(--ui-color-secondary-100)',
+        '--ui-bg-muted': 'var(--ui-color-secondary-50)',
+        '--ui-border': 'var(--ui-color-secondary-300)'
+      }
+    },
+    style: {
+      shadow: 'soft'
+    }
+  }
+}, {
+  id: 'marvel',
+  name: 'Marvel',
+  description: 'Comic-book red and blue with inked panel outlines.',
+  icon: 'i-lucide-book-open',
+  doc: {
+    version: 1,
+    meta: { name: 'Marvel', base: 'marvel' },
+    colors: {
+      primary: 'red',
+      secondary: 'blue',
+      neutral: 'zinc'
+    },
+    radius: 0.125,
+    font: { sans: 'Outfit' },
+    style: {
+      shadow: 'hard',
+      shadowColor: 'black',
+      border: 'frame',
+      borderColor: 'black'
+    }
+  }
 }, {
   id: 'anthropic',
   name: 'Anthropic',

From c175d14d3162f0879048c018a9931abe79d4aceb Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 02:55:09 +0200
Subject: [PATCH 016/185] feat(docs): per-mode neutral shade picker for shadow
 color
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the fixed dark/medium gray options (clustered at the dark end)
with a 'Neutral shade' mode: two sliders choose any of the 11 neutral
ramp shades independently for light and dark mode, with live swatches.
Two single sliders rather than one dual-thumb range because the two
values are independent and may cross — a range slider enforces ordering.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 49 +++++++++++++++++--
 docs/app/utils/theme-engine/styles.ts         | 25 +++++-----
 test/utils/theme-engine.spec.ts               | 11 +++++
 3 files changed, 70 insertions(+), 15 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 2deb398ecf..6ea1d9e6f6 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -61,12 +61,27 @@ const borderColorItems = [
 const shadowColorItems = [
   { label: 'Default (ink)', value: 'default' },
   { label: 'Black', value: 'black' },
-  { label: 'Dark gray', value: 'dark' },
-  { label: 'Medium gray', value: 'medium' },
   { label: 'Inverted', value: 'inverted' },
-  { label: 'Primary', value: 'primary' }
+  { label: 'Primary', value: 'primary' },
+  { label: 'Neutral shade…', value: 'shade' }
 ]
 
+const SHADE_STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+
+// Slider position (0–10) ↔ neutral ramp shade, per mode.
+function shadeSlider(target: 'light' | 'dark') {
+  return computed({
+    get: () => SHADE_STEPS.indexOf((style.value.shadowShade || { light: 950, dark: 800 })[target]),
+    set: (index: number) => {
+      const current = { light: 950, dark: 800, ...style.value.shadowShade }
+      setStyle({ shadowShade: { ...current, [target]: SHADE_STEPS[index]! } })
+    }
+  })
+}
+
+const lightShade = shadeSlider('light')
+const darkShade = shadeSlider('dark')
+
 const borderColor = computed({
   get: () => style.value.borderColor || 'default',
   set: (value: any) => setStyle({ borderColor: value })
@@ -239,7 +254,7 @@ const shadowColor = computed({
         />
       </div>
 
-      <div v-if="(style.shadow || 'none') !== 'none'" class="mt-1.5">
+      <div v-if="(style.shadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
         <USelect
           v-model="shadowColor"
           size="sm"
@@ -249,6 +264,32 @@ const shadowColor = computed({
           class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
           :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
         />
+
+        <template v-if="shadowColor === 'shade'">
+          <div class="flex items-center gap-2">
+            <UIcon name="i-lucide-sun" class="size-3.5 text-muted shrink-0" />
+
+            <USlider v-model="lightShade" :min="0" :max="10" :step="1" size="sm" />
+
+            <span
+              class="size-4 shrink-0 rounded-sm ring ring-default"
+              :style="{ backgroundColor: `var(--color-${neutral === 'neutral' ? 'old-neutral' : neutral}-${SHADE_STEPS[lightShade]})` }"
+            />
+            <span class="text-[11px] text-dimmed font-mono w-7 text-right shrink-0">{{ SHADE_STEPS[lightShade] }}</span>
+          </div>
+
+          <div class="flex items-center gap-2">
+            <UIcon name="i-lucide-moon" class="size-3.5 text-muted shrink-0" />
+
+            <USlider v-model="darkShade" :min="0" :max="10" :step="1" size="sm" />
+
+            <span
+              class="size-4 shrink-0 rounded-sm ring ring-default"
+              :style="{ backgroundColor: `var(--color-${neutral === 'neutral' ? 'old-neutral' : neutral}-${SHADE_STEPS[darkShade]})` }"
+            />
+            <span class="text-[11px] text-dimmed font-mono w-7 text-right shrink-0">{{ SHADE_STEPS[darkShade] }}</span>
+          </div>
+        </template>
       </div>
     </fieldset>
 
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 0dd851be95..42af3699fc 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -29,19 +29,23 @@
 export type ShadowStyle = 'none' | 'soft' | 'hard'
 export type BorderStyle = 'default' | 'bold' | 'frame'
 export type BorderColor = 'default' | 'inverted' | 'black' | 'white' | 'primary' | 'neutral'
-export type ShadowColor = 'default' | 'black' | 'dark' | 'medium' | 'inverted' | 'primary'
+export type ShadowColor = 'default' | 'black' | 'inverted' | 'primary' | 'shade'
 
 export interface StyleOptions {
   shadow?: ShadowStyle
   border?: BorderStyle
   borderColor?: BorderColor
   shadowColor?: ShadowColor
+  /** Neutral ramp shade per mode, used when `shadowColor` is 'shade' */
+  shadowShade?: { light: number, dark: number }
 }
 
 export const SHADOW_STYLES: ShadowStyle[] = ['none', 'soft', 'hard']
 export const BORDER_STYLES: BorderStyle[] = ['default', 'bold', 'frame']
 export const BORDER_COLORS: BorderColor[] = ['default', 'inverted', 'black', 'white', 'primary', 'neutral']
-export const SHADOW_COLORS: ShadowColor[] = ['default', 'black', 'dark', 'medium', 'inverted', 'primary']
+export const SHADOW_COLORS: ShadowColor[] = ['default', 'black', 'inverted', 'primary', 'shade']
+
+export const SHADOW_SHADE_DEFAULTS = { light: 950, dark: 800 }
 
 interface ComponentFragment {
   slots?: Record<string, string>
@@ -159,15 +163,8 @@ const FRAME_COLOR_VALUES: Record<Exclude<BorderColor, 'default'>, { light: strin
   neutral: { light: 'var(--ui-color-neutral-900)', dark: 'var(--ui-color-neutral-100)' }
 }
 
-/**
- * Graded shades matter most in dark mode, where a pure-black shadow
- * disappears against near-black surfaces — dark/medium grays read as
- * physical offset blocks on both schemes.
- */
-const SHADOW_COLOR_VALUES: Record<Exclude<ShadowColor, 'default'>, { light: string, dark: string }> = {
+const SHADOW_COLOR_VALUES: Record<Exclude<ShadowColor, 'default' | 'shade'>, { light: string, dark: string }> = {
   black: { light: 'black', dark: 'black' },
-  dark: { light: 'var(--ui-color-neutral-800)', dark: 'var(--ui-color-neutral-800)' },
-  medium: { light: 'var(--ui-color-neutral-600)', dark: 'var(--ui-color-neutral-600)' },
   inverted: { light: 'var(--ui-color-neutral-950)', dark: 'white' },
   primary: { light: 'var(--ui-color-primary-500)', dark: 'var(--ui-color-primary-400)' }
 }
@@ -188,7 +185,13 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
     light['--ui-frame-color'] = value.light
     dark['--ui-frame-color'] = value.dark
   }
-  if (style.shadowColor && style.shadowColor !== 'default') {
+  if (style.shadowColor === 'shade') {
+    // Per-mode neutral ramp shade — a graded gray shadow that darkens or
+    // lightens independently of the scheme it sits on.
+    const shade = { ...SHADOW_SHADE_DEFAULTS, ...style.shadowShade }
+    light['--ui-shadow-color'] = `var(--ui-color-neutral-${shade.light})`
+    dark['--ui-shadow-color'] = `var(--ui-color-neutral-${shade.dark})`
+  } else if (style.shadowColor && style.shadowColor !== 'default') {
     const value = SHADOW_COLOR_VALUES[style.shadowColor]
     light['--ui-shadow-color'] = value.light
     dark['--ui-shadow-color'] = value.dark
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index cd6db190b2..acc248cd2a 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -273,6 +273,17 @@ describe('style colors', () => {
     })
   })
 
+  it('styleTokens supports per-mode neutral shades', async () => {
+    const { styleTokens } = await import('../../docs/app/utils/theme-engine')
+
+    expect(styleTokens({ shadowColor: 'shade', shadowShade: { light: 700, dark: 300 } })).toEqual({
+      light: { '--ui-shadow-color': 'var(--ui-color-neutral-700)' },
+      dark: { '--ui-shadow-color': 'var(--ui-color-neutral-300)' }
+    })
+    // defaults apply when shades are unset
+    expect(styleTokens({ shadowColor: 'shade' }).dark['--ui-shadow-color']).toBe('var(--ui-color-neutral-800)')
+  })
+
   it('generateCSS emits style color variables', async () => {
     const { generateCSS } = await import('../../docs/app/utils/theme-engine')
     const css = generateCSS({ version: 1, style: { shadow: 'hard', border: 'frame', borderColor: 'inverted' } })

From a0267ff373f901974c4f398c299256837ea4d4a4 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 03:02:12 +0200
Subject: [PATCH 017/185] feat(docs): per-mode shade sliders for borders and
 background, palette style offsets

Border color gains the same per-mode neutral-shade slider pair as
shadows, and a new Background section drives --ui-bg per mode the same
way (a token shorthand on the style axis until a full tokens editor
exists). The palette editor's trigger moves into the section header as a
Custom button, and 'Use this palette' is replaced by a style-offset
dropdown (Fitted/Pastel/Muted/Vivid/Dazzling) applying taste transforms
from the fitted base so repeated picks never compound.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 120 +++++++++---
 .../theme-studio/ThemeStudioPaletteEditor.vue | 172 +++++++++---------
 docs/app/utils/theme-engine/styles.ts         |  33 +++-
 test/utils/theme-engine.spec.ts               |  10 +
 4 files changed, 220 insertions(+), 115 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 6ea1d9e6f6..3f163942f4 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -55,7 +55,8 @@ const borderColorItems = [
   { label: 'Black', value: 'black' },
   { label: 'White', value: 'white' },
   { label: 'Primary', value: 'primary' },
-  { label: 'Neutral', value: 'neutral' }
+  { label: 'Neutral', value: 'neutral' },
+  { label: 'Neutral shade…', value: 'shade' }
 ]
 
 const shadowColorItems = [
@@ -68,19 +69,36 @@ const shadowColorItems = [
 
 const SHADE_STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
 
-// Slider position (0–10) ↔ neutral ramp shade, per mode.
-function shadeSlider(target: 'light' | 'dark') {
+// Slider position (0–10) ↔ neutral ramp shade, per mode and style field.
+function shadeSlider(field: 'shadowShade' | 'borderShade' | 'bgShade', defaults: { light: number, dark: number }, target: 'light' | 'dark') {
   return computed({
-    get: () => SHADE_STEPS.indexOf((style.value.shadowShade || { light: 950, dark: 800 })[target]),
+    get: () => SHADE_STEPS.indexOf((style.value[field] || defaults)[target]),
     set: (index: number) => {
-      const current = { light: 950, dark: 800, ...style.value.shadowShade }
-      setStyle({ shadowShade: { ...current, [target]: SHADE_STEPS[index]! } })
+      const current = { ...defaults, ...style.value[field] }
+      setStyle({ [field]: { ...current, [target]: SHADE_STEPS[index]! } })
     }
   })
 }
 
-const lightShade = shadeSlider('light')
-const darkShade = shadeSlider('dark')
+const shadowShades = {
+  light: shadeSlider('shadowShade', { light: 950, dark: 800 }, 'light'),
+  dark: shadeSlider('shadowShade', { light: 950, dark: 800 }, 'dark')
+}
+
+const borderShades = {
+  light: shadeSlider('borderShade', { light: 900, dark: 200 }, 'light'),
+  dark: shadeSlider('borderShade', { light: 900, dark: 200 }, 'dark')
+}
+
+const bgShades = {
+  light: shadeSlider('bgShade', { light: 50, dark: 900 }, 'light'),
+  dark: shadeSlider('bgShade', { light: 50, dark: 900 }, 'dark')
+}
+
+const neutralChip = computed(() => neutral.value === 'neutral' ? 'old-neutral' : neutral.value)
+
+const primaryEditorOpen = ref(false)
+const neutralEditorOpen = ref(false)
 
 const borderColor = computed({
   get: () => style.value.borderColor || 'default',
@@ -96,7 +114,7 @@ const shadowColor = computed({
 <template>
   <div class="flex flex-col gap-5">
     <fieldset>
-      <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
+      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
         Primary
 
         <UButton
@@ -108,6 +126,17 @@ const shadowColor = computed({
           class="p-0 -my-0.5"
           :ui="{ leadingIcon: 'size-3' }"
         />
+
+        <UButton
+          label="Custom"
+          :icon="isCustomPalette('primary') ? 'i-lucide-paintbrush' : 'i-lucide-wand-sparkles'"
+          color="neutral"
+          :variant="primaryEditorOpen ? 'soft' : 'ghost'"
+          size="xs"
+          class="ms-auto -my-1 text-[11px]"
+          :ui="{ leadingIcon: isCustomPalette('primary') ? 'text-primary size-3' : 'size-3' }"
+          @click="primaryEditorOpen = !primaryEditorOpen"
+        />
       </legend>
 
       <UPopover :content="{ side: 'bottom', align: 'start' }">
@@ -155,11 +184,11 @@ const shadowColor = computed({
         </template>
       </UPopover>
 
-      <ThemeStudioPaletteEditor alias="primary" />
+      <ThemeStudioPaletteEditor v-model:open="primaryEditorOpen" alias="primary" />
     </fieldset>
 
     <fieldset>
-      <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
+      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
         Neutral
 
         <UButton
@@ -171,6 +200,17 @@ const shadowColor = computed({
           class="p-0 -my-0.5"
           :ui="{ leadingIcon: 'size-3' }"
         />
+
+        <UButton
+          label="Custom"
+          :icon="isCustomPalette('neutral') ? 'i-lucide-paintbrush' : 'i-lucide-wand-sparkles'"
+          color="neutral"
+          :variant="neutralEditorOpen ? 'soft' : 'ghost'"
+          size="xs"
+          class="ms-auto -my-1 text-[11px]"
+          :ui="{ leadingIcon: isCustomPalette('neutral') ? 'text-primary size-3' : 'size-3' }"
+          @click="neutralEditorOpen = !neutralEditorOpen"
+        />
       </legend>
 
       <UPopover :content="{ side: 'bottom', align: 'start' }">
@@ -266,28 +306,16 @@ const shadowColor = computed({
         />
 
         <template v-if="shadowColor === 'shade'">
-          <div class="flex items-center gap-2">
-            <UIcon name="i-lucide-sun" class="size-3.5 text-muted shrink-0" />
-
-            <USlider v-model="lightShade" :min="0" :max="10" :step="1" size="sm" />
-
-            <span
-              class="size-4 shrink-0 rounded-sm ring ring-default"
-              :style="{ backgroundColor: `var(--color-${neutral === 'neutral' ? 'old-neutral' : neutral}-${SHADE_STEPS[lightShade]})` }"
-            />
-            <span class="text-[11px] text-dimmed font-mono w-7 text-right shrink-0">{{ SHADE_STEPS[lightShade] }}</span>
-          </div>
-
-          <div class="flex items-center gap-2">
-            <UIcon name="i-lucide-moon" class="size-3.5 text-muted shrink-0" />
+          <div v-for="(slider, modeName) in shadowShades" :key="modeName" class="flex items-center gap-2">
+            <UIcon :name="modeName === 'light' ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3.5 text-muted shrink-0" />
 
-            <USlider v-model="darkShade" :min="0" :max="10" :step="1" size="sm" />
+            <USlider v-model="slider.value" :min="0" :max="10" :step="1" size="sm" />
 
             <span
               class="size-4 shrink-0 rounded-sm ring ring-default"
-              :style="{ backgroundColor: `var(--color-${neutral === 'neutral' ? 'old-neutral' : neutral}-${SHADE_STEPS[darkShade]})` }"
+              :style="{ backgroundColor: `var(--color-${neutralChip}-${SHADE_STEPS[slider.value]})` }"
             />
-            <span class="text-[11px] text-dimmed font-mono w-7 text-right shrink-0">{{ SHADE_STEPS[darkShade] }}</span>
+            <span class="text-[11px] text-dimmed font-mono w-7 text-right shrink-0">{{ SHADE_STEPS[slider.value] }}</span>
           </div>
         </template>
       </div>
@@ -309,7 +337,7 @@ const shadowColor = computed({
         />
       </div>
 
-      <div class="mt-1.5">
+      <div class="mt-1.5 flex flex-col gap-2">
         <USelect
           v-model="borderColor"
           size="sm"
@@ -319,6 +347,40 @@ const shadowColor = computed({
           class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
           :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
         />
+
+        <template v-if="borderColor === 'shade'">
+          <div v-for="(slider, modeName) in borderShades" :key="modeName" class="flex items-center gap-2">
+            <UIcon :name="modeName === 'light' ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3.5 text-muted shrink-0" />
+
+            <USlider v-model="slider.value" :min="0" :max="10" :step="1" size="sm" />
+
+            <span
+              class="size-4 shrink-0 rounded-sm ring ring-default"
+              :style="{ backgroundColor: `var(--color-${neutralChip}-${SHADE_STEPS[slider.value]})` }"
+            />
+            <span class="text-[11px] text-dimmed font-mono w-7 text-right shrink-0">{{ SHADE_STEPS[slider.value] }}</span>
+          </div>
+        </template>
+      </div>
+    </fieldset>
+
+    <fieldset>
+      <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
+        Background
+      </legend>
+
+      <div class="flex flex-col gap-2">
+        <div v-for="(slider, modeName) in bgShades" :key="modeName" class="flex items-center gap-2">
+          <UIcon :name="modeName === 'light' ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3.5 text-muted shrink-0" />
+
+          <USlider v-model="slider.value" :min="0" :max="10" :step="1" size="sm" />
+
+          <span
+            class="size-4 shrink-0 rounded-sm ring ring-default"
+            :style="{ backgroundColor: `var(--color-${neutralChip}-${SHADE_STEPS[slider.value]})` }"
+          />
+          <span class="text-[11px] text-dimmed font-mono w-7 text-right shrink-0">{{ SHADE_STEPS[slider.value] }}</span>
+        </div>
       </div>
     </fieldset>
 
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 532adea2c4..c8ef8f0798 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 const appConfig = useAppConfig()
 const { paletteParams, isCustomPalette, paletteShades, setPaletteFromCurve, clearCustomPalette } = useThemeStudio()
 
-const open = ref(false)
+const open = defineModel<boolean>('open', { default: false })
 const tab = ref<'lightness' | 'chroma' | 'hue'>('lightness')
 
 const tabs = [
@@ -60,8 +60,11 @@ const windows = computed(() => ({
 // Programmatic writes into `params` (seeding, external sync) must not
 // live-apply — only user edits do.
 let suppress = false
+/** Fitted base the style offsets transform from, so they never compound. */
+let seedBase: PaletteCurveParams = structuredClone(toRaw(params))
 function seed(values: PaletteCurveParams) {
   suppress = true
+  seedBase = structuredClone(toRaw(values))
   Object.assign(params, structuredClone(toRaw(values)))
   recenterHueWindow()
   nextTick(() => {
@@ -129,8 +132,44 @@ watch([() => (appConfig.ui.colors as Record<string, string>)[props.alias], open]
   }
 })
 
-function apply() {
-  setPaletteFromCurve(props.alias, structuredClone(toRaw(params)))
+const styleOffset = ref('fitted')
+
+const styleOffsetItems = [
+  { label: 'Fitted', value: 'fitted' },
+  { label: 'Pastel', value: 'pastel' },
+  { label: 'Muted', value: 'muted' },
+  { label: 'Vivid', value: 'vivid' },
+  { label: 'Dazzling', value: 'dazzling' }
+]
+
+function scaleChroma(curve: PaletteCurveParams['chroma'], factor: number) {
+  curve.y0 *= factor
+  curve.y1 *= factor
+  curve.p1y *= factor
+  curve.p2y *= factor
+}
+
+/** Apply a taste offset ON TOP of the fitted base (idempotent, not cumulative). */
+function applyStyleOffset(name: string) {
+  const next = structuredClone(seedBase)
+
+  if (name === 'pastel') {
+    scaleChroma(next.chroma, 0.45)
+    next.lightness.y0 = Math.max(next.lightness.y0, 0.985)
+    next.lightness.y1 = Math.max(next.lightness.y1, 0.32)
+    next.lightness.p1y = Math.min(next.lightness.p1y * 1.08, 1.1)
+  } else if (name === 'muted') {
+    scaleChroma(next.chroma, 0.6)
+  } else if (name === 'vivid') {
+    scaleChroma(next.chroma, 1.35)
+  } else if (name === 'dazzling') {
+    scaleChroma(next.chroma, 1.9)
+    next.lightness.p2y = next.lightness.p2y * 0.96
+  }
+
+  // Not seed(): this IS a user edit, the watcher should live-apply it.
+  Object.assign(params, next)
+  recenterHueWindow()
 }
 
 function remove() {
@@ -140,94 +179,65 @@ function remove() {
 </script>
 
 <template>
-  <UCollapsible v-model:open="open" class="mt-1.5">
-    <div class="flex items-center gap-1">
-      <UButton
-        :label="active ? 'Custom palette' : 'Create custom palette'"
-        :icon="active ? 'i-lucide-paintbrush' : 'i-lucide-wand-sparkles'"
-        color="neutral"
-        variant="ghost"
-        size="xs"
-        block
-        class="justify-start text-[11px]"
-        :ui="{ leadingIcon: active ? 'text-primary size-3.5' : 'size-3.5' }"
-        trailing-icon="i-lucide-chevron-down"
-      />
+  <div v-if="open" class="mt-1.5 flex flex-col gap-2.5 pb-1">
+    <UTabs
+      v-model="tab"
+      :items="tabs"
+      :content="false"
+      size="xs"
+      color="neutral"
+      :ui="{ trigger: 'text-[11px]' }"
+      @update:model-value="tab === 'hue' && recenterHueWindow()"
+    />
+
+    <ThemeStudioCurveEditor
+      v-model="params[tab]"
+      :y-min="windows[tab].min"
+      :y-max="windows[tab].max"
+      :stop-colors="stopColors"
+      @drag-start="onDragStart"
+      @drag-end="onDragEnd"
+    />
+
+    <div class="flex items-center gap-2">
+      <div class="flex flex-1 rounded-sm overflow-hidden ring ring-default">
+        <UTooltip v-for="shade in SHADES" :key="shade" :text="`${shade} · ${shades[shade]}`">
+          <div class="h-5 flex-1" :style="{ backgroundColor: shades[shade] }" />
+        </UTooltip>
+      </div>
 
-      <UTooltip v-if="active" text="Remove custom palette">
-        <UButton
-          icon="i-lucide-x"
-          color="neutral"
-          variant="ghost"
-          size="xs"
-          aria-label="Remove custom palette"
-          :ui="{ leadingIcon: 'size-3.5' }"
-          @click.stop="remove"
+      <UTooltip :text="`White on 500: ${contrast.toFixed(1)}:1`">
+        <UBadge
+          :label="contrast >= 4.5 ? 'AA' : contrast >= 3 ? 'AA18' : 'Low'"
+          :color="contrast >= 4.5 ? 'success' : contrast >= 3 ? 'warning' : 'error'"
+          variant="subtle"
+          size="sm"
         />
       </UTooltip>
     </div>
 
-    <template #content>
-      <div class="flex flex-col gap-2.5 pt-3 pb-1">
-        <UTabs
-          v-model="tab"
-          :items="tabs"
-          :content="false"
-          size="xs"
-          color="neutral"
-          :ui="{ trigger: 'text-[11px]' }"
-          @update:model-value="tab === 'hue' && recenterHueWindow()"
-        />
-
-        <ThemeStudioCurveEditor
-          v-model="params[tab]"
-          :y-min="windows[tab].min"
-          :y-max="windows[tab].max"
-          :stop-colors="stopColors"
-          @drag-start="onDragStart"
-          @drag-end="onDragEnd"
-        />
-
-        <div class="flex items-center gap-2">
-          <div class="flex flex-1 rounded-sm overflow-hidden ring ring-default">
-            <UTooltip v-for="shade in SHADES" :key="shade" :text="`${shade} · ${shades[shade]}`">
-              <div class="h-5 flex-1" :style="{ backgroundColor: shades[shade] }" />
-            </UTooltip>
-          </div>
-
-          <UTooltip :text="`White on 500: ${contrast.toFixed(1)}:1`">
-            <UBadge
-              :label="contrast >= 4.5 ? 'AA' : contrast >= 3 ? 'AA18' : 'Low'"
-              :color="contrast >= 4.5 ? 'success' : contrast >= 3 ? 'warning' : 'error'"
-              variant="subtle"
-              size="sm"
-            />
-          </UTooltip>
-        </div>
+    <div class="flex items-center gap-1.5">
+      <USelect
+        v-model="styleOffset"
+        size="sm"
+        color="neutral"
+        icon="i-lucide-sparkles"
+        :items="styleOffsetItems"
+        class="flex-1 ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
+        :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+        @update:model-value="applyStyleOffset($event as string)"
+      />
 
+      <UTooltip v-if="active" text="Remove custom palette">
         <UButton
-          v-if="!active"
-          label="Use this palette"
-          icon="i-lucide-check"
-          color="neutral"
-          variant="soft"
-          size="xs"
-          block
-          class="text-[11px]"
-          @click="apply"
-        />
-        <UButton
-          v-else
-          label="Remove custom palette"
           icon="i-lucide-trash-2"
           color="neutral"
           variant="soft"
-          size="xs"
-          block
-          class="text-[11px]"
+          size="sm"
+          aria-label="Remove custom palette"
           @click="remove"
         />
-      </div>
-    </template>
-  </UCollapsible>
+      </UTooltip>
+    </div>
+  </div>
 </template>
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 42af3699fc..cf9e97cac1 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -28,7 +28,7 @@
 
 export type ShadowStyle = 'none' | 'soft' | 'hard'
 export type BorderStyle = 'default' | 'bold' | 'frame'
-export type BorderColor = 'default' | 'inverted' | 'black' | 'white' | 'primary' | 'neutral'
+export type BorderColor = 'default' | 'inverted' | 'black' | 'white' | 'primary' | 'neutral' | 'shade'
 export type ShadowColor = 'default' | 'black' | 'inverted' | 'primary' | 'shade'
 
 export interface StyleOptions {
@@ -38,11 +38,25 @@ export interface StyleOptions {
   shadowColor?: ShadowColor
   /** Neutral ramp shade per mode, used when `shadowColor` is 'shade' */
   shadowShade?: { light: number, dark: number }
+  /** Neutral ramp shade per mode, used when `borderColor` is 'shade' */
+  borderShade?: { light: number, dark: number }
+  /**
+   * App background as a neutral ramp shade per mode. Strictly a semantic
+   * token shorthand (--ui-bg), parked on the style axis until the studio
+   * grows a full tokens editor.
+   */
+  bgShade?: { light: number, dark: number }
 }
 
 export const SHADOW_STYLES: ShadowStyle[] = ['none', 'soft', 'hard']
 export const BORDER_STYLES: BorderStyle[] = ['default', 'bold', 'frame']
-export const BORDER_COLORS: BorderColor[] = ['default', 'inverted', 'black', 'white', 'primary', 'neutral']
+export const BORDER_COLORS: BorderColor[] = ['default', 'inverted', 'black', 'white', 'primary', 'neutral', 'shade']
+
+/** Borders default opposite to the surface: dark ink on light, pale on dark. */
+export const BORDER_SHADE_DEFAULTS = { light: 900, dark: 200 }
+
+/** The docs baseline background shades. */
+export const BG_SHADE_DEFAULTS = { light: 50, dark: 900 }
 export const SHADOW_COLORS: ShadowColor[] = ['default', 'black', 'inverted', 'primary', 'shade']
 
 export const SHADOW_SHADE_DEFAULTS = { light: 950, dark: 800 }
@@ -155,7 +169,7 @@ const FRAME_COLOR_FRAGMENTS: Fragments = {
 }
 
 /** Per-mode values behind the two color variables, per palette choice. */
-const FRAME_COLOR_VALUES: Record<Exclude<BorderColor, 'default'>, { light: string, dark: string }> = {
+const FRAME_COLOR_VALUES: Record<Exclude<BorderColor, 'default' | 'shade'>, { light: string, dark: string }> = {
   inverted: { light: 'var(--ui-color-neutral-950)', dark: 'white' },
   black: { light: 'black', dark: 'black' },
   white: { light: 'white', dark: 'white' },
@@ -169,7 +183,7 @@ const SHADOW_COLOR_VALUES: Record<Exclude<ShadowColor, 'default' | 'shade'>, { l
   primary: { light: 'var(--ui-color-primary-500)', dark: 'var(--ui-color-primary-400)' }
 }
 
-export const STYLE_TOKEN_KEYS = ['--ui-frame-color', '--ui-shadow-color']
+export const STYLE_TOKEN_KEYS = ['--ui-frame-color', '--ui-shadow-color', '--ui-bg']
 
 /**
  * The CSS-variable side of a style: per-mode values for the frame and
@@ -180,11 +194,20 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
   const light: Record<string, string> = {}
   const dark: Record<string, string> = {}
 
-  if (style.borderColor && style.borderColor !== 'default') {
+  if (style.borderColor === 'shade') {
+    const shade = { ...BORDER_SHADE_DEFAULTS, ...style.borderShade }
+    light['--ui-frame-color'] = `var(--ui-color-neutral-${shade.light})`
+    dark['--ui-frame-color'] = `var(--ui-color-neutral-${shade.dark})`
+  } else if (style.borderColor && style.borderColor !== 'default') {
     const value = FRAME_COLOR_VALUES[style.borderColor]
     light['--ui-frame-color'] = value.light
     dark['--ui-frame-color'] = value.dark
   }
+  if (style.bgShade) {
+    light['--ui-bg'] = `var(--ui-color-neutral-${style.bgShade.light})`
+    dark['--ui-bg'] = `var(--ui-color-neutral-${style.bgShade.dark})`
+  }
+
   if (style.shadowColor === 'shade') {
     // Per-mode neutral ramp shade — a graded gray shadow that darkens or
     // lightens independently of the scheme it sits on.
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index acc248cd2a..d4cf98a127 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -284,6 +284,16 @@ describe('style colors', () => {
     expect(styleTokens({ shadowColor: 'shade' }).dark['--ui-shadow-color']).toBe('var(--ui-color-neutral-800)')
   })
 
+  it('styleTokens supports per-mode border shades', async () => {
+    const { styleTokens } = await import('../../docs/app/utils/theme-engine')
+
+    expect(styleTokens({ borderColor: 'shade', borderShade: { light: 700, dark: 100 } })).toEqual({
+      light: { '--ui-frame-color': 'var(--ui-color-neutral-700)' },
+      dark: { '--ui-frame-color': 'var(--ui-color-neutral-100)' }
+    })
+    expect(styleTokens({ borderColor: 'shade' }).dark['--ui-frame-color']).toBe('var(--ui-color-neutral-200)')
+  })
+
   it('generateCSS emits style color variables', async () => {
     const { generateCSS } = await import('../../docs/app/utils/theme-engine')
     const css = generateCSS({ version: 1, style: { shadow: 'hard', border: 'frame', borderColor: 'inverted' } })

From accd31433c91b9b475308263091c79bf48ad30ae Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 03:09:28 +0200
Subject: [PATCH 018/185] feat(docs): collapsible layout + presets hydrate the
 settings panel

Page layout: the toolbar spans full width with the sidebar toggle next
to the title (badge now 'Concept'), and the settings panel sits under
the toolbar row. Every sidebar section collapses via its header.

Fixes the preset regression: setStyle only removes the tokens the
previous style emitted instead of blanket-clearing shared variable
names, so a preset's --ui-bg survives style clicks; and applyDoc now
derives bgShade from preset tokens where they are neutral-ramp refs, so
the background sliders reflect the preset instead of stale defaults.
Also restores the neutral palette editor's lost open binding.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 410 ++++++++++--------
 docs/app/composables/useThemeStudio.ts        |  41 +-
 docs/app/pages/theme.vue                      | 118 ++---
 3 files changed, 332 insertions(+), 237 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 3f163942f4..2318037f27 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -19,6 +19,8 @@ const {
 
 const { selectPalette, isCustomPalette, style, setStyle } = useThemeStudio()
 
+const openSections = reactive<Record<string, boolean>>({ primary: true, neutral: true, radius: true, shadows: true, borders: true, background: true, font: true, icons: true, mode: true })
+
 const primarySwatch = computed(() => {
   if (blackAsPrimary.value) {
     return { label: 'Black', color: undefined }
@@ -114,8 +116,12 @@ const shadowColor = computed({
 <template>
   <div class="flex flex-col gap-5">
     <fieldset>
-      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
-        Primary
+      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.primary = !openSections.primary">
+          Primary
+
+          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.primary }" />
+        </button>
 
         <UButton
           to="/docs/getting-started/theme/css-variables#colors"
@@ -133,63 +139,69 @@ const shadowColor = computed({
           color="neutral"
           :variant="primaryEditorOpen ? 'soft' : 'ghost'"
           size="xs"
-          class="ms-auto -my-1 text-[11px]"
+          class="-my-1 text-[11px]"
           :ui="{ leadingIcon: isCustomPalette('primary') ? 'text-primary size-3' : 'size-3' }"
           @click="primaryEditorOpen = !primaryEditorOpen"
         />
       </legend>
 
-      <UPopover :content="{ side: 'bottom', align: 'start' }">
-        <UButton
-          color="neutral"
-          variant="outline"
-          size="sm"
-          block
-          trailing-icon="i-lucide-chevron-down"
-          class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
-          :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-        >
-          <template #leading>
-            <span
-              class="inline-block size-3 rounded-full"
-              :class="{ 'bg-black dark:bg-white': blackAsPrimary }"
-              :style="primarySwatch.color ? { backgroundColor: primarySwatch.color } : undefined"
-            />
+      <div v-show="openSections.primary">
+        <UPopover :content="{ side: 'bottom', align: 'start' }">
+          <UButton
+            color="neutral"
+            variant="outline"
+            size="sm"
+            block
+            trailing-icon="i-lucide-chevron-down"
+            class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
+            :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+          >
+            <template #leading>
+              <span
+                class="inline-block size-3 rounded-full"
+                :class="{ 'bg-black dark:bg-white': blackAsPrimary }"
+                :style="primarySwatch.color ? { backgroundColor: primarySwatch.color } : undefined"
+              />
+            </template>
+
+            {{ primarySwatch.label }}
+          </UButton>
+
+          <template #content>
+            <div class="grid grid-cols-3 gap-1 w-72 p-2">
+              <ThemePickerButton
+                label="Black"
+                :selected="blackAsPrimary"
+                @click="setBlackAsPrimary(true)"
+              >
+                <template #leading>
+                  <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
+                </template>
+              </ThemePickerButton>
+
+              <ThemePickerButton
+                v-for="color in primaryColors"
+                :key="color"
+                :label="color"
+                :chip="color"
+                :selected="!blackAsPrimary && primary === color"
+                @click="selectPalette('primary', color)"
+              />
+            </div>
           </template>
+        </UPopover>
 
-          {{ primarySwatch.label }}
-        </UButton>
-
-        <template #content>
-          <div class="grid grid-cols-3 gap-1 w-72 p-2">
-            <ThemePickerButton
-              label="Black"
-              :selected="blackAsPrimary"
-              @click="setBlackAsPrimary(true)"
-            >
-              <template #leading>
-                <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
-              </template>
-            </ThemePickerButton>
-
-            <ThemePickerButton
-              v-for="color in primaryColors"
-              :key="color"
-              :label="color"
-              :chip="color"
-              :selected="!blackAsPrimary && primary === color"
-              @click="selectPalette('primary', color)"
-            />
-          </div>
-        </template>
-      </UPopover>
-
-      <ThemeStudioPaletteEditor v-model:open="primaryEditorOpen" alias="primary" />
+        <ThemeStudioPaletteEditor v-model:open="primaryEditorOpen" alias="primary" />
+      </div>
     </fieldset>
 
     <fieldset>
-      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
-        Neutral
+      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.neutral = !openSections.neutral">
+          Neutral
+
+          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.neutral }" />
+        </button>
 
         <UButton
           to="/docs/getting-started/theme/css-variables#text"
@@ -207,52 +219,58 @@ const shadowColor = computed({
           color="neutral"
           :variant="neutralEditorOpen ? 'soft' : 'ghost'"
           size="xs"
-          class="ms-auto -my-1 text-[11px]"
+          class="-my-1 text-[11px]"
           :ui="{ leadingIcon: isCustomPalette('neutral') ? 'text-primary size-3' : 'size-3' }"
           @click="neutralEditorOpen = !neutralEditorOpen"
         />
       </legend>
 
-      <UPopover :content="{ side: 'bottom', align: 'start' }">
-        <UButton
-          color="neutral"
-          variant="outline"
-          size="sm"
-          block
-          trailing-icon="i-lucide-chevron-down"
-          class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
-          :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-        >
-          <template #leading>
-            <span
-              class="inline-block size-3 rounded-full"
-              :style="{ backgroundColor: neutralSwatch.color }"
-            />
+      <div v-show="openSections.neutral">
+        <UPopover :content="{ side: 'bottom', align: 'start' }">
+          <UButton
+            color="neutral"
+            variant="outline"
+            size="sm"
+            block
+            trailing-icon="i-lucide-chevron-down"
+            class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
+            :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+          >
+            <template #leading>
+              <span
+                class="inline-block size-3 rounded-full"
+                :style="{ backgroundColor: neutralSwatch.color }"
+              />
+            </template>
+
+            {{ neutralSwatch.label }}
+          </UButton>
+
+          <template #content>
+            <div class="grid grid-cols-3 gap-1 w-72 p-2">
+              <ThemePickerButton
+                v-for="color in neutralColors"
+                :key="color"
+                :label="color"
+                :chip="color === 'neutral' ? 'old-neutral' : color"
+                :selected="neutral === color"
+                @click="selectPalette('neutral', color)"
+              />
+            </div>
           </template>
+        </UPopover>
 
-          {{ neutralSwatch.label }}
-        </UButton>
-
-        <template #content>
-          <div class="grid grid-cols-3 gap-1 w-72 p-2">
-            <ThemePickerButton
-              v-for="color in neutralColors"
-              :key="color"
-              :label="color"
-              :chip="color === 'neutral' ? 'old-neutral' : color"
-              :selected="neutral === color"
-              @click="selectPalette('neutral', color)"
-            />
-          </div>
-        </template>
-      </UPopover>
-
-      <ThemeStudioPaletteEditor alias="neutral" />
+        <ThemeStudioPaletteEditor v-model:open="neutralEditorOpen" alias="neutral" />
+      </div>
     </fieldset>
 
     <fieldset>
-      <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
-        Radius
+      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.radius = !openSections.radius">
+          Radius
+
+          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.radius }" />
+        </button>
 
         <UButton
           to="/docs/getting-started/theme/css-variables#radius"
@@ -265,7 +283,7 @@ const shadowColor = computed({
         />
       </legend>
 
-      <div class="flex items-center gap-3">
+      <div v-show="openSections.radius" class="flex items-center gap-3">
         <USlider
           v-model="radius"
           :min="0"
@@ -279,97 +297,113 @@ const shadowColor = computed({
     </fieldset>
 
     <fieldset>
-      <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
-        Shadows
+      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.shadows = !openSections.shadows">
+          Shadows
+
+          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.shadows }" />
+        </button>
       </legend>
 
-      <div class="grid grid-cols-3 gap-1">
-        <ThemePickerButton
-          v-for="option in shadowOptions"
-          :key="option.value"
-          :label="option.label"
-          class="justify-center px-0"
-          :selected="(style.shadow || 'none') === option.value"
-          @click="setStyle({ shadow: option.value })"
-        />
-      </div>
+      <div v-show="openSections.shadows">
+        <div class="grid grid-cols-3 gap-1">
+          <ThemePickerButton
+            v-for="option in shadowOptions"
+            :key="option.value"
+            :label="option.label"
+            class="justify-center px-0"
+            :selected="(style.shadow || 'none') === option.value"
+            @click="setStyle({ shadow: option.value })"
+          />
+        </div>
 
-      <div v-if="(style.shadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
-        <USelect
-          v-model="shadowColor"
-          size="sm"
-          color="neutral"
-          icon="i-lucide-paint-bucket"
-          :items="shadowColorItems"
-          class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
-          :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-        />
+        <div v-if="(style.shadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
+          <USelect
+            v-model="shadowColor"
+            size="sm"
+            color="neutral"
+            icon="i-lucide-paint-bucket"
+            :items="shadowColorItems"
+            class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
+            :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+          />
 
-        <template v-if="shadowColor === 'shade'">
-          <div v-for="(slider, modeName) in shadowShades" :key="modeName" class="flex items-center gap-2">
-            <UIcon :name="modeName === 'light' ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3.5 text-muted shrink-0" />
+          <template v-if="shadowColor === 'shade'">
+            <div v-for="(slider, modeName) in shadowShades" :key="modeName" class="flex items-center gap-2">
+              <UIcon :name="modeName === 'light' ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3.5 text-muted shrink-0" />
 
-            <USlider v-model="slider.value" :min="0" :max="10" :step="1" size="sm" />
+              <USlider v-model="slider.value" :min="0" :max="10" :step="1" size="sm" />
 
-            <span
-              class="size-4 shrink-0 rounded-sm ring ring-default"
-              :style="{ backgroundColor: `var(--color-${neutralChip}-${SHADE_STEPS[slider.value]})` }"
-            />
-            <span class="text-[11px] text-dimmed font-mono w-7 text-right shrink-0">{{ SHADE_STEPS[slider.value] }}</span>
-          </div>
-        </template>
+              <span
+                class="size-4 shrink-0 rounded-sm ring ring-default"
+                :style="{ backgroundColor: `var(--color-${neutralChip}-${SHADE_STEPS[slider.value]})` }"
+              />
+              <span class="text-[11px] text-dimmed font-mono w-7 text-right shrink-0">{{ SHADE_STEPS[slider.value] }}</span>
+            </div>
+          </template>
+        </div>
       </div>
     </fieldset>
 
     <fieldset>
-      <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
-        Borders
+      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.borders = !openSections.borders">
+          Borders
+
+          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.borders }" />
+        </button>
       </legend>
 
-      <div class="grid grid-cols-3 gap-1">
-        <ThemePickerButton
-          v-for="option in borderOptions"
-          :key="option.value"
-          :label="option.label"
-          class="justify-center px-0"
-          :selected="(style.border || 'default') === option.value"
-          @click="setStyle({ border: option.value })"
-        />
-      </div>
+      <div v-show="openSections.borders">
+        <div class="grid grid-cols-3 gap-1">
+          <ThemePickerButton
+            v-for="option in borderOptions"
+            :key="option.value"
+            :label="option.label"
+            class="justify-center px-0"
+            :selected="(style.border || 'default') === option.value"
+            @click="setStyle({ border: option.value })"
+          />
+        </div>
 
-      <div class="mt-1.5 flex flex-col gap-2">
-        <USelect
-          v-model="borderColor"
-          size="sm"
-          color="neutral"
-          icon="i-lucide-paint-bucket"
-          :items="borderColorItems"
-          class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
-          :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-        />
+        <div class="mt-1.5 flex flex-col gap-2">
+          <USelect
+            v-model="borderColor"
+            size="sm"
+            color="neutral"
+            icon="i-lucide-paint-bucket"
+            :items="borderColorItems"
+            class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
+            :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+          />
 
-        <template v-if="borderColor === 'shade'">
-          <div v-for="(slider, modeName) in borderShades" :key="modeName" class="flex items-center gap-2">
-            <UIcon :name="modeName === 'light' ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3.5 text-muted shrink-0" />
+          <template v-if="borderColor === 'shade'">
+            <div v-for="(slider, modeName) in borderShades" :key="modeName" class="flex items-center gap-2">
+              <UIcon :name="modeName === 'light' ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3.5 text-muted shrink-0" />
 
-            <USlider v-model="slider.value" :min="0" :max="10" :step="1" size="sm" />
+              <USlider v-model="slider.value" :min="0" :max="10" :step="1" size="sm" />
 
-            <span
-              class="size-4 shrink-0 rounded-sm ring ring-default"
-              :style="{ backgroundColor: `var(--color-${neutralChip}-${SHADE_STEPS[slider.value]})` }"
-            />
-            <span class="text-[11px] text-dimmed font-mono w-7 text-right shrink-0">{{ SHADE_STEPS[slider.value] }}</span>
-          </div>
-        </template>
+              <span
+                class="size-4 shrink-0 rounded-sm ring ring-default"
+                :style="{ backgroundColor: `var(--color-${neutralChip}-${SHADE_STEPS[slider.value]})` }"
+              />
+              <span class="text-[11px] text-dimmed font-mono w-7 text-right shrink-0">{{ SHADE_STEPS[slider.value] }}</span>
+            </div>
+          </template>
+        </div>
       </div>
     </fieldset>
 
     <fieldset>
-      <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
-        Background
+      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.background = !openSections.background">
+          Background
+
+          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.background }" />
+        </button>
       </legend>
 
-      <div class="flex flex-col gap-2">
+      <div v-show="openSections.background" class="flex flex-col gap-2">
         <div v-for="(slider, modeName) in bgShades" :key="modeName" class="flex items-center gap-2">
           <UIcon :name="modeName === 'light' ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3.5 text-muted shrink-0" />
 
@@ -385,8 +419,12 @@ const shadowColor = computed({
     </fieldset>
 
     <fieldset>
-      <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
-        Font
+      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.font = !openSections.font">
+          Font
+
+          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.font }" />
+        </button>
 
         <UButton
           to="/docs/getting-started/integrations/fonts"
@@ -399,20 +437,26 @@ const shadowColor = computed({
         />
       </legend>
 
-      <USelect
-        v-model="font"
-        size="sm"
-        color="neutral"
-        icon="i-lucide-type"
-        :items="fonts"
-        class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
-        :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-      />
+      <div v-show="openSections.font">
+        <USelect
+          v-model="font"
+          size="sm"
+          color="neutral"
+          icon="i-lucide-type"
+          :items="fonts"
+          class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
+          :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+        />
+      </div>
     </fieldset>
 
     <fieldset>
-      <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
-        Icons
+      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.icons = !openSections.icons">
+          Icons
+
+          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.icons }" />
+        </button>
 
         <UButton
           to="/docs/getting-started/integrations/icons"
@@ -425,20 +469,26 @@ const shadowColor = computed({
         />
       </legend>
 
-      <USelect
-        v-model="icon"
-        size="sm"
-        color="neutral"
-        :icon="icons.find(i => i.value === icon)?.icon"
-        :items="icons"
-        class="w-full ring-default rounded-sm hover:bg-elevated/50 capitalize text-xs data-[state=open]:bg-elevated/50"
-        :ui="{ item: 'capitalize text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-      />
+      <div v-show="openSections.icons">
+        <USelect
+          v-model="icon"
+          size="sm"
+          color="neutral"
+          :icon="icons.find(i => i.value === icon)?.icon"
+          :items="icons"
+          class="w-full ring-default rounded-sm hover:bg-elevated/50 capitalize text-xs data-[state=open]:bg-elevated/50"
+          :ui="{ item: 'capitalize text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+        />
+      </div>
     </fieldset>
 
     <fieldset>
-      <legend class="text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1">
-        Color Mode
+      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.mode = !openSections.mode">
+          Color Mode
+
+          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.mode }" />
+        </button>
 
         <UButton
           to="/docs/getting-started/integrations/color-mode"
@@ -451,7 +501,7 @@ const shadowColor = computed({
         />
       </legend>
 
-      <div class="grid grid-cols-3 gap-1">
+      <div v-show="openSections.mode" class="grid grid-cols-3 gap-1">
         <ThemePickerButton
           v-for="m in modes"
           :key="m.label"
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 035c6bd9c6..fc4a214b35 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,6 +1,6 @@
 import { useLocalStorage } from '@vueuse/core'
 import colors from 'tailwindcss/colors'
-import { presets, docToSettings, isDefaultTheme, generatePalette, fitPalette, parseCssColor, styleComponents, styleTokens, DEFAULT_COLORS, SHADES, STYLE_COMPONENT_KEYS, STYLE_TOKEN_KEYS } from '../utils/theme-engine'
+import { presets, docToSettings, isDefaultTheme, generatePalette, fitPalette, parseCssColor, styleComponents, styleTokens, DEFAULT_COLORS, SHADES, STYLE_COMPONENT_KEYS, BG_SHADE_DEFAULTS } from '../utils/theme-engine'
 import type { ThemeDoc, ThemePreset, PaletteCurveParams, Shade, StyleOptions } from '../utils/theme-engine'
 
 export function useThemeStudio() {
@@ -17,15 +17,20 @@ export function useThemeStudio() {
   const style = useLocalStorage<StyleOptions>('nuxt-ui-style', {})
 
   function setStyle(options: StyleOptions) {
+    const previous = styleTokens(style.value)
     style.value = { ...style.value, ...options }
 
-    // Clear the previous bundle and color variables first — defu merging
-    // can't unset classes, and a stale --ui-frame-color would leak.
+    // Clear the previous class bundle (defu merging can't unset classes) and
+    // only the tokens the PREVIOUS style emitted — never preset/doc-owned
+    // values like a preset's --ui-bg, which share the same variable names.
     theme.resetComponentOverrides(STYLE_COMPONENT_KEYS)
-    theme.removeCSSVariables({ light: STYLE_TOKEN_KEYS, dark: STYLE_TOKEN_KEYS })
+    const tokens = styleTokens(style.value)
+    theme.removeCSSVariables({
+      light: Object.keys(previous.light).filter(key => !(key in tokens.light)),
+      dark: Object.keys(previous.dark).filter(key => !(key in tokens.dark))
+    })
 
     const components = styleComponents(style.value)
-    const tokens = styleTokens(style.value)
     const settings: Record<string, any> = {}
     if (Object.keys(components).length) settings.ui = components
     if (Object.keys(tokens.light).length || Object.keys(tokens.dark).length) settings.cssVariables = tokens
@@ -138,11 +143,35 @@ export function useThemeStudio() {
     paletteParams.value = rest
   }
 
+  /**
+   * Reflect a doc's token overrides back into the sidebar's shade settings
+   * where they are representable, so controls show the preset's reality
+   * instead of stale defaults. Only neutral-ramp refs map onto sliders;
+   * anything else (white/black literals, non-neutral refs) stays token-only.
+   */
+  function deriveStyle(doc: ThemeDoc): StyleOptions {
+    const derived: StyleOptions = { ...(doc.style || {}) }
+
+    if (!derived.bgShade) {
+      const parse = (value?: string) => value?.match(/^var\(--ui-color-neutral-(\d+)\)$/)?.[1]
+      const light = parse(doc.tokens?.light?.['--ui-bg'])
+      const dark = parse(doc.tokens?.dark?.['--ui-bg'])
+      if (light || dark) {
+        derived.bgShade = {
+          light: light ? Number(light) : BG_SHADE_DEFAULTS.light,
+          dark: dark ? Number(dark) : BG_SHADE_DEFAULTS.dark
+        }
+      }
+    }
+
+    return derived
+  }
+
   /** Replace the current theme with a document: reset, then apply overrides. */
   function applyDoc(doc: ThemeDoc) {
     theme.resetTheme()
     paletteParams.value = {}
-    style.value = doc.style || {}
+    style.value = deriveStyle(doc)
 
     if (!isDefaultTheme(doc)) {
       theme.applyThemeSettings(docToSettings(doc))
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 7c053e324f..f8edea8097 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -20,6 +20,8 @@ if (import.meta.server) {
 
 const { presets, activePreset, applyPreset, shuffle, reset } = useThemeStudio()
 
+const sidebarOpen = ref(true)
+
 const presetItems = computed(() => presets.map(preset => ({
   label: preset.name,
   icon: preset.icon,
@@ -30,58 +32,72 @@ const presetItems = computed(() => presets.map(preset => ({
 </script>
 
 <template>
-  <main class="flex flex-col lg:flex-row lg:h-[calc(100vh-var(--ui-header-height))]">
-    <aside class="shrink-0 lg:w-80 border-b lg:border-b-0 lg:border-r border-default lg:overflow-y-auto p-4 sm:p-6">
-      <ThemeStudioControls />
-    </aside>
-
-    <div class="flex-1 flex flex-col min-w-0">
-      <div class="flex items-center gap-2 border-b border-default px-4 sm:px-6 py-3">
-        <h1 class="text-sm font-semibold text-highlighted me-2">
-          Theme Studio
-        </h1>
-
-        <UBadge label="v0" variant="subtle" size="sm" />
-
-        <span class="flex-1" />
-
-        <UDropdownMenu :items="presetItems" :content="{ align: 'end' }">
-          <UButton
-            label="Presets"
-            icon="i-lucide-layout-grid"
-            trailing-icon="i-lucide-chevron-down"
-            color="neutral"
-            variant="outline"
-            size="sm"
-          />
-        </UDropdownMenu>
-
-        <UTooltip text="Random theme">
-          <UButton
-            label="Shuffle"
-            icon="i-lucide-dices"
-            color="neutral"
-            variant="outline"
-            size="sm"
-            @click="shuffle"
-          />
-        </UTooltip>
-
-        <ThemeStudioExport />
-
-        <UTooltip text="Reset theme">
-          <UButton
-            icon="i-lucide-rotate-ccw"
-            color="neutral"
-            variant="outline"
-            size="sm"
-            aria-label="Reset theme"
-            @click="reset"
-          />
-        </UTooltip>
-      </div>
+  <main class="flex flex-col lg:h-[calc(100vh-var(--ui-header-height))]">
+    <div class="flex items-center gap-2 border-b border-default px-4 sm:px-6 py-3">
+      <UTooltip :text="sidebarOpen ? 'Hide settings' : 'Show settings'">
+        <UButton
+          :icon="sidebarOpen ? 'i-lucide-panel-left-close' : 'i-lucide-panel-left-open'"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          aria-label="Toggle settings panel"
+          @click="sidebarOpen = !sidebarOpen"
+        />
+      </UTooltip>
+
+      <h1 class="text-sm font-semibold text-highlighted me-2">
+        Theme Studio
+      </h1>
+
+      <UBadge label="Concept" variant="subtle" size="sm" />
+
+      <span class="flex-1" />
+
+      <UDropdownMenu :items="presetItems" :content="{ align: 'end' }">
+        <UButton
+          label="Presets"
+          icon="i-lucide-layout-grid"
+          trailing-icon="i-lucide-chevron-down"
+          color="neutral"
+          variant="outline"
+          size="sm"
+        />
+      </UDropdownMenu>
+
+      <UTooltip text="Random theme">
+        <UButton
+          label="Shuffle"
+          icon="i-lucide-dices"
+          color="neutral"
+          variant="outline"
+          size="sm"
+          @click="shuffle"
+        />
+      </UTooltip>
+
+      <ThemeStudioExport />
+
+      <UTooltip text="Reset theme">
+        <UButton
+          icon="i-lucide-rotate-ccw"
+          color="neutral"
+          variant="outline"
+          size="sm"
+          aria-label="Reset theme"
+          @click="reset"
+        />
+      </UTooltip>
+    </div>
+
+    <div class="flex-1 flex flex-col lg:flex-row min-h-0">
+      <aside
+        v-show="sidebarOpen"
+        class="shrink-0 lg:w-80 border-b lg:border-b-0 lg:border-r border-default lg:overflow-y-auto p-4 sm:p-6"
+      >
+        <ThemeStudioControls />
+      </aside>
 
-      <div class="flex-1 lg:overflow-y-auto p-4 sm:p-6">
+      <div class="flex-1 min-w-0 lg:overflow-y-auto p-4 sm:p-6">
         <ThemeStudioBento />
       </div>
     </div>

From c7685090e1fb709d833abd3251ee18ee036a6226 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 03:15:58 +0200
Subject: [PATCH 019/185] feat(docs): semantic token shade sections and candy
 pastel offsets
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Background pattern generalizes into a whitelist-driven tokenShades
map: Inverted, Highlighted, Muted and Dimmed each get their own
collapsible section with per-mode neutral-shade sliders (Background
open by default, the rest collapsed). Presets hydrate all of them via
the same token parser, and the legacy bgShade field folds in for
persisted sessions.

Pastel offset redefined per feedback: compress the lightness range from
both ends (light end down, dark end up) while RAISING chroma — candy
pastels instead of washed-out tints. Vivid/dazzling rebalanced, and the
lightness remap preserves the fitted curve's shape.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 46 +++++++++++++++----
 .../theme-studio/ThemeStudioPaletteEditor.vue | 28 +++++++----
 docs/app/composables/useThemeStudio.ts        | 22 +++++----
 docs/app/utils/theme-engine/styles.ts         | 37 ++++++++++++---
 test/utils/theme-engine.spec.ts               | 13 ++++++
 5 files changed, 114 insertions(+), 32 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 2318037f27..5b173a60d2 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { TOKEN_SHADE_TARGETS } from '../../utils/theme-engine'
+
 const colorMode = useColorMode()
 
 const {
@@ -19,7 +21,7 @@ const {
 
 const { selectPalette, isCustomPalette, style, setStyle } = useThemeStudio()
 
-const openSections = reactive<Record<string, boolean>>({ primary: true, neutral: true, radius: true, shadows: true, borders: true, background: true, font: true, icons: true, mode: true })
+const openSections = reactive<Record<string, boolean>>({ primary: true, neutral: true, radius: true, shadows: true, borders: true, font: true, icons: true, mode: true, bg: true, bginverted: false, texthighlighted: false, textmuted: false, textdimmed: false })
 
 const primarySwatch = computed(() => {
   if (blackAsPrimary.value) {
@@ -92,11 +94,35 @@ const borderShades = {
   dark: shadeSlider('borderShade', { light: 900, dark: 200 }, 'dark')
 }
 
-const bgShades = {
-  light: shadeSlider('bgShade', { light: 50, dark: 900 }, 'light'),
-  dark: shadeSlider('bgShade', { light: 50, dark: 900 }, 'dark')
+// Per-semantic-token shade sliders (Background, Inverted, Highlighted…).
+function tokenShadeSlider(token: string, defaults: { light: number, dark: number }, target: 'light' | 'dark') {
+  return computed({
+    get: () => {
+      const legacy = token === '--ui-bg' ? style.value.bgShade : undefined
+      return SHADE_STEPS.indexOf((style.value.tokenShades?.[token] || legacy || defaults)[target])
+    },
+    set: (index: number) => {
+      const legacy = token === '--ui-bg' ? style.value.bgShade : undefined
+      const current = { ...defaults, ...legacy, ...style.value.tokenShades?.[token] }
+      setStyle({
+        tokenShades: {
+          ...style.value.tokenShades,
+          [token]: { ...current, [target]: SHADE_STEPS[index]! }
+        }
+      })
+    }
+  })
 }
 
+const tokenSections = TOKEN_SHADE_TARGETS.map(target => ({
+  ...target,
+  key: target.token.replace(/^--ui-/, '').replace(/-/g, ''),
+  sliders: {
+    light: tokenShadeSlider(target.token, target.defaults, 'light'),
+    dark: tokenShadeSlider(target.token, target.defaults, 'dark')
+  }
+}))
+
 const neutralChip = computed(() => neutral.value === 'neutral' ? 'old-neutral' : neutral.value)
 
 const primaryEditorOpen = ref(false)
@@ -394,17 +420,17 @@ const shadowColor = computed({
       </div>
     </fieldset>
 
-    <fieldset>
+    <fieldset v-for="section in tokenSections" :key="section.token">
       <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.background = !openSections.background">
-          Background
+        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections[section.key] = !openSections[section.key]">
+          {{ section.label }}
 
-          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.background }" />
+          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections[section.key] }" />
         </button>
       </legend>
 
-      <div v-show="openSections.background" class="flex flex-col gap-2">
-        <div v-for="(slider, modeName) in bgShades" :key="modeName" class="flex items-center gap-2">
+      <div v-show="openSections[section.key]" class="flex flex-col gap-2">
+        <div v-for="(slider, modeName) in section.sliders" :key="modeName" class="flex items-center gap-2">
           <UIcon :name="modeName === 'light' ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3.5 text-muted shrink-0" />
 
           <USlider v-model="slider.value" :min="0" :max="10" :step="1" size="sm" />
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index c8ef8f0798..4dfabb5837 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -149,22 +149,34 @@ function scaleChroma(curve: PaletteCurveParams['chroma'], factor: number) {
   curve.p2y *= factor
 }
 
+/** Linearly remap a lightness curve onto new endpoints, preserving its shape. */
+function remapLightness(curve: PaletteCurveParams['lightness'], newY0: number, newY1: number) {
+  const oldY0 = curve.y0
+  const oldY1 = curve.y1
+  const span = oldY0 - oldY1 || 1e-6
+  const map = (value: number) => newY1 + ((value - oldY1) / span) * (newY0 - newY1)
+  curve.p1y = map(curve.p1y)
+  curve.p2y = map(curve.p2y)
+  curve.y0 = newY0
+  curve.y1 = newY1
+}
+
 /** Apply a taste offset ON TOP of the fitted base (idempotent, not cumulative). */
 function applyStyleOffset(name: string) {
   const next = structuredClone(seedBase)
 
   if (name === 'pastel') {
-    scaleChroma(next.chroma, 0.45)
-    next.lightness.y0 = Math.max(next.lightness.y0, 0.985)
-    next.lightness.y1 = Math.max(next.lightness.y1, 0.32)
-    next.lightness.p1y = Math.min(next.lightness.p1y * 1.08, 1.1)
+    // Candy pastels: compress the lightness range from BOTH ends (nothing
+    // near-white, nothing dark) and push chroma UP so the softness stays
+    // colorful — the gamut clamp keeps the very light stops in check.
+    remapLightness(next.lightness, Math.min(next.lightness.y0, 0.945), Math.max(next.lightness.y1, 0.52))
+    scaleChroma(next.chroma, 1.35)
   } else if (name === 'muted') {
-    scaleChroma(next.chroma, 0.6)
+    scaleChroma(next.chroma, 0.55)
   } else if (name === 'vivid') {
-    scaleChroma(next.chroma, 1.35)
+    scaleChroma(next.chroma, 1.45)
   } else if (name === 'dazzling') {
-    scaleChroma(next.chroma, 1.9)
-    next.lightness.p2y = next.lightness.p2y * 0.96
+    scaleChroma(next.chroma, 2)
   }
 
   // Not seed(): this IS a user edit, the watcher should live-apply it.
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index fc4a214b35..f97b783185 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,6 +1,6 @@
 import { useLocalStorage } from '@vueuse/core'
 import colors from 'tailwindcss/colors'
-import { presets, docToSettings, isDefaultTheme, generatePalette, fitPalette, parseCssColor, styleComponents, styleTokens, DEFAULT_COLORS, SHADES, STYLE_COMPONENT_KEYS, BG_SHADE_DEFAULTS } from '../utils/theme-engine'
+import { presets, docToSettings, isDefaultTheme, generatePalette, fitPalette, parseCssColor, styleComponents, styleTokens, DEFAULT_COLORS, SHADES, STYLE_COMPONENT_KEYS, TOKEN_SHADE_TARGETS } from '../utils/theme-engine'
 import type { ThemeDoc, ThemePreset, PaletteCurveParams, Shade, StyleOptions } from '../utils/theme-engine'
 
 export function useThemeStudio() {
@@ -152,14 +152,20 @@ export function useThemeStudio() {
   function deriveStyle(doc: ThemeDoc): StyleOptions {
     const derived: StyleOptions = { ...(doc.style || {}) }
 
-    if (!derived.bgShade) {
-      const parse = (value?: string) => value?.match(/^var\(--ui-color-neutral-(\d+)\)$/)?.[1]
-      const light = parse(doc.tokens?.light?.['--ui-bg'])
-      const dark = parse(doc.tokens?.dark?.['--ui-bg'])
+    const parse = (value?: string) => value?.match(/^var\(--ui-color-neutral-(\d+)\)$/)?.[1]
+
+    for (const target of TOKEN_SHADE_TARGETS) {
+      if (derived.tokenShades?.[target.token]) continue
+
+      const light = parse(doc.tokens?.light?.[target.token])
+      const dark = parse(doc.tokens?.dark?.[target.token])
       if (light || dark) {
-        derived.bgShade = {
-          light: light ? Number(light) : BG_SHADE_DEFAULTS.light,
-          dark: dark ? Number(dark) : BG_SHADE_DEFAULTS.dark
+        derived.tokenShades = {
+          ...derived.tokenShades,
+          [target.token]: {
+            light: light ? Number(light) : target.defaults.light,
+            dark: dark ? Number(dark) : target.defaults.dark
+          }
         }
       }
     }
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index cf9e97cac1..7d0dac8f3c 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -41,11 +41,17 @@ export interface StyleOptions {
   /** Neutral ramp shade per mode, used when `borderColor` is 'shade' */
   borderShade?: { light: number, dark: number }
   /**
-   * App background as a neutral ramp shade per mode. Strictly a semantic
-   * token shorthand (--ui-bg), parked on the style axis until the studio
-   * grows a full tokens editor.
+   * App background as a neutral ramp shade per mode.
+   * @deprecated superseded by `tokenShades['--ui-bg']`; still read for
+   * persisted state from older sessions.
    */
   bgShade?: { light: number, dark: number }
+  /**
+   * Semantic token → neutral ramp shade per mode. Strictly a token
+   * shorthand parked on the style axis until the studio grows a full
+   * tokens editor. Keys are whitelisted in TOKEN_SHADE_TARGETS.
+   */
+  tokenShades?: Record<string, { light: number, dark: number }>
 }
 
 export const SHADOW_STYLES: ShadowStyle[] = ['none', 'soft', 'hard']
@@ -57,6 +63,18 @@ export const BORDER_SHADE_DEFAULTS = { light: 900, dark: 200 }
 
 /** The docs baseline background shades. */
 export const BG_SHADE_DEFAULTS = { light: 50, dark: 900 }
+
+/**
+ * Semantic tokens the studio exposes as per-mode shade sliders, with the
+ * library/docs default shades. 'white' library values map to shade 50.
+ */
+export const TOKEN_SHADE_TARGETS: Array<{ token: string, label: string, defaults: { light: number, dark: number } }> = [
+  { token: '--ui-bg', label: 'Background', defaults: BG_SHADE_DEFAULTS },
+  { token: '--ui-bg-inverted', label: 'Inverted', defaults: { light: 900, dark: 50 } },
+  { token: '--ui-text-highlighted', label: 'Highlighted', defaults: { light: 900, dark: 50 } },
+  { token: '--ui-text-muted', label: 'Muted', defaults: { light: 500, dark: 400 } },
+  { token: '--ui-text-dimmed', label: 'Dimmed', defaults: { light: 400, dark: 500 } }
+]
 export const SHADOW_COLORS: ShadowColor[] = ['default', 'black', 'inverted', 'primary', 'shade']
 
 export const SHADOW_SHADE_DEFAULTS = { light: 950, dark: 800 }
@@ -203,9 +221,16 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
     light['--ui-frame-color'] = value.light
     dark['--ui-frame-color'] = value.dark
   }
-  if (style.bgShade) {
-    light['--ui-bg'] = `var(--ui-color-neutral-${style.bgShade.light})`
-    dark['--ui-bg'] = `var(--ui-color-neutral-${style.bgShade.dark})`
+  // Legacy single-purpose field folds into the generic map.
+  const tokenShades = {
+    ...(style.bgShade ? { '--ui-bg': style.bgShade } : {}),
+    ...style.tokenShades
+  }
+  for (const [token, shade] of Object.entries(tokenShades)) {
+    if (TOKEN_SHADE_TARGETS.some(target => target.token === token)) {
+      light[token] = `var(--ui-color-neutral-${shade.light})`
+      dark[token] = `var(--ui-color-neutral-${shade.dark})`
+    }
   }
 
   if (style.shadowColor === 'shade') {
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index d4cf98a127..1a37af0aa5 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -284,6 +284,19 @@ describe('style colors', () => {
     expect(styleTokens({ shadowColor: 'shade' }).dark['--ui-shadow-color']).toBe('var(--ui-color-neutral-800)')
   })
 
+  it('styleTokens maps token shades and folds legacy bgShade', async () => {
+    const { styleTokens } = await import('../../docs/app/utils/theme-engine')
+
+    expect(styleTokens({ tokenShades: { '--ui-text-muted': { light: 600, dark: 300 } } })).toEqual({
+      light: { '--ui-text-muted': 'var(--ui-color-neutral-600)' },
+      dark: { '--ui-text-muted': 'var(--ui-color-neutral-300)' }
+    })
+    // legacy field still applies, explicit map wins over it
+    expect(styleTokens({ bgShade: { light: 100, dark: 800 } }).light['--ui-bg']).toBe('var(--ui-color-neutral-100)')
+    // non-whitelisted tokens are ignored
+    expect(styleTokens({ tokenShades: { '--ui-evil': { light: 50, dark: 50 } } })).toEqual({ light: {}, dark: {} })
+  })
+
   it('styleTokens supports per-mode border shades', async () => {
     const { styleTokens } = await import('../../docs/app/utils/theme-engine')
 

From 8deeb3a3543bfcd0f59d958890c0e533d05cd7f6 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 03:22:41 +0200
Subject: [PATCH 020/185] docs: mike takes the content tile

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/components/theme-studio/ThemeStudioBento.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioBento.vue b/docs/app/components/theme-studio/ThemeStudioBento.vue
index 61296ba35f..4940c144ad 100644
--- a/docs/app/components/theme-studio/ThemeStudioBento.vue
+++ b/docs/app/components/theme-studio/ThemeStudioBento.vue
@@ -231,14 +231,14 @@ function showToast() {
 
       <div class="flex items-center gap-3">
         <UChip inset color="success">
-          <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
+          <UAvatar src="https://avatars.githubusercontent.com/u/22576486" alt="Mike Newbon" />
         </UChip>
         <div class="text-sm">
           <p class="font-medium text-highlighted">
-            Benjamin Canac
+            Mike Newbon
           </p>
           <p class="text-muted">
-            benjamincanac
+            mikenewbon
           </p>
         </div>
         <UButton label="Follow" size="xs" color="neutral" variant="subtle" class="ms-auto" />

From 9ef31ed711bb0524e09544e362c087fb4524a6e3 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 03:43:23 +0200
Subject: [PATCH 021/185] refactor(docs): adversarial review fixes across the
 theme studio
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Correctness:
- Style class bundles move to their own channel (nuxt-ui-style-ui) and
  compose with preset/AI overrides via class-concatenating mergeUi —
  restyling can no longer destroy a preset's or the AI's component
  overrides, and doc components + style expansion now merge identically
  in live apply and exports (spread was dropping one side).
- resetTheme() clears ALL studio state (style prefs, style bundle,
  palette params/prev, active preset) so the popover and chat reset
  buttons no longer leave orphaned styles that resurrect on the next
  click or leak invisible bundles into exports.
- tokenShades are per-mode optional: hydrating a dark-only preset token
  no longer invents a light override that leaks into exports untouched.
- currentDoc references palettes by the alias's current value, so a
  custom ramp shadowing a default name ('green') still exports.
- applyThemeSettings guards the neutral alias against the SANITIZED
  palette set (a rejected palette could previously still be selected,
  bricking every neutral token), and takes a track option so slider
  drags stop emitting ~16 analytics events per second.
- Removing a custom palette restores the palette that preceded it
  instead of the hardcoded default; neutral remaps skip tokens the
  shade sliders own (no more two-writer flip-flops on --ui-bg).
- Palette editor: style offset resets to Fitted on reseed, watchIgnorable
  scopes seed suppression to its own writes, self-applies no longer
  round-trip through the echo watcher; theme-color meta follows the
  neutral-50 baseline in light mode.

Perf: shade-only style edits skip the 7-component teardown/re-merge.

Cleanup: shared ThemeStudioShadeSlider component, SHADES/defaults single
sources, shared parseUiColorRef, token-keyed sections, dead exports and
never-shipped legacy paths (bgShade, anchor/vibrance) deleted, FOUC
plugin restores the style bundle with the same merge as the live path.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioBento.vue         |  10 +-
 .../theme-studio/ThemeStudioControls.vue      | 104 +++++++--------
 .../theme-studio/ThemeStudioPaletteEditor.vue |  45 ++++---
 .../theme-studio/ThemeStudioShadeSlider.vue   |  26 ++++
 docs/app/composables/useTheme.ts              |  90 +++++++++----
 docs/app/composables/useThemeStudio.ts        | 126 +++++++++++++-----
 docs/app/plugins/theme.ts                     |  10 +-
 docs/app/utils/theme-engine/export.ts         |  22 ++-
 docs/app/utils/theme-engine/resolve.ts        |   6 +
 docs/app/utils/theme-engine/styles.ts         |  87 ++++++++----
 test/utils/theme-engine.spec.ts               |  30 ++++-
 11 files changed, 368 insertions(+), 188 deletions(-)
 create mode 100644 docs/app/components/theme-studio/ThemeStudioShadeSlider.vue

diff --git a/docs/app/components/theme-studio/ThemeStudioBento.vue b/docs/app/components/theme-studio/ThemeStudioBento.vue
index 4940c144ad..2324ff7153 100644
--- a/docs/app/components/theme-studio/ThemeStudioBento.vue
+++ b/docs/app/components/theme-studio/ThemeStudioBento.vue
@@ -241,7 +241,15 @@ function showToast() {
             mikenewbon
           </p>
         </div>
-        <UButton label="Follow" size="xs" color="neutral" variant="subtle" class="ms-auto" />
+        <UButton
+          label="Follow"
+          to="https://github.com/mikenewbon"
+          target="_blank"
+          size="xs"
+          color="neutral"
+          variant="subtle"
+          class="ms-auto"
+        />
       </div>
 
       <USeparator />
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 5b173a60d2..871fd6c97a 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TOKEN_SHADE_TARGETS } from '../../utils/theme-engine'
+import { TOKEN_SHADE_TARGETS, SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS } from '../../utils/theme-engine'
 
 const colorMode = useColorMode()
 
@@ -21,7 +21,18 @@ const {
 
 const { selectPalette, isCustomPalette, style, setStyle } = useThemeStudio()
 
-const openSections = reactive<Record<string, boolean>>({ primary: true, neutral: true, radius: true, shadows: true, borders: true, font: true, icons: true, mode: true, bg: true, bginverted: false, texthighlighted: false, textmuted: false, textdimmed: false })
+const openSections = reactive<Record<string, boolean>>({
+  primary: true,
+  neutral: true,
+  radius: true,
+  shadows: true,
+  borders: true,
+  font: true,
+  icons: true,
+  mode: true,
+  // token sections keyed by token name; only the background starts open
+  ...Object.fromEntries(TOKEN_SHADE_TARGETS.map((target, index) => [target.token, index === 0]))
+})
 
 const primarySwatch = computed(() => {
   if (blackAsPrimary.value) {
@@ -71,43 +82,41 @@ const shadowColorItems = [
   { label: 'Neutral shade…', value: 'shade' }
 ]
 
-const SHADE_STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
-
-// Slider position (0–10) ↔ neutral ramp shade, per mode and style field.
-function shadeSlider(field: 'shadowShade' | 'borderShade' | 'bgShade', defaults: { light: number, dark: number }, target: 'light' | 'dark') {
+// Slider position ↔ SHADES index, per mode. shadow/border shades write both
+// modes on first touch (explicit 'shade' mode choice); token shades write
+// ONLY the touched mode so an untouched mode never becomes an override.
+function shadeSlider(field: 'shadowShade' | 'borderShade', defaults: { light: number, dark: number }, target: 'light' | 'dark') {
   return computed({
-    get: () => SHADE_STEPS.indexOf((style.value[field] || defaults)[target]),
+    get: () => SHADES.indexOf((style.value[field] || defaults)[target] as typeof SHADES[number]),
     set: (index: number) => {
       const current = { ...defaults, ...style.value[field] }
-      setStyle({ [field]: { ...current, [target]: SHADE_STEPS[index]! } })
+      setStyle({ [field]: { ...current, [target]: SHADES[index]! } })
     }
   })
 }
 
 const shadowShades = {
-  light: shadeSlider('shadowShade', { light: 950, dark: 800 }, 'light'),
-  dark: shadeSlider('shadowShade', { light: 950, dark: 800 }, 'dark')
+  light: shadeSlider('shadowShade', SHADOW_SHADE_DEFAULTS, 'light'),
+  dark: shadeSlider('shadowShade', SHADOW_SHADE_DEFAULTS, 'dark')
 }
 
 const borderShades = {
-  light: shadeSlider('borderShade', { light: 900, dark: 200 }, 'light'),
-  dark: shadeSlider('borderShade', { light: 900, dark: 200 }, 'dark')
+  light: shadeSlider('borderShade', BORDER_SHADE_DEFAULTS, 'light'),
+  dark: shadeSlider('borderShade', BORDER_SHADE_DEFAULTS, 'dark')
 }
 
 // Per-semantic-token shade sliders (Background, Inverted, Highlighted…).
 function tokenShadeSlider(token: string, defaults: { light: number, dark: number }, target: 'light' | 'dark') {
   return computed({
     get: () => {
-      const legacy = token === '--ui-bg' ? style.value.bgShade : undefined
-      return SHADE_STEPS.indexOf((style.value.tokenShades?.[token] || legacy || defaults)[target])
+      const value = style.value.tokenShades?.[token]?.[target] ?? defaults[target]
+      return SHADES.indexOf(value as typeof SHADES[number])
     },
     set: (index: number) => {
-      const legacy = token === '--ui-bg' ? style.value.bgShade : undefined
-      const current = { ...defaults, ...legacy, ...style.value.tokenShades?.[token] }
       setStyle({
         tokenShades: {
           ...style.value.tokenShades,
-          [token]: { ...current, [target]: SHADE_STEPS[index]! }
+          [token]: { ...style.value.tokenShades?.[token], [target]: SHADES[index]! }
         }
       })
     }
@@ -116,7 +125,6 @@ function tokenShadeSlider(token: string, defaults: { light: number, dark: number
 
 const tokenSections = TOKEN_SHADE_TARGETS.map(target => ({
   ...target,
-  key: target.token.replace(/^--ui-/, '').replace(/-/g, ''),
   sliders: {
     light: tokenShadeSlider(target.token, target.defaults, 'light'),
     dark: tokenShadeSlider(target.token, target.defaults, 'dark')
@@ -355,17 +363,13 @@ const shadowColor = computed({
           />
 
           <template v-if="shadowColor === 'shade'">
-            <div v-for="(slider, modeName) in shadowShades" :key="modeName" class="flex items-center gap-2">
-              <UIcon :name="modeName === 'light' ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3.5 text-muted shrink-0" />
-
-              <USlider v-model="slider.value" :min="0" :max="10" :step="1" size="sm" />
-
-              <span
-                class="size-4 shrink-0 rounded-sm ring ring-default"
-                :style="{ backgroundColor: `var(--color-${neutralChip}-${SHADE_STEPS[slider.value]})` }"
-              />
-              <span class="text-[11px] text-dimmed font-mono w-7 text-right shrink-0">{{ SHADE_STEPS[slider.value] }}</span>
-            </div>
+            <ThemeStudioShadeSlider
+              v-for="(slider, modeName) in shadowShades"
+              :key="modeName"
+              v-model="slider.value"
+              :mode="modeName"
+              :chip="neutralChip"
+            />
           </template>
         </div>
       </div>
@@ -404,17 +408,13 @@ const shadowColor = computed({
           />
 
           <template v-if="borderColor === 'shade'">
-            <div v-for="(slider, modeName) in borderShades" :key="modeName" class="flex items-center gap-2">
-              <UIcon :name="modeName === 'light' ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3.5 text-muted shrink-0" />
-
-              <USlider v-model="slider.value" :min="0" :max="10" :step="1" size="sm" />
-
-              <span
-                class="size-4 shrink-0 rounded-sm ring ring-default"
-                :style="{ backgroundColor: `var(--color-${neutralChip}-${SHADE_STEPS[slider.value]})` }"
-              />
-              <span class="text-[11px] text-dimmed font-mono w-7 text-right shrink-0">{{ SHADE_STEPS[slider.value] }}</span>
-            </div>
+            <ThemeStudioShadeSlider
+              v-for="(slider, modeName) in borderShades"
+              :key="modeName"
+              v-model="slider.value"
+              :mode="modeName"
+              :chip="neutralChip"
+            />
           </template>
         </div>
       </div>
@@ -422,25 +422,21 @@ const shadowColor = computed({
 
     <fieldset v-for="section in tokenSections" :key="section.token">
       <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections[section.key] = !openSections[section.key]">
+        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections[section.token] = !openSections[section.token]">
           {{ section.label }}
 
-          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections[section.key] }" />
+          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections[section.token] }" />
         </button>
       </legend>
 
-      <div v-show="openSections[section.key]" class="flex flex-col gap-2">
-        <div v-for="(slider, modeName) in section.sliders" :key="modeName" class="flex items-center gap-2">
-          <UIcon :name="modeName === 'light' ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3.5 text-muted shrink-0" />
-
-          <USlider v-model="slider.value" :min="0" :max="10" :step="1" size="sm" />
-
-          <span
-            class="size-4 shrink-0 rounded-sm ring ring-default"
-            :style="{ backgroundColor: `var(--color-${neutralChip}-${SHADE_STEPS[slider.value]})` }"
-          />
-          <span class="text-[11px] text-dimmed font-mono w-7 text-right shrink-0">{{ SHADE_STEPS[slider.value] }}</span>
-        </div>
+      <div v-show="openSections[section.token]" class="flex flex-col gap-2">
+        <ThemeStudioShadeSlider
+          v-for="(slider, modeName) in section.sliders"
+          :key="modeName"
+          v-model="slider.value"
+          :mode="modeName"
+          :chip="neutralChip"
+        />
       </div>
     </fieldset>
 
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 4dfabb5837..f45d48a6da 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useThrottleFn } from '@vueuse/core'
+import { useThrottleFn, watchIgnorable } from '@vueuse/core'
 import { SHADES, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, generatePalette, fitPalette, contrastRatio } from '../../utils/theme-engine'
 import type { PaletteCurveParams } from '../../utils/theme-engine'
 
@@ -57,33 +57,39 @@ const windows = computed(() => ({
   hue: hueWindow.value
 }))
 
-// Programmatic writes into `params` (seeding, external sync) must not
-// live-apply — only user edits do.
-let suppress = false
+const styleOffset = ref('fitted')
+
 /** Fitted base the style offsets transform from, so they never compound. */
 let seedBase: PaletteCurveParams = structuredClone(toRaw(params))
-function seed(values: PaletteCurveParams) {
-  suppress = true
-  seedBase = structuredClone(toRaw(values))
-  Object.assign(params, structuredClone(toRaw(values)))
-  recenterHueWindow()
-  nextTick(() => {
-    suppress = false
-  })
-}
+
+// Set while OUR throttled apply writes paletteParams, so the echo watcher
+// below can tell self-originated updates from external ones (swatch clicks).
+let applying = false
 
 // Throttled (not debounced) so the theme streams live while dragging a
 // curve — the trailing call catches the release position.
 const throttledApply = useThrottleFn(() => {
+  applying = true
   setPaletteFromCurve(props.alias, structuredClone(toRaw(params)))
+  applying = false
 }, 60, true, true)
 
-watch(params, () => {
-  if (!suppress) {
-    throttledApply()
-  }
+// Programmatic writes into `params` (seeding, external sync) must not
+// live-apply — only user edits do. watchIgnorable scopes the suppression
+// to the seed's own writes instead of a whole tick.
+const { ignoreUpdates } = watchIgnorable(params, () => {
+  throttledApply()
 })
 
+function seed(values: PaletteCurveParams) {
+  seedBase = structuredClone(toRaw(values))
+  styleOffset.value = 'fitted'
+  ignoreUpdates(() => {
+    Object.assign(params, structuredClone(toRaw(values)))
+  })
+  recenterHueWindow()
+}
+
 // While dragging, a global class turns on short color transitions so the
 // page glides between throttle ticks instead of stepping.
 let dragEndTimeout: ReturnType<typeof setTimeout> | undefined
@@ -118,8 +124,9 @@ function seedFromCurrent() {
 }
 
 // Swatch clicks while active refit via the studio — reflect them here.
+// Self-originated writes (our own throttled applies) are skipped outright.
 watch(() => paletteParams.value[props.alias], (value) => {
-  if (value && 'lightness' in value && JSON.stringify(value) !== JSON.stringify(toRaw(params))) {
+  if (!applying && value && 'lightness' in value && JSON.stringify(value) !== JSON.stringify(toRaw(params))) {
     seed(value as PaletteCurveParams)
   }
 })
@@ -132,8 +139,6 @@ watch([() => (appConfig.ui.colors as Record<string, string>)[props.alias], open]
   }
 })
 
-const styleOffset = ref('fitted')
-
 const styleOffsetItems = [
   { label: 'Fitted', value: 'fitted' },
   { label: 'Pastel', value: 'pastel' },
diff --git a/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue b/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue
new file mode 100644
index 0000000000..fc68146398
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { SHADES } from '../../utils/theme-engine'
+
+defineProps<{
+  mode: 'light' | 'dark'
+  /** Palette name whose ramp colors the preview swatch */
+  chip: string
+}>()
+
+/** Slider position: index into SHADES (0 = 50 … 10 = 950) */
+const index = defineModel<number>({ required: true })
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <UIcon :name="mode === 'light' ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3.5 text-muted shrink-0" />
+
+    <USlider v-model="index" :min="0" :max="SHADES.length - 1" :step="1" size="sm" />
+
+    <span
+      class="size-4 shrink-0 rounded-sm ring ring-default"
+      :style="{ backgroundColor: `var(--color-${chip}-${SHADES[index]})` }"
+    />
+    <span class="text-[11px] text-dimmed font-mono w-7 text-right shrink-0">{{ SHADES[index] }}</span>
+  </div>
+</template>
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index cf4f8991bb..5fda6a77ce 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -1,7 +1,7 @@
 import { defu } from 'defu'
 import { useLocalStorage } from '@vueuse/core'
 import { themeIcons, cssVariableDefaults } from '../utils/theme'
-import { generateCSS, generateConfig, DEFAULT_COLORS, THEME_DEFAULTS, LIBRARY_TOKEN_DEFAULTS } from '../utils/theme-engine'
+import { generateCSS, generateConfig, mergeUi, DEFAULT_COLORS, THEME_DEFAULTS, LIBRARY_TOKEN_DEFAULTS } from '../utils/theme-engine'
 import type { ThemeDoc, ThemePalette } from '../utils/theme-engine'
 import { omit } from '#ui/utils'
 import colors from 'tailwindcss/colors'
@@ -59,16 +59,21 @@ export function useTheme() {
   const { framework } = useFrameworks()
 
   const aiThemeExtras = useState<Record<string, any>>('nuxt-ui-ai-theme', () => readLocalStorage('nuxt-ui-ai-theme', {}))
+  // Style-treatment class bundles live in their OWN channel so restyling
+  // (which regenerates the whole bundle) can never destroy preset/AI
+  // component overrides that share the same component keys.
+  const styleUiData = useState<Record<string, any>>('nuxt-ui-style-ui', () => readLocalStorage('nuxt-ui-style-ui', {}))
   const customColorsData = useState<Record<string, Record<string, string>>>('nuxt-ui-custom-colors', () => readLocalStorage('nuxt-ui-custom-colors', {}))
 
   // The neutral may be a custom palette (AI themes, studio presets) with no entry in
   // tailwindcss/colors — a throw here would abort the whole unhead flush, taking every
   // other theme <style> down with it.
   const color = computed(() => {
-    if (colorMode.value !== 'dark') return 'white'
-
     const neutral = appConfig.ui.colors.neutral
-    return (colors as any)[neutral]?.[900] || customColorsData.value[neutral]?.[900] || (colors as any).slate[900]
+    // Match the page background in both modes (docs light baseline is
+    // neutral-50, not white) so browser chrome doesn't seam against the page.
+    const shade = colorMode.value === 'dark' ? 900 : 50
+    return (colors as any)[neutral]?.[shade] || customColorsData.value[neutral]?.[shade] || (colors as any).slate[shade]
   })
   const cssVariablesData = useState<{ light?: Record<string, string>, dark?: Record<string, string> }>('nuxt-ui-css-variables', () => readLocalStorage('nuxt-ui-css-variables', {}))
   const _radius = useLocalStorage('nuxt-ui-radius', 0.25)
@@ -261,7 +266,10 @@ export function useTheme() {
 
     // Only palettes actually referenced by an alias belong in the export —
     // leftovers from a previous custom palette would bloat the @theme block.
-    const referenced = new Set(Object.values(colorOverrides))
+    // Reference by the alias's CURRENT value, not just overrides: a custom
+    // palette can shadow a default name (AI retunes 'green' while primary
+    // stays 'green') and must still export.
+    const referenced = new Set(Object.values(appConfig.ui.colors as Record<string, string>))
     const paletteEntries = Object.entries(customColorsData.value).filter(([name]) => referenced.has(name))
     if (paletteEntries.length) {
       doc.palettes = Object.fromEntries(paletteEntries.map(([name, shades]) => [name, { shades: shades as ThemePalette['shades'] }]))
@@ -327,22 +335,31 @@ export function useTheme() {
     }
   }
 
-  /** Unset `ui.<component>` overrides previously applied via applyThemeSettings. */
-  function resetComponentOverrides(keys: string[]) {
-    const extras = { ...aiThemeExtras.value }
-    if (extras.ui) {
-      extras.ui = Object.fromEntries(Object.entries(extras.ui).filter(([key]) => !keys.includes(key)))
-      if (!Object.keys(extras.ui).length) delete extras.ui
-    }
+  /**
+   * Rebuild `appConfig.ui.<component>` for the given keys from the two
+   * override channels: the style bundle first, preset/AI extras last (so
+   * explicit overrides win the class merge).
+   */
+  function recomposeComponentOverrides(keys: Iterable<string>) {
     for (const key of keys) {
-      (appConfig.ui as any)[key] = undefined
+      const merged = mergeUi(
+        { [key]: styleUiData.value[key] },
+        { [key]: aiThemeExtras.value.ui?.[key] }
+      )[key]
+      ;(appConfig.ui as any)[key] = merged && Object.keys(merged).length ? merged : undefined
     }
-    aiThemeExtras.value = extras
-    if (Object.keys(extras).length) {
-      window.localStorage.setItem('nuxt-ui-ai-theme', JSON.stringify(extras))
+  }
+
+  /** Replace the style treatment's component bundle wholesale. */
+  function setStyleUi(ui: Record<string, any>) {
+    const touched = new Set([...Object.keys(styleUiData.value), ...Object.keys(ui)])
+    styleUiData.value = ui
+    if (Object.keys(ui).length) {
+      window.localStorage.setItem('nuxt-ui-style-ui', JSON.stringify(ui))
     } else {
-      window.localStorage.removeItem('nuxt-ui-ai-theme')
+      window.localStorage.removeItem('nuxt-ui-style-ui')
     }
+    recomposeComponentOverrides(touched)
   }
 
   function removeCustomColors(names: string[]) {
@@ -364,11 +381,13 @@ export function useTheme() {
     window.localStorage.setItem('nuxt-ui-css-variables', JSON.stringify(merged))
   }
 
-  function applyThemeSettings(settings: Record<string, any>) {
-    if (settings.customColors && typeof settings.customColors === 'object') {
-      const safeCustomColors = sanitizeCustomColors(settings.customColors)
-      if (Object.keys(safeCustomColors).length) injectCustomColors(safeCustomColors)
-    }
+  function applyThemeSettings(settings: Record<string, any>, options: { track?: boolean } = {}) {
+    // Sanitize once up front — later checks must consult the SANITIZED set,
+    // or a rejected palette could still be selected as an alias.
+    const safeCustomColors = settings.customColors && typeof settings.customColors === 'object'
+      ? sanitizeCustomColors(settings.customColors)
+      : {}
+    if (Object.keys(safeCustomColors).length) injectCustomColors(safeCustomColors)
 
     if (settings.cssVariables && typeof settings.cssVariables === 'object') {
       injectCSSVariables(sanitizeCSSVariables(settings.cssVariables))
@@ -376,7 +395,7 @@ export function useTheme() {
 
     if (settings.primary && SAFE_NAME.test(settings.primary)) primary.value = settings.primary
     // Custom palettes (injected via customColors) are valid neutrals too, e.g. presets shipping their own ramp.
-    if (settings.neutral && SAFE_NAME.test(settings.neutral) && (neutralColors.includes(settings.neutral) || settings.customColors?.[settings.neutral])) neutral.value = settings.neutral
+    if (settings.neutral && SAFE_NAME.test(settings.neutral) && (neutralColors.includes(settings.neutral) || (customColorsData.value[settings.neutral] || safeCustomColors[settings.neutral]))) neutral.value = settings.neutral
     if (settings.radius !== undefined && Number.isFinite(Number(settings.radius))) radius.value = Number(settings.radius)
     if (settings.font && SAFE_NAME.test(settings.font)) font.value = settings.font
     if (settings.icons && settings.icons in themeIcons) icon.value = settings.icons
@@ -399,16 +418,21 @@ export function useTheme() {
         // Skip `colors` (handled above) and prototype-chain keys that would pollute appConfig.ui when assigned.
         if (key === 'colors' || key === '__proto__' || key === 'constructor' || key === 'prototype') continue
 
-        const merged = defu(value as Record<string, any>, (appConfig.ui as any)[key] || {}, savedExtras.ui[key] || {})
-        ;(appConfig.ui as any)[key] = merged
-        savedExtras.ui[key] = merged
+        savedExtras.ui[key] = defu(value as Record<string, any>, savedExtras.ui[key] || {})
       }
     }
 
     aiThemeExtras.value = savedExtras
     window.localStorage.setItem('nuxt-ui-ai-theme', JSON.stringify(savedExtras))
+    if (settings.ui) {
+      recomposeComponentOverrides(Object.keys(savedExtras.ui || {}))
+    }
 
-    track('AI Theme Applied')
+    // Hot paths (style sliders, curve drags at ~16Hz) opt out; only real
+    // entry points (AI chat, presets) should emit an analytics event.
+    if (options.track !== false) {
+      track('AI Theme Applied')
+    }
   }
 
   function resetTheme() {
@@ -446,6 +470,16 @@ export function useTheme() {
     customColorsData.value = {}
     cssVariablesData.value = {}
 
+    // Studio-owned state must reset with the theme regardless of which
+    // reset button was pressed (popover, chat, or studio) — orphaned style
+    // prefs would silently resurrect on the next style click or export.
+    setStyleUi({})
+    window.localStorage.removeItem('nuxt-ui-style')
+    window.localStorage.removeItem('nuxt-ui-palette-params')
+    window.localStorage.removeItem('nuxt-ui-palette-prev')
+    useState<Record<string, any>>('nuxt-ui-style-prefs').value = {}
+    useState<string | undefined>('nuxt-ui-theme-preset').value = undefined
+
     if (import.meta.client) {
       document.getElementById('chat-css-variables')?.replaceChildren()
       document.getElementById('chat-custom-colors')?.replaceChildren()
@@ -476,7 +510,7 @@ export function useTheme() {
     currentDoc,
     removeCustomColors,
     removeCSSVariables,
-    resetComponentOverrides,
+    setStyleUi,
     exportCSS,
     exportConfig,
     applyThemeSettings,
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index f97b783185..71579069ca 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,7 +1,16 @@
-import { useLocalStorage } from '@vueuse/core'
 import colors from 'tailwindcss/colors'
-import { presets, docToSettings, isDefaultTheme, generatePalette, fitPalette, parseCssColor, styleComponents, styleTokens, DEFAULT_COLORS, SHADES, STYLE_COMPONENT_KEYS, TOKEN_SHADE_TARGETS } from '../utils/theme-engine'
-import type { ThemeDoc, ThemePreset, PaletteCurveParams, Shade, StyleOptions } from '../utils/theme-engine'
+import { presets, docToSettings, isDefaultTheme, generatePalette, fitPalette, parseCssColor, parseUiColorRef, styleComponents, styleTokens, DEFAULT_COLORS, SHADES, TOKEN_SHADE_TARGETS } from '../utils/theme-engine'
+import type { ThemeDoc, ThemePreset, PaletteCurveParams, StyleOptions, Shade } from '../utils/theme-engine'
+
+function readLocalStorage<T>(key: string, fallback: T): T {
+  if (!import.meta.client) return fallback
+  try {
+    const raw = window.localStorage.getItem(key)
+    return raw ? JSON.parse(raw) : fallback
+  } catch {
+    return fallback
+  }
+}
 
 export function useThemeStudio() {
   const theme = useTheme()
@@ -10,32 +19,49 @@ export function useThemeStudio() {
 
   const activePreset = useState<string | undefined>('nuxt-ui-theme-preset', () => undefined)
 
-  /** Curve params per alias, kept so the editor stays editable across reloads. */
-  const paletteParams = useLocalStorage<Partial<Record<string, PaletteCurveParams>>>('nuxt-ui-palette-params', {})
+  /**
+   * Curve params per alias, kept so the editor stays editable across
+   * reloads. useState + explicit persistence (not useLocalStorage) so
+   * resetTheme() — reachable from the popover and chat, outside this
+   * composable — can clear the shared state, not just the storage key.
+   */
+  const paletteParams = useState<Partial<Record<string, PaletteCurveParams>>>('nuxt-ui-palette-params-state', () => readLocalStorage('nuxt-ui-palette-params', {}))
 
-  /** Shadow/border treatment; the expanded overrides live in the ai-theme extras. */
-  const style = useLocalStorage<StyleOptions>('nuxt-ui-style', {})
+  function setPaletteParams(value: Partial<Record<string, PaletteCurveParams>>) {
+    paletteParams.value = value
+    if (Object.keys(value).length) {
+      window.localStorage.setItem('nuxt-ui-palette-params', JSON.stringify(value))
+    } else {
+      window.localStorage.removeItem('nuxt-ui-palette-params')
+    }
+  }
+
+  /** Shadow/border/token-shade prefs; the expanded class bundle lives in the style-ui channel. */
+  const style = useState<StyleOptions>('nuxt-ui-style-prefs', () => readLocalStorage('nuxt-ui-style', {}))
 
   function setStyle(options: StyleOptions) {
-    const previous = styleTokens(style.value)
+    const previousStyle = style.value
+    const previous = styleTokens(previousStyle)
     style.value = { ...style.value, ...options }
+    window.localStorage.setItem('nuxt-ui-style', JSON.stringify(style.value))
 
-    // Clear the previous class bundle (defu merging can't unset classes) and
-    // only the tokens the PREVIOUS style emitted — never preset/doc-owned
-    // values like a preset's --ui-bg, which share the same variable names.
-    theme.resetComponentOverrides(STYLE_COMPONENT_KEYS)
+    // Remove only the tokens the PREVIOUS style emitted and the next one
+    // doesn't — never preset/doc-owned values sharing the same names.
     const tokens = styleTokens(style.value)
     theme.removeCSSVariables({
       light: Object.keys(previous.light).filter(key => !(key in tokens.light)),
       dark: Object.keys(previous.dark).filter(key => !(key in tokens.dark))
     })
 
+    // The class bundle lives in its own channel (never touches preset/AI
+    // overrides), and shade-only edits skip the component churn entirely.
     const components = styleComponents(style.value)
-    const settings: Record<string, any> = {}
-    if (Object.keys(components).length) settings.ui = components
-    if (Object.keys(tokens.light).length || Object.keys(tokens.dark).length) settings.cssVariables = tokens
-    if (Object.keys(settings).length) {
-      theme.applyThemeSettings(settings)
+    if (JSON.stringify(components) !== JSON.stringify(styleComponents(previousStyle))) {
+      theme.setStyleUi(components)
+    }
+
+    if (Object.keys(tokens.light).length || Object.keys(tokens.dark).length) {
+      theme.applyThemeSettings({ cssVariables: tokens }, { track: false })
     }
     activePreset.value = undefined
 
@@ -109,16 +135,35 @@ export function useThemeStudio() {
     }
   }
 
+  /** Remaps minus any token the user's shade sliders already own. */
+  function unownedNeutralRemaps() {
+    const owned = style.value.tokenShades || {}
+    const filter = (mode: 'light' | 'dark', vars: Record<string, string>) =>
+      Object.fromEntries(Object.entries(vars).filter(([token]) => owned[token]?.[mode] === undefined))
+    return {
+      light: filter('light', NEUTRAL_TOKEN_REMAPS.light),
+      dark: filter('dark', NEUTRAL_TOKEN_REMAPS.dark)
+    }
+  }
+
   /** Generate a ramp from curve params and point the alias at it. */
   function setPaletteFromCurve(alias: 'primary' | 'neutral', params: PaletteCurveParams) {
     const name = customPaletteName(alias)
 
+    // Remember what to restore when the custom palette is removed — the
+    // default alias would discard a preset's choice (e.g. Ghibli's stone).
+    if (!isCustomPalette(alias)) {
+      const prev = readLocalStorage<Record<string, string>>('nuxt-ui-palette-prev', {})
+      prev[alias] = (appConfig.ui.colors as Record<string, string>)[alias]!
+      window.localStorage.setItem('nuxt-ui-palette-prev', JSON.stringify(prev))
+    }
+
     theme.applyThemeSettings({
       customColors: { [name]: generatePalette(params) },
       [alias]: name,
-      ...(alias === 'neutral' ? { cssVariables: NEUTRAL_TOKEN_REMAPS } : {})
-    })
-    paletteParams.value = { ...paletteParams.value, [alias]: params }
+      ...(alias === 'neutral' ? { cssVariables: unownedNeutralRemaps() } : {})
+    }, { track: false })
+    setPaletteParams({ ...paletteParams.value, [alias]: params })
     activePreset.value = undefined
 
     // Live drags call this at ~16Hz — one analytics event per burst is plenty.
@@ -128,19 +173,24 @@ export function useThemeStudio() {
     }
   }
 
-  /** Drop the custom ramp and return the alias to its default palette. */
+  /** Drop the custom ramp and restore the palette that preceded it. */
   function clearCustomPalette(alias: 'primary' | 'neutral') {
     theme.removeCustomColors([customPaletteName(alias)])
     if (alias === 'neutral') {
+      const remaps = unownedNeutralRemaps()
       theme.removeCSSVariables({
-        light: Object.keys(NEUTRAL_TOKEN_REMAPS.light),
-        dark: Object.keys(NEUTRAL_TOKEN_REMAPS.dark)
+        light: Object.keys(remaps.light),
+        dark: Object.keys(remaps.dark)
       })
     }
-    theme.applyThemeSettings({ [alias]: DEFAULT_COLORS[alias] })
+
+    const prev = readLocalStorage<Record<string, string>>('nuxt-ui-palette-prev', {})
+    theme.applyThemeSettings({ [alias]: prev[alias] || DEFAULT_COLORS[alias] }, { track: false })
+    const { [alias]: _restored, ...remaining } = prev
+    window.localStorage.setItem('nuxt-ui-palette-prev', JSON.stringify(remaining))
 
     const { [alias]: _, ...rest } = paletteParams.value
-    paletteParams.value = rest
+    setPaletteParams(rest)
   }
 
   /**
@@ -152,19 +202,24 @@ export function useThemeStudio() {
   function deriveStyle(doc: ThemeDoc): StyleOptions {
     const derived: StyleOptions = { ...(doc.style || {}) }
 
-    const parse = (value?: string) => value?.match(/^var\(--ui-color-neutral-(\d+)\)$/)?.[1]
+    const parse = (value?: string) => {
+      const ref = parseUiColorRef(value)
+      return ref?.alias === 'neutral' ? ref.shade : undefined
+    }
 
     for (const target of TOKEN_SHADE_TARGETS) {
       if (derived.tokenShades?.[target.token]) continue
 
       const light = parse(doc.tokens?.light?.[target.token])
       const dark = parse(doc.tokens?.dark?.[target.token])
-      if (light || dark) {
+      if (light !== undefined || dark !== undefined) {
+        // Only modes the doc actually overrides — backfilling the other
+        // mode would turn a non-choice into an exported override.
         derived.tokenShades = {
           ...derived.tokenShades,
           [target.token]: {
-            light: light ? Number(light) : target.defaults.light,
-            dark: dark ? Number(dark) : target.defaults.dark
+            ...(light !== undefined ? { light } : {}),
+            ...(dark !== undefined ? { dark } : {})
           }
         }
       }
@@ -176,11 +231,17 @@ export function useThemeStudio() {
   /** Replace the current theme with a document: reset, then apply overrides. */
   function applyDoc(doc: ThemeDoc) {
     theme.resetTheme()
-    paletteParams.value = {}
     style.value = deriveStyle(doc)
+    if (Object.keys(style.value).length) {
+      window.localStorage.setItem('nuxt-ui-style', JSON.stringify(style.value))
+    }
 
     if (!isDefaultTheme(doc)) {
-      theme.applyThemeSettings(docToSettings(doc))
+      theme.applyThemeSettings(docToSettings(doc), { track: false })
+      const components = styleComponents(style.value)
+      if (Object.keys(components).length) {
+        theme.setStyleUi(components)
+      }
     }
   }
 
@@ -224,9 +285,6 @@ export function useThemeStudio() {
 
   function reset() {
     theme.resetTheme()
-    paletteParams.value = {}
-    style.value = {}
-    activePreset.value = undefined
   }
 
   return {
diff --git a/docs/app/plugins/theme.ts b/docs/app/plugins/theme.ts
index a996cdbadd..60306778d4 100644
--- a/docs/app/plugins/theme.ts
+++ b/docs/app/plugins/theme.ts
@@ -1,5 +1,6 @@
 import { defu } from 'defu'
 import { themeIcons, cssVariableDefaults } from '../utils/theme'
+import { mergeUi } from '../utils/theme-engine'
 
 export default defineNuxtPlugin({
   enforce: 'post',
@@ -29,6 +30,7 @@ export default defineNuxtPlugin({
       }
 
       restoreState('nuxt-ui-ai-theme')
+      restoreState('nuxt-ui-style-ui')
       restoreState('nuxt-ui-custom-colors')
       restoreState('nuxt-ui-css-variables')
 
@@ -39,9 +41,13 @@ export default defineNuxtPlugin({
             (appConfig.ui.colors as any)[key] = value
           }
         }
-        if (extras.ui) {
+        const styleUi = JSON.parse(localStorage.getItem('nuxt-ui-style-ui') || '{}')
+        if (extras.ui || Object.keys(styleUi).length) {
           onNuxtReady(() => {
-            for (const [key, value] of Object.entries(extras.ui)) {
+            // Same composition as the live path: style bundle first,
+            // preset/AI extras last so explicit overrides win the merge.
+            const merged = mergeUi(styleUi, extras.ui || {})
+            for (const [key, value] of Object.entries(merged)) {
               if (key === 'colors' || key === 'icons') continue
               (appConfig.ui as any)[key] = defu(value as Record<string, any>, (appConfig.ui as any)[key] || {})
             }
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index a0412a95d9..720bb3c2a7 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -1,7 +1,7 @@
 import { themeIcons } from '../theme'
 import type { ThemeDoc } from './types'
 import { DEFAULT_COLORS, THEME_DEFAULTS } from './types'
-import { styleComponents, styleTokens } from './styles'
+import { styleComponents, styleTokens, mergeUi } from './styles'
 
 /**
  * Generate the minimal `main.css`. The document only holds overrides, so
@@ -87,10 +87,9 @@ export function generateConfig(doc: ThemeDoc, framework: string = 'nuxt'): strin
     config.ui.icons = themeIcons[doc.icons as keyof typeof themeIcons]
   }
 
-  const componentOverrides = {
-    ...(doc.style ? styleComponents(doc.style) : {}),
-    ...(doc.components || {})
-  }
+  // Explicit components merge INTO the style expansion (classes concatenate,
+  // explicit last so it wins) — a spread would drop one side wholesale.
+  const componentOverrides = mergeUi(doc.style ? styleComponents(doc.style) : undefined, doc.components)
   if (Object.keys(componentOverrides).length) {
     config.ui = config.ui || {}
     Object.assign(config.ui, componentOverrides)
@@ -157,14 +156,11 @@ export function docToSettings(doc: ThemeDoc): Record<string, any> {
     }
   }
 
-  // Expand the shadow/border treatment into component overrides; explicit
-  // per-component overrides win over the expansion.
-  const ui = {
-    ...(doc.style ? styleComponents(doc.style) : {}),
-    ...(doc.components || {})
-  }
-  if (Object.keys(ui).length) {
-    settings.ui = ui
+  // Only the doc's explicit components ride the settings channel — the
+  // style expansion is applied through the dedicated style-ui channel by
+  // the caller (applyDoc), so a later style tweak can't destroy them.
+  if (doc.components && Object.keys(doc.components).length) {
+    settings.ui = doc.components
   }
 
   return settings
diff --git a/docs/app/utils/theme-engine/resolve.ts b/docs/app/utils/theme-engine/resolve.ts
index 736f077ad9..bcd534ad7b 100644
--- a/docs/app/utils/theme-engine/resolve.ts
+++ b/docs/app/utils/theme-engine/resolve.ts
@@ -63,6 +63,12 @@ export interface ResolvedToken {
 
 const UI_COLOR_RE = /^var\(--ui-color-([a-z]+)-(\d{2,3})\)$/
 
+/** Parse a `var(--ui-color-<alias>-<shade>)` reference, the one format the studio emits. */
+export function parseUiColorRef(value?: string): { alias: string, shade: number } | undefined {
+  const match = value?.match(UI_COLOR_RE)
+  return match ? { alias: match[1]!, shade: Number(match[2]) } : undefined
+}
+
 export function resolveAlias(doc: ThemeDoc, alias: ColorAlias): string {
   return doc.colors?.[alias] || DEFAULT_COLORS[alias]
 }
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 7d0dac8f3c..776976a89a 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -41,42 +41,30 @@ export interface StyleOptions {
   /** Neutral ramp shade per mode, used when `borderColor` is 'shade' */
   borderShade?: { light: number, dark: number }
   /**
-   * App background as a neutral ramp shade per mode.
-   * @deprecated superseded by `tokenShades['--ui-bg']`; still read for
-   * persisted state from older sessions.
-   */
-  bgShade?: { light: number, dark: number }
-  /**
-   * Semantic token → neutral ramp shade per mode. Strictly a token
+   * Semantic token → neutral ramp shade, per mode. Strictly a token
    * shorthand parked on the style axis until the studio grows a full
-   * tokens editor. Keys are whitelisted in TOKEN_SHADE_TARGETS.
+   * tokens editor. Keys are whitelisted in TOKEN_SHADE_TARGETS. A mode
+   * is only an override when present — an absent mode stays inherited,
+   * so hydrating one mode from a preset never leaks a phantom override
+   * for the other into exports.
    */
-  tokenShades?: Record<string, { light: number, dark: number }>
+  tokenShades?: Record<string, { light?: number, dark?: number }>
 }
 
-export const SHADOW_STYLES: ShadowStyle[] = ['none', 'soft', 'hard']
-export const BORDER_STYLES: BorderStyle[] = ['default', 'bold', 'frame']
-export const BORDER_COLORS: BorderColor[] = ['default', 'inverted', 'black', 'white', 'primary', 'neutral', 'shade']
-
 /** Borders default opposite to the surface: dark ink on light, pale on dark. */
 export const BORDER_SHADE_DEFAULTS = { light: 900, dark: 200 }
 
-/** The docs baseline background shades. */
-export const BG_SHADE_DEFAULTS = { light: 50, dark: 900 }
-
 /**
  * Semantic tokens the studio exposes as per-mode shade sliders, with the
  * library/docs default shades. 'white' library values map to shade 50.
  */
 export const TOKEN_SHADE_TARGETS: Array<{ token: string, label: string, defaults: { light: number, dark: number } }> = [
-  { token: '--ui-bg', label: 'Background', defaults: BG_SHADE_DEFAULTS },
+  { token: '--ui-bg', label: 'Background', defaults: { light: 50, dark: 900 } },
   { token: '--ui-bg-inverted', label: 'Inverted', defaults: { light: 900, dark: 50 } },
   { token: '--ui-text-highlighted', label: 'Highlighted', defaults: { light: 900, dark: 50 } },
   { token: '--ui-text-muted', label: 'Muted', defaults: { light: 500, dark: 400 } },
   { token: '--ui-text-dimmed', label: 'Dimmed', defaults: { light: 400, dark: 500 } }
 ]
-export const SHADOW_COLORS: ShadowColor[] = ['default', 'black', 'inverted', 'primary', 'shade']
-
 export const SHADOW_SHADE_DEFAULTS = { light: 950, dark: 800 }
 
 interface ComponentFragment {
@@ -201,8 +189,6 @@ const SHADOW_COLOR_VALUES: Record<Exclude<ShadowColor, 'default' | 'shade'>, { l
   primary: { light: 'var(--ui-color-primary-500)', dark: 'var(--ui-color-primary-400)' }
 }
 
-export const STYLE_TOKEN_KEYS = ['--ui-frame-color', '--ui-shadow-color', '--ui-bg']
-
 /**
  * The CSS-variable side of a style: per-mode values for the frame and
  * shadow color choices. 'default' contributes nothing (the docs CSS /
@@ -221,15 +207,10 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
     light['--ui-frame-color'] = value.light
     dark['--ui-frame-color'] = value.dark
   }
-  // Legacy single-purpose field folds into the generic map.
-  const tokenShades = {
-    ...(style.bgShade ? { '--ui-bg': style.bgShade } : {}),
-    ...style.tokenShades
-  }
-  for (const [token, shade] of Object.entries(tokenShades)) {
+  for (const [token, shade] of Object.entries(style.tokenShades || {})) {
     if (TOKEN_SHADE_TARGETS.some(target => target.token === token)) {
-      light[token] = `var(--ui-color-neutral-${shade.light})`
-      dark[token] = `var(--ui-color-neutral-${shade.dark})`
+      if (shade.light !== undefined) light[token] = `var(--ui-color-neutral-${shade.light})`
+      if (shade.dark !== undefined) dark[token] = `var(--ui-color-neutral-${shade.dark})`
     }
   }
 
@@ -278,6 +259,54 @@ export function styleComponents(style: StyleOptions): Fragments {
   return result
 }
 
+/**
+ * Merge two `ui.<component>` override fragments so both take effect: slot
+ * class strings concatenate (the explicit override last, so it wins the
+ * tailwind-merge), compoundVariants arrays append in the same order. Used
+ * wherever a doc's explicit `components` meet a style expansion — a spread
+ * would silently drop whichever side loses.
+ */
+export function mergeComponentOverrides(
+  base: Record<string, any> | undefined,
+  extra: Record<string, any> | undefined
+): Record<string, any> | undefined {
+  if (!base || !Object.keys(base).length) return extra
+  if (!extra || !Object.keys(extra).length) return base
+
+  const result: Record<string, any> = {}
+  for (const key of new Set([...Object.keys(base), ...Object.keys(extra)])) {
+    const a = base[key]
+    const b = extra[key]
+    if (a === undefined) {
+      result[key] = b
+    } else if (b === undefined) {
+      result[key] = a
+    } else if (key === 'compoundVariants' && Array.isArray(a) && Array.isArray(b)) {
+      result[key] = [...a, ...b]
+    } else if (typeof a === 'string' && typeof b === 'string') {
+      result[key] = `${a} ${b}`
+    } else if (typeof a === 'object' && typeof b === 'object' && !Array.isArray(a) && !Array.isArray(b)) {
+      result[key] = mergeComponentOverrides(a, b)
+    } else {
+      result[key] = b
+    }
+  }
+  return result
+}
+
+/** Merge two whole `ui` records component-wise. */
+export function mergeUi(
+  base: Record<string, any> | undefined,
+  extra: Record<string, any> | undefined
+): Record<string, any> {
+  const result: Record<string, any> = {}
+  for (const key of new Set([...Object.keys(base || {}), ...Object.keys(extra || {})])) {
+    const merged = mergeComponentOverrides(base?.[key], extra?.[key])
+    if (merged && Object.keys(merged).length) result[key] = merged
+  }
+  return result
+}
+
 /** Every component key a style bundle may touch — cleared before re-applying. */
 export const STYLE_COMPONENT_KEYS = [...new Set([
   ...Object.values(SHADOW_FRAGMENTS).flatMap(fragments => Object.keys(fragments)),
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 1a37af0aa5..17981bc91a 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -231,16 +231,29 @@ describe('styleComponents', () => {
     expect(components.card!.compoundVariants).toContainEqual({ variant: 'outline', class: { root: 'ring-2' } })
   })
 
-  it('expands doc.style in docToSettings with explicit components winning', async () => {
+  it('docToSettings keeps style out of the ui channel but carries its tokens', async () => {
     const { docToSettings } = await import('../../docs/app/utils/theme-engine')
     const settings = docToSettings({
       version: 1,
-      style: { shadow: 'soft' },
+      style: { shadow: 'hard', shadowColor: 'black' },
       components: { button: { slots: { base: 'rounded-full' } } }
     })
 
-    expect(settings.ui.card.slots.root).toBe('shadow-md')
-    expect(settings.ui.button.slots.base).toBe('rounded-full')
+    // components ride settings.ui; the style class bundle goes through the
+    // dedicated style-ui channel applied by the caller, so a later style
+    // change can never destroy doc components.
+    expect(settings.ui).toEqual({ button: { slots: { base: 'rounded-full' } } })
+    expect(settings.cssVariables.light['--ui-shadow-color']).toBe('black')
+  })
+
+  it('mergeUi concatenates slot classes and compound variants', async () => {
+    const { mergeUi, styleComponents } = await import('../../docs/app/utils/theme-engine')
+    const merged = mergeUi(styleComponents({ shadow: 'hard' }), { button: { slots: { base: 'rounded-full' } } })
+
+    // both the shadow classes and the explicit override survive, explicit last
+    expect(merged.button.slots.base).toContain('shadow-[3px_3px_0_0_var(--ui-shadow-color)]')
+    expect(merged.button.slots.base.endsWith('rounded-full')).toBe(true)
+    expect(merged.card.slots.root).toContain('shadow-[5px_5px_0_0_var(--ui-shadow-color)]')
   })
 })
 
@@ -284,15 +297,18 @@ describe('style colors', () => {
     expect(styleTokens({ shadowColor: 'shade' }).dark['--ui-shadow-color']).toBe('var(--ui-color-neutral-800)')
   })
 
-  it('styleTokens maps token shades and folds legacy bgShade', async () => {
+  it('styleTokens maps token shades per mode, only for modes present', async () => {
     const { styleTokens } = await import('../../docs/app/utils/theme-engine')
 
     expect(styleTokens({ tokenShades: { '--ui-text-muted': { light: 600, dark: 300 } } })).toEqual({
       light: { '--ui-text-muted': 'var(--ui-color-neutral-600)' },
       dark: { '--ui-text-muted': 'var(--ui-color-neutral-300)' }
     })
-    // legacy field still applies, explicit map wins over it
-    expect(styleTokens({ bgShade: { light: 100, dark: 800 } }).light['--ui-bg']).toBe('var(--ui-color-neutral-100)')
+    // a dark-only entry must NOT invent a light override (preset hydration)
+    expect(styleTokens({ tokenShades: { '--ui-bg': { dark: 950 } } })).toEqual({
+      light: {},
+      dark: { '--ui-bg': 'var(--ui-color-neutral-950)' }
+    })
     // non-whitelisted tokens are ignored
     expect(styleTokens({ tokenShades: { '--ui-evil': { light: 50, dark: 50 } } })).toEqual({ light: {}, dark: {} })
   })

From f9a2effd5863ad70a4c995f0689b7b9eaa7b5897 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 04:40:05 +0200
Subject: [PATCH 022/185] feat(docs): default variants, shadow
 geometry/opacity, accordion groups
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New settings:
- Defaults section: app-wide default variant and size, expanded into
  per-component defaultVariants (the runtime channel Nuxt UI already
  honors) only where the component supports the value — form fields
  have no solid variant and keep their own default.
- Shadow geometry sliders (offset X/Y, blur, spread) driving CSS
  variables referenced by one static class shape, plus an opacity
  slider folded into the shadow color via color-mix with per-treatment
  fallbacks (solid for custom, 25% for soft). 'Hard' renamed 'Custom'.
- Soft shadows now respect the color/shade options — tailwind's stock
  shadow color is hardcoded black, and the bare shadow-(--var) form
  parses as a shadow SIZE var; shadow-(color:--var) disambiguates.
- Sidebar groups (Colors/Style/Tokens/General) become a UAccordion with
  leading chevrons, built-in separators and unpadded panels; the shade
  option in both color selects is now labeled 'Custom…'.

Fixes:
- Studio prefs and palette params are restored on load again — the
  useState conversion (for popover-reset clearing) lost the client
  restore that useLocalStorage had provided; the FOUC plugin now
  rehydrates both keys. The persisted style class bundle also
  self-heals when the generator changes, so stale expanded classes
  can't outlive their source.
- Layout: toolbar returns beside the sidebar atop the preview column
  (with the sidebar toggle and Concept badge kept).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/assets/css/main.css                  |  12 +
 .../theme-studio/ThemeStudioControls.vue      | 856 ++++++++++--------
 docs/app/composables/useTheme.ts              |   2 +-
 docs/app/composables/useThemeStudio.ts        |  10 +
 docs/app/pages/theme.vue                      | 130 +--
 docs/app/plugins/theme.ts                     |  15 +
 docs/app/utils/theme-engine/export.ts         |  24 +-
 docs/app/utils/theme-engine/styles.ts         | 110 ++-
 test/utils/theme-engine.spec.ts               |  38 +-
 9 files changed, 747 insertions(+), 450 deletions(-)

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index 2582a1ad2d..5abc05a2c7 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -70,6 +70,18 @@ html.theme-studio-dragging body *:not([data-curve-editor] *) {
   /* hard-shadow treatment: a shadow, not a glow */
   --ui-shadow-color: var(--ui-color-neutral-950);
 }
+
+/* Hard-shadow geometry defaults; the studio's sliders override these.
+   The -final- colors fold the opacity slider into the shadow color with
+   per-treatment fallbacks (hard: solid, soft: 25%). */
+:where(:root) {
+  --ui-shadow-offset-x: 3px;
+  --ui-shadow-offset-y: 3px;
+  --ui-shadow-blur: 0px;
+  --ui-shadow-spread: 0px;
+  --ui-shadow-final-hard: color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 100%), transparent);
+  --ui-shadow-final-soft: color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 25%), transparent);
+}
 :where(.dark) {
   --ui-shadow-color: black;
 }
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 871fd6c97a..2d83b1d6f8 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TOKEN_SHADE_TARGETS, SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS } from '../../utils/theme-engine'
+import { TOKEN_SHADE_TARGETS, SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, SHADOW_GEOMETRY_DEFAULTS } from '../../utils/theme-engine'
 
 const colorMode = useColorMode()
 
@@ -25,6 +25,7 @@ const openSections = reactive<Record<string, boolean>>({
   primary: true,
   neutral: true,
   radius: true,
+  defaults: true,
   shadows: true,
   borders: true,
   font: true,
@@ -55,9 +56,14 @@ const neutralSwatch = computed(() => {
 const shadowOptions = [
   { label: 'None', value: 'none' },
   { label: 'Soft', value: 'soft' },
-  { label: 'Hard', value: 'hard' }
+  { label: 'Custom', value: 'hard' }
 ] as const
 
+const shadowOpacity = computed({
+  get: () => style.value.shadowOpacity ?? (style.value.shadow === 'hard' ? 100 : 25),
+  set: (value: number) => setStyle({ shadowOpacity: value })
+})
+
 const borderOptions = [
   { label: 'Thin', value: 'default' },
   { label: 'Bold', value: 'bold' },
@@ -71,7 +77,7 @@ const borderColorItems = [
   { label: 'White', value: 'white' },
   { label: 'Primary', value: 'primary' },
   { label: 'Neutral', value: 'neutral' },
-  { label: 'Neutral shade…', value: 'shade' }
+  { label: 'Custom…', value: 'shade' }
 ]
 
 const shadowColorItems = [
@@ -79,7 +85,7 @@ const shadowColorItems = [
   { label: 'Black', value: 'black' },
   { label: 'Inverted', value: 'inverted' },
   { label: 'Primary', value: 'primary' },
-  { label: 'Neutral shade…', value: 'shade' }
+  { label: 'Custom…', value: 'shade' }
 ]
 
 // Slider position ↔ SHADES index, per mode. shadow/border shades write both
@@ -136,6 +142,59 @@ const neutralChip = computed(() => neutral.value === 'neutral' ? 'old-neutral' :
 const primaryEditorOpen = ref(false)
 const neutralEditorOpen = ref(false)
 
+const openGroups = ref(['colors', 'style', 'tokens', 'general'])
+
+const groupItems = [
+  { label: 'Colors', value: 'colors', slot: 'colors' as const },
+  { label: 'Style', value: 'style', slot: 'style' as const },
+  { label: 'Tokens', value: 'tokens', slot: 'tokens' as const },
+  { label: 'General', value: 'general', slot: 'general' as const }
+]
+
+const defaultVariantItems = [
+  { label: 'Default', value: 'default' },
+  { label: 'Solid', value: 'solid' },
+  { label: 'Outline', value: 'outline' },
+  { label: 'Soft', value: 'soft' },
+  { label: 'Subtle', value: 'subtle' }
+]
+
+const defaultSizeItems = [
+  { label: 'Default', value: 'default' },
+  { label: 'XS', value: 'xs' },
+  { label: 'SM', value: 'sm' },
+  { label: 'MD', value: 'md' },
+  { label: 'LG', value: 'lg' },
+  { label: 'XL', value: 'xl' }
+]
+
+const defaultVariant = computed({
+  get: () => style.value.defaults?.variant || 'default',
+  set: (value: any) => setStyle({ defaults: { ...style.value.defaults, variant: value } })
+})
+
+const defaultSize = computed({
+  get: () => style.value.defaults?.size || 'default',
+  set: (value: any) => setStyle({ defaults: { ...style.value.defaults, size: value } })
+})
+
+// Hard-shadow geometry sliders (px)
+const geometryFields = [
+  { key: 'x', label: 'Offset X', min: -12, max: 12 },
+  { key: 'y', label: 'Offset Y', min: -12, max: 12 },
+  { key: 'blur', label: 'Blur', min: 0, max: 24 },
+  { key: 'spread', label: 'Spread', min: 0, max: 8 }
+] as const
+
+function geometrySlider(key: 'x' | 'y' | 'blur' | 'spread') {
+  return computed({
+    get: () => ({ ...SHADOW_GEOMETRY_DEFAULTS, ...style.value.shadowGeometry })[key],
+    set: (value: number) => setStyle({ shadowGeometry: { ...SHADOW_GEOMETRY_DEFAULTS, ...style.value.shadowGeometry, [key]: value } })
+  })
+}
+
+const geometry = Object.fromEntries(geometryFields.map(field => [field.key, geometrySlider(field.key)])) as Record<'x' | 'y' | 'blur' | 'spread', ReturnType<typeof geometrySlider>>
+
 const borderColor = computed({
   get: () => style.value.borderColor || 'default',
   set: (value: any) => setStyle({ borderColor: value })
@@ -148,390 +207,461 @@ const shadowColor = computed({
 </script>
 
 <template>
-  <div class="flex flex-col gap-5">
-    <fieldset>
-      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.primary = !openSections.primary">
-          Primary
-
-          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.primary }" />
-        </button>
-
-        <UButton
-          to="/docs/getting-started/theme/css-variables#colors"
-          size="xs"
-          color="neutral"
-          variant="link"
-          icon="i-lucide-help-circle"
-          class="p-0 -my-0.5"
-          :ui="{ leadingIcon: 'size-3' }"
-        />
-
-        <UButton
-          label="Custom"
-          :icon="isCustomPalette('primary') ? 'i-lucide-paintbrush' : 'i-lucide-wand-sparkles'"
-          color="neutral"
-          :variant="primaryEditorOpen ? 'soft' : 'ghost'"
-          size="xs"
-          class="-my-1 text-[11px]"
-          :ui="{ leadingIcon: isCustomPalette('primary') ? 'text-primary size-3' : 'size-3' }"
-          @click="primaryEditorOpen = !primaryEditorOpen"
-        />
-      </legend>
-
-      <div v-show="openSections.primary">
-        <UPopover :content="{ side: 'bottom', align: 'start' }">
-          <UButton
-            color="neutral"
-            variant="outline"
-            size="sm"
-            block
-            trailing-icon="i-lucide-chevron-down"
-            class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
-            :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-          >
-            <template #leading>
-              <span
-                class="inline-block size-3 rounded-full"
-                :class="{ 'bg-black dark:bg-white': blackAsPrimary }"
-                :style="primarySwatch.color ? { backgroundColor: primarySwatch.color } : undefined"
-              />
-            </template>
+  <UAccordion
+    v-model="openGroups"
+    default-value="colors"
+    :items="groupItems"
+    :unmount-on-hide="false"
+  >
+    <template #colors>
+      <div class="flex flex-col gap-5 pt-1 pb-4">
+        <fieldset>
+          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.primary = !openSections.primary">
+              Primary
+
+              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.primary }" />
+            </button>
+
+            <UButton
+              to="/docs/getting-started/theme/css-variables#colors"
+              size="xs"
+              color="neutral"
+              variant="link"
+              icon="i-lucide-help-circle"
+              class="p-0 -my-0.5"
+              :ui="{ leadingIcon: 'size-3' }"
+            />
+
+            <UButton
+              label="Custom"
+              :icon="isCustomPalette('primary') ? 'i-lucide-paintbrush' : 'i-lucide-wand-sparkles'"
+              color="neutral"
+              :variant="primaryEditorOpen ? 'soft' : 'ghost'"
+              size="xs"
+              class="-my-1 text-[11px]"
+              :ui="{ leadingIcon: isCustomPalette('primary') ? 'text-primary size-3' : 'size-3' }"
+              @click="primaryEditorOpen = !primaryEditorOpen"
+            />
+          </legend>
+
+          <div v-show="openSections.primary">
+            <UPopover :content="{ side: 'bottom', align: 'start' }">
+              <UButton
+                color="neutral"
+                variant="outline"
+                size="sm"
+                block
+                trailing-icon="i-lucide-chevron-down"
+                class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
+                :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+              >
+                <template #leading>
+                  <span
+                    class="inline-block size-3 rounded-full"
+                    :class="{ 'bg-black dark:bg-white': blackAsPrimary }"
+                    :style="primarySwatch.color ? { backgroundColor: primarySwatch.color } : undefined"
+                  />
+                </template>
 
-            {{ primarySwatch.label }}
-          </UButton>
+                {{ primarySwatch.label }}
+              </UButton>
+
+              <template #content>
+                <div class="grid grid-cols-3 gap-1 w-72 p-2">
+                  <ThemePickerButton
+                    label="Black"
+                    :selected="blackAsPrimary"
+                    @click="setBlackAsPrimary(true)"
+                  >
+                    <template #leading>
+                      <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
+                    </template>
+                  </ThemePickerButton>
+
+                  <ThemePickerButton
+                    v-for="color in primaryColors"
+                    :key="color"
+                    :label="color"
+                    :chip="color"
+                    :selected="!blackAsPrimary && primary === color"
+                    @click="selectPalette('primary', color)"
+                  />
+                </div>
+              </template>
+            </UPopover>
+
+            <ThemeStudioPaletteEditor v-model:open="primaryEditorOpen" alias="primary" />
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.neutral = !openSections.neutral">
+              Neutral
+
+              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.neutral }" />
+            </button>
+
+            <UButton
+              to="/docs/getting-started/theme/css-variables#text"
+              size="xs"
+              color="neutral"
+              variant="link"
+              icon="i-lucide-help-circle"
+              class="p-0 -my-0.5"
+              :ui="{ leadingIcon: 'size-3' }"
+            />
 
-          <template #content>
-            <div class="grid grid-cols-3 gap-1 w-72 p-2">
-              <ThemePickerButton
-                label="Black"
-                :selected="blackAsPrimary"
-                @click="setBlackAsPrimary(true)"
+            <UButton
+              label="Custom"
+              :icon="isCustomPalette('neutral') ? 'i-lucide-paintbrush' : 'i-lucide-wand-sparkles'"
+              color="neutral"
+              :variant="neutralEditorOpen ? 'soft' : 'ghost'"
+              size="xs"
+              class="-my-1 text-[11px]"
+              :ui="{ leadingIcon: isCustomPalette('neutral') ? 'text-primary size-3' : 'size-3' }"
+              @click="neutralEditorOpen = !neutralEditorOpen"
+            />
+          </legend>
+
+          <div v-show="openSections.neutral">
+            <UPopover :content="{ side: 'bottom', align: 'start' }">
+              <UButton
+                color="neutral"
+                variant="outline"
+                size="sm"
+                block
+                trailing-icon="i-lucide-chevron-down"
+                class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
+                :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
               >
                 <template #leading>
-                  <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
+                  <span
+                    class="inline-block size-3 rounded-full"
+                    :style="{ backgroundColor: neutralSwatch.color }"
+                  />
                 </template>
-              </ThemePickerButton>
 
+                {{ neutralSwatch.label }}
+              </UButton>
+
+              <template #content>
+                <div class="grid grid-cols-3 gap-1 w-72 p-2">
+                  <ThemePickerButton
+                    v-for="color in neutralColors"
+                    :key="color"
+                    :label="color"
+                    :chip="color === 'neutral' ? 'old-neutral' : color"
+                    :selected="neutral === color"
+                    @click="selectPalette('neutral', color)"
+                  />
+                </div>
+              </template>
+            </UPopover>
+
+            <ThemeStudioPaletteEditor v-model:open="neutralEditorOpen" alias="neutral" />
+          </div>
+        </fieldset>
+      </div>
+    </template>
+
+    <template #style>
+      <div class="flex flex-col gap-5 pt-1 pb-4">
+        <fieldset>
+          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.radius = !openSections.radius">
+              Radius
+
+              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.radius }" />
+            </button>
+
+            <UButton
+              to="/docs/getting-started/theme/css-variables#radius"
+              size="xs"
+              color="neutral"
+              variant="link"
+              icon="i-lucide-help-circle"
+              class="p-0 -my-0.5"
+              :ui="{ leadingIcon: 'size-3' }"
+            />
+          </legend>
+
+          <div v-show="openSections.radius" class="flex items-center gap-3">
+            <USlider
+              v-model="radius"
+              :min="0"
+              :max="0.5"
+              :step="0.125"
+              size="sm"
+            />
+
+            <span class="text-[11px] font-mono text-muted tabular-nums shrink-0 w-14 text-right">{{ radius }}rem</span>
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.defaults = !openSections.defaults">
+              Defaults
+
+              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.defaults }" />
+            </button>
+          </legend>
+
+          <div v-show="openSections.defaults" class="grid grid-cols-2 gap-1.5">
+            <USelect
+              v-model="defaultVariant"
+              size="sm"
+              color="neutral"
+              icon="i-lucide-layers"
+              :items="defaultVariantItems"
+              class="ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
+              :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+            />
+
+            <USelect
+              v-model="defaultSize"
+              size="sm"
+              color="neutral"
+              icon="i-lucide-proportions"
+              :items="defaultSizeItems"
+              class="ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
+              :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+            />
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.shadows = !openSections.shadows">
+              Shadows
+
+              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.shadows }" />
+            </button>
+          </legend>
+
+          <div v-show="openSections.shadows">
+            <div class="grid grid-cols-3 gap-1">
               <ThemePickerButton
-                v-for="color in primaryColors"
-                :key="color"
-                :label="color"
-                :chip="color"
-                :selected="!blackAsPrimary && primary === color"
-                @click="selectPalette('primary', color)"
+                v-for="option in shadowOptions"
+                :key="option.value"
+                :label="option.label"
+                class="justify-center px-0"
+                :selected="(style.shadow || 'none') === option.value"
+                @click="setStyle({ shadow: option.value })"
               />
             </div>
-          </template>
-        </UPopover>
 
-        <ThemeStudioPaletteEditor v-model:open="primaryEditorOpen" alias="primary" />
-      </div>
-    </fieldset>
-
-    <fieldset>
-      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.neutral = !openSections.neutral">
-          Neutral
-
-          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.neutral }" />
-        </button>
-
-        <UButton
-          to="/docs/getting-started/theme/css-variables#text"
-          size="xs"
-          color="neutral"
-          variant="link"
-          icon="i-lucide-help-circle"
-          class="p-0 -my-0.5"
-          :ui="{ leadingIcon: 'size-3' }"
-        />
-
-        <UButton
-          label="Custom"
-          :icon="isCustomPalette('neutral') ? 'i-lucide-paintbrush' : 'i-lucide-wand-sparkles'"
-          color="neutral"
-          :variant="neutralEditorOpen ? 'soft' : 'ghost'"
-          size="xs"
-          class="-my-1 text-[11px]"
-          :ui="{ leadingIcon: isCustomPalette('neutral') ? 'text-primary size-3' : 'size-3' }"
-          @click="neutralEditorOpen = !neutralEditorOpen"
-        />
-      </legend>
-
-      <div v-show="openSections.neutral">
-        <UPopover :content="{ side: 'bottom', align: 'start' }">
-          <UButton
-            color="neutral"
-            variant="outline"
-            size="sm"
-            block
-            trailing-icon="i-lucide-chevron-down"
-            class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
-            :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-          >
-            <template #leading>
-              <span
-                class="inline-block size-3 rounded-full"
-                :style="{ backgroundColor: neutralSwatch.color }"
+            <div v-if="(style.shadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
+              <USelect
+                v-model="shadowColor"
+                size="sm"
+                color="neutral"
+                icon="i-lucide-paint-bucket"
+                :items="shadowColorItems"
+                class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
+                :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
               />
-            </template>
 
-            {{ neutralSwatch.label }}
-          </UButton>
+              <template v-if="shadowColor === 'shade'">
+                <ThemeStudioShadeSlider
+                  v-for="(slider, modeName) in shadowShades"
+                  :key="modeName"
+                  v-model="slider.value"
+                  :mode="modeName"
+                  :chip="neutralChip"
+                />
+              </template>
+
+              <div class="flex items-center gap-2">
+                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Opacity</span>
+
+                <USlider v-model="shadowOpacity" :min="5" :max="100" :step="5" size="xs" />
+
+                <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ shadowOpacity }}%</span>
+              </div>
 
-          <template #content>
-            <div class="grid grid-cols-3 gap-1 w-72 p-2">
+              <template v-if="(style.shadow || 'none') === 'hard'">
+                <div v-for="field in geometryFields" :key="field.key" class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
+
+                  <USlider v-model="geometry[field.key].value" :min="field.min" :max="field.max" :step="1" size="xs" />
+
+                  <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ geometry[field.key].value }}px</span>
+                </div>
+              </template>
+            </div>
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.borders = !openSections.borders">
+              Borders
+
+              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.borders }" />
+            </button>
+          </legend>
+
+          <div v-show="openSections.borders">
+            <div class="grid grid-cols-3 gap-1">
               <ThemePickerButton
-                v-for="color in neutralColors"
-                :key="color"
-                :label="color"
-                :chip="color === 'neutral' ? 'old-neutral' : color"
-                :selected="neutral === color"
-                @click="selectPalette('neutral', color)"
+                v-for="option in borderOptions"
+                :key="option.value"
+                :label="option.label"
+                class="justify-center px-0"
+                :selected="(style.border || 'default') === option.value"
+                @click="setStyle({ border: option.value })"
               />
             </div>
-          </template>
-        </UPopover>
 
-        <ThemeStudioPaletteEditor v-model:open="neutralEditorOpen" alias="neutral" />
-      </div>
-    </fieldset>
-
-    <fieldset>
-      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.radius = !openSections.radius">
-          Radius
-
-          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.radius }" />
-        </button>
-
-        <UButton
-          to="/docs/getting-started/theme/css-variables#radius"
-          size="xs"
-          color="neutral"
-          variant="link"
-          icon="i-lucide-help-circle"
-          class="p-0 -my-0.5"
-          :ui="{ leadingIcon: 'size-3' }"
-        />
-      </legend>
-
-      <div v-show="openSections.radius" class="flex items-center gap-3">
-        <USlider
-          v-model="radius"
-          :min="0"
-          :max="0.5"
-          :step="0.125"
-          size="sm"
-        />
-
-        <span class="text-[11px] font-mono text-muted tabular-nums shrink-0 w-14 text-right">{{ radius }}rem</span>
+            <div class="mt-1.5 flex flex-col gap-2">
+              <USelect
+                v-model="borderColor"
+                size="sm"
+                color="neutral"
+                icon="i-lucide-paint-bucket"
+                :items="borderColorItems"
+                class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
+                :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+              />
+
+              <template v-if="borderColor === 'shade'">
+                <ThemeStudioShadeSlider
+                  v-for="(slider, modeName) in borderShades"
+                  :key="modeName"
+                  v-model="slider.value"
+                  :mode="modeName"
+                  :chip="neutralChip"
+                />
+              </template>
+            </div>
+          </div>
+        </fieldset>
       </div>
-    </fieldset>
-
-    <fieldset>
-      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.shadows = !openSections.shadows">
-          Shadows
-
-          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.shadows }" />
-        </button>
-      </legend>
-
-      <div v-show="openSections.shadows">
-        <div class="grid grid-cols-3 gap-1">
-          <ThemePickerButton
-            v-for="option in shadowOptions"
-            :key="option.value"
-            :label="option.label"
-            class="justify-center px-0"
-            :selected="(style.shadow || 'none') === option.value"
-            @click="setStyle({ shadow: option.value })"
-          />
-        </div>
-
-        <div v-if="(style.shadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
-          <USelect
-            v-model="shadowColor"
-            size="sm"
-            color="neutral"
-            icon="i-lucide-paint-bucket"
-            :items="shadowColorItems"
-            class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
-            :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-          />
-
-          <template v-if="shadowColor === 'shade'">
+    </template>
+
+    <template #tokens>
+      <div class="flex flex-col gap-5 pt-1 pb-4">
+        <fieldset v-for="section in tokenSections" :key="section.token">
+          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections[section.token] = !openSections[section.token]">
+              {{ section.label }}
+
+              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections[section.token] }" />
+            </button>
+          </legend>
+
+          <div v-show="openSections[section.token]" class="flex flex-col gap-2">
             <ThemeStudioShadeSlider
-              v-for="(slider, modeName) in shadowShades"
+              v-for="(slider, modeName) in section.sliders"
               :key="modeName"
               v-model="slider.value"
               :mode="modeName"
               :chip="neutralChip"
             />
-          </template>
-        </div>
+          </div>
+        </fieldset>
       </div>
-    </fieldset>
-
-    <fieldset>
-      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.borders = !openSections.borders">
-          Borders
-
-          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.borders }" />
-        </button>
-      </legend>
-
-      <div v-show="openSections.borders">
-        <div class="grid grid-cols-3 gap-1">
-          <ThemePickerButton
-            v-for="option in borderOptions"
-            :key="option.value"
-            :label="option.label"
-            class="justify-center px-0"
-            :selected="(style.border || 'default') === option.value"
-            @click="setStyle({ border: option.value })"
-          />
-        </div>
-
-        <div class="mt-1.5 flex flex-col gap-2">
-          <USelect
-            v-model="borderColor"
-            size="sm"
-            color="neutral"
-            icon="i-lucide-paint-bucket"
-            :items="borderColorItems"
-            class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
-            :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-          />
-
-          <template v-if="borderColor === 'shade'">
-            <ThemeStudioShadeSlider
-              v-for="(slider, modeName) in borderShades"
-              :key="modeName"
-              v-model="slider.value"
-              :mode="modeName"
-              :chip="neutralChip"
+    </template>
+
+    <template #general>
+      <div class="flex flex-col gap-5 pt-1 pb-4">
+        <fieldset>
+          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.font = !openSections.font">
+              Font
+
+              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.font }" />
+            </button>
+
+            <UButton
+              to="/docs/getting-started/integrations/fonts"
+              size="xs"
+              color="neutral"
+              variant="link"
+              icon="i-lucide-help-circle"
+              class="p-0 -my-0.5"
+              :ui="{ leadingIcon: 'size-3' }"
             />
-          </template>
-        </div>
-      </div>
-    </fieldset>
-
-    <fieldset v-for="section in tokenSections" :key="section.token">
-      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections[section.token] = !openSections[section.token]">
-          {{ section.label }}
-
-          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections[section.token] }" />
-        </button>
-      </legend>
-
-      <div v-show="openSections[section.token]" class="flex flex-col gap-2">
-        <ThemeStudioShadeSlider
-          v-for="(slider, modeName) in section.sliders"
-          :key="modeName"
-          v-model="slider.value"
-          :mode="modeName"
-          :chip="neutralChip"
-        />
-      </div>
-    </fieldset>
-
-    <fieldset>
-      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.font = !openSections.font">
-          Font
-
-          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.font }" />
-        </button>
-
-        <UButton
-          to="/docs/getting-started/integrations/fonts"
-          size="xs"
-          color="neutral"
-          variant="link"
-          icon="i-lucide-help-circle"
-          class="p-0 -my-0.5"
-          :ui="{ leadingIcon: 'size-3' }"
-        />
-      </legend>
-
-      <div v-show="openSections.font">
-        <USelect
-          v-model="font"
-          size="sm"
-          color="neutral"
-          icon="i-lucide-type"
-          :items="fonts"
-          class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
-          :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-        />
-      </div>
-    </fieldset>
-
-    <fieldset>
-      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.icons = !openSections.icons">
-          Icons
-
-          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.icons }" />
-        </button>
-
-        <UButton
-          to="/docs/getting-started/integrations/icons"
-          size="xs"
-          color="neutral"
-          variant="link"
-          icon="i-lucide-help-circle"
-          class="p-0 -my-0.5"
-          :ui="{ leadingIcon: 'size-3' }"
-        />
-      </legend>
-
-      <div v-show="openSections.icons">
-        <USelect
-          v-model="icon"
-          size="sm"
-          color="neutral"
-          :icon="icons.find(i => i.value === icon)?.icon"
-          :items="icons"
-          class="w-full ring-default rounded-sm hover:bg-elevated/50 capitalize text-xs data-[state=open]:bg-elevated/50"
-          :ui="{ item: 'capitalize text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-        />
-      </div>
-    </fieldset>
-
-    <fieldset>
-      <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-        <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.mode = !openSections.mode">
-          Color Mode
-
-          <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.mode }" />
-        </button>
-
-        <UButton
-          to="/docs/getting-started/integrations/color-mode"
-          size="xs"
-          color="neutral"
-          variant="link"
-          icon="i-lucide-help-circle"
-          class="p-0 -my-0.5"
-          :ui="{ leadingIcon: 'size-3' }"
-        />
-      </legend>
-
-      <div v-show="openSections.mode" class="grid grid-cols-3 gap-1">
-        <ThemePickerButton
-          v-for="m in modes"
-          :key="m.label"
-          v-bind="m"
-          :selected="colorMode.preference === m.label"
-          @click="mode = m.label"
-        />
+          </legend>
+
+          <div v-show="openSections.font">
+            <USelect
+              v-model="font"
+              size="sm"
+              color="neutral"
+              icon="i-lucide-type"
+              :items="fonts"
+              class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
+              :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+            />
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.icons = !openSections.icons">
+              Icons
+
+              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.icons }" />
+            </button>
+
+            <UButton
+              to="/docs/getting-started/integrations/icons"
+              size="xs"
+              color="neutral"
+              variant="link"
+              icon="i-lucide-help-circle"
+              class="p-0 -my-0.5"
+              :ui="{ leadingIcon: 'size-3' }"
+            />
+          </legend>
+
+          <div v-show="openSections.icons">
+            <USelect
+              v-model="icon"
+              size="sm"
+              color="neutral"
+              :icon="icons.find(i => i.value === icon)?.icon"
+              :items="icons"
+              class="w-full ring-default rounded-sm hover:bg-elevated/50 capitalize text-xs data-[state=open]:bg-elevated/50"
+              :ui="{ item: 'capitalize text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+            />
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.mode = !openSections.mode">
+              Color Mode
+
+              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.mode }" />
+            </button>
+
+            <UButton
+              to="/docs/getting-started/integrations/color-mode"
+              size="xs"
+              color="neutral"
+              variant="link"
+              icon="i-lucide-help-circle"
+              class="p-0 -my-0.5"
+              :ui="{ leadingIcon: 'size-3' }"
+            />
+          </legend>
+
+          <div v-show="openSections.mode" class="grid grid-cols-3 gap-1">
+            <ThemePickerButton
+              v-for="m in modes"
+              :key="m.label"
+              v-bind="m"
+              :selected="colorMode.preference === m.label"
+              @click="mode = m.label"
+            />
+          </div>
+        </fieldset>
       </div>
-    </fieldset>
-  </div>
+    </template>
+  </UAccordion>
 </template>
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 5fda6a77ce..de03268197 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -22,7 +22,7 @@ function readLocalStorage<T>(key: string, fallback: T): T {
 const SAFE_NAME = /^[\w -]{1,50}$/
 const SAFE_HEX = /^#[0-9a-f]{3,8}$/i
 const SAFE_CSS_VAR_KEY = /^--[\w-]+$/
-const SAFE_CSS_VAR_VALUE = /^(?:var\(--[\w-]+\)|#[0-9a-f]{3,8}|[a-z]+)$/i
+const SAFE_CSS_VAR_VALUE = /^(?:var\(--[\w-]+\)|#[0-9a-f]{3,8}|[a-z]+|-?\d{1,3}(?:\.\d+)?(?:px|%))$/i
 
 function sanitizeCustomColors(input: Record<string, any>): Record<string, Record<string, string>> {
   const result: Record<string, Record<string, string>> = {}
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 71579069ca..ff581d3fb1 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -39,6 +39,16 @@ export function useThemeStudio() {
   /** Shadow/border/token-shade prefs; the expanded class bundle lives in the style-ui channel. */
   const style = useState<StyleOptions>('nuxt-ui-style-prefs', () => readLocalStorage('nuxt-ui-style', {}))
 
+  // Self-heal: the persisted class bundle is an expansion of `style` frozen
+  // at write time — if the generator changed since (new fragment classes),
+  // regenerate it once so stale classes don't outlive their source.
+  if (import.meta.client) {
+    const expected = styleComponents(style.value)
+    if (JSON.stringify(expected) !== JSON.stringify(readLocalStorage('nuxt-ui-style-ui', {}))) {
+      onNuxtReady(() => theme.setStyleUi(expected))
+    }
+  }
+
   function setStyle(options: StyleOptions) {
     const previousStyle = style.value
     const previous = styleTokens(previousStyle)
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index f8edea8097..4afe1a4ce9 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -32,72 +32,72 @@ const presetItems = computed(() => presets.map(preset => ({
 </script>
 
 <template>
-  <main class="flex flex-col lg:h-[calc(100vh-var(--ui-header-height))]">
-    <div class="flex items-center gap-2 border-b border-default px-4 sm:px-6 py-3">
-      <UTooltip :text="sidebarOpen ? 'Hide settings' : 'Show settings'">
-        <UButton
-          :icon="sidebarOpen ? 'i-lucide-panel-left-close' : 'i-lucide-panel-left-open'"
-          color="neutral"
-          variant="ghost"
-          size="sm"
-          aria-label="Toggle settings panel"
-          @click="sidebarOpen = !sidebarOpen"
-        />
-      </UTooltip>
-
-      <h1 class="text-sm font-semibold text-highlighted me-2">
-        Theme Studio
-      </h1>
-
-      <UBadge label="Concept" variant="subtle" size="sm" />
-
-      <span class="flex-1" />
-
-      <UDropdownMenu :items="presetItems" :content="{ align: 'end' }">
-        <UButton
-          label="Presets"
-          icon="i-lucide-layout-grid"
-          trailing-icon="i-lucide-chevron-down"
-          color="neutral"
-          variant="outline"
-          size="sm"
-        />
-      </UDropdownMenu>
-
-      <UTooltip text="Random theme">
-        <UButton
-          label="Shuffle"
-          icon="i-lucide-dices"
-          color="neutral"
-          variant="outline"
-          size="sm"
-          @click="shuffle"
-        />
-      </UTooltip>
-
-      <ThemeStudioExport />
-
-      <UTooltip text="Reset theme">
-        <UButton
-          icon="i-lucide-rotate-ccw"
-          color="neutral"
-          variant="outline"
-          size="sm"
-          aria-label="Reset theme"
-          @click="reset"
-        />
-      </UTooltip>
-    </div>
-
-    <div class="flex-1 flex flex-col lg:flex-row min-h-0">
-      <aside
-        v-show="sidebarOpen"
-        class="shrink-0 lg:w-80 border-b lg:border-b-0 lg:border-r border-default lg:overflow-y-auto p-4 sm:p-6"
-      >
-        <ThemeStudioControls />
-      </aside>
+  <main class="flex flex-col lg:flex-row lg:h-[calc(100vh-var(--ui-header-height))]">
+    <aside
+      v-show="sidebarOpen"
+      class="shrink-0 lg:w-80 border-b lg:border-b-0 lg:border-r border-default lg:overflow-y-auto p-4"
+    >
+      <ThemeStudioControls />
+    </aside>
+
+    <div class="flex-1 flex flex-col min-w-0">
+      <div class="flex items-center gap-2 border-b border-default px-4 sm:px-6 py-3">
+        <UTooltip :text="sidebarOpen ? 'Hide settings' : 'Show settings'">
+          <UButton
+            :icon="sidebarOpen ? 'i-lucide-panel-left-close' : 'i-lucide-panel-left-open'"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            aria-label="Toggle settings panel"
+            @click="sidebarOpen = !sidebarOpen"
+          />
+        </UTooltip>
+
+        <h1 class="text-sm font-semibold text-highlighted me-2">
+          Theme Studio
+        </h1>
+
+        <UBadge label="Concept" variant="subtle" size="sm" />
+
+        <span class="flex-1" />
+
+        <UDropdownMenu :items="presetItems" :content="{ align: 'end' }">
+          <UButton
+            label="Presets"
+            icon="i-lucide-layout-grid"
+            trailing-icon="i-lucide-chevron-down"
+            color="neutral"
+            variant="outline"
+            size="sm"
+          />
+        </UDropdownMenu>
+
+        <UTooltip text="Random theme">
+          <UButton
+            label="Shuffle"
+            icon="i-lucide-dices"
+            color="neutral"
+            variant="outline"
+            size="sm"
+            @click="shuffle"
+          />
+        </UTooltip>
+
+        <ThemeStudioExport />
+
+        <UTooltip text="Reset theme">
+          <UButton
+            icon="i-lucide-rotate-ccw"
+            color="neutral"
+            variant="outline"
+            size="sm"
+            aria-label="Reset theme"
+            @click="reset"
+          />
+        </UTooltip>
+      </div>
 
-      <div class="flex-1 min-w-0 lg:overflow-y-auto p-4 sm:p-6">
+      <div class="flex-1 lg:overflow-y-auto p-4 sm:p-6">
         <ThemeStudioBento />
       </div>
     </div>
diff --git a/docs/app/plugins/theme.ts b/docs/app/plugins/theme.ts
index 60306778d4..d834be8e95 100644
--- a/docs/app/plugins/theme.ts
+++ b/docs/app/plugins/theme.ts
@@ -34,6 +34,21 @@ export default defineNuxtPlugin({
       restoreState('nuxt-ui-custom-colors')
       restoreState('nuxt-ui-css-variables')
 
+      // Studio prefs use useState keys that differ from their storage keys
+      // (state must be clearable by resetTheme outside the composable).
+      function restoreNamedState<T>(storageKey: string, stateKey: string) {
+        try {
+          const raw = localStorage.getItem(storageKey)
+          if (raw) {
+            useState<T>(stateKey).value = JSON.parse(raw)
+          }
+        } catch {
+          // ignore malformed localStorage
+        }
+      }
+      restoreNamedState('nuxt-ui-style', 'nuxt-ui-style-prefs')
+      restoreNamedState('nuxt-ui-palette-params', 'nuxt-ui-palette-params-state')
+
       try {
         const extras = JSON.parse(localStorage.getItem('nuxt-ui-ai-theme') || '{}')
         if (extras.colors) {
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index 720bb3c2a7..59a28fef95 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -43,9 +43,27 @@ export function generateCSS(doc: ThemeDoc): string {
   // Color variables behind the style treatment. Hard shadows always need
   // --ui-shadow-color defined; explicit color choices override per mode.
   const style = styleTokens(doc.style || {})
-  if (doc.style?.shadow === 'hard' && !style.light['--ui-shadow-color']) {
-    style.light['--ui-shadow-color'] = 'var(--ui-color-neutral-950)'
-    style.dark['--ui-shadow-color'] = 'black'
+  if (doc.style?.shadow === 'hard') {
+    if (!style.light['--ui-shadow-color']) {
+      style.light['--ui-shadow-color'] = 'var(--ui-color-neutral-950)'
+      style.dark['--ui-shadow-color'] = 'black'
+    }
+    // The hard-shadow classes reference the geometry variables — a
+    // standalone export must define them even at default values.
+    if (!style.light['--ui-shadow-offset-x']) {
+      style.light['--ui-shadow-offset-x'] = '3px'
+      style.light['--ui-shadow-offset-y'] = '3px'
+      style.light['--ui-shadow-blur'] = '0px'
+      style.light['--ui-shadow-spread'] = '0px'
+    }
+  }
+  if (doc.style?.shadow && doc.style.shadow !== 'none') {
+    if (doc.style.shadow === 'soft' && !style.light['--ui-shadow-color']) {
+      style.light['--ui-shadow-color'] = 'var(--ui-color-neutral-950)'
+      style.dark['--ui-shadow-color'] = 'black'
+    }
+    style.light['--ui-shadow-final-hard'] = 'color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 100%), transparent)'
+    style.light['--ui-shadow-final-soft'] = 'color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 25%), transparent)'
   }
 
   if (Object.keys(style.light).length) {
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 776976a89a..77d2788de7 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -30,6 +30,8 @@ export type ShadowStyle = 'none' | 'soft' | 'hard'
 export type BorderStyle = 'default' | 'bold' | 'frame'
 export type BorderColor = 'default' | 'inverted' | 'black' | 'white' | 'primary' | 'neutral' | 'shade'
 export type ShadowColor = 'default' | 'black' | 'inverted' | 'primary' | 'shade'
+export type DefaultVariant = 'default' | 'solid' | 'outline' | 'soft' | 'subtle'
+export type DefaultSize = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 
 export interface StyleOptions {
   shadow?: ShadowStyle
@@ -40,6 +42,23 @@ export interface StyleOptions {
   shadowShade?: { light: number, dark: number }
   /** Neutral ramp shade per mode, used when `borderColor` is 'shade' */
   borderShade?: { light: number, dark: number }
+  /**
+   * App-wide default variant/size, expanded into per-component
+   * `defaultVariants` — the runtime override channel Nuxt UI already
+   * honors — only for components that actually support the chosen value.
+   */
+  defaults?: { variant?: DefaultVariant, size?: DefaultSize }
+  /**
+   * Hard-shadow geometry in px, driving --ui-shadow-offset-x/y/blur/spread.
+   * Only meaningful while `shadow` is 'hard'.
+   */
+  shadowGeometry?: { x?: number, y?: number, blur?: number, spread?: number }
+  /**
+   * Shadow opacity in percent, driving --ui-shadow-opacity. Applies to both
+   * treatments; unset falls back to 100% (hard) / 25% (soft) via the
+   * per-treatment color-mix fallbacks.
+   */
+  shadowOpacity?: number
   /**
    * Semantic token → neutral ramp shade, per mode. Strictly a token
    * shorthand parked on the style axis until the studio grows a full
@@ -51,6 +70,23 @@ export interface StyleOptions {
   tokenShades?: Record<string, { light?: number, dark?: number }>
 }
 
+/** Which components support which app-wide default variant values. */
+const VARIANT_SUPPORT: Record<string, string[]> = {
+  button: ['solid', 'outline', 'soft', 'subtle'],
+  badge: ['solid', 'outline', 'soft', 'subtle'],
+  alert: ['solid', 'outline', 'soft', 'subtle'],
+  card: ['solid', 'outline', 'soft', 'subtle'],
+  // form fields have no solid variant — an unsupported value would
+  // silently unstyle them, so they keep their default instead
+  input: ['outline', 'soft', 'subtle'],
+  select: ['outline', 'soft', 'subtle'],
+  textarea: ['outline', 'soft', 'subtle']
+}
+
+const SIZE_SUPPORT = ['button', 'badge', 'input', 'select', 'textarea']
+
+export const SHADOW_GEOMETRY_DEFAULTS = { x: 3, y: 3, blur: 0, spread: 0 }
+
 /** Borders default opposite to the surface: dark ink on light, pale on dark. */
 export const BORDER_SHADE_DEFAULTS = { light: 900, dark: 200 }
 
@@ -70,6 +106,7 @@ export const SHADOW_SHADE_DEFAULTS = { light: 950, dark: 800 }
 interface ComponentFragment {
   slots?: Record<string, string>
   compoundVariants?: Array<Record<string, unknown>>
+  defaultVariants?: Record<string, string>
 }
 
 type Fragments = Record<string, ComponentFragment>
@@ -77,18 +114,23 @@ type Fragments = Record<string, ComponentFragment>
 const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
   none: {},
   soft: {
-    button: { slots: { base: 'shadow-sm' } },
-    card: { slots: { root: 'shadow-md' } },
-    input: { slots: { base: 'shadow-xs' } },
-    select: { slots: { base: 'shadow-xs' } },
-    textarea: { slots: { base: 'shadow-xs' } },
-    alert: { slots: { root: 'shadow-md' } },
-    badge: { slots: { base: 'shadow-xs' } }
+    // shadow-(color:--ui-shadow-final-soft) recolors the preset shadows through the
+    // same variable the hard treatment uses, so the color/shade options
+    // apply to soft shadows too (tailwind stock shadows are hardcoded black).
+    button: { slots: { base: 'shadow-sm shadow-(color:--ui-shadow-final-soft)' } },
+    card: { slots: { root: 'shadow-md shadow-(color:--ui-shadow-final-soft)' } },
+    input: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)' } },
+    select: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)' } },
+    textarea: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)' } },
+    alert: { slots: { root: 'shadow-md shadow-(color:--ui-shadow-final-soft)' } },
+    badge: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)' } }
   },
   hard: {
     button: {
       slots: {
-        base: 'shadow-[3px_3px_0_0_var(--ui-shadow-color)] hover:translate-x-[1.5px] hover:translate-y-[1.5px] hover:shadow-[1.5px_1.5px_0_0_var(--ui-shadow-color)] active:translate-x-[3px] active:translate-y-[3px] active:shadow-none transition-[box-shadow,translate,background-color]'
+        // Geometry rides CSS variables so the sliders are a variable swap;
+        // hover sinks halfway into the shadow via calc, active collapses it.
+        base: 'shadow-[var(--ui-shadow-offset-x)_var(--ui-shadow-offset-y)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)] hover:translate-x-[calc(var(--ui-shadow-offset-x)/2)] hover:translate-y-[calc(var(--ui-shadow-offset-y)/2)] hover:shadow-[calc(var(--ui-shadow-offset-x)/2)_calc(var(--ui-shadow-offset-y)/2)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)] active:translate-x-(--ui-shadow-offset-x) active:translate-y-(--ui-shadow-offset-y) active:shadow-none transition-[box-shadow,translate,background-color]'
       },
       // A floating shadow under an invisible box reads as a glitch — ghost
       // and link buttons stay flat, as in the reference neobrutalism kits.
@@ -97,12 +139,12 @@ const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
         { variant: 'link', class: 'shadow-none hover:translate-x-0 hover:translate-y-0 hover:shadow-none active:translate-x-0 active:translate-y-0' }
       ]
     },
-    card: { slots: { root: 'shadow-[5px_5px_0_0_var(--ui-shadow-color)]' } },
-    input: { slots: { base: 'shadow-[3px_3px_0_0_var(--ui-shadow-color)]' } },
-    select: { slots: { base: 'shadow-[3px_3px_0_0_var(--ui-shadow-color)]' } },
-    textarea: { slots: { base: 'shadow-[3px_3px_0_0_var(--ui-shadow-color)]' } },
-    alert: { slots: { root: 'shadow-[5px_5px_0_0_var(--ui-shadow-color)]' } },
-    badge: { slots: { base: 'shadow-[2px_2px_0_0_var(--ui-shadow-color)]' } }
+    card: { slots: { root: 'shadow-[calc(var(--ui-shadow-offset-x)*1.5)_calc(var(--ui-shadow-offset-y)*1.5)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' } },
+    input: { slots: { base: 'shadow-[var(--ui-shadow-offset-x)_var(--ui-shadow-offset-y)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' } },
+    select: { slots: { base: 'shadow-[var(--ui-shadow-offset-x)_var(--ui-shadow-offset-y)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' } },
+    textarea: { slots: { base: 'shadow-[var(--ui-shadow-offset-x)_var(--ui-shadow-offset-y)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' } },
+    alert: { slots: { root: 'shadow-[calc(var(--ui-shadow-offset-x)*1.5)_calc(var(--ui-shadow-offset-y)*1.5)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' } },
+    badge: { slots: { base: 'shadow-[calc(var(--ui-shadow-offset-x)*0.66)_calc(var(--ui-shadow-offset-y)*0.66)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' } }
   }
 }
 
@@ -214,6 +256,19 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
     }
   }
 
+  if (style.shadow && style.shadow !== 'none' && style.shadowOpacity !== undefined) {
+    light['--ui-shadow-opacity'] = `${style.shadowOpacity}%`
+    dark['--ui-shadow-opacity'] = `${style.shadowOpacity}%`
+  }
+
+  if (style.shadow === 'hard' && style.shadowGeometry) {
+    const geometry = { ...SHADOW_GEOMETRY_DEFAULTS, ...style.shadowGeometry }
+    for (const [axis, token] of [['x', '--ui-shadow-offset-x'], ['y', '--ui-shadow-offset-y'], ['blur', '--ui-shadow-blur'], ['spread', '--ui-shadow-spread']] as const) {
+      light[token] = `${geometry[axis]}px`
+      dark[token] = `${geometry[axis]}px`
+    }
+  }
+
   if (style.shadowColor === 'shade') {
     // Per-mode neutral ramp shade — a graded gray shadow that darkens or
     // lightens independently of the scheme it sits on.
@@ -235,7 +290,28 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
  * and win the tailwind-merge for ring color.
  */
 export function styleComponents(style: StyleOptions): Fragments {
+  // App-wide defaults, only where the component supports the chosen value.
+  const defaults: Fragments = {}
+  const variant = style.defaults?.variant
+  if (variant && variant !== 'default') {
+    for (const [component, supported] of Object.entries(VARIANT_SUPPORT)) {
+      if (supported.includes(variant)) {
+        defaults[component] = { defaultVariants: { variant } }
+      }
+    }
+  }
+  const size = style.defaults?.size
+  if (size && size !== 'default') {
+    for (const component of SIZE_SUPPORT) {
+      defaults[component] = {
+        ...defaults[component],
+        defaultVariants: { ...(defaults[component] as any)?.defaultVariants, size }
+      }
+    }
+  }
+
   const sources = [
+    defaults,
     SHADOW_FRAGMENTS[style.shadow ?? 'none'],
     BORDER_FRAGMENTS[style.border ?? 'default'],
     style.borderColor && style.borderColor !== 'default' ? FRAME_COLOR_FRAGMENTS : {}
@@ -253,6 +329,9 @@ export function styleComponents(style: StyleOptions): Fragments {
       if (fragment.compoundVariants) {
         target.compoundVariants = [...(target.compoundVariants || []), ...fragment.compoundVariants]
       }
+      if (fragment.defaultVariants) {
+        target.defaultVariants = { ...target.defaultVariants, ...fragment.defaultVariants }
+      }
     }
   }
 
@@ -283,6 +362,9 @@ export function mergeComponentOverrides(
       result[key] = a
     } else if (key === 'compoundVariants' && Array.isArray(a) && Array.isArray(b)) {
       result[key] = [...a, ...b]
+    } else if (key === 'defaultVariants') {
+      // variant NAMES, not class strings — later value replaces per key
+      result[key] = { ...a, ...b }
     } else if (typeof a === 'string' && typeof b === 'string') {
       result[key] = `${a} ${b}`
     } else if (typeof a === 'object' && typeof b === 'object' && !Array.isArray(a) && !Array.isArray(b)) {
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 17981bc91a..acc2d816ce 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -221,13 +221,13 @@ describe('styleComponents', () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
     const components = styleComponents({ shadow: 'hard', border: 'bold' })
 
-    expect(components.button!.slots!.base).toContain('shadow-[3px_3px_0_0_var(--ui-shadow-color)]')
+    expect(components.button!.slots!.base).toContain('shadow-[var(--ui-shadow-offset-x)_var(--ui-shadow-offset-y)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]')
     // bold only thickens existing rings: buttons gain no base ring, the
     // outline/subtle compound overrides carry width only
     expect(components.button!.slots!.base).not.toContain('ring')
     expect(components.button!.compoundVariants).toContainEqual({ variant: 'outline', class: 'ring-2' })
     // card rings live at variant level, so bold ships compounds, not slots
-    expect(components.card!.slots?.root ?? '').toContain('shadow-[5px_5px_0_0_var(--ui-shadow-color)]')
+    expect(components.card!.slots?.root ?? '').toContain('var(--ui-shadow-final-hard)]')
     expect(components.card!.compoundVariants).toContainEqual({ variant: 'outline', class: { root: 'ring-2' } })
   })
 
@@ -251,9 +251,9 @@ describe('styleComponents', () => {
     const merged = mergeUi(styleComponents({ shadow: 'hard' }), { button: { slots: { base: 'rounded-full' } } })
 
     // both the shadow classes and the explicit override survive, explicit last
-    expect(merged.button.slots.base).toContain('shadow-[3px_3px_0_0_var(--ui-shadow-color)]')
+    expect(merged.button.slots.base).toContain('var(--ui-shadow-final-hard)]')
     expect(merged.button.slots.base.endsWith('rounded-full')).toBe(true)
-    expect(merged.card.slots.root).toContain('shadow-[5px_5px_0_0_var(--ui-shadow-color)]')
+    expect(merged.card.slots.root).toContain('var(--ui-shadow-final-hard)]')
   })
 })
 
@@ -313,6 +313,36 @@ describe('style colors', () => {
     expect(styleTokens({ tokenShades: { '--ui-evil': { light: 50, dark: 50 } } })).toEqual({ light: {}, dark: {} })
   })
 
+  it('expands app-wide defaults only where the component supports them', async () => {
+    const { styleComponents } = await import('../../docs/app/utils/theme-engine')
+    const components = styleComponents({ defaults: { variant: 'solid', size: 'lg' } })
+
+    expect(components.button!.defaultVariants).toEqual({ variant: 'solid', size: 'lg' })
+    expect(components.card!.defaultVariants).toEqual({ variant: 'solid' })
+    // inputs have no solid variant: size applies, variant stays default
+    expect(components.input!.defaultVariants).toEqual({ size: 'lg' })
+    // subtle IS supported by inputs
+    expect(styleComponents({ defaults: { variant: 'subtle' } }).input!.defaultVariants).toEqual({ variant: 'subtle' })
+  })
+
+  it('emits hard-shadow geometry variables and keeps defaultVariants replace semantics', async () => {
+    const { styleTokens, mergeUi } = await import('../../docs/app/utils/theme-engine')
+
+    const tokens = styleTokens({ shadow: 'hard', shadowGeometry: { x: 6, blur: 4 } })
+    expect(tokens.light['--ui-shadow-offset-x']).toBe('6px')
+    expect(tokens.light['--ui-shadow-offset-y']).toBe('3px')
+    expect(tokens.light['--ui-shadow-blur']).toBe('4px')
+    // geometry is meaningless without hard shadows
+    expect(styleTokens({ shadowGeometry: { x: 6 } }).light).toEqual({})
+
+    // defaultVariants merge by replacement, not class concatenation
+    const merged = mergeUi(
+      { button: { defaultVariants: { variant: 'solid', size: 'md' } } },
+      { button: { defaultVariants: { variant: 'subtle' } } }
+    )
+    expect(merged.button.defaultVariants).toEqual({ variant: 'subtle', size: 'md' })
+  })
+
   it('styleTokens supports per-mode border shades', async () => {
     const { styleTokens } = await import('../../docs/app/utils/theme-engine')
 

From e9c1a4040ee4024657e2fd074fde8327ca6831d8 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 04:49:31 +0200
Subject: [PATCH 023/185] =?UTF-8?q?feat(docs):=20sidebar=20polish=20?=
 =?UTF-8?q?=E2=80=94=20mode=20tabs,=20single-open=20groups,=20ghost=20sect?=
 =?UTF-8?q?ion=20headers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Color mode moves out of the accordion to UTabs pinned at the top of the
sidebar. Group panels are a single-open UAccordion (one section of the
studio in focus at a time), and the sub-section collapsibles become
ghost buttons with leading rotating chevrons. Shade options in the
color selects read 'Custom…'.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 875 +++++++++---------
 docs/app/pages/theme.vue                      |   2 +-
 2 files changed, 452 insertions(+), 425 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 2d83b1d6f8..899256022b 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { TOKEN_SHADE_TARGETS, SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, SHADOW_GEOMETRY_DEFAULTS } from '../../utils/theme-engine'
 
-const colorMode = useColorMode()
-
 const {
   neutralColors,
   neutral,
@@ -139,10 +137,12 @@ const tokenSections = TOKEN_SHADE_TARGETS.map(target => ({
 
 const neutralChip = computed(() => neutral.value === 'neutral' ? 'old-neutral' : neutral.value)
 
+const modeTabs = computed(() => modes.value.map(m => ({ label: m.label, icon: m.icon, value: m.label })))
+
 const primaryEditorOpen = ref(false)
 const neutralEditorOpen = ref(false)
 
-const openGroups = ref(['colors', 'style', 'tokens', 'general'])
+const openGroups = ref('colors')
 
 const groupItems = [
   { label: 'Colors', value: 'colors', slot: 'colors' as const },
@@ -207,461 +207,488 @@ const shadowColor = computed({
 </script>
 
 <template>
-  <UAccordion
-    v-model="openGroups"
-    default-value="colors"
-    :items="groupItems"
-    :unmount-on-hide="false"
-  >
-    <template #colors>
-      <div class="flex flex-col gap-5 pt-1 pb-4">
-        <fieldset>
-          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.primary = !openSections.primary">
-              Primary
-
-              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.primary }" />
-            </button>
-
-            <UButton
-              to="/docs/getting-started/theme/css-variables#colors"
-              size="xs"
-              color="neutral"
-              variant="link"
-              icon="i-lucide-help-circle"
-              class="p-0 -my-0.5"
-              :ui="{ leadingIcon: 'size-3' }"
-            />
-
-            <UButton
-              label="Custom"
-              :icon="isCustomPalette('primary') ? 'i-lucide-paintbrush' : 'i-lucide-wand-sparkles'"
-              color="neutral"
-              :variant="primaryEditorOpen ? 'soft' : 'ghost'"
-              size="xs"
-              class="-my-1 text-[11px]"
-              :ui="{ leadingIcon: isCustomPalette('primary') ? 'text-primary size-3' : 'size-3' }"
-              @click="primaryEditorOpen = !primaryEditorOpen"
-            />
-          </legend>
-
-          <div v-show="openSections.primary">
-            <UPopover :content="{ side: 'bottom', align: 'start' }">
+  <div class="flex flex-col gap-3">
+    <UTabs
+      v-model="mode"
+      :items="modeTabs"
+      :content="false"
+      size="xs"
+      color="primary"
+      class="w-full"
+      :ui="{ trigger: 'text-[11px] capitalize' }"
+    />
+
+    <UAccordion
+      v-model="openGroups"
+
+      :items="groupItems"
+      :unmount-on-hide="false"
+    >
+      <template #colors>
+        <div class="flex flex-col gap-5 pt-1 pb-4">
+          <fieldset>
+            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
               <UButton
+                label="Primary"
                 color="neutral"
-                variant="outline"
-                size="sm"
-                block
-                trailing-icon="i-lucide-chevron-down"
-                class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
-                :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-              >
-                <template #leading>
-                  <span
-                    class="inline-block size-3 rounded-full"
-                    :class="{ 'bg-black dark:bg-white': blackAsPrimary }"
-                    :style="primarySwatch.color ? { backgroundColor: primarySwatch.color } : undefined"
-                  />
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-chevron-down"
+                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
+                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.primary && '-rotate-90'] }"
+                @click="openSections.primary = !openSections.primary"
+              />
+
+              <UButton
+                to="/docs/getting-started/theme/css-variables#colors"
+                size="xs"
+                color="neutral"
+                variant="link"
+                icon="i-lucide-help-circle"
+                class="p-0 -my-0.5"
+                :ui="{ leadingIcon: 'size-3' }"
+              />
+
+              <UButton
+                label="Custom"
+                :icon="isCustomPalette('primary') ? 'i-lucide-paintbrush' : 'i-lucide-wand-sparkles'"
+                color="neutral"
+                :variant="primaryEditorOpen ? 'soft' : 'ghost'"
+                size="xs"
+                class="-my-1 text-[11px]"
+                :ui="{ leadingIcon: isCustomPalette('primary') ? 'text-primary size-3' : 'size-3' }"
+                @click="primaryEditorOpen = !primaryEditorOpen"
+              />
+            </legend>
+
+            <div v-show="openSections.primary">
+              <UPopover :content="{ side: 'bottom', align: 'start' }">
+                <UButton
+                  color="neutral"
+                  variant="outline"
+                  size="sm"
+                  block
+                  trailing-icon="i-lucide-chevron-down"
+                  class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
+                  :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                >
+                  <template #leading>
+                    <span
+                      class="inline-block size-3 rounded-full"
+                      :class="{ 'bg-black dark:bg-white': blackAsPrimary }"
+                      :style="primarySwatch.color ? { backgroundColor: primarySwatch.color } : undefined"
+                    />
+                  </template>
+
+                  {{ primarySwatch.label }}
+                </UButton>
+
+                <template #content>
+                  <div class="grid grid-cols-3 gap-1 w-72 p-2">
+                    <ThemePickerButton
+                      label="Black"
+                      :selected="blackAsPrimary"
+                      @click="setBlackAsPrimary(true)"
+                    >
+                      <template #leading>
+                        <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
+                      </template>
+                    </ThemePickerButton>
+
+                    <ThemePickerButton
+                      v-for="color in primaryColors"
+                      :key="color"
+                      :label="color"
+                      :chip="color"
+                      :selected="!blackAsPrimary && primary === color"
+                      @click="selectPalette('primary', color)"
+                    />
+                  </div>
                 </template>
+              </UPopover>
 
-                {{ primarySwatch.label }}
-              </UButton>
-
-              <template #content>
-                <div class="grid grid-cols-3 gap-1 w-72 p-2">
-                  <ThemePickerButton
-                    label="Black"
-                    :selected="blackAsPrimary"
-                    @click="setBlackAsPrimary(true)"
-                  >
-                    <template #leading>
-                      <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
-                    </template>
-                  </ThemePickerButton>
-
-                  <ThemePickerButton
-                    v-for="color in primaryColors"
-                    :key="color"
-                    :label="color"
-                    :chip="color"
-                    :selected="!blackAsPrimary && primary === color"
-                    @click="selectPalette('primary', color)"
-                  />
-                </div>
-              </template>
-            </UPopover>
-
-            <ThemeStudioPaletteEditor v-model:open="primaryEditorOpen" alias="primary" />
-          </div>
-        </fieldset>
-
-        <fieldset>
-          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.neutral = !openSections.neutral">
-              Neutral
-
-              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.neutral }" />
-            </button>
-
-            <UButton
-              to="/docs/getting-started/theme/css-variables#text"
-              size="xs"
-              color="neutral"
-              variant="link"
-              icon="i-lucide-help-circle"
-              class="p-0 -my-0.5"
-              :ui="{ leadingIcon: 'size-3' }"
-            />
-
-            <UButton
-              label="Custom"
-              :icon="isCustomPalette('neutral') ? 'i-lucide-paintbrush' : 'i-lucide-wand-sparkles'"
-              color="neutral"
-              :variant="neutralEditorOpen ? 'soft' : 'ghost'"
-              size="xs"
-              class="-my-1 text-[11px]"
-              :ui="{ leadingIcon: isCustomPalette('neutral') ? 'text-primary size-3' : 'size-3' }"
-              @click="neutralEditorOpen = !neutralEditorOpen"
-            />
-          </legend>
-
-          <div v-show="openSections.neutral">
-            <UPopover :content="{ side: 'bottom', align: 'start' }">
+              <ThemeStudioPaletteEditor v-model:open="primaryEditorOpen" alias="primary" />
+            </div>
+          </fieldset>
+
+          <fieldset>
+            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
               <UButton
+                label="Neutral"
                 color="neutral"
-                variant="outline"
-                size="sm"
-                block
-                trailing-icon="i-lucide-chevron-down"
-                class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
-                :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-              >
-                <template #leading>
-                  <span
-                    class="inline-block size-3 rounded-full"
-                    :style="{ backgroundColor: neutralSwatch.color }"
-                  />
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-chevron-down"
+                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
+                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.neutral && '-rotate-90'] }"
+                @click="openSections.neutral = !openSections.neutral"
+              />
+
+              <UButton
+                to="/docs/getting-started/theme/css-variables#text"
+                size="xs"
+                color="neutral"
+                variant="link"
+                icon="i-lucide-help-circle"
+                class="p-0 -my-0.5"
+                :ui="{ leadingIcon: 'size-3' }"
+              />
+
+              <UButton
+                label="Custom"
+                :icon="isCustomPalette('neutral') ? 'i-lucide-paintbrush' : 'i-lucide-wand-sparkles'"
+                color="neutral"
+                :variant="neutralEditorOpen ? 'soft' : 'ghost'"
+                size="xs"
+                class="-my-1 text-[11px]"
+                :ui="{ leadingIcon: isCustomPalette('neutral') ? 'text-primary size-3' : 'size-3' }"
+                @click="neutralEditorOpen = !neutralEditorOpen"
+              />
+            </legend>
+
+            <div v-show="openSections.neutral">
+              <UPopover :content="{ side: 'bottom', align: 'start' }">
+                <UButton
+                  color="neutral"
+                  variant="outline"
+                  size="sm"
+                  block
+                  trailing-icon="i-lucide-chevron-down"
+                  class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
+                  :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                >
+                  <template #leading>
+                    <span
+                      class="inline-block size-3 rounded-full"
+                      :style="{ backgroundColor: neutralSwatch.color }"
+                    />
+                  </template>
+
+                  {{ neutralSwatch.label }}
+                </UButton>
+
+                <template #content>
+                  <div class="grid grid-cols-3 gap-1 w-72 p-2">
+                    <ThemePickerButton
+                      v-for="color in neutralColors"
+                      :key="color"
+                      :label="color"
+                      :chip="color === 'neutral' ? 'old-neutral' : color"
+                      :selected="neutral === color"
+                      @click="selectPalette('neutral', color)"
+                    />
+                  </div>
                 </template>
+              </UPopover>
 
-                {{ neutralSwatch.label }}
-              </UButton>
-
-              <template #content>
-                <div class="grid grid-cols-3 gap-1 w-72 p-2">
-                  <ThemePickerButton
-                    v-for="color in neutralColors"
-                    :key="color"
-                    :label="color"
-                    :chip="color === 'neutral' ? 'old-neutral' : color"
-                    :selected="neutral === color"
-                    @click="selectPalette('neutral', color)"
-                  />
-                </div>
-              </template>
-            </UPopover>
-
-            <ThemeStudioPaletteEditor v-model:open="neutralEditorOpen" alias="neutral" />
-          </div>
-        </fieldset>
-      </div>
-    </template>
-
-    <template #style>
-      <div class="flex flex-col gap-5 pt-1 pb-4">
-        <fieldset>
-          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.radius = !openSections.radius">
-              Radius
-
-              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.radius }" />
-            </button>
-
-            <UButton
-              to="/docs/getting-started/theme/css-variables#radius"
-              size="xs"
-              color="neutral"
-              variant="link"
-              icon="i-lucide-help-circle"
-              class="p-0 -my-0.5"
-              :ui="{ leadingIcon: 'size-3' }"
-            />
-          </legend>
-
-          <div v-show="openSections.radius" class="flex items-center gap-3">
-            <USlider
-              v-model="radius"
-              :min="0"
-              :max="0.5"
-              :step="0.125"
-              size="sm"
-            />
-
-            <span class="text-[11px] font-mono text-muted tabular-nums shrink-0 w-14 text-right">{{ radius }}rem</span>
-          </div>
-        </fieldset>
-
-        <fieldset>
-          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.defaults = !openSections.defaults">
-              Defaults
-
-              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.defaults }" />
-            </button>
-          </legend>
-
-          <div v-show="openSections.defaults" class="grid grid-cols-2 gap-1.5">
-            <USelect
-              v-model="defaultVariant"
-              size="sm"
-              color="neutral"
-              icon="i-lucide-layers"
-              :items="defaultVariantItems"
-              class="ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
-              :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-            />
-
-            <USelect
-              v-model="defaultSize"
-              size="sm"
-              color="neutral"
-              icon="i-lucide-proportions"
-              :items="defaultSizeItems"
-              class="ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
-              :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-            />
-          </div>
-        </fieldset>
-
-        <fieldset>
-          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.shadows = !openSections.shadows">
-              Shadows
-
-              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.shadows }" />
-            </button>
-          </legend>
-
-          <div v-show="openSections.shadows">
-            <div class="grid grid-cols-3 gap-1">
-              <ThemePickerButton
-                v-for="option in shadowOptions"
-                :key="option.value"
-                :label="option.label"
-                class="justify-center px-0"
-                :selected="(style.shadow || 'none') === option.value"
-                @click="setStyle({ shadow: option.value })"
+              <ThemeStudioPaletteEditor v-model:open="neutralEditorOpen" alias="neutral" />
+            </div>
+          </fieldset>
+        </div>
+      </template>
+
+      <template #style>
+        <div class="flex flex-col gap-5 pt-1 pb-4">
+          <fieldset>
+            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+              <UButton
+                label="Radius"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-chevron-down"
+                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
+                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.radius && '-rotate-90'] }"
+                @click="openSections.radius = !openSections.radius"
+              />
+
+              <UButton
+                to="/docs/getting-started/theme/css-variables#radius"
+                size="xs"
+                color="neutral"
+                variant="link"
+                icon="i-lucide-help-circle"
+                class="p-0 -my-0.5"
+                :ui="{ leadingIcon: 'size-3' }"
+              />
+            </legend>
+
+            <div v-show="openSections.radius" class="flex items-center gap-3">
+              <USlider
+                v-model="radius"
+                :min="0"
+                :max="0.5"
+                :step="0.125"
+                size="sm"
               />
+
+              <span class="text-[11px] font-mono text-muted tabular-nums shrink-0 w-14 text-right">{{ radius }}rem</span>
             </div>
+          </fieldset>
+
+          <fieldset>
+            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+              <UButton
+                label="Defaults"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-chevron-down"
+                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
+                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.defaults && '-rotate-90'] }"
+                @click="openSections.defaults = !openSections.defaults"
+              />
+            </legend>
 
-            <div v-if="(style.shadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
+            <div v-show="openSections.defaults" class="grid grid-cols-2 gap-1.5">
               <USelect
-                v-model="shadowColor"
+                v-model="defaultVariant"
                 size="sm"
                 color="neutral"
-                icon="i-lucide-paint-bucket"
-                :items="shadowColorItems"
-                class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
+                icon="i-lucide-layers"
+                :items="defaultVariantItems"
+                class="ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
+                :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+              />
+
+              <USelect
+                v-model="defaultSize"
+                size="sm"
+                color="neutral"
+                icon="i-lucide-proportions"
+                :items="defaultSizeItems"
+                class="ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
                 :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
               />
+            </div>
+          </fieldset>
+
+          <fieldset>
+            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+              <UButton
+                label="Shadows"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-chevron-down"
+                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
+                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.shadows && '-rotate-90'] }"
+                @click="openSections.shadows = !openSections.shadows"
+              />
+            </legend>
+
+            <div v-show="openSections.shadows">
+              <div class="grid grid-cols-3 gap-1">
+                <ThemePickerButton
+                  v-for="option in shadowOptions"
+                  :key="option.value"
+                  :label="option.label"
+                  class="justify-center px-0"
+                  :selected="(style.shadow || 'none') === option.value"
+                  @click="setStyle({ shadow: option.value })"
+                />
+              </div>
 
-              <template v-if="shadowColor === 'shade'">
-                <ThemeStudioShadeSlider
-                  v-for="(slider, modeName) in shadowShades"
-                  :key="modeName"
-                  v-model="slider.value"
-                  :mode="modeName"
-                  :chip="neutralChip"
+              <div v-if="(style.shadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
+                <USelect
+                  v-model="shadowColor"
+                  size="sm"
+                  color="neutral"
+                  icon="i-lucide-paint-bucket"
+                  :items="shadowColorItems"
+                  class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
+                  :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
                 />
-              </template>
 
-              <div class="flex items-center gap-2">
-                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Opacity</span>
+                <template v-if="shadowColor === 'shade'">
+                  <ThemeStudioShadeSlider
+                    v-for="(slider, modeName) in shadowShades"
+                    :key="modeName"
+                    v-model="slider.value"
+                    :mode="modeName"
+                    :chip="neutralChip"
+                  />
+                </template>
+
+                <div class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Opacity</span>
+
+                  <USlider v-model="shadowOpacity" :min="5" :max="100" :step="5" size="xs" />
+
+                  <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ shadowOpacity }}%</span>
+                </div>
+
+                <template v-if="(style.shadow || 'none') === 'hard'">
+                  <div v-for="field in geometryFields" :key="field.key" class="flex items-center gap-2">
+                    <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
 
-                <USlider v-model="shadowOpacity" :min="5" :max="100" :step="5" size="xs" />
+                    <USlider v-model="geometry[field.key].value" :min="field.min" :max="field.max" :step="1" size="xs" />
 
-                <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ shadowOpacity }}%</span>
+                    <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ geometry[field.key].value }}px</span>
+                  </div>
+                </template>
               </div>
+            </div>
+          </fieldset>
 
-              <template v-if="(style.shadow || 'none') === 'hard'">
-                <div v-for="field in geometryFields" :key="field.key" class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
+          <fieldset>
+            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+              <UButton
+                label="Borders"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-chevron-down"
+                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
+                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.borders && '-rotate-90'] }"
+                @click="openSections.borders = !openSections.borders"
+              />
+            </legend>
+
+            <div v-show="openSections.borders">
+              <div class="grid grid-cols-3 gap-1">
+                <ThemePickerButton
+                  v-for="option in borderOptions"
+                  :key="option.value"
+                  :label="option.label"
+                  class="justify-center px-0"
+                  :selected="(style.border || 'default') === option.value"
+                  @click="setStyle({ border: option.value })"
+                />
+              </div>
 
-                  <USlider v-model="geometry[field.key].value" :min="field.min" :max="field.max" :step="1" size="xs" />
+              <div class="mt-1.5 flex flex-col gap-2">
+                <USelect
+                  v-model="borderColor"
+                  size="sm"
+                  color="neutral"
+                  icon="i-lucide-paint-bucket"
+                  :items="borderColorItems"
+                  class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
+                  :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                />
 
-                  <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ geometry[field.key].value }}px</span>
-                </div>
-              </template>
+                <template v-if="borderColor === 'shade'">
+                  <ThemeStudioShadeSlider
+                    v-for="(slider, modeName) in borderShades"
+                    :key="modeName"
+                    v-model="slider.value"
+                    :mode="modeName"
+                    :chip="neutralChip"
+                  />
+                </template>
+              </div>
             </div>
-          </div>
-        </fieldset>
-
-        <fieldset>
-          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.borders = !openSections.borders">
-              Borders
-
-              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.borders }" />
-            </button>
-          </legend>
-
-          <div v-show="openSections.borders">
-            <div class="grid grid-cols-3 gap-1">
-              <ThemePickerButton
-                v-for="option in borderOptions"
-                :key="option.value"
-                :label="option.label"
-                class="justify-center px-0"
-                :selected="(style.border || 'default') === option.value"
-                @click="setStyle({ border: option.value })"
+          </fieldset>
+        </div>
+      </template>
+
+      <template #tokens>
+        <div class="flex flex-col gap-5 pt-1 pb-4">
+          <fieldset v-for="section in tokenSections" :key="section.token">
+            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+              <UButton
+                :label="section.label"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-chevron-down"
+                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
+                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections[section.token] && '-rotate-90'] }"
+                @click="openSections[section.token] = !openSections[section.token]"
+              />
+            </legend>
+
+            <div v-show="openSections[section.token]" class="flex flex-col gap-2">
+              <ThemeStudioShadeSlider
+                v-for="(slider, modeName) in section.sliders"
+                :key="modeName"
+                v-model="slider.value"
+                :mode="modeName"
+                :chip="neutralChip"
               />
             </div>
+          </fieldset>
+        </div>
+      </template>
+
+      <template #general>
+        <div class="flex flex-col gap-5 pt-1 pb-4">
+          <fieldset>
+            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+              <UButton
+                label="Font"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-chevron-down"
+                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
+                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.font && '-rotate-90'] }"
+                @click="openSections.font = !openSections.font"
+              />
 
-            <div class="mt-1.5 flex flex-col gap-2">
+              <UButton
+                to="/docs/getting-started/integrations/fonts"
+                size="xs"
+                color="neutral"
+                variant="link"
+                icon="i-lucide-help-circle"
+                class="p-0 -my-0.5"
+                :ui="{ leadingIcon: 'size-3' }"
+              />
+            </legend>
+
+            <div v-show="openSections.font">
               <USelect
-                v-model="borderColor"
+                v-model="font"
                 size="sm"
                 color="neutral"
-                icon="i-lucide-paint-bucket"
-                :items="borderColorItems"
+                icon="i-lucide-type"
+                :items="fonts"
                 class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
-                :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
               />
+            </div>
+          </fieldset>
 
-              <template v-if="borderColor === 'shade'">
-                <ThemeStudioShadeSlider
-                  v-for="(slider, modeName) in borderShades"
-                  :key="modeName"
-                  v-model="slider.value"
-                  :mode="modeName"
-                  :chip="neutralChip"
-                />
-              </template>
+          <fieldset>
+            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+              <UButton
+                label="Icons"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-chevron-down"
+                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
+                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.icons && '-rotate-90'] }"
+                @click="openSections.icons = !openSections.icons"
+              />
+
+              <UButton
+                to="/docs/getting-started/integrations/icons"
+                size="xs"
+                color="neutral"
+                variant="link"
+                icon="i-lucide-help-circle"
+                class="p-0 -my-0.5"
+                :ui="{ leadingIcon: 'size-3' }"
+              />
+            </legend>
+
+            <div v-show="openSections.icons">
+              <USelect
+                v-model="icon"
+                size="sm"
+                color="neutral"
+                :icon="icons.find(i => i.value === icon)?.icon"
+                :items="icons"
+                class="w-full ring-default rounded-sm hover:bg-elevated/50 capitalize text-xs data-[state=open]:bg-elevated/50"
+                :ui="{ item: 'capitalize text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+              />
             </div>
-          </div>
-        </fieldset>
-      </div>
-    </template>
-
-    <template #tokens>
-      <div class="flex flex-col gap-5 pt-1 pb-4">
-        <fieldset v-for="section in tokenSections" :key="section.token">
-          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections[section.token] = !openSections[section.token]">
-              {{ section.label }}
-
-              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections[section.token] }" />
-            </button>
-          </legend>
-
-          <div v-show="openSections[section.token]" class="flex flex-col gap-2">
-            <ThemeStudioShadeSlider
-              v-for="(slider, modeName) in section.sliders"
-              :key="modeName"
-              v-model="slider.value"
-              :mode="modeName"
-              :chip="neutralChip"
-            />
-          </div>
-        </fieldset>
-      </div>
-    </template>
-
-    <template #general>
-      <div class="flex flex-col gap-5 pt-1 pb-4">
-        <fieldset>
-          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.font = !openSections.font">
-              Font
-
-              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.font }" />
-            </button>
-
-            <UButton
-              to="/docs/getting-started/integrations/fonts"
-              size="xs"
-              color="neutral"
-              variant="link"
-              icon="i-lucide-help-circle"
-              class="p-0 -my-0.5"
-              :ui="{ leadingIcon: 'size-3' }"
-            />
-          </legend>
-
-          <div v-show="openSections.font">
-            <USelect
-              v-model="font"
-              size="sm"
-              color="neutral"
-              icon="i-lucide-type"
-              :items="fonts"
-              class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
-              :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-            />
-          </div>
-        </fieldset>
-
-        <fieldset>
-          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.icons = !openSections.icons">
-              Icons
-
-              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.icons }" />
-            </button>
-
-            <UButton
-              to="/docs/getting-started/integrations/icons"
-              size="xs"
-              color="neutral"
-              variant="link"
-              icon="i-lucide-help-circle"
-              class="p-0 -my-0.5"
-              :ui="{ leadingIcon: 'size-3' }"
-            />
-          </legend>
-
-          <div v-show="openSections.icons">
-            <USelect
-              v-model="icon"
-              size="sm"
-              color="neutral"
-              :icon="icons.find(i => i.value === icon)?.icon"
-              :items="icons"
-              class="w-full ring-default rounded-sm hover:bg-elevated/50 capitalize text-xs data-[state=open]:bg-elevated/50"
-              :ui="{ item: 'capitalize text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-            />
-          </div>
-        </fieldset>
-
-        <fieldset>
-          <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
-            <button type="button" class="flex items-center gap-1 flex-1 text-left cursor-pointer" @click="openSections.mode = !openSections.mode">
-              Color Mode
-
-              <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="{ '-rotate-90': !openSections.mode }" />
-            </button>
-
-            <UButton
-              to="/docs/getting-started/integrations/color-mode"
-              size="xs"
-              color="neutral"
-              variant="link"
-              icon="i-lucide-help-circle"
-              class="p-0 -my-0.5"
-              :ui="{ leadingIcon: 'size-3' }"
-            />
-          </legend>
-
-          <div v-show="openSections.mode" class="grid grid-cols-3 gap-1">
-            <ThemePickerButton
-              v-for="m in modes"
-              :key="m.label"
-              v-bind="m"
-              :selected="colorMode.preference === m.label"
-              @click="mode = m.label"
-            />
-          </div>
-        </fieldset>
-      </div>
-    </template>
-  </UAccordion>
+          </fieldset>
+        </div>
+      </template>
+    </UAccordion>
+  </div>
 </template>
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 4afe1a4ce9..9eb583bea3 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -35,7 +35,7 @@ const presetItems = computed(() => presets.map(preset => ({
   <main class="flex flex-col lg:flex-row lg:h-[calc(100vh-var(--ui-header-height))]">
     <aside
       v-show="sidebarOpen"
-      class="shrink-0 lg:w-80 border-b lg:border-b-0 lg:border-r border-default lg:overflow-y-auto p-4"
+      class="shrink-0 lg:w-80 border-b lg:border-b-0 lg:border-r border-default lg:overflow-y-auto p-4 sm:px-6"
     >
       <ThemeStudioControls />
     </aside>

From 289b76d8785788c0a67345f58d773d7782dd9cd0 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 05:16:59 +0200
Subject: [PATCH 024/185] fix(docs): flatten analytics payload to primitives
 for typecheck

track() accepts primitive property values only; the style object now
carries nested geometry/token maps.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/composables/useThemeStudio.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index ff581d3fb1..57f67721ba 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -75,7 +75,12 @@ export function useThemeStudio() {
     }
     activePreset.value = undefined
 
-    track('Theme Style Changed', { ...style.value })
+    track('Theme Style Changed', {
+      shadow: style.value.shadow || 'none',
+      border: style.value.border || 'default',
+      borderColor: style.value.borderColor || 'default',
+      shadowColor: style.value.shadowColor || 'default'
+    })
   }
 
   let trackedAt: number | undefined

From 43e212aac9df28ef6bbe6af62c37d1ed66b62f2c Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 05:33:00 +0200
Subject: [PATCH 025/185] feat(docs): custom palettes, shuffle depth, offset
 effect slider

- five studio palettes beyond tailwind (sand/sage/ash neutrals,
  cocoa/marine primaries) defined in @theme static; exports inline
  their ramps since consumer builds can't resolve them
- shuffle now rolls frames, border/shadow colors and app-wide
  default variants at tasteful weights
- palette offsets get an effect-strength slider (0-200%) that lerps
  between the fitted base and the offset target, extrapolating past
  100% for stronger takes

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/assets/css/main.css                  | 62 ++++++++++++++++
 .../theme-studio/ThemeStudioPaletteEditor.vue | 50 +++++++++++--
 docs/app/composables/useTheme.ts              | 16 +++-
 docs/app/composables/useThemeStudio.ts        | 14 +++-
 .../app/utils/theme-engine/custom-palettes.ts | 74 +++++++++++++++++++
 docs/app/utils/theme-engine/index.ts          |  1 +
 docs/server/api/ai.post.ts                    |  5 +-
 7 files changed, 210 insertions(+), 12 deletions(-)
 create mode 100644 docs/app/utils/theme-engine/custom-palettes.ts

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index 5abc05a2c7..6790a46cac 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -6,6 +6,68 @@
 @theme static {
   --container-8xl: 90rem;
 
+  /* Studio extras: custom neutrals (sand, sage, ash) and primaries
+     (cocoa, marine) beyond the stock tailwind palettes. */
+  --color-sand-50: #FAF8F4;
+  --color-sand-100: #F3EFE7;
+  --color-sand-200: #E6DFD1;
+  --color-sand-300: #D4C9B4;
+  --color-sand-400: #B7A88D;
+  --color-sand-500: #9A8B6F;
+  --color-sand-600: #7E7059;
+  --color-sand-700: #665A48;
+  --color-sand-800: #52483A;
+  --color-sand-900: #443C31;
+  --color-sand-950: #26211A;
+
+  --color-sage-50: #F6F8F5;
+  --color-sage-100: #EBF0EA;
+  --color-sage-200: #D8E1D6;
+  --color-sage-300: #BCCBBA;
+  --color-sage-400: #97AB95;
+  --color-sage-500: #778C75;
+  --color-sage-600: #5F725E;
+  --color-sage-700: #4D5C4C;
+  --color-sage-800: #3F4B3E;
+  --color-sage-900: #343E34;
+  --color-sage-950: #1B221B;
+
+  --color-ash-50: #F5F6F8;
+  --color-ash-100: #E9EBEF;
+  --color-ash-200: #D3D7DF;
+  --color-ash-300: #B0B7C4;
+  --color-ash-400: #848EA1;
+  --color-ash-500: #646F84;
+  --color-ash-600: #4F586A;
+  --color-ash-700: #404755;
+  --color-ash-800: #363C47;
+  --color-ash-900: #2C313A;
+  --color-ash-950: #16181E;
+
+  --color-cocoa-50: #FAF6F2;
+  --color-cocoa-100: #F2E9E1;
+  --color-cocoa-200: #E3D2C2;
+  --color-cocoa-300: #CFB49D;
+  --color-cocoa-400: #B58F6F;
+  --color-cocoa-500: #966F4C;
+  --color-cocoa-600: #7C5A3C;
+  --color-cocoa-700: #654931;
+  --color-cocoa-800: #533C2A;
+  --color-cocoa-900: #453325;
+  --color-cocoa-950: #251A12;
+
+  --color-marine-50: #F2F6FB;
+  --color-marine-100: #E2ECF7;
+  --color-marine-200: #C6D9EF;
+  --color-marine-300: #9DBDE2;
+  --color-marine-400: #6C9AD0;
+  --color-marine-500: #467BBB;
+  --color-marine-600: #33619E;
+  --color-marine-700: #2B4F80;
+  --color-marine-800: #274268;
+  --color-marine-900: #243A57;
+  --color-marine-950: #182636;
+
   --font-sans: 'Public Sans', sans-serif;
 
   --color-green-50: #EFFDF5;
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index f45d48a6da..6bc7cf9940 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -59,6 +59,12 @@ const windows = computed(() => ({
 
 const styleOffset = ref('fitted')
 
+/**
+ * Effect strength: 100% is the offset as designed, lower blends back toward
+ * the fitted base, above 100% extrapolates past it for a stronger take.
+ */
+const offsetAmount = ref(100)
+
 /** Fitted base the style offsets transform from, so they never compound. */
 let seedBase: PaletteCurveParams = structuredClone(toRaw(params))
 
@@ -84,6 +90,7 @@ const { ignoreUpdates } = watchIgnorable(params, () => {
 function seed(values: PaletteCurveParams) {
   seedBase = structuredClone(toRaw(values))
   styleOffset.value = 'fitted'
+  offsetAmount.value = 100
   ignoreUpdates(() => {
     Object.assign(params, structuredClone(toRaw(values)))
   })
@@ -166,24 +173,40 @@ function remapLightness(curve: PaletteCurveParams['lightness'], newY0: number, n
   curve.y1 = newY1
 }
 
+const CURVE_KEYS = ['y0', 'y1', 'p1x', 'p1y', 'p2x', 'p2y'] as const
+
+function lerpParams(base: PaletteCurveParams, target: PaletteCurveParams, t: number): PaletteCurveParams {
+  const result = structuredClone(target)
+  for (const channel of ['lightness', 'chroma', 'hue'] as const) {
+    for (const key of CURVE_KEYS) {
+      const value = base[channel][key] + (target[channel][key] - base[channel][key]) * t
+      // Extrapolated chroma can cross zero; keep it a real chroma.
+      result[channel][key] = channel === 'chroma' ? Math.max(0, value) : value
+    }
+  }
+  return result
+}
+
 /** Apply a taste offset ON TOP of the fitted base (idempotent, not cumulative). */
 function applyStyleOffset(name: string) {
-  const next = structuredClone(seedBase)
+  const target = structuredClone(seedBase)
 
   if (name === 'pastel') {
     // Candy pastels: compress the lightness range from BOTH ends (nothing
     // near-white, nothing dark) and push chroma UP so the softness stays
     // colorful — the gamut clamp keeps the very light stops in check.
-    remapLightness(next.lightness, Math.min(next.lightness.y0, 0.945), Math.max(next.lightness.y1, 0.52))
-    scaleChroma(next.chroma, 1.35)
+    remapLightness(target.lightness, Math.min(target.lightness.y0, 0.945), Math.max(target.lightness.y1, 0.52))
+    scaleChroma(target.chroma, 1.35)
   } else if (name === 'muted') {
-    scaleChroma(next.chroma, 0.55)
+    scaleChroma(target.chroma, 0.55)
   } else if (name === 'vivid') {
-    scaleChroma(next.chroma, 1.45)
+    scaleChroma(target.chroma, 1.45)
   } else if (name === 'dazzling') {
-    scaleChroma(next.chroma, 2)
+    scaleChroma(target.chroma, 2)
   }
 
+  const next = name === 'fitted' ? target : lerpParams(seedBase, target, offsetAmount.value / 100)
+
   // Not seed(): this IS a user edit, the watcher should live-apply it.
   Object.assign(params, next)
   recenterHueWindow()
@@ -256,5 +279,20 @@ function remove() {
         />
       </UTooltip>
     </div>
+
+    <div v-if="styleOffset !== 'fitted'" class="flex items-center gap-2">
+      <span class="text-[11px] text-muted shrink-0 w-10">Effect</span>
+      <USlider
+        v-model="offsetAmount"
+        :min="0"
+        :max="200"
+        :step="5"
+        size="sm"
+        color="neutral"
+        aria-label="Effect strength"
+        @update:model-value="applyStyleOffset(styleOffset)"
+      />
+      <span class="text-[11px] text-dimmed tabular-nums shrink-0 w-8 text-right">{{ offsetAmount }}%</span>
+    </div>
   </div>
 </template>
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index de03268197..5ca3dbd1a4 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -1,7 +1,7 @@
 import { defu } from 'defu'
 import { useLocalStorage } from '@vueuse/core'
 import { themeIcons, cssVariableDefaults } from '../utils/theme'
-import { generateCSS, generateConfig, mergeUi, DEFAULT_COLORS, THEME_DEFAULTS, LIBRARY_TOKEN_DEFAULTS } from '../utils/theme-engine'
+import { generateCSS, generateConfig, mergeUi, DEFAULT_COLORS, THEME_DEFAULTS, LIBRARY_TOKEN_DEFAULTS, CUSTOM_PALETTES } from '../utils/theme-engine'
 import type { ThemeDoc, ThemePalette } from '../utils/theme-engine'
 import { omit } from '#ui/utils'
 import colors from 'tailwindcss/colors'
@@ -73,7 +73,7 @@ export function useTheme() {
     // Match the page background in both modes (docs light baseline is
     // neutral-50, not white) so browser chrome doesn't seam against the page.
     const shade = colorMode.value === 'dark' ? 900 : 50
-    return (colors as any)[neutral]?.[shade] || customColorsData.value[neutral]?.[shade] || (colors as any).slate[shade]
+    return (colors as any)[neutral]?.[shade] || customColorsData.value[neutral]?.[shade] || CUSTOM_PALETTES[neutral]?.[shade] || (colors as any).slate[shade]
   })
   const cssVariablesData = useState<{ light?: Record<string, string>, dark?: Record<string, string> }>('nuxt-ui-css-variables', () => readLocalStorage('nuxt-ui-css-variables', {}))
   const _radius = useLocalStorage('nuxt-ui-radius', 0.25)
@@ -81,7 +81,7 @@ export function useTheme() {
   const _iconSet = useLocalStorage('nuxt-ui-icons', 'lucide')
   const _blackAsPrimary = useLocalStorage('nuxt-ui-black-as-primary', false)
 
-  const neutralColors = ['slate', 'gray', 'zinc', 'neutral', 'stone', 'taupe', 'mauve', 'mist', 'olive']
+  const neutralColors = ['slate', 'gray', 'zinc', 'neutral', 'stone', 'taupe', 'mauve', 'mist', 'olive', 'sand', 'sage', 'ash']
   const neutral = computed({
     get() {
       return appConfig.ui.colors.neutral
@@ -94,7 +94,8 @@ export function useTheme() {
   })
 
   const colorsToOmit = ['inherit', 'current', 'transparent', 'black', 'white', ...neutralColors]
-  const primaryColors = Object.keys(omit(colors, colorsToOmit as any))
+  // Custom docs palettes (defined in main.css @theme static) extend tailwind's set.
+  const primaryColors = [...Object.keys(omit(colors, colorsToOmit as any)), 'cocoa', 'marine']
   const primary = computed({
     get() {
       return appConfig.ui.colors.primary
@@ -271,6 +272,13 @@ export function useTheme() {
     // stays 'green') and must still export.
     const referenced = new Set(Object.values(appConfig.ui.colors as Record<string, string>))
     const paletteEntries = Object.entries(customColorsData.value).filter(([name]) => referenced.has(name))
+    // Docs-only palettes (sand, cocoa, …) exist in main.css, not tailwind —
+    // a consumer's build can't resolve them, so inline their ramps too.
+    for (const name of referenced) {
+      if (CUSTOM_PALETTES[name] && !customColorsData.value[name]) {
+        paletteEntries.push([name, CUSTOM_PALETTES[name]])
+      }
+    }
     if (paletteEntries.length) {
       doc.palettes = Object.fromEntries(paletteEntries.map(([name, shades]) => [name, { shades: shades as ThemePalette['shades'] }]))
     }
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 57f67721ba..ca670222ca 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -283,10 +283,22 @@ export function useThemeStudio() {
       // Weighted so most rolls stay clean, with the occasional loud one.
       style: {
         shadow: pick(['none', 'none', 'soft', 'hard'] as const),
-        border: pick(['default', 'default', 'bold'] as const)
+        border: pick(['default', 'default', 'bold', 'frame'] as const)
       }
     }
 
+    // Colored borders/shadows and app-wide variants are the loud rolls —
+    // sprinkle them in rarely enough that most shuffles stay tasteful.
+    if (doc.style!.border !== 'default' && Math.random() < 0.4) {
+      doc.style!.borderColor = pick(['inverted', 'primary', 'neutral'] as const)
+    }
+    if (doc.style!.shadow === 'hard' && Math.random() < 0.4) {
+      doc.style!.shadowColor = pick(['black', 'inverted', 'primary'] as const)
+    }
+    if (Math.random() < 0.25) {
+      doc.style!.defaults = { variant: pick(['solid', 'outline', 'soft', 'subtle'] as const) }
+    }
+
     if (Math.random() < 0.125) {
       doc.blackAsPrimary = true
       delete doc.colors!.primary
diff --git a/docs/app/utils/theme-engine/custom-palettes.ts b/docs/app/utils/theme-engine/custom-palettes.ts
new file mode 100644
index 0000000000..281ed70f13
--- /dev/null
+++ b/docs/app/utils/theme-engine/custom-palettes.ts
@@ -0,0 +1,74 @@
+import type { Shade } from './types'
+
+/**
+ * Studio-only palettes, mirrored from the docs' `@theme static` block in
+ * main.css. They aren't part of tailwind, so exports referencing them must
+ * inline the ramp — a consumer's build has no `--color-sand-*` to resolve.
+ */
+export const CUSTOM_PALETTES: Record<string, Record<Shade, string>> = {
+  sand: {
+    50: '#FAF8F4',
+    100: '#F3EFE7',
+    200: '#E6DFD1',
+    300: '#D4C9B4',
+    400: '#B7A88D',
+    500: '#9A8B6F',
+    600: '#7E7059',
+    700: '#665A48',
+    800: '#52483A',
+    900: '#443C31',
+    950: '#26211A'
+  },
+  sage: {
+    50: '#F6F8F5',
+    100: '#EBF0EA',
+    200: '#D8E1D6',
+    300: '#BCCBBA',
+    400: '#97AB95',
+    500: '#778C75',
+    600: '#5F725E',
+    700: '#4D5C4C',
+    800: '#3F4B3E',
+    900: '#343E34',
+    950: '#1B221B'
+  },
+  ash: {
+    50: '#F5F6F8',
+    100: '#E9EBEF',
+    200: '#D3D7DF',
+    300: '#B0B7C4',
+    400: '#848EA1',
+    500: '#646F84',
+    600: '#4F586A',
+    700: '#404755',
+    800: '#363C47',
+    900: '#2C313A',
+    950: '#16181E'
+  },
+  cocoa: {
+    50: '#FAF6F2',
+    100: '#F2E9E1',
+    200: '#E3D2C2',
+    300: '#CFB49D',
+    400: '#B58F6F',
+    500: '#966F4C',
+    600: '#7C5A3C',
+    700: '#654931',
+    800: '#533C2A',
+    900: '#453325',
+    950: '#251A12'
+  },
+  marine: {
+    50: '#F2F6FB',
+    100: '#E2ECF7',
+    200: '#C6D9EF',
+    300: '#9DBDE2',
+    400: '#6C9AD0',
+    500: '#467BBB',
+    600: '#33619E',
+    700: '#2B4F80',
+    800: '#274268',
+    900: '#243A57',
+    950: '#182636'
+  }
+}
diff --git a/docs/app/utils/theme-engine/index.ts b/docs/app/utils/theme-engine/index.ts
index f992fc5c35..cac8f6e90d 100644
--- a/docs/app/utils/theme-engine/index.ts
+++ b/docs/app/utils/theme-engine/index.ts
@@ -5,3 +5,4 @@ export * from './presets'
 export * from './oklch'
 export * from './palette'
 export * from './styles'
+export * from './custom-palettes'
diff --git a/docs/server/api/ai.post.ts b/docs/server/api/ai.post.ts
index beb0668886..7f65b87c73 100644
--- a/docs/server/api/ai.post.ts
+++ b/docs/server/api/ai.post.ts
@@ -41,7 +41,7 @@ const applyTheme = {
     type: 'object' as const,
     properties: {
       primary: { type: 'string', description: 'Primary color name (e.g., green, blue, red, indigo)' },
-      neutral: { type: 'string', description: 'Neutral color name (slate, gray, zinc, neutral, stone, taupe, mauve, mist, olive)' },
+      neutral: { type: 'string', description: 'Neutral color name (slate, gray, zinc, neutral, stone, taupe, mauve, mist, olive, sand, sage, ash)' },
       secondary: { type: 'string', description: 'Secondary color name' },
       success: { type: 'string', description: 'Success color name' },
       info: { type: 'string', description: 'Info color name' },
@@ -206,6 +206,9 @@ For Nuxt, wrap in \`defineAppConfig({ ui: { ... } })\`. For Vue, pass as \`ui({
   - **mauve** — purple-tinted gray, elegant, creative
   - **mist** — soft blue-gray, airy, light
   - **olive** — green-tinted gray, natural, earthy
+  - **sand** — warm beige-gray, desert, organic
+  - **sage** — muted green-gray, calm, botanical
+  - **ash** — deep blue-gray, cool, technical
   For example: warm/cozy themes → stone or taupe, elegant/creative → mauve, tech/minimal → zinc, nature → olive, etc. ALWAYS change the neutral when creating a complete theme — don't leave it as the default slate unless it genuinely fits.
 - Custom: define all shades 50-950 in \`customColors\` of the \`applyTheme\` tool, then reference the name
 

From d7841ce09d3052129958d97cace258a476495dab Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 05:45:39 +0200
Subject: [PATCH 026/185] feat(docs): primary shade sliders, primary-ramp
 shadow/border shades, per-group default variants
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Tokens gains a Primary section: light/dark sliders remapping
  --ui-primary along the primary ramp (library defaults 500/400 added
  to LIBRARY_TOKEN_DEFAULTS so at-default positions export nothing)
- shadow/border color selects gain 'Primary shade…' — the existing
  per-mode shade sliders walk the primary ramp instead of neutral
- default variant select split per component group (Buttons/Cards/
  Inputs); the app-wide value from presets/shuffle shows through as
  the fallback until a group chooses its own

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 84 ++++++++++++-------
 docs/app/composables/useThemeStudio.ts        |  8 +-
 docs/app/utils/theme-engine/resolve.ts        |  3 +
 docs/app/utils/theme-engine/styles.ts         | 84 +++++++++++++------
 test/utils/theme-engine.spec.ts               | 32 +++++++
 5 files changed, 150 insertions(+), 61 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 899256022b..fd73d05fc6 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { TOKEN_SHADE_TARGETS, SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, SHADOW_GEOMETRY_DEFAULTS } from '../../utils/theme-engine'
+import type { VariantGroup } from '../../utils/theme-engine'
 
 const {
   neutralColors,
@@ -75,7 +76,8 @@ const borderColorItems = [
   { label: 'White', value: 'white' },
   { label: 'Primary', value: 'primary' },
   { label: 'Neutral', value: 'neutral' },
-  { label: 'Custom…', value: 'shade' }
+  { label: 'Custom…', value: 'shade' },
+  { label: 'Primary shade…', value: 'primary-shade' }
 ]
 
 const shadowColorItems = [
@@ -83,7 +85,8 @@ const shadowColorItems = [
   { label: 'Black', value: 'black' },
   { label: 'Inverted', value: 'inverted' },
   { label: 'Primary', value: 'primary' },
-  { label: 'Custom…', value: 'shade' }
+  { label: 'Custom…', value: 'shade' },
+  { label: 'Primary shade…', value: 'primary-shade' }
 ]
 
 // Slider position ↔ SHADES index, per mode. shadow/border shades write both
@@ -136,6 +139,7 @@ const tokenSections = TOKEN_SHADE_TARGETS.map(target => ({
 }))
 
 const neutralChip = computed(() => neutral.value === 'neutral' ? 'old-neutral' : neutral.value)
+const primaryChip = computed(() => isCustomPalette('primary') ? 'custom-primary' : primary.value)
 
 const modeTabs = computed(() => modes.value.map(m => ({ label: m.label, icon: m.icon, value: m.label })))
 
@@ -168,10 +172,22 @@ const defaultSizeItems = [
   { label: 'XL', value: 'xl' }
 ]
 
-const defaultVariant = computed({
-  get: () => style.value.defaults?.variant || 'default',
-  set: (value: any) => setStyle({ defaults: { ...style.value.defaults, variant: value } })
-})
+// Per-group default variants; the app-wide `variant` (presets, shuffle)
+// shows through as the fallback until a group makes its own choice.
+const variantGroupFields = [
+  { key: 'buttons' as const, label: 'Buttons' },
+  { key: 'panels' as const, label: 'Cards' },
+  { key: 'inputs' as const, label: 'Inputs' }
+]
+
+function groupVariantModel(group: VariantGroup) {
+  return computed({
+    get: () => style.value.defaults?.variants?.[group] || style.value.defaults?.variant || 'default',
+    set: (value: any) => setStyle({ defaults: { ...style.value.defaults, variants: { ...style.value.defaults?.variants, [group]: value } } })
+  })
+}
+
+const groupVariants = Object.fromEntries(variantGroupFields.map(field => [field.key, groupVariantModel(field.key)])) as Record<VariantGroup, ReturnType<typeof groupVariantModel>>
 
 const defaultSize = computed({
   get: () => style.value.defaults?.size || 'default',
@@ -440,26 +456,34 @@ const shadowColor = computed({
               />
             </legend>
 
-            <div v-show="openSections.defaults" class="grid grid-cols-2 gap-1.5">
-              <USelect
-                v-model="defaultVariant"
-                size="sm"
-                color="neutral"
-                icon="i-lucide-layers"
-                :items="defaultVariantItems"
-                class="ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
-                :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-              />
+            <div v-show="openSections.defaults" class="flex flex-col gap-1.5">
+              <div v-for="field in variantGroupFields" :key="field.key" class="flex items-center gap-2">
+                <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
 
-              <USelect
-                v-model="defaultSize"
-                size="sm"
-                color="neutral"
-                icon="i-lucide-proportions"
-                :items="defaultSizeItems"
-                class="ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
-                :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-              />
+                <USelect
+                  v-model="groupVariants[field.key].value"
+                  size="sm"
+                  color="neutral"
+                  icon="i-lucide-layers"
+                  :items="defaultVariantItems"
+                  class="flex-1 ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
+                  :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                />
+              </div>
+
+              <div class="flex items-center gap-2">
+                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Size</span>
+
+                <USelect
+                  v-model="defaultSize"
+                  size="sm"
+                  color="neutral"
+                  icon="i-lucide-proportions"
+                  :items="defaultSizeItems"
+                  class="flex-1 ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
+                  :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                />
+              </div>
             </div>
           </fieldset>
 
@@ -500,13 +524,13 @@ const shadowColor = computed({
                   :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
                 />
 
-                <template v-if="shadowColor === 'shade'">
+                <template v-if="shadowColor === 'shade' || shadowColor === 'primary-shade'">
                   <ThemeStudioShadeSlider
                     v-for="(slider, modeName) in shadowShades"
                     :key="modeName"
                     v-model="slider.value"
                     :mode="modeName"
-                    :chip="neutralChip"
+                    :chip="shadowColor === 'primary-shade' ? primaryChip : neutralChip"
                   />
                 </template>
 
@@ -568,13 +592,13 @@ const shadowColor = computed({
                   :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
                 />
 
-                <template v-if="borderColor === 'shade'">
+                <template v-if="borderColor === 'shade' || borderColor === 'primary-shade'">
                   <ThemeStudioShadeSlider
                     v-for="(slider, modeName) in borderShades"
                     :key="modeName"
                     v-model="slider.value"
                     :mode="modeName"
-                    :chip="neutralChip"
+                    :chip="borderColor === 'primary-shade' ? primaryChip : neutralChip"
                   />
                 </template>
               </div>
@@ -605,7 +629,7 @@ const shadowColor = computed({
                 :key="modeName"
                 v-model="slider.value"
                 :mode="modeName"
-                :chip="neutralChip"
+                :chip="section.ramp === 'primary' ? primaryChip : neutralChip"
               />
             </div>
           </fieldset>
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index ca670222ca..c5507b8546 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -217,16 +217,16 @@ export function useThemeStudio() {
   function deriveStyle(doc: ThemeDoc): StyleOptions {
     const derived: StyleOptions = { ...(doc.style || {}) }
 
-    const parse = (value?: string) => {
+    const parse = (value: string | undefined, ramp: string) => {
       const ref = parseUiColorRef(value)
-      return ref?.alias === 'neutral' ? ref.shade : undefined
+      return ref?.alias === ramp ? ref.shade : undefined
     }
 
     for (const target of TOKEN_SHADE_TARGETS) {
       if (derived.tokenShades?.[target.token]) continue
 
-      const light = parse(doc.tokens?.light?.[target.token])
-      const dark = parse(doc.tokens?.dark?.[target.token])
+      const light = parse(doc.tokens?.light?.[target.token], target.ramp)
+      const dark = parse(doc.tokens?.dark?.[target.token], target.ramp)
       if (light !== undefined || dark !== undefined) {
         // Only modes the doc actually overrides — backfilling the other
         // mode would turn a non-choice into an exported override.
diff --git a/docs/app/utils/theme-engine/resolve.ts b/docs/app/utils/theme-engine/resolve.ts
index bcd534ad7b..2fb8b4b874 100644
--- a/docs/app/utils/theme-engine/resolve.ts
+++ b/docs/app/utils/theme-engine/resolve.ts
@@ -12,6 +12,8 @@ export type ColorMode = 'light' | 'dark'
  */
 export const LIBRARY_TOKEN_DEFAULTS = {
   light: {
+    // generated by the runtime colors plugin, not index.css
+    '--ui-primary': 'var(--ui-color-primary-500)',
     '--ui-text-dimmed': 'var(--ui-color-neutral-400)',
     '--ui-text-muted': 'var(--ui-color-neutral-500)',
     '--ui-text-toned': 'var(--ui-color-neutral-600)',
@@ -29,6 +31,7 @@ export const LIBRARY_TOKEN_DEFAULTS = {
     '--ui-border-inverted': 'var(--ui-color-neutral-900)'
   },
   dark: {
+    '--ui-primary': 'var(--ui-color-primary-400)',
     '--ui-text-dimmed': 'var(--ui-color-neutral-500)',
     '--ui-text-muted': 'var(--ui-color-neutral-400)',
     '--ui-text-toned': 'var(--ui-color-neutral-300)',
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 77d2788de7..b8d19f1c82 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -28,26 +28,28 @@
 
 export type ShadowStyle = 'none' | 'soft' | 'hard'
 export type BorderStyle = 'default' | 'bold' | 'frame'
-export type BorderColor = 'default' | 'inverted' | 'black' | 'white' | 'primary' | 'neutral' | 'shade'
-export type ShadowColor = 'default' | 'black' | 'inverted' | 'primary' | 'shade'
+export type BorderColor = 'default' | 'inverted' | 'black' | 'white' | 'primary' | 'neutral' | 'shade' | 'primary-shade'
+export type ShadowColor = 'default' | 'black' | 'inverted' | 'primary' | 'shade' | 'primary-shade'
 export type DefaultVariant = 'default' | 'solid' | 'outline' | 'soft' | 'subtle'
 export type DefaultSize = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type VariantGroup = 'buttons' | 'panels' | 'inputs'
 
 export interface StyleOptions {
   shadow?: ShadowStyle
   border?: BorderStyle
   borderColor?: BorderColor
   shadowColor?: ShadowColor
-  /** Neutral ramp shade per mode, used when `shadowColor` is 'shade' */
+  /** Ramp shade per mode — neutral for 'shade', primary for 'primary-shade' */
   shadowShade?: { light: number, dark: number }
-  /** Neutral ramp shade per mode, used when `borderColor` is 'shade' */
+  /** Ramp shade per mode — neutral for 'shade', primary for 'primary-shade' */
   borderShade?: { light: number, dark: number }
   /**
-   * App-wide default variant/size, expanded into per-component
-   * `defaultVariants` — the runtime override channel Nuxt UI already
-   * honors — only for components that actually support the chosen value.
+   * Default variant/size, expanded into per-component `defaultVariants` —
+   * the runtime override channel Nuxt UI already honors — only for
+   * components that actually support the chosen value. `variant` applies
+   * app-wide; `variants` refines it per component group and wins where set.
    */
-  defaults?: { variant?: DefaultVariant, size?: DefaultSize }
+  defaults?: { variant?: DefaultVariant, size?: DefaultSize, variants?: Partial<Record<VariantGroup, DefaultVariant>> }
   /**
    * Hard-shadow geometry in px, driving --ui-shadow-offset-x/y/blur/spread.
    * Only meaningful while `shadow` is 'hard'.
@@ -85,6 +87,13 @@ const VARIANT_SUPPORT: Record<string, string[]> = {
 
 const SIZE_SUPPORT = ['button', 'badge', 'input', 'select', 'textarea']
 
+/** Component groups behind the per-group default-variant selects. */
+export const VARIANT_GROUPS: Record<VariantGroup, string[]> = {
+  buttons: ['button', 'badge'],
+  panels: ['card', 'alert'],
+  inputs: ['input', 'select', 'textarea']
+}
+
 export const SHADOW_GEOMETRY_DEFAULTS = { x: 3, y: 3, blur: 0, spread: 0 }
 
 /** Borders default opposite to the surface: dark ink on light, pale on dark. */
@@ -93,13 +102,15 @@ export const BORDER_SHADE_DEFAULTS = { light: 900, dark: 200 }
 /**
  * Semantic tokens the studio exposes as per-mode shade sliders, with the
  * library/docs default shades. 'white' library values map to shade 50.
+ * `ramp` names the color scale the slider walks (and the token references).
  */
-export const TOKEN_SHADE_TARGETS: Array<{ token: string, label: string, defaults: { light: number, dark: number } }> = [
-  { token: '--ui-bg', label: 'Background', defaults: { light: 50, dark: 900 } },
-  { token: '--ui-bg-inverted', label: 'Inverted', defaults: { light: 900, dark: 50 } },
-  { token: '--ui-text-highlighted', label: 'Highlighted', defaults: { light: 900, dark: 50 } },
-  { token: '--ui-text-muted', label: 'Muted', defaults: { light: 500, dark: 400 } },
-  { token: '--ui-text-dimmed', label: 'Dimmed', defaults: { light: 400, dark: 500 } }
+export const TOKEN_SHADE_TARGETS: Array<{ token: string, label: string, ramp: 'neutral' | 'primary', defaults: { light: number, dark: number } }> = [
+  { token: '--ui-primary', label: 'Primary', ramp: 'primary', defaults: { light: 500, dark: 400 } },
+  { token: '--ui-bg', label: 'Background', ramp: 'neutral', defaults: { light: 50, dark: 900 } },
+  { token: '--ui-bg-inverted', label: 'Inverted', ramp: 'neutral', defaults: { light: 900, dark: 50 } },
+  { token: '--ui-text-highlighted', label: 'Highlighted', ramp: 'neutral', defaults: { light: 900, dark: 50 } },
+  { token: '--ui-text-muted', label: 'Muted', ramp: 'neutral', defaults: { light: 500, dark: 400 } },
+  { token: '--ui-text-dimmed', label: 'Dimmed', ramp: 'neutral', defaults: { light: 400, dark: 500 } }
 ]
 export const SHADOW_SHADE_DEFAULTS = { light: 950, dark: 800 }
 
@@ -217,7 +228,7 @@ const FRAME_COLOR_FRAGMENTS: Fragments = {
 }
 
 /** Per-mode values behind the two color variables, per palette choice. */
-const FRAME_COLOR_VALUES: Record<Exclude<BorderColor, 'default' | 'shade'>, { light: string, dark: string }> = {
+const FRAME_COLOR_VALUES: Record<Exclude<BorderColor, 'default' | 'shade' | 'primary-shade'>, { light: string, dark: string }> = {
   inverted: { light: 'var(--ui-color-neutral-950)', dark: 'white' },
   black: { light: 'black', dark: 'black' },
   white: { light: 'white', dark: 'white' },
@@ -225,7 +236,7 @@ const FRAME_COLOR_VALUES: Record<Exclude<BorderColor, 'default' | 'shade'>, { li
   neutral: { light: 'var(--ui-color-neutral-900)', dark: 'var(--ui-color-neutral-100)' }
 }
 
-const SHADOW_COLOR_VALUES: Record<Exclude<ShadowColor, 'default' | 'shade'>, { light: string, dark: string }> = {
+const SHADOW_COLOR_VALUES: Record<Exclude<ShadowColor, 'default' | 'shade' | 'primary-shade'>, { light: string, dark: string }> = {
   black: { light: 'black', dark: 'black' },
   inverted: { light: 'var(--ui-color-neutral-950)', dark: 'white' },
   primary: { light: 'var(--ui-color-primary-500)', dark: 'var(--ui-color-primary-400)' }
@@ -240,19 +251,21 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
   const light: Record<string, string> = {}
   const dark: Record<string, string> = {}
 
-  if (style.borderColor === 'shade') {
+  if (style.borderColor === 'shade' || style.borderColor === 'primary-shade') {
+    const ramp = style.borderColor === 'primary-shade' ? 'primary' : 'neutral'
     const shade = { ...BORDER_SHADE_DEFAULTS, ...style.borderShade }
-    light['--ui-frame-color'] = `var(--ui-color-neutral-${shade.light})`
-    dark['--ui-frame-color'] = `var(--ui-color-neutral-${shade.dark})`
+    light['--ui-frame-color'] = `var(--ui-color-${ramp}-${shade.light})`
+    dark['--ui-frame-color'] = `var(--ui-color-${ramp}-${shade.dark})`
   } else if (style.borderColor && style.borderColor !== 'default') {
     const value = FRAME_COLOR_VALUES[style.borderColor]
     light['--ui-frame-color'] = value.light
     dark['--ui-frame-color'] = value.dark
   }
   for (const [token, shade] of Object.entries(style.tokenShades || {})) {
-    if (TOKEN_SHADE_TARGETS.some(target => target.token === token)) {
-      if (shade.light !== undefined) light[token] = `var(--ui-color-neutral-${shade.light})`
-      if (shade.dark !== undefined) dark[token] = `var(--ui-color-neutral-${shade.dark})`
+    const target = TOKEN_SHADE_TARGETS.find(target => target.token === token)
+    if (target) {
+      if (shade.light !== undefined) light[token] = `var(--ui-color-${target.ramp}-${shade.light})`
+      if (shade.dark !== undefined) dark[token] = `var(--ui-color-${target.ramp}-${shade.dark})`
     }
   }
 
@@ -269,12 +282,13 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
     }
   }
 
-  if (style.shadowColor === 'shade') {
-    // Per-mode neutral ramp shade — a graded gray shadow that darkens or
-    // lightens independently of the scheme it sits on.
+  if (style.shadowColor === 'shade' || style.shadowColor === 'primary-shade') {
+    // Per-mode ramp shade — a graded shadow that darkens or lightens
+    // independently of the scheme it sits on; the primary ramp tints it.
+    const ramp = style.shadowColor === 'primary-shade' ? 'primary' : 'neutral'
     const shade = { ...SHADOW_SHADE_DEFAULTS, ...style.shadowShade }
-    light['--ui-shadow-color'] = `var(--ui-color-neutral-${shade.light})`
-    dark['--ui-shadow-color'] = `var(--ui-color-neutral-${shade.dark})`
+    light['--ui-shadow-color'] = `var(--ui-color-${ramp}-${shade.light})`
+    dark['--ui-shadow-color'] = `var(--ui-color-${ramp}-${shade.dark})`
   } else if (style.shadowColor && style.shadowColor !== 'default') {
     const value = SHADOW_COLOR_VALUES[style.shadowColor]
     light['--ui-shadow-color'] = value.light
@@ -300,6 +314,22 @@ export function styleComponents(style: StyleOptions): Fragments {
       }
     }
   }
+  // Group refinements land after the app-wide value, replacing it for the
+  // components they cover — unsupported values still fall through silently.
+  for (const [group, components] of Object.entries(VARIANT_GROUPS)) {
+    const groupVariant = style.defaults?.variants?.[group as VariantGroup]
+    if (groupVariant && groupVariant !== 'default') {
+      for (const component of components) {
+        if (VARIANT_SUPPORT[component]?.includes(groupVariant)) {
+          defaults[component] = {
+            ...defaults[component],
+            defaultVariants: { ...defaults[component]?.defaultVariants, variant: groupVariant }
+          }
+        }
+      }
+    }
+  }
+
   const size = style.defaults?.size
   if (size && size !== 'default') {
     for (const component of SIZE_SUPPORT) {
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index acc2d816ce..5d92c7a311 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -313,6 +313,38 @@ describe('style colors', () => {
     expect(styleTokens({ tokenShades: { '--ui-evil': { light: 50, dark: 50 } } })).toEqual({ light: {}, dark: {} })
   })
 
+  it('styleTokens maps primary-ramp token shades and shade modes', async () => {
+    const { styleTokens } = await import('../../docs/app/utils/theme-engine')
+
+    // --ui-primary walks the PRIMARY ramp, not neutral
+    expect(styleTokens({ tokenShades: { '--ui-primary': { light: 600, dark: 300 } } })).toEqual({
+      light: { '--ui-primary': 'var(--ui-color-primary-600)' },
+      dark: { '--ui-primary': 'var(--ui-color-primary-300)' }
+    })
+    // primary-shade modes reroute the frame/shadow colors through the primary ramp
+    expect(styleTokens({ borderColor: 'primary-shade', borderShade: { light: 700, dark: 300 } })).toEqual({
+      light: { '--ui-frame-color': 'var(--ui-color-primary-700)' },
+      dark: { '--ui-frame-color': 'var(--ui-color-primary-300)' }
+    })
+    expect(styleTokens({ shadowColor: 'primary-shade' }).light['--ui-shadow-color']).toBe('var(--ui-color-primary-950)')
+  })
+
+  it('per-group default variants refine the app-wide value', async () => {
+    const { styleComponents } = await import('../../docs/app/utils/theme-engine')
+    const components = styleComponents({ defaults: { variant: 'solid', variants: { inputs: 'subtle', panels: 'outline' } } })
+
+    // untouched group keeps the app-wide value
+    expect(components.button!.defaultVariants).toEqual({ variant: 'solid' })
+    // group choices win for their components
+    expect(components.input!.defaultVariants).toEqual({ variant: 'subtle' })
+    expect(components.card!.defaultVariants).toEqual({ variant: 'outline' })
+    expect(components.alert!.defaultVariants).toEqual({ variant: 'outline' })
+    // group-only, no app-wide: other groups untouched
+    const only = styleComponents({ defaults: { variants: { buttons: 'soft' } } })
+    expect(only.badge!.defaultVariants).toEqual({ variant: 'soft' })
+    expect(only.input).toBeUndefined()
+  })
+
   it('expands app-wide defaults only where the component supports them', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
     const components = styleComponents({ defaults: { variant: 'solid', size: 'lg' } })

From 23f1fae0793c7a7516a2a5bab8991d410cdb738b Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 05:47:15 +0200
Subject: [PATCH 027/185] feat(docs): Cabin and Harbor presets on the studio's
 own palettes

Both inline their ramps from CUSTOM_PALETTES so exports stay
self-contained, and double as living tests of the new axes:
per-group button defaults (Cabin) and primary-shade shadows with a
dark-mode primary shade remap (Harbor).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/utils/theme-engine/presets.ts | 55 ++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 939efb9c91..500eac1597 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -1,4 +1,5 @@
 import type { ThemeDoc } from './types'
+import { CUSTOM_PALETTES } from './custom-palettes'
 
 export interface ThemePreset {
   id: string
@@ -326,4 +327,58 @@ export const presets: ThemePreset[] = [{
       }
     }
   }
+}, {
+  id: 'cabin',
+  name: 'Cabin',
+  description: 'Cocoa and sand — a warm, woody lodge with soft buttons.',
+  icon: 'i-lucide-trees',
+  doc: {
+    version: 1,
+    meta: { name: 'Cabin', base: 'cabin' },
+    // the studio's own ramps, inlined so exports are self-contained
+    palettes: {
+      cocoa: { shades: CUSTOM_PALETTES.cocoa! },
+      sand: { shades: CUSTOM_PALETTES.sand! }
+    },
+    colors: {
+      primary: 'cocoa',
+      neutral: 'sand'
+    },
+    radius: 0.375,
+    font: { sans: 'Raleway' },
+    tokens: {
+      light: {
+        '--ui-bg': 'var(--ui-color-neutral-50)'
+      }
+    },
+    style: {
+      shadow: 'soft',
+      defaults: { variants: { buttons: 'soft' } }
+    }
+  }
+}, {
+  id: 'harbor',
+  name: 'Harbor',
+  description: 'Marine blue on cool ash, bold borders, navy-tinted shadows.',
+  icon: 'i-lucide-anchor',
+  doc: {
+    version: 1,
+    meta: { name: 'Harbor', base: 'harbor' },
+    palettes: {
+      marine: { shades: CUSTOM_PALETTES.marine! },
+      ash: { shades: CUSTOM_PALETTES.ash! }
+    },
+    colors: {
+      primary: 'marine',
+      neutral: 'ash'
+    },
+    radius: 0.125,
+    font: { sans: 'Inter' },
+    style: {
+      shadow: 'soft',
+      shadowColor: 'primary-shade',
+      border: 'bold',
+      tokenShades: { '--ui-primary': { dark: 300 } }
+    }
+  }
 }]

From 22264024b0f3610a7037ab802f08866e83b1e0e1 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 22:18:35 +0200
Subject: [PATCH 028/185] =?UTF-8?q?feat(docs):=20oklch-native=20palette=20?=
 =?UTF-8?q?pipeline=20=E2=80=94=20generate,=20store=20and=20export=20oklch?=
 =?UTF-8?q?,=20not=20hex?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/assets/css/main.css                  | 118 ++++++++--------
 docs/app/composables/useTheme.ts              |  10 +-
 docs/app/composables/useThemeStudio.ts        |   6 +-
 .../app/utils/theme-engine/custom-palettes.ts | 110 +++++++--------
 docs/app/utils/theme-engine/export.ts         |   4 +-
 docs/app/utils/theme-engine/oklch.ts          |  47 +++++--
 docs/app/utils/theme-engine/palette.ts        |  15 +-
 docs/app/utils/theme-engine/presets.ts        | 132 +++++++++---------
 docs/app/utils/theme-engine/resolve.ts        |  16 +--
 docs/server/api/ai.post.ts                    |   4 +-
 test/utils/theme-engine.spec.ts               |  86 ++++++++++--
 11 files changed, 320 insertions(+), 228 deletions(-)

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index 6790a46cac..683de927c2 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -8,65 +8,65 @@
 
   /* Studio extras: custom neutrals (sand, sage, ash) and primaries
      (cocoa, marine) beyond the stock tailwind palettes. */
-  --color-sand-50: #FAF8F4;
-  --color-sand-100: #F3EFE7;
-  --color-sand-200: #E6DFD1;
-  --color-sand-300: #D4C9B4;
-  --color-sand-400: #B7A88D;
-  --color-sand-500: #9A8B6F;
-  --color-sand-600: #7E7059;
-  --color-sand-700: #665A48;
-  --color-sand-800: #52483A;
-  --color-sand-900: #443C31;
-  --color-sand-950: #26211A;
-
-  --color-sage-50: #F6F8F5;
-  --color-sage-100: #EBF0EA;
-  --color-sage-200: #D8E1D6;
-  --color-sage-300: #BCCBBA;
-  --color-sage-400: #97AB95;
-  --color-sage-500: #778C75;
-  --color-sage-600: #5F725E;
-  --color-sage-700: #4D5C4C;
-  --color-sage-800: #3F4B3E;
-  --color-sage-900: #343E34;
-  --color-sage-950: #1B221B;
-
-  --color-ash-50: #F5F6F8;
-  --color-ash-100: #E9EBEF;
-  --color-ash-200: #D3D7DF;
-  --color-ash-300: #B0B7C4;
-  --color-ash-400: #848EA1;
-  --color-ash-500: #646F84;
-  --color-ash-600: #4F586A;
-  --color-ash-700: #404755;
-  --color-ash-800: #363C47;
-  --color-ash-900: #2C313A;
-  --color-ash-950: #16181E;
-
-  --color-cocoa-50: #FAF6F2;
-  --color-cocoa-100: #F2E9E1;
-  --color-cocoa-200: #E3D2C2;
-  --color-cocoa-300: #CFB49D;
-  --color-cocoa-400: #B58F6F;
-  --color-cocoa-500: #966F4C;
-  --color-cocoa-600: #7C5A3C;
-  --color-cocoa-700: #654931;
-  --color-cocoa-800: #533C2A;
-  --color-cocoa-900: #453325;
-  --color-cocoa-950: #251A12;
-
-  --color-marine-50: #F2F6FB;
-  --color-marine-100: #E2ECF7;
-  --color-marine-200: #C6D9EF;
-  --color-marine-300: #9DBDE2;
-  --color-marine-400: #6C9AD0;
-  --color-marine-500: #467BBB;
-  --color-marine-600: #33619E;
-  --color-marine-700: #2B4F80;
-  --color-marine-800: #274268;
-  --color-marine-900: #243A57;
-  --color-marine-950: #182636;
+  --color-sand-50: oklch(98% 0.006 84.566);
+  --color-sand-100: oklch(95.3% 0.011 84.579);
+  --color-sand-200: oklch(90.5% 0.02 84.591);
+  --color-sand-300: oklch(83.9% 0.031 83.625);
+  --color-sand-400: oklch(73.7% 0.041 82.274);
+  --color-sand-500: oklch(64.3% 0.044 82.996);
+  --color-sand-600: oklch(55.2% 0.038 80.056);
+  --color-sand-700: oklch(47.4% 0.032 77.861);
+  --color-sand-800: oklch(40.7% 0.026 76.147);
+  --color-sand-900: oklch(36.1% 0.021 75.745);
+  --color-sand-950: oklch(25.1% 0.015 76.21);
+
+  --color-sage-50: oklch(97.7% 0.004 134.849);
+  --color-sage-100: oklch(95% 0.01 140.516);
+  --color-sage-200: oklch(90% 0.018 140.022);
+  --color-sage-300: oklch(82.6% 0.029 141.964);
+  --color-sage-400: oklch(71.9% 0.038 142.667);
+  --color-sage-500: oklch(61.7% 0.042 142.713);
+  --color-sage-600: oklch(53% 0.038 143.698);
+  --color-sage-700: oklch(45.7% 0.032 143.377);
+  --color-sage-800: oklch(39.8% 0.026 142.997);
+  --color-sage-900: oklch(35.1% 0.022 145.097);
+  --color-sage-950: oklch(24.2% 0.017 145.041);
+
+  --color-ash-50: oklch(97.3% 0.003 264.542);
+  --color-ash-100: oklch(94% 0.006 264.532);
+  --color-ash-200: oklch(87.8% 0.012 264.505);
+  --color-ash-300: oklch(77.8% 0.02 262.99);
+  --color-ash-400: oklch(64.5% 0.031 263.35);
+  --color-ash-500: oklch(54% 0.036 263.342);
+  --color-ash-600: oklch(45.9% 0.032 264.197);
+  --color-ash-700: oklch(39.7% 0.025 264.228);
+  --color-ash-800: oklch(35.5% 0.021 262.595);
+  --color-ash-900: oklch(31.2% 0.018 262.24);
+  --color-ash-950: oklch(21% 0.012 270.771);
+
+  --color-cocoa-50: oklch(97.5% 0.007 67.745);
+  --color-cocoa-100: oklch(93.9% 0.015 64.338);
+  --color-cocoa-200: oklch(87.3% 0.029 65.727);
+  --color-cocoa-300: oklch(78.7% 0.044 62.544);
+  --color-cocoa-400: oklch(67.8% 0.064 61.516);
+  --color-cocoa-500: oklch(57.3% 0.07 62.619);
+  --color-cocoa-600: oklch(49.6% 0.063 62.025);
+  --color-cocoa-700: oklch(43% 0.053 61.313);
+  --color-cocoa-800: oklch(37.7% 0.043 59.008);
+  --color-cocoa-900: oklch(33.7% 0.035 59.102);
+  --color-cocoa-950: oklch(22.9% 0.023 57.319);
+
+  --color-marine-50: oklch(97.2% 0.008 253.853);
+  --color-marine-100: oklch(93.9% 0.018 250.593);
+  --color-marine-200: oklch(87.8% 0.037 252.096);
+  --color-marine-300: oklch(78.8% 0.063 252.304);
+  --color-marine-400: oklch(67.5% 0.095 253.08);
+  --color-marine-500: oklch(57.6% 0.114 254.216);
+  --color-marine-600: oklch(49% 0.111 256.206);
+  --color-marine-700: oklch(42.6% 0.092 256.598);
+  --color-marine-800: oklch(37.7% 0.073 257.11);
+  --color-marine-900: oklch(34.5% 0.058 255.734);
+  --color-marine-950: oklch(26.4% 0.036 252.434);
 
   --font-sans: 'Public Sans', sans-serif;
 
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 5ca3dbd1a4..de97b6fd44 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -21,6 +21,8 @@ function readLocalStorage<T>(key: string, fallback: T): T {
 // which keeps every downstream sink (live useHead styles and the FOUC inline scripts) safe.
 const SAFE_NAME = /^[\w -]{1,50}$/
 const SAFE_HEX = /^#[0-9a-f]{3,8}$/i
+// The engine's canonical shade format (tailwind v4 style): `oklch(62.3% 0.214 259.815)`.
+const SAFE_OKLCH = /^oklch\(\d{1,3}(?:\.\d+)?% \d(?:\.\d+)? \d{1,3}(?:\.\d+)?\)$/i
 const SAFE_CSS_VAR_KEY = /^--[\w-]+$/
 const SAFE_CSS_VAR_VALUE = /^(?:var\(--[\w-]+\)|#[0-9a-f]{3,8}|[a-z]+|-?\d{1,3}(?:\.\d+)?(?:px|%))$/i
 
@@ -29,9 +31,9 @@ function sanitizeCustomColors(input: Record<string, any>): Record<string, Record
   for (const [name, shades] of Object.entries(input)) {
     if (!SAFE_NAME.test(name) || typeof shades !== 'object' || !shades) continue
     const safeShades: Record<string, string> = {}
-    for (const [shade, hex] of Object.entries(shades as Record<string, unknown>)) {
-      if (/^\d{2,3}$/.test(shade) && typeof hex === 'string' && SAFE_HEX.test(hex)) {
-        safeShades[shade] = hex
+    for (const [shade, value] of Object.entries(shades as Record<string, unknown>)) {
+      if (/^\d{2,3}$/.test(shade) && typeof value === 'string' && (SAFE_OKLCH.test(value) || SAFE_HEX.test(value))) {
+        safeShades[shade] = value
       }
     }
     if (Object.keys(safeShades).length) result[name] = safeShades
@@ -189,7 +191,7 @@ export function useTheme() {
     const entries = Object.entries(customColorsData.value)
     if (!entries.length) return ''
     const vars = entries.flatMap(([name, shades]) =>
-      Object.entries(shades).map(([shade, hex]) => `--color-${name}-${shade}: ${hex};`)
+      Object.entries(shades).map(([shade, color]) => `--color-${name}-${shade}: ${color};`)
     )
     return `:root { ${vars.join(' ')} }`
   })
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index c5507b8546..b6cdd3ca97 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -93,11 +93,11 @@ export function useThemeStudio() {
     return (appConfig.ui.colors as Record<string, string>)[alias] === customPaletteName(alias)
   }
 
-  /** All 11 shade hexes of a named palette — tailwind's JS values first, CSS variables as fallback. */
+  /** All 11 shades of a named palette as oklch — tailwind's JS values first, CSS variables as fallback. */
   function paletteShades(name: string): Partial<Record<Shade, string>> | undefined {
     const tailwind = (colors as Record<string, any>)[name]
     if (tailwind && typeof tailwind === 'object') {
-      return Object.fromEntries(SHADES.map(shade => [shade, parseCssColor(tailwind[shade])]).filter(([, hex]) => hex))
+      return Object.fromEntries(SHADES.map(shade => [shade, parseCssColor(tailwind[shade])]).filter(([, color]) => color))
     }
 
     if (import.meta.client) {
@@ -105,7 +105,7 @@ export function useThemeStudio() {
       const cssName = name === 'neutral' ? 'old-neutral' : name
       const entries = SHADES
         .map(shade => [shade, parseCssColor(styles.getPropertyValue(`--color-${cssName}-${shade}`))] as const)
-        .filter(([, hex]) => hex)
+        .filter(([, color]) => color)
       if (entries.length >= 2) {
         return Object.fromEntries(entries)
       }
diff --git a/docs/app/utils/theme-engine/custom-palettes.ts b/docs/app/utils/theme-engine/custom-palettes.ts
index 281ed70f13..6e65325035 100644
--- a/docs/app/utils/theme-engine/custom-palettes.ts
+++ b/docs/app/utils/theme-engine/custom-palettes.ts
@@ -7,68 +7,68 @@ import type { Shade } from './types'
  */
 export const CUSTOM_PALETTES: Record<string, Record<Shade, string>> = {
   sand: {
-    50: '#FAF8F4',
-    100: '#F3EFE7',
-    200: '#E6DFD1',
-    300: '#D4C9B4',
-    400: '#B7A88D',
-    500: '#9A8B6F',
-    600: '#7E7059',
-    700: '#665A48',
-    800: '#52483A',
-    900: '#443C31',
-    950: '#26211A'
+    50: 'oklch(98% 0.006 84.566)',
+    100: 'oklch(95.3% 0.011 84.579)',
+    200: 'oklch(90.5% 0.02 84.591)',
+    300: 'oklch(83.9% 0.031 83.625)',
+    400: 'oklch(73.7% 0.041 82.274)',
+    500: 'oklch(64.3% 0.044 82.996)',
+    600: 'oklch(55.2% 0.038 80.056)',
+    700: 'oklch(47.4% 0.032 77.861)',
+    800: 'oklch(40.7% 0.026 76.147)',
+    900: 'oklch(36.1% 0.021 75.745)',
+    950: 'oklch(25.1% 0.015 76.21)'
   },
   sage: {
-    50: '#F6F8F5',
-    100: '#EBF0EA',
-    200: '#D8E1D6',
-    300: '#BCCBBA',
-    400: '#97AB95',
-    500: '#778C75',
-    600: '#5F725E',
-    700: '#4D5C4C',
-    800: '#3F4B3E',
-    900: '#343E34',
-    950: '#1B221B'
+    50: 'oklch(97.7% 0.004 134.849)',
+    100: 'oklch(95% 0.01 140.516)',
+    200: 'oklch(90% 0.018 140.022)',
+    300: 'oklch(82.6% 0.029 141.964)',
+    400: 'oklch(71.9% 0.038 142.667)',
+    500: 'oklch(61.7% 0.042 142.713)',
+    600: 'oklch(53% 0.038 143.698)',
+    700: 'oklch(45.7% 0.032 143.377)',
+    800: 'oklch(39.8% 0.026 142.997)',
+    900: 'oklch(35.1% 0.022 145.097)',
+    950: 'oklch(24.2% 0.017 145.041)'
   },
   ash: {
-    50: '#F5F6F8',
-    100: '#E9EBEF',
-    200: '#D3D7DF',
-    300: '#B0B7C4',
-    400: '#848EA1',
-    500: '#646F84',
-    600: '#4F586A',
-    700: '#404755',
-    800: '#363C47',
-    900: '#2C313A',
-    950: '#16181E'
+    50: 'oklch(97.3% 0.003 264.542)',
+    100: 'oklch(94% 0.006 264.532)',
+    200: 'oklch(87.8% 0.012 264.505)',
+    300: 'oklch(77.8% 0.02 262.99)',
+    400: 'oklch(64.5% 0.031 263.35)',
+    500: 'oklch(54% 0.036 263.342)',
+    600: 'oklch(45.9% 0.032 264.197)',
+    700: 'oklch(39.7% 0.025 264.228)',
+    800: 'oklch(35.5% 0.021 262.595)',
+    900: 'oklch(31.2% 0.018 262.24)',
+    950: 'oklch(21% 0.012 270.771)'
   },
   cocoa: {
-    50: '#FAF6F2',
-    100: '#F2E9E1',
-    200: '#E3D2C2',
-    300: '#CFB49D',
-    400: '#B58F6F',
-    500: '#966F4C',
-    600: '#7C5A3C',
-    700: '#654931',
-    800: '#533C2A',
-    900: '#453325',
-    950: '#251A12'
+    50: 'oklch(97.5% 0.007 67.745)',
+    100: 'oklch(93.9% 0.015 64.338)',
+    200: 'oklch(87.3% 0.029 65.727)',
+    300: 'oklch(78.7% 0.044 62.544)',
+    400: 'oklch(67.8% 0.064 61.516)',
+    500: 'oklch(57.3% 0.07 62.619)',
+    600: 'oklch(49.6% 0.063 62.025)',
+    700: 'oklch(43% 0.053 61.313)',
+    800: 'oklch(37.7% 0.043 59.008)',
+    900: 'oklch(33.7% 0.035 59.102)',
+    950: 'oklch(22.9% 0.023 57.319)'
   },
   marine: {
-    50: '#F2F6FB',
-    100: '#E2ECF7',
-    200: '#C6D9EF',
-    300: '#9DBDE2',
-    400: '#6C9AD0',
-    500: '#467BBB',
-    600: '#33619E',
-    700: '#2B4F80',
-    800: '#274268',
-    900: '#243A57',
-    950: '#182636'
+    50: 'oklch(97.2% 0.008 253.853)',
+    100: 'oklch(93.9% 0.018 250.593)',
+    200: 'oklch(87.8% 0.037 252.096)',
+    300: 'oklch(78.8% 0.063 252.304)',
+    400: 'oklch(67.5% 0.095 253.08)',
+    500: 'oklch(57.6% 0.114 254.216)',
+    600: 'oklch(49% 0.111 256.206)',
+    700: 'oklch(42.6% 0.092 256.598)',
+    800: 'oklch(37.7% 0.073 257.11)',
+    900: 'oklch(34.5% 0.058 255.734)',
+    950: 'oklch(26.4% 0.036 252.434)'
   }
 }
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index 59a28fef95..0ab05aa97f 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -19,8 +19,8 @@ export function generateCSS(doc: ThemeDoc): string {
 
   const colorLines: string[] = []
   for (const [name, palette] of Object.entries(doc.palettes || {})) {
-    for (const [shade, hex] of Object.entries(palette.shades)) {
-      colorLines.push(`  --color-${name}-${shade}: ${hex};`)
+    for (const [shade, color] of Object.entries(palette.shades)) {
+      colorLines.push(`  --color-${name}-${shade}: ${color};`)
     }
   }
 
diff --git a/docs/app/utils/theme-engine/oklch.ts b/docs/app/utils/theme-engine/oklch.ts
index b3f4a11aa8..16afd41406 100644
--- a/docs/app/utils/theme-engine/oklch.ts
+++ b/docs/app/utils/theme-engine/oklch.ts
@@ -1,8 +1,9 @@
 /**
  * Minimal sRGB ↔ OKLCH conversion (Björn Ottosson's OKLab), kept
  * dependency-free so the engine stays portable. Only what the palette
- * generator needs: parse a hex, move through OKLCH space, come back to a
- * gamut-safe hex.
+ * generator needs: parse any CSS color the studio meets, move through
+ * OKLCH space, come back out as a gamut-safe `oklch(…)` string —
+ * tailwind v4's native color format.
  */
 
 export interface Oklch {
@@ -109,40 +110,56 @@ export function hexToOklch(hex: string): Oklch {
 }
 
 /**
- * Normalize a CSS color value to hex. Handles the forms the studio actually
+ * Serialize to an `oklch(…)` string in tailwind v4's shape:
+ * `oklch(62.3% 0.214 259.815)`. Pure formatting — no gamut clamp, so
+ * wider-than-sRGB values (tailwind's own ramps have them) survive a
+ * round-trip. Achromatic hue is atan2 noise — zero it.
+ */
+export function formatOklch(color: Oklch): string {
+  const c = +color.c.toFixed(3)
+  return `oklch(${+(color.l * 100).toFixed(1)}% ${c} ${c === 0 ? 0 : +color.h.toFixed(3)})`
+}
+
+/**
+ * Parse a CSS color into OKLCH. Handles the forms the studio actually
  * meets: hex, `oklch(…)` (tailwind v4's format) and `rgb(…)`.
  */
-export function parseCssColor(value: string): string | undefined {
+export function parseColor(value: string): Oklch | undefined {
   const input = value.trim()
 
   if (input.startsWith('#')) {
-    return rgbToHex(hexToRgb(input))
+    return rgbToOklch(hexToRgb(input))
   }
 
   const oklch = input.match(/^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)/i)
   if (oklch) {
-    const l = Number(oklch[1]) / (oklch[2] === '%' ? 100 : 1)
-    return oklchToHex({ l, c: Number(oklch[3]), h: Number(oklch[4]) })
+    return { l: Number(oklch[1]) / (oklch[2] === '%' ? 100 : 1), c: Number(oklch[3]), h: Number(oklch[4]) }
   }
 
   const rgb = input.match(/^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/i)
   if (rgb) {
-    return rgbToHex([Number(rgb[1]) / 255, Number(rgb[2]) / 255, Number(rgb[3]) / 255])
+    return rgbToOklch([Number(rgb[1]) / 255, Number(rgb[2]) / 255, Number(rgb[3]) / 255])
   }
 
   return undefined
 }
 
-/** WCAG 2.x relative luminance. */
-function luminance(hex: string): number {
-  const [r, g, b] = hexToRgb(hex).map(srgbToLinear) as [number, number, number]
+/** Normalize a CSS color value to a canonical `oklch(…)` string. */
+export function parseCssColor(value: string): string | undefined {
+  const color = parseColor(value)
+  return color ? formatOklch(color) : undefined
+}
+
+/** WCAG 2.x relative luminance — linear RGB is exactly what the formula wants. */
+function luminance(color: Oklch): number {
+  const [r, g, b] = oklchToLinearRgb(clampToGamut(color)).map(channel => Math.min(1, Math.max(0, channel))) as [number, number, number]
   return 0.2126 * r + 0.7152 * g + 0.0722 * b
 }
 
-/** WCAG 2.x contrast ratio between two hex colors, 1–21. */
-export function contrastRatio(hexA: string, hexB: string): number {
-  const la = luminance(hexA)
-  const lb = luminance(hexB)
+/** WCAG 2.x contrast ratio between two CSS colors (hex or oklch), 1–21. */
+export function contrastRatio(colorA: string, colorB: string): number {
+  const la = luminance(parseColor(colorA) || { l: 0, c: 0, h: 0 })
+  const lb = luminance(parseColor(colorB) || { l: 0, c: 0, h: 0 })
   const [lighter, darker] = la > lb ? [la, lb] : [lb, la]
   return (lighter + 0.05) / (darker + 0.05)
 }
diff --git a/docs/app/utils/theme-engine/palette.ts b/docs/app/utils/theme-engine/palette.ts
index fab8ff2f17..f7f8c7976c 100644
--- a/docs/app/utils/theme-engine/palette.ts
+++ b/docs/app/utils/theme-engine/palette.ts
@@ -1,6 +1,6 @@
 import type { Shade } from './types'
 import { SHADES } from './types'
-import { hexToOklch, oklchToHex } from './oklch'
+import { clampToGamut, formatOklch, parseColor } from './oklch'
 import type { Oklch } from './oklch'
 
 /**
@@ -83,11 +83,13 @@ export function generatePalette(params: PaletteCurveParams): Record<Shade, strin
   for (const [index, shade] of SHADES.entries()) {
     const x = index / (SHADES.length - 1)
 
-    result[shade] = oklchToHex({
+    // Clamp here, not in the serializer: sculpted curves can demand
+    // impossible chroma, and the swatches/contrast math assume sRGB.
+    result[shade] = formatOklch(clampToGamut({
       l: sampleCurve(x, params.lightness),
       c: Math.max(0, sampleCurve(x, params.chroma)),
       h: sampleCurve(x, params.hue)
-    })
+    }))
   }
 
   return result
@@ -175,9 +177,10 @@ export function fitCurve(points: Array<[number, number]>): ChannelCurve {
 export function fitPalette(shades: Partial<Record<Shade, string>>): PaletteCurveParams {
   const stops: Array<{ x: number, color: Oklch }> = []
   for (const [index, shade] of SHADES.entries()) {
-    const hex = shades[shade]
-    if (hex) {
-      stops.push({ x: index / (SHADES.length - 1), color: hexToOklch(hex) })
+    // Accept hex or oklch — older saved docs and pasted ramps are hex.
+    const color = shades[shade] ? parseColor(shades[shade]!) : undefined
+    if (color) {
+      stops.push({ x: index / (SHADES.length - 1), color })
     }
   }
 
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 500eac1597..57f46f4319 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -58,17 +58,17 @@ export const presets: ThemePreset[] = [{
     palettes: {
       brut: {
         shades: {
-          50: '#FFECEC',
-          100: '#FFD6D6',
-          200: '#FFB3B3',
-          300: '#FF8F8F',
-          400: '#FF6666',
-          500: '#FF3333',
-          600: '#E61A1A',
-          700: '#C21212',
-          800: '#9E0E0E',
-          900: '#800C0C',
-          950: '#450505'
+          50: 'oklch(95.8% 0.021 17.519)',
+          100: 'oklch(91.1% 0.046 18.029)',
+          200: 'oklch(83.9% 0.089 19.107)',
+          300: 'oklch(77% 0.136 20.678)',
+          400: 'oklch(70.4% 0.187 23.186)',
+          500: 'oklch(64.9% 0.237 26.973)',
+          600: 'oklch(58.9% 0.23 28.239)',
+          700: 'oklch(51.7% 0.204 28.37)',
+          800: 'oklch(44.5% 0.174 28.254)',
+          900: 'oklch(38.3% 0.148 27.965)',
+          950: 'oklch(25.2% 0.094 27.421)'
         }
       }
     },
@@ -156,17 +156,17 @@ export const presets: ThemePreset[] = [{
     palettes: {
       moss: {
         shades: {
-          50: '#F7F9EC',
-          100: '#EDF2D8',
-          200: '#DCE5B5',
-          300: '#C6D48E',
-          400: '#ADBE71',
-          500: '#96A65C',
-          600: '#7A894A',
-          700: '#62703C',
-          800: '#4C5730',
-          900: '#3D4628',
-          950: '#212614'
+          50: 'oklch(97.7% 0.017 113.81)',
+          100: 'oklch(95% 0.035 115.901)',
+          200: 'oklch(90.3% 0.064 116.322)',
+          300: 'oklch(84.3% 0.093 117.644)',
+          400: 'oklch(77.1% 0.103 119.054)',
+          500: 'oklch(69.5% 0.1 119.088)',
+          600: 'oklch(60.3% 0.089 120.118)',
+          700: 'oklch(52% 0.077 121.459)',
+          800: 'oklch(43.7% 0.061 121.818)',
+          900: 'oklch(37.8% 0.049 122.375)',
+          950: 'oklch(25.8% 0.032 121.343)'
         }
       }
     },
@@ -221,32 +221,32 @@ export const presets: ThemePreset[] = [{
     palettes: {
       clay: {
         shades: {
-          50: '#FBF5F2',
-          100: '#F5E9E2',
-          200: '#EBD4C7',
-          300: '#E0BCA8',
-          400: '#D69C7F',
-          500: '#CC785C',
-          600: '#B86146',
-          700: '#9A4F38',
-          800: '#7D402E',
-          900: '#663527',
-          950: '#371B12'
+          50: 'oklch(97.4% 0.008 48.655)',
+          100: 'oklch(94.2% 0.016 52.554)',
+          200: 'oklch(88.5% 0.031 51.489)',
+          300: 'oklch(82.1% 0.05 50.739)',
+          400: 'oklch(74.1% 0.081 47.602)',
+          500: 'oklch(65.8% 0.113 39.145)',
+          600: 'oklch(58.9% 0.119 37.977)',
+          700: 'oklch(51.4% 0.106 37.797)',
+          800: 'oklch(44.4% 0.089 37.263)',
+          900: 'oklch(38.8% 0.074 36.807)',
+          950: 'oklch(25.9% 0.047 38.544)'
         }
       },
       parchment: {
         shades: {
-          50: '#FAF9F5',
-          100: '#F0EEE5',
-          200: '#E4E0D3',
-          300: '#D1CBB8',
-          400: '#AFA893',
-          500: '#8E8672',
-          600: '#726B59',
-          700: '#5C5648',
-          800: '#454034',
-          900: '#33302A',
-          950: '#1B1A15'
+          50: 'oklch(98.2% 0.005 95.099)',
+          100: 'oklch(94.8% 0.012 96.426)',
+          200: 'oklch(90.6% 0.018 92.694)',
+          300: 'oklch(84.2% 0.027 92.429)',
+          400: 'oklch(73.2% 0.03 91.711)',
+          500: 'oklch(62.1% 0.031 88.804)',
+          600: 'oklch(52.9% 0.028 89.296)',
+          700: 'oklch(45.5% 0.023 87.57)',
+          800: 'oklch(37.3% 0.021 88.083)',
+          900: 'oklch(31% 0.011 84.589)',
+          950: 'oklch(21.7% 0.01 97.797)'
         }
       }
     },
@@ -276,32 +276,32 @@ export const presets: ThemePreset[] = [{
     palettes: {
       signal: {
         shades: {
-          50: '#EAFBF0',
-          100: '#CFF5DD',
-          200: '#A2EBBE',
-          300: '#6EDD9B',
-          400: '#3ECC76',
-          500: '#1DB954',
-          600: '#169C46',
-          700: '#12813B',
-          800: '#106631',
-          900: '#0D5229',
-          950: '#062B15'
+          50: 'oklch(97.3% 0.023 157.606)',
+          100: 'oklch(93.7% 0.051 157.559)',
+          200: 'oklch(88% 0.096 156.74)',
+          300: 'oklch(81.5% 0.14 155.469)',
+          400: 'oklch(75% 0.172 152.412)',
+          500: 'oklch(68.9% 0.187 148.921)',
+          600: 'oklch(60.7% 0.165 149.023)',
+          700: 'oklch(52.9% 0.141 149.561)',
+          800: 'oklch(44.9% 0.115 150.596)',
+          900: 'oklch(38.7% 0.095 151.748)',
+          950: 'oklch(25.6% 0.058 153.065)'
         }
       },
       ink: {
         shades: {
-          50: '#F8F8F8',
-          100: '#EFEFEF',
-          200: '#DEDEDE',
-          300: '#B3B3B3',
-          400: '#8F8F8F',
-          500: '#6E6E6E',
-          600: '#535353',
-          700: '#404040',
-          800: '#2A2A2A',
-          900: '#181818',
-          950: '#121212'
+          50: 'oklch(97.9% 0 0)',
+          100: 'oklch(95.2% 0 0)',
+          200: 'oklch(90.1% 0 0)',
+          300: 'oklch(76.7% 0 0)',
+          400: 'oklch(65% 0 0)',
+          500: 'oklch(53.8% 0 0)',
+          600: 'oklch(44.2% 0 0)',
+          700: 'oklch(37.1% 0 0)',
+          800: 'oklch(28.5% 0 0)',
+          900: 'oklch(20.9% 0 0)',
+          950: 'oklch(18.2% 0 0)'
         }
       }
     },
diff --git a/docs/app/utils/theme-engine/resolve.ts b/docs/app/utils/theme-engine/resolve.ts
index 2fb8b4b874..ce74960360 100644
--- a/docs/app/utils/theme-engine/resolve.ts
+++ b/docs/app/utils/theme-engine/resolve.ts
@@ -59,7 +59,7 @@ export interface ResolvedToken {
   source: 'default' | 'override'
   /**
    * Inheritance breadcrumb, outermost first, e.g.
-   * `['--ui-border', '--ui-color-neutral-200', '--color-slate-200', '#e2e8f0']`
+   * `['--ui-border', '--ui-color-neutral-200', '--color-slate-200', 'oklch(92.9% 0.013 255.508)']`
    */
   chain: string[]
 }
@@ -76,12 +76,12 @@ export function resolveAlias(doc: ThemeDoc, alias: ColorAlias): string {
   return doc.colors?.[alias] || DEFAULT_COLORS[alias]
 }
 
-/** Hex for a palette shade: custom palette first, then its base, then tailwind. */
+/** Color of a palette shade: custom palette first, then its base, then tailwind. */
 export function resolveShade(doc: ThemeDoc, palette: string, shade: Shade): string | undefined {
   const custom = doc.palettes?.[palette]
   if (custom) {
-    const hex = custom.shades[shade]
-    if (hex) return hex
+    const value = custom.shades[shade]
+    if (value) return value
     if (custom.extends) return resolveShade(doc, custom.extends, shade)
     return undefined
   }
@@ -108,10 +108,10 @@ export function resolveToken(doc: ThemeDoc, mode: ColorMode, token: string): Res
     const palette = resolveAlias(doc, alias as ColorAlias)
     chain.push(`--color-${palette}-${shade}`)
 
-    const hex = resolveShade(doc, palette, Number(shade) as Shade)
-    if (hex) {
-      chain.push(hex)
-      value = hex
+    const color = resolveShade(doc, palette, Number(shade) as Shade)
+    if (color) {
+      chain.push(color)
+      value = color
     }
   } else if (raw) {
     chain.push(raw)
diff --git a/docs/server/api/ai.post.ts b/docs/server/api/ai.post.ts
index 7f65b87c73..b14f9332c4 100644
--- a/docs/server/api/ai.post.ts
+++ b/docs/server/api/ai.post.ts
@@ -53,7 +53,7 @@ const applyTheme = {
       icons: { type: 'string', description: 'Icon set for live preview: lucide (default), phosphor, or tabler. For exported code, any Iconify icon set can be suggested.' },
       customColors: {
         type: 'object',
-        description: 'Custom color palettes with shades 50-950 as hex values',
+        description: 'Custom color palettes with shades 50-950 as oklch(L% C H) values (e.g. oklch(62.3% 0.214 259.815)); hex also accepted',
         additionalProperties: {
           type: 'object',
           additionalProperties: { type: 'string' }
@@ -104,7 +104,7 @@ const getThemeGuide = {
     guide: `When users ask to change the theme, customize colors, or modify the appearance, use the \`applyTheme\` tool to apply changes live on this docs site. Only include properties that changed.
 
 When users ask for a complete theme, to change "all colors", or describe a broad aesthetic (e.g. "sakura-inspired theme"), you MUST set ALL of: primary, neutral, secondary, success, info, warning, error, radius, and font. You can change the icon set (lucide, phosphor, or tabler) if it really enhances the theme, but prefer keeping lucide as the default — it works well with most themes. You can optionally include component-level \`ui\` overrides for a more polished result — if you do, look up the component theme first with \`getComponentTheme\` and prefer \`defaultVariants\` (e.g. button size or variant) over slot class overrides. Create a cohesive design system, not just random colors:
-- Pick a **primary** that embodies the theme's identity. If no standard Tailwind color fits, use \`customColors\` to define a bespoke palette with all shades 50-950 as hex values — this is encouraged for creative/unique themes.
+- Pick a **primary** that embodies the theme's identity. If no standard Tailwind color fits, use \`customColors\` to define a bespoke palette with all shades 50-950 as \`oklch(L% C H)\` values — tailwind v4's native format, e.g. \`oklch(62.3% 0.214 259.815)\`. This is encouraged for creative/unique themes.
 - Pick a **secondary** that complements the primary (analogous or contrasting on the color wheel). Can also be a custom palette.
 - Pick **success/info/warning/error** that feel harmonious with the palette while staying semantically meaningful (success = green-ish, error = red-ish, warning = amber/yellow-ish, info = blue/cyan-ish). You can shift hues — e.g. \`lime\` for success in a nature theme, \`rose\` for error in a warm theme — but keep them recognizable.
 - For monochrome/black-and-white themes, keep semantic colors meaningful. Only primary, secondary, and neutral should go monochrome. Use \`blackAsPrimary: true\` for monochrome primary.
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 5d92c7a311..8334f3d09a 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -7,7 +7,15 @@ import {
   docToSettings,
   resolveToken,
   resolveTokens,
-  presets
+  presets,
+  generatePalette,
+  fitPalette,
+  parseCssColor,
+  parseColor,
+  contrastRatio,
+  CURVE_DEFAULTS,
+  SHADES,
+  CUSTOM_PALETTES
 } from '../../docs/app/utils/theme-engine'
 import type { ThemeDoc } from '../../docs/app/utils/theme-engine'
 import colors from 'tailwindcss/colors'
@@ -76,11 +84,11 @@ describe('theme-engine', () => {
     it('emits custom palettes as @theme static shades', () => {
       const css = generateCSS({
         version: 1,
-        palettes: { clay: { shades: { 500: '#CC785C' } } }
+        palettes: { clay: { shades: { 500: 'oklch(65.8% 0.113 39.145)' } } }
       })
 
       expect(css).toContain('@theme static {')
-      expect(css).toContain('  --color-clay-500: #CC785C;')
+      expect(css).toContain('  --color-clay-500: oklch(65.8% 0.113 39.145);')
     })
   })
 
@@ -123,7 +131,7 @@ describe('theme-engine', () => {
       const settings = docToSettings({
         version: 1,
         colors: { primary: 'signal', neutral: 'ink' },
-        palettes: { signal: { shades: { 500: '#1DB954' } } },
+        palettes: { signal: { shades: { 500: 'oklch(68.9% 0.187 148.921)' } } },
         radius: 0.5,
         font: { sans: 'DM Sans' },
         tokens: { dark: { '--ui-bg': 'var(--ui-color-neutral-950)' } },
@@ -135,7 +143,7 @@ describe('theme-engine', () => {
         neutral: 'ink',
         radius: 0.5,
         font: 'DM Sans',
-        customColors: { signal: { 500: '#1DB954' } },
+        customColors: { signal: { 500: 'oklch(68.9% 0.187 148.921)' } },
         cssVariables: { dark: { '--ui-bg': 'var(--ui-color-neutral-950)' } },
         ui: { button: { slots: { base: 'rounded-full' } } }
       })
@@ -155,13 +163,13 @@ describe('theme-engine', () => {
       const doc: ThemeDoc = {
         version: 1,
         colors: { neutral: 'ink' },
-        palettes: { ink: { shades: { 200: '#DEDEDE' } } }
+        palettes: { ink: { shades: { 200: 'oklch(90.1% 0 0)' } } }
       }
 
       const resolved = resolveToken(doc, 'light', '--ui-border')
 
-      expect(resolved.chain).toEqual(['--ui-border', '--ui-color-neutral-200', '--color-ink-200', '#DEDEDE'])
-      expect(resolved.value).toBe('#DEDEDE')
+      expect(resolved.chain).toEqual(['--ui-border', '--ui-color-neutral-200', '--color-ink-200', 'oklch(90.1% 0 0)'])
+      expect(resolved.value).toBe('oklch(90.1% 0 0)')
     })
 
     it('marks token overrides and resolves their new target', () => {
@@ -208,6 +216,68 @@ describe('theme-engine', () => {
       }
     })
   })
+
+  describe('palette colors', () => {
+    // Mirrors the SAFE_OKLCH write boundary in useTheme.ts — a shade that
+    // fails this would be silently dropped by sanitizeCustomColors.
+    const CANONICAL_OKLCH = /^oklch\(\d{1,3}(?:\.\d+)?% \d(?:\.\d+)? \d{1,3}(?:\.\d+)?\)$/
+
+    it('generatePalette emits canonical oklch strings', () => {
+      const shades = generatePalette(CURVE_DEFAULTS)
+      for (const shade of SHADES) {
+        expect(shades[shade]).toMatch(CANONICAL_OKLCH)
+      }
+    })
+
+    it('fitPalette accepts hex and oklch inputs equivalently', () => {
+      // The hex ramp CUSTOM_PALETTES.cocoa was converted from.
+      const cocoaHex = {
+        50: '#FAF6F2', 100: '#F2E9E1', 200: '#E3D2C2', 300: '#CFB49D',
+        400: '#B58F6F', 500: '#966F4C', 600: '#7C5A3C', 700: '#654931',
+        800: '#533C2A', 900: '#453325', 950: '#251A12'
+      } as const
+
+      const fromHex = generatePalette(fitPalette(cocoaHex))
+      const fromOklch = generatePalette(fitPalette(CUSTOM_PALETTES.cocoa!))
+
+      // The fit is a numeric optimization — rounded oklch inputs may land a
+      // hair off the full-precision hex fit, so compare channels, not strings.
+      for (const shade of SHADES) {
+        const a = parseColor(fromHex[shade])!
+        const b = parseColor(fromOklch[shade])!
+        expect(a.l, `L ${shade}`).toBeCloseTo(b.l, 2)
+        expect(a.c, `C ${shade}`).toBeCloseTo(b.c, 2)
+        expect(a.h, `H ${shade}`).toBeCloseTo(b.h, 0)
+      }
+    })
+
+    it('parseCssColor normalizes every supported form to oklch', () => {
+      expect(parseCssColor('#FFFFFF')).toBe('oklch(100% 0 0)')
+      expect(parseCssColor('rgb(255, 255, 255)')).toBe('oklch(100% 0 0)')
+      expect(parseCssColor('oklch(62.3% 0.214 259.815)')).toBe('oklch(62.3% 0.214 259.815)')
+      expect(parseCssColor('gibberish')).toBeUndefined()
+    })
+
+    it('contrastRatio handles oklch and hex inputs', () => {
+      expect(contrastRatio('oklch(100% 0 0)', 'oklch(0% 0 0)')).toBeCloseTo(21, 0)
+      expect(contrastRatio('#FFFFFF', 'oklch(100% 0 0)')).toBeCloseTo(1, 1)
+    })
+
+    it('studio and preset ramps are stored as canonical oklch', () => {
+      for (const [name, shades] of Object.entries(CUSTOM_PALETTES)) {
+        for (const [shade, value] of Object.entries(shades)) {
+          expect(value, `${name}-${shade}`).toMatch(CANONICAL_OKLCH)
+        }
+      }
+      for (const preset of presets) {
+        for (const [name, palette] of Object.entries(preset.doc.palettes || {})) {
+          for (const [shade, value] of Object.entries(palette.shades)) {
+            expect(value, `${preset.id} ${name}-${shade}`).toMatch(CANONICAL_OKLCH)
+          }
+        }
+      }
+    })
+  })
 })
 
 describe('styleComponents', () => {

From 46f03075d8a98d6a9d67480dc85cfcd069139541 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 22:27:54 +0200
Subject: [PATCH 029/185] feat(docs): flat ghost shadows, full token slider
 coverage, font-size and spacing knobs

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 87 +++++++++++++++----
 docs/app/composables/useTheme.ts              | 39 +++++++++
 docs/app/plugins/theme.ts                     | 15 ++++
 docs/app/utils/theme-engine/export.ts         | 15 +++-
 docs/app/utils/theme-engine/resolve.ts        | 12 ++-
 docs/app/utils/theme-engine/styles.ts         | 74 ++++++++++++----
 docs/app/utils/theme-engine/types.ts          |  9 +-
 test/utils/theme-engine.spec.ts               | 61 +++++++++++++
 8 files changed, 278 insertions(+), 34 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index fd73d05fc6..79140d8d2a 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { TOKEN_SHADE_TARGETS, SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, SHADOW_GEOMETRY_DEFAULTS } from '../../utils/theme-engine'
-import type { VariantGroup } from '../../utils/theme-engine'
+import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, SHADOW_GEOMETRY_DEFAULTS } from '../../utils/theme-engine'
+import type { VariantGroup, TokenRamp } from '../../utils/theme-engine'
+
+const appConfig = useAppConfig()
 
 const {
   neutralColors,
@@ -10,6 +12,8 @@ const {
   blackAsPrimary,
   setBlackAsPrimary,
   radius,
+  fontSize,
+  spacing,
   fonts,
   font,
   icon,
@@ -24,14 +28,15 @@ const openSections = reactive<Record<string, boolean>>({
   primary: true,
   neutral: true,
   radius: true,
+  sizing: true,
   defaults: true,
   shadows: true,
   borders: true,
   font: true,
   icons: true,
   mode: true,
-  // token sections keyed by token name; only the background starts open
-  ...Object.fromEntries(TOKEN_SHADE_TARGETS.map((target, index) => [target.token, index === 0]))
+  // token groups keyed by group name; only the first starts open
+  ...Object.fromEntries(TOKEN_GROUPS.map((group, index) => [`tokens-${group.key}`, index === 0]))
 })
 
 const primarySwatch = computed(() => {
@@ -138,9 +143,22 @@ const tokenSections = TOKEN_SHADE_TARGETS.map(target => ({
   }
 }))
 
+const tokenGroups = TOKEN_GROUPS.map(group => ({
+  ...group,
+  sections: tokenSections.filter(section => section.group === group.key)
+}))
+
 const neutralChip = computed(() => neutral.value === 'neutral' ? 'old-neutral' : neutral.value)
 const primaryChip = computed(() => isCustomPalette('primary') ? 'custom-primary' : primary.value)
 
+/** Palette name coloring a token slider's swatch — the alias's current ramp. */
+function rampChip(ramp: TokenRamp): string {
+  if (ramp === 'primary') return primaryChip.value
+  if (ramp === 'neutral') return neutralChip.value
+  const name = (appConfig.ui.colors as Record<string, string>)[ramp] || ramp
+  return name === 'neutral' ? 'old-neutral' : name
+}
+
 const modeTabs = computed(() => modes.value.map(m => ({ label: m.label, icon: m.icon, value: m.label })))
 
 const primaryEditorOpen = ref(false)
@@ -442,6 +460,39 @@ const shadowColor = computed({
             </div>
           </fieldset>
 
+          <fieldset>
+            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+              <UButton
+                label="Sizing"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-chevron-down"
+                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
+                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.sizing && '-rotate-90'] }"
+                @click="openSections.sizing = !openSections.sizing"
+              />
+            </legend>
+
+            <div v-show="openSections.sizing" class="flex flex-col gap-2">
+              <div class="flex items-center gap-2">
+                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Text</span>
+
+                <USlider v-model="fontSize" :min="14" :max="18" :step="0.5" size="xs" />
+
+                <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ fontSize }}px</span>
+              </div>
+
+              <div class="flex items-center gap-2">
+                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Spacing</span>
+
+                <USlider v-model="spacing" :min="0.15" :max="0.35" :step="0.025" size="xs" />
+
+                <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ spacing }}</span>
+              </div>
+            </div>
+          </fieldset>
+
           <fieldset>
             <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
               <UButton
@@ -609,28 +660,32 @@ const shadowColor = computed({
 
       <template #tokens>
         <div class="flex flex-col gap-5 pt-1 pb-4">
-          <fieldset v-for="section in tokenSections" :key="section.token">
+          <fieldset v-for="group in tokenGroups" :key="group.key">
             <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
               <UButton
-                :label="section.label"
+                :label="group.label"
                 color="neutral"
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
                 class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
-                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections[section.token] && '-rotate-90'] }"
-                @click="openSections[section.token] = !openSections[section.token]"
+                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections[`tokens-${group.key}`] && '-rotate-90'] }"
+                @click="openSections[`tokens-${group.key}`] = !openSections[`tokens-${group.key}`]"
               />
             </legend>
 
-            <div v-show="openSections[section.token]" class="flex flex-col gap-2">
-              <ThemeStudioShadeSlider
-                v-for="(slider, modeName) in section.sliders"
-                :key="modeName"
-                v-model="slider.value"
-                :mode="modeName"
-                :chip="section.ramp === 'primary' ? primaryChip : neutralChip"
-              />
+            <div v-show="openSections[`tokens-${group.key}`]" class="flex flex-col gap-3">
+              <div v-for="section in group.sections" :key="section.token" class="flex flex-col gap-1.5">
+                <span class="text-[11px] text-muted select-none">{{ section.label }}</span>
+
+                <ThemeStudioShadeSlider
+                  v-for="(slider, modeName) in section.sliders"
+                  :key="modeName"
+                  v-model="slider.value"
+                  :mode="modeName"
+                  :chip="rampChip(section.ramp)"
+                />
+              </div>
             </div>
           </fieldset>
         </div>
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index de97b6fd44..04a928c7ac 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -79,6 +79,8 @@ export function useTheme() {
   })
   const cssVariablesData = useState<{ light?: Record<string, string>, dark?: Record<string, string> }>('nuxt-ui-css-variables', () => readLocalStorage('nuxt-ui-css-variables', {}))
   const _radius = useLocalStorage('nuxt-ui-radius', 0.25)
+  const _fontSize = useLocalStorage('nuxt-ui-font-size', 16)
+  const _spacing = useLocalStorage('nuxt-ui-spacing', 0.25)
   const _font = useLocalStorage('nuxt-ui-font', 'Public Sans')
   const _iconSet = useLocalStorage('nuxt-ui-icons', 'lucide')
   const _blackAsPrimary = useLocalStorage('nuxt-ui-black-as-primary', false)
@@ -121,6 +123,26 @@ export function useTheme() {
     }
   })
 
+  const fontSize = computed({
+    get() {
+      return _fontSize.value
+    },
+    set(option) {
+      _fontSize.value = option
+      track('Theme Changed', { setting: 'fontSize', value: option })
+    }
+  })
+
+  const spacing = computed({
+    get() {
+      return _spacing.value
+    },
+    set(option) {
+      _spacing.value = option
+      track('Theme Changed', { setting: 'spacing', value: option })
+    }
+  })
+
   const fonts = ['Public Sans', 'DM Sans', 'Geist', 'Inter', 'Poppins', 'Outfit', 'Raleway']
 
   const font = computed({
@@ -185,6 +207,10 @@ export function useTheme() {
   const hasCSSVariables = computed(() => Object.keys(cssVariablesData.value.light || {}).length > 0 || Object.keys(cssVariablesData.value.dark || {}).length > 0)
 
   const radiusStyle = computed(() => `:root { --ui-radius: ${_radius.value}rem; }`)
+  // font-size scales every rem metric (UI scale); --spacing is tailwind v4's
+  // base unit behind all spacing utilities (density).
+  const fontSizeStyle = computed(() => _fontSize.value !== 16 ? `html { font-size: ${_fontSize.value}px; }` : 'html {}')
+  const spacingStyle = computed(() => _spacing.value !== 0.25 ? `:root { --spacing: ${_spacing.value}rem; }` : ':root {}')
   const blackAsPrimaryStyle = computed(() => _blackAsPrimary.value ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
   const fontStyle = computed(() => `:root { --font-sans: '${_font.value}', sans-serif; }`)
   const customColorsStyle = computed(() => {
@@ -221,6 +247,8 @@ export function useTheme() {
 
   const style = [
     { innerHTML: radiusStyle, id: 'nuxt-ui-radius', tagPriority: -2 },
+    { innerHTML: fontSizeStyle, id: 'nuxt-ui-font-size', tagPriority: -2 },
+    { innerHTML: spacingStyle, id: 'nuxt-ui-spacing', tagPriority: -2 },
     { innerHTML: blackAsPrimaryStyle, id: 'nuxt-ui-black-as-primary', tagPriority: -2 },
     { innerHTML: fontStyle, id: 'nuxt-ui-font', tagPriority: -2 },
     { innerHTML: customColorsStyle, id: 'chat-custom-colors', tagPriority: -2 },
@@ -229,6 +257,8 @@ export function useTheme() {
 
   const hasCSSChanges = computed(() => {
     return _radius.value !== 0.25
+      || _fontSize.value !== 16
+      || _spacing.value !== 0.25
       || _blackAsPrimary.value
       || _font.value !== 'Public Sans'
       || hasCustomColors.value
@@ -264,6 +294,8 @@ export function useTheme() {
 
     if (_blackAsPrimary.value) doc.blackAsPrimary = true
     if (_radius.value !== THEME_DEFAULTS.radius) doc.radius = _radius.value
+    if (_fontSize.value !== THEME_DEFAULTS.fontSize) doc.fontSize = _fontSize.value
+    if (_spacing.value !== THEME_DEFAULTS.spacing) doc.spacing = _spacing.value
     if (_font.value !== THEME_DEFAULTS.font) doc.font = { sans: _font.value }
     if (_iconSet.value !== THEME_DEFAULTS.icons) doc.icons = _iconSet.value
 
@@ -407,6 +439,9 @@ export function useTheme() {
     // Custom palettes (injected via customColors) are valid neutrals too, e.g. presets shipping their own ramp.
     if (settings.neutral && SAFE_NAME.test(settings.neutral) && (neutralColors.includes(settings.neutral) || (customColorsData.value[settings.neutral] || safeCustomColors[settings.neutral]))) neutral.value = settings.neutral
     if (settings.radius !== undefined && Number.isFinite(Number(settings.radius))) radius.value = Number(settings.radius)
+    // Clamped: these scale the whole page, so a wild value would wreck it.
+    if (settings.fontSize !== undefined && Number.isFinite(Number(settings.fontSize))) fontSize.value = Math.min(20, Math.max(12, Number(settings.fontSize)))
+    if (settings.spacing !== undefined && Number.isFinite(Number(settings.spacing))) spacing.value = Math.min(0.5, Math.max(0.125, Number(settings.spacing)))
     if (settings.font && SAFE_NAME.test(settings.font)) font.value = settings.font
     if (settings.icons && settings.icons in themeIcons) icon.value = settings.icons
     if (settings.blackAsPrimary !== undefined) setBlackAsPrimary(!!settings.blackAsPrimary)
@@ -455,6 +490,8 @@ export function useTheme() {
     window.localStorage.removeItem('nuxt-ui-neutral')
 
     _radius.value = 0.25
+    _fontSize.value = 16
+    _spacing.value = 0.25
     _font.value = 'Public Sans'
     _iconSet.value = 'lucide'
     appConfig.ui.icons = themeIcons.lucide as any
@@ -508,6 +545,8 @@ export function useTheme() {
     setBlackAsPrimary,
     radiuses,
     radius,
+    fontSize,
+    spacing,
     fonts,
     font,
     icon,
diff --git a/docs/app/plugins/theme.ts b/docs/app/plugins/theme.ts
index d834be8e95..cb32adbac5 100644
--- a/docs/app/plugins/theme.ts
+++ b/docs/app/plugins/theme.ts
@@ -133,6 +133,21 @@ export default defineNuxtPlugin({
           `.replace(/\s+/g, ' '),
           type: 'text/javascript',
           tagPriority: -1
+        }, {
+          innerHTML: `
+            var fsRaw = localStorage.getItem('nuxt-ui-font-size');
+            if (fsRaw && fsRaw !== '16') {
+              var fsEl = document.querySelector('style#nuxt-ui-font-size');
+              if (fsEl) { fsEl.innerHTML = 'html { font-size: ' + fsRaw + 'px; }'; }
+            }
+            var spRaw = localStorage.getItem('nuxt-ui-spacing');
+            if (spRaw && spRaw !== '0.25') {
+              var spEl = document.querySelector('style#nuxt-ui-spacing');
+              if (spEl) { spEl.innerHTML = ':root { --spacing: ' + spRaw + 'rem; }'; }
+            }
+          `.replace(/\s+/g, ' '),
+          type: 'text/javascript',
+          tagPriority: -1
         }, {
           innerHTML: `
             var bapEl = document.querySelector('style#nuxt-ui-black-as-primary');
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index 0ab05aa97f..11bc8e9d9c 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -13,8 +13,15 @@ export function generateCSS(doc: ThemeDoc): string {
     '@import "@nuxt/ui";'
   ]
 
+  const themeLines: string[] = []
   if (doc.font?.sans && doc.font.sans !== THEME_DEFAULTS.font) {
-    lines.push('', '@theme {', `  --font-sans: '${doc.font.sans}', sans-serif;`, '}')
+    themeLines.push(`  --font-sans: '${doc.font.sans}', sans-serif;`)
+  }
+  if (doc.spacing !== undefined && doc.spacing !== THEME_DEFAULTS.spacing) {
+    themeLines.push(`  --spacing: ${doc.spacing}rem;`)
+  }
+  if (themeLines.length) {
+    lines.push('', '@theme {', ...themeLines, '}')
   }
 
   const colorLines: string[] = []
@@ -28,6 +35,10 @@ export function generateCSS(doc: ThemeDoc): string {
     lines.push('', '@theme static {', ...colorLines, '}')
   }
 
+  if (doc.fontSize !== undefined && doc.fontSize !== THEME_DEFAULTS.fontSize) {
+    lines.push('', 'html {', `  font-size: ${doc.fontSize}px;`, '}')
+  }
+
   const rootLines: string[] = []
   if (doc.radius !== undefined && doc.radius !== THEME_DEFAULTS.radius) {
     rootLines.push(`  --ui-radius: ${doc.radius}rem;`)
@@ -154,6 +165,8 @@ export function docToSettings(doc: ThemeDoc): Record<string, any> {
 
   if (doc.blackAsPrimary) settings.blackAsPrimary = true
   if (doc.radius !== undefined) settings.radius = doc.radius
+  if (doc.fontSize !== undefined) settings.fontSize = doc.fontSize
+  if (doc.spacing !== undefined) settings.spacing = doc.spacing
   if (doc.font?.sans) settings.font = doc.font.sans
   if (doc.icons) settings.icons = doc.icons
 
diff --git a/docs/app/utils/theme-engine/resolve.ts b/docs/app/utils/theme-engine/resolve.ts
index ce74960360..d85ec9d269 100644
--- a/docs/app/utils/theme-engine/resolve.ts
+++ b/docs/app/utils/theme-engine/resolve.ts
@@ -12,8 +12,13 @@ export type ColorMode = 'light' | 'dark'
  */
 export const LIBRARY_TOKEN_DEFAULTS = {
   light: {
-    // generated by the runtime colors plugin, not index.css
+    // the --ui-<alias> tokens are generated by the runtime colors plugin, not index.css
     '--ui-primary': 'var(--ui-color-primary-500)',
+    '--ui-secondary': 'var(--ui-color-secondary-500)',
+    '--ui-success': 'var(--ui-color-success-500)',
+    '--ui-info': 'var(--ui-color-info-500)',
+    '--ui-warning': 'var(--ui-color-warning-500)',
+    '--ui-error': 'var(--ui-color-error-500)',
     '--ui-text-dimmed': 'var(--ui-color-neutral-400)',
     '--ui-text-muted': 'var(--ui-color-neutral-500)',
     '--ui-text-toned': 'var(--ui-color-neutral-600)',
@@ -32,6 +37,11 @@ export const LIBRARY_TOKEN_DEFAULTS = {
   },
   dark: {
     '--ui-primary': 'var(--ui-color-primary-400)',
+    '--ui-secondary': 'var(--ui-color-secondary-400)',
+    '--ui-success': 'var(--ui-color-success-400)',
+    '--ui-info': 'var(--ui-color-info-400)',
+    '--ui-warning': 'var(--ui-color-warning-400)',
+    '--ui-error': 'var(--ui-color-error-400)',
     '--ui-text-dimmed': 'var(--ui-color-neutral-500)',
     '--ui-text-muted': 'var(--ui-color-neutral-400)',
     '--ui-text-toned': 'var(--ui-color-neutral-300)',
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index b8d19f1c82..5e20d105b5 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -99,18 +99,47 @@ export const SHADOW_GEOMETRY_DEFAULTS = { x: 3, y: 3, blur: 0, spread: 0 }
 /** Borders default opposite to the surface: dark ink on light, pale on dark. */
 export const BORDER_SHADE_DEFAULTS = { light: 900, dark: 200 }
 
+/** Color scale a token slider walks — neutral, or any semantic alias's ramp. */
+export type TokenRamp = 'neutral' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error'
+
+export type TokenGroup = 'colors' | 'background' | 'text' | 'border'
+
+export const TOKEN_GROUPS: Array<{ key: TokenGroup, label: string }> = [
+  { key: 'colors', label: 'Colors' },
+  { key: 'background', label: 'Background' },
+  { key: 'text', label: 'Text' },
+  { key: 'border', label: 'Borders' }
+]
+
 /**
  * Semantic tokens the studio exposes as per-mode shade sliders, with the
  * library/docs default shades. 'white' library values map to shade 50.
- * `ramp` names the color scale the slider walks (and the token references).
+ * `ramp` names the color scale the slider walks (and the token references);
+ * the semantic aliases ride their own ramps (--ui-secondary follows the
+ * secondary palette, etc. — all generated by the runtime colors plugin).
  */
-export const TOKEN_SHADE_TARGETS: Array<{ token: string, label: string, ramp: 'neutral' | 'primary', defaults: { light: number, dark: number } }> = [
-  { token: '--ui-primary', label: 'Primary', ramp: 'primary', defaults: { light: 500, dark: 400 } },
-  { token: '--ui-bg', label: 'Background', ramp: 'neutral', defaults: { light: 50, dark: 900 } },
-  { token: '--ui-bg-inverted', label: 'Inverted', ramp: 'neutral', defaults: { light: 900, dark: 50 } },
-  { token: '--ui-text-highlighted', label: 'Highlighted', ramp: 'neutral', defaults: { light: 900, dark: 50 } },
-  { token: '--ui-text-muted', label: 'Muted', ramp: 'neutral', defaults: { light: 500, dark: 400 } },
-  { token: '--ui-text-dimmed', label: 'Dimmed', ramp: 'neutral', defaults: { light: 400, dark: 500 } }
+export const TOKEN_SHADE_TARGETS: Array<{ token: string, label: string, ramp: TokenRamp, group: TokenGroup, defaults: { light: number, dark: number } }> = [
+  { token: '--ui-primary', label: 'Primary', ramp: 'primary', group: 'colors', defaults: { light: 500, dark: 400 } },
+  { token: '--ui-secondary', label: 'Secondary', ramp: 'secondary', group: 'colors', defaults: { light: 500, dark: 400 } },
+  { token: '--ui-success', label: 'Success', ramp: 'success', group: 'colors', defaults: { light: 500, dark: 400 } },
+  { token: '--ui-info', label: 'Info', ramp: 'info', group: 'colors', defaults: { light: 500, dark: 400 } },
+  { token: '--ui-warning', label: 'Warning', ramp: 'warning', group: 'colors', defaults: { light: 500, dark: 400 } },
+  { token: '--ui-error', label: 'Error', ramp: 'error', group: 'colors', defaults: { light: 500, dark: 400 } },
+  { token: '--ui-bg', label: 'Default', ramp: 'neutral', group: 'background', defaults: { light: 50, dark: 900 } },
+  { token: '--ui-bg-muted', label: 'Muted', ramp: 'neutral', group: 'background', defaults: { light: 50, dark: 800 } },
+  { token: '--ui-bg-elevated', label: 'Elevated', ramp: 'neutral', group: 'background', defaults: { light: 100, dark: 800 } },
+  { token: '--ui-bg-accented', label: 'Accented', ramp: 'neutral', group: 'background', defaults: { light: 200, dark: 700 } },
+  { token: '--ui-bg-inverted', label: 'Inverted', ramp: 'neutral', group: 'background', defaults: { light: 900, dark: 50 } },
+  { token: '--ui-text-dimmed', label: 'Dimmed', ramp: 'neutral', group: 'text', defaults: { light: 400, dark: 500 } },
+  { token: '--ui-text-muted', label: 'Muted', ramp: 'neutral', group: 'text', defaults: { light: 500, dark: 400 } },
+  { token: '--ui-text-toned', label: 'Toned', ramp: 'neutral', group: 'text', defaults: { light: 600, dark: 300 } },
+  { token: '--ui-text', label: 'Default', ramp: 'neutral', group: 'text', defaults: { light: 700, dark: 200 } },
+  { token: '--ui-text-highlighted', label: 'Highlighted', ramp: 'neutral', group: 'text', defaults: { light: 900, dark: 50 } },
+  { token: '--ui-text-inverted', label: 'Inverted', ramp: 'neutral', group: 'text', defaults: { light: 50, dark: 900 } },
+  { token: '--ui-border', label: 'Default', ramp: 'neutral', group: 'border', defaults: { light: 200, dark: 800 } },
+  { token: '--ui-border-muted', label: 'Muted', ramp: 'neutral', group: 'border', defaults: { light: 200, dark: 700 } },
+  { token: '--ui-border-accented', label: 'Accented', ramp: 'neutral', group: 'border', defaults: { light: 300, dark: 700 } },
+  { token: '--ui-border-inverted', label: 'Inverted', ramp: 'neutral', group: 'border', defaults: { light: 900, dark: 50 } }
 ]
 export const SHADOW_SHADE_DEFAULTS = { light: 950, dark: 800 }
 
@@ -122,17 +151,32 @@ interface ComponentFragment {
 
 type Fragments = Record<string, ComponentFragment>
 
+// Form fields also come in surfaceless variants (ghost/none) — those stay
+// flat under both shadow treatments.
+const FLAT_FIELD_VARIANTS = [
+  { variant: 'ghost', class: 'shadow-none' },
+  { variant: 'none', class: 'shadow-none' }
+]
+
 const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
   none: {},
   soft: {
     // shadow-(color:--ui-shadow-final-soft) recolors the preset shadows through the
     // same variable the hard treatment uses, so the color/shade options
     // apply to soft shadows too (tailwind stock shadows are hardcoded black).
-    button: { slots: { base: 'shadow-sm shadow-(color:--ui-shadow-final-soft)' } },
+    button: {
+      slots: { base: 'shadow-sm shadow-(color:--ui-shadow-final-soft)' },
+      // A shadow under an invisible surface reads as a glitch — ghost only
+      // casts one once hover paints its background; link stays flat (it's text).
+      compoundVariants: [
+        { variant: 'ghost', class: 'shadow-none hover:shadow-sm transition-shadow' },
+        { variant: 'link', class: 'shadow-none' }
+      ]
+    },
     card: { slots: { root: 'shadow-md shadow-(color:--ui-shadow-final-soft)' } },
-    input: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)' } },
-    select: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)' } },
-    textarea: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)' } },
+    input: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)' }, compoundVariants: FLAT_FIELD_VARIANTS },
+    select: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)' }, compoundVariants: FLAT_FIELD_VARIANTS },
+    textarea: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)' }, compoundVariants: FLAT_FIELD_VARIANTS },
     alert: { slots: { root: 'shadow-md shadow-(color:--ui-shadow-final-soft)' } },
     badge: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)' } }
   },
@@ -151,9 +195,9 @@ const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
       ]
     },
     card: { slots: { root: 'shadow-[calc(var(--ui-shadow-offset-x)*1.5)_calc(var(--ui-shadow-offset-y)*1.5)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' } },
-    input: { slots: { base: 'shadow-[var(--ui-shadow-offset-x)_var(--ui-shadow-offset-y)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' } },
-    select: { slots: { base: 'shadow-[var(--ui-shadow-offset-x)_var(--ui-shadow-offset-y)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' } },
-    textarea: { slots: { base: 'shadow-[var(--ui-shadow-offset-x)_var(--ui-shadow-offset-y)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' } },
+    input: { slots: { base: 'shadow-[var(--ui-shadow-offset-x)_var(--ui-shadow-offset-y)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' }, compoundVariants: FLAT_FIELD_VARIANTS },
+    select: { slots: { base: 'shadow-[var(--ui-shadow-offset-x)_var(--ui-shadow-offset-y)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' }, compoundVariants: FLAT_FIELD_VARIANTS },
+    textarea: { slots: { base: 'shadow-[var(--ui-shadow-offset-x)_var(--ui-shadow-offset-y)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' }, compoundVariants: FLAT_FIELD_VARIANTS },
     alert: { slots: { root: 'shadow-[calc(var(--ui-shadow-offset-x)*1.5)_calc(var(--ui-shadow-offset-y)*1.5)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' } },
     badge: { slots: { base: 'shadow-[calc(var(--ui-shadow-offset-x)*0.66)_calc(var(--ui-shadow-offset-y)*0.66)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' } }
   }
diff --git a/docs/app/utils/theme-engine/types.ts b/docs/app/utils/theme-engine/types.ts
index 8811b58ce5..ccc7dc4ebe 100644
--- a/docs/app/utils/theme-engine/types.ts
+++ b/docs/app/utils/theme-engine/types.ts
@@ -41,6 +41,10 @@ export interface ThemeDoc {
     dark?: Record<string, string>
   }
   radius?: number
+  /** Root font size in px (`html { font-size }`) — scales every rem-based metric */
+  fontSize?: number
+  /** Tailwind v4 `--spacing` base unit in rem — the density knob behind all spacing utilities */
+  spacing?: number
   font?: {
     sans?: string
   }
@@ -66,6 +70,8 @@ export const DEFAULT_COLORS: Record<ColorAlias, string> = {
 
 export const THEME_DEFAULTS = {
   radius: 0.25,
+  fontSize: 16,
+  spacing: 0.25,
   font: 'Public Sans',
   icons: 'lucide'
 } as const
@@ -77,6 +83,7 @@ export function createThemeDoc(): ThemeDoc {
 /** A document with no overrides means "stock Nuxt UI". */
 export function isDefaultTheme(doc: ThemeDoc): boolean {
   return !doc.palettes && !doc.colors && !doc.blackAsPrimary && !doc.tokens
-    && doc.radius === undefined && !doc.font?.sans && !doc.icons && !doc.components
+    && doc.radius === undefined && doc.fontSize === undefined && doc.spacing === undefined
+    && !doc.font?.sans && !doc.icons && !doc.components
     && !Object.values(doc.style || {}).some(value => value && value !== 'none' && value !== 'default')
 }
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 8334f3d09a..77eba602a2 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -336,6 +336,24 @@ describe('style colors', () => {
     expect(JSON.stringify(components.button!.compoundVariants)).not.toContain('"ghost"')
   })
 
+  it('soft shadows skip ghost/link buttons (hover-only for ghost) and surfaceless fields', async () => {
+    const { styleComponents } = await import('../../docs/app/utils/theme-engine')
+    const components = styleComponents({ shadow: 'soft' })
+
+    expect(components.button!.compoundVariants).toContainEqual({ variant: 'ghost', class: 'shadow-none hover:shadow-sm transition-shadow' })
+    expect(components.button!.compoundVariants).toContainEqual({ variant: 'link', class: 'shadow-none' })
+    expect(components.input!.compoundVariants).toContainEqual({ variant: 'ghost', class: 'shadow-none' })
+    expect(components.input!.compoundVariants).toContainEqual({ variant: 'none', class: 'shadow-none' })
+  })
+
+  it('hard shadows keep surfaceless field variants flat', async () => {
+    const { styleComponents } = await import('../../docs/app/utils/theme-engine')
+    const components = styleComponents({ shadow: 'hard' })
+
+    expect(components.select!.compoundVariants).toContainEqual({ variant: 'ghost', class: 'shadow-none' })
+    expect(components.textarea!.compoundVariants).toContainEqual({ variant: 'none', class: 'shadow-none' })
+  })
+
   it('borderColor appends recolor compounds after width ones', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
     const compounds = styleComponents({ border: 'bold', borderColor: 'black' }).button!.compoundVariants!
@@ -399,6 +417,49 @@ describe('style colors', () => {
     expect(styleTokens({ shadowColor: 'primary-shade' }).light['--ui-shadow-color']).toBe('var(--ui-color-primary-950)')
   })
 
+  it('semantic alias and bg/text/border tokens ride their own ramps', async () => {
+    const { styleTokens, TOKEN_SHADE_TARGETS } = await import('../../docs/app/utils/theme-engine')
+
+    // every semantic alias token references its own color scale
+    expect(styleTokens({ tokenShades: { '--ui-secondary': { light: 600 }, '--ui-error': { dark: 300 } } })).toEqual({
+      light: { '--ui-secondary': 'var(--ui-color-secondary-600)' },
+      dark: { '--ui-error': 'var(--ui-color-error-300)' }
+    })
+    // the expanded surface/text/border tokens stay on the neutral ramp
+    expect(styleTokens({ tokenShades: { '--ui-bg-elevated': { light: 200 }, '--ui-text-toned': { dark: 200 }, '--ui-border-accented': { light: 400 } } })).toEqual({
+      light: { '--ui-bg-elevated': 'var(--ui-color-neutral-200)', '--ui-border-accented': 'var(--ui-color-neutral-400)' },
+      dark: { '--ui-text-toned': 'var(--ui-color-neutral-200)' }
+    })
+
+    // the full sets the sidebar promises are all present
+    const tokens = TOKEN_SHADE_TARGETS.map(target => target.token)
+    for (const expected of [
+      '--ui-primary', '--ui-secondary', '--ui-success', '--ui-info', '--ui-warning', '--ui-error',
+      '--ui-bg', '--ui-bg-muted', '--ui-bg-elevated', '--ui-bg-accented', '--ui-bg-inverted',
+      '--ui-text-dimmed', '--ui-text-muted', '--ui-text-toned', '--ui-text', '--ui-text-highlighted', '--ui-text-inverted',
+      '--ui-border', '--ui-border-muted', '--ui-border-accented', '--ui-border-inverted'
+    ]) {
+      expect(tokens, expected).toContain(expected)
+    }
+  })
+
+  it('font size and spacing export as html rule and @theme override', async () => {
+    const { generateCSS, docToSettings, isDefaultTheme } = await import('../../docs/app/utils/theme-engine')
+
+    const css = generateCSS({ version: 1, fontSize: 15, spacing: 0.3 })
+    expect(css).toContain('html {\n  font-size: 15px;\n}')
+    expect(css).toContain('@theme {\n  --spacing: 0.3rem;\n}')
+
+    // defaults export nothing
+    const defaultCss = generateCSS({ version: 1, fontSize: 16, spacing: 0.25 })
+    expect(defaultCss).not.toContain('font-size')
+    expect(defaultCss).not.toContain('--spacing')
+
+    expect(docToSettings({ version: 1, fontSize: 15, spacing: 0.3 })).toEqual({ fontSize: 15, spacing: 0.3 })
+    expect(isDefaultTheme({ version: 1, fontSize: 15 })).toBe(false)
+    expect(isDefaultTheme({ version: 1, spacing: 0.3 })).toBe(false)
+  })
+
   it('per-group default variants refine the app-wide value', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
     const components = styleComponents({ defaults: { variant: 'solid', variants: { inputs: 'subtle', panels: 'outline' } } })

From 573adcaddc3a6015a3f6fb2bb75faf4da7ed6de3 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 23:46:13 +0200
Subject: [PATCH 030/185] =?UTF-8?q?feat(docs):=20Orchard=20preset=20?=
 =?UTF-8?q?=E2=80=94=20orange=20on=20a=20sculpted=20grove=20neutral,=20exe?=
 =?UTF-8?q?rcising=20the=20new=20token=20axes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/utils/theme-engine/presets.ts | 62 ++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 57f46f4319..82c8cb6940 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -381,4 +381,66 @@ export const presets: ThemePreset[] = [{
       tokenShades: { '--ui-primary': { dark: 300 } }
     }
   }
+}, {
+  id: 'orchard',
+  name: 'Orchard',
+  description: 'Orange on deep sage greens — subtle surfaces, dropped hard shadows.',
+  icon: 'i-lucide-citrus',
+  doc: {
+    version: 1,
+    meta: { name: 'Orchard', base: 'orchard' },
+    // A sculpted green-tinted neutral (studio curve editor) whose light end
+    // starts far below white — the whole page sits on foliage.
+    palettes: {
+      grove: {
+        shades: {
+          50: 'oklch(91% 0.044 140.516)',
+          100: 'oklch(84.7% 0.045 140.375)',
+          200: 'oklch(78.6% 0.046 140.572)',
+          300: 'oklch(72.4% 0.046 141.493)',
+          400: 'oklch(65.8% 0.045 142.245)',
+          500: 'oklch(59% 0.039 142.85)',
+          600: 'oklch(52.1% 0.033 143.372)',
+          700: 'oklch(45.1% 0.028 143.839)',
+          800: 'oklch(38.2% 0.024 144.268)',
+          900: 'oklch(31.2% 0.02 144.666)',
+          950: 'oklch(24.2% 0.017 145.041)'
+        }
+      }
+    },
+    colors: {
+      primary: 'orange',
+      neutral: 'grove'
+    },
+    radius: 0.5,
+    font: { sans: 'DM Sans' },
+    tokens: {
+      light: {
+        '--ui-bg': 'var(--ui-color-neutral-50)',
+        '--ui-text-inverted': 'var(--ui-color-neutral-50)'
+      },
+      dark: {
+        '--ui-text-highlighted': 'var(--ui-color-neutral-50)'
+      }
+    },
+    // Exercises the newest axes together: straight-down hard shadow at 55%,
+    // app-wide subtle variants, and per-mode shades for the surface stack
+    // plus the success/error alias tokens.
+    style: {
+      shadow: 'hard',
+      shadowColor: 'shade',
+      shadowShade: { light: 950, dark: 950 },
+      shadowOpacity: 55,
+      shadowGeometry: { x: 0, y: 3, blur: 0, spread: 0 },
+      defaults: { variant: 'subtle' },
+      tokenShades: {
+        '--ui-bg-muted': { light: 100 },
+        '--ui-bg-elevated': { light: 200 },
+        '--ui-bg-accented': { light: 300 },
+        '--ui-border': { dark: 950 },
+        '--ui-success': { light: 600, dark: 300 },
+        '--ui-error': { light: 600, dark: 300 }
+      }
+    }
+  }
 }]

From 4cf16297ff9ca286fa8c5e4c971892bd8648de3e Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 5 Jul 2026 23:55:32 +0200
Subject: [PATCH 031/185] feat(docs): semantic palette pickers, Background
 rename, card-wrapped sidebar sections

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 122 +++++++++++++++---
 docs/app/composables/useTheme.ts              |   6 +-
 docs/app/composables/useThemeStudio.ts        |  22 ++--
 3 files changed, 119 insertions(+), 31 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 79140d8d2a..bbe44d0eb9 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, SHADOW_GEOMETRY_DEFAULTS } from '../../utils/theme-engine'
-import type { VariantGroup, TokenRamp } from '../../utils/theme-engine'
+import type { VariantGroup, TokenRamp, ColorAlias } from '../../utils/theme-engine'
 
 const appConfig = useAppConfig()
 
@@ -27,6 +27,7 @@ const { selectPalette, isCustomPalette, style, setStyle } = useThemeStudio()
 const openSections = reactive<Record<string, boolean>>({
   primary: true,
   neutral: true,
+  semantic: true,
   radius: true,
   sizing: true,
   defaults: true,
@@ -39,6 +40,20 @@ const openSections = reactive<Record<string, boolean>>({
   ...Object.fromEntries(TOKEN_GROUPS.map((group, index) => [`tokens-${group.key}`, index === 0]))
 })
 
+// Every ramp is a suggestion for either role: colorful ones lead the
+// primary picker, neutrals lead the background picker.
+const primaryPickerColors = [...primaryColors, ...neutralColors]
+const backgroundPickerColors = [...neutralColors, ...primaryColors]
+
+const semanticAliases: ColorAlias[] = ['secondary', 'success', 'info', 'warning', 'error']
+
+const aliasValues = computed(() => appConfig.ui.colors as Record<string, string>)
+
+/** Palette name → the css var chip name (tailwind's neutral gray is remapped in docs). */
+function paletteChip(name: string) {
+  return name === 'neutral' ? 'old-neutral' : name
+}
+
 const primarySwatch = computed(() => {
   if (blackAsPrimary.value) {
     return { label: 'Black', color: undefined }
@@ -259,9 +274,9 @@ const shadowColor = computed({
       :unmount-on-hide="false"
     >
       <template #colors>
-        <div class="flex flex-col gap-5 pt-1 pb-4">
-          <fieldset>
-            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+        <div class="flex flex-col gap-2.5 pt-1 pb-4">
+          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
+            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer bg-default">
               <UButton
                 label="Primary"
                 color="neutral"
@@ -330,10 +345,10 @@ const shadowColor = computed({
                     </ThemePickerButton>
 
                     <ThemePickerButton
-                      v-for="color in primaryColors"
+                      v-for="color in primaryPickerColors"
                       :key="color"
                       :label="color"
-                      :chip="color"
+                      :chip="paletteChip(color)"
                       :selected="!blackAsPrimary && primary === color"
                       @click="selectPalette('primary', color)"
                     />
@@ -345,10 +360,10 @@ const shadowColor = computed({
             </div>
           </fieldset>
 
-          <fieldset>
+          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
             <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
               <UButton
-                label="Neutral"
+                label="Background"
                 color="neutral"
                 variant="ghost"
                 size="xs"
@@ -404,10 +419,10 @@ const shadowColor = computed({
                 <template #content>
                   <div class="grid grid-cols-3 gap-1 w-72 p-2">
                     <ThemePickerButton
-                      v-for="color in neutralColors"
+                      v-for="color in backgroundPickerColors"
                       :key="color"
                       :label="color"
-                      :chip="color === 'neutral' ? 'old-neutral' : color"
+                      :chip="paletteChip(color)"
                       :selected="neutral === color"
                       @click="selectPalette('neutral', color)"
                     />
@@ -418,12 +433,77 @@ const shadowColor = computed({
               <ThemeStudioPaletteEditor v-model:open="neutralEditorOpen" alias="neutral" />
             </div>
           </fieldset>
+
+          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
+            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+              <UButton
+                label="Semantic"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-chevron-down"
+                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
+                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.semantic && '-rotate-90'] }"
+                @click="openSections.semantic = !openSections.semantic"
+              />
+
+              <UButton
+                to="/docs/getting-started/theme/colors"
+                size="xs"
+                color="neutral"
+                variant="link"
+                icon="i-lucide-help-circle"
+                class="p-0 -my-0.5"
+                :ui="{ leadingIcon: 'size-3' }"
+              />
+            </legend>
+
+            <div v-show="openSections.semantic" class="flex flex-col gap-1.5">
+              <div v-for="alias in semanticAliases" :key="alias" class="flex items-center gap-2">
+                <span class="text-[11px] text-muted w-13 shrink-0 capitalize select-none">{{ alias }}</span>
+
+                <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
+                  <UButton
+                    color="neutral"
+                    variant="outline"
+                    size="sm"
+                    block
+                    trailing-icon="i-lucide-chevron-down"
+                    class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
+                    :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                  >
+                    <template #leading>
+                      <span
+                        class="inline-block size-3 rounded-full"
+                        :style="{ backgroundColor: `var(--color-${paletteChip(aliasValues[alias] || alias)}-500)` }"
+                      />
+                    </template>
+
+                    {{ aliasValues[alias] }}
+                  </UButton>
+
+                  <template #content>
+                    <div class="grid grid-cols-3 gap-1 w-72 p-2">
+                      <ThemePickerButton
+                        v-for="color in primaryPickerColors"
+                        :key="color"
+                        :label="color"
+                        :chip="paletteChip(color)"
+                        :selected="aliasValues[alias] === color"
+                        @click="selectPalette(alias, color)"
+                      />
+                    </div>
+                  </template>
+                </UPopover>
+              </div>
+            </div>
+          </fieldset>
         </div>
       </template>
 
       <template #style>
-        <div class="flex flex-col gap-5 pt-1 pb-4">
-          <fieldset>
+        <div class="flex flex-col gap-2.5 pt-1 pb-4">
+          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
             <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Radius"
@@ -460,7 +540,7 @@ const shadowColor = computed({
             </div>
           </fieldset>
 
-          <fieldset>
+          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
             <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Sizing"
@@ -493,7 +573,7 @@ const shadowColor = computed({
             </div>
           </fieldset>
 
-          <fieldset>
+          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
             <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Defaults"
@@ -538,7 +618,7 @@ const shadowColor = computed({
             </div>
           </fieldset>
 
-          <fieldset>
+          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
             <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Shadows"
@@ -606,7 +686,7 @@ const shadowColor = computed({
             </div>
           </fieldset>
 
-          <fieldset>
+          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
             <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Borders"
@@ -659,8 +739,8 @@ const shadowColor = computed({
       </template>
 
       <template #tokens>
-        <div class="flex flex-col gap-5 pt-1 pb-4">
-          <fieldset v-for="group in tokenGroups" :key="group.key">
+        <div class="flex flex-col gap-2.5 pt-1 pb-4">
+          <fieldset v-for="group in tokenGroups" :key="group.key" class="rounded-md ring ring-default bg-default p-2.5">
             <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 :label="group.label"
@@ -692,8 +772,8 @@ const shadowColor = computed({
       </template>
 
       <template #general>
-        <div class="flex flex-col gap-5 pt-1 pb-4">
-          <fieldset>
+        <div class="flex flex-col gap-2.5 pt-1 pb-4">
+          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
             <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Font"
@@ -730,7 +810,7 @@ const shadowColor = computed({
             </div>
           </fieldset>
 
-          <fieldset>
+          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
             <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Icons"
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 04a928c7ac..548c0ea7f1 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -436,8 +436,10 @@ export function useTheme() {
     }
 
     if (settings.primary && SAFE_NAME.test(settings.primary)) primary.value = settings.primary
-    // Custom palettes (injected via customColors) are valid neutrals too, e.g. presets shipping their own ramp.
-    if (settings.neutral && SAFE_NAME.test(settings.neutral) && (neutralColors.includes(settings.neutral) || (customColorsData.value[settings.neutral] || safeCustomColors[settings.neutral]))) neutral.value = settings.neutral
+    // Any known palette is a valid neutral (the studio suggests every ramp
+    // for either role); custom palettes (injected via customColors) count
+    // too, e.g. presets shipping their own ramp.
+    if (settings.neutral && SAFE_NAME.test(settings.neutral) && (neutralColors.includes(settings.neutral) || primaryColors.includes(settings.neutral) || (customColorsData.value[settings.neutral] || safeCustomColors[settings.neutral]))) neutral.value = settings.neutral
     if (settings.radius !== undefined && Number.isFinite(Number(settings.radius))) radius.value = Number(settings.radius)
     // Clamped: these scale the whole page, so a wild value would wreck it.
     if (settings.fontSize !== undefined && Number.isFinite(Number(settings.fontSize))) fontSize.value = Math.min(20, Math.max(12, Number(settings.fontSize)))
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index b6cdd3ca97..fe102636b0 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,6 +1,6 @@
 import colors from 'tailwindcss/colors'
 import { presets, docToSettings, isDefaultTheme, generatePalette, fitPalette, parseCssColor, parseUiColorRef, styleComponents, styleTokens, DEFAULT_COLORS, SHADES, TOKEN_SHADE_TARGETS } from '../utils/theme-engine'
-import type { ThemeDoc, ThemePreset, PaletteCurveParams, StyleOptions, Shade } from '../utils/theme-engine'
+import type { ThemeDoc, ThemePreset, PaletteCurveParams, StyleOptions, Shade, ColorAlias } from '../utils/theme-engine'
 
 function readLocalStorage<T>(key: string, fallback: T): T {
   if (!import.meta.client) return fallback
@@ -114,13 +114,15 @@ export function useThemeStudio() {
   }
 
   /**
-   * Swatch-click entry point. With a custom palette active the swatches act
-   * as curve seeds: the chosen palette is reverse-fitted so the editor shows
-   * the curves that reproduce it, replacing whatever was sculpted before.
-   * Otherwise it is a plain alias switch.
+   * Swatch-click entry point, for any color alias. With a custom palette
+   * active the primary/neutral swatches act as curve seeds: the chosen
+   * palette is reverse-fitted so the editor shows the curves that reproduce
+   * it, replacing whatever was sculpted before. Otherwise it is a plain
+   * alias switch; semantic aliases ride the same persistence channel the
+   * AI theme feature uses.
    */
-  function selectPalette(alias: 'primary' | 'neutral', name: string) {
-    if (isCustomPalette(alias)) {
+  function selectPalette(alias: ColorAlias, name: string) {
+    if ((alias === 'primary' || alias === 'neutral') && isCustomPalette(alias)) {
       const shades = paletteShades(name)
       if (shades) {
         setPaletteFromCurve(alias, fitPalette(shades))
@@ -130,8 +132,12 @@ export function useThemeStudio() {
 
     if (alias === 'primary') {
       theme.primary.value = name
-    } else {
+    } else if (alias === 'neutral') {
       theme.neutral.value = name
+    } else {
+      theme.applyThemeSettings({ [alias]: name }, { track: false })
+      activePreset.value = undefined
+      track('Theme Changed', { setting: alias, value: name })
     }
   }
 

From ae8cccb6c54611cc709180851755424c13521053 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 00:05:26 +0200
Subject: [PATCH 032/185] feat(docs): inline palette-edit icons and custom
 curve editing for semantic colors

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 283 ++++++++++--------
 .../theme-studio/ThemeStudioPaletteEditor.vue |   4 +-
 docs/app/composables/useThemeStudio.ts        |   6 +-
 3 files changed, 157 insertions(+), 136 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index bbe44d0eb9..9928c62095 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -176,8 +176,13 @@ function rampChip(ramp: TokenRamp): string {
 
 const modeTabs = computed(() => modes.value.map(m => ({ label: m.label, icon: m.icon, value: m.label })))
 
-const primaryEditorOpen = ref(false)
-const neutralEditorOpen = ref(false)
+// One curve editor per alias, toggled by the edit icon next to each select.
+const paletteEditors = reactive<Record<string, boolean>>({})
+
+/** Display name for an alias's palette — custom ramps read as 'Custom'. */
+function aliasLabel(alias: ColorAlias) {
+  return isCustomPalette(alias) ? 'Custom' : aliasValues.value[alias]
+}
 
 const openGroups = ref('colors')
 
@@ -276,14 +281,14 @@ const shadowColor = computed({
       <template #colors>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
           <fieldset class="rounded-md ring ring-default bg-default p-2.5">
-            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer bg-default">
+            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Primary"
                 color="neutral"
-                variant="ghost"
+                variant="outline"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
+                class=" justify-start -my-1 gap-1 text-xs font-semibold text-default"
                 :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.primary && '-rotate-90'] }"
                 @click="openSections.primary = !openSections.primary"
               />
@@ -297,66 +302,67 @@ const shadowColor = computed({
                 class="p-0 -my-0.5"
                 :ui="{ leadingIcon: 'size-3' }"
               />
-
-              <UButton
-                label="Custom"
-                :icon="isCustomPalette('primary') ? 'i-lucide-paintbrush' : 'i-lucide-wand-sparkles'"
-                color="neutral"
-                :variant="primaryEditorOpen ? 'soft' : 'ghost'"
-                size="xs"
-                class="-my-1 text-[11px]"
-                :ui="{ leadingIcon: isCustomPalette('primary') ? 'text-primary size-3' : 'size-3' }"
-                @click="primaryEditorOpen = !primaryEditorOpen"
-              />
             </legend>
 
             <div v-show="openSections.primary">
-              <UPopover :content="{ side: 'bottom', align: 'start' }">
+              <div class="flex items-center gap-1">
+                <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
+                  <UButton
+                    color="neutral"
+                    variant="outline"
+                    size="sm"
+                    block
+                    trailing-icon="i-lucide-chevron-down"
+                    class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
+                    :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                  >
+                    <template #leading>
+                      <span
+                        class="inline-block size-3 rounded-full"
+                        :class="{ 'bg-black dark:bg-white': blackAsPrimary }"
+                        :style="primarySwatch.color ? { backgroundColor: primarySwatch.color } : undefined"
+                      />
+                    </template>
+
+                    {{ primarySwatch.label }}
+                  </UButton>
+
+                  <template #content>
+                    <div class="grid grid-cols-3 gap-1 w-72 p-2">
+                      <ThemePickerButton
+                        label="Black"
+                        :selected="blackAsPrimary"
+                        @click="setBlackAsPrimary(true)"
+                      >
+                        <template #leading>
+                          <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
+                        </template>
+                      </ThemePickerButton>
+
+                      <ThemePickerButton
+                        v-for="color in primaryPickerColors"
+                        :key="color"
+                        :label="color"
+                        :chip="paletteChip(color)"
+                        :selected="!blackAsPrimary && primary === color"
+                        @click="selectPalette('primary', color)"
+                      />
+                    </div>
+                  </template>
+                </UPopover>
+
                 <UButton
+                  :icon="isCustomPalette('primary') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
                   color="neutral"
-                  variant="outline"
+                  :variant="paletteEditors.primary ? 'soft' : 'ghost'"
                   size="sm"
-                  block
-                  trailing-icon="i-lucide-chevron-down"
-                  class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
-                  :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-                >
-                  <template #leading>
-                    <span
-                      class="inline-block size-3 rounded-full"
-                      :class="{ 'bg-black dark:bg-white': blackAsPrimary }"
-                      :style="primarySwatch.color ? { backgroundColor: primarySwatch.color } : undefined"
-                    />
-                  </template>
-
-                  {{ primarySwatch.label }}
-                </UButton>
-
-                <template #content>
-                  <div class="grid grid-cols-3 gap-1 w-72 p-2">
-                    <ThemePickerButton
-                      label="Black"
-                      :selected="blackAsPrimary"
-                      @click="setBlackAsPrimary(true)"
-                    >
-                      <template #leading>
-                        <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
-                      </template>
-                    </ThemePickerButton>
-
-                    <ThemePickerButton
-                      v-for="color in primaryPickerColors"
-                      :key="color"
-                      :label="color"
-                      :chip="paletteChip(color)"
-                      :selected="!blackAsPrimary && primary === color"
-                      @click="selectPalette('primary', color)"
-                    />
-                  </div>
-                </template>
-              </UPopover>
+                  aria-label="Edit primary palette"
+                  :ui="{ leadingIcon: isCustomPalette('primary') ? 'text-primary size-3.5' : 'size-3.5' }"
+                  @click="paletteEditors.primary = !paletteEditors.primary"
+                />
+              </div>
 
-              <ThemeStudioPaletteEditor v-model:open="primaryEditorOpen" alias="primary" />
+              <ThemeStudioPaletteEditor v-model:open="paletteEditors.primary" alias="primary" />
             </div>
           </fieldset>
 
@@ -382,55 +388,56 @@ const shadowColor = computed({
                 class="p-0 -my-0.5"
                 :ui="{ leadingIcon: 'size-3' }"
               />
-
-              <UButton
-                label="Custom"
-                :icon="isCustomPalette('neutral') ? 'i-lucide-paintbrush' : 'i-lucide-wand-sparkles'"
-                color="neutral"
-                :variant="neutralEditorOpen ? 'soft' : 'ghost'"
-                size="xs"
-                class="-my-1 text-[11px]"
-                :ui="{ leadingIcon: isCustomPalette('neutral') ? 'text-primary size-3' : 'size-3' }"
-                @click="neutralEditorOpen = !neutralEditorOpen"
-              />
             </legend>
 
             <div v-show="openSections.neutral">
-              <UPopover :content="{ side: 'bottom', align: 'start' }">
+              <div class="flex items-center gap-1">
+                <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
+                  <UButton
+                    color="neutral"
+                    variant="outline"
+                    size="sm"
+                    block
+                    trailing-icon="i-lucide-chevron-down"
+                    class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
+                    :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                  >
+                    <template #leading>
+                      <span
+                        class="inline-block size-3 rounded-full"
+                        :style="{ backgroundColor: neutralSwatch.color }"
+                      />
+                    </template>
+
+                    {{ neutralSwatch.label }}
+                  </UButton>
+
+                  <template #content>
+                    <div class="grid grid-cols-3 gap-1 w-72 p-2">
+                      <ThemePickerButton
+                        v-for="color in backgroundPickerColors"
+                        :key="color"
+                        :label="color"
+                        :chip="paletteChip(color)"
+                        :selected="neutral === color"
+                        @click="selectPalette('neutral', color)"
+                      />
+                    </div>
+                  </template>
+                </UPopover>
+
                 <UButton
+                  :icon="isCustomPalette('neutral') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
                   color="neutral"
-                  variant="outline"
+                  :variant="paletteEditors.neutral ? 'soft' : 'ghost'"
                   size="sm"
-                  block
-                  trailing-icon="i-lucide-chevron-down"
-                  class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
-                  :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-                >
-                  <template #leading>
-                    <span
-                      class="inline-block size-3 rounded-full"
-                      :style="{ backgroundColor: neutralSwatch.color }"
-                    />
-                  </template>
-
-                  {{ neutralSwatch.label }}
-                </UButton>
-
-                <template #content>
-                  <div class="grid grid-cols-3 gap-1 w-72 p-2">
-                    <ThemePickerButton
-                      v-for="color in backgroundPickerColors"
-                      :key="color"
-                      :label="color"
-                      :chip="paletteChip(color)"
-                      :selected="neutral === color"
-                      @click="selectPalette('neutral', color)"
-                    />
-                  </div>
-                </template>
-              </UPopover>
+                  aria-label="Edit background palette"
+                  :ui="{ leadingIcon: isCustomPalette('neutral') ? 'text-primary size-3.5' : 'size-3.5' }"
+                  @click="paletteEditors.neutral = !paletteEditors.neutral"
+                />
+              </div>
 
-              <ThemeStudioPaletteEditor v-model:open="neutralEditorOpen" alias="neutral" />
+              <ThemeStudioPaletteEditor v-model:open="paletteEditors.neutral" alias="neutral" />
             </div>
           </fieldset>
 
@@ -459,42 +466,56 @@ const shadowColor = computed({
             </legend>
 
             <div v-show="openSections.semantic" class="flex flex-col gap-1.5">
-              <div v-for="alias in semanticAliases" :key="alias" class="flex items-center gap-2">
-                <span class="text-[11px] text-muted w-13 shrink-0 capitalize select-none">{{ alias }}</span>
+              <div v-for="alias in semanticAliases" :key="alias">
+                <div class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 capitalize select-none">{{ alias }}</span>
+
+                  <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
+                    <UButton
+                      color="neutral"
+                      variant="outline"
+                      size="sm"
+                      block
+                      trailing-icon="i-lucide-chevron-down"
+                      class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
+                      :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                    >
+                      <template #leading>
+                        <span
+                          class="inline-block size-3 rounded-full"
+                          :style="{ backgroundColor: `var(--color-${paletteChip(aliasValues[alias] || alias)}-500)` }"
+                        />
+                      </template>
+
+                      {{ aliasLabel(alias) }}
+                    </UButton>
+
+                    <template #content>
+                      <div class="grid grid-cols-3 gap-1 w-72 p-2">
+                        <ThemePickerButton
+                          v-for="color in primaryPickerColors"
+                          :key="color"
+                          :label="color"
+                          :chip="paletteChip(color)"
+                          :selected="aliasValues[alias] === color"
+                          @click="selectPalette(alias, color)"
+                        />
+                      </div>
+                    </template>
+                  </UPopover>
 
-                <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
                   <UButton
+                    :icon="isCustomPalette(alias) ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
                     color="neutral"
-                    variant="outline"
+                    :variant="paletteEditors[alias] ? 'soft' : 'ghost'"
                     size="sm"
-                    block
-                    trailing-icon="i-lucide-chevron-down"
-                    class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
-                    :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-                  >
-                    <template #leading>
-                      <span
-                        class="inline-block size-3 rounded-full"
-                        :style="{ backgroundColor: `var(--color-${paletteChip(aliasValues[alias] || alias)}-500)` }"
-                      />
-                    </template>
-
-                    {{ aliasValues[alias] }}
-                  </UButton>
+                    :aria-label="`Edit ${alias} palette`"
+                    :ui="{ leadingIcon: isCustomPalette(alias) ? 'text-primary size-3.5' : 'size-3.5' }"
+                    @click="paletteEditors[alias] = !paletteEditors[alias]"
+                  />
+                </div>
 
-                  <template #content>
-                    <div class="grid grid-cols-3 gap-1 w-72 p-2">
-                      <ThemePickerButton
-                        v-for="color in primaryPickerColors"
-                        :key="color"
-                        :label="color"
-                        :chip="paletteChip(color)"
-                        :selected="aliasValues[alias] === color"
-                        @click="selectPalette(alias, color)"
-                      />
-                    </div>
-                  </template>
-                </UPopover>
+                <ThemeStudioPaletteEditor v-model:open="paletteEditors[alias]" :alias="alias" />
               </div>
             </div>
           </fieldset>
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 6bc7cf9940..d0694ec5e6 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useThrottleFn, watchIgnorable } from '@vueuse/core'
 import { SHADES, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, generatePalette, fitPalette, contrastRatio } from '../../utils/theme-engine'
-import type { PaletteCurveParams } from '../../utils/theme-engine'
+import type { PaletteCurveParams, ColorAlias } from '../../utils/theme-engine'
 
 const props = defineProps<{
-  alias: 'primary' | 'neutral'
+  alias: ColorAlias
 }>()
 
 const appConfig = useAppConfig()
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index fe102636b0..3cea2c83d0 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -122,7 +122,7 @@ export function useThemeStudio() {
    * AI theme feature uses.
    */
   function selectPalette(alias: ColorAlias, name: string) {
-    if ((alias === 'primary' || alias === 'neutral') && isCustomPalette(alias)) {
+    if (isCustomPalette(alias)) {
       const shades = paletteShades(name)
       if (shades) {
         setPaletteFromCurve(alias, fitPalette(shades))
@@ -168,7 +168,7 @@ export function useThemeStudio() {
   }
 
   /** Generate a ramp from curve params and point the alias at it. */
-  function setPaletteFromCurve(alias: 'primary' | 'neutral', params: PaletteCurveParams) {
+  function setPaletteFromCurve(alias: ColorAlias, params: PaletteCurveParams) {
     const name = customPaletteName(alias)
 
     // Remember what to restore when the custom palette is removed — the
@@ -195,7 +195,7 @@ export function useThemeStudio() {
   }
 
   /** Drop the custom ramp and restore the palette that preceded it. */
-  function clearCustomPalette(alias: 'primary' | 'neutral') {
+  function clearCustomPalette(alias: ColorAlias) {
     theme.removeCustomColors([customPaletteName(alias)])
     if (alias === 'neutral') {
       const remaps = unownedNeutralRemaps()

From 1e55e36ea4de159d02c6c0ec8b02ab09c7f042ac Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 00:11:19 +0200
Subject: [PATCH 033/185] fix(docs): update palette and color-parse specs to
 the oklch-native pipeline

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 test/utils/theme-color-parse.spec.ts | 25 +++++++++++++------------
 test/utils/theme-palette.spec.ts     | 13 +++++++------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/test/utils/theme-color-parse.spec.ts b/test/utils/theme-color-parse.spec.ts
index 9d24408058..ede4bd38df 100644
--- a/test/utils/theme-color-parse.spec.ts
+++ b/test/utils/theme-color-parse.spec.ts
@@ -3,25 +3,26 @@ import { parseCssColor } from '../../docs/app/utils/theme-engine'
 import colors from 'tailwindcss/colors'
 
 describe('parseCssColor', () => {
-  it('passes hex through normalized', () => {
-    expect(parseCssColor('#cc785c')).toBe('#CC785C')
-    expect(parseCssColor(' #F00 ')).toBe('#FF0000')
+  it('normalizes hex to canonical oklch', () => {
+    expect(parseCssColor('#cc785c')).toBe('oklch(65.8% 0.113 39.145)')
+    expect(parseCssColor(' #F00 ')).toBe('oklch(62.8% 0.258 29.234)')
   })
 
-  it('parses tailwind v4 oklch values', () => {
-    // Every tailwind palette value must survive the round trip.
-    const hex = parseCssColor(colors.blue[500])
-    expect(hex).toMatch(/^#[0-9A-F]{6}$/)
+  it('passes tailwind v4 oklch values through losslessly', () => {
+    // Tailwind's palette strings already use the canonical shape — the
+    // round trip must not clamp or reformat them (some exceed sRGB).
+    expect(parseCssColor(colors.blue[500])).toBe(colors.blue[500])
+    expect(parseCssColor(colors.slate[50])).toBe(colors.slate[50])
   })
 
-  it('parses oklch with percentage lightness', () => {
-    expect(parseCssColor('oklch(100% 0 0)')).toBe('#FFFFFF')
-    expect(parseCssColor('oklch(0 0 0)')).toBe('#000000')
+  it('normalizes fractional lightness to percentage', () => {
+    expect(parseCssColor('oklch(100% 0 0)')).toBe('oklch(100% 0 0)')
+    expect(parseCssColor('oklch(0 0 0)')).toBe('oklch(0% 0 0)')
   })
 
   it('parses rgb values', () => {
-    expect(parseCssColor('rgb(255, 0, 0)')).toBe('#FF0000')
-    expect(parseCssColor('rgb(29 185 84)')).toBe('#1DB954')
+    expect(parseCssColor('rgb(255, 0, 0)')).toBe('oklch(62.8% 0.258 29.234)')
+    expect(parseCssColor('rgb(29 185 84)')).toBe('oklch(68.9% 0.187 148.921)')
   })
 
   it('returns undefined for unknown formats', () => {
diff --git a/test/utils/theme-palette.spec.ts b/test/utils/theme-palette.spec.ts
index d7800f6760..3776e58479 100644
--- a/test/utils/theme-palette.spec.ts
+++ b/test/utils/theme-palette.spec.ts
@@ -3,6 +3,7 @@ import colors from 'tailwindcss/colors'
 import {
   hexToOklch,
   oklchToHex,
+  parseColor,
   inGamut,
   clampToGamut,
   contrastRatio,
@@ -95,12 +96,12 @@ describe('fitCurve', () => {
 })
 
 describe('generatePalette', () => {
-  it('produces 11 valid hex shades', () => {
+  it('produces 11 canonical oklch shades', () => {
     const palette = generatePalette(CURVE_DEFAULTS)
 
     expect(Object.keys(palette)).toHaveLength(SHADES.length)
     for (const shade of SHADES) {
-      expect(palette[shade]).toMatch(/^#[0-9A-F]{6}$/)
+      expect(palette[shade]).toMatch(/^oklch\(\d{1,3}(\.\d+)?% \d(\.\d+)? \d{1,3}(\.\d+)?\)$/)
     }
   })
 
@@ -108,7 +109,7 @@ describe('generatePalette', () => {
     for (const hue of [30, 145, 250]) {
       const flat = { ...CURVE_DEFAULTS.hue, y0: hue, y1: hue, p1y: hue, p2y: hue }
       const palette = generatePalette({ ...CURVE_DEFAULTS, hue: flat })
-      const lightnesses = SHADES.map(shade => hexToOklch(palette[shade]).l)
+      const lightnesses = SHADES.map(shade => parseColor(palette[shade])!.l)
 
       for (let i = 1; i < lightnesses.length; i++) {
         expect(lightnesses[i]!, `hue ${hue} shade ${SHADES[i]}`).toBeLessThan(lightnesses[i - 1]!)
@@ -118,7 +119,7 @@ describe('generatePalette', () => {
 
   it('neutral defaults reach a deep dark end', () => {
     const palette = generatePalette(NEUTRAL_CURVE_DEFAULTS)
-    expect(hexToOklch(palette[950]).l).toBeLessThan(0.16)
+    expect(parseColor(palette[950])!.l).toBeLessThan(0.16)
   })
 })
 
@@ -128,8 +129,8 @@ describe('fitPalette (work backwards from real palettes)', () => {
     const regenerated = generatePalette(fitPalette(original))
 
     for (const shade of SHADES) {
-      const want = hexToOklch(original[shade])
-      const got = hexToOklch(regenerated[shade])
+      const want = parseColor(original[shade])!
+      const got = parseColor(regenerated[shade])!
 
       // A single cubic can't hit every tailwind stop exactly — ~0.045 L is
       // the model floor (worst case rose-900), well under a visible step.

From a193eddf6acbf459edf117fb3439180078c6c06d Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 00:14:08 +0200
Subject: [PATCH 034/185] feat(docs): legend chips on every sidebar section,
 edit buttons grouped with their selects

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 153 +++++++++---------
 1 file changed, 73 insertions(+), 80 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 9928c62095..a3a0d86895 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -281,14 +281,14 @@ const shadowColor = computed({
       <template #colors>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
           <fieldset class="rounded-md ring ring-default bg-default p-2.5">
-            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Primary"
                 color="neutral"
-                variant="outline"
+                variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                class=" justify-start -my-1 gap-1 text-xs font-semibold text-default"
+
                 :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.primary && '-rotate-90'] }"
                 @click="openSections.primary = !openSections.primary"
               />
@@ -297,15 +297,15 @@ const shadowColor = computed({
                 to="/docs/getting-started/theme/css-variables#colors"
                 size="xs"
                 color="neutral"
-                variant="link"
+                variant="ghost"
                 icon="i-lucide-help-circle"
-                class="p-0 -my-0.5"
+
                 :ui="{ leadingIcon: 'size-3' }"
               />
             </legend>
 
             <div v-show="openSections.primary">
-              <div class="flex items-center gap-1">
+              <UFieldGroup size="sm" class="flex w-full">
                 <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
                   <UButton
                     color="neutral"
@@ -354,27 +354,28 @@ const shadowColor = computed({
                 <UButton
                   :icon="isCustomPalette('primary') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
                   color="neutral"
-                  :variant="paletteEditors.primary ? 'soft' : 'ghost'"
+                  variant="outline"
                   size="sm"
                   aria-label="Edit primary palette"
+                  class="ring-default rounded-sm hover:bg-elevated/50"
+                  :class="{ 'bg-elevated/50': paletteEditors.primary }"
                   :ui="{ leadingIcon: isCustomPalette('primary') ? 'text-primary size-3.5' : 'size-3.5' }"
                   @click="paletteEditors.primary = !paletteEditors.primary"
                 />
-              </div>
+              </UFieldGroup>
 
               <ThemeStudioPaletteEditor v-model:open="paletteEditors.primary" alias="primary" />
             </div>
           </fieldset>
 
           <fieldset class="rounded-md ring ring-default bg-default p-2.5">
-            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Background"
                 color="neutral"
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
                 :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.neutral && '-rotate-90'] }"
                 @click="openSections.neutral = !openSections.neutral"
               />
@@ -383,15 +384,14 @@ const shadowColor = computed({
                 to="/docs/getting-started/theme/css-variables#text"
                 size="xs"
                 color="neutral"
-                variant="link"
+                variant="ghost"
                 icon="i-lucide-help-circle"
-                class="p-0 -my-0.5"
                 :ui="{ leadingIcon: 'size-3' }"
               />
             </legend>
 
             <div v-show="openSections.neutral">
-              <div class="flex items-center gap-1">
+              <UFieldGroup size="sm" class="flex w-full">
                 <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
                   <UButton
                     color="neutral"
@@ -429,27 +429,28 @@ const shadowColor = computed({
                 <UButton
                   :icon="isCustomPalette('neutral') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
                   color="neutral"
-                  :variant="paletteEditors.neutral ? 'soft' : 'ghost'"
+                  variant="outline"
                   size="sm"
                   aria-label="Edit background palette"
+                  class="ring-default rounded-sm hover:bg-elevated/50"
+                  :class="{ 'bg-elevated/50': paletteEditors.neutral }"
                   :ui="{ leadingIcon: isCustomPalette('neutral') ? 'text-primary size-3.5' : 'size-3.5' }"
                   @click="paletteEditors.neutral = !paletteEditors.neutral"
                 />
-              </div>
+              </UFieldGroup>
 
               <ThemeStudioPaletteEditor v-model:open="paletteEditors.neutral" alias="neutral" />
             </div>
           </fieldset>
 
           <fieldset class="rounded-md ring ring-default bg-default p-2.5">
-            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Semantic"
                 color="neutral"
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
                 :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.semantic && '-rotate-90'] }"
                 @click="openSections.semantic = !openSections.semantic"
               />
@@ -458,9 +459,8 @@ const shadowColor = computed({
                 to="/docs/getting-started/theme/colors"
                 size="xs"
                 color="neutral"
-                variant="link"
+                variant="ghost"
                 icon="i-lucide-help-circle"
-                class="p-0 -my-0.5"
                 :ui="{ leadingIcon: 'size-3' }"
               />
             </legend>
@@ -470,49 +470,53 @@ const shadowColor = computed({
                 <div class="flex items-center gap-2">
                   <span class="text-[11px] text-muted w-13 shrink-0 capitalize select-none">{{ alias }}</span>
 
-                  <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
+                  <UFieldGroup size="sm" class="flex flex-1 min-w-0">
+                    <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
+                      <UButton
+                        color="neutral"
+                        variant="outline"
+                        size="sm"
+                        block
+                        trailing-icon="i-lucide-chevron-down"
+                        class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
+                        :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                      >
+                        <template #leading>
+                          <span
+                            class="inline-block size-3 rounded-full"
+                            :style="{ backgroundColor: `var(--color-${paletteChip(aliasValues[alias] || alias)}-500)` }"
+                          />
+                        </template>
+
+                        {{ aliasLabel(alias) }}
+                      </UButton>
+
+                      <template #content>
+                        <div class="grid grid-cols-3 gap-1 w-72 p-2">
+                          <ThemePickerButton
+                            v-for="color in primaryPickerColors"
+                            :key="color"
+                            :label="color"
+                            :chip="paletteChip(color)"
+                            :selected="aliasValues[alias] === color"
+                            @click="selectPalette(alias, color)"
+                          />
+                        </div>
+                      </template>
+                    </UPopover>
+
                     <UButton
+                      :icon="isCustomPalette(alias) ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
                       color="neutral"
                       variant="outline"
                       size="sm"
-                      block
-                      trailing-icon="i-lucide-chevron-down"
-                      class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
-                      :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-                    >
-                      <template #leading>
-                        <span
-                          class="inline-block size-3 rounded-full"
-                          :style="{ backgroundColor: `var(--color-${paletteChip(aliasValues[alias] || alias)}-500)` }"
-                        />
-                      </template>
-
-                      {{ aliasLabel(alias) }}
-                    </UButton>
-
-                    <template #content>
-                      <div class="grid grid-cols-3 gap-1 w-72 p-2">
-                        <ThemePickerButton
-                          v-for="color in primaryPickerColors"
-                          :key="color"
-                          :label="color"
-                          :chip="paletteChip(color)"
-                          :selected="aliasValues[alias] === color"
-                          @click="selectPalette(alias, color)"
-                        />
-                      </div>
-                    </template>
-                  </UPopover>
-
-                  <UButton
-                    :icon="isCustomPalette(alias) ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
-                    color="neutral"
-                    :variant="paletteEditors[alias] ? 'soft' : 'ghost'"
-                    size="sm"
-                    :aria-label="`Edit ${alias} palette`"
-                    :ui="{ leadingIcon: isCustomPalette(alias) ? 'text-primary size-3.5' : 'size-3.5' }"
-                    @click="paletteEditors[alias] = !paletteEditors[alias]"
-                  />
+                      :aria-label="`Edit ${alias} palette`"
+                      class="ring-default rounded-sm hover:bg-elevated/50"
+                      :class="{ 'bg-elevated/50': paletteEditors[alias] }"
+                      :ui="{ leadingIcon: isCustomPalette(alias) ? 'text-primary size-3.5' : 'size-3.5' }"
+                      @click="paletteEditors[alias] = !paletteEditors[alias]"
+                    />
+                  </UFieldGroup>
                 </div>
 
                 <ThemeStudioPaletteEditor v-model:open="paletteEditors[alias]" :alias="alias" />
@@ -525,14 +529,13 @@ const shadowColor = computed({
       <template #style>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
           <fieldset class="rounded-md ring ring-default bg-default p-2.5">
-            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Radius"
                 color="neutral"
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
                 :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.radius && '-rotate-90'] }"
                 @click="openSections.radius = !openSections.radius"
               />
@@ -541,9 +544,8 @@ const shadowColor = computed({
                 to="/docs/getting-started/theme/css-variables#radius"
                 size="xs"
                 color="neutral"
-                variant="link"
+                variant="ghost"
                 icon="i-lucide-help-circle"
-                class="p-0 -my-0.5"
                 :ui="{ leadingIcon: 'size-3' }"
               />
             </legend>
@@ -562,14 +564,13 @@ const shadowColor = computed({
           </fieldset>
 
           <fieldset class="rounded-md ring ring-default bg-default p-2.5">
-            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Sizing"
                 color="neutral"
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
                 :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.sizing && '-rotate-90'] }"
                 @click="openSections.sizing = !openSections.sizing"
               />
@@ -595,14 +596,13 @@ const shadowColor = computed({
           </fieldset>
 
           <fieldset class="rounded-md ring ring-default bg-default p-2.5">
-            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Defaults"
                 color="neutral"
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
                 :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.defaults && '-rotate-90'] }"
                 @click="openSections.defaults = !openSections.defaults"
               />
@@ -640,14 +640,13 @@ const shadowColor = computed({
           </fieldset>
 
           <fieldset class="rounded-md ring ring-default bg-default p-2.5">
-            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Shadows"
                 color="neutral"
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
                 :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.shadows && '-rotate-90'] }"
                 @click="openSections.shadows = !openSections.shadows"
               />
@@ -708,14 +707,13 @@ const shadowColor = computed({
           </fieldset>
 
           <fieldset class="rounded-md ring ring-default bg-default p-2.5">
-            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Borders"
                 color="neutral"
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
                 :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.borders && '-rotate-90'] }"
                 @click="openSections.borders = !openSections.borders"
               />
@@ -762,14 +760,13 @@ const shadowColor = computed({
       <template #tokens>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
           <fieldset v-for="group in tokenGroups" :key="group.key" class="rounded-md ring ring-default bg-default p-2.5">
-            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 :label="group.label"
                 color="neutral"
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
                 :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections[`tokens-${group.key}`] && '-rotate-90'] }"
                 @click="openSections[`tokens-${group.key}`] = !openSections[`tokens-${group.key}`]"
               />
@@ -795,14 +792,13 @@ const shadowColor = computed({
       <template #general>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
           <fieldset class="rounded-md ring ring-default bg-default p-2.5">
-            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Font"
                 color="neutral"
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
                 :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.font && '-rotate-90'] }"
                 @click="openSections.font = !openSections.font"
               />
@@ -811,9 +807,8 @@ const shadowColor = computed({
                 to="/docs/getting-started/integrations/fonts"
                 size="xs"
                 color="neutral"
-                variant="link"
+                variant="ghost"
                 icon="i-lucide-help-circle"
-                class="p-0 -my-0.5"
                 :ui="{ leadingIcon: 'size-3' }"
               />
             </legend>
@@ -832,14 +827,13 @@ const shadowColor = computed({
           </fieldset>
 
           <fieldset class="rounded-md ring ring-default bg-default p-2.5">
-            <legend class="w-full text-xs leading-none font-semibold mb-2.5 select-none flex items-center gap-1 cursor-pointer">
+            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Icons"
                 color="neutral"
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                class="flex-1 justify-start -my-1 -ms-1.5 gap-1 text-xs font-semibold text-default"
                 :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.icons && '-rotate-90'] }"
                 @click="openSections.icons = !openSections.icons"
               />
@@ -848,9 +842,8 @@ const shadowColor = computed({
                 to="/docs/getting-started/integrations/icons"
                 size="xs"
                 color="neutral"
-                variant="link"
+                variant="ghost"
                 icon="i-lucide-help-circle"
-                class="p-0 -my-0.5"
                 :ui="{ leadingIcon: 'size-3' }"
               />
             </legend>

From 0096bd120ea1996bea7dd1ecb2564a236ec8dfbc Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 00:18:18 +0200
Subject: [PATCH 035/185] feat(docs): per-group variant options matching each
 component's real variant set

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 34 +++++++++++--------
 docs/app/utils/theme-engine/styles.ts         | 19 ++++++-----
 test/utils/theme-engine.spec.ts               | 19 +++++++++++
 3 files changed, 48 insertions(+), 24 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index a3a0d86895..88a9b27d5e 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -193,14 +193,6 @@ const groupItems = [
   { label: 'General', value: 'general', slot: 'general' as const }
 ]
 
-const defaultVariantItems = [
-  { label: 'Default', value: 'default' },
-  { label: 'Solid', value: 'solid' },
-  { label: 'Outline', value: 'outline' },
-  { label: 'Soft', value: 'soft' },
-  { label: 'Subtle', value: 'subtle' }
-]
-
 const defaultSizeItems = [
   { label: 'Default', value: 'default' },
   { label: 'XS', value: 'xs' },
@@ -210,17 +202,29 @@ const defaultSizeItems = [
   { label: 'XL', value: 'xl' }
 ]
 
-// Per-group default variants; the app-wide `variant` (presets, shuffle)
-// shows through as the fallback until a group makes its own choice.
+// Per-group default variants, each offering only what its components
+// actually support (buttons add ghost, form fields run outline → none);
+// the app-wide `variant` (presets, shuffle) shows through as the fallback
+// until a group makes its own choice.
+const variantItems = (values: string[]) => ['default', ...values].map(value => ({ label: value.charAt(0).toUpperCase() + value.slice(1), value }))
+
 const variantGroupFields = [
-  { key: 'buttons' as const, label: 'Buttons' },
-  { key: 'panels' as const, label: 'Cards' },
-  { key: 'inputs' as const, label: 'Inputs' }
+  { key: 'buttons' as const, label: 'Buttons', items: variantItems(['solid', 'outline', 'soft', 'subtle', 'ghost', 'link']) },
+  { key: 'panels' as const, label: 'Cards', items: variantItems(['solid', 'outline', 'soft', 'subtle']) },
+  { key: 'inputs' as const, label: 'Inputs', items: variantItems(['outline', 'soft', 'subtle', 'ghost', 'none']) }
 ]
 
 function groupVariantModel(group: VariantGroup) {
+  const supported = variantGroupFields.find(field => field.key === group)!.items.map(item => item.value)
   return computed({
-    get: () => style.value.defaults?.variants?.[group] || style.value.defaults?.variant || 'default',
+    get: () => {
+      const own = style.value.defaults?.variants?.[group]
+      if (own) return own
+      // An app-wide value this group can't express (e.g. solid inputs)
+      // truthfully reads as Default — the engine skips it there too.
+      const appWide = style.value.defaults?.variant
+      return appWide && supported.includes(appWide) ? appWide : 'default'
+    },
     set: (value: any) => setStyle({ defaults: { ...style.value.defaults, variants: { ...style.value.defaults?.variants, [group]: value } } })
   })
 }
@@ -617,7 +621,7 @@ const shadowColor = computed({
                   size="sm"
                   color="neutral"
                   icon="i-lucide-layers"
-                  :items="defaultVariantItems"
+                  :items="field.items"
                   class="flex-1 ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
                   :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
                 />
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 5e20d105b5..3755d840e1 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -30,7 +30,7 @@ export type ShadowStyle = 'none' | 'soft' | 'hard'
 export type BorderStyle = 'default' | 'bold' | 'frame'
 export type BorderColor = 'default' | 'inverted' | 'black' | 'white' | 'primary' | 'neutral' | 'shade' | 'primary-shade'
 export type ShadowColor = 'default' | 'black' | 'inverted' | 'primary' | 'shade' | 'primary-shade'
-export type DefaultVariant = 'default' | 'solid' | 'outline' | 'soft' | 'subtle'
+export type DefaultVariant = 'default' | 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'link' | 'none'
 export type DefaultSize = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 export type VariantGroup = 'buttons' | 'panels' | 'inputs'
 
@@ -72,17 +72,18 @@ export interface StyleOptions {
   tokenShades?: Record<string, { light?: number, dark?: number }>
 }
 
-/** Which components support which app-wide default variant values. */
-const VARIANT_SUPPORT: Record<string, string[]> = {
-  button: ['solid', 'outline', 'soft', 'subtle'],
+/** Which components support which default variant values. */
+export const VARIANT_SUPPORT: Record<string, string[]> = {
+  button: ['solid', 'outline', 'soft', 'subtle', 'ghost', 'link'],
   badge: ['solid', 'outline', 'soft', 'subtle'],
   alert: ['solid', 'outline', 'soft', 'subtle'],
   card: ['solid', 'outline', 'soft', 'subtle'],
-  // form fields have no solid variant — an unsupported value would
-  // silently unstyle them, so they keep their default instead
-  input: ['outline', 'soft', 'subtle'],
-  select: ['outline', 'soft', 'subtle'],
-  textarea: ['outline', 'soft', 'subtle']
+  // form fields have no solid variant (theirs run outline → none) — an
+  // unsupported value would silently unstyle them, so they keep their
+  // default instead
+  input: ['outline', 'soft', 'subtle', 'ghost', 'none'],
+  select: ['outline', 'soft', 'subtle', 'ghost', 'none'],
+  textarea: ['outline', 'soft', 'subtle', 'ghost', 'none']
 }
 
 const SIZE_SUPPORT = ['button', 'badge', 'input', 'select', 'textarea']
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 77eba602a2..c8ec608c54 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -476,6 +476,25 @@ describe('style colors', () => {
     expect(only.input).toBeUndefined()
   })
 
+  it('component-specific variants apply only where supported', async () => {
+    const { styleComponents } = await import('../../docs/app/utils/theme-engine')
+
+    // ghost/link exist on buttons but not badges — the group skips badges
+    const ghost = styleComponents({ defaults: { variants: { buttons: 'ghost' } } })
+    expect(ghost.button!.defaultVariants).toEqual({ variant: 'ghost' })
+    expect(ghost.badge).toBeUndefined()
+    const link = styleComponents({ defaults: { variants: { buttons: 'link' } } })
+    expect(link.button!.defaultVariants).toEqual({ variant: 'link' })
+
+    // form fields support ghost and none
+    const none = styleComponents({ defaults: { variants: { inputs: 'none' } } })
+    expect(none.input!.defaultVariants).toEqual({ variant: 'none' })
+    expect(none.select!.defaultVariants).toEqual({ variant: 'none' })
+    expect(none.textarea!.defaultVariants).toEqual({ variant: 'none' })
+    const ghostFields = styleComponents({ defaults: { variants: { inputs: 'ghost' } } })
+    expect(ghostFields.input!.defaultVariants).toEqual({ variant: 'ghost' })
+  })
+
   it('expands app-wide defaults only where the component supports them', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
     const components = styleComponents({ defaults: { variant: 'solid', size: 'lg' } })

From 79975db98764cc06ef2b5e26bbb0152d35c8997f Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 00:28:23 +0200
Subject: [PATCH 036/185] feat(docs): preview view tabs with template-faithful
 Dashboard and Chat layouts, presets in sidebar

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioBento.vue         |   2 +-
 .../theme-studio/ThemeStudioControls.vue      |  44 ++-
 .../theme-studio/ThemeStudioViewChat.vue      | 136 +++++++
 .../theme-studio/ThemeStudioViewDashboard.vue | 347 ++++++++++++++++++
 docs/app/pages/theme.vue                      |  59 ++-
 5 files changed, 553 insertions(+), 35 deletions(-)
 create mode 100644 docs/app/components/theme-studio/ThemeStudioViewChat.vue
 create mode 100644 docs/app/components/theme-studio/ThemeStudioViewDashboard.vue

diff --git a/docs/app/components/theme-studio/ThemeStudioBento.vue b/docs/app/components/theme-studio/ThemeStudioBento.vue
index 2324ff7153..42a259a007 100644
--- a/docs/app/components/theme-studio/ThemeStudioBento.vue
+++ b/docs/app/components/theme-studio/ThemeStudioBento.vue
@@ -118,7 +118,7 @@ function showToast() {
 </script>
 
 <template>
-  <div class="columns-1 md:columns-2 xl:columns-3 gap-4 space-y-4">
+  <div class="columns-1 md:columns-2 xl:columns-3 gap-4 space-y-4 p-4 sm:p-6">
     <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
       <p class="text-xs font-semibold text-muted uppercase tracking-wide">
         Buttons
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 88a9b27d5e..eb07bb0183 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -22,7 +22,17 @@ const {
   mode
 } = useTheme()
 
-const { selectPalette, isCustomPalette, style, setStyle } = useThemeStudio()
+const { selectPalette, isCustomPalette, style, setStyle, presets, activePreset, applyPreset, shuffle } = useThemeStudio()
+
+const presetItems = computed(() => presets.map(preset => ({
+  label: preset.name,
+  icon: preset.icon,
+  type: 'checkbox' as const,
+  checked: activePreset.value === preset.id,
+  onSelect: () => applyPreset(preset)
+})))
+
+const presetLabel = computed(() => presets.find(preset => preset.id === activePreset.value)?.name || 'Presets')
 
 const openSections = reactive<Record<string, boolean>>({
   primary: true,
@@ -174,7 +184,9 @@ function rampChip(ramp: TokenRamp): string {
   return name === 'neutral' ? 'old-neutral' : name
 }
 
-const modeTabs = computed(() => modes.value.map(m => ({ label: m.label, icon: m.icon, value: m.label })))
+// No 'system' tab: the studio is about previewing a concrete mode, and the
+// resolved value still highlights the right tab for system-pref visitors.
+const modeTabs = computed(() => modes.value.filter(m => m.label !== 'system').map(m => ({ label: m.label, icon: m.icon, value: m.label })))
 
 // One curve editor per alias, toggled by the edit icon next to each select.
 const paletteEditors = reactive<Record<string, boolean>>({})
@@ -276,6 +288,34 @@ const shadowColor = computed({
       :ui="{ trigger: 'text-[11px] capitalize' }"
     />
 
+    <UFieldGroup size="sm" class="flex w-full">
+      <UDropdownMenu :items="presetItems" :content="{ align: 'start' }" class="flex-1 min-w-0">
+        <UButton
+          :label="presetLabel"
+          icon="i-lucide-swatch-book"
+          trailing-icon="i-lucide-chevron-down"
+          color="neutral"
+          variant="outline"
+          size="sm"
+          block
+          class="justify-start ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
+          :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+        />
+      </UDropdownMenu>
+
+      <UTooltip text="Random theme">
+        <UButton
+          icon="i-lucide-dices"
+          color="neutral"
+          variant="outline"
+          size="sm"
+          aria-label="Random theme"
+          class="ring-default rounded-sm hover:bg-elevated/50"
+          @click="shuffle"
+        />
+      </UTooltip>
+    </UFieldGroup>
+
     <UAccordion
       v-model="openGroups"
 
diff --git a/docs/app/components/theme-studio/ThemeStudioViewChat.vue b/docs/app/components/theme-studio/ThemeStudioViewChat.vue
new file mode 100644
index 0000000000..421416bdd6
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioViewChat.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import type { UIMessage } from 'ai'
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const input = ref('')
+
+const menuItems: NavigationMenuItem[] = [
+  { label: 'New chat', icon: 'i-lucide-circle-plus' },
+  { label: 'Search', icon: 'i-lucide-search' }
+]
+
+const historyItems: NavigationMenuItem[] = [
+  { label: 'Today', type: 'label' },
+  { label: 'Building a dashboard with Nuxt UI', active: true },
+  { label: 'Theming buttons and badges' },
+  { label: 'Yesterday', type: 'label' },
+  { label: 'Form validation with UForm' },
+  { label: 'Sidebar layout questions' },
+  { label: 'Previous 7 days', type: 'label' },
+  { label: 'Migrating an app to v4' },
+  { label: 'Dark mode color tokens' },
+  { label: 'Table sorting and pagination' }
+]
+
+const messages: UIMessage[] = [{
+  id: '1',
+  role: 'user',
+  parts: [{ type: 'text', text: 'I want to build a dashboard with Nuxt UI. Where should I start?' }]
+}, {
+  id: '2',
+  role: 'assistant',
+  parts: [{ type: 'text', text: 'Great choice! Start with UDashboardGroup as the root layout, then add a UDashboardSidebar for navigation and a UDashboardPanel for each page. The sidebar is collapsible and resizable out of the box, so you get a polished shell before writing any custom code.' }]
+}, {
+  id: '3',
+  role: 'user',
+  parts: [{ type: 'text', text: 'Nice. And how do I make it match my brand colors?' }]
+}, {
+  id: '4',
+  role: 'assistant',
+  parts: [{ type: 'text', text: 'Define your palette once in @theme and map it to the primary and neutral aliases in app.config.ts. Every component reads from those semantic tokens, so buttons, badges, inputs and even this chat pick up your brand automatically — exactly what this preview is showing you right now.' }]
+}, {
+  id: '5',
+  role: 'user',
+  parts: [{ type: 'text', text: 'Perfect, that saves me a ton of CSS. Ship it!' }]
+}]
+</script>
+
+<template>
+  <div class="h-full flex bg-default overflow-hidden">
+    <aside class="hidden md:flex w-56 shrink-0 flex-col gap-2 border-e border-default bg-elevated/25 p-3 min-h-0">
+      <div class="flex items-center gap-1.5 px-1.5 py-1">
+        <UIcon name="i-lucide-message-circle" class="size-5 text-primary shrink-0" />
+        <span class="text-lg font-bold text-highlighted">Chat</span>
+      </div>
+
+      <UNavigationMenu :items="menuItems" orientation="vertical" />
+
+      <div class="flex-1 min-h-0 overflow-y-auto">
+        <UNavigationMenu :items="historyItems" orientation="vertical" :ui="{ link: 'overflow-hidden' }" />
+      </div>
+
+      <UButton
+        label="Anna Cooper"
+        :avatar="{ alt: 'Anna Cooper' }"
+        trailing-icon="i-lucide-chevrons-up-down"
+        color="neutral"
+        variant="ghost"
+        class="w-full"
+        :ui="{ trailingIcon: 'ms-auto text-dimmed' }"
+      />
+    </aside>
+
+    <div class="flex-1 flex flex-col min-w-0 min-h-0">
+      <div class="h-12 shrink-0 flex items-center justify-between gap-2 border-b border-default px-4">
+        <p class="text-sm font-medium text-highlighted truncate">
+          Building a dashboard with Nuxt UI
+        </p>
+
+        <div class="flex items-center gap-1">
+          <UButton
+            label="Private"
+            icon="i-lucide-lock"
+            trailing-icon="i-lucide-chevron-down"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+          />
+          <UButton
+            icon="i-lucide-share"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            square
+            aria-label="Share chat"
+          />
+        </div>
+      </div>
+
+      <div class="flex-1 min-h-0 overflow-y-auto">
+        <UChatMessages
+          :messages="messages"
+          status="ready"
+          :should-scroll-to-bottom="false"
+          :auto-scroll="false"
+          class="p-4 sm:p-6"
+        />
+      </div>
+
+      <div class="shrink-0 px-4 pb-4 sm:px-6">
+        <UChatPrompt v-model="input" placeholder="Ask anything about Nuxt UI...">
+          <template #footer>
+            <div class="flex items-center gap-1">
+              <UButton
+                icon="i-lucide-paperclip"
+                color="neutral"
+                variant="ghost"
+                size="sm"
+                square
+                aria-label="Attach file"
+              />
+              <UButton
+                label="gpt-4o"
+                trailing-icon="i-lucide-chevron-down"
+                color="neutral"
+                variant="ghost"
+                size="sm"
+              />
+            </div>
+
+            <UChatPromptSubmit status="ready" size="sm" />
+          </template>
+        </UChatPrompt>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue b/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
new file mode 100644
index 0000000000..1d5dcc0bf4
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
@@ -0,0 +1,347 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+import type { DropdownMenuItem, NavigationMenuItem, TableColumn } from '@nuxt/ui'
+
+const UBadge = resolveComponent('UBadge')
+
+const teams = [
+  { label: 'Nuxt', avatar: { src: 'https://github.com/nuxt.png', alt: 'Nuxt' } },
+  { label: 'NuxtHub', avatar: { src: 'https://github.com/nuxt-hub.png', alt: 'NuxtHub' } },
+  { label: 'NuxtLabs', avatar: { src: 'https://github.com/nuxtlabs.png', alt: 'NuxtLabs' } }
+]
+const selectedTeam = ref(teams[0]!)
+
+const teamItems = computed<DropdownMenuItem[][]>(() => [
+  teams.map(team => ({ ...team, onSelect: () => { selectedTeam.value = team } })),
+  [
+    { label: 'Create team', icon: 'i-lucide-circle-plus' },
+    { label: 'Manage teams', icon: 'i-lucide-cog' }
+  ]
+])
+
+const links: NavigationMenuItem[][] = [[{
+  label: 'Home',
+  icon: 'i-lucide-house',
+  active: true
+}, {
+  label: 'Inbox',
+  icon: 'i-lucide-inbox',
+  badge: '4'
+}, {
+  label: 'Customers',
+  icon: 'i-lucide-users'
+}, {
+  label: 'Settings',
+  icon: 'i-lucide-settings',
+  defaultOpen: true,
+  type: 'trigger',
+  children: [
+    { label: 'General' },
+    { label: 'Members' },
+    { label: 'Notifications' },
+    { label: 'Security' }
+  ]
+}], [{
+  label: 'Feedback',
+  icon: 'i-lucide-message-circle'
+}, {
+  label: 'Help & Support',
+  icon: 'i-lucide-info'
+}]]
+
+const user = {
+  name: 'Benjamin Canac',
+  avatar: { src: 'https://github.com/benjamincanac.png', alt: 'Benjamin Canac' }
+}
+
+const userItems: DropdownMenuItem[][] = [[{
+  type: 'label',
+  label: user.name,
+  avatar: user.avatar
+}], [
+  { label: 'Profile', icon: 'i-lucide-user' },
+  { label: 'Billing', icon: 'i-lucide-credit-card' },
+  { label: 'Settings', icon: 'i-lucide-settings' }
+], [
+  { label: 'Log out', icon: 'i-lucide-log-out' }
+]]
+
+const newItems: DropdownMenuItem[][] = [[
+  { label: 'New mail', icon: 'i-lucide-send' },
+  { label: 'New customer', icon: 'i-lucide-user-plus' }
+]]
+
+const periodItems = ['Daily', 'Weekly', 'Monthly']
+const period = ref('Daily')
+
+const stats = [
+  { title: 'Customers', icon: 'i-lucide-users', value: '892', variation: 14 },
+  { title: 'Conversions', icon: 'i-lucide-chart-pie', value: '1,436', variation: 8 },
+  { title: 'Revenue', icon: 'i-lucide-circle-dollar-sign', value: '$312,540', variation: 23 },
+  { title: 'Orders', icon: 'i-lucide-shopping-cart', value: '254', variation: -5 }
+]
+
+const revenue = [6200, 7400, 6800, 9100, 8600, 10400, 9800, 11900, 11200, 13000, 12400, 14100, 13600, 15200]
+const revenueMin = Math.min(...revenue)
+const revenueMax = Math.max(...revenue)
+const chartPoints = revenue
+  .map((value, index) => `${(index * (400 / (revenue.length - 1))).toFixed(1)},${(110 - ((value - revenueMin) / (revenueMax - revenueMin)) * 100).toFixed(1)}`)
+  .join(' ')
+const chartArea = `0,120 ${chartPoints} 400,120`
+const chartTicks = ['22 Jun', '26 Jun', '30 Jun', '3 Jul', '6 Jul']
+const revenueTotal = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  maximumFractionDigits: 0
+}).format(revenue.reduce((acc, amount) => acc + amount, 0))
+
+type Sale = {
+  id: string
+  date: string
+  status: 'paid' | 'failed' | 'refunded'
+  email: string
+  amount: number
+}
+
+const sales: Sale[] = [
+  { id: '4600', date: 'Jul 6, 14:32', status: 'paid', email: 'james.anderson@example.com', amount: 594 },
+  { id: '4599', date: 'Jul 6, 11:05', status: 'failed', email: 'mia.white@example.com', amount: 276 },
+  { id: '4598', date: 'Jul 5, 22:47', status: 'refunded', email: 'william.brown@example.com', amount: 315 },
+  { id: '4597', date: 'Jul 5, 18:20', status: 'paid', email: 'emma.davis@example.com', amount: 529 },
+  { id: '4596', date: 'Jul 5, 09:12', status: 'paid', email: 'ethan.harris@example.com', amount: 639 }
+]
+
+const salesColumns: TableColumn<Sale>[] = [{
+  accessorKey: 'id',
+  header: 'ID',
+  cell: ({ row }) => `#${row.getValue('id')}`
+}, {
+  accessorKey: 'date',
+  header: 'Date'
+}, {
+  accessorKey: 'status',
+  header: 'Status',
+  cell: ({ row }) => {
+    const color = ({
+      paid: 'success' as const,
+      failed: 'error' as const,
+      refunded: 'neutral' as const
+    })[row.getValue('status') as string]
+
+    return h(UBadge, { class: 'capitalize', color }, () => row.getValue('status'))
+  }
+}, {
+  accessorKey: 'email',
+  header: 'Email'
+}, {
+  accessorKey: 'amount',
+  header: 'Amount',
+  meta: {
+    class: {
+      th: 'text-right',
+      td: 'text-right font-medium'
+    }
+  },
+  cell: ({ row }) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(Number.parseFloat(row.getValue('amount')))
+  }
+}]
+</script>
+
+<template>
+  <!-- UDashboardGroup is `fixed inset-0` by default: contain it in the preview pane instead. -->
+  <UDashboardGroup
+    unit="rem"
+    :persistent="false"
+    class="relative inset-auto h-full w-full"
+  >
+    <UDashboardSidebar
+      collapsible
+      resizable
+      class="bg-elevated/25"
+      :ui="{ root: 'flex min-h-0', footer: 'border-t border-default' }"
+    >
+      <template #header="{ collapsed }">
+        <UDropdownMenu
+          :items="teamItems"
+          :content="{ align: 'center', collisionPadding: 12 }"
+          :ui="{ content: collapsed ? 'w-40' : 'w-(--reka-dropdown-menu-trigger-width)' }"
+        >
+          <UButton
+            v-bind="{
+              ...selectedTeam,
+              label: collapsed ? undefined : selectedTeam.label,
+              trailingIcon: collapsed ? undefined : 'i-lucide-chevrons-up-down'
+            }"
+            color="neutral"
+            variant="ghost"
+            block
+            :square="collapsed"
+            class="data-[state=open]:bg-elevated"
+            :class="[!collapsed && 'py-2']"
+            :ui="{ trailingIcon: 'text-dimmed' }"
+          />
+        </UDropdownMenu>
+      </template>
+
+      <template #default="{ collapsed }">
+        <UDashboardSearchButton :collapsed="collapsed" class="bg-transparent ring-default" />
+
+        <UNavigationMenu
+          :collapsed="collapsed"
+          :items="links[0]"
+          orientation="vertical"
+          tooltip
+          popover
+        />
+
+        <UNavigationMenu
+          :collapsed="collapsed"
+          :items="links[1]"
+          orientation="vertical"
+          tooltip
+          class="mt-auto"
+        />
+      </template>
+
+      <template #footer="{ collapsed }">
+        <UDropdownMenu
+          :items="userItems"
+          :content="{ align: 'center', collisionPadding: 12 }"
+          :ui="{ content: collapsed ? 'w-48' : 'w-(--reka-dropdown-menu-trigger-width)' }"
+        >
+          <UButton
+            v-bind="{
+              ...user,
+              label: collapsed ? undefined : user.name,
+              trailingIcon: collapsed ? undefined : 'i-lucide-chevrons-up-down'
+            }"
+            color="neutral"
+            variant="ghost"
+            block
+            :square="collapsed"
+            class="data-[state=open]:bg-elevated"
+            :ui="{ trailingIcon: 'text-dimmed' }"
+          />
+        </UDropdownMenu>
+      </template>
+    </UDashboardSidebar>
+
+    <UDashboardPanel :ui="{ root: 'min-h-0' }">
+      <template #header>
+        <UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
+          <template #leading>
+            <UDashboardSidebarCollapse />
+          </template>
+
+          <template #right>
+            <UTooltip text="Notifications" :shortcuts="['N']">
+              <UButton color="neutral" variant="ghost" square aria-label="Notifications">
+                <UChip color="error" inset>
+                  <UIcon name="i-lucide-bell" class="size-5 shrink-0" />
+                </UChip>
+              </UButton>
+            </UTooltip>
+
+            <UDropdownMenu :items="newItems">
+              <UButton icon="i-lucide-plus" class="rounded-full" aria-label="New" />
+            </UDropdownMenu>
+          </template>
+        </UDashboardNavbar>
+
+        <UDashboardToolbar>
+          <template #left>
+            <UButton
+              color="neutral"
+              variant="ghost"
+              icon="i-lucide-calendar"
+              label="Jun 22 - Jul 6, 2026"
+              class="-ms-1"
+            />
+
+            <USelect v-model="period" :items="periodItems" class="w-28" />
+          </template>
+        </UDashboardToolbar>
+      </template>
+
+      <template #body>
+        <!-- The preview pane is far narrower than the real template's page —
+             two-up until xl, and the joined-border look only when four fit. -->
+        <UPageGrid class="grid-cols-2 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4 gap-4 xl:gap-px">
+          <UPageCard
+            v-for="stat in stats"
+            :key="stat.title"
+            :icon="stat.icon"
+            :title="stat.title"
+            :ui="{
+              container: 'gap-y-1.5',
+              wrapper: 'items-start',
+              leading: 'p-2.5 rounded-full bg-primary/10 ring ring-inset ring-primary/25 flex-col',
+              title: 'font-normal text-muted text-xs uppercase'
+            }"
+            class="xl:rounded-none xl:first:rounded-l-lg xl:last:rounded-r-lg hover:z-1"
+          >
+            <div class="flex items-center gap-2 flex-wrap min-w-0">
+              <span class="text-2xl font-semibold text-highlighted">
+                {{ stat.value }}
+              </span>
+
+              <UBadge :color="stat.variation > 0 ? 'success' : 'error'" class="text-xs">
+                {{ stat.variation > 0 ? '+' : '' }}{{ stat.variation }}%
+              </UBadge>
+            </div>
+          </UPageCard>
+        </UPageGrid>
+
+        <UCard :ui="{ body: 'px-0! pt-0! pb-3!' }">
+          <template #header>
+            <div>
+              <p class="text-xs text-muted uppercase mb-1.5">
+                Revenue
+              </p>
+              <p class="text-3xl text-highlighted font-semibold">
+                {{ revenueTotal }}
+              </p>
+            </div>
+          </template>
+
+          <svg
+            viewBox="0 0 400 120"
+            preserveAspectRatio="none"
+            class="w-full h-40 text-primary"
+            aria-hidden="true"
+          >
+            <polygon :points="chartArea" fill="currentColor" class="opacity-10" />
+            <polyline
+              :points="chartPoints"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              vector-effect="non-scaling-stroke"
+            />
+          </svg>
+
+          <div class="flex items-center justify-between px-4 sm:px-6 pt-2 text-xs text-dimmed">
+            <span v-for="tick in chartTicks" :key="tick">{{ tick }}</span>
+          </div>
+        </UCard>
+
+        <UTable
+          :data="sales"
+          :columns="salesColumns"
+          class="shrink-0"
+          :ui="{
+            base: 'table-fixed border-separate border-spacing-0',
+            thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
+            tbody: '[&>tr]:last:[&>td]:border-b-0',
+            th: 'first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
+            td: 'border-b border-default'
+          }"
+        />
+      </template>
+    </UDashboardPanel>
+  </UDashboardGroup>
+</template>
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 9eb583bea3..a101c90611 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -18,17 +18,18 @@ if (import.meta.server) {
   })
 }
 
-const { presets, activePreset, applyPreset, shuffle, reset } = useThemeStudio()
+const { reset } = useThemeStudio()
 
 const sidebarOpen = ref(true)
 
-const presetItems = computed(() => presets.map(preset => ({
-  label: preset.name,
-  icon: preset.icon,
-  type: 'checkbox' as const,
-  checked: activePreset.value === preset.id,
-  onSelect: () => applyPreset(preset)
-})))
+/** Preview views: the bento grid plus app-scale layouts from the real templates. */
+const view = ref('grid')
+
+const viewTabs = [
+  { label: 'Grid', icon: 'i-lucide-layout-grid', value: 'grid' },
+  { label: 'Dashboard', icon: 'i-lucide-layout-dashboard', value: 'dashboard' },
+  { label: 'Chat', icon: 'i-lucide-message-circle', value: 'chat' }
+]
 </script>
 
 <template>
@@ -57,31 +58,18 @@ const presetItems = computed(() => presets.map(preset => ({
           Theme Studio
         </h1>
 
-        <UBadge label="Concept" variant="subtle" size="sm" />
-
         <span class="flex-1" />
 
-        <UDropdownMenu :items="presetItems" :content="{ align: 'end' }">
-          <UButton
-            label="Presets"
-            icon="i-lucide-layout-grid"
-            trailing-icon="i-lucide-chevron-down"
-            color="neutral"
-            variant="outline"
-            size="sm"
-          />
-        </UDropdownMenu>
+        <UTabs
+          v-model="view"
+          :items="viewTabs"
+          :content="false"
+          size="xs"
+          color="neutral"
+          :ui="{ trigger: 'text-[11px]' }"
+        />
 
-        <UTooltip text="Random theme">
-          <UButton
-            label="Shuffle"
-            icon="i-lucide-dices"
-            color="neutral"
-            variant="outline"
-            size="sm"
-            @click="shuffle"
-          />
-        </UTooltip>
+        <span class="flex-1" />
 
         <ThemeStudioExport />
 
@@ -97,8 +85,15 @@ const presetItems = computed(() => presets.map(preset => ({
         </UTooltip>
       </div>
 
-      <div class="flex-1 lg:overflow-y-auto p-4 sm:p-6">
-        <ThemeStudioBento />
+      <!-- The grid scrolls as a page; the app-shell views own their height
+           and scroll internally, so the pane locks (bounded on mobile too). -->
+      <div
+        class="flex-1 min-h-0 p-0"
+        :class="view === 'grid' ? 'lg:overflow-y-auto' : 'overflow-hidden max-lg:h-[75vh]'"
+      >
+        <ThemeStudioBento v-if="view === 'grid'" />
+        <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
+        <ThemeStudioViewChat v-else-if="view === 'chat'" />
       </div>
     </div>
   </main>

From 8109504094401f20fb792d7f01b620ad65ae3e0b Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 00:37:30 +0200
Subject: [PATCH 037/185] =?UTF-8?q?feat(docs):=20theme=20importer=20?=
 =?UTF-8?q?=E2=80=94=20parse=20exported=20CSS/config=20back=20into=20edita?=
 =?UTF-8?q?ble=20studio=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioImport.vue        | 130 +++++
 docs/app/pages/theme.vue                      |   2 +
 docs/app/utils/theme-engine/import.ts         | 495 ++++++++++++++++++
 docs/app/utils/theme-engine/index.ts          |   1 +
 docs/app/utils/theme-engine/styles.ts         |   6 +-
 test/utils/theme-import.spec.ts               | 152 ++++++
 6 files changed, 783 insertions(+), 3 deletions(-)
 create mode 100644 docs/app/components/theme-studio/ThemeStudioImport.vue
 create mode 100644 docs/app/utils/theme-engine/import.ts
 create mode 100644 test/utils/theme-import.spec.ts

diff --git a/docs/app/components/theme-studio/ThemeStudioImport.vue b/docs/app/components/theme-studio/ThemeStudioImport.vue
new file mode 100644
index 0000000000..152acbea32
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioImport.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { importTheme, isDefaultTheme } from '../../utils/theme-engine'
+
+const { applyDoc } = useThemeStudio()
+const { track } = useAnalytics()
+
+const open = ref(false)
+
+const css = ref('')
+const config = ref('')
+
+const skipped = ref<string[]>([])
+const imported = ref(false)
+const empty = ref(false)
+
+watch(open, () => {
+  css.value = ''
+  config.value = ''
+  skipped.value = []
+  imported.value = false
+  empty.value = false
+})
+
+function runImport() {
+  const result = importTheme({ css: css.value, config: config.value })
+  skipped.value = result.skipped
+  empty.value = isDefaultTheme(result.doc)
+  imported.value = false
+
+  if (!empty.value) {
+    applyDoc(result.doc)
+    imported.value = true
+    track('Theme Imported', { skipped: result.skipped.length })
+  }
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    title="Import theme"
+    description="Paste an exported main.css and/or app.config.ts — the studio parses it back into editable settings."
+    :ui="{ content: 'max-w-3xl' }"
+  >
+    <UButton
+      label="Import"
+      icon="i-lucide-upload"
+      color="neutral"
+      variant="outline"
+      size="sm"
+    />
+
+    <template #body>
+      <div class="flex flex-col gap-4">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          <div class="flex flex-col gap-2 min-w-0">
+            <p class="text-xs font-semibold text-muted font-mono">
+              main.css
+            </p>
+
+            <UTextarea
+              v-model="css"
+              :rows="10"
+              placeholder="@import &quot;tailwindcss&quot;;&#10;@import &quot;@nuxt/ui&quot;;&#10;…"
+              class="w-full font-mono"
+              :ui="{ base: 'text-xs' }"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2 min-w-0">
+            <p class="text-xs font-semibold text-muted font-mono">
+              app.config.ts
+            </p>
+
+            <UTextarea
+              v-model="config"
+              :rows="10"
+              placeholder="export default defineAppConfig({&#10;  ui: { … }&#10;})"
+              class="w-full font-mono"
+              :ui="{ base: 'text-xs' }"
+            />
+          </div>
+        </div>
+
+        <UAlert
+          v-if="imported"
+          title="Theme imported"
+          :description="skipped.length ? 'Applied — a few lines were outside the theme schema and were skipped (listed below).' : 'Applied. Every line was understood.'"
+          icon="i-lucide-check"
+          color="success"
+          variant="subtle"
+        />
+
+        <UAlert
+          v-else-if="empty"
+          title="Nothing to import"
+          description="No theme settings were recognized in the pasted content."
+          icon="i-lucide-info"
+          color="warning"
+          variant="subtle"
+        />
+
+        <div v-if="skipped.length" class="flex flex-col gap-1">
+          <p class="text-xs font-semibold text-muted">
+            Skipped
+          </p>
+          <pre class="text-xs font-mono bg-muted rounded-md p-3 overflow-x-auto max-h-40 whitespace-pre">{{ skipped.join('\n') }}</pre>
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end gap-2 w-full">
+        <UButton
+          label="Cancel"
+          color="neutral"
+          variant="ghost"
+          @click="open = false"
+        />
+        <UButton
+          label="Import"
+          icon="i-lucide-upload"
+          color="neutral"
+          :disabled="!css.trim() && !config.trim()"
+          @click="runImport"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index a101c90611..d50e305647 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -71,6 +71,8 @@ const viewTabs = [
 
         <span class="flex-1" />
 
+        <ThemeStudioImport />
+
         <ThemeStudioExport />
 
         <UTooltip text="Reset theme">
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
new file mode 100644
index 0000000000..9b951a2be3
--- /dev/null
+++ b/docs/app/utils/theme-engine/import.ts
@@ -0,0 +1,495 @@
+import type { ThemeDoc, Shade } from './types'
+import { SHADES, DEFAULT_COLORS } from './types'
+import type { StyleOptions, DefaultVariant, DefaultSize, VariantGroup } from './styles'
+import {
+  styleComponents,
+  FRAME_COLOR_VALUES,
+  SHADOW_COLOR_VALUES,
+  SHADOW_GEOMETRY_DEFAULTS,
+  VARIANT_GROUPS,
+  VARIANT_SUPPORT,
+  SIZE_SUPPORT
+} from './styles'
+import { parseUiColorRef } from './resolve'
+import { themeIcons } from '../theme'
+
+/**
+ * The inverse of generateCSS/generateConfig: parse an exported (or
+ * export-shaped) theme back into a ThemeDoc, so pasting a theme is as
+ * first-class as copying one out. Anything outside the export grammar is
+ * collected in `skipped` and surfaced — never silently dropped.
+ */
+export interface ThemeImportResult {
+  doc: ThemeDoc
+  skipped: string[]
+}
+
+const SHADE_SET = new Set<number>(SHADES)
+
+/* ---------------------------------------------------------------- CSS -- */
+
+interface ParsedCSS {
+  palettes: Record<string, Partial<Record<Shade, string>>>
+  font?: string
+  spacing?: number
+  fontSize?: number
+  radius?: number
+  blackAsPrimary?: boolean
+  light: Record<string, string>
+  dark: Record<string, string>
+  skipped: string[]
+}
+
+function parseCSS(css: string): ParsedCSS {
+  const result: ParsedCSS = { palettes: {}, light: {}, dark: {}, skipped: [] }
+  const clean = css.replace(/\/\*[\s\S]*?\*\//g, '')
+
+  const blockRe = /([^{}]+)\{([^{}]*)\}/g
+  let cursor = 0
+  let match: RegExpExecArray | null
+
+  const outside = (text: string) => {
+    for (const line of text.split('\n')) {
+      const trimmed = line.trim()
+      if (trimmed && !trimmed.startsWith('@import') && !trimmed.startsWith('@source')) {
+        result.skipped.push(trimmed)
+      }
+    }
+  }
+
+  while ((match = blockRe.exec(clean))) {
+    cursor = match.index + match[0].length
+
+    // Everything before the selector's own line (@import lines, stray text)
+    // is preamble — the selector is what follows the last ';'.
+    const segments = match[1]!.split(';')
+    outside(segments.slice(0, -1).join('\n'))
+    const selector = segments[segments.length - 1]!.trim().replace(/\s+/g, ' ')
+    const declarations = match[2]!.split(';')
+      .map(declaration => declaration.trim())
+      .filter(Boolean)
+      .map((declaration) => {
+        const colon = declaration.indexOf(':')
+        return [declaration.slice(0, colon).trim(), declaration.slice(colon + 1).trim()] as const
+      })
+
+    for (const [prop, value] of declarations) {
+      if (!parseDeclaration(result, selector, prop, value)) {
+        result.skipped.push(`${selector} { ${prop}: ${value} }`)
+      }
+    }
+  }
+  outside(clean.slice(cursor))
+
+  return result
+}
+
+function parseDeclaration(result: ParsedCSS, selector: string, prop: string, value: string): boolean {
+  if (selector === '@theme static' || selector === '@theme') {
+    const shade = prop.match(/^--color-(.+)-(\d{2,3})$/)
+    if (shade && SHADE_SET.has(Number(shade[2]))) {
+      const palette = result.palettes[shade[1]!] ||= {}
+      palette[Number(shade[2]) as Shade] = value
+      return true
+    }
+    if (prop === '--font-sans') {
+      const family = value.match(/^'([^']+)'/) || value.match(/^"([^"]+)"/)
+      if (family) {
+        result.font = family[1]
+        return true
+      }
+    }
+    if (prop === '--spacing' && value.endsWith('rem')) {
+      result.spacing = Number.parseFloat(value)
+      return true
+    }
+    return false
+  }
+
+  if (selector === 'html' && prop === 'font-size' && value.endsWith('px')) {
+    result.fontSize = Number.parseFloat(value)
+    return true
+  }
+
+  if (selector === ':root') {
+    if (prop === '--ui-radius' && value.endsWith('rem')) {
+      result.radius = Number.parseFloat(value)
+      return true
+    }
+    if (prop === '--ui-primary' && value === 'black') {
+      result.blackAsPrimary = true
+      return true
+    }
+    if (prop === '--spacing' && value.endsWith('rem')) {
+      result.spacing = Number.parseFloat(value)
+      return true
+    }
+    return false
+  }
+
+  if (selector === ':root, .light' || selector === '.light') {
+    result.light[prop] = value
+    return true
+  }
+  if (selector === '.dark') {
+    result.dark[prop] = value
+    return true
+  }
+
+  return false
+}
+
+/* ------------------------------------------------- style reconstruction -- */
+
+/**
+ * Pull the style-owned variables out of the per-mode records (consuming
+ * them) and work backwards to the StyleOptions that would emit them.
+ * What remains in light/dark afterwards is plain token overrides.
+ */
+function extractStyle(light: Record<string, string>, dark: Record<string, string>): StyleOptions {
+  const style: StyleOptions = {}
+
+  const take = (prop: string): { light?: string, dark?: string } => {
+    const value = { light: light[prop], dark: dark[prop] }
+    Reflect.deleteProperty(light, prop)
+    Reflect.deleteProperty(dark, prop)
+    return value
+  }
+
+  const opacity = take('--ui-shadow-opacity')
+  const geometry = {
+    x: take('--ui-shadow-offset-x'),
+    y: take('--ui-shadow-offset-y'),
+    blur: take('--ui-shadow-blur'),
+    spread: take('--ui-shadow-spread')
+  }
+  const finals = { hard: take('--ui-shadow-final-hard'), soft: take('--ui-shadow-final-soft') }
+  const shadowColor = take('--ui-shadow-color')
+  const frameColor = take('--ui-frame-color')
+
+  if (geometry.x.light !== undefined) {
+    style.shadow = 'hard'
+    const parsed = {
+      x: Number.parseFloat(geometry.x.light),
+      y: Number.parseFloat(geometry.y.light ?? '3'),
+      blur: Number.parseFloat(geometry.blur.light ?? '0'),
+      spread: Number.parseFloat(geometry.spread.light ?? '0')
+    }
+    // The export force-emits default geometry — only a real change is a choice.
+    if (JSON.stringify(parsed) !== JSON.stringify(SHADOW_GEOMETRY_DEFAULTS)) {
+      style.shadowGeometry = parsed
+    }
+  } else if (finals.hard.light !== undefined || finals.soft.light !== undefined) {
+    style.shadow = 'soft'
+  }
+
+  if (opacity.light !== undefined) {
+    style.shadowOpacity = Number.parseFloat(opacity.light)
+  }
+
+  if (shadowColor.light !== undefined || shadowColor.dark !== undefined) {
+    // The export force-emits neutral-950/black when no color was chosen.
+    const forced = shadowColor.light === 'var(--ui-color-neutral-950)' && shadowColor.dark === 'black'
+    if (!forced) {
+      const named = (Object.keys(SHADOW_COLOR_VALUES) as Array<keyof typeof SHADOW_COLOR_VALUES>)
+        .find(key => SHADOW_COLOR_VALUES[key].light === shadowColor.light && SHADOW_COLOR_VALUES[key].dark === shadowColor.dark)
+      const lightRef = parseUiColorRef(shadowColor.light)
+      const darkRef = parseUiColorRef(shadowColor.dark)
+      if (named) {
+        style.shadowColor = named
+      } else if (lightRef && darkRef && lightRef.alias === darkRef.alias && (lightRef.alias === 'neutral' || lightRef.alias === 'primary')) {
+        style.shadowColor = lightRef.alias === 'primary' ? 'primary-shade' : 'shade'
+        style.shadowShade = { light: lightRef.shade, dark: darkRef.shade }
+      }
+    }
+  }
+
+  if (frameColor.light !== undefined || frameColor.dark !== undefined) {
+    const named = (Object.keys(FRAME_COLOR_VALUES) as Array<keyof typeof FRAME_COLOR_VALUES>)
+      .find(key => FRAME_COLOR_VALUES[key].light === frameColor.light && FRAME_COLOR_VALUES[key].dark === frameColor.dark)
+    const lightRef = parseUiColorRef(frameColor.light)
+    const darkRef = parseUiColorRef(frameColor.dark)
+    if (named) {
+      style.borderColor = named
+    } else if (lightRef && darkRef && lightRef.alias === darkRef.alias && (lightRef.alias === 'neutral' || lightRef.alias === 'primary')) {
+      style.borderColor = lightRef.alias === 'primary' ? 'primary-shade' : 'shade'
+      style.borderShade = { light: lightRef.shade, dark: darkRef.shade }
+    }
+  }
+
+  return style
+}
+
+/* ------------------------------------------------------------- config -- */
+
+/**
+ * Parser for the restricted object-literal grammar generateConfig emits
+ * (unquoted keys, single-quoted strings, numbers, booleans, arrays) — a
+ * tokenizer, not eval, so pasted content can't execute anything.
+ */
+function parseObjectLiteral(source: string, start: number): { value: any, end: number } {
+  let i = start
+
+  const ws = () => {
+    while (i < source.length && /[\s,]/.test(source[i]!)) i++
+  }
+
+  const parseValue = (): any => {
+    ws()
+    const ch = source[i]
+    if (ch === '{') {
+      i++
+      const obj: Record<string, any> = {}
+      ws()
+      while (source[i] !== '}') {
+        ws()
+        let key: string
+        if (source[i] === '\'' || source[i] === '"') {
+          key = parseString()
+        } else {
+          const match = source.slice(i).match(/^[\w$-]+/)
+          if (!match) throw new Error(`Unexpected character at ${i}`)
+          key = match[0]
+          i += key.length
+        }
+        ws()
+        if (source[i] !== ':') throw new Error(`Expected ':' at ${i}`)
+        i++
+        obj[key] = parseValue()
+        ws()
+      }
+      i++
+      return obj
+    }
+    if (ch === '[') {
+      i++
+      const array: any[] = []
+      ws()
+      while (source[i] !== ']') {
+        array.push(parseValue())
+        ws()
+      }
+      i++
+      return array
+    }
+    if (ch === '\'' || ch === '"') {
+      return parseString()
+    }
+    const literal = source.slice(i).match(/^(true|false|null|-?\d+(?:\.\d+)?)/)
+    if (literal) {
+      i += literal[0].length
+      if (literal[0] === 'true') return true
+      if (literal[0] === 'false') return false
+      if (literal[0] === 'null') return null
+      return Number(literal[0])
+    }
+    throw new Error(`Unexpected character '${ch}' at ${i}`)
+  }
+
+  const parseString = (): string => {
+    const quote = source[i]!
+    i++
+    let out = ''
+    while (i < source.length && source[i] !== quote) {
+      if (source[i] === '\\') i++
+      out += source[i]
+      i++
+    }
+    i++
+    return out
+  }
+
+  const value = parseValue()
+  return { value, end: i }
+}
+
+function parseConfig(config: string, skipped: string[]): Record<string, any> | undefined {
+  const anchor = config.includes('defineAppConfig(')
+    ? config.indexOf('defineAppConfig(') + 'defineAppConfig('.length
+    : config.includes('ui(') ? config.indexOf('ui(') + 'ui('.length : -1
+  if (anchor === -1) {
+    skipped.push('config: no defineAppConfig(…) or ui(…) call found')
+    return undefined
+  }
+
+  const start = config.indexOf('{', anchor)
+  if (start === -1) return {}
+
+  try {
+    return parseObjectLiteral(config, start).value
+  } catch {
+    skipped.push('config: could not parse the object literal')
+    return undefined
+  }
+}
+
+/** Rebuild `defaults` from per-component defaultVariants, group-wise. */
+function extractDefaults(components: Record<string, any>): StyleOptions['defaults'] {
+  const defaults: { size?: DefaultSize, variants?: Partial<Record<VariantGroup, DefaultVariant>> } = {}
+
+  const sizes = SIZE_SUPPORT.map(component => components[component]?.defaultVariants?.size)
+  if (sizes[0] && sizes.every(size => size === sizes[0])) {
+    defaults.size = sizes[0]
+  }
+
+  for (const [group, groupComponents] of Object.entries(VARIANT_GROUPS)) {
+    const variants = groupComponents.map(component => components[component]?.defaultVariants?.variant)
+    const candidate = variants.find(Boolean)
+    if (!candidate) continue
+    // Every component that supports the candidate must carry it; ones that
+    // can't express it must carry nothing (that's how the expansion skips).
+    const consistent = groupComponents.every((component, index) =>
+      VARIANT_SUPPORT[component]?.includes(candidate) ? variants[index] === candidate : variants[index] === undefined
+    )
+    if (consistent) {
+      defaults.variants = { ...defaults.variants, [group]: candidate }
+    }
+  }
+
+  // A value carried by every group that could express it is an app-wide
+  // choice — collapsing keeps re-exports byte-identical to the original.
+  const groupValues = new Set(Object.values(defaults.variants || {}))
+  if (groupValues.size === 1) {
+    const [value] = [...groupValues] as [DefaultVariant]
+    const expressible = Object.entries(VARIANT_GROUPS)
+      .filter(([, groupComponents]) => groupComponents.some(component => VARIANT_SUPPORT[component]?.includes(value)))
+      .map(([group]) => group as VariantGroup)
+    if (expressible.every(group => defaults.variants?.[group] === value)) {
+      return { variant: value, ...(defaults.size ? { size: defaults.size } : {}) }
+    }
+  }
+
+  return Object.keys(defaults).length ? defaults : undefined
+}
+
+/** Border treatment lives only in the class bundles — read it back from them. */
+function detectBorder(components: Record<string, any>): StyleOptions['border'] {
+  const compounds: Array<Record<string, unknown>> = Object.values(components).flatMap(component => component?.compoundVariants || [])
+  const classOf = (entry: Record<string, unknown>) => typeof entry.class === 'string' ? entry.class : Object.values(entry.class || {}).join(' ')
+  const widened = compounds.some(entry => classOf(entry).includes('ring-2'))
+  if (!widened) return undefined
+  const framed = compounds.some(entry => entry.variant === 'solid' && classOf(entry).includes('ring-2'))
+  return framed ? 'frame' : 'bold'
+}
+
+/** Shadow fallback when only a config was pasted (CSS normally decides). */
+function detectShadow(components: Record<string, any>): StyleOptions['shadow'] {
+  const slots = Object.values(components).flatMap(component => Object.values(component?.slots || {})) as string[]
+  if (slots.some(classes => classes.includes('var(--ui-shadow-offset-x)'))) return 'hard'
+  if (slots.some(classes => classes.includes('--ui-shadow-final-soft'))) return 'soft'
+  return undefined
+}
+
+/**
+ * Remove the fragments the reconstructed style regenerates, leaving only
+ * genuinely explicit component overrides for doc.components.
+ */
+function subtractStyleExpansion(components: Record<string, any>, style: StyleOptions): Record<string, any> {
+  const expected = styleComponents(style)
+  const remaining: Record<string, any> = {}
+
+  for (const [name, fragment] of Object.entries(components)) {
+    const expectedFragment = expected[name] || {}
+    const leftover: Record<string, any> = {}
+
+    for (const [slot, classes] of Object.entries((fragment.slots || {}) as Record<string, string>)) {
+      const expectedClasses = expectedFragment.slots?.[slot]
+      if (expectedClasses === classes) continue
+      if (expectedClasses && classes.startsWith(`${expectedClasses} `)) {
+        leftover.slots = { ...leftover.slots, [slot]: classes.slice(expectedClasses.length + 1) }
+      } else {
+        leftover.slots = { ...leftover.slots, [slot]: classes }
+      }
+    }
+
+    const expectedCompounds = [...(expectedFragment.compoundVariants || [])]
+    const compounds = ((fragment.compoundVariants || []) as Array<Record<string, unknown>>).filter((entry) => {
+      const index = expectedCompounds.findIndex(candidate => JSON.stringify(candidate) === JSON.stringify(entry))
+      if (index === -1) return true
+      expectedCompounds.splice(index, 1)
+      return false
+    })
+    if (compounds.length) leftover.compoundVariants = compounds
+
+    const defaultVariants = Object.fromEntries(
+      Object.entries((fragment.defaultVariants || {}) as Record<string, string>)
+        .filter(([key, value]) => expectedFragment.defaultVariants?.[key] !== value)
+    )
+    if (Object.keys(defaultVariants).length) leftover.defaultVariants = defaultVariants
+
+    if (Object.keys(leftover).length) remaining[name] = leftover
+  }
+
+  return remaining
+}
+
+/* -------------------------------------------------------------- entry -- */
+
+export function importTheme(input: { css?: string, config?: string }): ThemeImportResult {
+  const skipped: string[] = []
+  const doc: ThemeDoc = { version: 1 }
+
+  const css = input.css?.trim() ? parseCSS(input.css) : undefined
+  if (css) skipped.push(...css.skipped)
+
+  const parsedConfig = input.config?.trim() ? parseConfig(input.config, skipped) : undefined
+  const ui = parsedConfig?.ui && typeof parsedConfig.ui === 'object' ? parsedConfig.ui : {}
+
+  if (ui.colors && typeof ui.colors === 'object') {
+    const entries = Object.entries(ui.colors as Record<string, unknown>)
+      .filter(([alias, name]) => alias in DEFAULT_COLORS && typeof name === 'string')
+    if (entries.length) doc.colors = Object.fromEntries(entries) as ThemeDoc['colors']
+  }
+
+  if (ui.icons && typeof ui.icons === 'object') {
+    const known = Object.entries(themeIcons).find(([, icons]) => JSON.stringify(icons) === JSON.stringify(ui.icons))
+    if (known) {
+      doc.icons = known[0]
+    } else {
+      skipped.push('config: unrecognized icons object')
+    }
+  }
+
+  const components: Record<string, any> = Object.fromEntries(
+    Object.entries(ui).filter(([key]) => key !== 'colors' && key !== 'icons')
+  )
+
+  // Style: color/geometry variables come from the CSS, structure from the
+  // config classes; either half alone still reconstructs what it can.
+  const style: StyleOptions = css ? extractStyle(css.light, css.dark) : {}
+  style.shadow ||= detectShadow(components)
+  const border = detectBorder(components)
+  if (border) style.border = border
+  const defaults = extractDefaults(components)
+  if (defaults) style.defaults = defaults
+
+  const explicit = subtractStyleExpansion(components, style)
+  if (Object.keys(explicit).length) doc.components = explicit
+
+  if (Object.values(style).some(value => value !== undefined)) {
+    doc.style = style
+  }
+
+  if (css) {
+    if (Object.keys(css.palettes).length) {
+      doc.palettes = Object.fromEntries(Object.entries(css.palettes).map(([name, shades]) => [name, { shades }]))
+    }
+    if (css.font) doc.font = { sans: css.font }
+    if (css.spacing !== undefined) doc.spacing = css.spacing
+    if (css.fontSize !== undefined) doc.fontSize = css.fontSize
+    if (css.radius !== undefined) doc.radius = css.radius
+    if (css.blackAsPrimary) {
+      doc.blackAsPrimary = true
+      // its .dark counterpart is generated, not a token choice
+      if (css.dark['--ui-primary'] === 'white') delete css.dark['--ui-primary']
+    }
+    if (Object.keys(css.light).length || Object.keys(css.dark).length) {
+      doc.tokens = {
+        ...(Object.keys(css.light).length ? { light: css.light } : {}),
+        ...(Object.keys(css.dark).length ? { dark: css.dark } : {})
+      }
+    }
+  }
+
+  return { doc, skipped }
+}
diff --git a/docs/app/utils/theme-engine/index.ts b/docs/app/utils/theme-engine/index.ts
index cac8f6e90d..0374251bbe 100644
--- a/docs/app/utils/theme-engine/index.ts
+++ b/docs/app/utils/theme-engine/index.ts
@@ -1,6 +1,7 @@
 export * from './types'
 export * from './resolve'
 export * from './export'
+export * from './import'
 export * from './presets'
 export * from './oklch'
 export * from './palette'
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 3755d840e1..b6d63e5af7 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -86,7 +86,7 @@ export const VARIANT_SUPPORT: Record<string, string[]> = {
   textarea: ['outline', 'soft', 'subtle', 'ghost', 'none']
 }
 
-const SIZE_SUPPORT = ['button', 'badge', 'input', 'select', 'textarea']
+export const SIZE_SUPPORT = ['button', 'badge', 'input', 'select', 'textarea']
 
 /** Component groups behind the per-group default-variant selects. */
 export const VARIANT_GROUPS: Record<VariantGroup, string[]> = {
@@ -273,7 +273,7 @@ const FRAME_COLOR_FRAGMENTS: Fragments = {
 }
 
 /** Per-mode values behind the two color variables, per palette choice. */
-const FRAME_COLOR_VALUES: Record<Exclude<BorderColor, 'default' | 'shade' | 'primary-shade'>, { light: string, dark: string }> = {
+export const FRAME_COLOR_VALUES: Record<Exclude<BorderColor, 'default' | 'shade' | 'primary-shade'>, { light: string, dark: string }> = {
   inverted: { light: 'var(--ui-color-neutral-950)', dark: 'white' },
   black: { light: 'black', dark: 'black' },
   white: { light: 'white', dark: 'white' },
@@ -281,7 +281,7 @@ const FRAME_COLOR_VALUES: Record<Exclude<BorderColor, 'default' | 'shade' | 'pri
   neutral: { light: 'var(--ui-color-neutral-900)', dark: 'var(--ui-color-neutral-100)' }
 }
 
-const SHADOW_COLOR_VALUES: Record<Exclude<ShadowColor, 'default' | 'shade' | 'primary-shade'>, { light: string, dark: string }> = {
+export const SHADOW_COLOR_VALUES: Record<Exclude<ShadowColor, 'default' | 'shade' | 'primary-shade'>, { light: string, dark: string }> = {
   black: { light: 'black', dark: 'black' },
   inverted: { light: 'var(--ui-color-neutral-950)', dark: 'white' },
   primary: { light: 'var(--ui-color-primary-500)', dark: 'var(--ui-color-primary-400)' }
diff --git a/test/utils/theme-import.spec.ts b/test/utils/theme-import.spec.ts
new file mode 100644
index 0000000000..9465633b52
--- /dev/null
+++ b/test/utils/theme-import.spec.ts
@@ -0,0 +1,152 @@
+import { describe, it, expect } from 'vitest'
+import {
+  importTheme,
+  generateCSS,
+  generateConfig,
+  styleTokens,
+  presets,
+  DEFAULT_COLORS
+} from '../../docs/app/utils/theme-engine'
+import type { ThemeDoc } from '../../docs/app/utils/theme-engine'
+
+/**
+ * The merged per-mode variable maps a doc produces — the semantic ground
+ * truth for CSS round-trips. Import may move a var between the style axis
+ * and plain tokens (both render identically), so docs are compared here,
+ * not field-by-field.
+ */
+function effectiveVars(doc: ThemeDoc) {
+  const style = styleTokens(doc.style || {})
+  return {
+    light: { ...style.light, ...doc.tokens?.light },
+    dark: { ...style.dark, ...doc.tokens?.dark }
+  }
+}
+
+describe('importTheme', () => {
+  describe.each(presets.map(preset => [preset.id, preset.doc] as const))('round-trips preset %s', (_id, original) => {
+    const css = generateCSS(original)
+    const config = generateConfig(original)
+    const { doc: imported, skipped } = importTheme({ css, config })
+
+    it('understands every line of its own export', () => {
+      expect(skipped).toEqual([])
+    })
+
+    it('reproduces the config exactly', () => {
+      expect(generateConfig(imported)).toBe(config)
+    })
+
+    it('reproduces the effective CSS variables', () => {
+      expect(effectiveVars(imported)).toEqual(effectiveVars(original))
+      // Aliases set to their defaults are no-ops the export rightly drops —
+      // compare the choices that actually change anything.
+      const overrides = (doc: ThemeDoc) => Object.fromEntries(
+        Object.entries(doc.colors ?? {}).filter(([alias, name]) => DEFAULT_COLORS[alias as keyof typeof DEFAULT_COLORS] !== name)
+      )
+      expect(imported.palettes ?? {}).toEqual(original.palettes ?? {})
+      expect(overrides(imported)).toEqual(overrides(original))
+      expect(imported.radius).toBe(original.radius)
+      expect(imported.font?.sans).toBe(original.font?.sans)
+      expect(imported.fontSize).toBe(original.fontSize)
+      expect(imported.spacing).toBe(original.spacing)
+      expect(!!imported.blackAsPrimary).toBe(!!original.blackAsPrimary)
+      expect(imported.style?.shadow ?? 'none').toBe(original.style?.shadow ?? 'none')
+      expect(imported.style?.border ?? 'default').toBe(original.style?.border ?? 'default')
+    })
+
+    it('is a fixed point of export → import', () => {
+      const reexportedCSS = generateCSS(imported)
+      const reexportedConfig = generateConfig(imported)
+      const second = importTheme({ css: reexportedCSS, config: reexportedConfig })
+
+      expect(second.skipped).toEqual([])
+      expect(generateCSS(second.doc)).toBe(reexportedCSS)
+      expect(generateConfig(second.doc)).toBe(reexportedConfig)
+    })
+  })
+
+  it('parses sizing, font and radius from CSS alone', () => {
+    const { doc, skipped } = importTheme({
+      css: [
+        '@import "tailwindcss";',
+        '@import "@nuxt/ui";',
+        '',
+        '@theme {',
+        '  --font-sans: \'DM Sans\', sans-serif;',
+        '  --spacing: 0.3rem;',
+        '}',
+        '',
+        'html {',
+        '  font-size: 15px;',
+        '}',
+        '',
+        ':root {',
+        '  --ui-radius: 0.5rem;',
+        '}'
+      ].join('\n')
+    })
+
+    expect(skipped).toEqual([])
+    expect(doc.font?.sans).toBe('DM Sans')
+    expect(doc.spacing).toBe(0.3)
+    expect(doc.fontSize).toBe(15)
+    expect(doc.radius).toBe(0.5)
+  })
+
+  it('accepts hex palettes and reports unknown lines instead of dropping them', () => {
+    const { doc, skipped } = importTheme({
+      css: [
+        '@theme static {',
+        '  --color-brand-500: #CC785C;',
+        '}',
+        '',
+        '.made-up-selector {',
+        '  color: red;',
+        '}'
+      ].join('\n')
+    })
+
+    expect(doc.palettes).toEqual({ brand: { shades: { 500: '#CC785C' } } })
+    expect(skipped).toEqual(['.made-up-selector { color: red }'])
+  })
+
+  it('reads colors and defaults from a config alone', () => {
+    const { doc, skipped } = importTheme({
+      config: [
+        'export default defineAppConfig({',
+        '  ui: {',
+        '    colors: {',
+        '      primary: \'indigo\',',
+        '      neutral: \'zinc\'',
+        '    },',
+        '    button: {',
+        '      defaultVariants: {',
+        '        variant: \'soft\'',
+        '      }',
+        '    },',
+        '    badge: {',
+        '      defaultVariants: {',
+        '        variant: \'soft\'',
+        '      }',
+        '    }',
+        '  }',
+        '})'
+      ].join('\n')
+    })
+
+    expect(skipped).toEqual([])
+    expect(doc.colors).toEqual({ primary: 'indigo', neutral: 'zinc' })
+    expect(doc.style?.defaults?.variants).toEqual({ buttons: 'soft' })
+    expect(doc.components).toBeUndefined()
+  })
+
+  it('keeps explicit component overrides that no style expansion explains', () => {
+    const { doc } = importTheme({
+      config: 'export default defineAppConfig({ ui: { button: { slots: { base: \'rounded-full\' } } } })'
+    })
+
+    expect(doc.components).toEqual({ button: { slots: { base: 'rounded-full' } } })
+    expect(doc.style).toBeUndefined()
+  })
+})

From 35aeba88356de936460feeb3c66b5dba4ae4d125 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 00:45:24 +0200
Subject: [PATCH 038/185] fix(docs): border recoloring no longer repaints
 semantic outline/subtle rings

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/utils/theme-engine/styles.ts | 42 +++++++++++++++++++++++----
 test/utils/theme-engine.spec.ts       | 12 ++++++++
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index b6d63e5af7..afe8991222 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -257,19 +257,49 @@ const BORDER_FRAGMENTS: Record<BorderStyle, Fragments> = {
   }
 }
 
-/** compound entries recoloring whatever ring is present via the variable */
-function recolor(variants: string[], slot?: string): Array<Record<string, unknown>> {
-  return variants.map(variant => ({ variant, class: slot ? { [slot]: 'ring-(--ui-frame-color)' } : 'ring-(--ui-frame-color)' }))
+/**
+ * compound entries recoloring rings via the variable. With `colors` given,
+ * only those color variants are touched — on outline/subtle the ring IS the
+ * semantic signal (an error badge's ring must stay error-colored), so those
+ * only recolor for primary/neutral. Frames added around solid/soft surfaces
+ * are outlines by design and recolor for every color (comic-book black
+ * outlines a solid error button too).
+ */
+function recolor(variants: string[], slot?: string, colors?: string[]): Array<Record<string, unknown>> {
+  return variants.map(variant => ({
+    ...(colors ? { color: colors } : {}),
+    variant,
+    class: slot ? { [slot]: 'ring-(--ui-frame-color)' } : 'ring-(--ui-frame-color)'
+  }))
 }
 
+/** Colors whose rings carry no semantic meaning — safe to repaint. */
+const UNSIGNALED_COLORS = ['primary', 'neutral']
+
 const FRAME_COLOR_FRAGMENTS: Fragments = {
+  // cards have no color variants; field rings are neutral for every color
   card: { compoundVariants: recolor(['outline', 'subtle', 'solid', 'soft'], 'root') },
   input: { compoundVariants: recolor(['outline', 'subtle']) },
   select: { compoundVariants: recolor(['outline', 'subtle']) },
   textarea: { compoundVariants: recolor(['outline', 'subtle']) },
-  alert: { compoundVariants: recolor(['outline', 'subtle', 'solid', 'soft'], 'root') },
-  button: { compoundVariants: recolor(['outline', 'subtle', 'solid', 'soft']) },
-  badge: { compoundVariants: recolor(['outline', 'subtle', 'solid', 'soft']) }
+  alert: {
+    compoundVariants: [
+      ...recolor(['outline', 'subtle'], 'root', UNSIGNALED_COLORS),
+      ...recolor(['solid', 'soft'], 'root')
+    ]
+  },
+  button: {
+    compoundVariants: [
+      ...recolor(['outline', 'subtle'], undefined, UNSIGNALED_COLORS),
+      ...recolor(['solid', 'soft'])
+    ]
+  },
+  badge: {
+    compoundVariants: [
+      ...recolor(['outline', 'subtle'], undefined, UNSIGNALED_COLORS),
+      ...recolor(['solid', 'soft'])
+    ]
+  }
 }
 
 /** Per-mode values behind the two color variables, per palette choice. */
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index c8ec608c54..f0b4c24bf1 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -354,6 +354,18 @@ describe('style colors', () => {
     expect(components.textarea!.compoundVariants).toContainEqual({ variant: 'none', class: 'shadow-none' })
   })
 
+  it('border recoloring spares semantic outline rings but frames every solid', async () => {
+    const { styleComponents } = await import('../../docs/app/utils/theme-engine')
+    const compounds = styleComponents({ border: 'frame', borderColor: 'primary' }).button!.compoundVariants!
+
+    // outline/subtle rings ARE the semantic signal — only primary/neutral repaint
+    expect(compounds).toContainEqual({ color: ['primary', 'neutral'], variant: 'outline', class: 'ring-(--ui-frame-color)' })
+    expect(compounds).toContainEqual({ color: ['primary', 'neutral'], variant: 'subtle', class: 'ring-(--ui-frame-color)' })
+    // frames around solid/soft surfaces repaint for every color
+    expect(compounds).toContainEqual({ variant: 'solid', class: 'ring-(--ui-frame-color)' })
+    expect(compounds).toContainEqual({ variant: 'soft', class: 'ring-(--ui-frame-color)' })
+  })
+
   it('borderColor appends recolor compounds after width ones', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
     const compounds = styleComponents({ border: 'bold', borderColor: 'black' }).button!.compoundVariants!

From ae5864bfe7dde9398b59c7b4f07326a41fdedaf5 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 01:00:19 +0200
Subject: [PATCH 039/185] feat(docs): SaaS and Landing preview views from the
 real templates

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioViewLanding.vue   | 312 ++++++++++++++++++
 .../theme-studio/ThemeStudioViewSaas.vue      | 297 +++++++++++++++++
 docs/app/pages/theme.vue                      |   6 +-
 3 files changed, 614 insertions(+), 1 deletion(-)
 create mode 100644 docs/app/components/theme-studio/ThemeStudioViewLanding.vue
 create mode 100644 docs/app/components/theme-studio/ThemeStudioViewSaas.vue

diff --git a/docs/app/components/theme-studio/ThemeStudioViewLanding.vue b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
new file mode 100644
index 0000000000..5804e87217
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
@@ -0,0 +1,312 @@
+<script setup lang="ts">
+import type { AccordionItem, NavigationMenuItem } from '@nuxt/ui'
+
+const navItems: NavigationMenuItem[] = [
+  { label: 'Features' },
+  { label: 'Metrics' },
+  { label: 'FAQ' }
+]
+
+type TerminalSegment = {
+  text: string
+  class?: string
+}
+
+const terminalLines: TerminalSegment[][] = [
+  [
+    { text: '$ ', class: 'text-dimmed' },
+    { text: 'npx telemetry', class: 'text-highlighted' },
+    { text: ' init', class: 'text-primary' }
+  ],
+  [{ text: '→ Scanning service topology...', class: 'text-dimmed' }],
+  [
+    { text: '→ Found ', class: 'text-dimmed' },
+    { text: '23 services', class: 'text-highlighted' },
+    { text: ', ', class: 'text-dimmed' },
+    { text: '847 endpoints', class: 'text-highlighted' },
+    { text: ', ', class: 'text-dimmed' },
+    { text: '12 databases', class: 'text-highlighted' }
+  ],
+  [
+    { text: '→ Deploying collector agents ', class: 'text-dimmed' },
+    { text: '✓', class: 'text-success' }
+  ],
+  [
+    { text: '→ Baseline established in ', class: 'text-dimmed' },
+    { text: '340ms', class: 'text-success' }
+  ],
+  [
+    { text: '✓ Live at ', class: 'text-success' },
+    { text: 'https://app.example.com/acme-corp', class: 'text-primary underline underline-offset-2' }
+  ]
+]
+
+const logos = [
+  'i-lucide-triangle',
+  'i-lucide-github',
+  'i-lucide-pentagon',
+  'i-lucide-zap',
+  'i-lucide-aperture'
+]
+
+const features = [{
+  icon: 'i-lucide-zap',
+  title: 'Predictive Alerts',
+  description: 'Models trained on your own baselines flag anomalies minutes before they reach your SLOs.'
+}, {
+  icon: 'i-lucide-radar',
+  title: 'Topology Mapping',
+  description: 'Service dependencies discovered with zero config, so you see how one deploy ripples through checkout.'
+}, {
+  icon: 'i-lucide-layers',
+  title: 'Unified Telemetry',
+  description: 'Logs, metrics and traces share one query language. Stop context-switching, start correlating.'
+}, {
+  icon: 'i-lucide-git-commit-horizontal',
+  title: 'Deploy Tracking',
+  description: 'Every deploy is correlated with performance changes, so you know which commit caused the regression.'
+}, {
+  icon: 'i-lucide-filter',
+  title: 'Smart Sampling',
+  description: 'Interesting traces are retained and noise is dropped, cutting storage costs without losing signal.'
+}, {
+  icon: 'i-lucide-notebook-pen',
+  title: 'Team Notebooks',
+  description: 'Collaborative investigation notebooks turn incident debugging into reusable runbooks.'
+}]
+
+const metrics = [
+  { value: '99.99%', label: 'Uptime SLA', class: 'text-success' },
+  { value: '<50ms', label: 'P99 query', class: 'text-primary' },
+  { value: '14B+', label: 'Events / day', class: 'text-info' },
+  { value: '4 min', label: 'Early warning', class: 'text-warning' }
+]
+
+const faqItems: AccordionItem[] = [{
+  label: 'How long does setup take?',
+  content: 'Most teams are live in under five minutes. Run the init command, and the collector discovers your services, endpoints and databases automatically — no manual instrumentation required.'
+}, {
+  label: 'Do I need to change my code?',
+  content: 'No. The collector attaches at the infrastructure layer and works with OpenTelemetry out of the box. If you already emit traces, we ingest them as-is.'
+}, {
+  label: 'What does it cost at scale?',
+  content: 'Pricing is based on retained events after sampling, not raw ingest. Smart sampling keeps the interesting traces and drops the noise, so most teams pay for a fraction of their raw volume.'
+}, {
+  label: 'Can I self-host the platform?',
+  content: 'Yes. The full platform ships as a Helm chart for Kubernetes, with the same feature set as the cloud version and no phone-home requirements.'
+}, {
+  label: 'Is there a free tier?',
+  content: 'Free for up to 5 services with 7-day retention — no credit card required. Upgrade only when you need longer retention or more services.'
+}]
+
+const footerLinks = ['Docs', 'GitHub', 'Twitter', 'Status', 'Privacy']
+</script>
+
+<template>
+  <div class="h-full overflow-y-auto bg-default">
+    <!-- Header -->
+    <header class="sticky top-0 z-10 border-b border-default bg-default/75 backdrop-blur">
+      <div class="flex h-14 items-center justify-between gap-3 px-4 sm:px-6">
+        <div class="flex items-center gap-1.5">
+          <UIcon name="i-lucide-activity" class="size-5 text-primary shrink-0" />
+          <span class="text-base font-bold text-highlighted">Telemetry</span>
+        </div>
+
+        <UNavigationMenu :items="navItems" variant="link" class="hidden sm:flex" />
+
+        <div class="flex items-center gap-1.5">
+          <UButton label="Sign in" color="neutral" variant="ghost" class="hidden sm:inline-flex" />
+          <UButton label="Get started" color="neutral" />
+        </div>
+      </div>
+    </header>
+
+    <!-- Hero -->
+    <UPageHero
+      title="Observe less. Understand more."
+      description="Map your entire system in real-time, surface anomalies before they cascade, and eliminate the dashboards you never needed."
+      :ui="{
+        container: 'py-16 sm:py-24 lg:py-24 gap-8 sm:gap-12',
+        title: 'tracking-tighter',
+        links: 'gap-3'
+      }"
+    >
+      <template #headline>
+        <UBadge
+          label="v2.0 — Now with predictive alerting"
+          color="neutral"
+          variant="soft"
+          class="rounded-full px-3 py-1.5 gap-1.5"
+        >
+          <template #leading>
+            <UChip inset standalone :ui="{ base: 'animate-pulse ring-0' }" />
+          </template>
+        </UBadge>
+      </template>
+
+      <template #links>
+        <UButton label="Start for free" size="xl" />
+        <UButton label="View demo" color="neutral" variant="soft" size="xl" />
+      </template>
+
+      <div class="max-w-2xl mx-auto w-full">
+        <div class="rounded-xl border border-default bg-elevated/50 overflow-hidden font-mono text-xs sm:text-sm">
+          <div class="flex items-center gap-1.5 border-b border-default px-4 py-2.5">
+            <span class="size-2.5 rounded-full bg-error/60" />
+            <span class="size-2.5 rounded-full bg-warning/60" />
+            <span class="size-2.5 rounded-full bg-success/60" />
+            <span class="ms-2 text-dimmed text-xs">terminal</span>
+          </div>
+
+          <div class="flex flex-col gap-1.5 p-4 text-start">
+            <p v-for="(line, index) in terminalLines" :key="index" class="truncate">
+              <span v-for="(segment, segmentIndex) in line" :key="segmentIndex" :class="segment.class">{{ segment.text }}</span>
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <UPageLogos
+        title="Trusted by engineering teams at"
+        :items="logos"
+        class="max-w-lg mx-auto w-full"
+        :ui="{
+          title: 'font-mono uppercase text-xs tracking-widest text-dimmed',
+          logo: 'text-muted size-6'
+        }"
+      />
+    </UPageHero>
+
+    <!-- Features -->
+    <UPageSection
+      headline="Capabilities"
+      title="Every signal, one surface."
+      description="No more tab-switching between metrics, traces, and logs. Correlate everything into a single explorable topology."
+      :ui="{
+        root: 'py-16 sm:py-24',
+        headline: 'font-mono font-medium text-xs text-primary uppercase tracking-widest',
+        description: 'text-dimmed'
+      }"
+    >
+      <div class="rounded-2xl border border-default bg-default overflow-hidden">
+        <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-px">
+          <UPageCard
+            v-for="feature in features"
+            :key="feature.title"
+            :icon="feature.icon"
+            :title="feature.title"
+            :description="feature.description"
+            class="rounded-none"
+            :ui="{
+              leading: 'mb-4 flex size-9 items-center justify-center rounded-lg bg-primary/10',
+              title: 'text-sm tracking-tight',
+              description: 'text-sm leading-relaxed text-dimmed'
+            }"
+          />
+        </div>
+      </div>
+    </UPageSection>
+
+    <!-- Metrics -->
+    <UPageSection
+      headline="By the numbers"
+      title="Built for scale you haven't hit yet."
+      description="Process billions of events per day across thousands of production environments."
+      :ui="{
+        root: 'py-16 sm:py-24',
+        headline: 'font-mono font-medium text-xs text-primary uppercase tracking-widest',
+        description: 'text-dimmed'
+      }"
+    >
+      <div class="rounded-2xl border border-default bg-default overflow-hidden">
+        <div class="grid grid-cols-2 xl:grid-cols-4 gap-px">
+          <UPageCard
+            v-for="metric in metrics"
+            :key="metric.label"
+            :title="metric.value"
+            :description="metric.label"
+            class="rounded-none"
+            :ui="{
+              root: 'text-center',
+              wrapper: 'items-center',
+              title: ['text-3xl sm:text-4xl font-bold tracking-tight leading-none', metric.class],
+              description: 'font-mono text-xs uppercase tracking-wide text-dimmed mt-3'
+            }"
+          />
+        </div>
+      </div>
+    </UPageSection>
+
+    <!-- FAQ -->
+    <UPageSection
+      headline="FAQ"
+      title="Questions, answered."
+      description="Everything you need to know before your first deploy."
+      :ui="{
+        root: 'py-16 sm:py-24',
+        container: 'max-w-3xl',
+        headline: 'font-mono font-medium text-xs text-primary uppercase tracking-widest',
+        description: 'text-dimmed'
+      }"
+    >
+      <UAccordion
+        :items="faqItems"
+        default-value="0"
+        :unmount-on-hide="false"
+        :ui="{
+          trigger: 'text-base text-highlighted',
+          body: 'text-muted leading-relaxed'
+        }"
+      />
+    </UPageSection>
+
+    <!-- CTA -->
+    <UPageCTA
+      variant="naked"
+      title="Ready to stop firefighting?"
+      description="Free for up to 5 services. No credit card. Deploys in under a minute."
+      :ui="{
+        root: 'py-16 sm:py-24',
+        container: 'max-w-3xl',
+        title: 'tracking-tighter',
+        description: 'text-dimmed'
+      }"
+    >
+      <template #links>
+        <div class="flex flex-col items-center gap-4">
+          <UButton label="Start for free" size="xl" />
+
+          <UButton
+            label="npx telemetry init"
+            trailing-icon="i-lucide-copy"
+            color="neutral"
+            variant="subtle"
+            size="xl"
+            class="font-mono font-light text-toned"
+          />
+        </div>
+      </template>
+    </UPageCTA>
+
+    <!-- Footer -->
+    <UFooter :ui="{ container: 'border-t border-default', right: 'gap-x-0 flex-wrap justify-end' }">
+      <template #left>
+        <p class="text-sm text-dimmed">
+          Built with Nuxt UI • © 2026
+        </p>
+      </template>
+
+      <template #right>
+        <UButton
+          v-for="link in footerLinks"
+          :key="link"
+          :label="link"
+          color="neutral"
+          variant="link"
+          size="sm"
+          class="font-light"
+        />
+      </template>
+    </UFooter>
+  </div>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewSaas.vue b/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
new file mode 100644
index 0000000000..3306717f5f
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
@@ -0,0 +1,297 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const navItems: NavigationMenuItem[] = [
+  { label: 'Docs', active: true },
+  { label: 'Pricing' },
+  { label: 'Blog' },
+  { label: 'Changelog' }
+]
+
+const heroLinks = [{
+  label: 'Get started',
+  trailingIcon: 'i-lucide-arrow-right'
+}, {
+  label: 'Use this template',
+  icon: 'i-lucide-github',
+  color: 'neutral' as const,
+  variant: 'subtle' as const
+}]
+
+const sections = [{
+  title: 'Powered by Nuxt UI components',
+  description: 'Access a complete component library with beautifully styled, accessible and customizable Vue components. Everything you need to build professional SaaS applications.',
+  reverse: false,
+  features: [{
+    title: '100+ UI components',
+    description: 'From buttons to modals, data tables to forms - all styled with Tailwind CSS and accessible out of the box.',
+    icon: 'i-lucide-package'
+  }, {
+    title: 'Authentication ready',
+    description: 'Pre-built login, signup and password reset flows. Just connect your backend and start onboarding users.',
+    icon: 'i-lucide-shield'
+  }, {
+    title: 'TypeScript first',
+    description: 'Full TypeScript support with auto-completion, type safety and IntelliSense for every component.',
+    icon: 'i-lucide-code-xml'
+  }]
+}, {
+  title: 'Built for modern SaaS',
+  description: 'Everything you need to launch and scale. From beautiful marketing pages to complex dashboards, ship faster with production-ready patterns.',
+  reverse: true,
+  features: [{
+    title: 'Edge performance',
+    description: 'Optimized for Core Web Vitals with automatic code splitting, lazy loading and SSR/SSG support.',
+    icon: 'i-lucide-zap'
+  }, {
+    title: 'Dark mode ready',
+    description: 'Automatic theme switching with smooth transitions. Respects system preferences and remembers user choice.',
+    icon: 'i-lucide-moon'
+  }, {
+    title: 'Global ready',
+    description: 'Built-in i18n support for 50+ languages with RTL/LTR layouts and font optimization.',
+    icon: 'i-lucide-globe'
+  }]
+}]
+
+const features = [{
+  title: 'Beautiful design system',
+  description: 'Semantic color aliases, comprehensive design tokens and Tailwind Variants for consistent styling.',
+  icon: 'i-lucide-palette'
+}, {
+  title: 'Accessible by default',
+  description: 'Built on Reka UI for robust accessibility. WCAG compliant components that work for everyone.',
+  icon: 'i-lucide-accessibility'
+}, {
+  title: 'Developer experience',
+  description: 'Auto-imports, hot module replacement and comprehensive documentation. Build faster with less friction.',
+  icon: 'i-lucide-terminal'
+}, {
+  title: 'SEO optimized',
+  description: 'Server-side rendering, automatic meta tags, sitemap generation and Open Graph images out of the box.',
+  icon: 'i-lucide-search'
+}, {
+  title: 'Production ready',
+  description: 'Error handling, loading states, form validation and security best practices built into every component.',
+  icon: 'i-lucide-circle-check'
+}, {
+  title: 'Infinitely customizable',
+  description: 'Override any style with the ui prop, customize globally with AppConfig, or use Tailwind classes directly.',
+  icon: 'i-lucide-settings'
+}]
+
+const plans = [{
+  title: 'Basic',
+  description: 'A basic plan for individuals.',
+  price: '$9',
+  features: ['1 GB storage', '1 email account', '1 domain', 'Community support'],
+  button: { label: 'Get started', color: 'neutral' as const, variant: 'subtle' as const }
+}, {
+  title: 'Standard',
+  description: 'A standard plan for small teams.',
+  price: '$19',
+  highlight: true,
+  badge: 'Most popular',
+  features: ['10 GB storage', '10 email accounts', '10 domains', 'Priority support'],
+  button: { label: 'Get started' }
+}, {
+  title: 'Premium',
+  description: 'A premium plan for large teams.',
+  price: '$29',
+  features: ['100 GB storage', '100 email accounts', '100 domains', 'Dedicated support'],
+  button: { label: 'Get started', color: 'neutral' as const, variant: 'subtle' as const }
+}]
+
+const testimonials = [{
+  quote: 'Nuxt UI transformed how we build. The component quality is exceptional - everything just works with perfect TypeScript support, accessibility and dark mode built in.',
+  user: { name: 'Sarah Chen', description: 'CTO at TechScale' }
+}, {
+  quote: 'We shipped our MVP in 2 weeks instead of 2 months. The authentication flows and form components saved us countless hours of development time.',
+  user: { name: 'Marcus Rodriguez', description: 'VP of Engineering at DataFlow' }
+}, {
+  quote: 'The design system with AppConfig is brilliant. We maintain brand consistency across all our products while leveraging the full component library.',
+  user: { name: 'David Kumar', description: 'Security Director at SecureStack' }
+}, {
+  quote: 'Perfect Lighthouse scores out of the box. Our Core Web Vitals improved dramatically just by switching to Nuxt UI components.',
+  user: { name: 'Emily Zhang', description: 'Lead Architect at ScaleForce' }
+}]
+
+const ctaLinks = [{
+  label: 'Start building',
+  trailingIcon: 'i-lucide-arrow-right'
+}, {
+  label: 'View on GitHub',
+  icon: 'i-lucide-github',
+  variant: 'subtle' as const
+}]
+
+const footerColumns = [{
+  label: 'Resources',
+  children: [
+    { label: 'Help center' },
+    { label: 'Docs' },
+    { label: 'Roadmap' },
+    { label: 'Changelog' }
+  ]
+}, {
+  label: 'Features',
+  children: [
+    { label: 'Affiliates' },
+    { label: 'Portal' },
+    { label: 'Jobs' },
+    { label: 'Sponsors' }
+  ]
+}, {
+  label: 'Company',
+  children: [
+    { label: 'About' },
+    { label: 'Pricing' },
+    { label: 'Careers' },
+    { label: 'Blog' }
+  ]
+}]
+
+const email = ref('')
+</script>
+
+<template>
+  <!-- A mini landing page: the pane is the scroll container, so the header sticks to it. -->
+  <div class="h-full overflow-y-auto bg-default">
+    <UHeader :toggle="false">
+      <template #left>
+        <div class="flex items-center gap-1.5">
+          <UIcon name="i-lucide-rocket" class="size-6 text-primary shrink-0" />
+          <span class="text-xl font-bold text-highlighted">SaaS</span>
+        </div>
+      </template>
+
+      <UNavigationMenu :items="navItems" variant="link" />
+
+      <template #right>
+        <UButton label="Sign in" color="neutral" variant="outline" class="hidden lg:inline-flex" />
+        <UButton label="Sign up" color="neutral" trailing-icon="i-lucide-arrow-right" />
+      </template>
+    </UHeader>
+
+    <UPageHero
+      description="Build production-ready SaaS applications with powerful components, authentication flows and enterprise features."
+      :links="heroLinks"
+    >
+      <template #headline>
+        <UBadge variant="subtle" icon="i-lucide-sparkles">
+          Nuxt UI v4 is out
+        </UBadge>
+      </template>
+
+      <template #title>
+        Ship your <span class="text-primary">SaaS</span> at light speed
+      </template>
+    </UPageHero>
+
+    <UPageSection
+      v-for="(section, index) in sections"
+      :key="index"
+      :title="section.title"
+      :description="section.description"
+      orientation="horizontal"
+      :reverse="section.reverse"
+      :features="section.features"
+    >
+      <div class="aspect-video w-full rounded-lg bg-elevated/50 ring ring-default flex items-center justify-center">
+        <UIcon name="i-lucide-image" class="size-8 text-dimmed" />
+      </div>
+    </UPageSection>
+
+    <UPageSection
+      title="Everything you need to ship"
+      description="Stop building from scratch. Focus on your unique features while Nuxt UI handles the foundations with battle-tested components and patterns."
+    >
+      <UPageGrid>
+        <UPageCard
+          v-for="feature in features"
+          :key="feature.title"
+          v-bind="feature"
+          spotlight
+        />
+      </UPageGrid>
+    </UPageSection>
+
+    <UPageSection
+      title="A plan for every need"
+      description="Our plans are designed to meet the requirements of both individuals and teams. Get the right plan that suits you."
+    >
+      <UPricingPlans>
+        <UPricingPlan
+          v-for="plan in plans"
+          :key="plan.title"
+          v-bind="plan"
+          billing-cycle="/month"
+        />
+      </UPricingPlans>
+    </UPageSection>
+
+    <UPageSection
+      headline="Trusted by developers"
+      title="Join thousands building with Nuxt UI"
+      description="See why developers choose Nuxt UI to ship their SaaS applications faster and with more confidence."
+    >
+      <UPageColumns class="lg:columns-2">
+        <UPageCard
+          v-for="testimonial in testimonials"
+          :key="testimonial.user.name"
+          variant="subtle"
+          :description="testimonial.quote"
+          :ui="{ description: 'before:content-[open-quote] after:content-[close-quote]' }"
+        >
+          <template #footer>
+            <UUser
+              v-bind="testimonial.user"
+              :avatar="{ alt: testimonial.user.name }"
+              size="lg"
+            />
+          </template>
+        </UPageCard>
+      </UPageColumns>
+    </UPageSection>
+
+    <USeparator />
+
+    <UPageCTA
+      title="Ready to build an amazing SaaS?"
+      description="Join thousands of developers building with Nuxt and Nuxt UI. Get this template and start shipping today."
+      :links="ctaLinks"
+      variant="naked"
+    />
+
+    <USeparator icon="i-lucide-rocket" class="h-px" />
+
+    <UFooter :ui="{ top: 'border-b border-default' }">
+      <template #top>
+        <UContainer>
+          <UFooterColumns :columns="footerColumns">
+            <template #right>
+              <UFormField name="email" label="Subscribe to our newsletter" size="lg">
+                <UInput v-model="email" type="email" placeholder="Enter your email" class="w-full">
+                  <template #trailing>
+                    <UButton size="xs" color="neutral" label="Subscribe" />
+                  </template>
+                </UInput>
+              </UFormField>
+            </template>
+          </UFooterColumns>
+        </UContainer>
+      </template>
+
+      <template #left>
+        <p class="text-muted text-sm">
+          Built with Nuxt UI • © 2026
+        </p>
+      </template>
+
+      <template #right>
+        <UButton icon="i-lucide-github" aria-label="GitHub" color="neutral" variant="ghost" />
+        <UButton icon="i-lucide-twitter" aria-label="X" color="neutral" variant="ghost" />
+      </template>
+    </UFooter>
+  </div>
+</template>
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index d50e305647..cf789f592b 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -28,7 +28,9 @@ const view = ref('grid')
 const viewTabs = [
   { label: 'Grid', icon: 'i-lucide-layout-grid', value: 'grid' },
   { label: 'Dashboard', icon: 'i-lucide-layout-dashboard', value: 'dashboard' },
-  { label: 'Chat', icon: 'i-lucide-message-circle', value: 'chat' }
+  { label: 'Chat', icon: 'i-lucide-message-circle', value: 'chat' },
+  { label: 'SaaS', icon: 'i-lucide-rocket', value: 'saas' },
+  { label: 'Landing', icon: 'i-lucide-panels-top-left', value: 'landing' }
 ]
 </script>
 
@@ -96,6 +98,8 @@ const viewTabs = [
         <ThemeStudioBento v-if="view === 'grid'" />
         <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
         <ThemeStudioViewChat v-else-if="view === 'chat'" />
+        <ThemeStudioViewSaas v-else-if="view === 'saas'" />
+        <ThemeStudioViewLanding v-else-if="view === 'landing'" />
       </div>
     </div>
   </main>

From 2f72b5793c13aaa9cf58adea92bb552e4d925b36 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 01:00:20 +0200
Subject: [PATCH 040/185] =?UTF-8?q?fix(docs):=20audit=20fixes=20=E2=80=94?=
 =?UTF-8?q?=20input-family=20and=20overlay=20treatment=20coverage,=20neutr?=
 =?UTF-8?q?al=20remaps=20on=20every=20path,=20style=20always=20exports?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/composables/useTheme.ts       |   9 +-
 docs/app/composables/useThemeStudio.ts |  17 ++-
 docs/app/utils/theme-engine/styles.ts  | 142 ++++++++++++++++++++-----
 test/utils/theme-engine.spec.ts        |  38 +++++++
 4 files changed, 172 insertions(+), 34 deletions(-)

diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 548c0ea7f1..53ec70d765 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -333,10 +333,11 @@ export function useTheme() {
       doc.components = extras.ui
     }
 
-    // The studio's shadow/border prefs — generateCSS needs style.shadow to
-    // emit the --ui-shadow-color definitions the component classes reference.
-    const style = readLocalStorage<{ shadow?: string, border?: string }>('nuxt-ui-style', {})
-    if (style.shadow || style.border) {
+    // The studio's style prefs. ANY set axis must ride along — a defaults-only
+    // or borderColor-only theme still needs its component expansion and the
+    // classes that reference --ui-frame-color in the export.
+    const style = readLocalStorage<Record<string, unknown>>('nuxt-ui-style', {})
+    if (Object.values(style).some(value => value && value !== 'none' && value !== 'default')) {
       doc.style = style as ThemeDoc['style']
     }
 
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 3cea2c83d0..4592ebfecd 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -134,6 +134,10 @@ export function useThemeStudio() {
       theme.primary.value = name
     } else if (alias === 'neutral') {
       theme.neutral.value = name
+      // Stock neutrals need the white-literal remaps too — without them the
+      // preview (docs baseline: neutral-50 bg) diverges from the export
+      // (library baseline: white bg) for every tinted ramp.
+      theme.applyThemeSettings({ cssVariables: unownedNeutralRemaps() }, { track: false })
     } else {
       theme.applyThemeSettings({ [alias]: name }, { track: false })
       activePreset.value = undefined
@@ -142,9 +146,12 @@ export function useThemeStudio() {
   }
 
   /**
-   * Light mode hardcodes `--ui-bg`/`--ui-text-inverted` to `white` (and dark
-   * `--ui-text-highlighted`), so a tinted neutral ramp would never reach the
-   * app background. A custom neutral re-routes them through the ramp.
+   * The library hardcodes five tokens to `white` (light `--ui-bg` and
+   * `--ui-text-inverted`; dark `--ui-text-highlighted`, `--ui-bg-inverted`
+   * and `--ui-border-inverted`), so a tinted neutral ramp would never reach
+   * them. Choosing a neutral re-routes all five through the ramp — which is
+   * also what makes the export reproduce the preview, since the docs
+   * baseline already shows neutral-50 as the page background.
    */
   const NEUTRAL_TOKEN_REMAPS = {
     light: {
@@ -152,7 +159,9 @@ export function useThemeStudio() {
       '--ui-text-inverted': 'var(--ui-color-neutral-50)'
     },
     dark: {
-      '--ui-text-highlighted': 'var(--ui-color-neutral-50)'
+      '--ui-text-highlighted': 'var(--ui-color-neutral-50)',
+      '--ui-bg-inverted': 'var(--ui-color-neutral-50)',
+      '--ui-border-inverted': 'var(--ui-color-neutral-50)'
     }
   }
 
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index afe8991222..86f948efa9 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -72,27 +72,31 @@ export interface StyleOptions {
   tokenShades?: Record<string, { light?: number, dark?: number }>
 }
 
+/** The whole input family shares input's variant vocabulary (they extend it via defu). */
+const FIELD_VARIANTS = ['outline', 'soft', 'subtle', 'ghost', 'none']
+const FIELD_COMPONENTS = ['input', 'select', 'textarea', 'selectMenu', 'inputMenu', 'inputNumber', 'inputTags', 'inputDate', 'inputTime', 'pinInput']
+
 /** Which components support which default variant values. */
 export const VARIANT_SUPPORT: Record<string, string[]> = {
   button: ['solid', 'outline', 'soft', 'subtle', 'ghost', 'link'],
   badge: ['solid', 'outline', 'soft', 'subtle'],
   alert: ['solid', 'outline', 'soft', 'subtle'],
   card: ['solid', 'outline', 'soft', 'subtle'],
+  empty: ['solid', 'outline', 'soft', 'subtle'],
   // form fields have no solid variant (theirs run outline → none) — an
   // unsupported value would silently unstyle them, so they keep their
   // default instead
-  input: ['outline', 'soft', 'subtle', 'ghost', 'none'],
-  select: ['outline', 'soft', 'subtle', 'ghost', 'none'],
-  textarea: ['outline', 'soft', 'subtle', 'ghost', 'none']
+  ...Object.fromEntries(FIELD_COMPONENTS.map(component => [component, FIELD_VARIANTS]))
 }
 
-export const SIZE_SUPPORT = ['button', 'badge', 'input', 'select', 'textarea']
+// inputRating is size-only (no variant axis); everything here spans xs–xl exactly.
+export const SIZE_SUPPORT = ['button', 'badge', ...FIELD_COMPONENTS, 'inputRating']
 
 /** Component groups behind the per-group default-variant selects. */
 export const VARIANT_GROUPS: Record<VariantGroup, string[]> = {
   buttons: ['button', 'badge'],
-  panels: ['card', 'alert'],
-  inputs: ['input', 'select', 'textarea']
+  panels: ['card', 'alert', 'empty'],
+  inputs: FIELD_COMPONENTS
 }
 
 export const SHADOW_GEOMETRY_DEFAULTS = { x: 3, y: 3, blur: 0, spread: 0 }
@@ -159,6 +163,14 @@ const FLAT_FIELD_VARIANTS = [
   { variant: 'none', class: 'shadow-none' }
 ]
 
+// Reusable shadow class strings (whole literals so tailwind's scanner sees
+// them). Hard scales mirror the originals: base for field-size surfaces,
+// ×1.5 for panels/overlays, ×0.66 for badge-size ones.
+const SOFT_LG = 'shadow-lg shadow-(color:--ui-shadow-final-soft)'
+const HARD_BASE = 'shadow-[var(--ui-shadow-offset-x)_var(--ui-shadow-offset-y)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]'
+const HARD_LG = 'shadow-[calc(var(--ui-shadow-offset-x)*1.5)_calc(var(--ui-shadow-offset-y)*1.5)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]'
+const HARD_SM = 'shadow-[calc(var(--ui-shadow-offset-x)*0.66)_calc(var(--ui-shadow-offset-y)*0.66)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]'
+
 const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
   none: {},
   soft: {
@@ -175,11 +187,27 @@ const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
       ]
     },
     card: { slots: { root: 'shadow-md shadow-(color:--ui-shadow-final-soft)' } },
+    empty: { slots: { root: 'shadow-md shadow-(color:--ui-shadow-final-soft)' } },
     input: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)' }, compoundVariants: FLAT_FIELD_VARIANTS },
-    select: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)' }, compoundVariants: FLAT_FIELD_VARIANTS },
+    select: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)', content: SOFT_LG }, compoundVariants: FLAT_FIELD_VARIANTS },
+    selectMenu: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)', content: SOFT_LG }, compoundVariants: FLAT_FIELD_VARIANTS },
+    inputMenu: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)', content: SOFT_LG }, compoundVariants: FLAT_FIELD_VARIANTS },
     textarea: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)' }, compoundVariants: FLAT_FIELD_VARIANTS },
     alert: { slots: { root: 'shadow-md shadow-(color:--ui-shadow-final-soft)' } },
-    badge: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)' } }
+    badge: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)' } },
+    // Overlay surfaces keep their stock shadow SIZE, recolored through the
+    // same variable so the shade/opacity options reach them too.
+    popover: { slots: { content: SOFT_LG } },
+    dropdownMenu: { slots: { content: SOFT_LG } },
+    contextMenu: { slots: { content: SOFT_LG } },
+    tooltip: { slots: { content: 'shadow-sm shadow-(color:--ui-shadow-final-soft)' } },
+    toast: { slots: { root: SOFT_LG } },
+    drawer: { slots: { content: SOFT_LG } },
+    // modal's surface classes live under the fullscreen:false variant — slot
+    // classes would lose the tailwind-merge, so this must be a compound.
+    modal: { compoundVariants: [{ fullscreen: false, class: { content: SOFT_LG } }] },
+    // slideover is edge-to-edge on mobile; only its sm+ panel casts a shadow.
+    slideover: { slots: { content: 'sm:shadow-lg shadow-(color:--ui-shadow-final-soft)' } }
   },
   hard: {
     button: {
@@ -195,12 +223,23 @@ const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
         { variant: 'link', class: 'shadow-none hover:translate-x-0 hover:translate-y-0 hover:shadow-none active:translate-x-0 active:translate-y-0' }
       ]
     },
-    card: { slots: { root: 'shadow-[calc(var(--ui-shadow-offset-x)*1.5)_calc(var(--ui-shadow-offset-y)*1.5)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' } },
-    input: { slots: { base: 'shadow-[var(--ui-shadow-offset-x)_var(--ui-shadow-offset-y)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' }, compoundVariants: FLAT_FIELD_VARIANTS },
-    select: { slots: { base: 'shadow-[var(--ui-shadow-offset-x)_var(--ui-shadow-offset-y)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' }, compoundVariants: FLAT_FIELD_VARIANTS },
-    textarea: { slots: { base: 'shadow-[var(--ui-shadow-offset-x)_var(--ui-shadow-offset-y)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' }, compoundVariants: FLAT_FIELD_VARIANTS },
-    alert: { slots: { root: 'shadow-[calc(var(--ui-shadow-offset-x)*1.5)_calc(var(--ui-shadow-offset-y)*1.5)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' } },
-    badge: { slots: { base: 'shadow-[calc(var(--ui-shadow-offset-x)*0.66)_calc(var(--ui-shadow-offset-y)*0.66)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' } }
+    card: { slots: { root: HARD_LG } },
+    empty: { slots: { root: HARD_LG } },
+    input: { slots: { base: HARD_BASE }, compoundVariants: FLAT_FIELD_VARIANTS },
+    select: { slots: { base: HARD_BASE, content: HARD_LG }, compoundVariants: FLAT_FIELD_VARIANTS },
+    selectMenu: { slots: { base: HARD_BASE, content: HARD_LG }, compoundVariants: FLAT_FIELD_VARIANTS },
+    inputMenu: { slots: { base: HARD_BASE, content: HARD_LG }, compoundVariants: FLAT_FIELD_VARIANTS },
+    textarea: { slots: { base: HARD_BASE }, compoundVariants: FLAT_FIELD_VARIANTS },
+    alert: { slots: { root: HARD_LG } },
+    badge: { slots: { base: HARD_SM } },
+    popover: { slots: { content: HARD_LG } },
+    dropdownMenu: { slots: { content: HARD_LG } },
+    contextMenu: { slots: { content: HARD_LG } },
+    tooltip: { slots: { content: HARD_SM } },
+    toast: { slots: { root: HARD_LG } },
+    drawer: { slots: { content: HARD_LG } },
+    modal: { compoundVariants: [{ fullscreen: false, class: { content: HARD_LG } }] },
+    slideover: { slots: { content: 'sm:shadow-[calc(var(--ui-shadow-offset-x)*1.5)_calc(var(--ui-shadow-offset-y)*1.5)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' } }
   }
 }
 
@@ -211,16 +250,44 @@ function widen(variants: string[], slot?: string): Array<Record<string, unknown>
 
 const FRAME = 'ring-2 ring-inset ring-(--ui-border-accented)'
 
+/**
+ * Surfaces whose ring lives at SLOT level (overlay content, toast, check
+ * controls) — width bumps ride slots there; both bold and frame apply them.
+ * modal is the exception (ring under the fullscreen:false variant) and
+ * slideover's panel ring is sm-scoped.
+ */
+const SLOT_RING_FRAGMENTS: Fragments = {
+  popover: { slots: { content: 'ring-2' } },
+  dropdownMenu: { slots: { content: 'ring-2' } },
+  contextMenu: { slots: { content: 'ring-2' } },
+  tooltip: { slots: { content: 'ring-2' } },
+  toast: { slots: { root: 'ring-2' } },
+  drawer: { slots: { content: 'ring-2' } },
+  modal: { compoundVariants: [{ fullscreen: false, class: { content: 'ring-2' } }] },
+  slideover: { slots: { content: 'sm:ring-2' } },
+  checkbox: { slots: { base: 'ring-2' } },
+  radioGroup: { slots: { base: 'ring-2' } }
+}
+
+/** The input family's trigger rings sit at variant level, like input's. */
+const FIELD_RING_FRAGMENTS: Fragments = Object.fromEntries(
+  FIELD_COMPONENTS.map(component => [component, { compoundVariants: widen(['outline', 'subtle']) }])
+)
+
 const BORDER_FRAGMENTS: Record<BorderStyle, Fragments> = {
   default: {},
   bold: {
     card: { compoundVariants: widen(['outline', 'subtle'], 'root') },
-    input: { compoundVariants: widen(['outline', 'subtle']) },
-    select: { compoundVariants: widen(['outline', 'subtle']) },
-    textarea: { compoundVariants: widen(['outline', 'subtle']) },
+    empty: { compoundVariants: widen(['outline', 'subtle'], 'root') },
     alert: { compoundVariants: widen(['outline', 'subtle'], 'root') },
     button: { compoundVariants: widen(['outline', 'subtle']) },
-    badge: { compoundVariants: widen(['outline', 'subtle']) }
+    badge: { compoundVariants: widen(['outline', 'subtle']) },
+    ...FIELD_RING_FRAGMENTS,
+    ...SLOT_RING_FRAGMENTS,
+    // menu-bearing fields widen trigger AND dropdown surface
+    select: { slots: { content: 'ring-2' }, compoundVariants: widen(['outline', 'subtle']) },
+    selectMenu: { slots: { content: 'ring-2' }, compoundVariants: widen(['outline', 'subtle']) },
+    inputMenu: { slots: { content: 'ring-2' }, compoundVariants: widen(['outline', 'subtle']) }
   },
   frame: {
     card: {
@@ -230,9 +297,13 @@ const BORDER_FRAGMENTS: Record<BorderStyle, Fragments> = {
         { variant: 'soft', class: { root: 'ring-2 ring-(--ui-border-accented)' } }
       ]
     },
-    input: { compoundVariants: widen(['outline', 'subtle']) },
-    select: { compoundVariants: widen(['outline', 'subtle']) },
-    textarea: { compoundVariants: widen(['outline', 'subtle']) },
+    empty: {
+      compoundVariants: [
+        ...widen(['outline', 'subtle'], 'root'),
+        { variant: 'solid', class: { root: 'ring-2 ring-(--ui-border-accented)' } },
+        { variant: 'soft', class: { root: 'ring-2 ring-(--ui-border-accented)' } }
+      ]
+    },
     alert: {
       compoundVariants: [
         ...widen(['outline', 'subtle'], 'root'),
@@ -253,7 +324,12 @@ const BORDER_FRAGMENTS: Record<BorderStyle, Fragments> = {
         { variant: 'solid', class: FRAME },
         { variant: 'soft', class: FRAME }
       ]
-    }
+    },
+    ...FIELD_RING_FRAGMENTS,
+    ...SLOT_RING_FRAGMENTS,
+    select: { slots: { content: 'ring-2' }, compoundVariants: widen(['outline', 'subtle']) },
+    selectMenu: { slots: { content: 'ring-2' }, compoundVariants: widen(['outline', 'subtle']) },
+    inputMenu: { slots: { content: 'ring-2' }, compoundVariants: widen(['outline', 'subtle']) }
   }
 }
 
@@ -279,9 +355,11 @@ const UNSIGNALED_COLORS = ['primary', 'neutral']
 const FRAME_COLOR_FRAGMENTS: Fragments = {
   // cards have no color variants; field rings are neutral for every color
   card: { compoundVariants: recolor(['outline', 'subtle', 'solid', 'soft'], 'root') },
-  input: { compoundVariants: recolor(['outline', 'subtle']) },
-  select: { compoundVariants: recolor(['outline', 'subtle']) },
-  textarea: { compoundVariants: recolor(['outline', 'subtle']) },
+  empty: { compoundVariants: recolor(['outline', 'subtle', 'solid', 'soft'], 'root') },
+  ...Object.fromEntries(FIELD_COMPONENTS.map(component => [component, { compoundVariants: recolor(['outline', 'subtle']) }])),
+  select: { slots: { content: 'ring-(--ui-frame-color)' }, compoundVariants: recolor(['outline', 'subtle']) },
+  selectMenu: { slots: { content: 'ring-(--ui-frame-color)' }, compoundVariants: recolor(['outline', 'subtle']) },
+  inputMenu: { slots: { content: 'ring-(--ui-frame-color)' }, compoundVariants: recolor(['outline', 'subtle']) },
   alert: {
     compoundVariants: [
       ...recolor(['outline', 'subtle'], 'root', UNSIGNALED_COLORS),
@@ -299,7 +377,19 @@ const FRAME_COLOR_FRAGMENTS: Fragments = {
       ...recolor(['outline', 'subtle'], undefined, UNSIGNALED_COLORS),
       ...recolor(['solid', 'soft'])
     ]
-  }
+  },
+  // slot-level rings recolor via slots; color utilities are inert without a
+  // ring width, so slideover's needs no sm: prefix
+  popover: { slots: { content: 'ring-(--ui-frame-color)' } },
+  dropdownMenu: { slots: { content: 'ring-(--ui-frame-color)' } },
+  contextMenu: { slots: { content: 'ring-(--ui-frame-color)' } },
+  tooltip: { slots: { content: 'ring-(--ui-frame-color)' } },
+  toast: { slots: { root: 'ring-(--ui-frame-color)' } },
+  drawer: { slots: { content: 'ring-(--ui-frame-color)' } },
+  modal: { compoundVariants: [{ fullscreen: false, class: { content: 'ring-(--ui-frame-color)' } }] },
+  slideover: { slots: { content: 'ring-(--ui-frame-color)' } },
+  checkbox: { slots: { base: 'ring-(--ui-frame-color)' } },
+  radioGroup: { slots: { base: 'ring-(--ui-frame-color)' } }
 }
 
 /** Per-mode values behind the two color variables, per palette choice. */
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index f0b4c24bf1..5fb7eb09d3 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -354,6 +354,44 @@ describe('style colors', () => {
     expect(components.textarea!.compoundVariants).toContainEqual({ variant: 'none', class: 'shadow-none' })
   })
 
+  it('treatments reach overlay surfaces with the right placement', async () => {
+    const { styleComponents } = await import('../../docs/app/utils/theme-engine')
+
+    const soft = styleComponents({ shadow: 'soft' })
+    expect(soft.popover!.slots!.content).toBe('shadow-lg shadow-(color:--ui-shadow-final-soft)')
+    expect(soft.toast!.slots!.root).toContain('--ui-shadow-final-soft')
+    // modal's surface lives under the fullscreen variant — never slot classes
+    expect(soft.modal!.slots).toBeUndefined()
+    expect(soft.modal!.compoundVariants![0]).toMatchObject({ fullscreen: false })
+    // slideover is edge-to-edge on mobile — the shadow is sm-scoped
+    expect(soft.slideover!.slots!.content).toMatch(/^sm:shadow-lg /)
+
+    const bold = styleComponents({ border: 'bold' })
+    expect(bold.dropdownMenu!.slots!.content).toBe('ring-2')
+    expect(bold.selectMenu!.slots!.content).toBe('ring-2')
+    expect(bold.selectMenu!.compoundVariants).toContainEqual({ variant: 'outline', class: 'ring-2' })
+    expect(bold.checkbox!.slots!.base).toBe('ring-2')
+
+    const colored = styleComponents({ borderColor: 'inverted' })
+    expect(colored.tooltip!.slots!.content).toBe('ring-(--ui-frame-color)')
+    expect(colored.modal!.compoundVariants![0]).toEqual({ fullscreen: false, class: { content: 'ring-(--ui-frame-color)' } })
+  })
+
+  it('the whole input family follows the inputs group', async () => {
+    const { styleComponents } = await import('../../docs/app/utils/theme-engine')
+    const components = styleComponents({ defaults: { variants: { inputs: 'subtle' }, size: 'lg' } })
+
+    for (const component of ['input', 'select', 'textarea', 'selectMenu', 'inputMenu', 'inputNumber', 'inputTags', 'inputDate', 'inputTime', 'pinInput']) {
+      expect(components[component]!.defaultVariants!.variant, component).toBe('subtle')
+      expect(components[component]!.defaultVariants!.size, component).toBe('lg')
+    }
+    // size-only member gets size but never a variant
+    expect(components.inputRating!.defaultVariants).toEqual({ size: 'lg' })
+    // empty joins the panels group
+    const panels = styleComponents({ defaults: { variants: { panels: 'soft' } } })
+    expect(panels.empty!.defaultVariants).toEqual({ variant: 'soft' })
+  })
+
   it('border recoloring spares semantic outline rings but frames every solid', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
     const compounds = styleComponents({ border: 'frame', borderColor: 'primary' }).button!.compoundVariants!

From 0fe2768d51ad24d4320aa32d246643366e6e47f0 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 01:08:54 +0200
Subject: [PATCH 041/185] feat(docs): section the palette pickers into Colors
 and Neutrals

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 114 +++++++++++-------
 1 file changed, 73 insertions(+), 41 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index eb07bb0183..7cc2fbc2b8 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -50,10 +50,17 @@ const openSections = reactive<Record<string, boolean>>({
   ...Object.fromEntries(TOKEN_GROUPS.map((group, index) => [`tokens-${group.key}`, index === 0]))
 })
 
-// Every ramp is a suggestion for either role: colorful ones lead the
-// primary picker, neutrals lead the background picker.
-const primaryPickerColors = [...primaryColors, ...neutralColors]
-const backgroundPickerColors = [...neutralColors, ...primaryColors]
+// Every ramp is a suggestion for either role, sectioned so the list stays
+// scannable: colorful ramps lead the primary/semantic pickers, neutrals
+// lead the background picker.
+const colorSections = [
+  { label: 'Colors', colors: primaryColors },
+  { label: 'Neutrals', colors: neutralColors }
+]
+const backgroundSections = [
+  { label: 'Neutrals', colors: neutralColors },
+  { label: 'Colors', colors: primaryColors }
+]
 
 const semanticAliases: ColorAlias[] = ['secondary', 'success', 'info', 'warning', 'error']
 
@@ -372,25 +379,34 @@ const shadowColor = computed({
                   </UButton>
 
                   <template #content>
-                    <div class="grid grid-cols-3 gap-1 w-72 p-2">
-                      <ThemePickerButton
-                        label="Black"
-                        :selected="blackAsPrimary"
-                        @click="setBlackAsPrimary(true)"
-                      >
-                        <template #leading>
-                          <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
-                        </template>
-                      </ThemePickerButton>
-
-                      <ThemePickerButton
-                        v-for="color in primaryPickerColors"
-                        :key="color"
-                        :label="color"
-                        :chip="paletteChip(color)"
-                        :selected="!blackAsPrimary && primary === color"
-                        @click="selectPalette('primary', color)"
-                      />
+                    <div class="flex flex-col gap-2 w-72 p-2">
+                      <div v-for="(section, index) in colorSections" :key="section.label">
+                        <p class="text-[11px] font-semibold text-muted px-1 mb-1 select-none">
+                          {{ section.label }}
+                        </p>
+
+                        <div class="grid grid-cols-3 gap-1">
+                          <ThemePickerButton
+                            v-if="index === 0"
+                            label="Black"
+                            :selected="blackAsPrimary"
+                            @click="setBlackAsPrimary(true)"
+                          >
+                            <template #leading>
+                              <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
+                            </template>
+                          </ThemePickerButton>
+
+                          <ThemePickerButton
+                            v-for="color in section.colors"
+                            :key="color"
+                            :label="color"
+                            :chip="paletteChip(color)"
+                            :selected="!blackAsPrimary && primary === color"
+                            @click="selectPalette('primary', color)"
+                          />
+                        </div>
+                      </div>
                     </div>
                   </template>
                 </UPopover>
@@ -457,15 +473,23 @@ const shadowColor = computed({
                   </UButton>
 
                   <template #content>
-                    <div class="grid grid-cols-3 gap-1 w-72 p-2">
-                      <ThemePickerButton
-                        v-for="color in backgroundPickerColors"
-                        :key="color"
-                        :label="color"
-                        :chip="paletteChip(color)"
-                        :selected="neutral === color"
-                        @click="selectPalette('neutral', color)"
-                      />
+                    <div class="flex flex-col gap-2 w-72 p-2">
+                      <div v-for="section in backgroundSections" :key="section.label">
+                        <p class="text-[11px] font-semibold text-muted px-1 mb-1 select-none">
+                          {{ section.label }}
+                        </p>
+
+                        <div class="grid grid-cols-3 gap-1">
+                          <ThemePickerButton
+                            v-for="color in section.colors"
+                            :key="color"
+                            :label="color"
+                            :chip="paletteChip(color)"
+                            :selected="neutral === color"
+                            @click="selectPalette('neutral', color)"
+                          />
+                        </div>
+                      </div>
                     </div>
                   </template>
                 </UPopover>
@@ -536,15 +560,23 @@ const shadowColor = computed({
                       </UButton>
 
                       <template #content>
-                        <div class="grid grid-cols-3 gap-1 w-72 p-2">
-                          <ThemePickerButton
-                            v-for="color in primaryPickerColors"
-                            :key="color"
-                            :label="color"
-                            :chip="paletteChip(color)"
-                            :selected="aliasValues[alias] === color"
-                            @click="selectPalette(alias, color)"
-                          />
+                        <div class="flex flex-col gap-2 w-72 p-2">
+                          <div v-for="section in colorSections" :key="section.label">
+                            <p class="text-[11px] font-semibold text-muted px-1 mb-1 select-none">
+                              {{ section.label }}
+                            </p>
+
+                            <div class="grid grid-cols-3 gap-1">
+                              <ThemePickerButton
+                                v-for="color in section.colors"
+                                :key="color"
+                                :label="color"
+                                :chip="paletteChip(color)"
+                                :selected="aliasValues[alias] === color"
+                                @click="selectPalette(alias, color)"
+                              />
+                            </div>
+                          </div>
                         </div>
                       </template>
                     </UPopover>

From 7abd4dae96a12268247b7a5901a90bfa60d85b19 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 01:22:06 +0200
Subject: [PATCH 042/185] =?UTF-8?q?fix(docs):=20resolve=20the=20mode=20tab?=
 =?UTF-8?q?=20selection=20after=20mount=20=E2=80=94=20SSR=20can't=20know?=
 =?UTF-8?q?=20a=20system=20pref?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 7cc2fbc2b8..df05a0c1ec 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -191,10 +191,31 @@ function rampChip(ramp: TokenRamp): string {
   return name === 'neutral' ? 'old-neutral' : name
 }
 
-// No 'system' tab: the studio is about previewing a concrete mode, and the
-// resolved value still highlights the right tab for system-pref visitors.
+// No 'system' tab: the studio is about previewing a concrete mode. For
+// system-pref visitors the model can read 'system' before color-mode
+// resolves it — fall back to the scheme class the color-mode script has
+// already stamped on <html>, so a tab is always highlighted.
 const modeTabs = computed(() => modes.value.filter(m => m.label !== 'system').map(m => ({ label: m.label, icon: m.icon, value: m.label })))
 
+// Resolved AFTER mount on purpose: the server can't know a system-pref
+// visitor's scheme, and hydration adopts SSR attributes without patching —
+// a post-mount write is a real update, so the highlight always lands.
+const modeTab = ref<string | undefined>()
+
+onMounted(() => {
+  modeTab.value = mode.value === 'light' || mode.value === 'dark'
+    ? mode.value
+    : document.documentElement.classList.contains('dark') ? 'dark' : 'light'
+})
+
+watch(modeTab, (value) => {
+  if (value && value !== mode.value) mode.value = value
+})
+
+watch(mode, (value) => {
+  if (value === 'light' || value === 'dark') modeTab.value = value
+})
+
 // One curve editor per alias, toggled by the edit icon next to each select.
 const paletteEditors = reactive<Record<string, boolean>>({})
 
@@ -286,7 +307,7 @@ const shadowColor = computed({
 <template>
   <div class="flex flex-col gap-3">
     <UTabs
-      v-model="mode"
+      v-model="modeTab"
       :items="modeTabs"
       :content="false"
       size="xs"

From 25bf1004626d706830458981f468bd9cc8844ec6 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 01:22:06 +0200
Subject: [PATCH 043/185] feat(docs): resculpted Harbor preset and refreshed
 sand ramp

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/assets/css/main.css                  | 22 +++----
 .../app/utils/theme-engine/custom-palettes.ts | 22 +++----
 docs/app/utils/theme-engine/presets.ts        | 61 +++++++++++++++++--
 3 files changed, 78 insertions(+), 27 deletions(-)

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index 683de927c2..d79ed13061 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -8,17 +8,17 @@
 
   /* Studio extras: custom neutrals (sand, sage, ash) and primaries
      (cocoa, marine) beyond the stock tailwind palettes. */
-  --color-sand-50: oklch(98% 0.006 84.566);
-  --color-sand-100: oklch(95.3% 0.011 84.579);
-  --color-sand-200: oklch(90.5% 0.02 84.591);
-  --color-sand-300: oklch(83.9% 0.031 83.625);
-  --color-sand-400: oklch(73.7% 0.041 82.274);
-  --color-sand-500: oklch(64.3% 0.044 82.996);
-  --color-sand-600: oklch(55.2% 0.038 80.056);
-  --color-sand-700: oklch(47.4% 0.032 77.861);
-  --color-sand-800: oklch(40.7% 0.026 76.147);
-  --color-sand-900: oklch(36.1% 0.021 75.745);
-  --color-sand-950: oklch(25.1% 0.015 76.21);
+  --color-sand-50: oklch(98% 0.006 84.579);
+  --color-sand-100: oklch(92.7% 0.013 84.455);
+  --color-sand-200: oklch(85.6% 0.02 84.205);
+  --color-sand-300: oklch(75% 0.03 83.784);
+  --color-sand-400: oklch(62.5% 0.041 83.119);
+  --color-sand-500: oklch(52.6% 0.044 82.076);
+  --color-sand-600: oklch(45% 0.038 80.381);
+  --color-sand-700: oklch(38.8% 0.032 77.816);
+  --color-sand-800: oklch(33.4% 0.026 76.102);
+  --color-sand-900: oklch(28.5% 0.021 75.84);
+  --color-sand-950: oklch(24.1% 0.015 76.21);
 
   --color-sage-50: oklch(97.7% 0.004 134.849);
   --color-sage-100: oklch(95% 0.01 140.516);
diff --git a/docs/app/utils/theme-engine/custom-palettes.ts b/docs/app/utils/theme-engine/custom-palettes.ts
index 6e65325035..c73e428b52 100644
--- a/docs/app/utils/theme-engine/custom-palettes.ts
+++ b/docs/app/utils/theme-engine/custom-palettes.ts
@@ -7,17 +7,17 @@ import type { Shade } from './types'
  */
 export const CUSTOM_PALETTES: Record<string, Record<Shade, string>> = {
   sand: {
-    50: 'oklch(98% 0.006 84.566)',
-    100: 'oklch(95.3% 0.011 84.579)',
-    200: 'oklch(90.5% 0.02 84.591)',
-    300: 'oklch(83.9% 0.031 83.625)',
-    400: 'oklch(73.7% 0.041 82.274)',
-    500: 'oklch(64.3% 0.044 82.996)',
-    600: 'oklch(55.2% 0.038 80.056)',
-    700: 'oklch(47.4% 0.032 77.861)',
-    800: 'oklch(40.7% 0.026 76.147)',
-    900: 'oklch(36.1% 0.021 75.745)',
-    950: 'oklch(25.1% 0.015 76.21)'
+    50: 'oklch(98% 0.006 84.579)',
+    100: 'oklch(92.7% 0.013 84.455)',
+    200: 'oklch(85.6% 0.02 84.205)',
+    300: 'oklch(75% 0.03 83.784)',
+    400: 'oklch(62.5% 0.041 83.119)',
+    500: 'oklch(52.6% 0.044 82.076)',
+    600: 'oklch(45% 0.038 80.381)',
+    700: 'oklch(38.8% 0.032 77.816)',
+    800: 'oklch(33.4% 0.026 76.102)',
+    900: 'oklch(28.5% 0.021 75.84)',
+    950: 'oklch(24.1% 0.015 76.21)'
   },
   sage: {
     50: 'oklch(97.7% 0.004 134.849)',
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 82c8cb6940..dc7b305fc6 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -359,14 +359,44 @@ export const presets: ThemePreset[] = [{
 }, {
   id: 'harbor',
   name: 'Harbor',
-  description: 'Marine blue on cool ash, bold borders, navy-tinted shadows.',
+  description: 'Sculpted harbor blues — subtle panels, fine borders, misty shadows.',
   icon: 'i-lucide-anchor',
   doc: {
     version: 1,
     meta: { name: 'Harbor', base: 'harbor' },
+    // Deeper, moodier takes on marine/ash sculpted in the curve editor —
+    // the light end starts well below white, so both modes feel overcast.
     palettes: {
-      marine: { shades: CUSTOM_PALETTES.marine! },
-      ash: { shades: CUSTOM_PALETTES.ash! }
+      marine: {
+        shades: {
+          50: 'oklch(97.2% 0.014 250.593)',
+          100: 'oklch(93.4% 0.033 250.984)',
+          200: 'oklch(88% 0.06 251.557)',
+          300: 'oklch(78.9% 0.11 252.327)',
+          400: 'oklch(67% 0.151 253.303)',
+          500: 'oklch(57.6% 0.143 254.468)',
+          600: 'oklch(49.9% 0.123 255.734)',
+          700: 'oklch(43.3% 0.1 256.821)',
+          800: 'oklch(37.2% 0.078 257.093)',
+          900: 'oklch(31.7% 0.057 255.71)',
+          950: 'oklch(26.4% 0.036 252.434)'
+        }
+      },
+      ash: {
+        shades: {
+          50: 'oklch(94% 0.029 264.505)',
+          100: 'oklch(89.3% 0.044 264.423)',
+          200: 'oklch(83.9% 0.042 264.302)',
+          300: 'oklch(74% 0.042 264.139)',
+          400: 'oklch(61.7% 0.042 263.933)',
+          500: 'oklch(52.7% 0.037 263.683)',
+          600: 'oklch(44.8% 0.032 263.395)',
+          700: 'oklch(37.6% 0.026 263.083)',
+          800: 'oklch(30.7% 0.021 262.799)',
+          900: 'oklch(24.1% 0.017 262.757)',
+          950: 'oklch(17.7% 0.012 270.771)'
+        }
+      }
     },
     colors: {
       primary: 'marine',
@@ -374,11 +404,32 @@ export const presets: ThemePreset[] = [{
     },
     radius: 0.125,
     font: { sans: 'Inter' },
+    tokens: {
+      light: {
+        '--ui-bg': 'var(--ui-color-neutral-50)',
+        '--ui-text-inverted': 'var(--ui-color-neutral-50)'
+      },
+      dark: {
+        '--ui-text-highlighted': 'var(--ui-color-neutral-50)',
+        '--ui-bg-inverted': 'var(--ui-color-neutral-50)',
+        '--ui-border-inverted': 'var(--ui-color-neutral-50)'
+      }
+    },
     style: {
       shadow: 'soft',
-      shadowColor: 'primary-shade',
+      shadowColor: 'shade',
+      shadowShade: { light: 400, dark: 950 },
+      shadowOpacity: 40,
       border: 'bold',
-      tokenShades: { '--ui-primary': { dark: 300 } }
+      borderColor: 'shade',
+      borderShade: { light: 200, dark: 700 },
+      defaults: { variants: { panels: 'subtle' } },
+      tokenShades: {
+        '--ui-primary': { dark: 300 },
+        '--ui-success': { light: 600, dark: 600 },
+        '--ui-warning': { light: 700, dark: 700 },
+        '--ui-error': { light: 700, dark: 400 }
+      }
     }
   }
 }, {

From 741f565338fd30955f8241ae1a5ed83e8add0adc Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 01:30:31 +0200
Subject: [PATCH 044/185] =?UTF-8?q?feat(docs):=20rework=20border=20control?=
 =?UTF-8?q?s=20=E2=80=94=20Default/None/Custom=20with=20a=20width=20slider?=
 =?UTF-8?q?,=20frame=20retired?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      |  33 +++-
 docs/app/composables/useTheme.ts              |   8 +-
 docs/app/composables/useThemeStudio.ts        |   4 +-
 docs/app/utils/theme-engine/import.ts         |  23 ++-
 docs/app/utils/theme-engine/presets.ts        |   8 +-
 docs/app/utils/theme-engine/styles.ts         | 151 ++++++++----------
 docs/app/utils/theme-engine/types.ts          |   4 +-
 test/utils/theme-engine.spec.ts               |  28 +++-
 8 files changed, 145 insertions(+), 114 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index df05a0c1ec..c14b74eb86 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, SHADOW_GEOMETRY_DEFAULTS } from '../../utils/theme-engine'
+import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, BORDER_WIDTH_DEFAULT, SHADOW_GEOMETRY_DEFAULTS } from '../../utils/theme-engine'
 import type { VariantGroup, TokenRamp, ColorAlias } from '../../utils/theme-engine'
 
 const appConfig = useAppConfig()
@@ -91,7 +91,7 @@ const neutralSwatch = computed(() => {
 
 const shadowOptions = [
   { label: 'None', value: 'none' },
-  { label: 'Soft', value: 'soft' },
+  { label: 'Default', value: 'soft' },
   { label: 'Custom', value: 'hard' }
 ] as const
 
@@ -101,11 +101,22 @@ const shadowOpacity = computed({
 })
 
 const borderOptions = [
-  { label: 'Thin', value: 'default' },
-  { label: 'Bold', value: 'bold' },
-  { label: 'Frame', value: 'frame' }
+  { label: 'Default', value: 'default' },
+  { label: 'None', value: 'none' },
+  { label: 'Custom', value: 'custom' }
 ] as const
 
+// Legacy saved prefs may still hold bold/frame — both read as custom.
+const borderStyle = computed(() => {
+  const value = style.value.border || 'default'
+  return value === 'bold' || value === 'frame' ? 'custom' : value
+})
+
+const borderWidth = computed({
+  get: () => style.value.borderWidth ?? BORDER_WIDTH_DEFAULT,
+  set: (value: number) => setStyle({ borderWidth: value })
+})
+
 const borderColorItems = [
   { label: 'Default', value: 'default' },
   { label: 'Inverted', value: 'inverted' },
@@ -823,12 +834,20 @@ const shadowColor = computed({
                   :key="option.value"
                   :label="option.label"
                   class="justify-center px-0"
-                  :selected="(style.border || 'default') === option.value"
+                  :selected="borderStyle === option.value"
                   @click="setStyle({ border: option.value })"
                 />
               </div>
 
-              <div class="mt-1.5 flex flex-col gap-2">
+              <div v-if="borderStyle === 'custom'" class="mt-1.5 flex flex-col gap-2">
+                <div class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Width</span>
+
+                  <USlider v-model="borderWidth" :min="1" :max="4" :step="1" size="xs" />
+
+                  <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ borderWidth }}px</span>
+                </div>
+
                 <USelect
                   v-model="borderColor"
                   size="sm"
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 53ec70d765..6a151805fd 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -1,7 +1,7 @@
 import { defu } from 'defu'
 import { useLocalStorage } from '@vueuse/core'
 import { themeIcons, cssVariableDefaults } from '../utils/theme'
-import { generateCSS, generateConfig, mergeUi, DEFAULT_COLORS, THEME_DEFAULTS, LIBRARY_TOKEN_DEFAULTS, CUSTOM_PALETTES } from '../utils/theme-engine'
+import { generateCSS, generateConfig, mergeUi, isDefaultStyle, DEFAULT_COLORS, THEME_DEFAULTS, LIBRARY_TOKEN_DEFAULTS, CUSTOM_PALETTES } from '../utils/theme-engine'
 import type { ThemeDoc, ThemePalette } from '../utils/theme-engine'
 import { omit } from '#ui/utils'
 import colors from 'tailwindcss/colors'
@@ -336,9 +336,9 @@ export function useTheme() {
     // The studio's style prefs. ANY set axis must ride along — a defaults-only
     // or borderColor-only theme still needs its component expansion and the
     // classes that reference --ui-frame-color in the export.
-    const style = readLocalStorage<Record<string, unknown>>('nuxt-ui-style', {})
-    if (Object.values(style).some(value => value && value !== 'none' && value !== 'default')) {
-      doc.style = style as ThemeDoc['style']
+    const style = readLocalStorage<ThemeDoc['style']>('nuxt-ui-style', {})
+    if (!isDefaultStyle(style)) {
+      doc.style = style
     }
 
     return doc
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 4592ebfecd..84a6eb9b76 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -298,13 +298,13 @@ export function useThemeStudio() {
       // Weighted so most rolls stay clean, with the occasional loud one.
       style: {
         shadow: pick(['none', 'none', 'soft', 'hard'] as const),
-        border: pick(['default', 'default', 'bold', 'frame'] as const)
+        border: pick(['default', 'default', 'custom', 'none'] as const)
       }
     }
 
     // Colored borders/shadows and app-wide variants are the loud rolls —
     // sprinkle them in rarely enough that most shuffles stay tasteful.
-    if (doc.style!.border !== 'default' && Math.random() < 0.4) {
+    if (doc.style!.border === 'custom' && Math.random() < 0.4) {
       doc.style!.borderColor = pick(['inverted', 'primary', 'neutral'] as const)
     }
     if (doc.style!.shadow === 'hard' && Math.random() < 0.4) {
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index 9b951a2be3..adc76e44eb 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -6,6 +6,7 @@ import {
   FRAME_COLOR_VALUES,
   SHADOW_COLOR_VALUES,
   SHADOW_GEOMETRY_DEFAULTS,
+  BORDER_WIDTH_DEFAULT,
   VARIANT_GROUPS,
   VARIANT_SUPPORT,
   SIZE_SUPPORT
@@ -363,13 +364,18 @@ function extractDefaults(components: Record<string, any>): StyleOptions['default
 }
 
 /** Border treatment lives only in the class bundles — read it back from them. */
-function detectBorder(components: Record<string, any>): StyleOptions['border'] {
-  const compounds: Array<Record<string, unknown>> = Object.values(components).flatMap(component => component?.compoundVariants || [])
+function detectBorder(components: Record<string, any>): Pick<StyleOptions, 'border' | 'borderWidth'> {
   const classOf = (entry: Record<string, unknown>) => typeof entry.class === 'string' ? entry.class : Object.values(entry.class || {}).join(' ')
-  const widened = compounds.some(entry => classOf(entry).includes('ring-2'))
-  if (!widened) return undefined
-  const framed = compounds.some(entry => entry.variant === 'solid' && classOf(entry).includes('ring-2'))
-  return framed ? 'frame' : 'bold'
+  const texts = Object.values(components).flatMap(component => [
+    ...Object.values((component?.slots || {}) as Record<string, string>),
+    ...((component?.compoundVariants || []) as Array<Record<string, unknown>>).map(classOf)
+  ])
+
+  const widths = texts.flatMap(text => [...text.matchAll(/(?:^|\s)(?:sm:)?ring-(\d)(?:\s|$)/g)].map(match => Number(match[1])))
+  if (!widths.length) return {}
+  const width = widths[0]!
+  if (width === 0) return { border: 'none' }
+  return { border: 'custom', ...(width !== BORDER_WIDTH_DEFAULT ? { borderWidth: width } : {}) }
 }
 
 /** Shadow fallback when only a config was pasted (CSS normally decides). */
@@ -459,7 +465,10 @@ export function importTheme(input: { css?: string, config?: string }): ThemeImpo
   const style: StyleOptions = css ? extractStyle(css.light, css.dark) : {}
   style.shadow ||= detectShadow(components)
   const border = detectBorder(components)
-  if (border) style.border = border
+  if (border.border) {
+    style.border = border.border
+    if (border.borderWidth !== undefined) style.borderWidth = border.borderWidth
+  }
   const defaults = extractDefaults(components)
   if (defaults) style.defaults = defaults
 
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index dc7b305fc6..eeda8f7e9d 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -91,7 +91,7 @@ export const presets: ThemePreset[] = [{
     // hard offset shadows.
     style: {
       shadow: 'hard',
-      border: 'frame',
+      border: 'custom',
       borderColor: 'inverted'
     }
   }
@@ -122,7 +122,7 @@ export const presets: ThemePreset[] = [{
       }
     },
     style: {
-      border: 'bold',
+      border: 'custom',
       borderColor: 'primary'
     }
   }
@@ -206,7 +206,7 @@ export const presets: ThemePreset[] = [{
     style: {
       shadow: 'hard',
       shadowColor: 'black',
-      border: 'frame',
+      border: 'custom',
       borderColor: 'black'
     }
   }
@@ -420,7 +420,7 @@ export const presets: ThemePreset[] = [{
       shadowColor: 'shade',
       shadowShade: { light: 400, dark: 950 },
       shadowOpacity: 40,
-      border: 'bold',
+      border: 'custom',
       borderColor: 'shade',
       borderShade: { light: 200, dark: 700 },
       defaults: { variants: { panels: 'subtle' } },
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 86f948efa9..543da887ba 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -27,7 +27,8 @@
  */
 
 export type ShadowStyle = 'none' | 'soft' | 'hard'
-export type BorderStyle = 'default' | 'bold' | 'frame'
+/** 'bold'/'frame' are legacy values (old exports/saved state) treated as 'custom'. */
+export type BorderStyle = 'default' | 'none' | 'custom' | 'bold' | 'frame'
 export type BorderColor = 'default' | 'inverted' | 'black' | 'white' | 'primary' | 'neutral' | 'shade' | 'primary-shade'
 export type ShadowColor = 'default' | 'black' | 'inverted' | 'primary' | 'shade' | 'primary-shade'
 export type DefaultVariant = 'default' | 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'link' | 'none'
@@ -43,6 +44,8 @@ export interface StyleOptions {
   shadowShade?: { light: number, dark: number }
   /** Ramp shade per mode — neutral for 'shade', primary for 'primary-shade' */
   borderShade?: { light: number, dark: number }
+  /** Ring width in px (1–4) while `border` is 'custom'; 2 when unset. */
+  borderWidth?: number
   /**
    * Default variant/size, expanded into per-component `defaultVariants` —
    * the runtime override channel Nuxt UI already honors — only for
@@ -243,94 +246,60 @@ const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
   }
 }
 
-/** compound entries thickening the rings a variant already has */
-function widen(variants: string[], slot?: string): Array<Record<string, unknown>> {
-  return variants.map(variant => ({ variant, class: slot ? { [slot]: 'ring-2' } : 'ring-2' }))
-}
+export const BORDER_WIDTH_DEFAULT = 2
 
-const FRAME = 'ring-2 ring-inset ring-(--ui-border-accented)'
+/**
+ * Whole literal class strings per width so tailwind's scanner sees them —
+ * the slider swaps between these, never builds a class dynamically.
+ */
+const RING_WIDTH_CLASSES: Record<number, string> = { 0: 'ring-0', 1: 'ring-1', 2: 'ring-2', 3: 'ring-3', 4: 'ring-4' }
+const SM_RING_WIDTH_CLASSES: Record<number, string> = { 0: 'sm:ring-0', 1: 'sm:ring-1', 2: 'sm:ring-2', 3: 'sm:ring-3', 4: 'sm:ring-4' }
 
 /**
- * Surfaces whose ring lives at SLOT level (overlay content, toast, check
- * controls) — width bumps ride slots there; both bold and frame apply them.
- * modal is the exception (ring under the fullscreen:false variant) and
- * slideover's panel ring is sm-scoped.
+ * Apply one ring-width class across every ring-bearing surface: variant-level
+ * rings (outline/subtle on buttons/panels/fields) via compounds, slot-level
+ * rings (overlay content, toast, check controls) via slots. modal is the
+ * exception (ring under the fullscreen:false variant) and slideover's panel
+ * ring is sm-scoped.
  */
-const SLOT_RING_FRAGMENTS: Fragments = {
-  popover: { slots: { content: 'ring-2' } },
-  dropdownMenu: { slots: { content: 'ring-2' } },
-  contextMenu: { slots: { content: 'ring-2' } },
-  tooltip: { slots: { content: 'ring-2' } },
-  toast: { slots: { root: 'ring-2' } },
-  drawer: { slots: { content: 'ring-2' } },
-  modal: { compoundVariants: [{ fullscreen: false, class: { content: 'ring-2' } }] },
-  slideover: { slots: { content: 'sm:ring-2' } },
-  checkbox: { slots: { base: 'ring-2' } },
-  radioGroup: { slots: { base: 'ring-2' } }
+function ringFragments(width: number): Fragments {
+  const cls = RING_WIDTH_CLASSES[width] || RING_WIDTH_CLASSES[BORDER_WIDTH_DEFAULT]!
+  const compound = (variants: string[], slot?: string) =>
+    variants.map(variant => ({ variant, class: slot ? { [slot]: cls } : cls }))
+
+  return {
+    card: { compoundVariants: compound(['outline', 'subtle'], 'root') },
+    empty: { compoundVariants: compound(['outline', 'subtle'], 'root') },
+    alert: { compoundVariants: compound(['outline', 'subtle'], 'root') },
+    button: { compoundVariants: compound(['outline', 'subtle']) },
+    badge: { compoundVariants: compound(['outline', 'subtle']) },
+    ...Object.fromEntries(FIELD_COMPONENTS.map(component => [component, { compoundVariants: compound(['outline', 'subtle']) }])),
+    // menu-bearing fields treat trigger AND dropdown surface
+    select: { slots: { content: cls }, compoundVariants: compound(['outline', 'subtle']) },
+    selectMenu: { slots: { content: cls }, compoundVariants: compound(['outline', 'subtle']) },
+    inputMenu: { slots: { content: cls }, compoundVariants: compound(['outline', 'subtle']) },
+    popover: { slots: { content: cls } },
+    dropdownMenu: { slots: { content: cls } },
+    contextMenu: { slots: { content: cls } },
+    tooltip: { slots: { content: cls } },
+    toast: { slots: { root: cls } },
+    drawer: { slots: { content: cls } },
+    modal: { compoundVariants: [{ fullscreen: false, class: { content: cls } }] },
+    slideover: { slots: { content: SM_RING_WIDTH_CLASSES[width] || SM_RING_WIDTH_CLASSES[BORDER_WIDTH_DEFAULT]! } },
+    checkbox: { slots: { base: cls } },
+    radioGroup: { slots: { base: cls } }
+  }
 }
 
-/** The input family's trigger rings sit at variant level, like input's. */
-const FIELD_RING_FRAGMENTS: Fragments = Object.fromEntries(
-  FIELD_COMPONENTS.map(component => [component, { compoundVariants: widen(['outline', 'subtle']) }])
-)
-
-const BORDER_FRAGMENTS: Record<BorderStyle, Fragments> = {
-  default: {},
-  bold: {
-    card: { compoundVariants: widen(['outline', 'subtle'], 'root') },
-    empty: { compoundVariants: widen(['outline', 'subtle'], 'root') },
-    alert: { compoundVariants: widen(['outline', 'subtle'], 'root') },
-    button: { compoundVariants: widen(['outline', 'subtle']) },
-    badge: { compoundVariants: widen(['outline', 'subtle']) },
-    ...FIELD_RING_FRAGMENTS,
-    ...SLOT_RING_FRAGMENTS,
-    // menu-bearing fields widen trigger AND dropdown surface
-    select: { slots: { content: 'ring-2' }, compoundVariants: widen(['outline', 'subtle']) },
-    selectMenu: { slots: { content: 'ring-2' }, compoundVariants: widen(['outline', 'subtle']) },
-    inputMenu: { slots: { content: 'ring-2' }, compoundVariants: widen(['outline', 'subtle']) }
-  },
-  frame: {
-    card: {
-      compoundVariants: [
-        ...widen(['outline', 'subtle'], 'root'),
-        { variant: 'solid', class: { root: 'ring-2 ring-(--ui-border-accented)' } },
-        { variant: 'soft', class: { root: 'ring-2 ring-(--ui-border-accented)' } }
-      ]
-    },
-    empty: {
-      compoundVariants: [
-        ...widen(['outline', 'subtle'], 'root'),
-        { variant: 'solid', class: { root: 'ring-2 ring-(--ui-border-accented)' } },
-        { variant: 'soft', class: { root: 'ring-2 ring-(--ui-border-accented)' } }
-      ]
-    },
-    alert: {
-      compoundVariants: [
-        ...widen(['outline', 'subtle'], 'root'),
-        { variant: 'solid', class: { root: 'ring-2 ring-inset ring-(--ui-border-accented)' } },
-        { variant: 'soft', class: { root: 'ring-2 ring-inset ring-(--ui-border-accented)' } }
-      ]
-    },
-    button: {
-      compoundVariants: [
-        ...widen(['outline', 'subtle']),
-        { variant: 'solid', class: FRAME },
-        { variant: 'soft', class: FRAME }
-      ]
-    },
-    badge: {
-      compoundVariants: [
-        ...widen(['outline', 'subtle']),
-        { variant: 'solid', class: FRAME },
-        { variant: 'soft', class: FRAME }
-      ]
-    },
-    ...FIELD_RING_FRAGMENTS,
-    ...SLOT_RING_FRAGMENTS,
-    select: { slots: { content: 'ring-2' }, compoundVariants: widen(['outline', 'subtle']) },
-    selectMenu: { slots: { content: 'ring-2' }, compoundVariants: widen(['outline', 'subtle']) },
-    inputMenu: { slots: { content: 'ring-2' }, compoundVariants: widen(['outline', 'subtle']) }
-  }
+/**
+ * 'none' zeroes every ring, 'custom' sets the chosen width. Legacy
+ * 'bold'/'frame' (old exports and saved prefs) read as custom at the
+ * default width — the frame treatment's solid-surface outlines retired.
+ */
+function borderFragments(style: StyleOptions): Fragments {
+  if (!style.border || style.border === 'default') return {}
+  if (style.border === 'none') return ringFragments(0)
+  return ringFragments(style.borderWidth ?? BORDER_WIDTH_DEFAULT)
 }
 
 /**
@@ -508,7 +477,7 @@ export function styleComponents(style: StyleOptions): Fragments {
   const sources = [
     defaults,
     SHADOW_FRAGMENTS[style.shadow ?? 'none'],
-    BORDER_FRAGMENTS[style.border ?? 'default'],
+    borderFragments(style),
     style.borderColor && style.borderColor !== 'default' ? FRAME_COLOR_FRAGMENTS : {}
   ]
 
@@ -587,6 +556,18 @@ export function mergeUi(
 /** Every component key a style bundle may touch — cleared before re-applying. */
 export const STYLE_COMPONENT_KEYS = [...new Set([
   ...Object.values(SHADOW_FRAGMENTS).flatMap(fragments => Object.keys(fragments)),
-  ...Object.values(BORDER_FRAGMENTS).flatMap(fragments => Object.keys(fragments)),
+  ...Object.keys(ringFragments(BORDER_WIDTH_DEFAULT)),
   ...Object.keys(FRAME_COLOR_FRAGMENTS)
 ])]
+
+/**
+ * The style axes that mean "leave it alone": no shadow (or 'none'), border
+ * 'default', and nothing else set. Border 'none' is a REAL choice (strip
+ * every ring), so the generic value-check can't be reused for it.
+ */
+export function isDefaultStyle(style: StyleOptions = {}): boolean {
+  const { shadow, border, ...rest } = style
+  return (!shadow || shadow === 'none')
+    && (!border || border === 'default')
+    && !Object.values(rest).some(value => value && value !== 'default')
+}
diff --git a/docs/app/utils/theme-engine/types.ts b/docs/app/utils/theme-engine/types.ts
index ccc7dc4ebe..80f1a35f60 100644
--- a/docs/app/utils/theme-engine/types.ts
+++ b/docs/app/utils/theme-engine/types.ts
@@ -1,3 +1,5 @@
+import { isDefaultStyle } from './styles'
+
 export const SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
 
 export type Shade = typeof SHADES[number]
@@ -85,5 +87,5 @@ export function isDefaultTheme(doc: ThemeDoc): boolean {
   return !doc.palettes && !doc.colors && !doc.blackAsPrimary && !doc.tokens
     && doc.radius === undefined && doc.fontSize === undefined && doc.spacing === undefined
     && !doc.font?.sans && !doc.icons && !doc.components
-    && !Object.values(doc.style || {}).some(value => value && value !== 'none' && value !== 'default')
+    && isDefaultStyle(doc.style)
 }
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 5fb7eb09d3..47ead841f4 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -328,12 +328,32 @@ describe('styleComponents', () => {
 })
 
 describe('style colors', () => {
-  it('frame adds outlines to solid/soft but never ghost', async () => {
+  it('custom borders set the chosen ring width; none zeroes every ring', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
-    const components = styleComponents({ border: 'frame' })
 
-    expect(components.button!.compoundVariants).toContainEqual({ variant: 'solid', class: 'ring-2 ring-inset ring-(--ui-border-accented)' })
-    expect(JSON.stringify(components.button!.compoundVariants)).not.toContain('"ghost"')
+    const wide = styleComponents({ border: 'custom', borderWidth: 3 })
+    expect(wide.button!.compoundVariants).toContainEqual({ variant: 'outline', class: 'ring-3' })
+    expect(wide.popover!.slots!.content).toBe('ring-3')
+    expect(wide.slideover!.slots!.content).toBe('sm:ring-3')
+    // width only touches existing rings — never adds outlines to solids
+    expect(JSON.stringify(wide.button!.compoundVariants)).not.toContain('"solid"')
+    expect(JSON.stringify(wide.button!.compoundVariants)).not.toContain('"ghost"')
+
+    const none = styleComponents({ border: 'none' })
+    expect(none.card!.compoundVariants).toContainEqual({ variant: 'outline', class: { root: 'ring-0' } })
+    expect(none.dropdownMenu!.slots!.content).toBe('ring-0')
+
+    // legacy saved values keep working as custom at the default width
+    expect(styleComponents({ border: 'frame' }).button!.compoundVariants).toContainEqual({ variant: 'outline', class: 'ring-2' })
+    expect(styleComponents({ border: 'bold' }).input!.compoundVariants).toContainEqual({ variant: 'subtle', class: 'ring-2' })
+  })
+
+  it('border none counts as a real style choice', async () => {
+    const { isDefaultStyle } = await import('../../docs/app/utils/theme-engine')
+    expect(isDefaultStyle({})).toBe(true)
+    expect(isDefaultStyle({ shadow: 'none', border: 'default' })).toBe(true)
+    expect(isDefaultStyle({ border: 'none' })).toBe(false)
+    expect(isDefaultStyle({ border: 'custom' })).toBe(false)
   })
 
   it('soft shadows skip ghost/link buttons (hover-only for ghost) and surfaceless fields', async () => {

From fbf36f90a0345000b6531f5f2efaa64b8eef7b21 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 01:35:23 +0200
Subject: [PATCH 045/185] feat(docs): frame toggle under custom borders,
 matched option order, primary-tinted active states

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-picker/ThemePickerButton.vue        |  4 +-
 .../theme-studio/ThemeStudioControls.vue      | 16 ++++-
 docs/app/utils/theme-engine/import.ts         | 17 +++++-
 docs/app/utils/theme-engine/presets.ts        |  2 +
 docs/app/utils/theme-engine/styles.ts         | 58 +++++++++++++++++--
 test/utils/theme-engine.spec.ts               | 10 +++-
 6 files changed, 96 insertions(+), 11 deletions(-)

diff --git a/docs/app/components/theme-picker/ThemePickerButton.vue b/docs/app/components/theme-picker/ThemePickerButton.vue
index 8795cf891a..21f5f7e48d 100644
--- a/docs/app/components/theme-picker/ThemePickerButton.vue
+++ b/docs/app/components/theme-picker/ThemePickerButton.vue
@@ -18,8 +18,8 @@ const slots = defineSlots<{
     variant="outline"
     :icon="icon"
     :label="label"
-    class="capitalize ring-default rounded-sm text-[11px]"
-    :class="[selected ? 'bg-elevated' : 'hover:bg-elevated/50']"
+    class="capitalize rounded-sm text-[11px]"
+    :class="[selected ? 'ring-primary bg-primary/10 text-highlighted' : 'ring-default hover:bg-elevated/50']"
   >
     <template v-if="chip || !!slots.leading" #leading>
       <slot name="leading">
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index c14b74eb86..579ed2bc18 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -101,8 +101,8 @@ const shadowOpacity = computed({
 })
 
 const borderOptions = [
-  { label: 'Default', value: 'default' },
   { label: 'None', value: 'none' },
+  { label: 'Default', value: 'default' },
   { label: 'Custom', value: 'custom' }
 ] as const
 
@@ -117,6 +117,12 @@ const borderWidth = computed({
   set: (value: number) => setStyle({ borderWidth: value })
 })
 
+// Outline solid/soft surfaces too — the neobrutalist frame look.
+const frameSolids = computed({
+  get: () => !!style.value.frame || style.value.border === 'frame',
+  set: (value: boolean) => setStyle({ frame: value })
+})
+
 const borderColorItems = [
   { label: 'Default', value: 'default' },
   { label: 'Inverted', value: 'inverted' },
@@ -848,6 +854,14 @@ const shadowColor = computed({
                   <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ borderWidth }}px</span>
                 </div>
 
+                <div class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Frame</span>
+
+                  <UTooltip text="Outline solid surfaces too — the neobrutalist look">
+                    <USwitch v-model="frameSolids" size="sm" aria-label="Frame solid surfaces" />
+                  </UTooltip>
+                </div>
+
                 <USelect
                   v-model="borderColor"
                   size="sm"
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index adc76e44eb..634ad022c2 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -364,7 +364,7 @@ function extractDefaults(components: Record<string, any>): StyleOptions['default
 }
 
 /** Border treatment lives only in the class bundles — read it back from them. */
-function detectBorder(components: Record<string, any>): Pick<StyleOptions, 'border' | 'borderWidth'> {
+function detectBorder(components: Record<string, any>): Pick<StyleOptions, 'border' | 'borderWidth' | 'frame'> {
   const classOf = (entry: Record<string, unknown>) => typeof entry.class === 'string' ? entry.class : Object.values(entry.class || {}).join(' ')
   const texts = Object.values(components).flatMap(component => [
     ...Object.values((component?.slots || {}) as Record<string, string>),
@@ -375,7 +375,19 @@ function detectBorder(components: Record<string, any>): Pick<StyleOptions, 'bord
   if (!widths.length) return {}
   const width = widths[0]!
   if (width === 0) return { border: 'none' }
-  return { border: 'custom', ...(width !== BORDER_WIDTH_DEFAULT ? { borderWidth: width } : {}) }
+
+  // Frame outlines live on solid-variant compounds referencing the accented border
+  const framed = Object.values(components).some(component =>
+    ((component?.compoundVariants || []) as Array<Record<string, unknown>>).some(entry =>
+      entry.variant === 'solid' && classOf(entry).includes('ring-(--ui-border-accented)')
+    )
+  )
+
+  return {
+    border: 'custom',
+    ...(width !== BORDER_WIDTH_DEFAULT ? { borderWidth: width } : {}),
+    ...(framed ? { frame: true } : {})
+  }
 }
 
 /** Shadow fallback when only a config was pasted (CSS normally decides). */
@@ -468,6 +480,7 @@ export function importTheme(input: { css?: string, config?: string }): ThemeImpo
   if (border.border) {
     style.border = border.border
     if (border.borderWidth !== undefined) style.borderWidth = border.borderWidth
+    if (border.frame) style.frame = true
   }
   const defaults = extractDefaults(components)
   if (defaults) style.defaults = defaults
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index eeda8f7e9d..2f0833ae6a 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -92,6 +92,7 @@ export const presets: ThemePreset[] = [{
     style: {
       shadow: 'hard',
       border: 'custom',
+      frame: true,
       borderColor: 'inverted'
     }
   }
@@ -207,6 +208,7 @@ export const presets: ThemePreset[] = [{
       shadow: 'hard',
       shadowColor: 'black',
       border: 'custom',
+      frame: true,
       borderColor: 'black'
     }
   }
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 543da887ba..a9a78039f8 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -46,6 +46,11 @@ export interface StyleOptions {
   borderShade?: { light: number, dark: number }
   /** Ring width in px (1–4) while `border` is 'custom'; 2 when unset. */
   borderWidth?: number
+  /**
+   * Frame solid/soft surfaces too (the neobrutalist outline-everything
+   * look) — only meaningful while `border` is 'custom'.
+   */
+  frame?: boolean
   /**
    * Default variant/size, expanded into per-component `defaultVariants` —
    * the runtime override channel Nuxt UI already honors — only for
@@ -291,15 +296,60 @@ function ringFragments(width: number): Fragments {
   }
 }
 
+/** Width-parametric frame outlines (whole literals for the scanner). */
+const FRAME_INSET_CLASSES: Record<number, string> = {
+  1: 'ring-1 ring-inset ring-(--ui-border-accented)',
+  2: 'ring-2 ring-inset ring-(--ui-border-accented)',
+  3: 'ring-3 ring-inset ring-(--ui-border-accented)',
+  4: 'ring-4 ring-inset ring-(--ui-border-accented)'
+}
+const FRAME_CLASSES: Record<number, string> = {
+  1: 'ring-1 ring-(--ui-border-accented)',
+  2: 'ring-2 ring-(--ui-border-accented)',
+  3: 'ring-3 ring-(--ui-border-accented)',
+  4: 'ring-4 ring-(--ui-border-accented)'
+}
+
+/** The frame toggle: outline solid/soft surfaces too, at the chosen width. */
+function frameFragments(width: number): Fragments {
+  const inset = FRAME_INSET_CLASSES[width] || FRAME_INSET_CLASSES[BORDER_WIDTH_DEFAULT]!
+  const outset = FRAME_CLASSES[width] || FRAME_CLASSES[BORDER_WIDTH_DEFAULT]!
+  const frame = (cls: string, slot?: string) =>
+    ['solid', 'soft'].map(variant => ({ variant, class: slot ? { [slot]: cls } : cls }))
+
+  return {
+    // card's own ring is non-inset; everything else frames inside its edge
+    card: { compoundVariants: frame(outset, 'root') },
+    empty: { compoundVariants: frame(outset, 'root') },
+    alert: { compoundVariants: frame(inset, 'root') },
+    button: { compoundVariants: frame(inset) },
+    badge: { compoundVariants: frame(inset) }
+  }
+}
+
 /**
- * 'none' zeroes every ring, 'custom' sets the chosen width. Legacy
- * 'bold'/'frame' (old exports and saved prefs) read as custom at the
- * default width — the frame treatment's solid-surface outlines retired.
+ * 'none' zeroes every ring, 'custom' sets the chosen width and optionally
+ * frames solid surfaces. Legacy 'bold'/'frame' (old exports and saved
+ * prefs) read as custom at the default width, 'frame' keeping its outlines.
  */
 function borderFragments(style: StyleOptions): Fragments {
   if (!style.border || style.border === 'default') return {}
   if (style.border === 'none') return ringFragments(0)
-  return ringFragments(style.borderWidth ?? BORDER_WIDTH_DEFAULT)
+
+  const width = style.borderWidth ?? BORDER_WIDTH_DEFAULT
+  const rings = ringFragments(width)
+  if (!style.frame && style.border !== 'frame') return rings
+
+  const framed = frameFragments(width)
+  return Object.fromEntries(
+    [...new Set([...Object.keys(rings), ...Object.keys(framed)])].map(key => [key, {
+      ...rings[key],
+      ...framed[key],
+      ...(rings[key]?.compoundVariants || framed[key]?.compoundVariants
+        ? { compoundVariants: [...(rings[key]?.compoundVariants || []), ...(framed[key]?.compoundVariants || [])] }
+        : {})
+    }])
+  )
 }
 
 /**
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 47ead841f4..4bb34a4987 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -343,8 +343,14 @@ describe('style colors', () => {
     expect(none.card!.compoundVariants).toContainEqual({ variant: 'outline', class: { root: 'ring-0' } })
     expect(none.dropdownMenu!.slots!.content).toBe('ring-0')
 
-    // legacy saved values keep working as custom at the default width
-    expect(styleComponents({ border: 'frame' }).button!.compoundVariants).toContainEqual({ variant: 'outline', class: 'ring-2' })
+    // the frame toggle outlines solid/soft surfaces at the chosen width
+    const framed = styleComponents({ border: 'custom', borderWidth: 3, frame: true })
+    expect(framed.button!.compoundVariants).toContainEqual({ variant: 'solid', class: 'ring-3 ring-inset ring-(--ui-border-accented)' })
+    expect(framed.card!.compoundVariants).toContainEqual({ variant: 'soft', class: { root: 'ring-3 ring-(--ui-border-accented)' } })
+    expect(JSON.stringify(framed.button!.compoundVariants)).not.toContain('"ghost"')
+
+    // legacy saved values keep working: bold = custom width, frame keeps outlines
+    expect(styleComponents({ border: 'frame' }).button!.compoundVariants).toContainEqual({ variant: 'solid', class: 'ring-2 ring-inset ring-(--ui-border-accented)' })
     expect(styleComponents({ border: 'bold' }).input!.compoundVariants).toContainEqual({ variant: 'subtle', class: 'ring-2' })
   })
 

From bd6fc633fd8c04ba7423f740743d44dccd64abd6 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 01:41:39 +0200
Subject: [PATCH 046/185] feat(docs): border width reaches chrome edges,
 separators and dividers; frame covers tabs, chat bubbles and switches

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/utils/theme-engine/styles.ts | 55 +++++++++++++++++++++++++--
 test/utils/theme-engine.spec.ts       | 17 ++++++++-
 2 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index a9a78039f8..bd41578604 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -260,6 +260,23 @@ export const BORDER_WIDTH_DEFAULT = 2
 const RING_WIDTH_CLASSES: Record<number, string> = { 0: 'ring-0', 1: 'ring-1', 2: 'ring-2', 3: 'ring-3', 4: 'ring-4' }
 const SM_RING_WIDTH_CLASSES: Record<number, string> = { 0: 'sm:ring-0', 1: 'sm:ring-1', 2: 'sm:ring-2', 3: 'sm:ring-3', 4: 'sm:ring-4' }
 
+/** Same idea for the border-utility edges: separators, chrome, dividers. */
+const EDGE_CLASSES: Record<'t' | 'b' | 'e' | 's', Record<number, string>> = {
+  t: { 0: 'border-t-0', 1: 'border-t', 2: 'border-t-2', 3: 'border-t-3', 4: 'border-t-4' },
+  b: { 0: 'border-b-0', 1: 'border-b', 2: 'border-b-2', 3: 'border-b-3', 4: 'border-b-4' },
+  e: { 0: 'border-e-0', 1: 'border-e', 2: 'border-e-2', 3: 'border-e-3', 4: 'border-e-4' },
+  s: { 0: 'border-s-0', 1: 'border-s', 2: 'border-s-2', 3: 'border-s-3', 4: 'border-s-4' }
+}
+const DIVIDE_Y_CLASSES: Record<number, string> = { 0: 'divide-y-0', 1: 'divide-y', 2: 'divide-y-2', 3: 'divide-y-3', 4: 'divide-y-4' }
+// dashboard panels only draw their edge between siblings on lg — same scoping
+const PANEL_EDGE_CLASSES: Record<number, string> = {
+  0: 'lg:not-last:border-e-0',
+  1: 'lg:not-last:border-e',
+  2: 'lg:not-last:border-e-2',
+  3: 'lg:not-last:border-e-3',
+  4: 'lg:not-last:border-e-4'
+}
+
 /**
  * Apply one ring-width class across every ring-bearing surface: variant-level
  * rings (outline/subtle on buttons/panels/fields) via compounds, slot-level
@@ -272,12 +289,22 @@ function ringFragments(width: number): Fragments {
   const compound = (variants: string[], slot?: string) =>
     variants.map(variant => ({ variant, class: slot ? { [slot]: cls } : cls }))
 
+  const edge = (side: 't' | 'b' | 'e' | 's') => EDGE_CLASSES[side][width] || EDGE_CLASSES[side][BORDER_WIDTH_DEFAULT]!
+  const divide = DIVIDE_Y_CLASSES[width] || DIVIDE_Y_CLASSES[BORDER_WIDTH_DEFAULT]!
+
   return {
-    card: { compoundVariants: compound(['outline', 'subtle'], 'root') },
+    // card's section dividers scale with its ring
+    card: {
+      compoundVariants: [
+        ...['outline', 'subtle'].map(variant => ({ variant, class: { root: `${cls} ${divide}` } })),
+        ...['solid', 'soft'].map(variant => ({ variant, class: { root: divide } }))
+      ]
+    },
     empty: { compoundVariants: compound(['outline', 'subtle'], 'root') },
     alert: { compoundVariants: compound(['outline', 'subtle'], 'root') },
     button: { compoundVariants: compound(['outline', 'subtle']) },
     badge: { compoundVariants: compound(['outline', 'subtle']) },
+    chatMessage: { compoundVariants: compound(['outline', 'subtle'], 'content') },
     ...Object.fromEntries(FIELD_COMPONENTS.map(component => [component, { compoundVariants: compound(['outline', 'subtle']) }])),
     // menu-bearing fields treat trigger AND dropdown surface
     select: { slots: { content: cls }, compoundVariants: compound(['outline', 'subtle']) },
@@ -292,7 +319,22 @@ function ringFragments(width: number): Fragments {
     modal: { compoundVariants: [{ fullscreen: false, class: { content: cls } }] },
     slideover: { slots: { content: SM_RING_WIDTH_CLASSES[width] || SM_RING_WIDTH_CLASSES[BORDER_WIDTH_DEFAULT]! } },
     checkbox: { slots: { base: cls } },
-    radioGroup: { slots: { base: cls } }
+    radioGroup: { slots: { base: cls } },
+    // Border-utility edges: page/app chrome, separators and dividers
+    // follow the same width so the whole preview reads consistently.
+    separator: {
+      compoundVariants: [
+        { orientation: 'horizontal', class: { border: edge('t') } },
+        { orientation: 'vertical', class: { border: edge('s') } }
+      ]
+    },
+    header: { slots: { root: edge('b') } },
+    accordion: { slots: { item: edge('b') } },
+    table: { slots: { tbody: divide } },
+    dashboardSidebar: { slots: { root: edge('e') } },
+    dashboardNavbar: { slots: { root: edge('b') } },
+    dashboardToolbar: { slots: { root: edge('b') } },
+    dashboardPanel: { slots: { root: PANEL_EDGE_CLASSES[width] || PANEL_EDGE_CLASSES[BORDER_WIDTH_DEFAULT]! } }
   }
 }
 
@@ -323,7 +365,13 @@ function frameFragments(width: number): Fragments {
     empty: { compoundVariants: frame(outset, 'root') },
     alert: { compoundVariants: frame(inset, 'root') },
     button: { compoundVariants: frame(inset) },
-    badge: { compoundVariants: frame(inset) }
+    badge: { compoundVariants: frame(inset) },
+    chatMessage: { compoundVariants: frame(inset, 'content') },
+    // other solid surfaces: the pill tabs wrapper + its indicator, and the
+    // switch track (its checked color-ring loses the merge to ours — the
+    // frame look owns ring color by design, same as solid buttons)
+    tabs: { compoundVariants: [{ variant: 'pill', class: { list: inset, indicator: inset } }] },
+    switch: { slots: { base: inset } }
   }
 }
 
@@ -607,6 +655,7 @@ export function mergeUi(
 export const STYLE_COMPONENT_KEYS = [...new Set([
   ...Object.values(SHADOW_FRAGMENTS).flatMap(fragments => Object.keys(fragments)),
   ...Object.keys(ringFragments(BORDER_WIDTH_DEFAULT)),
+  ...Object.keys(frameFragments(BORDER_WIDTH_DEFAULT)),
   ...Object.keys(FRAME_COLOR_FRAGMENTS)
 ])]
 
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 4bb34a4987..58ec1d94bb 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -298,7 +298,7 @@ describe('styleComponents', () => {
     expect(components.button!.compoundVariants).toContainEqual({ variant: 'outline', class: 'ring-2' })
     // card rings live at variant level, so bold ships compounds, not slots
     expect(components.card!.slots?.root ?? '').toContain('var(--ui-shadow-final-hard)]')
-    expect(components.card!.compoundVariants).toContainEqual({ variant: 'outline', class: { root: 'ring-2' } })
+    expect(components.card!.compoundVariants).toContainEqual({ variant: 'outline', class: { root: 'ring-2 divide-y-2' } })
   })
 
   it('docToSettings keeps style out of the ui channel but carries its tokens', async () => {
@@ -340,7 +340,7 @@ describe('style colors', () => {
     expect(JSON.stringify(wide.button!.compoundVariants)).not.toContain('"ghost"')
 
     const none = styleComponents({ border: 'none' })
-    expect(none.card!.compoundVariants).toContainEqual({ variant: 'outline', class: { root: 'ring-0' } })
+    expect(none.card!.compoundVariants).toContainEqual({ variant: 'outline', class: { root: 'ring-0 divide-y-0' } })
     expect(none.dropdownMenu!.slots!.content).toBe('ring-0')
 
     // the frame toggle outlines solid/soft surfaces at the chosen width
@@ -348,6 +348,19 @@ describe('style colors', () => {
     expect(framed.button!.compoundVariants).toContainEqual({ variant: 'solid', class: 'ring-3 ring-inset ring-(--ui-border-accented)' })
     expect(framed.card!.compoundVariants).toContainEqual({ variant: 'soft', class: { root: 'ring-3 ring-(--ui-border-accented)' } })
     expect(JSON.stringify(framed.button!.compoundVariants)).not.toContain('"ghost"')
+    // …and the other solid surfaces: pill tabs, chat bubbles, switch track
+    expect(framed.tabs!.compoundVariants).toContainEqual({ variant: 'pill', class: { list: 'ring-3 ring-inset ring-(--ui-border-accented)', indicator: 'ring-3 ring-inset ring-(--ui-border-accented)' } })
+    expect(framed.chatMessage!.compoundVariants).toContainEqual({ variant: 'solid', class: { content: 'ring-3 ring-inset ring-(--ui-border-accented)' } })
+    expect(framed.switch!.slots!.base).toBe('ring-3 ring-inset ring-(--ui-border-accented)')
+
+    // border-utility edges scale with the width: chrome, separators, dividers
+    expect(wide.header!.slots!.root).toBe('border-b-3')
+    expect(wide.dashboardSidebar!.slots!.root).toBe('border-e-3')
+    expect(wide.dashboardPanel!.slots!.root).toBe('lg:not-last:border-e-3')
+    expect(wide.separator!.compoundVariants).toContainEqual({ orientation: 'horizontal', class: { border: 'border-t-3' } })
+    expect(wide.table!.slots!.tbody).toBe('divide-y-3')
+    expect(wide.card!.compoundVariants).toContainEqual({ variant: 'outline', class: { root: 'ring-3 divide-y-3' } })
+    expect(none.header!.slots!.root).toBe('border-b-0')
 
     // legacy saved values keep working: bold = custom width, frame keeps outlines
     expect(styleComponents({ border: 'frame' }).button!.compoundVariants).toContainEqual({ variant: 'solid', class: 'ring-2 ring-inset ring-(--ui-border-accented)' })

From 971ed0eb285d074711a16d50ba33677872ea737b Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 01:44:58 +0200
Subject: [PATCH 047/185] feat(docs): studio chrome follows the border width
 too

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/pages/theme.vue | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index cf789f592b..869f403a88 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -18,10 +18,28 @@ if (import.meta.server) {
   })
 }
 
-const { reset } = useThemeStudio()
+const { reset, style } = useThemeStudio()
 
 const sidebarOpen = ref(true)
 
+// The studio's own chrome follows the border treatment too — whole literal
+// class strings per width so tailwind's scanner sees them.
+const TOOLBAR_EDGE: Record<number, string> = { 0: 'border-b-0', 1: 'border-b', 2: 'border-b-2', 3: 'border-b-3', 4: 'border-b-4' }
+const SIDEBAR_EDGE: Record<number, string> = {
+  0: 'border-b-0 lg:border-r-0',
+  1: 'border-b lg:border-b-0 lg:border-r',
+  2: 'border-b-2 lg:border-b-0 lg:border-r-2',
+  3: 'border-b-3 lg:border-b-0 lg:border-r-3',
+  4: 'border-b-4 lg:border-b-0 lg:border-r-4'
+}
+
+const chromeWidth = computed(() => {
+  const border = style.value.border
+  if (!border || border === 'default') return 1
+  if (border === 'none') return 0
+  return style.value.borderWidth ?? 2
+})
+
 /** Preview views: the bento grid plus app-scale layouts from the real templates. */
 const view = ref('grid')
 
@@ -38,13 +56,17 @@ const viewTabs = [
   <main class="flex flex-col lg:flex-row lg:h-[calc(100vh-var(--ui-header-height))]">
     <aside
       v-show="sidebarOpen"
-      class="shrink-0 lg:w-80 border-b lg:border-b-0 lg:border-r border-default lg:overflow-y-auto p-4 sm:px-6"
+      class="shrink-0 lg:w-80 border-default lg:overflow-y-auto p-4 sm:px-6"
+      :class="SIDEBAR_EDGE[chromeWidth]"
     >
       <ThemeStudioControls />
     </aside>
 
     <div class="flex-1 flex flex-col min-w-0">
-      <div class="flex items-center gap-2 border-b border-default px-4 sm:px-6 py-3">
+      <div
+        class="flex items-center gap-2 border-default px-4 sm:px-6 py-3"
+        :class="TOOLBAR_EDGE[chromeWidth]"
+      >
         <UTooltip :text="sidebarOpen ? 'Hide settings' : 'Show settings'">
           <UButton
             :icon="sidebarOpen ? 'i-lucide-panel-left-close' : 'i-lucide-panel-left-open'"

From dc8e2434596eff39f7167070e0044504a85e0f27 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 02:01:19 +0200
Subject: [PATCH 048/185] =?UTF-8?q?feat(docs):=20border=20width=20sweep=20?=
 =?UTF-8?q?=E2=80=94=20full=20component=20coverage=20live,=20tailwind=20de?=
 =?UTF-8?q?fault-width=20variables=20in=20exports?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/utils/theme-engine/export.ts  | 17 +++++-
 docs/app/utils/theme-engine/import.ts  | 55 ++++++++++++++------
 docs/app/utils/theme-engine/presets.ts | 57 ++++++++------------
 docs/app/utils/theme-engine/styles.ts  | 72 +++++++++++++++++++++-----
 test/utils/theme-engine.spec.ts        | 26 ++++++++--
 5 files changed, 158 insertions(+), 69 deletions(-)

diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index 11bc8e9d9c..9f9415f808 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -1,7 +1,7 @@
 import { themeIcons } from '../theme'
 import type { ThemeDoc } from './types'
 import { DEFAULT_COLORS, THEME_DEFAULTS } from './types'
-import { styleComponents, styleTokens, mergeUi } from './styles'
+import { styleComponents, styleTokens, mergeUi, BORDER_WIDTH_DEFAULT } from './styles'
 
 /**
  * Generate the minimal `main.css`. The document only holds overrides, so
@@ -20,6 +20,17 @@ export function generateCSS(doc: ThemeDoc): string {
   if (doc.spacing !== undefined && doc.spacing !== THEME_DEFAULTS.spacing) {
     themeLines.push(`  --spacing: ${doc.spacing}rem;`)
   }
+  // Border width exports as tailwind's default-width theme variables — the
+  // consumer's compile scales every bare border/divide/ring utility, far
+  // beyond what per-component classes could enumerate. (The live preview
+  // can't use this: the variables resolve at compile time.)
+  const borderWidth = doc.style?.border === 'none'
+    ? 0
+    : doc.style?.border && doc.style.border !== 'default' ? doc.style.borderWidth ?? BORDER_WIDTH_DEFAULT : undefined
+  if (borderWidth !== undefined && borderWidth !== 1) {
+    themeLines.push(`  --default-border-width: ${borderWidth}px;`)
+    themeLines.push(`  --default-ring-width: ${borderWidth}px;`)
+  }
   if (themeLines.length) {
     lines.push('', '@theme {', ...themeLines, '}')
   }
@@ -118,7 +129,9 @@ export function generateConfig(doc: ThemeDoc, framework: string = 'nuxt'): strin
 
   // Explicit components merge INTO the style expansion (classes concatenate,
   // explicit last so it wins) — a spread would drop one side wholesale.
-  const componentOverrides = mergeUi(doc.style ? styleComponents(doc.style) : undefined, doc.components)
+  // Width rides the @theme default-width variables in the exported CSS, so
+  // the config only carries frame/color/shadow classes.
+  const componentOverrides = mergeUi(doc.style ? styleComponents(doc.style, { widthAsVariables: true }) : undefined, doc.components)
   if (Object.keys(componentOverrides).length) {
     config.ui = config.ui || {}
     Object.assign(config.ui, componentOverrides)
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index 634ad022c2..e9a7303342 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -36,6 +36,8 @@ interface ParsedCSS {
   fontSize?: number
   radius?: number
   blackAsPrimary?: boolean
+  /** From @theme --default-border-width — the export's width channel. */
+  borderWidth?: number
   light: Record<string, string>
   dark: Record<string, string>
   skipped: string[]
@@ -104,6 +106,14 @@ function parseDeclaration(result: ParsedCSS, selector: string, prop: string, val
       result.spacing = Number.parseFloat(value)
       return true
     }
+    if (prop === '--default-border-width' && value.endsWith('px')) {
+      result.borderWidth = Number.parseFloat(value)
+      return true
+    }
+    if (prop === '--default-ring-width' && value.endsWith('px')) {
+      // always exported alongside --default-border-width with the same value
+      return true
+    }
     return false
   }
 
@@ -376,20 +386,23 @@ function detectBorder(components: Record<string, any>): Pick<StyleOptions, 'bord
   const width = widths[0]!
   if (width === 0) return { border: 'none' }
 
-  // Frame outlines live on solid-variant compounds referencing the accented border
-  const framed = Object.values(components).some(component =>
-    ((component?.compoundVariants || []) as Array<Record<string, unknown>>).some(entry =>
-      entry.variant === 'solid' && classOf(entry).includes('ring-(--ui-border-accented)')
-    )
-  )
-
   return {
     border: 'custom',
     ...(width !== BORDER_WIDTH_DEFAULT ? { borderWidth: width } : {}),
-    ...(framed ? { frame: true } : {})
+    ...(detectFrame(components) ? { frame: true } : {})
   }
 }
 
+/** Frame outlines live on solid-variant compounds referencing the accented border. */
+function detectFrame(components: Record<string, any>): boolean {
+  const classOf = (entry: Record<string, unknown>) => typeof entry.class === 'string' ? entry.class : Object.values(entry.class || {}).join(' ')
+  return Object.values(components).some(component =>
+    ((component?.compoundVariants || []) as Array<Record<string, unknown>>).some(entry =>
+      entry.variant === 'solid' && classOf(entry).includes('ring-(--ui-border-accented)')
+    )
+  )
+}
+
 /** Shadow fallback when only a config was pasted (CSS normally decides). */
 function detectShadow(components: Record<string, any>): StyleOptions['shadow'] {
   const slots = Object.values(components).flatMap(component => Object.values(component?.slots || {})) as string[]
@@ -402,8 +415,8 @@ function detectShadow(components: Record<string, any>): StyleOptions['shadow'] {
  * Remove the fragments the reconstructed style regenerates, leaving only
  * genuinely explicit component overrides for doc.components.
  */
-function subtractStyleExpansion(components: Record<string, any>, style: StyleOptions): Record<string, any> {
-  const expected = styleComponents(style)
+function subtractStyleExpansion(components: Record<string, any>, style: StyleOptions, widthAsVariables = false): Record<string, any> {
+  const expected = styleComponents(style, { widthAsVariables })
   const remaining: Record<string, any> = {}
 
   for (const [name, fragment] of Object.entries(components)) {
@@ -476,16 +489,26 @@ export function importTheme(input: { css?: string, config?: string }): ThemeImpo
   // config classes; either half alone still reconstructs what it can.
   const style: StyleOptions = css ? extractStyle(css.light, css.dark) : {}
   style.shadow ||= detectShadow(components)
-  const border = detectBorder(components)
-  if (border.border) {
-    style.border = border.border
-    if (border.borderWidth !== undefined) style.borderWidth = border.borderWidth
-    if (border.frame) style.frame = true
+
+  // New exports carry width through the @theme variables; older ones (and
+  // config-only pastes) still declare it through ring-N classes.
+  const widthAsVariables = css?.borderWidth !== undefined
+  if (widthAsVariables) {
+    style.border = css!.borderWidth === 0 ? 'none' : 'custom'
+    if (css!.borderWidth !== 0 && css!.borderWidth !== BORDER_WIDTH_DEFAULT) style.borderWidth = css!.borderWidth
+    if (detectFrame(components)) style.frame = true
+  } else {
+    const border = detectBorder(components)
+    if (border.border) {
+      style.border = border.border
+      if (border.borderWidth !== undefined) style.borderWidth = border.borderWidth
+      if (border.frame) style.frame = true
+    }
   }
   const defaults = extractDefaults(components)
   if (defaults) style.defaults = defaults
 
-  const explicit = subtractStyleExpansion(components, style)
+  const explicit = subtractStyleExpansion(components, style, widthAsVariables)
   if (Object.keys(explicit).length) doc.components = explicit
 
   if (Object.values(style).some(value => value !== undefined)) {
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 2f0833ae6a..69fb3b168d 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -48,52 +48,41 @@ export const presets: ThemePreset[] = [{
 }, {
   id: 'neo-brutalist',
   name: 'Neo-brutalist',
-  description: 'Hard black shadows, inked frames, zero radius, alarm red.',
+  description: 'Amber on zinc — everything framed in ink, dropped hard shadows.',
   icon: 'i-lucide-zap',
   doc: {
     version: 1,
     meta: { name: 'Neo-brutalist', base: 'neo-brutalist' },
-    // Reference palette (tweakcn/shadcn studio): #FF3333 primary light,
-    // #FF6666 dark, yellow secondary, pure white/black surfaces.
-    palettes: {
-      brut: {
-        shades: {
-          50: 'oklch(95.8% 0.021 17.519)',
-          100: 'oklch(91.1% 0.046 18.029)',
-          200: 'oklch(83.9% 0.089 19.107)',
-          300: 'oklch(77% 0.136 20.678)',
-          400: 'oklch(70.4% 0.187 23.186)',
-          500: 'oklch(64.9% 0.237 26.973)',
-          600: 'oklch(58.9% 0.23 28.239)',
-          700: 'oklch(51.7% 0.204 28.37)',
-          800: 'oklch(44.5% 0.174 28.254)',
-          900: 'oklch(38.3% 0.148 27.965)',
-          950: 'oklch(25.2% 0.094 27.421)'
-        }
-      }
-    },
     colors: {
-      primary: 'brut',
+      primary: 'amber',
       secondary: 'yellow',
-      neutral: 'neutral'
+      neutral: 'zinc'
     },
-    radius: 0,
+    radius: 0.5,
     font: { sans: 'Outfit' },
-    tokens: {
-      light: {
-        '--ui-bg': 'white'
-      },
-      dark: {
-        '--ui-bg': 'black'
-      }
-    },
-    // The rest is plain configuration: outlined everything in inverted ink,
-    // hard offset shadows.
+    // Framed everything in near-black ink, straight-down hard shadows, and
+    // a noir dark mode: surfaces lifted a step, every border crushed to 950.
     style: {
       shadow: 'hard',
+      shadowGeometry: { x: 0, y: 3, blur: 0, spread: 0 },
       border: 'custom',
       frame: true,
-      borderColor: 'inverted'
+      borderColor: 'shade',
+      borderShade: { light: 900, dark: 950 },
+      tokenShades: {
+        '--ui-bg': { light: 50, dark: 800 },
+        '--ui-bg-elevated': { dark: 700 },
+        '--ui-bg-accented': { dark: 600 },
+        '--ui-bg-inverted': { dark: 50 },
+        '--ui-text-inverted': { light: 50 },
+        '--ui-text-highlighted': { dark: 100 },
+        '--ui-text-dimmed': { dark: 400 },
+        '--ui-text-muted': { dark: 300 },
+        '--ui-border': { dark: 950 },
+        '--ui-border-muted': { dark: 950 },
+        '--ui-border-accented': { light: 400, dark: 950 },
+        '--ui-border-inverted': { dark: 50 }
+      }
     }
   }
 }, {
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index bd41578604..bd2608c6f5 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -268,6 +268,7 @@ const EDGE_CLASSES: Record<'t' | 'b' | 'e' | 's', Record<number, string>> = {
   s: { 0: 'border-s-0', 1: 'border-s', 2: 'border-s-2', 3: 'border-s-3', 4: 'border-s-4' }
 }
 const DIVIDE_Y_CLASSES: Record<number, string> = { 0: 'divide-y-0', 1: 'divide-y', 2: 'divide-y-2', 3: 'divide-y-3', 4: 'divide-y-4' }
+const BORDER_ALL_CLASSES: Record<number, string> = { 0: 'border-0', 1: 'border', 2: 'border-2', 3: 'border-3', 4: 'border-4' }
 // dashboard panels only draw their edge between siblings on lg — same scoping
 const PANEL_EDGE_CLASSES: Record<number, string> = {
   0: 'lg:not-last:border-e-0',
@@ -334,7 +335,30 @@ function ringFragments(width: number): Fragments {
     dashboardSidebar: { slots: { root: edge('e') } },
     dashboardNavbar: { slots: { root: edge('b') } },
     dashboardToolbar: { slots: { root: edge('b') } },
-    dashboardPanel: { slots: { root: PANEL_EDGE_CLASSES[width] || PANEL_EDGE_CLASSES[BORDER_WIDTH_DEFAULT]! } }
+    dashboardPanel: { slots: { root: PANEL_EDGE_CLASSES[width] || PANEL_EDGE_CLASSES[BORDER_WIDTH_DEFAULT]! } },
+    // ring-bearing surfaces beyond the core set (page/pricing/chat/blog)
+    pageCard: { compoundVariants: compound(['outline', 'subtle'], 'root') },
+    pageCTA: { compoundVariants: compound(['outline', 'subtle'], 'root') },
+    blogPost: { compoundVariants: compound(['outline', 'subtle'], 'root') },
+    chatPrompt: { compoundVariants: compound(['outline', 'subtle'], 'root') },
+    pricingPlan: { compoundVariants: compound(['outline', 'subtle'], 'root') },
+    // and the remaining border-utility edges
+    navigationMenu: { slots: { childList: edge('s') } },
+    pageHeader: { slots: { root: edge('b') } },
+    chatPalette: { slots: { prompt: edge('t') } },
+    commandPalette: { slots: { root: divide } },
+    fileUpload: { slots: { file: BORDER_ALL_CLASSES[width] || BORDER_ALL_CLASSES[BORDER_WIDTH_DEFAULT]! } },
+    checkboxGroup: { compoundVariants: [{ variant: 'card', class: { item: BORDER_ALL_CLASSES[width] || BORDER_ALL_CLASSES[BORDER_WIDTH_DEFAULT]! } }] },
+    listbox: { slots: { input: edge('b') } },
+    tree: { slots: { listWithChildren: edge('s') } },
+    changelogVersion: { slots: { footer: edge('t') } },
+    pricingTable: {
+      slots: {
+        item: BORDER_ALL_CLASSES[width] || BORDER_ALL_CLASSES[BORDER_WIDTH_DEFAULT]!,
+        th: edge('b'),
+        td: edge('b')
+      }
+    }
   }
 }
 
@@ -367,6 +391,12 @@ function frameFragments(width: number): Fragments {
     button: { compoundVariants: frame(inset) },
     badge: { compoundVariants: frame(inset) },
     chatMessage: { compoundVariants: frame(inset, 'content') },
+    pageCard: { compoundVariants: frame(outset, 'root') },
+    pageCTA: { compoundVariants: frame(outset, 'root') },
+    blogPost: { compoundVariants: frame(outset, 'root') },
+    // fields have no solid variant — soft is their surface look
+    ...Object.fromEntries(FIELD_COMPONENTS.map(component => [component, { compoundVariants: [{ variant: 'soft', class: inset }] }])),
+    chatPrompt: { compoundVariants: [{ variant: 'soft', class: { root: outset } }] },
     // other solid surfaces: the pill tabs wrapper + its indicator, and the
     // switch track (its checked color-ring loses the merge to ours — the
     // frame look owns ring color by design, same as solid buttons)
@@ -380,21 +410,31 @@ function frameFragments(width: number): Fragments {
  * frames solid surfaces. Legacy 'bold'/'frame' (old exports and saved
  * prefs) read as custom at the default width, 'frame' keeping its outlines.
  */
-function borderFragments(style: StyleOptions): Fragments {
+function borderFragments(style: StyleOptions, widthAsVariables = false): Fragments {
   if (!style.border || style.border === 'default') return {}
-  if (style.border === 'none') return ringFragments(0)
 
-  const width = style.borderWidth ?? BORDER_WIDTH_DEFAULT
+  // Exports carry the width through tailwind's `--default-border-width` /
+  // `--default-ring-width` theme variables instead (the consumer's compile
+  // scales every bare border/divide/ring) — only the frame outlines remain
+  // as classes. The live preview can't do that: those variables are
+  // resolved at compile time, so it keeps the class fragments.
+  const framed = style.frame || style.border === 'frame'
+  const width = style.border === 'none' ? 0 : style.borderWidth ?? BORDER_WIDTH_DEFAULT
+
+  if (widthAsVariables) {
+    return framed && width > 0 ? frameFragments(width) : {}
+  }
+
   const rings = ringFragments(width)
-  if (!style.frame && style.border !== 'frame') return rings
+  if (!framed || width === 0) return rings
 
-  const framed = frameFragments(width)
+  const frames = frameFragments(width)
   return Object.fromEntries(
-    [...new Set([...Object.keys(rings), ...Object.keys(framed)])].map(key => [key, {
+    [...new Set([...Object.keys(rings), ...Object.keys(frames)])].map(key => [key, {
       ...rings[key],
-      ...framed[key],
-      ...(rings[key]?.compoundVariants || framed[key]?.compoundVariants
-        ? { compoundVariants: [...(rings[key]?.compoundVariants || []), ...(framed[key]?.compoundVariants || [])] }
+      ...frames[key],
+      ...(rings[key]?.compoundVariants || frames[key]?.compoundVariants
+        ? { compoundVariants: [...(rings[key]?.compoundVariants || []), ...(frames[key]?.compoundVariants || [])] }
         : {})
     }])
   )
@@ -416,8 +456,12 @@ function recolor(variants: string[], slot?: string, colors?: string[]): Array<Re
   }))
 }
 
-/** Colors whose rings carry no semantic meaning — safe to repaint. */
-const UNSIGNALED_COLORS = ['primary', 'neutral']
+/**
+ * Colors whose rings carry no meaning — safe to repaint. Only neutral: a
+ * primary ring is as deliberate a choice as an error one (a subtle primary
+ * button must keep its primary border under any border color).
+ */
+const UNSIGNALED_COLORS = ['neutral']
 
 const FRAME_COLOR_FRAGMENTS: Fragments = {
   // cards have no color variants; field rings are neutral for every color
@@ -535,7 +579,7 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
  * merge in shadow → width → color order, so the color compounds append last
  * and win the tailwind-merge for ring color.
  */
-export function styleComponents(style: StyleOptions): Fragments {
+export function styleComponents(style: StyleOptions, options: { widthAsVariables?: boolean } = {}): Fragments {
   // App-wide defaults, only where the component supports the chosen value.
   const defaults: Fragments = {}
   const variant = style.defaults?.variant
@@ -575,7 +619,7 @@ export function styleComponents(style: StyleOptions): Fragments {
   const sources = [
     defaults,
     SHADOW_FRAGMENTS[style.shadow ?? 'none'],
-    borderFragments(style),
+    borderFragments(style, options.widthAsVariables),
     style.borderColor && style.borderColor !== 'default' ? FRAME_COLOR_FRAGMENTS : {}
   ]
 
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 58ec1d94bb..495db3aa68 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -367,6 +367,25 @@ describe('style colors', () => {
     expect(styleComponents({ border: 'bold' }).input!.compoundVariants).toContainEqual({ variant: 'subtle', class: 'ring-2' })
   })
 
+  it('exports carry width via tailwind default-width variables, not classes', async () => {
+    const { generateCSS, generateConfig } = await import('../../docs/app/utils/theme-engine')
+
+    const doc = { version: 1 as const, style: { border: 'custom' as const, borderWidth: 3, frame: true } }
+    const css = generateCSS(doc)
+    expect(css).toContain('--default-border-width: 3px;')
+    expect(css).toContain('--default-ring-width: 3px;')
+
+    // config keeps the frame outlines but drops the per-component width classes
+    const config = generateConfig(doc)
+    expect(config).toContain('ring-3 ring-inset ring-(--ui-border-accented)')
+    expect(config).not.toMatch(/class: 'ring-3'/)
+
+    // none exports as zero-width variables and nothing else
+    const none = generateCSS({ version: 1, style: { border: 'none' } })
+    expect(none).toContain('--default-border-width: 0px;')
+    expect(generateConfig({ version: 1, style: { border: 'none' } })).toBe('export default defineAppConfig({})')
+  })
+
   it('border none counts as a real style choice', async () => {
     const { isDefaultStyle } = await import('../../docs/app/utils/theme-engine')
     expect(isDefaultStyle({})).toBe(true)
@@ -435,9 +454,10 @@ describe('style colors', () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
     const compounds = styleComponents({ border: 'frame', borderColor: 'primary' }).button!.compoundVariants!
 
-    // outline/subtle rings ARE the semantic signal — only primary/neutral repaint
-    expect(compounds).toContainEqual({ color: ['primary', 'neutral'], variant: 'outline', class: 'ring-(--ui-frame-color)' })
-    expect(compounds).toContainEqual({ color: ['primary', 'neutral'], variant: 'subtle', class: 'ring-(--ui-frame-color)' })
+    // outline/subtle rings ARE the color signal (a subtle primary button
+    // keeps its primary border) — only neutral rings repaint
+    expect(compounds).toContainEqual({ color: ['neutral'], variant: 'outline', class: 'ring-(--ui-frame-color)' })
+    expect(compounds).toContainEqual({ color: ['neutral'], variant: 'subtle', class: 'ring-(--ui-frame-color)' })
     // frames around solid/soft surfaces repaint for every color
     expect(compounds).toContainEqual({ variant: 'solid', class: 'ring-(--ui-frame-color)' })
     expect(compounds).toContainEqual({ variant: 'soft', class: 'ring-(--ui-frame-color)' })

From 002fdf0f156a17af4338e6e45f68fbd77fd218ca Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 02:14:52 +0200
Subject: [PATCH 049/185] feat(docs): --studio-border-width variable scales all
 hand-rolled preview markup, sidebar cards and grid boundaries

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioBento.vue         |  2 +-
 .../theme-studio/ThemeStudioControls.vue      | 22 +++++++++----------
 .../theme-studio/ThemeStudioViewChat.vue      |  4 ++--
 .../theme-studio/ThemeStudioViewDashboard.vue |  8 +++----
 .../theme-studio/ThemeStudioViewLanding.vue   | 16 +++++++-------
 .../theme-studio/ThemeStudioViewSaas.vue      |  2 +-
 docs/app/composables/useTheme.ts              |  5 +++--
 docs/app/utils/theme-engine/export.ts         |  6 +++++
 docs/app/utils/theme-engine/import.ts         |  5 +++--
 docs/app/utils/theme-engine/styles.ts         |  9 ++++++++
 10 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioBento.vue b/docs/app/components/theme-studio/ThemeStudioBento.vue
index 42a259a007..46957d36d7 100644
--- a/docs/app/components/theme-studio/ThemeStudioBento.vue
+++ b/docs/app/components/theme-studio/ThemeStudioBento.vue
@@ -281,7 +281,7 @@ function showToast() {
         Table
       </p>
 
-      <UTable :data="invoices" :columns="invoiceColumns" class="border border-default rounded-md" />
+      <UTable :data="invoices" :columns="invoiceColumns" class="border-[length:var(--studio-border-width,1px)] border-default rounded-md" />
     </UCard>
 
     <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 579ed2bc18..39adfb3d92 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -369,7 +369,7 @@ const shadowColor = computed({
     >
       <template #colors>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
+          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
             <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Primary"
@@ -466,7 +466,7 @@ const shadowColor = computed({
             </div>
           </fieldset>
 
-          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
+          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
             <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Background"
@@ -549,7 +549,7 @@ const shadowColor = computed({
             </div>
           </fieldset>
 
-          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
+          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
             <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Semantic"
@@ -642,7 +642,7 @@ const shadowColor = computed({
 
       <template #style>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
+          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
             <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Radius"
@@ -677,7 +677,7 @@ const shadowColor = computed({
             </div>
           </fieldset>
 
-          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
+          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
             <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Sizing"
@@ -709,7 +709,7 @@ const shadowColor = computed({
             </div>
           </fieldset>
 
-          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
+          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
             <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Defaults"
@@ -753,7 +753,7 @@ const shadowColor = computed({
             </div>
           </fieldset>
 
-          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
+          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
             <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Shadows"
@@ -820,7 +820,7 @@ const shadowColor = computed({
             </div>
           </fieldset>
 
-          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
+          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
             <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Borders"
@@ -889,7 +889,7 @@ const shadowColor = computed({
 
       <template #tokens>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <fieldset v-for="group in tokenGroups" :key="group.key" class="rounded-md ring ring-default bg-default p-2.5">
+          <fieldset v-for="group in tokenGroups" :key="group.key" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
             <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 :label="group.label"
@@ -921,7 +921,7 @@ const shadowColor = computed({
 
       <template #general>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
+          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
             <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Font"
@@ -956,7 +956,7 @@ const shadowColor = computed({
             </div>
           </fieldset>
 
-          <fieldset class="rounded-md ring ring-default bg-default p-2.5">
+          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
             <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
               <UButton
                 label="Icons"
diff --git a/docs/app/components/theme-studio/ThemeStudioViewChat.vue b/docs/app/components/theme-studio/ThemeStudioViewChat.vue
index 421416bdd6..af11231765 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewChat.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewChat.vue
@@ -47,7 +47,7 @@ const messages: UIMessage[] = [{
 
 <template>
   <div class="h-full flex bg-default overflow-hidden">
-    <aside class="hidden md:flex w-56 shrink-0 flex-col gap-2 border-e border-default bg-elevated/25 p-3 min-h-0">
+    <aside class="hidden md:flex w-56 shrink-0 flex-col gap-2 border-e-[length:var(--studio-border-width,1px)] border-default bg-elevated/25 p-3 min-h-0">
       <div class="flex items-center gap-1.5 px-1.5 py-1">
         <UIcon name="i-lucide-message-circle" class="size-5 text-primary shrink-0" />
         <span class="text-lg font-bold text-highlighted">Chat</span>
@@ -71,7 +71,7 @@ const messages: UIMessage[] = [{
     </aside>
 
     <div class="flex-1 flex flex-col min-w-0 min-h-0">
-      <div class="h-12 shrink-0 flex items-center justify-between gap-2 border-b border-default px-4">
+      <div class="h-12 shrink-0 flex items-center justify-between gap-2 border-b-[length:var(--studio-border-width,1px)] border-default px-4">
         <p class="text-sm font-medium text-highlighted truncate">
           Building a dashboard with Nuxt UI
         </p>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue b/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
index 1d5dcc0bf4..ba9c0c99e9 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
@@ -162,7 +162,7 @@ const salesColumns: TableColumn<Sale>[] = [{
       collapsible
       resizable
       class="bg-elevated/25"
-      :ui="{ root: 'flex min-h-0', footer: 'border-t border-default' }"
+      :ui="{ root: 'flex min-h-0', footer: 'border-t-[length:var(--studio-border-width,1px)] border-default' }"
     >
       <template #header="{ collapsed }">
         <UDropdownMenu
@@ -270,7 +270,7 @@ const salesColumns: TableColumn<Sale>[] = [{
       <template #body>
         <!-- The preview pane is far narrower than the real template's page —
              two-up until xl, and the joined-border look only when four fit. -->
-        <UPageGrid class="grid-cols-2 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4 gap-4 xl:gap-px">
+        <UPageGrid class="grid-cols-2 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4 gap-4 xl:gap-[var(--studio-border-width,1px)]">
           <UPageCard
             v-for="stat in stats"
             :key="stat.title"
@@ -337,8 +337,8 @@ const salesColumns: TableColumn<Sale>[] = [{
             base: 'table-fixed border-separate border-spacing-0',
             thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
             tbody: '[&>tr]:last:[&>td]:border-b-0',
-            th: 'first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
-            td: 'border-b border-default'
+            th: 'first:rounded-l-lg last:rounded-r-lg border-y-[length:var(--studio-border-width,1px)] border-default first:border-l-[length:var(--studio-border-width,1px)] last:border-r-[length:var(--studio-border-width,1px)]',
+            td: 'border-b-[length:var(--studio-border-width,1px)] border-default'
           }"
         />
       </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewLanding.vue b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
index 5804e87217..2b2db4a825 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
@@ -105,7 +105,7 @@ const footerLinks = ['Docs', 'GitHub', 'Twitter', 'Status', 'Privacy']
 <template>
   <div class="h-full overflow-y-auto bg-default">
     <!-- Header -->
-    <header class="sticky top-0 z-10 border-b border-default bg-default/75 backdrop-blur">
+    <header class="sticky top-0 z-10 border-b-[length:var(--studio-border-width,1px)] border-default bg-default/75 backdrop-blur">
       <div class="flex h-14 items-center justify-between gap-3 px-4 sm:px-6">
         <div class="flex items-center gap-1.5">
           <UIcon name="i-lucide-activity" class="size-5 text-primary shrink-0" />
@@ -150,8 +150,8 @@ const footerLinks = ['Docs', 'GitHub', 'Twitter', 'Status', 'Privacy']
       </template>
 
       <div class="max-w-2xl mx-auto w-full">
-        <div class="rounded-xl border border-default bg-elevated/50 overflow-hidden font-mono text-xs sm:text-sm">
-          <div class="flex items-center gap-1.5 border-b border-default px-4 py-2.5">
+        <div class="rounded-xl border-[length:var(--studio-border-width,1px)] border-default bg-elevated/50 overflow-hidden font-mono text-xs sm:text-sm">
+          <div class="flex items-center gap-1.5 border-b-[length:var(--studio-border-width,1px)] border-default px-4 py-2.5">
             <span class="size-2.5 rounded-full bg-error/60" />
             <span class="size-2.5 rounded-full bg-warning/60" />
             <span class="size-2.5 rounded-full bg-success/60" />
@@ -188,8 +188,8 @@ const footerLinks = ['Docs', 'GitHub', 'Twitter', 'Status', 'Privacy']
         description: 'text-dimmed'
       }"
     >
-      <div class="rounded-2xl border border-default bg-default overflow-hidden">
-        <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-px">
+      <div class="rounded-2xl border-[length:var(--studio-border-width,1px)] border-default bg-default overflow-hidden">
+        <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-[var(--studio-border-width,1px)]">
           <UPageCard
             v-for="feature in features"
             :key="feature.title"
@@ -218,8 +218,8 @@ const footerLinks = ['Docs', 'GitHub', 'Twitter', 'Status', 'Privacy']
         description: 'text-dimmed'
       }"
     >
-      <div class="rounded-2xl border border-default bg-default overflow-hidden">
-        <div class="grid grid-cols-2 xl:grid-cols-4 gap-px">
+      <div class="rounded-2xl border-[length:var(--studio-border-width,1px)] border-default bg-default overflow-hidden">
+        <div class="grid grid-cols-2 xl:grid-cols-4 gap-[var(--studio-border-width,1px)]">
           <UPageCard
             v-for="metric in metrics"
             :key="metric.label"
@@ -289,7 +289,7 @@ const footerLinks = ['Docs', 'GitHub', 'Twitter', 'Status', 'Privacy']
     </UPageCTA>
 
     <!-- Footer -->
-    <UFooter :ui="{ container: 'border-t border-default', right: 'gap-x-0 flex-wrap justify-end' }">
+    <UFooter :ui="{ container: 'border-t-[length:var(--studio-border-width,1px)] border-default', right: 'gap-x-0 flex-wrap justify-end' }">
       <template #left>
         <p class="text-sm text-dimmed">
           Built with Nuxt UI • © 2026
diff --git a/docs/app/components/theme-studio/ThemeStudioViewSaas.vue b/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
index 3306717f5f..193dc33783 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
@@ -265,7 +265,7 @@ const email = ref('')
 
     <USeparator icon="i-lucide-rocket" class="h-px" />
 
-    <UFooter :ui="{ top: 'border-b border-default' }">
+    <UFooter :ui="{ top: 'border-b-[length:var(--studio-border-width,1px)] border-default' }">
       <template #top>
         <UContainer>
           <UFooterColumns :columns="footerColumns">
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 6a151805fd..379eb7cdb1 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -319,8 +319,9 @@ export function useTheme() {
 
     // Diff against the LIBRARY defaults, not the docs baseline — the export
     // must reproduce the preview on top of a stock @nuxt/ui install.
-    const light = Object.fromEntries(Object.entries(cssVariablesData.value.light || {}).filter(([key, val]) => val !== LIBRARY_TOKEN_DEFAULTS.light[key as keyof typeof LIBRARY_TOKEN_DEFAULTS.light]))
-    const dark = Object.fromEntries(Object.entries(cssVariablesData.value.dark || {}).filter(([key, val]) => val !== LIBRARY_TOKEN_DEFAULTS.dark[key as keyof typeof LIBRARY_TOKEN_DEFAULTS.dark]))
+    // Studio-only vars (hand-rolled preview markup) stay out of exports.
+    const light = Object.fromEntries(Object.entries(cssVariablesData.value.light || {}).filter(([key, val]) => !key.startsWith('--studio-') && val !== LIBRARY_TOKEN_DEFAULTS.light[key as keyof typeof LIBRARY_TOKEN_DEFAULTS.light]))
+    const dark = Object.fromEntries(Object.entries(cssVariablesData.value.dark || {}).filter(([key, val]) => !key.startsWith('--studio-') && val !== LIBRARY_TOKEN_DEFAULTS.dark[key as keyof typeof LIBRARY_TOKEN_DEFAULTS.dark]))
     if (Object.keys(light).length || Object.keys(dark).length) {
       doc.tokens = {
         ...(Object.keys(light).length ? { light } : {}),
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index 9f9415f808..95ba8e5195 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -64,7 +64,13 @@ export function generateCSS(doc: ThemeDoc): string {
 
   // Color variables behind the style treatment. Hard shadows always need
   // --ui-shadow-color defined; explicit color choices override per mode.
+  // Studio-only variables (hand-rolled preview markup) never export.
   const style = styleTokens(doc.style || {})
+  for (const mode of ['light', 'dark'] as const) {
+    for (const key of Object.keys(style[mode])) {
+      if (key.startsWith('--studio-')) Reflect.deleteProperty(style[mode], key)
+    }
+  }
   if (doc.style?.shadow === 'hard') {
     if (!style.light['--ui-shadow-color']) {
       style.light['--ui-shadow-color'] = 'var(--ui-color-neutral-950)'
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index e9a7303342..90c88f0e6e 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -139,11 +139,12 @@ function parseDeclaration(result: ParsedCSS, selector: string, prop: string, val
   }
 
   if (selector === ':root, .light' || selector === '.light') {
-    result.light[prop] = value
+    // studio-internal vars never carry theme meaning
+    if (!prop.startsWith('--studio-')) result.light[prop] = value
     return true
   }
   if (selector === '.dark') {
-    result.dark[prop] = value
+    if (!prop.startsWith('--studio-')) result.dark[prop] = value
     return true
   }
 
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index bd2608c6f5..470fb3cc4e 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -571,6 +571,15 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
     dark['--ui-shadow-color'] = value.dark
   }
 
+  // Studio-only: hand-rolled preview markup scales its borders through this
+  // variable (`border-[length:var(--studio-border-width,1px)]`), since the
+  // component fragments can't reach plain divs. Stripped from exports.
+  if (style.border && style.border !== 'default') {
+    const width = style.border === 'none' ? 0 : style.borderWidth ?? BORDER_WIDTH_DEFAULT
+    light['--studio-border-width'] = `${width}px`
+    dark['--studio-border-width'] = `${width}px`
+  }
+
   return { light, dark }
 }
 

From f8532413accc45ed55433d6b19e9c2ab3604592d Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 02:14:52 +0200
Subject: [PATCH 050/185] feat(docs): neo-brutalist rebuilt on the carbon
 neutral, art deco retired

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/utils/theme-engine/presets.ts | 83 ++++++++++++--------------
 1 file changed, 37 insertions(+), 46 deletions(-)

diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 69fb3b168d..a50d9dcdbc 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -48,20 +48,38 @@ export const presets: ThemePreset[] = [{
 }, {
   id: 'neo-brutalist',
   name: 'Neo-brutalist',
-  description: 'Amber on zinc — everything framed in ink, dropped hard shadows.',
+  description: 'Amber on a warm carbon neutral — everything framed in ink, dropped hard shadows.',
   icon: 'i-lucide-zap',
   doc: {
     version: 1,
     meta: { name: 'Neo-brutalist', base: 'neo-brutalist' },
+    // A sculpted warm neutral running lilac-tinted paper into pure carbon.
+    palettes: {
+      carbon: {
+        shades: {
+          50: 'oklch(98.5% 0.017 447.457)',
+          100: 'oklch(95.9% 0.036 438.639)',
+          200: 'oklch(92.6% 0.054 428.8)',
+          300: 'oklch(87% 0.053 417.734)',
+          400: 'oklch(70.5% 0.032 405.184)',
+          500: 'oklch(55.3% 0.014 390.836)',
+          600: 'oklch(44.7% 0.001 374.343)',
+          700: 'oklch(35.9% 0 0)',
+          800: 'oklch(28% 0 0)',
+          900: 'oklch(20.8% 0 0)',
+          950: 'oklch(14.1% 0.005 285.805)'
+        }
+      }
+    },
     colors: {
       primary: 'amber',
       secondary: 'yellow',
-      neutral: 'zinc'
+      neutral: 'carbon'
     },
     radius: 0.5,
     font: { sans: 'Outfit' },
-    // Framed everything in near-black ink, straight-down hard shadows, and
-    // a noir dark mode: surfaces lifted a step, every border crushed to 950.
+    // Framed everything in near-black ink, straight-down hard shadows, soft
+    // inked inputs, and both modes retuned shade-by-shade toward carbon.
     style: {
       shadow: 'hard',
       shadowGeometry: { x: 0, y: 3, blur: 0, spread: 0 },
@@ -69,53 +87,26 @@ export const presets: ThemePreset[] = [{
       frame: true,
       borderColor: 'shade',
       borderShade: { light: 900, dark: 950 },
+      defaults: { variants: { inputs: 'soft' } },
       tokenShades: {
-        '--ui-bg': { light: 50, dark: 800 },
-        '--ui-bg-elevated': { dark: 700 },
-        '--ui-bg-accented': { dark: 600 },
-        '--ui-bg-inverted': { dark: 50 },
+        '--ui-bg': { light: 100, dark: 800 },
+        '--ui-bg-muted': { light: 300 },
+        '--ui-bg-elevated': { light: 300, dark: 700 },
+        '--ui-bg-accented': { light: 400, dark: 600 },
+        '--ui-bg-inverted': { light: 900, dark: 50 },
         '--ui-text-inverted': { light: 50 },
-        '--ui-text-highlighted': { dark: 100 },
-        '--ui-text-dimmed': { dark: 400 },
-        '--ui-text-muted': { dark: 300 },
-        '--ui-border': { dark: 950 },
-        '--ui-border-muted': { dark: 950 },
-        '--ui-border-accented': { light: 400, dark: 950 },
-        '--ui-border-inverted': { dark: 50 }
+        '--ui-text-dimmed': { light: 500, dark: 400 },
+        '--ui-text-muted': { light: 800, dark: 300 },
+        '--ui-text-toned': { light: 900 },
+        '--ui-text': { light: 900 },
+        '--ui-text-highlighted': { light: 950, dark: 100 },
+        '--ui-border': { light: 950, dark: 950 },
+        '--ui-border-muted': { light: 950, dark: 950 },
+        '--ui-border-accented': { light: 950, dark: 950 },
+        '--ui-border-inverted': { light: 500, dark: 50 }
       }
     }
   }
-}, {
-  id: 'art-deco',
-  name: 'Art Deco',
-  description: 'Gilded amber lines on warm cream and charcoal.',
-  icon: 'i-lucide-landmark',
-  doc: {
-    version: 1,
-    meta: { name: 'Art Deco', base: 'art-deco' },
-    colors: {
-      primary: 'amber',
-      secondary: 'yellow',
-      neutral: 'stone'
-    },
-    radius: 0.5,
-    font: { sans: 'Raleway' },
-    tokens: {
-      light: {
-        '--ui-bg': 'var(--ui-color-primary-50)',
-        '--ui-border': 'var(--ui-color-primary-200)',
-        '--ui-border-accented': 'var(--ui-color-primary-300)'
-      },
-      dark: {
-        '--ui-border': 'var(--ui-color-primary-900)',
-        '--ui-border-accented': 'var(--ui-color-primary-800)'
-      }
-    },
-    style: {
-      border: 'custom',
-      borderColor: 'primary'
-    }
-  }
 }, {
   id: 'marshmallow',
   name: 'Marshmallow',

From 4e7beae655528b4ffdfd7a74c5c8389a1cab2d6e Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 11:31:00 +0200
Subject: [PATCH 051/185] =?UTF-8?q?fix(docs):=20curve=20editor=20=E2=80=94?=
 =?UTF-8?q?=20fixed=201:1=20axes,=20window-clamped=20drags,=20hue=20normal?=
 =?UTF-8?q?ized=20into=200-360?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioCurveEditor.vue   | 36 ++++++++-------
 .../theme-studio/ThemeStudioPaletteEditor.vue | 45 ++++++++++---------
 2 files changed, 46 insertions(+), 35 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
index 1bdd7c8cce..da71263387 100644
--- a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
@@ -29,6 +29,11 @@ function toY(value: number) {
   return PAD + (1 - (value - props.yMin) / (props.yMax - props.yMin)) * (H - 2 * PAD)
 }
 
+/** Handles stay grabbable even when a fitted param sits outside the window. */
+function toHandleY(value: number) {
+  return Math.min(H - PAD, Math.max(PAD, toY(value)))
+}
+
 function fromX(px: number) {
   return Math.min(1, Math.max(0, (px - PAD) / (W - 2 * PAD)))
 }
@@ -68,10 +73,10 @@ function onPointerDown(event: PointerEvent) {
   const c = curve.value
 
   const targets = [
-    { id: 'p1' as const, x: toX(c.p1x), y: toY(c.p1y) },
-    { id: 'p2' as const, x: toX(c.p2x), y: toY(c.p2y) },
-    { id: 'y0' as const, x: toX(0), y: toY(c.y0) },
-    { id: 'y1' as const, x: toX(1), y: toY(c.y1) }
+    { id: 'p1' as const, x: toX(c.p1x), y: toHandleY(c.p1y) },
+    { id: 'p2' as const, x: toX(c.p2x), y: toHandleY(c.p2y) },
+    { id: 'y0' as const, x: toX(0), y: toHandleY(c.y0) },
+    { id: 'y1' as const, x: toX(1), y: toHandleY(c.y1) }
   ]
 
   let best: { id: typeof dragging.value, distance: number } = { id: null, distance: 14 }
@@ -95,9 +100,10 @@ function onPointerMove(event: PointerEvent) {
 
   const point = svgPoint(event)
   const value = fromY(point.y)
-  // Allow moderate overshoot beyond the window, devtools-style.
-  const overshoot = (props.yMax - props.yMin) * 0.15
-  const clamped = Math.min(props.yMax + overshoot, Math.max(props.yMin - overshoot, value))
+  // Strictly window-clamped: an overshot handle would leave the canvas and
+  // become ungrabbable (and out-of-range lightness exports nonsense).
+  // Reaching further is the window's job — hue auto-pans at the edges.
+  const clamped = Math.min(props.yMax, Math.max(props.yMin, value))
 
   if (dragging.value === 'y0') {
     curve.value = { ...curve.value, y0: clamped }
@@ -155,18 +161,18 @@ function onPointerUp(event: PointerEvent) {
     <!-- handle connectors -->
     <line
       :x1="toX(0)"
-      :y1="toY(curve.y0)"
+      :y1="toHandleY(curve.y0)"
       :x2="toX(curve.p1x)"
-      :y2="toY(curve.p1y)"
+      :y2="toHandleY(curve.p1y)"
       class="stroke-(--ui-text-dimmed)"
       stroke-width="0.75"
       stroke-dasharray="2 2"
     />
     <line
       :x1="toX(1)"
-      :y1="toY(curve.y1)"
+      :y1="toHandleY(curve.y1)"
       :x2="toX(curve.p2x)"
-      :y2="toY(curve.p2y)"
+      :y2="toHandleY(curve.p2y)"
       class="stroke-(--ui-text-dimmed)"
       stroke-width="0.75"
       stroke-dasharray="2 2"
@@ -188,11 +194,11 @@ function onPointerUp(event: PointerEvent) {
     />
 
     <!-- handles -->
-    <circle :cx="toX(curve.p1x)" :cy="toY(curve.p1y)" r="4" class="fill-(--ui-bg) stroke-(--ui-text-muted)" stroke-width="1.25" />
-    <circle :cx="toX(curve.p2x)" :cy="toY(curve.p2y)" r="4" class="fill-(--ui-bg) stroke-(--ui-text-muted)" stroke-width="1.25" />
+    <circle :cx="toX(curve.p1x)" :cy="toHandleY(curve.p1y)" r="4" class="fill-(--ui-bg) stroke-(--ui-text-muted)" stroke-width="1.25" />
+    <circle :cx="toX(curve.p2x)" :cy="toHandleY(curve.p2y)" r="4" class="fill-(--ui-bg) stroke-(--ui-text-muted)" stroke-width="1.25" />
 
     <!-- endpoints -->
-    <circle :cx="toX(0)" :cy="toY(curve.y0)" r="4.5" class="fill-(--ui-text-highlighted)" />
-    <circle :cx="toX(1)" :cy="toY(curve.y1)" r="4.5" class="fill-(--ui-text-highlighted)" />
+    <circle :cx="toX(0)" :cy="toHandleY(curve.y0)" r="4.5" class="fill-(--ui-text-highlighted)" />
+    <circle :cx="toX(1)" :cy="toHandleY(curve.y1)" r="4.5" class="fill-(--ui-text-highlighted)" />
   </svg>
 </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index d0694ec5e6..329d02bfd4 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -28,6 +28,8 @@ const params = reactive<PaletteCurveParams>(
   // Older stored shapes (anchor/slider based) are simply refitted on open.
   stored && 'lightness' in stored ? structuredClone(toRaw(stored)) as PaletteCurveParams : defaults()
 )
+// Stored params may predate the fixed 0–360 axis (or carry unwrapped hues).
+normalizeHue(params)
 
 const active = computed(() => isCustomPalette(props.alias))
 
@@ -38,24 +40,28 @@ const stopColors = computed(() => SHADES.map(shade => shades.value[shade]))
 const contrast = computed(() => contrastRatio(shades.value[500]!, '#FFFFFF'))
 
 /**
- * The hue axis window floats around the curve (a full 0–360 axis would make
- * drifts invisible); frozen while editing so the canvas doesn't chase the
- * pointer. Lightness and chroma have fixed, comparable windows.
+ * Every axis is a fixed 1:1 window — the full physical range fits the
+ * canvas, so dragging never pans or rescales under the pointer. Hue params
+ * are normalized into 0–360 on seed instead (cyclic, so shifting by full
+ * turns is color-identical; fitPalette unwraps across the seam).
  */
-const hueWindow = ref({ min: 0, max: 360 })
-
-function recenterHueWindow() {
-  const values = [params.hue.y0, params.hue.y1, params.hue.p1y, params.hue.p2y]
-  const center = (Math.min(...values) + Math.max(...values)) / 2
-  const span = Math.max(90, (Math.max(...values) - Math.min(...values)) + 40)
-  hueWindow.value = { min: center - span / 2, max: center + span / 2 }
-}
-
-const windows = computed(() => ({
+const windows = {
   lightness: { min: 0, max: 1 },
   chroma: { min: 0, max: 0.35 },
-  hue: hueWindow.value
-}))
+  hue: { min: 0, max: 360 }
+}
+
+function normalizeHue(values: PaletteCurveParams) {
+  const points = [values.hue.y0, values.hue.y1, values.hue.p1y, values.hue.p2y]
+  const mean = points.reduce((sum, value) => sum + value, 0) / points.length
+  const shift = -360 * Math.floor(mean / 360)
+  if (shift !== 0) {
+    values.hue.y0 += shift
+    values.hue.y1 += shift
+    values.hue.p1y += shift
+    values.hue.p2y += shift
+  }
+}
 
 const styleOffset = ref('fitted')
 
@@ -88,13 +94,14 @@ const { ignoreUpdates } = watchIgnorable(params, () => {
 })
 
 function seed(values: PaletteCurveParams) {
-  seedBase = structuredClone(toRaw(values))
+  const next = structuredClone(toRaw(values))
+  normalizeHue(next)
+  seedBase = structuredClone(next)
   styleOffset.value = 'fitted'
   offsetAmount.value = 100
   ignoreUpdates(() => {
-    Object.assign(params, structuredClone(toRaw(values)))
+    Object.assign(params, next)
   })
-  recenterHueWindow()
 }
 
 // While dragging, a global class turns on short color transitions so the
@@ -209,7 +216,6 @@ function applyStyleOffset(name: string) {
 
   // Not seed(): this IS a user edit, the watcher should live-apply it.
   Object.assign(params, next)
-  recenterHueWindow()
 }
 
 function remove() {
@@ -227,7 +233,6 @@ function remove() {
       size="xs"
       color="neutral"
       :ui="{ trigger: 'text-[11px]' }"
-      @update:model-value="tab === 'hue' && recenterHueWindow()"
     />
 
     <ThemeStudioCurveEditor

From 4ce960d84eb46f1d974520842871a5eed3163cfa Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 11:38:25 +0200
Subject: [PATCH 052/185] =?UTF-8?q?fix(docs):=20dashboard=20panel=20childr?=
 =?UTF-8?q?en=20keep=20their=20height=20=E2=80=94=20flex=20was=20crushing?=
 =?UTF-8?q?=20the=20revenue=20card=20into=20its=20overflow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/theme-studio/ThemeStudioViewDashboard.vue    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue b/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
index ba9c0c99e9..415faa5158 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
@@ -270,7 +270,9 @@ const salesColumns: TableColumn<Sale>[] = [{
       <template #body>
         <!-- The preview pane is far narrower than the real template's page —
              two-up until xl, and the joined-border look only when four fit. -->
-        <UPageGrid class="grid-cols-2 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4 gap-4 xl:gap-[var(--studio-border-width,1px)]">
+        <!-- shrink-0 everywhere: the panel body is a scrollable flex column,
+             and a shrinking child gets crushed into its own overflow-hidden -->
+        <UPageGrid class="shrink-0 grid-cols-2 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4 gap-4 xl:gap-[var(--studio-border-width,1px)]">
           <UPageCard
             v-for="stat in stats"
             :key="stat.title"
@@ -296,7 +298,7 @@ const salesColumns: TableColumn<Sale>[] = [{
           </UPageCard>
         </UPageGrid>
 
-        <UCard :ui="{ body: 'px-0! pt-0! pb-3!' }">
+        <UCard class="shrink-0" :ui="{ body: 'px-0! pt-0! pb-3!' }">
           <template #header>
             <div>
               <p class="text-xs text-muted uppercase mb-1.5">

From ddedd68be3f13187611820a3832069c7908c05e4 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 13:02:09 +0200
Subject: [PATCH 053/185] feat(docs): enhance ThemeStudioControls with preset
 swatches and new Orchard preset

- Added a `presetSwatches` function to compute primary and neutral color swatches for presets.
- Updated `presetItems` to include swatches in the dropdown menu.
- Introduced a new 'Orchard' preset with a detailed color palette and styling options.
- Adjusted layout and styling in ThemeStudioControls for improved UI consistency.
---
 .../theme-studio/ThemeStudioControls.vue      |  69 ++++++----
 docs/app/pages/theme.vue                      |   2 +-
 docs/app/utils/theme-engine/presets.ts        | 124 +++++++++---------
 3 files changed, 110 insertions(+), 85 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 39adfb3d92..332e362efe 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, BORDER_WIDTH_DEFAULT, SHADOW_GEOMETRY_DEFAULTS } from '../../utils/theme-engine'
-import type { VariantGroup, TokenRamp, ColorAlias } from '../../utils/theme-engine'
+import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, BORDER_WIDTH_DEFAULT, SHADOW_GEOMETRY_DEFAULTS, resolveAlias, resolveShade } from '../../utils/theme-engine'
+import type { VariantGroup, TokenRamp, ColorAlias, ThemeDoc } from '../../utils/theme-engine'
 
 const appConfig = useAppConfig()
 
@@ -24,11 +24,19 @@ const {
 
 const { selectPalette, isCustomPalette, style, setStyle, presets, activePreset, applyPreset, shuffle } = useThemeStudio()
 
+/** The preset's primary + neutral at 500, straight from its own document. */
+function presetSwatches(doc: ThemeDoc): string[] {
+  const primary = doc.blackAsPrimary ? 'black' : resolveShade(doc, resolveAlias(doc, 'primary'), 500)
+  const neutral = resolveShade(doc, resolveAlias(doc, 'neutral'), 500)
+  return [primary, neutral].filter((color): color is string => !!color)
+}
+
 const presetItems = computed(() => presets.map(preset => ({
   label: preset.name,
   icon: preset.icon,
   type: 'checkbox' as const,
   checked: activePreset.value === preset.id,
+  swatches: presetSwatches(preset.doc),
   onSelect: () => applyPreset(preset)
 })))
 
@@ -322,50 +330,67 @@ const shadowColor = computed({
 </script>
 
 <template>
-  <div class="flex flex-col gap-3">
-    <UTabs
-      v-model="modeTab"
-      :items="modeTabs"
-      :content="false"
-      size="xs"
-      color="primary"
-      class="w-full"
-      :ui="{ trigger: 'text-[11px] capitalize' }"
-    />
-
-    <UFieldGroup size="sm" class="flex w-full">
-      <UDropdownMenu :items="presetItems" :content="{ align: 'start' }" class="flex-1 min-w-0">
+  <div class="flex flex-col gap-4">
+    <div
+      class="flex gap-2 p-4 pb-0"
+    >
+      <UDropdownMenu
+        :items="presetItems"
+        :content="{ align: 'start' }"
+        class="flex-1 min-w-0"
+        :ui="{ itemTrailing: 'self-center', content: 'w-(--reka-dropdown-menu-trigger-width)' }"
+      >
         <UButton
           :label="presetLabel"
           icon="i-lucide-swatch-book"
           trailing-icon="i-lucide-chevron-down"
           color="neutral"
-          variant="outline"
-          size="sm"
+          variant="subtle"
           block
           class="justify-start ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
           :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
         />
+
+        <template #item-trailing="{ item }">
+          <span class="inline-flex items-center gap-1 h-full">
+            <span
+              v-for="(swatch, index) in item.swatches"
+              :key="index"
+              class="size-2 rounded-full ring ring-default"
+              :style="{ backgroundColor: swatch }"
+            />
+          </span>
+        </template>
       </UDropdownMenu>
 
       <UTooltip text="Random theme">
         <UButton
           icon="i-lucide-dices"
           color="neutral"
-          variant="outline"
-          size="sm"
+          variant="subtle"
+
           aria-label="Random theme"
           class="ring-default rounded-sm hover:bg-elevated/50"
           @click="shuffle"
         />
       </UTooltip>
-    </UFieldGroup>
+    </div>
+    <UTabs
+      v-model="modeTab"
+      :items="modeTabs"
+      :content="false"
+      size="sm"
+      color="primary"
+      class="w-full px-4 "
+      :ui="{ trigger: ' capitalize' }"
+    />
 
     <UAccordion
       v-model="openGroups"
-
+      :ui="{ content: 'px-4', header: 'px-6' }"
       :items="groupItems"
       :unmount-on-hide="false"
+      class="border-y border-default"
     >
       <template #colors>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
@@ -453,7 +478,7 @@ const shadowColor = computed({
                   :icon="isCustomPalette('primary') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
                   color="neutral"
                   variant="outline"
-                  size="sm"
+
                   aria-label="Edit primary palette"
                   class="ring-default rounded-sm hover:bg-elevated/50"
                   :class="{ 'bg-elevated/50': paletteEditors.primary }"
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 869f403a88..74f166c407 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -56,7 +56,7 @@ const viewTabs = [
   <main class="flex flex-col lg:flex-row lg:h-[calc(100vh-var(--ui-header-height))]">
     <aside
       v-show="sidebarOpen"
-      class="shrink-0 lg:w-80 border-default lg:overflow-y-auto p-4 sm:px-6"
+      class="shrink-0 lg:w-80 border-default lg:overflow-y-auto"
       :class="SIDEBAR_EDGE[chromeWidth]"
     >
       <ThemeStudioControls />
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index a50d9dcdbc..10674d8409 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -107,6 +107,68 @@ export const presets: ThemePreset[] = [{
       }
     }
   }
+}, {
+  id: 'orchard',
+  name: 'Orchard',
+  description: 'Orange on deep sage greens — subtle surfaces, dropped hard shadows.',
+  icon: 'i-lucide-citrus',
+  doc: {
+    version: 1,
+    meta: { name: 'Orchard', base: 'orchard' },
+    // A sculpted green-tinted neutral (studio curve editor) whose light end
+    // starts far below white — the whole page sits on foliage.
+    palettes: {
+      grove: {
+        shades: {
+          50: 'oklch(91% 0.044 140.516)',
+          100: 'oklch(84.7% 0.045 140.375)',
+          200: 'oklch(78.6% 0.046 140.572)',
+          300: 'oklch(72.4% 0.046 141.493)',
+          400: 'oklch(65.8% 0.045 142.245)',
+          500: 'oklch(59% 0.039 142.85)',
+          600: 'oklch(52.1% 0.033 143.372)',
+          700: 'oklch(45.1% 0.028 143.839)',
+          800: 'oklch(38.2% 0.024 144.268)',
+          900: 'oklch(31.2% 0.02 144.666)',
+          950: 'oklch(24.2% 0.017 145.041)'
+        }
+      }
+    },
+    colors: {
+      primary: 'orange',
+      neutral: 'grove'
+    },
+    radius: 0.5,
+    font: { sans: 'DM Sans' },
+    tokens: {
+      light: {
+        '--ui-bg': 'var(--ui-color-neutral-50)',
+        '--ui-text-inverted': 'var(--ui-color-neutral-50)'
+      },
+      dark: {
+        '--ui-text-highlighted': 'var(--ui-color-neutral-50)'
+      }
+    },
+    // Exercises the newest axes together: straight-down hard shadow at 55%,
+    // app-wide subtle variants, and per-mode shades for the surface stack
+    // plus the success/error alias tokens.
+    style: {
+      shadow: 'hard',
+      shadowColor: 'shade',
+      shadowShade: { light: 950, dark: 950 },
+      shadowOpacity: 55,
+      shadowGeometry: { x: 0, y: 3, blur: 0, spread: 0 },
+      defaults: { variant: 'subtle' },
+      tokenShades: {
+        '--ui-bg-muted': { light: 100 },
+        '--ui-bg-elevated': { light: 200 },
+        '--ui-bg-accented': { light: 300 },
+        '--ui-border': { dark: 950 },
+        '--ui-success': { light: 600, dark: 300 },
+        '--ui-error': { light: 600, dark: 300 }
+      }
+    }
+  }
 }, {
   id: 'marshmallow',
   name: 'Marshmallow',
@@ -414,66 +476,4 @@ export const presets: ThemePreset[] = [{
       }
     }
   }
-}, {
-  id: 'orchard',
-  name: 'Orchard',
-  description: 'Orange on deep sage greens — subtle surfaces, dropped hard shadows.',
-  icon: 'i-lucide-citrus',
-  doc: {
-    version: 1,
-    meta: { name: 'Orchard', base: 'orchard' },
-    // A sculpted green-tinted neutral (studio curve editor) whose light end
-    // starts far below white — the whole page sits on foliage.
-    palettes: {
-      grove: {
-        shades: {
-          50: 'oklch(91% 0.044 140.516)',
-          100: 'oklch(84.7% 0.045 140.375)',
-          200: 'oklch(78.6% 0.046 140.572)',
-          300: 'oklch(72.4% 0.046 141.493)',
-          400: 'oklch(65.8% 0.045 142.245)',
-          500: 'oklch(59% 0.039 142.85)',
-          600: 'oklch(52.1% 0.033 143.372)',
-          700: 'oklch(45.1% 0.028 143.839)',
-          800: 'oklch(38.2% 0.024 144.268)',
-          900: 'oklch(31.2% 0.02 144.666)',
-          950: 'oklch(24.2% 0.017 145.041)'
-        }
-      }
-    },
-    colors: {
-      primary: 'orange',
-      neutral: 'grove'
-    },
-    radius: 0.5,
-    font: { sans: 'DM Sans' },
-    tokens: {
-      light: {
-        '--ui-bg': 'var(--ui-color-neutral-50)',
-        '--ui-text-inverted': 'var(--ui-color-neutral-50)'
-      },
-      dark: {
-        '--ui-text-highlighted': 'var(--ui-color-neutral-50)'
-      }
-    },
-    // Exercises the newest axes together: straight-down hard shadow at 55%,
-    // app-wide subtle variants, and per-mode shades for the surface stack
-    // plus the success/error alias tokens.
-    style: {
-      shadow: 'hard',
-      shadowColor: 'shade',
-      shadowShade: { light: 950, dark: 950 },
-      shadowOpacity: 55,
-      shadowGeometry: { x: 0, y: 3, blur: 0, spread: 0 },
-      defaults: { variant: 'subtle' },
-      tokenShades: {
-        '--ui-bg-muted': { light: 100 },
-        '--ui-bg-elevated': { light: 200 },
-        '--ui-bg-accented': { light: 300 },
-        '--ui-border': { dark: 950 },
-        '--ui-success': { light: 600, dark: 300 },
-        '--ui-error': { light: 600, dark: 300 }
-      }
-    }
-  }
 }]

From ccfdb1366e6abda750cb68ae8cd6300d176e649a Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 13:35:46 +0200
Subject: [PATCH 054/185] fix(docs): dead semantic help link fataled the
 prerender; heap headroom for the docs build

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 39 +++++++++++--------
 package.json                                  |  2 +-
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 332e362efe..c03d9c175f 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -423,7 +423,7 @@ const shadowColor = computed({
                 <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
                   <UButton
                     color="neutral"
-                    variant="outline"
+                    variant="subtle"
                     size="sm"
                     block
                     trailing-icon="i-lucide-chevron-down"
@@ -477,12 +477,13 @@ const shadowColor = computed({
                 <UButton
                   :icon="isCustomPalette('primary') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
                   color="neutral"
-                  variant="outline"
-
+                  variant="subtle"
+                  :active="paletteEditors.primary || isCustomPalette('primary')"
+                  active-color="primary"
+                  active-variant="subtle"
                   aria-label="Edit primary palette"
-                  class="ring-default rounded-sm hover:bg-elevated/50"
-                  :class="{ 'bg-elevated/50': paletteEditors.primary }"
-                  :ui="{ leadingIcon: isCustomPalette('primary') ? 'text-primary size-3.5' : 'size-3.5' }"
+                  class="rounded-sm"
+                  :ui="{ leadingIcon: 'size-3.5' }"
                   @click="paletteEditors.primary = !paletteEditors.primary"
                 />
               </UFieldGroup>
@@ -518,7 +519,7 @@ const shadowColor = computed({
                 <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
                   <UButton
                     color="neutral"
-                    variant="outline"
+                    variant="subtle"
                     size="sm"
                     block
                     trailing-icon="i-lucide-chevron-down"
@@ -560,12 +561,14 @@ const shadowColor = computed({
                 <UButton
                   :icon="isCustomPalette('neutral') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
                   color="neutral"
-                  variant="outline"
+                  variant="subtle"
                   size="sm"
+                  :active="paletteEditors.neutral || isCustomPalette('neutral')"
+                  active-color="primary"
+                  active-variant="subtle"
                   aria-label="Edit background palette"
-                  class="ring-default rounded-sm hover:bg-elevated/50"
-                  :class="{ 'bg-elevated/50': paletteEditors.neutral }"
-                  :ui="{ leadingIcon: isCustomPalette('neutral') ? 'text-primary size-3.5' : 'size-3.5' }"
+                  class="rounded-sm"
+                  :ui="{ leadingIcon: 'size-3.5' }"
                   @click="paletteEditors.neutral = !paletteEditors.neutral"
                 />
               </UFieldGroup>
@@ -587,7 +590,7 @@ const shadowColor = computed({
               />
 
               <UButton
-                to="/docs/getting-started/theme/colors"
+                to="/docs/getting-started/theme/design-system"
                 size="xs"
                 color="neutral"
                 variant="ghost"
@@ -605,7 +608,7 @@ const shadowColor = computed({
                     <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
                       <UButton
                         color="neutral"
-                        variant="outline"
+                        variant="subtle"
                         size="sm"
                         block
                         trailing-icon="i-lucide-chevron-down"
@@ -647,12 +650,14 @@ const shadowColor = computed({
                     <UButton
                       :icon="isCustomPalette(alias) ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
                       color="neutral"
-                      variant="outline"
+                      variant="subtle"
                       size="sm"
+                      :active="paletteEditors[alias] || isCustomPalette(alias)"
+                      active-color="primary"
+                      active-variant="subtle"
                       :aria-label="`Edit ${alias} palette`"
-                      class="ring-default rounded-sm hover:bg-elevated/50"
-                      :class="{ 'bg-elevated/50': paletteEditors[alias] }"
-                      :ui="{ leadingIcon: isCustomPalette(alias) ? 'text-primary size-3.5' : 'size-3.5' }"
+                      class="rounded-sm"
+                      :ui="{ leadingIcon: 'size-3.5' }"
                       @click="paletteEditors[alias] = !paletteEditors[alias]"
                     />
                   </UFieldGroup>
diff --git a/package.json b/package.json
index 2eba0da0f0..8baec0a9c7 100644
--- a/package.json
+++ b/package.json
@@ -117,7 +117,7 @@
     "repl:build": "pnpm --filter './playgrounds/repl' build",
     "repl:prepare": "nuxt-module-build build --stub && mkdir -p .nuxt && echo '{\"compilerOptions\":{}}' > .nuxt/tsconfig.json",
     "docs": "nuxt dev docs --uiDev",
-    "docs:build": "nuxt build docs",
+    "docs:build": "NODE_OPTIONS=--max-old-space-size=8192 nuxt build docs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "typecheck": "vue-tsc --noEmit && nuxt typecheck playgrounds/nuxt && nuxt typecheck docs && cd playgrounds/vue && vue-tsc --noEmit",

From 5a68c91125dd8833b2988c7b33edf8b5ef36d65c Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 14:45:02 +0200
Subject: [PATCH 055/185] =?UTF-8?q?refactor(docs):=20drop=20skin=20classes?=
 =?UTF-8?q?=20and=20ui=20injections=20from=20studio=20controls=20=E2=80=94?=
 =?UTF-8?q?=20stock=20variants=20and=20active=20props?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-picker/ThemePickerButton.vue        |  8 ++-
 .../theme-studio/ThemeStudioControls.vue      | 69 ++++++-------------
 .../theme-studio/ThemeStudioPaletteEditor.vue |  4 +-
 3 files changed, 27 insertions(+), 54 deletions(-)

diff --git a/docs/app/components/theme-picker/ThemePickerButton.vue b/docs/app/components/theme-picker/ThemePickerButton.vue
index 21f5f7e48d..d67ea1bd4a 100644
--- a/docs/app/components/theme-picker/ThemePickerButton.vue
+++ b/docs/app/components/theme-picker/ThemePickerButton.vue
@@ -15,11 +15,13 @@ const slots = defineSlots<{
   <UButton
     size="sm"
     color="neutral"
-    variant="outline"
+    variant="subtle"
+    :active="selected"
+    active-color="primary"
+    active-variant="subtle"
     :icon="icon"
     :label="label"
-    class="capitalize rounded-sm text-[11px]"
-    :class="[selected ? 'ring-primary bg-primary/10 text-highlighted' : 'ring-default hover:bg-elevated/50']"
+    class="capitalize"
   >
     <template v-if="chip || !!slots.leading" #leading>
       <slot name="leading">
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index c03d9c175f..4fcc020793 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -347,8 +347,6 @@ const shadowColor = computed({
           color="neutral"
           variant="subtle"
           block
-          class="justify-start ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
-          :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
         />
 
         <template #item-trailing="{ item }">
@@ -368,9 +366,7 @@ const shadowColor = computed({
           icon="i-lucide-dices"
           color="neutral"
           variant="subtle"
-
           aria-label="Random theme"
-          class="ring-default rounded-sm hover:bg-elevated/50"
           @click="shuffle"
         />
       </UTooltip>
@@ -403,7 +399,7 @@ const shadowColor = computed({
                 size="xs"
                 icon="i-lucide-chevron-down"
 
-                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.primary && '-rotate-90'] }"
+                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.primary && '-rotate-90'] }"
                 @click="openSections.primary = !openSections.primary"
               />
 
@@ -413,8 +409,6 @@ const shadowColor = computed({
                 color="neutral"
                 variant="ghost"
                 icon="i-lucide-help-circle"
-
-                :ui="{ leadingIcon: 'size-3' }"
               />
             </legend>
 
@@ -427,8 +421,7 @@ const shadowColor = computed({
                     size="sm"
                     block
                     trailing-icon="i-lucide-chevron-down"
-                    class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
-                    :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                    class="capitalize"
                   >
                     <template #leading>
                       <span
@@ -482,8 +475,6 @@ const shadowColor = computed({
                   active-color="primary"
                   active-variant="subtle"
                   aria-label="Edit primary palette"
-                  class="rounded-sm"
-                  :ui="{ leadingIcon: 'size-3.5' }"
                   @click="paletteEditors.primary = !paletteEditors.primary"
                 />
               </UFieldGroup>
@@ -500,7 +491,7 @@ const shadowColor = computed({
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.neutral && '-rotate-90'] }"
+                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.neutral && '-rotate-90'] }"
                 @click="openSections.neutral = !openSections.neutral"
               />
 
@@ -510,7 +501,6 @@ const shadowColor = computed({
                 color="neutral"
                 variant="ghost"
                 icon="i-lucide-help-circle"
-                :ui="{ leadingIcon: 'size-3' }"
               />
             </legend>
 
@@ -523,8 +513,7 @@ const shadowColor = computed({
                     size="sm"
                     block
                     trailing-icon="i-lucide-chevron-down"
-                    class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
-                    :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                    class="capitalize"
                   >
                     <template #leading>
                       <span
@@ -567,8 +556,6 @@ const shadowColor = computed({
                   active-color="primary"
                   active-variant="subtle"
                   aria-label="Edit background palette"
-                  class="rounded-sm"
-                  :ui="{ leadingIcon: 'size-3.5' }"
                   @click="paletteEditors.neutral = !paletteEditors.neutral"
                 />
               </UFieldGroup>
@@ -585,7 +572,7 @@ const shadowColor = computed({
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.semantic && '-rotate-90'] }"
+                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.semantic && '-rotate-90'] }"
                 @click="openSections.semantic = !openSections.semantic"
               />
 
@@ -595,7 +582,6 @@ const shadowColor = computed({
                 color="neutral"
                 variant="ghost"
                 icon="i-lucide-help-circle"
-                :ui="{ leadingIcon: 'size-3' }"
               />
             </legend>
 
@@ -612,8 +598,7 @@ const shadowColor = computed({
                         size="sm"
                         block
                         trailing-icon="i-lucide-chevron-down"
-                        class="justify-start capitalize ring-default rounded-sm text-[11px] hover:bg-elevated/50 data-[state=open]:bg-elevated/50"
-                        :ui="{ trailingIcon: 'ms-auto size-4 group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                        class="capitalize"
                       >
                         <template #leading>
                           <span
@@ -656,8 +641,6 @@ const shadowColor = computed({
                       active-color="primary"
                       active-variant="subtle"
                       :aria-label="`Edit ${alias} palette`"
-                      class="rounded-sm"
-                      :ui="{ leadingIcon: 'size-3.5' }"
                       @click="paletteEditors[alias] = !paletteEditors[alias]"
                     />
                   </UFieldGroup>
@@ -680,7 +663,7 @@ const shadowColor = computed({
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.radius && '-rotate-90'] }"
+                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.radius && '-rotate-90'] }"
                 @click="openSections.radius = !openSections.radius"
               />
 
@@ -690,7 +673,6 @@ const shadowColor = computed({
                 color="neutral"
                 variant="ghost"
                 icon="i-lucide-help-circle"
-                :ui="{ leadingIcon: 'size-3' }"
               />
             </legend>
 
@@ -715,7 +697,7 @@ const shadowColor = computed({
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.sizing && '-rotate-90'] }"
+                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.sizing && '-rotate-90'] }"
                 @click="openSections.sizing = !openSections.sizing"
               />
             </legend>
@@ -747,7 +729,7 @@ const shadowColor = computed({
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.defaults && '-rotate-90'] }"
+                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.defaults && '-rotate-90'] }"
                 @click="openSections.defaults = !openSections.defaults"
               />
             </legend>
@@ -762,8 +744,7 @@ const shadowColor = computed({
                   color="neutral"
                   icon="i-lucide-layers"
                   :items="field.items"
-                  class="flex-1 ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
-                  :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                  class="flex-1"
                 />
               </div>
 
@@ -776,8 +757,7 @@ const shadowColor = computed({
                   color="neutral"
                   icon="i-lucide-proportions"
                   :items="defaultSizeItems"
-                  class="flex-1 ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
-                  :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                  class="flex-1"
                 />
               </div>
             </div>
@@ -791,7 +771,7 @@ const shadowColor = computed({
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.shadows && '-rotate-90'] }"
+                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.shadows && '-rotate-90'] }"
                 @click="openSections.shadows = !openSections.shadows"
               />
             </legend>
@@ -802,7 +782,6 @@ const shadowColor = computed({
                   v-for="option in shadowOptions"
                   :key="option.value"
                   :label="option.label"
-                  class="justify-center px-0"
                   :selected="(style.shadow || 'none') === option.value"
                   @click="setStyle({ shadow: option.value })"
                 />
@@ -815,8 +794,7 @@ const shadowColor = computed({
                   color="neutral"
                   icon="i-lucide-paint-bucket"
                   :items="shadowColorItems"
-                  class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
-                  :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                  class="w-full"
                 />
 
                 <template v-if="shadowColor === 'shade' || shadowColor === 'primary-shade'">
@@ -858,7 +836,7 @@ const shadowColor = computed({
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.borders && '-rotate-90'] }"
+                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.borders && '-rotate-90'] }"
                 @click="openSections.borders = !openSections.borders"
               />
             </legend>
@@ -869,7 +847,6 @@ const shadowColor = computed({
                   v-for="option in borderOptions"
                   :key="option.value"
                   :label="option.label"
-                  class="justify-center px-0"
                   :selected="borderStyle === option.value"
                   @click="setStyle({ border: option.value })"
                 />
@@ -898,8 +875,7 @@ const shadowColor = computed({
                   color="neutral"
                   icon="i-lucide-paint-bucket"
                   :items="borderColorItems"
-                  class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
-                  :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                  class="w-full"
                 />
 
                 <template v-if="borderColor === 'shade' || borderColor === 'primary-shade'">
@@ -927,7 +903,7 @@ const shadowColor = computed({
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections[`tokens-${group.key}`] && '-rotate-90'] }"
+                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections[`tokens-${group.key}`] && '-rotate-90'] }"
                 @click="openSections[`tokens-${group.key}`] = !openSections[`tokens-${group.key}`]"
               />
             </legend>
@@ -959,7 +935,7 @@ const shadowColor = computed({
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.font && '-rotate-90'] }"
+                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.font && '-rotate-90'] }"
                 @click="openSections.font = !openSections.font"
               />
 
@@ -969,7 +945,6 @@ const shadowColor = computed({
                 color="neutral"
                 variant="ghost"
                 icon="i-lucide-help-circle"
-                :ui="{ leadingIcon: 'size-3' }"
               />
             </legend>
 
@@ -980,8 +955,7 @@ const shadowColor = computed({
                 color="neutral"
                 icon="i-lucide-type"
                 :items="fonts"
-                class="w-full ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
-                :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                class="w-full"
               />
             </div>
           </fieldset>
@@ -994,7 +968,7 @@ const shadowColor = computed({
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['size-3 text-dimmed transition-transform duration-200', !openSections.icons && '-rotate-90'] }"
+                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.icons && '-rotate-90'] }"
                 @click="openSections.icons = !openSections.icons"
               />
 
@@ -1004,7 +978,6 @@ const shadowColor = computed({
                 color="neutral"
                 variant="ghost"
                 icon="i-lucide-help-circle"
-                :ui="{ leadingIcon: 'size-3' }"
               />
             </legend>
 
@@ -1015,8 +988,8 @@ const shadowColor = computed({
                 color="neutral"
                 :icon="icons.find(i => i.value === icon)?.icon"
                 :items="icons"
-                class="w-full ring-default rounded-sm hover:bg-elevated/50 capitalize text-xs data-[state=open]:bg-elevated/50"
-                :ui="{ item: 'capitalize text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                class="w-full capitalize"
+                :ui="{ item: 'capitalize' }"
               />
             </div>
           </fieldset>
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 329d02bfd4..c154e8b694 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -232,7 +232,6 @@ function remove() {
       :content="false"
       size="xs"
       color="neutral"
-      :ui="{ trigger: 'text-[11px]' }"
     />
 
     <ThemeStudioCurveEditor
@@ -268,8 +267,7 @@ function remove() {
         color="neutral"
         icon="i-lucide-sparkles"
         :items="styleOffsetItems"
-        class="flex-1 ring-default rounded-sm hover:bg-elevated/50 text-xs data-[state=open]:bg-elevated/50"
-        :ui="{ item: 'text-xs', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+        class="flex-1"
         @update:model-value="applyStyleOffset($event as string)"
       />
 

From 8642837b8f2d210564c4b2e56fb98d5c75a10ba4 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 14:54:27 +0200
Subject: [PATCH 056/185] =?UTF-8?q?feat(docs):=20A11y=20view=20=E2=80=94?=
 =?UTF-8?q?=20live=20WCAG=20contrast=20matrix;=20contrast=20badge=20retire?=
 =?UTF-8?q?d=20from=20the=20palette=20editor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioBento.vue         |  10 +-
 .../theme-studio/ThemeStudioCurveEditor.vue   |   4 +-
 .../theme-studio/ThemeStudioPaletteEditor.vue |  38 ++--
 .../theme-studio/ThemeStudioViewA11y.vue      | 174 ++++++++++++++++++
 docs/app/pages/theme.vue                      |   4 +-
 docs/app/utils/theme-engine/oklch.ts          |   4 +
 test/utils/theme-color-parse.spec.ts          |   5 +
 7 files changed, 206 insertions(+), 33 deletions(-)
 create mode 100644 docs/app/components/theme-studio/ThemeStudioViewA11y.vue

diff --git a/docs/app/components/theme-studio/ThemeStudioBento.vue b/docs/app/components/theme-studio/ThemeStudioBento.vue
index 46957d36d7..18466ea728 100644
--- a/docs/app/components/theme-studio/ThemeStudioBento.vue
+++ b/docs/app/components/theme-studio/ThemeStudioBento.vue
@@ -131,23 +131,23 @@ function showToast() {
           :color="color"
           :variant="variant"
           :label="variant"
-          size="sm"
+
           class="capitalize"
         />
       </div>
 
       <div class="flex flex-wrap items-center gap-2">
-        <UButton icon="i-lucide-plus" size="sm" label="New item" />
+        <UButton icon="i-lucide-plus" label="New item" />
         <UButton
           icon="i-lucide-settings"
-          size="sm"
+
           color="neutral"
           variant="outline"
           square
           aria-label="Settings"
         />
-        <UButton size="sm" color="neutral" variant="ghost" label="Cancel" />
-        <UButton size="sm" loading label="Saving" />
+        <UButton color="neutral" variant="ghost" label="Cancel" />
+        <UButton loading label="Saving" />
       </div>
     </UCard>
 
diff --git a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
index da71263387..2d4d806582 100644
--- a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
@@ -18,7 +18,7 @@ const emit = defineEmits<{
 }>()
 
 const W = 200
-const H = 120
+const H = 180
 const PAD = 10
 
 function toX(x: number) {
@@ -130,7 +130,7 @@ function onPointerUp(event: PointerEvent) {
     ref="svgRef"
     data-curve-editor
     :viewBox="`0 0 ${W} ${H}`"
-    class="w-full rounded-sm ring ring-default bg-elevated/30 touch-none select-none cursor-crosshair"
+    class="w-full rounded-t-sm ring ring-default bg-elevated/30 touch-none select-none cursor-crosshair"
     @pointerdown="onPointerDown"
     @pointermove="onPointerMove"
     @pointerup="onPointerUp"
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index c154e8b694..7afea1144b 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useThrottleFn, watchIgnorable } from '@vueuse/core'
-import { SHADES, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, generatePalette, fitPalette, contrastRatio } from '../../utils/theme-engine'
+import { SHADES, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, generatePalette, fitPalette } from '../../utils/theme-engine'
 import type { PaletteCurveParams, ColorAlias } from '../../utils/theme-engine'
 
 const props = defineProps<{
@@ -36,9 +36,6 @@ const active = computed(() => isCustomPalette(props.alias))
 const shades = computed(() => generatePalette(params))
 const stopColors = computed(() => SHADES.map(shade => shades.value[shade]))
 
-// White text on shade 500 is what solid buttons render — the pair worth watching.
-const contrast = computed(() => contrastRatio(shades.value[500]!, '#FFFFFF'))
-
 /**
  * Every axis is a fixed 1:1 window — the full physical range fits the
  * canvas, so dragging never pans or rescales under the pointer. Hue params
@@ -225,7 +222,7 @@ function remove() {
 </script>
 
 <template>
-  <div v-if="open" class="mt-1.5 flex flex-col gap-2.5 pb-1">
+  <div v-if="open" class=" flex flex-col gap-2.5 pb-1">
     <UTabs
       v-model="tab"
       :items="tabs"
@@ -234,30 +231,21 @@ function remove() {
       color="neutral"
     />
 
-    <ThemeStudioCurveEditor
-      v-model="params[tab]"
-      :y-min="windows[tab].min"
-      :y-max="windows[tab].max"
-      :stop-colors="stopColors"
-      @drag-start="onDragStart"
-      @drag-end="onDragEnd"
-    />
+    <div>
+      <ThemeStudioCurveEditor
+        v-model="params[tab]"
+        :y-min="windows[tab].min"
+        :y-max="windows[tab].max"
+        :stop-colors="stopColors"
+        @drag-start="onDragStart"
+        @drag-end="onDragEnd"
+      />
 
-    <div class="flex items-center gap-2">
-      <div class="flex flex-1 rounded-sm overflow-hidden ring ring-default">
+      <div class="flex rounded-b-sm overflow-hidden ring ring-default">
         <UTooltip v-for="shade in SHADES" :key="shade" :text="`${shade} · ${shades[shade]}`">
-          <div class="h-5 flex-1" :style="{ backgroundColor: shades[shade] }" />
+          <div class="aspect-square flex-1" :style="{ backgroundColor: shades[shade] }" />
         </UTooltip>
       </div>
-
-      <UTooltip :text="`White on 500: ${contrast.toFixed(1)}:1`">
-        <UBadge
-          :label="contrast >= 4.5 ? 'AA' : contrast >= 3 ? 'AA18' : 'Low'"
-          :color="contrast >= 4.5 ? 'success' : contrast >= 3 ? 'warning' : 'error'"
-          variant="subtle"
-          size="sm"
-        />
-      </UTooltip>
     </div>
 
     <div class="flex items-center gap-1.5">
diff --git a/docs/app/components/theme-studio/ThemeStudioViewA11y.vue b/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
new file mode 100644
index 0000000000..367cb33553
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { contrastRatio } from '../../utils/theme-engine'
+
+/**
+ * WCAG contrast matrix for the CURRENT theme: every text-role token against
+ * every surface token, plus inverted text on the solid semantic surfaces
+ * (what buttons render). Colors are read from the live computed custom
+ * properties, so the matrix is the resolved ground truth — custom palettes,
+ * shade sliders and mode switches included.
+ */
+const FOREGROUNDS = [
+  { token: '--ui-text-highlighted', label: 'Highlighted' },
+  { token: '--ui-text', label: 'Text' },
+  { token: '--ui-text-toned', label: 'Toned' },
+  { token: '--ui-text-muted', label: 'Muted' },
+  { token: '--ui-text-dimmed', label: 'Dimmed' },
+  { token: '--ui-primary', label: 'Primary' },
+  { token: '--ui-secondary', label: 'Secondary' },
+  { token: '--ui-success', label: 'Success' },
+  { token: '--ui-info', label: 'Info' },
+  { token: '--ui-warning', label: 'Warning' },
+  { token: '--ui-error', label: 'Error' }
+]
+
+const BACKGROUNDS = [
+  { token: '--ui-bg', label: 'Default' },
+  { token: '--ui-bg-muted', label: 'Muted' },
+  { token: '--ui-bg-elevated', label: 'Elevated' },
+  { token: '--ui-bg-accented', label: 'Accented' },
+  { token: '--ui-bg-inverted', label: 'Inverted' }
+]
+
+/** Solid surfaces (buttons, badges) render --ui-text-inverted on the alias. */
+const SOLIDS = [
+  { token: '--ui-primary', label: 'Primary' },
+  { token: '--ui-secondary', label: 'Secondary' },
+  { token: '--ui-success', label: 'Success' },
+  { token: '--ui-info', label: 'Info' },
+  { token: '--ui-warning', label: 'Warning' },
+  { token: '--ui-error', label: 'Error' }
+]
+
+interface Cell {
+  fg: string
+  bg: string
+  ratio: number
+}
+
+const matrix = ref<Cell[][]>([])
+const solidRow = ref<Cell[]>([])
+
+function resolveToken(styles: CSSStyleDeclaration, token: string): string {
+  return styles.getPropertyValue(token).trim()
+}
+
+function compute() {
+  if (!import.meta.client) return
+  const styles = getComputedStyle(document.documentElement)
+
+  matrix.value = FOREGROUNDS.map(fg => BACKGROUNDS.map((bg) => {
+    const fgColor = resolveToken(styles, fg.token)
+    const bgColor = resolveToken(styles, bg.token)
+    return { fg: fgColor, bg: bgColor, ratio: contrastRatio(fgColor, bgColor) }
+  }))
+
+  const inverted = resolveToken(styles, '--ui-text-inverted')
+  solidRow.value = SOLIDS.map((solid) => {
+    const bgColor = resolveToken(styles, solid.token)
+    return { fg: inverted, bg: bgColor, ratio: contrastRatio(inverted, bgColor) }
+  })
+}
+
+/**
+ * The theme applies through <style> tags useHead swaps asynchronously —
+ * recompute a beat after any state that feeds them changes.
+ */
+const colorMode = useColorMode()
+const appConfig = useAppConfig()
+const cssVariables = useState('nuxt-ui-css-variables', () => ({}))
+const customColors = useState('nuxt-ui-custom-colors', () => ({}))
+
+let timeout: ReturnType<typeof setTimeout> | undefined
+watch([() => colorMode.value, () => ({ ...appConfig.ui.colors }), cssVariables, customColors], () => {
+  clearTimeout(timeout)
+  timeout = setTimeout(compute, 80)
+}, { deep: true })
+
+onMounted(compute)
+onUnmounted(() => clearTimeout(timeout))
+
+function level(ratio: number): { label: string, color: 'success' | 'warning' | 'error' } {
+  if (ratio >= 7) return { label: 'AAA', color: 'success' }
+  if (ratio >= 4.5) return { label: 'AA', color: 'success' }
+  if (ratio >= 3) return { label: 'AA18', color: 'warning' }
+  return { label: 'Fail', color: 'error' }
+}
+</script>
+
+<template>
+  <div class="h-full overflow-y-auto p-4 sm:p-6">
+    <div class="max-w-4xl mx-auto flex flex-col gap-8">
+      <div>
+        <h2 class="text-sm font-semibold text-highlighted mb-1">
+          Text on surfaces
+        </h2>
+        <p class="text-xs text-muted mb-4">
+          WCAG 2.x contrast for every text role against every surface token, resolved from the live theme.
+          AA needs 4.5:1 (3:1 for large text), AAA needs 7:1.
+        </p>
+
+        <div class="overflow-x-auto">
+          <table class="w-full text-xs">
+            <thead>
+              <tr>
+                <th class="text-left font-medium text-muted p-2" />
+                <th v-for="bg in BACKGROUNDS" :key="bg.token" class="text-left font-medium text-muted p-2">
+                  {{ bg.label }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(fg, row) in FOREGROUNDS" :key="fg.token">
+                <th class="text-left font-medium text-muted p-2 whitespace-nowrap">
+                  {{ fg.label }}
+                </th>
+                <td v-for="(bg, col) in BACKGROUNDS" :key="bg.token" class="p-1">
+                  <div
+                    v-if="matrix[row]?.[col]"
+                    class="rounded-md px-2.5 py-2 flex items-center justify-between gap-2 ring ring-default"
+                    :style="{ backgroundColor: matrix[row][col].bg }"
+                  >
+                    <span class="font-semibold" :style="{ color: matrix[row][col].fg }">Aa</span>
+                    <span class="flex items-center gap-1.5">
+                      <span class="tabular-nums font-mono opacity-80" :style="{ color: matrix[row][col].fg }">
+                        {{ matrix[row][col].ratio.toFixed(1) }}
+                      </span>
+                      <UBadge :label="level(matrix[row][col].ratio).label" :color="level(matrix[row][col].ratio).color" variant="subtle" size="sm" />
+                    </span>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div>
+        <h2 class="text-sm font-semibold text-highlighted mb-1">
+          Inverted text on solid surfaces
+        </h2>
+        <p class="text-xs text-muted mb-4">
+          What solid buttons and badges render: the inverted text token on each semantic color.
+        </p>
+
+        <div class="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-6 gap-2">
+          <div
+            v-for="(cell, index) in solidRow"
+            :key="SOLIDS[index]!.token"
+            class="rounded-md px-2.5 py-3 flex flex-col gap-1.5 ring ring-default"
+            :style="{ backgroundColor: cell.bg }"
+          >
+            <span class="text-xs font-semibold" :style="{ color: cell.fg }">{{ SOLIDS[index]!.label }}</span>
+            <span class="flex items-center gap-1.5">
+              <span class="text-xs tabular-nums font-mono opacity-80" :style="{ color: cell.fg }">
+                {{ cell.ratio.toFixed(1) }}
+              </span>
+              <UBadge :label="level(cell.ratio).label" :color="level(cell.ratio).color" variant="subtle" size="sm" />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 74f166c407..7d91099125 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -48,7 +48,8 @@ const viewTabs = [
   { label: 'Dashboard', icon: 'i-lucide-layout-dashboard', value: 'dashboard' },
   { label: 'Chat', icon: 'i-lucide-message-circle', value: 'chat' },
   { label: 'SaaS', icon: 'i-lucide-rocket', value: 'saas' },
-  { label: 'Landing', icon: 'i-lucide-panels-top-left', value: 'landing' }
+  { label: 'Landing', icon: 'i-lucide-panels-top-left', value: 'landing' },
+  { label: 'A11y', icon: 'i-lucide-accessibility', value: 'a11y' }
 ]
 </script>
 
@@ -122,6 +123,7 @@ const viewTabs = [
         <ThemeStudioViewChat v-else-if="view === 'chat'" />
         <ThemeStudioViewSaas v-else-if="view === 'saas'" />
         <ThemeStudioViewLanding v-else-if="view === 'landing'" />
+        <ThemeStudioViewA11y v-else-if="view === 'a11y'" />
       </div>
     </div>
   </main>
diff --git a/docs/app/utils/theme-engine/oklch.ts b/docs/app/utils/theme-engine/oklch.ts
index 16afd41406..e527bb9b94 100644
--- a/docs/app/utils/theme-engine/oklch.ts
+++ b/docs/app/utils/theme-engine/oklch.ts
@@ -127,6 +127,10 @@ export function formatOklch(color: Oklch): string {
 export function parseColor(value: string): Oklch | undefined {
   const input = value.trim()
 
+  // the two keywords the theme system actually uses (library token defaults)
+  if (input === 'white') return { l: 1, c: 0, h: 0 }
+  if (input === 'black') return { l: 0, c: 0, h: 0 }
+
   if (input.startsWith('#')) {
     return rgbToOklch(hexToRgb(input))
   }
diff --git a/test/utils/theme-color-parse.spec.ts b/test/utils/theme-color-parse.spec.ts
index ede4bd38df..8f6c90ff63 100644
--- a/test/utils/theme-color-parse.spec.ts
+++ b/test/utils/theme-color-parse.spec.ts
@@ -25,6 +25,11 @@ describe('parseCssColor', () => {
     expect(parseCssColor('rgb(29 185 84)')).toBe('oklch(68.9% 0.187 148.921)')
   })
 
+  it('understands the white/black keywords the library tokens use', () => {
+    expect(parseCssColor('white')).toBe('oklch(100% 0 0)')
+    expect(parseCssColor('black')).toBe('oklch(0% 0 0)')
+  })
+
   it('returns undefined for unknown formats', () => {
     expect(parseCssColor('hotpink')).toBeUndefined()
     expect(parseCssColor('var(--color-red-500)')).toBeUndefined()

From 58d9ff36095b874b143ab7dbf9ff325dd2d4bb06 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 15:08:37 +0200
Subject: [PATCH 057/185] refactor(docs): sidebar sections on UCollapsible,
 clearer shade labels, controls hydrate to saved state, General before Style

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 1065 ++++++++---------
 .../theme-studio/ThemeStudioPaletteEditor.vue |  129 +-
 2 files changed, 587 insertions(+), 607 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 4fcc020793..ff9f471484 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -138,17 +138,17 @@ const borderColorItems = [
   { label: 'White', value: 'white' },
   { label: 'Primary', value: 'primary' },
   { label: 'Neutral', value: 'neutral' },
-  { label: 'Custom…', value: 'shade' },
-  { label: 'Primary shade…', value: 'primary-shade' }
+  { label: 'Neutral shade', value: 'shade' },
+  { label: 'Primary shade', value: 'primary-shade' }
 ]
 
 const shadowColorItems = [
-  { label: 'Default (ink)', value: 'default' },
+  { label: 'Default', value: 'default' },
   { label: 'Black', value: 'black' },
   { label: 'Inverted', value: 'inverted' },
   { label: 'Primary', value: 'primary' },
-  { label: 'Custom…', value: 'shade' },
-  { label: 'Primary shade…', value: 'primary-shade' }
+  { label: 'Neutral shade', value: 'shade' },
+  { label: 'Primary shade', value: 'primary-shade' }
 ]
 
 // Slider position ↔ SHADES index, per mode. shadow/border shades write both
@@ -227,10 +227,23 @@ const modeTabs = computed(() => modes.value.filter(m => m.label !== 'system').ma
 // a post-mount write is a real update, so the highlight always lands.
 const modeTab = ref<string | undefined>()
 
+/**
+ * Same hydration-adoption problem for every control: SSR renders default
+ * state (no localStorage), and persisted slider positions/selections looked
+ * stale until touched. One post-mount re-render — only when saved state
+ * exists — puts everything on client truth.
+ */
+const hydrationKey = ref(0)
+
 onMounted(() => {
   modeTab.value = mode.value === 'light' || mode.value === 'dark'
     ? mode.value
     : document.documentElement.classList.contains('dark') ? 'dark' : 'light'
+
+  const keys = ['nuxt-ui-style', 'nuxt-ui-css-variables', 'nuxt-ui-custom-colors', 'nuxt-ui-radius', 'nuxt-ui-font-size', 'nuxt-ui-spacing', 'nuxt-ui-ai-theme']
+  if (keys.some(key => localStorage.getItem(key))) {
+    hydrationKey.value = 1
+  }
 })
 
 watch(modeTab, (value) => {
@@ -253,9 +266,9 @@ const openGroups = ref('colors')
 
 const groupItems = [
   { label: 'Colors', value: 'colors', slot: 'colors' as const },
+  { label: 'General', value: 'general', slot: 'general' as const },
   { label: 'Style', value: 'style', slot: 'style' as const },
-  { label: 'Tokens', value: 'tokens', slot: 'tokens' as const },
-  { label: 'General', value: 'general', slot: 'general' as const }
+  { label: 'Tokens', value: 'tokens', slot: 'tokens' as const }
 ]
 
 const defaultSizeItems = [
@@ -330,7 +343,7 @@ const shadowColor = computed({
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
+  <div :key="hydrationKey" class="flex flex-col gap-4">
     <div
       class="flex gap-2 p-4 pb-0"
     >
@@ -390,609 +403,571 @@ const shadowColor = computed({
     >
       <template #colors>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
-            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-              <UButton
-                label="Primary"
-                color="neutral"
-                variant="ghost"
-                size="xs"
-                icon="i-lucide-chevron-down"
-
-                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.primary && '-rotate-90'] }"
-                @click="openSections.primary = !openSections.primary"
-              />
-
-              <UButton
-                to="/docs/getting-started/theme/css-variables#colors"
-                size="xs"
-                color="neutral"
-                variant="ghost"
-                icon="i-lucide-help-circle"
-              />
-            </legend>
-
-            <div v-show="openSections.primary">
-              <UFieldGroup size="sm" class="flex w-full">
-                <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
-                  <UButton
-                    color="neutral"
-                    variant="subtle"
-                    size="sm"
-                    block
-                    trailing-icon="i-lucide-chevron-down"
-                    class="capitalize"
-                  >
-                    <template #leading>
-                      <span
-                        class="inline-block size-3 rounded-full"
-                        :class="{ 'bg-black dark:bg-white': blackAsPrimary }"
-                        :style="primarySwatch.color ? { backgroundColor: primarySwatch.color } : undefined"
-                      />
-                    </template>
+          <UCollapsible v-model:open="openSections.primary" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+            <template #default="{ open }">
+              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+                <span class="flex-1 text-start">Primary</span>
+                <UButton
+                  to="/docs/getting-started/theme/css-variables#colors"
+                  size="xs"
+                  color="neutral"
+                  variant="ghost"
+                  icon="i-lucide-help-circle"
+                  @click.stop
+                />
+              </legend>
+            </template>
+            <template #content>
+              <div>
+                <UFieldGroup size="sm" class="flex w-full">
+                  <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
+                    <UButton
+                      color="neutral"
+                      variant="subtle"
+                      size="sm"
+                      block
+                      trailing-icon="i-lucide-chevron-down"
+                      class="capitalize"
+                    >
+                      <template #leading>
+                        <span
+                          class="inline-block size-3 rounded-full"
+                          :class="{ 'bg-black dark:bg-white': blackAsPrimary }"
+                          :style="primarySwatch.color ? { backgroundColor: primarySwatch.color } : undefined"
+                        />
+                      </template>
 
-                    {{ primarySwatch.label }}
-                  </UButton>
-
-                  <template #content>
-                    <div class="flex flex-col gap-2 w-72 p-2">
-                      <div v-for="(section, index) in colorSections" :key="section.label">
-                        <p class="text-[11px] font-semibold text-muted px-1 mb-1 select-none">
-                          {{ section.label }}
-                        </p>
-
-                        <div class="grid grid-cols-3 gap-1">
-                          <ThemePickerButton
-                            v-if="index === 0"
-                            label="Black"
-                            :selected="blackAsPrimary"
-                            @click="setBlackAsPrimary(true)"
-                          >
-                            <template #leading>
-                              <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
-                            </template>
-                          </ThemePickerButton>
-
-                          <ThemePickerButton
-                            v-for="color in section.colors"
-                            :key="color"
-                            :label="color"
-                            :chip="paletteChip(color)"
-                            :selected="!blackAsPrimary && primary === color"
-                            @click="selectPalette('primary', color)"
-                          />
+                      {{ primarySwatch.label }}
+                    </UButton>
+
+                    <template #content>
+                      <div class="flex flex-col gap-2 w-72 p-2">
+                        <div v-for="(section, index) in colorSections" :key="section.label">
+                          <p class="text-[11px] font-semibold text-muted px-1 mb-1 select-none">
+                            {{ section.label }}
+                          </p>
+
+                          <div class="grid grid-cols-3 gap-1">
+                            <ThemePickerButton
+                              v-if="index === 0"
+                              label="Black"
+                              :selected="blackAsPrimary"
+                              @click="setBlackAsPrimary(true)"
+                            >
+                              <template #leading>
+                                <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
+                              </template>
+                            </ThemePickerButton>
+
+                            <ThemePickerButton
+                              v-for="color in section.colors"
+                              :key="color"
+                              :label="color"
+                              :chip="paletteChip(color)"
+                              :selected="!blackAsPrimary && primary === color"
+                              @click="selectPalette('primary', color)"
+                            />
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  </template>
-                </UPopover>
+                    </template>
+                  </UPopover>
 
+                  <UButton
+                    :icon="isCustomPalette('primary') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
+                    color="neutral"
+                    variant="subtle"
+                    :active="paletteEditors.primary || isCustomPalette('primary')"
+                    active-color="primary"
+                    active-variant="subtle"
+                    aria-label="Edit primary palette"
+                    @click="paletteEditors.primary = !paletteEditors.primary"
+                  />
+                </UFieldGroup>
+
+                <ThemeStudioPaletteEditor v-model:open="paletteEditors.primary" alias="primary" />
+              </div>
+            </template>
+          </UCollapsible>
+
+          <UCollapsible v-model:open="openSections.neutral" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+            <template #default="{ open }">
+              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+                <span class="flex-1 text-start">Background</span>
                 <UButton
-                  :icon="isCustomPalette('primary') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
+                  to="/docs/getting-started/theme/css-variables#text"
+                  size="xs"
                   color="neutral"
-                  variant="subtle"
-                  :active="paletteEditors.primary || isCustomPalette('primary')"
-                  active-color="primary"
-                  active-variant="subtle"
-                  aria-label="Edit primary palette"
-                  @click="paletteEditors.primary = !paletteEditors.primary"
+                  variant="ghost"
+                  icon="i-lucide-help-circle"
+                  @click.stop
                 />
-              </UFieldGroup>
-
-              <ThemeStudioPaletteEditor v-model:open="paletteEditors.primary" alias="primary" />
-            </div>
-          </fieldset>
-
-          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
-            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-              <UButton
-                label="Background"
-                color="neutral"
-                variant="ghost"
-                size="xs"
-                icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.neutral && '-rotate-90'] }"
-                @click="openSections.neutral = !openSections.neutral"
-              />
-
-              <UButton
-                to="/docs/getting-started/theme/css-variables#text"
-                size="xs"
-                color="neutral"
-                variant="ghost"
-                icon="i-lucide-help-circle"
-              />
-            </legend>
-
-            <div v-show="openSections.neutral">
-              <UFieldGroup size="sm" class="flex w-full">
-                <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
+              </legend>
+            </template>
+            <template #content>
+              <div>
+                <UFieldGroup size="sm" class="flex w-full">
+                  <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
+                    <UButton
+                      color="neutral"
+                      variant="subtle"
+                      size="sm"
+                      block
+                      trailing-icon="i-lucide-chevron-down"
+                      class="capitalize"
+                    >
+                      <template #leading>
+                        <span
+                          class="inline-block size-3 rounded-full"
+                          :style="{ backgroundColor: neutralSwatch.color }"
+                        />
+                      </template>
+
+                      {{ neutralSwatch.label }}
+                    </UButton>
+
+                    <template #content>
+                      <div class="flex flex-col gap-2 w-72 p-2">
+                        <div v-for="section in backgroundSections" :key="section.label">
+                          <p class="text-[11px] font-semibold text-muted px-1 mb-1 select-none">
+                            {{ section.label }}
+                          </p>
+
+                          <div class="grid grid-cols-3 gap-1">
+                            <ThemePickerButton
+                              v-for="color in section.colors"
+                              :key="color"
+                              :label="color"
+                              :chip="paletteChip(color)"
+                              :selected="neutral === color"
+                              @click="selectPalette('neutral', color)"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </template>
+                  </UPopover>
+
                   <UButton
+                    :icon="isCustomPalette('neutral') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
                     color="neutral"
                     variant="subtle"
                     size="sm"
-                    block
-                    trailing-icon="i-lucide-chevron-down"
-                    class="capitalize"
-                  >
-                    <template #leading>
-                      <span
-                        class="inline-block size-3 rounded-full"
-                        :style="{ backgroundColor: neutralSwatch.color }"
-                      />
-                    </template>
-
-                    {{ neutralSwatch.label }}
-                  </UButton>
-
-                  <template #content>
-                    <div class="flex flex-col gap-2 w-72 p-2">
-                      <div v-for="section in backgroundSections" :key="section.label">
-                        <p class="text-[11px] font-semibold text-muted px-1 mb-1 select-none">
-                          {{ section.label }}
-                        </p>
-
-                        <div class="grid grid-cols-3 gap-1">
-                          <ThemePickerButton
-                            v-for="color in section.colors"
-                            :key="color"
-                            :label="color"
-                            :chip="paletteChip(color)"
-                            :selected="neutral === color"
-                            @click="selectPalette('neutral', color)"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </template>
-                </UPopover>
+                    :active="paletteEditors.neutral || isCustomPalette('neutral')"
+                    active-color="primary"
+                    active-variant="subtle"
+                    aria-label="Edit background palette"
+                    @click="paletteEditors.neutral = !paletteEditors.neutral"
+                  />
+                </UFieldGroup>
 
+                <ThemeStudioPaletteEditor v-model:open="paletteEditors.neutral" alias="neutral" />
+              </div>
+            </template>
+          </UCollapsible>
+
+          <UCollapsible v-model:open="openSections.semantic" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+            <template #default="{ open }">
+              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+                <span class="flex-1 text-start">Semantic</span>
                 <UButton
-                  :icon="isCustomPalette('neutral') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
+                  to="/docs/getting-started/theme/design-system"
+                  size="xs"
                   color="neutral"
-                  variant="subtle"
-                  size="sm"
-                  :active="paletteEditors.neutral || isCustomPalette('neutral')"
-                  active-color="primary"
-                  active-variant="subtle"
-                  aria-label="Edit background palette"
-                  @click="paletteEditors.neutral = !paletteEditors.neutral"
+                  variant="ghost"
+                  icon="i-lucide-help-circle"
+                  @click.stop
                 />
-              </UFieldGroup>
-
-              <ThemeStudioPaletteEditor v-model:open="paletteEditors.neutral" alias="neutral" />
-            </div>
-          </fieldset>
-
-          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
-            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-              <UButton
-                label="Semantic"
-                color="neutral"
-                variant="ghost"
-                size="xs"
-                icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.semantic && '-rotate-90'] }"
-                @click="openSections.semantic = !openSections.semantic"
-              />
-
-              <UButton
-                to="/docs/getting-started/theme/design-system"
-                size="xs"
-                color="neutral"
-                variant="ghost"
-                icon="i-lucide-help-circle"
-              />
-            </legend>
-
-            <div v-show="openSections.semantic" class="flex flex-col gap-1.5">
-              <div v-for="alias in semanticAliases" :key="alias">
-                <div class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 capitalize select-none">{{ alias }}</span>
+              </legend>
+            </template>
+            <template #content>
+              <div class="flex flex-col gap-1.5">
+                <div v-for="alias in semanticAliases" :key="alias">
+                  <div class="flex items-center gap-2">
+                    <span class="text-[11px] text-muted w-13 shrink-0 capitalize select-none">{{ alias }}</span>
+
+                    <UFieldGroup size="sm" class="flex flex-1 min-w-0">
+                      <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
+                        <UButton
+                          color="neutral"
+                          variant="subtle"
+                          size="sm"
+                          block
+                          trailing-icon="i-lucide-chevron-down"
+                          class="capitalize"
+                        >
+                          <template #leading>
+                            <span
+                              class="inline-block size-3 rounded-full"
+                              :style="{ backgroundColor: `var(--color-${paletteChip(aliasValues[alias] || alias)}-500)` }"
+                            />
+                          </template>
+
+                          {{ aliasLabel(alias) }}
+                        </UButton>
+
+                        <template #content>
+                          <div class="flex flex-col gap-2 w-72 p-2">
+                            <div v-for="section in colorSections" :key="section.label">
+                              <p class="text-[11px] font-semibold text-muted px-1 mb-1 select-none">
+                                {{ section.label }}
+                              </p>
+
+                              <div class="grid grid-cols-3 gap-1">
+                                <ThemePickerButton
+                                  v-for="color in section.colors"
+                                  :key="color"
+                                  :label="color"
+                                  :chip="paletteChip(color)"
+                                  :selected="aliasValues[alias] === color"
+                                  @click="selectPalette(alias, color)"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </template>
+                      </UPopover>
 
-                  <UFieldGroup size="sm" class="flex flex-1 min-w-0">
-                    <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
                       <UButton
+                        :icon="isCustomPalette(alias) ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
                         color="neutral"
                         variant="subtle"
                         size="sm"
-                        block
-                        trailing-icon="i-lucide-chevron-down"
-                        class="capitalize"
-                      >
-                        <template #leading>
-                          <span
-                            class="inline-block size-3 rounded-full"
-                            :style="{ backgroundColor: `var(--color-${paletteChip(aliasValues[alias] || alias)}-500)` }"
-                          />
-                        </template>
-
-                        {{ aliasLabel(alias) }}
-                      </UButton>
-
-                      <template #content>
-                        <div class="flex flex-col gap-2 w-72 p-2">
-                          <div v-for="section in colorSections" :key="section.label">
-                            <p class="text-[11px] font-semibold text-muted px-1 mb-1 select-none">
-                              {{ section.label }}
-                            </p>
-
-                            <div class="grid grid-cols-3 gap-1">
-                              <ThemePickerButton
-                                v-for="color in section.colors"
-                                :key="color"
-                                :label="color"
-                                :chip="paletteChip(color)"
-                                :selected="aliasValues[alias] === color"
-                                @click="selectPalette(alias, color)"
-                              />
-                            </div>
-                          </div>
-                        </div>
-                      </template>
-                    </UPopover>
+                        :active="paletteEditors[alias] || isCustomPalette(alias)"
+                        active-color="primary"
+                        active-variant="subtle"
+                        :aria-label="`Edit ${alias} palette`"
+                        @click="paletteEditors[alias] = !paletteEditors[alias]"
+                      />
+                    </UFieldGroup>
+                  </div>
 
-                    <UButton
-                      :icon="isCustomPalette(alias) ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
-                      color="neutral"
-                      variant="subtle"
-                      size="sm"
-                      :active="paletteEditors[alias] || isCustomPalette(alias)"
-                      active-color="primary"
-                      active-variant="subtle"
-                      :aria-label="`Edit ${alias} palette`"
-                      @click="paletteEditors[alias] = !paletteEditors[alias]"
-                    />
-                  </UFieldGroup>
+                  <ThemeStudioPaletteEditor v-model:open="paletteEditors[alias]" :alias="alias" />
                 </div>
-
-                <ThemeStudioPaletteEditor v-model:open="paletteEditors[alias]" :alias="alias" />
               </div>
-            </div>
-          </fieldset>
+            </template>
+          </UCollapsible>
         </div>
       </template>
 
       <template #style>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
-            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-              <UButton
-                label="Radius"
-                color="neutral"
-                variant="ghost"
-                size="xs"
-                icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.radius && '-rotate-90'] }"
-                @click="openSections.radius = !openSections.radius"
-              />
-
-              <UButton
-                to="/docs/getting-started/theme/css-variables#radius"
-                size="xs"
-                color="neutral"
-                variant="ghost"
-                icon="i-lucide-help-circle"
-              />
-            </legend>
-
-            <div v-show="openSections.radius" class="flex items-center gap-3">
-              <USlider
-                v-model="radius"
-                :min="0"
-                :max="0.5"
-                :step="0.125"
-                size="sm"
-              />
-
-              <span class="text-[11px] font-mono text-muted tabular-nums shrink-0 w-14 text-right">{{ radius }}rem</span>
-            </div>
-          </fieldset>
-
-          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
-            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-              <UButton
-                label="Sizing"
-                color="neutral"
-                variant="ghost"
-                size="xs"
-                icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.sizing && '-rotate-90'] }"
-                @click="openSections.sizing = !openSections.sizing"
-              />
-            </legend>
-
-            <div v-show="openSections.sizing" class="flex flex-col gap-2">
-              <div class="flex items-center gap-2">
-                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Text</span>
-
-                <USlider v-model="fontSize" :min="14" :max="18" :step="0.5" size="xs" />
-
-                <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ fontSize }}px</span>
+          <UCollapsible v-model:open="openSections.radius" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+            <template #default="{ open }">
+              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+                <span class="flex-1 text-start">Radius</span>
+                <UButton
+                  to="/docs/getting-started/theme/css-variables#radius"
+                  size="xs"
+                  color="neutral"
+                  variant="ghost"
+                  icon="i-lucide-help-circle"
+                  @click.stop
+                />
+              </legend>
+            </template>
+            <template #content>
+              <div class="flex items-center gap-3">
+                <USlider
+                  v-model="radius"
+                  :min="0"
+                  :max="0.5"
+                  :step="0.125"
+                  size="sm"
+                />
+
+                <span class="text-[11px] font-mono text-muted tabular-nums shrink-0 w-14 text-right">{{ radius }}rem</span>
               </div>
+            </template>
+          </UCollapsible>
+
+          <UCollapsible v-model:open="openSections.sizing" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+            <template #default="{ open }">
+              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+                <span class="flex-1 text-start">Sizing</span>
+              </legend>
+            </template>
+            <template #content>
+              <div class="flex flex-col gap-2">
+                <div class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Text</span>
 
-              <div class="flex items-center gap-2">
-                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Spacing</span>
+                  <USlider v-model="fontSize" :min="14" :max="18" :step="0.5" size="xs" />
 
-                <USlider v-model="spacing" :min="0.15" :max="0.35" :step="0.025" size="xs" />
+                  <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ fontSize }}px</span>
+                </div>
 
-                <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ spacing }}</span>
-              </div>
-            </div>
-          </fieldset>
-
-          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
-            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-              <UButton
-                label="Defaults"
-                color="neutral"
-                variant="ghost"
-                size="xs"
-                icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.defaults && '-rotate-90'] }"
-                @click="openSections.defaults = !openSections.defaults"
-              />
-            </legend>
-
-            <div v-show="openSections.defaults" class="flex flex-col gap-1.5">
-              <div v-for="field in variantGroupFields" :key="field.key" class="flex items-center gap-2">
-                <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
+                <div class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Spacing</span>
 
-                <USelect
-                  v-model="groupVariants[field.key].value"
-                  size="sm"
-                  color="neutral"
-                  icon="i-lucide-layers"
-                  :items="field.items"
-                  class="flex-1"
-                />
+                  <USlider v-model="spacing" :min="0.15" :max="0.35" :step="0.025" size="xs" />
+
+                  <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ spacing }}</span>
+                </div>
               </div>
+            </template>
+          </UCollapsible>
+
+          <UCollapsible v-model:open="openSections.defaults" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+            <template #default="{ open }">
+              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+                <span class="flex-1 text-start">Defaults</span>
+              </legend>
+            </template>
+            <template #content>
+              <div class="flex flex-col gap-1.5">
+                <div v-for="field in variantGroupFields" :key="field.key" class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
+
+                  <USelect
+                    v-model="groupVariants[field.key].value"
+                    size="sm"
+                    color="neutral"
+                    icon="i-lucide-layers"
+                    :items="field.items"
+                    class="flex-1"
+                  />
+                </div>
 
-              <div class="flex items-center gap-2">
-                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Size</span>
+                <div class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Size</span>
 
-                <USelect
-                  v-model="defaultSize"
-                  size="sm"
-                  color="neutral"
-                  icon="i-lucide-proportions"
-                  :items="defaultSizeItems"
-                  class="flex-1"
-                />
-              </div>
-            </div>
-          </fieldset>
-
-          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
-            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-              <UButton
-                label="Shadows"
-                color="neutral"
-                variant="ghost"
-                size="xs"
-                icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.shadows && '-rotate-90'] }"
-                @click="openSections.shadows = !openSections.shadows"
-              />
-            </legend>
-
-            <div v-show="openSections.shadows">
-              <div class="grid grid-cols-3 gap-1">
-                <ThemePickerButton
-                  v-for="option in shadowOptions"
-                  :key="option.value"
-                  :label="option.label"
-                  :selected="(style.shadow || 'none') === option.value"
-                  @click="setStyle({ shadow: option.value })"
-                />
+                  <USelect
+                    v-model="defaultSize"
+                    size="sm"
+                    color="neutral"
+                    icon="i-lucide-proportions"
+                    :items="defaultSizeItems"
+                    class="flex-1"
+                  />
+                </div>
               </div>
+            </template>
+          </UCollapsible>
+
+          <UCollapsible v-model:open="openSections.shadows" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+            <template #default="{ open }">
+              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+                <span class="flex-1 text-start">Shadows</span>
+              </legend>
+            </template>
+            <template #content>
+              <div>
+                <div class="grid grid-cols-3 gap-1">
+                  <ThemePickerButton
+                    v-for="option in shadowOptions"
+                    :key="option.value"
+                    :label="option.label"
+                    :selected="(style.shadow || 'none') === option.value"
+                    @click="setStyle({ shadow: option.value })"
+                  />
+                </div>
 
-              <div v-if="(style.shadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
-                <USelect
-                  v-model="shadowColor"
-                  size="sm"
-                  color="neutral"
-                  icon="i-lucide-paint-bucket"
-                  :items="shadowColorItems"
-                  class="w-full"
-                />
-
-                <template v-if="shadowColor === 'shade' || shadowColor === 'primary-shade'">
-                  <ThemeStudioShadeSlider
-                    v-for="(slider, modeName) in shadowShades"
-                    :key="modeName"
-                    v-model="slider.value"
-                    :mode="modeName"
-                    :chip="shadowColor === 'primary-shade' ? primaryChip : neutralChip"
+                <div v-if="(style.shadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
+                  <USelect
+                    v-model="shadowColor"
+                    size="sm"
+                    color="neutral"
+                    icon="i-lucide-paint-bucket"
+                    :items="shadowColorItems"
+                    class="w-full"
                   />
-                </template>
 
-                <div class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Opacity</span>
+                  <template v-if="shadowColor === 'shade' || shadowColor === 'primary-shade'">
+                    <ThemeStudioShadeSlider
+                      v-for="(slider, modeName) in shadowShades"
+                      :key="modeName"
+                      v-model="slider.value"
+                      :mode="modeName"
+                      :chip="shadowColor === 'primary-shade' ? primaryChip : neutralChip"
+                    />
+                  </template>
 
-                  <USlider v-model="shadowOpacity" :min="5" :max="100" :step="5" size="xs" />
+                  <div class="flex items-center gap-2">
+                    <span class="text-[11px] text-muted w-13 shrink-0 select-none">Opacity</span>
 
-                  <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ shadowOpacity }}%</span>
-                </div>
+                    <USlider v-model="shadowOpacity" :min="5" :max="100" :step="5" size="xs" />
 
-                <template v-if="(style.shadow || 'none') === 'hard'">
-                  <div v-for="field in geometryFields" :key="field.key" class="flex items-center gap-2">
-                    <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
+                    <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ shadowOpacity }}%</span>
+                  </div>
 
-                    <USlider v-model="geometry[field.key].value" :min="field.min" :max="field.max" :step="1" size="xs" />
+                  <template v-if="(style.shadow || 'none') === 'hard'">
+                    <div v-for="field in geometryFields" :key="field.key" class="flex items-center gap-2">
+                      <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
 
-                    <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ geometry[field.key].value }}px</span>
-                  </div>
-                </template>
-              </div>
-            </div>
-          </fieldset>
-
-          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
-            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-              <UButton
-                label="Borders"
-                color="neutral"
-                variant="ghost"
-                size="xs"
-                icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.borders && '-rotate-90'] }"
-                @click="openSections.borders = !openSections.borders"
-              />
-            </legend>
-
-            <div v-show="openSections.borders">
-              <div class="grid grid-cols-3 gap-1">
-                <ThemePickerButton
-                  v-for="option in borderOptions"
-                  :key="option.value"
-                  :label="option.label"
-                  :selected="borderStyle === option.value"
-                  @click="setStyle({ border: option.value })"
-                />
+                      <USlider v-model="geometry[field.key].value" :min="field.min" :max="field.max" :step="1" size="xs" />
+
+                      <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ geometry[field.key].value }}px</span>
+                    </div>
+                  </template>
+                </div>
               </div>
+            </template>
+          </UCollapsible>
+
+          <UCollapsible v-model:open="openSections.borders" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+            <template #default="{ open }">
+              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+                <span class="flex-1 text-start">Borders</span>
+              </legend>
+            </template>
+            <template #content>
+              <div>
+                <div class="grid grid-cols-3 gap-1">
+                  <ThemePickerButton
+                    v-for="option in borderOptions"
+                    :key="option.value"
+                    :label="option.label"
+                    :selected="borderStyle === option.value"
+                    @click="setStyle({ border: option.value })"
+                  />
+                </div>
 
-              <div v-if="borderStyle === 'custom'" class="mt-1.5 flex flex-col gap-2">
-                <div class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Width</span>
+                <div v-if="borderStyle === 'custom'" class="mt-1.5 flex flex-col gap-2">
+                  <div class="flex items-center gap-2">
+                    <span class="text-[11px] text-muted w-13 shrink-0 select-none">Width</span>
 
-                  <USlider v-model="borderWidth" :min="1" :max="4" :step="1" size="xs" />
+                    <USlider v-model="borderWidth" :min="1" :max="4" :step="1" size="xs" />
 
-                  <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ borderWidth }}px</span>
-                </div>
+                    <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ borderWidth }}px</span>
+                  </div>
 
-                <div class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Frame</span>
+                  <div class="flex items-center gap-2">
+                    <span class="text-[11px] text-muted w-13 shrink-0 select-none">Frame</span>
+
+                    <UTooltip text="Outline solid surfaces too — the neobrutalist look">
+                      <USwitch v-model="frameSolids" size="sm" aria-label="Frame solid surfaces" />
+                    </UTooltip>
+                  </div>
 
-                  <UTooltip text="Outline solid surfaces too — the neobrutalist look">
-                    <USwitch v-model="frameSolids" size="sm" aria-label="Frame solid surfaces" />
-                  </UTooltip>
+                  <USelect
+                    v-model="borderColor"
+                    size="sm"
+                    color="neutral"
+                    icon="i-lucide-paint-bucket"
+                    :items="borderColorItems"
+                    class="w-full"
+                  />
+
+                  <template v-if="borderColor === 'shade' || borderColor === 'primary-shade'">
+                    <ThemeStudioShadeSlider
+                      v-for="(slider, modeName) in borderShades"
+                      :key="modeName"
+                      v-model="slider.value"
+                      :mode="modeName"
+                      :chip="borderColor === 'primary-shade' ? primaryChip : neutralChip"
+                    />
+                  </template>
                 </div>
+              </div>
+            </template>
+          </UCollapsible>
+        </div>
+      </template>
 
-                <USelect
-                  v-model="borderColor"
-                  size="sm"
-                  color="neutral"
-                  icon="i-lucide-paint-bucket"
-                  :items="borderColorItems"
-                  class="w-full"
-                />
+      <template #tokens>
+        <div class="flex flex-col gap-2.5 pt-1 pb-4">
+          <UCollapsible
+            v-for="group in tokenGroups"
+            :key="group.key"
+            v-model:open="openSections[`tokens-${group.key}`]"
+            as="fieldset"
+            :unmount-on-hide="false"
+            class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5"
+          >
+            <template #default="{ open }">
+              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+                <span class="flex-1 text-start">{{ group.label }}</span>
+              </legend>
+            </template>
+            <template #content>
+              <div class="flex flex-col gap-3">
+                <div v-for="section in group.sections" :key="section.token" class="flex flex-col gap-1.5">
+                  <span class="text-[11px] text-muted select-none">{{ section.label }}</span>
 
-                <template v-if="borderColor === 'shade' || borderColor === 'primary-shade'">
                   <ThemeStudioShadeSlider
-                    v-for="(slider, modeName) in borderShades"
+                    v-for="(slider, modeName) in section.sliders"
                     :key="modeName"
                     v-model="slider.value"
                     :mode="modeName"
-                    :chip="borderColor === 'primary-shade' ? primaryChip : neutralChip"
+                    :chip="rampChip(section.ramp)"
                   />
-                </template>
+                </div>
               </div>
-            </div>
-          </fieldset>
+            </template>
+          </UCollapsible>
         </div>
       </template>
 
-      <template #tokens>
+      <template #general>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <fieldset v-for="group in tokenGroups" :key="group.key" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
-            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-              <UButton
-                :label="group.label"
-                color="neutral"
-                variant="ghost"
-                size="xs"
-                icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections[`tokens-${group.key}`] && '-rotate-90'] }"
-                @click="openSections[`tokens-${group.key}`] = !openSections[`tokens-${group.key}`]"
-              />
-            </legend>
-
-            <div v-show="openSections[`tokens-${group.key}`]" class="flex flex-col gap-3">
-              <div v-for="section in group.sections" :key="section.token" class="flex flex-col gap-1.5">
-                <span class="text-[11px] text-muted select-none">{{ section.label }}</span>
-
-                <ThemeStudioShadeSlider
-                  v-for="(slider, modeName) in section.sliders"
-                  :key="modeName"
-                  v-model="slider.value"
-                  :mode="modeName"
-                  :chip="rampChip(section.ramp)"
+          <UCollapsible v-model:open="openSections.font" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+            <template #default="{ open }">
+              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+                <span class="flex-1 text-start">Font</span>
+                <UButton
+                  to="/docs/getting-started/integrations/fonts"
+                  size="xs"
+                  color="neutral"
+                  variant="ghost"
+                  icon="i-lucide-help-circle"
+                  @click.stop
+                />
+              </legend>
+            </template>
+            <template #content>
+              <div>
+                <USelect
+                  v-model="font"
+                  size="sm"
+                  color="neutral"
+                  icon="i-lucide-type"
+                  :items="fonts"
+                  class="w-full"
                 />
               </div>
-            </div>
-          </fieldset>
-        </div>
-      </template>
-
-      <template #general>
-        <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
-            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-              <UButton
-                label="Font"
-                color="neutral"
-                variant="ghost"
-                size="xs"
-                icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.font && '-rotate-90'] }"
-                @click="openSections.font = !openSections.font"
-              />
-
-              <UButton
-                to="/docs/getting-started/integrations/fonts"
-                size="xs"
-                color="neutral"
-                variant="ghost"
-                icon="i-lucide-help-circle"
-              />
-            </legend>
-
-            <div v-show="openSections.font">
-              <USelect
-                v-model="font"
-                size="sm"
-                color="neutral"
-                icon="i-lucide-type"
-                :items="fonts"
-                class="w-full"
-              />
-            </div>
-          </fieldset>
-
-          <fieldset class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
-            <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-              <UButton
-                label="Icons"
-                color="neutral"
-                variant="ghost"
-                size="xs"
-                icon="i-lucide-chevron-down"
-                :ui="{ leadingIcon: ['transition-transform duration-200', !openSections.icons && '-rotate-90'] }"
-                @click="openSections.icons = !openSections.icons"
-              />
-
-              <UButton
-                to="/docs/getting-started/integrations/icons"
-                size="xs"
-                color="neutral"
-                variant="ghost"
-                icon="i-lucide-help-circle"
-              />
-            </legend>
-
-            <div v-show="openSections.icons">
-              <USelect
-                v-model="icon"
-                size="sm"
-                color="neutral"
-                :icon="icons.find(i => i.value === icon)?.icon"
-                :items="icons"
-                class="w-full capitalize"
-                :ui="{ item: 'capitalize' }"
-              />
-            </div>
-          </fieldset>
+            </template>
+          </UCollapsible>
+
+          <UCollapsible v-model:open="openSections.icons" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+            <template #default="{ open }">
+              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+                <span class="flex-1 text-start">Icons</span>
+                <UButton
+                  to="/docs/getting-started/integrations/icons"
+                  size="xs"
+                  color="neutral"
+                  variant="ghost"
+                  icon="i-lucide-help-circle"
+                  @click.stop
+                />
+              </legend>
+            </template>
+            <template #content>
+              <div>
+                <USelect
+                  v-model="icon"
+                  size="sm"
+                  color="neutral"
+                  :icon="icons.find(i => i.value === icon)?.icon"
+                  :items="icons"
+                  class="w-full capitalize"
+                  :ui="{ item: 'capitalize' }"
+                />
+              </div>
+            </template>
+          </UCollapsible>
         </div>
       </template>
     </UAccordion>
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 7afea1144b..3277a1c205 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -222,68 +222,73 @@ function remove() {
 </script>
 
 <template>
-  <div v-if="open" class=" flex flex-col gap-2.5 pb-1">
-    <UTabs
-      v-model="tab"
-      :items="tabs"
-      :content="false"
-      size="xs"
-      color="neutral"
-    />
-
-    <div>
-      <ThemeStudioCurveEditor
-        v-model="params[tab]"
-        :y-min="windows[tab].min"
-        :y-max="windows[tab].max"
-        :stop-colors="stopColors"
-        @drag-start="onDragStart"
-        @drag-end="onDragEnd"
-      />
-
-      <div class="flex rounded-b-sm overflow-hidden ring ring-default">
-        <UTooltip v-for="shade in SHADES" :key="shade" :text="`${shade} · ${shades[shade]}`">
-          <div class="aspect-square flex-1" :style="{ backgroundColor: shades[shade] }" />
-        </UTooltip>
-      </div>
-    </div>
-
-    <div class="flex items-center gap-1.5">
-      <USelect
-        v-model="styleOffset"
-        size="sm"
-        color="neutral"
-        icon="i-lucide-sparkles"
-        :items="styleOffsetItems"
-        class="flex-1"
-        @update:model-value="applyStyleOffset($event as string)"
-      />
-
-      <UTooltip v-if="active" text="Remove custom palette">
-        <UButton
-          icon="i-lucide-trash-2"
+  <!-- unmount-on-hide (the default) matches the old v-if: each open reseeds fresh -->
+  <UCollapsible :open="open">
+    <template #content>
+      <div class="mt-2.5 flex flex-col gap-2.5 pb-1">
+        <UTabs
+          v-model="tab"
+          :items="tabs"
+          :content="false"
+          size="xs"
           color="neutral"
-          variant="soft"
-          size="sm"
-          aria-label="Remove custom palette"
-          @click="remove"
         />
-      </UTooltip>
-    </div>
-
-    <div v-if="styleOffset !== 'fitted'" class="flex items-center gap-2">
-      <span class="text-[11px] text-muted shrink-0 w-10">Effect</span>
-      <USlider
-        v-model="offsetAmount"
-        :min="0"
-        :max="200"
-        :step="5"
-        size="sm"
-        color="neutral"
-        aria-label="Effect strength"
-        @update:model-value="applyStyleOffset(styleOffset)"
-      />
-      <span class="text-[11px] text-dimmed tabular-nums shrink-0 w-8 text-right">{{ offsetAmount }}%</span>
-    </div>
-  </div>
+
+        <div>
+          <ThemeStudioCurveEditor
+            v-model="params[tab]"
+            :y-min="windows[tab].min"
+            :y-max="windows[tab].max"
+            :stop-colors="stopColors"
+            @drag-start="onDragStart"
+            @drag-end="onDragEnd"
+          />
+
+          <div class="flex rounded-b-sm overflow-hidden ring ring-default">
+            <UTooltip v-for="shade in SHADES" :key="shade" :text="`${shade} · ${shades[shade]}`">
+              <div class="aspect-square flex-1" :style="{ backgroundColor: shades[shade] }" />
+            </UTooltip>
+          </div>
+        </div>
+
+        <div class="flex items-center gap-1.5">
+          <USelect
+            v-model="styleOffset"
+            size="sm"
+            color="neutral"
+            icon="i-lucide-sparkles"
+            :items="styleOffsetItems"
+            class="flex-1"
+            @update:model-value="applyStyleOffset($event as string)"
+          />
+
+          <UTooltip v-if="active" text="Remove custom palette">
+            <UButton
+              icon="i-lucide-trash-2"
+              color="neutral"
+              variant="soft"
+              size="sm"
+              aria-label="Remove custom palette"
+              @click="remove"
+            />
+          </UTooltip>
+        </div>
+
+        <div v-if="styleOffset !== 'fitted'" class="flex items-center gap-2">
+          <span class="text-[11px] text-muted shrink-0 w-10">Effect</span>
+          <USlider
+            v-model="offsetAmount"
+            :min="0"
+            :max="200"
+            :step="5"
+            size="sm"
+            color="neutral"
+            aria-label="Effect strength"
+            @update:model-value="applyStyleOffset(styleOffset)"
+          />
+          <span class="text-[11px] text-dimmed tabular-nums shrink-0 w-8 text-right">{{ offsetAmount }}%</span>
+        </div>
+      </div>
+    </template>
+  </UCollapsible>
 </template>

From 1c42cb0b301143f0dcc583f137509ac3dc964469 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 15:44:29 +0200
Subject: [PATCH 058/185] feat(docs): Theme Studio becomes a fullscreen modal;
 simplified picker popover; hard shadows dedupe against stock classes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The /theme page is gone — the studio opens as a fullscreen modal from the
header popover, which slims down to presets + shuffle, primary/background
dropdowns, radius, color mode and the copy/export shortcuts.

Hard shadows now ride composed --ui-shadow-hard* variables via
shadow-(--var) utilities: tailwind-merge couldn't parse the old
shadow-[calc(...)] literals as shadows, so stock shadow-sm/lg classes on
overlays (popover, tooltip, dropdown) survived the merge and won on CSS
order.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/assets/css/main.css                  |   7 +
 docs/app/components/header/Header.vue         |   2 +
 .../components/theme-picker/ThemePicker.vue   | 255 +++++++++++-------
 .../theme-studio/ThemeStudioModal.vue         | 142 ++++++++++
 .../theme-studio/ThemeStudioViewA11y.vue      |   2 +-
 docs/app/composables/useHeader.ts             |   7 -
 docs/app/composables/useThemeStudio.ts        |   4 +
 docs/app/pages/theme.vue                      | 130 ---------
 docs/app/utils/theme-engine/export.ts         |   5 +
 docs/app/utils/theme-engine/import.ts         |   7 +-
 docs/app/utils/theme-engine/styles.ts         |  10 +-
 test/utils/theme-engine.spec.ts               |   8 +-
 12 files changed, 327 insertions(+), 252 deletions(-)
 create mode 100644 docs/app/components/theme-studio/ThemeStudioModal.vue
 delete mode 100644 docs/app/pages/theme.vue

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index d79ed13061..8365f3aa81 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -143,6 +143,13 @@ html.theme-studio-dragging body *:not([data-curve-editor] *) {
   --ui-shadow-spread: 0px;
   --ui-shadow-final-hard: color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 100%), transparent);
   --ui-shadow-final-soft: color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 25%), transparent);
+  /* Composed hard shadows, used as shadow-(--ui-shadow-hard*) so
+     tailwind-merge can dedupe them against stock shadow-sm/lg classes
+     (it can't parse a full shadow-[calc(...)_...] arbitrary value). */
+  --ui-shadow-hard: var(--ui-shadow-offset-x) var(--ui-shadow-offset-y) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard);
+  --ui-shadow-hard-lg: calc(var(--ui-shadow-offset-x) * 1.5) calc(var(--ui-shadow-offset-y) * 1.5) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard);
+  --ui-shadow-hard-sm: calc(var(--ui-shadow-offset-x) * 0.66) calc(var(--ui-shadow-offset-y) * 0.66) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard);
+  --ui-shadow-hard-half: calc(var(--ui-shadow-offset-x) / 2) calc(var(--ui-shadow-offset-y) / 2) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard);
 }
 :where(.dark) {
   --ui-shadow-color: black;
diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index 137a707520..3a565ce3b8 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -47,6 +47,8 @@ function toggleChat() {
 
       <ThemePicker />
 
+      <ThemeStudioModal />
+
       <UTooltip text="Open on GitHub" class="hidden lg:flex">
         <UButton
           color="neutral"
diff --git a/docs/app/components/theme-picker/ThemePicker.vue b/docs/app/components/theme-picker/ThemePicker.vue
index 269cfb8c7f..9636f7eb9d 100644
--- a/docs/app/components/theme-picker/ThemePicker.vue
+++ b/docs/app/components/theme-picker/ThemePicker.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { resolveAlias, resolveShade } from '../../utils/theme-engine'
+import type { ThemeDoc } from '../../utils/theme-engine'
+
 const colorMode = useColorMode()
 const { track } = useAnalytics()
 
@@ -22,10 +25,6 @@ const {
   setBlackAsPrimary,
   radiuses,
   radius,
-  fonts,
-  font,
-  icon,
-  icons,
   modes,
   mode,
   hasCSSChanges,
@@ -35,10 +34,62 @@ const {
   exportConfig,
   resetTheme
 } = useTheme()
+
+const { presets, activePreset, applyPreset, shuffle, selectPalette, studioOpen } = useThemeStudio()
+
+/** The preset's primary + neutral at 500, straight from its own document. */
+function presetSwatches(doc: ThemeDoc): string[] {
+  const primaryColor = doc.blackAsPrimary ? 'black' : resolveShade(doc, resolveAlias(doc, 'primary'), 500)
+  const neutralColor = resolveShade(doc, resolveAlias(doc, 'neutral'), 500)
+  return [primaryColor, neutralColor].filter((color): color is string => !!color)
+}
+
+const presetItems = computed(() => presets.map(preset => ({
+  label: preset.name,
+  icon: preset.icon,
+  type: 'checkbox' as const,
+  checked: activePreset.value === preset.id,
+  swatches: presetSwatches(preset.doc),
+  onSelect: () => applyPreset(preset)
+})))
+
+const presetLabel = computed(() => presets.find(preset => preset.id === activePreset.value)?.name || 'Presets')
+
+/** Current values may be preset/custom ramps that aren't in the stock lists. */
+const primaryItems = computed(() => [...new Set(['black', ...(blackAsPrimary.value ? [] : [primary.value]), ...primaryColors])])
+const neutralItems = computed(() => [...new Set([neutral.value, ...neutralColors])])
+
+const primaryModel = computed({
+  get: () => blackAsPrimary.value ? 'black' : primary.value,
+  set: (value: string) => {
+    if (value === 'black') {
+      setBlackAsPrimary(true)
+    } else {
+      setBlackAsPrimary(false)
+      selectPalette('primary', value)
+    }
+  }
+})
+
+const neutralModel = computed({
+  get: () => neutral.value,
+  set: (value: string) => selectPalette('neutral', value)
+})
+
+/** Palette name → the css var chip name (tailwind's neutral gray is remapped in docs). */
+function chipColor(name: string): string | undefined {
+  if (name === 'black') return undefined
+  return `var(--color-${name === 'neutral' ? 'old-neutral' : name}-500)`
+}
+
+function openStudio() {
+  open.value = false
+  studioOpen.value = true
+}
 </script>
 
 <template>
-  <UPopover v-model:open="open" :ui="{ content: 'w-72 px-6 py-4 flex flex-col gap-4 overflow-y-auto max-h-[calc(100vh-5rem)]' }">
+  <UPopover v-model:open="open" :ui="{ content: 'w-72 p-4 flex flex-col gap-4 overflow-y-auto max-h-[calc(100vh-5rem)]' }">
     <template #default>
       <UButton
         icon="i-lucide-swatch-book"
@@ -51,6 +102,42 @@ const {
     </template>
 
     <template #content>
+      <div class="flex gap-1.5">
+        <UDropdownMenu :items="presetItems" :content="{ align: 'start' }" class="flex-1 min-w-0">
+          <UButton
+            :label="presetLabel"
+            icon="i-lucide-swatch-book"
+            trailing-icon="i-lucide-chevron-down"
+            color="neutral"
+            variant="subtle"
+            size="sm"
+            block
+          />
+
+          <template #item-trailing="{ item }">
+            <span class="inline-flex items-center gap-1">
+              <span
+                v-for="(swatch, index) in item.swatches"
+                :key="index"
+                class="size-2 rounded-full ring ring-default"
+                :style="{ backgroundColor: swatch }"
+              />
+            </span>
+          </template>
+        </UDropdownMenu>
+
+        <UTooltip text="Random theme">
+          <UButton
+            icon="i-lucide-dices"
+            color="neutral"
+            variant="subtle"
+            size="sm"
+            aria-label="Random theme"
+            @click="shuffle"
+          />
+        </UTooltip>
+      </div>
+
       <fieldset>
         <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
           Primary
@@ -66,31 +153,36 @@ const {
           />
         </legend>
 
-        <div class="grid grid-cols-3 gap-1 -mx-2">
-          <ThemePickerButton
-            label="Black"
-            :selected="blackAsPrimary"
-            @click="setBlackAsPrimary(true)"
-          >
-            <template #leading>
-              <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
-            </template>
-          </ThemePickerButton>
+        <USelect
+          v-model="primaryModel"
+          :items="primaryItems"
+          size="sm"
+          color="neutral"
+          variant="subtle"
+          class="w-full capitalize"
+          :ui="{ item: 'capitalize' }"
+        >
+          <template #leading>
+            <span
+              class="inline-block size-2 rounded-full"
+              :class="{ 'bg-black dark:bg-white': primaryModel === 'black' }"
+              :style="{ backgroundColor: chipColor(primaryModel) }"
+            />
+          </template>
 
-          <ThemePickerButton
-            v-for="color in primaryColors"
-            :key="color"
-            :label="color"
-            :chip="color"
-            :selected="!blackAsPrimary && primary === color"
-            @click="primary = color"
-          />
-        </div>
+          <template #item-leading="{ item }">
+            <span
+              class="inline-block size-2 rounded-full"
+              :class="{ 'bg-black dark:bg-white': item === 'black' }"
+              :style="{ backgroundColor: chipColor(item as string) }"
+            />
+          </template>
+        </USelect>
       </fieldset>
 
       <fieldset>
         <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
-          Neutral
+          Background
 
           <UButton
             to="/docs/getting-started/theme/css-variables#text"
@@ -103,16 +195,29 @@ const {
           />
         </legend>
 
-        <div class="grid grid-cols-3 gap-1 -mx-2">
-          <ThemePickerButton
-            v-for="color in neutralColors"
-            :key="color"
-            :label="color"
-            :chip="color === 'neutral' ? 'old-neutral' : color"
-            :selected="neutral === color"
-            @click="neutral = color"
-          />
-        </div>
+        <USelect
+          v-model="neutralModel"
+          :items="neutralItems"
+          size="sm"
+          color="neutral"
+          variant="subtle"
+          class="w-full capitalize"
+          :ui="{ item: 'capitalize' }"
+        >
+          <template #leading>
+            <span
+              class="inline-block size-2 rounded-full"
+              :style="{ backgroundColor: chipColor(neutralModel) }"
+            />
+          </template>
+
+          <template #item-leading="{ item }">
+            <span
+              class="inline-block size-2 rounded-full"
+              :style="{ backgroundColor: chipColor(item as string) }"
+            />
+          </template>
+        </USelect>
       </fieldset>
 
       <fieldset>
@@ -130,72 +235,16 @@ const {
           />
         </legend>
 
-        <div class="grid grid-cols-5 gap-1 -mx-2">
+        <UFieldGroup class="w-full">
           <ThemePickerButton
             v-for="r in radiuses"
             :key="r"
             :label="String(r)"
-            class="justify-center px-0"
+            class="grow"
             :selected="radius === r"
             @click="radius = r"
           />
-        </div>
-      </fieldset>
-
-      <fieldset>
-        <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
-          Font
-
-          <UButton
-            to="/docs/getting-started/integrations/fonts"
-            size="xs"
-            color="neutral"
-            variant="link"
-            icon="i-lucide-help-circle"
-            class="p-0 -my-0.5"
-            :ui="{ leadingIcon: 'size-3' }"
-          />
-        </legend>
-
-        <div class="-mx-2">
-          <USelect
-            v-model="font"
-            size="sm"
-            color="neutral"
-            icon="i-lucide-type"
-            :items="fonts"
-            class="w-full ring-default rounded-sm hover:bg-elevated/50 text-[11px] data-[state=open]:bg-elevated/50"
-            :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-          />
-        </div>
-      </fieldset>
-
-      <fieldset>
-        <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
-          Icons
-
-          <UButton
-            to="/docs/getting-started/integrations/icons"
-            size="xs"
-            color="neutral"
-            variant="link"
-            icon="i-lucide-help-circle"
-            class="p-0 -my-0.5"
-            :ui="{ leadingIcon: 'size-3' }"
-          />
-        </legend>
-
-        <div class="-mx-2">
-          <USelect
-            v-model="icon"
-            size="sm"
-            color="neutral"
-            :icon="icons.find(i => i.value === icon)?.icon"
-            :items="icons"
-            class="w-full ring-default rounded-sm hover:bg-elevated/50 capitalize text-[11px] data-[state=open]:bg-elevated/50"
-            :ui="{ item: 'capitalize text-[11px]', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
-          />
-        </div>
+        </UFieldGroup>
       </fieldset>
 
       <fieldset>
@@ -213,7 +262,7 @@ const {
           />
         </legend>
 
-        <div class="grid grid-cols-3 gap-1 -mx-2">
+        <div class="grid grid-cols-3 gap-1">
           <ThemePickerButton
             v-for="m in modes"
             :key="m.label"
@@ -225,15 +274,13 @@ const {
       </fieldset>
 
       <UButton
-        to="/theme"
         label="Open Theme Studio"
         icon="i-lucide-swatch-book"
         color="neutral"
-        variant="soft"
+        variant="subtle"
         size="sm"
         block
-        class="text-[11px] -mx-2 w-[calc(100%+1rem)]"
-        @click="open = false"
+        @click="openStudio"
       />
 
       <fieldset v-if="hasCSSChanges || hasConfigChanges">
@@ -241,11 +288,11 @@ const {
           Export
         </legend>
 
-        <div class="flex items-center justify-between gap-1 -mx-2">
+        <div class="flex items-center justify-between gap-1">
           <UButton
             v-if="hasCSSChanges"
             color="neutral"
-            variant="soft"
+            variant="subtle"
             size="sm"
             label="main.css"
             class="flex-1 text-[11px]"
@@ -255,7 +302,7 @@ const {
           <UButton
             v-if="hasConfigChanges"
             color="neutral"
-            variant="soft"
+            variant="subtle"
             size="sm"
             :label="configLabel"
             :icon="copiedConfig ? 'i-lucide-copy-check' : 'i-lucide-copy'"
@@ -265,10 +312,10 @@ const {
           <UTooltip text="Reset theme">
             <UButton
               color="neutral"
-              variant="outline"
+              variant="subtle"
               size="sm"
               icon="i-lucide-rotate-ccw"
-              class="ms-auto ring-default hover:bg-elevated/50"
+              class="ms-auto"
               @click="resetTheme"
             />
           </UTooltip>
diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
new file mode 100644
index 0000000000..209f8d39e7
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+const { track } = useAnalytics()
+const { reset, style, studioOpen: open } = useThemeStudio()
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    track('Theme Studio Opened')
+  }
+})
+
+const sidebarOpen = ref(true)
+
+// The studio's own chrome follows the border treatment too — whole literal
+// class strings per width so tailwind's scanner sees them.
+const TOOLBAR_EDGE: Record<number, string> = { 0: 'border-b-0', 1: 'border-b', 2: 'border-b-2', 3: 'border-b-3', 4: 'border-b-4' }
+const SIDEBAR_EDGE: Record<number, string> = {
+  0: 'border-b-0 lg:border-r-0',
+  1: 'border-b lg:border-b-0 lg:border-r',
+  2: 'border-b-2 lg:border-b-0 lg:border-r-2',
+  3: 'border-b-3 lg:border-b-0 lg:border-r-3',
+  4: 'border-b-4 lg:border-b-0 lg:border-r-4'
+}
+
+const chromeWidth = computed(() => {
+  const border = style.value.border
+  if (!border || border === 'default') return 1
+  if (border === 'none') return 0
+  return style.value.borderWidth ?? 2
+})
+
+/** Preview views: the bento grid plus app-scale layouts from the real templates. */
+const view = ref('grid')
+
+const viewTabs = [
+  { label: 'Grid', icon: 'i-lucide-layout-grid', value: 'grid' },
+  { label: 'Dashboard', icon: 'i-lucide-layout-dashboard', value: 'dashboard' },
+  { label: 'Chat', icon: 'i-lucide-message-circle', value: 'chat' },
+  { label: 'SaaS', icon: 'i-lucide-rocket', value: 'saas' },
+  { label: 'Landing', icon: 'i-lucide-panels-top-left', value: 'landing' },
+  { label: 'A11y', icon: 'i-lucide-accessibility', value: 'a11y' }
+]
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    fullscreen
+    title="Theme Studio"
+    description="Customize Nuxt UI live: colors, radius, fonts and icons — then export only what you changed."
+  >
+    <template #content>
+      <div class="flex flex-col lg:flex-row h-full overflow-y-auto lg:overflow-hidden bg-default">
+        <aside
+          v-show="sidebarOpen"
+          class="shrink-0 lg:w-80 border-default lg:overflow-y-auto"
+          :class="SIDEBAR_EDGE[chromeWidth]"
+        >
+          <ThemeStudioControls />
+        </aside>
+
+        <div class="flex-1 flex flex-col min-w-0">
+          <div
+            class="flex items-center gap-2 border-default px-4 sm:px-6 py-3"
+            :class="TOOLBAR_EDGE[chromeWidth]"
+          >
+            <UTooltip :text="sidebarOpen ? 'Hide settings' : 'Show settings'">
+              <UButton
+                :icon="sidebarOpen ? 'i-lucide-panel-left-close' : 'i-lucide-panel-left-open'"
+                color="neutral"
+                variant="ghost"
+                size="sm"
+                aria-label="Toggle settings panel"
+                @click="sidebarOpen = !sidebarOpen"
+              />
+            </UTooltip>
+
+            <Logo class="w-auto h-4 shrink-0" />
+
+            <h2 class="text-sm font-semibold text-highlighted mt-1 me-2">
+              Theme Studio
+            </h2>
+
+            <span class="flex-1" />
+
+            <UTabs
+              v-model="view"
+              :items="viewTabs"
+              :content="false"
+              size="xs"
+              color="neutral"
+              :ui="{ trigger: 'text-[11px]' }"
+            />
+
+            <span class="flex-1" />
+
+            <ThemeStudioImport />
+
+            <ThemeStudioExport />
+
+            <UTooltip text="Reset theme">
+              <UButton
+                icon="i-lucide-rotate-ccw"
+                color="neutral"
+                variant="outline"
+                size="sm"
+                aria-label="Reset theme"
+                @click="reset"
+              />
+            </UTooltip>
+
+            <USeparator orientation="vertical" class="h-5" />
+
+            <UTooltip text="Close">
+              <UButton
+                icon="i-lucide-x"
+                color="neutral"
+                variant="ghost"
+                size="sm"
+                aria-label="Close Theme Studio"
+                @click="open = false"
+              />
+            </UTooltip>
+          </div>
+
+          <!-- The grid scrolls as a page; the app-shell views own their height
+               and scroll internally, so the pane locks (bounded on mobile too). -->
+          <div
+            class="flex-1 min-h-0 p-0"
+            :class="view === 'grid' ? 'lg:overflow-y-auto' : 'overflow-hidden max-lg:h-[75vh]'"
+          >
+            <ThemeStudioBento v-if="view === 'grid'" />
+            <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
+            <ThemeStudioViewChat v-else-if="view === 'chat'" />
+            <ThemeStudioViewSaas v-else-if="view === 'saas'" />
+            <ThemeStudioViewLanding v-else-if="view === 'landing'" />
+            <ThemeStudioViewA11y v-else-if="view === 'a11y'" />
+          </div>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewA11y.vue b/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
index 367cb33553..7f701e1928 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
@@ -164,7 +164,7 @@ function level(ratio: number): { label: string, color: 'success' | 'warning' | '
               <span class="text-xs tabular-nums font-mono opacity-80" :style="{ color: cell.fg }">
                 {{ cell.ratio.toFixed(1) }}
               </span>
-              <UBadge :label="level(cell.ratio).label" :color="level(cell.ratio).color" variant="subtle" size="sm" />
+              <UBadge :label="level(cell.ratio).label" :color="level(cell.ratio).color" variant="solid" size="sm" />
             </span>
           </div>
         </div>
diff --git a/docs/app/composables/useHeader.ts b/docs/app/composables/useHeader.ts
index 50518d4d43..8008eddece 100644
--- a/docs/app/composables/useHeader.ts
+++ b/docs/app/composables/useHeader.ts
@@ -8,9 +8,6 @@ export function useHeader() {
   }, {
     label: 'Templates',
     to: '/templates'
-  }, {
-    label: 'Theme',
-    to: '/theme'
   }, {
     label: 'Resources',
     active: route.path.startsWith('/showcase') || route.path.startsWith('/community') || route.path.startsWith('/blog'),
@@ -68,10 +65,6 @@ export function useHeader() {
     label: 'Templates',
     icon: 'i-lucide-panels-top-left',
     to: '/templates'
-  }, {
-    label: 'Theme Studio',
-    icon: 'i-lucide-swatch-book',
-    to: '/theme'
   }, {
     label: 'Showcase',
     icon: 'i-lucide-presentation',
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 84a6eb9b76..847b4eacc5 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -19,6 +19,9 @@ export function useThemeStudio() {
 
   const activePreset = useState<string | undefined>('nuxt-ui-theme-preset', () => undefined)
 
+  /** The studio modal — one instance mounted in the header, openable from anywhere. */
+  const studioOpen = useState('nuxt-ui-studio-open', () => false)
+
   /**
    * Curve params per alias, kept so the editor stays editable across
    * reloads. useState + explicit persistence (not useLocalStorage) so
@@ -332,6 +335,7 @@ export function useThemeStudio() {
   return {
     presets,
     activePreset,
+    studioOpen,
     style,
     setStyle,
     paletteParams,
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
deleted file mode 100644
index 7d91099125..0000000000
--- a/docs/app/pages/theme.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<script setup lang="ts">
-const title = 'Theme Studio'
-const description = 'Customize Nuxt UI live: colors, radius, fonts and icons — then export only what you changed.'
-
-useSeoMeta({
-  title,
-  description,
-  ogTitle: title,
-  ogDescription: description
-})
-
-useCanonical()
-
-if (import.meta.server) {
-  defineOgImage('Docs.takumi', {
-    title,
-    description
-  })
-}
-
-const { reset, style } = useThemeStudio()
-
-const sidebarOpen = ref(true)
-
-// The studio's own chrome follows the border treatment too — whole literal
-// class strings per width so tailwind's scanner sees them.
-const TOOLBAR_EDGE: Record<number, string> = { 0: 'border-b-0', 1: 'border-b', 2: 'border-b-2', 3: 'border-b-3', 4: 'border-b-4' }
-const SIDEBAR_EDGE: Record<number, string> = {
-  0: 'border-b-0 lg:border-r-0',
-  1: 'border-b lg:border-b-0 lg:border-r',
-  2: 'border-b-2 lg:border-b-0 lg:border-r-2',
-  3: 'border-b-3 lg:border-b-0 lg:border-r-3',
-  4: 'border-b-4 lg:border-b-0 lg:border-r-4'
-}
-
-const chromeWidth = computed(() => {
-  const border = style.value.border
-  if (!border || border === 'default') return 1
-  if (border === 'none') return 0
-  return style.value.borderWidth ?? 2
-})
-
-/** Preview views: the bento grid plus app-scale layouts from the real templates. */
-const view = ref('grid')
-
-const viewTabs = [
-  { label: 'Grid', icon: 'i-lucide-layout-grid', value: 'grid' },
-  { label: 'Dashboard', icon: 'i-lucide-layout-dashboard', value: 'dashboard' },
-  { label: 'Chat', icon: 'i-lucide-message-circle', value: 'chat' },
-  { label: 'SaaS', icon: 'i-lucide-rocket', value: 'saas' },
-  { label: 'Landing', icon: 'i-lucide-panels-top-left', value: 'landing' },
-  { label: 'A11y', icon: 'i-lucide-accessibility', value: 'a11y' }
-]
-</script>
-
-<template>
-  <main class="flex flex-col lg:flex-row lg:h-[calc(100vh-var(--ui-header-height))]">
-    <aside
-      v-show="sidebarOpen"
-      class="shrink-0 lg:w-80 border-default lg:overflow-y-auto"
-      :class="SIDEBAR_EDGE[chromeWidth]"
-    >
-      <ThemeStudioControls />
-    </aside>
-
-    <div class="flex-1 flex flex-col min-w-0">
-      <div
-        class="flex items-center gap-2 border-default px-4 sm:px-6 py-3"
-        :class="TOOLBAR_EDGE[chromeWidth]"
-      >
-        <UTooltip :text="sidebarOpen ? 'Hide settings' : 'Show settings'">
-          <UButton
-            :icon="sidebarOpen ? 'i-lucide-panel-left-close' : 'i-lucide-panel-left-open'"
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            aria-label="Toggle settings panel"
-            @click="sidebarOpen = !sidebarOpen"
-          />
-        </UTooltip>
-
-        <h1 class="text-sm font-semibold text-highlighted me-2">
-          Theme Studio
-        </h1>
-
-        <span class="flex-1" />
-
-        <UTabs
-          v-model="view"
-          :items="viewTabs"
-          :content="false"
-          size="xs"
-          color="neutral"
-          :ui="{ trigger: 'text-[11px]' }"
-        />
-
-        <span class="flex-1" />
-
-        <ThemeStudioImport />
-
-        <ThemeStudioExport />
-
-        <UTooltip text="Reset theme">
-          <UButton
-            icon="i-lucide-rotate-ccw"
-            color="neutral"
-            variant="outline"
-            size="sm"
-            aria-label="Reset theme"
-            @click="reset"
-          />
-        </UTooltip>
-      </div>
-
-      <!-- The grid scrolls as a page; the app-shell views own their height
-           and scroll internally, so the pane locks (bounded on mobile too). -->
-      <div
-        class="flex-1 min-h-0 p-0"
-        :class="view === 'grid' ? 'lg:overflow-y-auto' : 'overflow-hidden max-lg:h-[75vh]'"
-      >
-        <ThemeStudioBento v-if="view === 'grid'" />
-        <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
-        <ThemeStudioViewChat v-else-if="view === 'chat'" />
-        <ThemeStudioViewSaas v-else-if="view === 'saas'" />
-        <ThemeStudioViewLanding v-else-if="view === 'landing'" />
-        <ThemeStudioViewA11y v-else-if="view === 'a11y'" />
-      </div>
-    </div>
-  </main>
-</template>
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index 95ba8e5195..f89cd9dea4 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -84,6 +84,11 @@ export function generateCSS(doc: ThemeDoc): string {
       style.light['--ui-shadow-blur'] = '0px'
       style.light['--ui-shadow-spread'] = '0px'
     }
+    // The shadow-(--ui-shadow-hard*) utilities read these compositions.
+    style.light['--ui-shadow-hard'] = 'var(--ui-shadow-offset-x) var(--ui-shadow-offset-y) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard)'
+    style.light['--ui-shadow-hard-lg'] = 'calc(var(--ui-shadow-offset-x) * 1.5) calc(var(--ui-shadow-offset-y) * 1.5) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard)'
+    style.light['--ui-shadow-hard-sm'] = 'calc(var(--ui-shadow-offset-x) * 0.66) calc(var(--ui-shadow-offset-y) * 0.66) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard)'
+    style.light['--ui-shadow-hard-half'] = 'calc(var(--ui-shadow-offset-x) / 2) calc(var(--ui-shadow-offset-y) / 2) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard)'
   }
   if (doc.style?.shadow && doc.style.shadow !== 'none') {
     if (doc.style.shadow === 'soft' && !style.light['--ui-shadow-color']) {
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index 90c88f0e6e..4fcf32b0a7 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -176,6 +176,11 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
     spread: take('--ui-shadow-spread')
   }
   const finals = { hard: take('--ui-shadow-final-hard'), soft: take('--ui-shadow-final-soft') }
+  // Force-emitted compositions the shadow-(--ui-shadow-hard*) utilities read
+  // — never a choice of their own, so consume them silently.
+  for (const composed of ['--ui-shadow-hard', '--ui-shadow-hard-lg', '--ui-shadow-hard-sm', '--ui-shadow-hard-half']) {
+    take(composed)
+  }
   const shadowColor = take('--ui-shadow-color')
   const frameColor = take('--ui-frame-color')
 
@@ -407,7 +412,7 @@ function detectFrame(components: Record<string, any>): boolean {
 /** Shadow fallback when only a config was pasted (CSS normally decides). */
 function detectShadow(components: Record<string, any>): StyleOptions['shadow'] {
   const slots = Object.values(components).flatMap(component => Object.values(component?.slots || {})) as string[]
-  if (slots.some(classes => classes.includes('var(--ui-shadow-offset-x)'))) return 'hard'
+  if (slots.some(classes => classes.includes('--ui-shadow-hard') || classes.includes('var(--ui-shadow-offset-x)'))) return 'hard'
   if (slots.some(classes => classes.includes('--ui-shadow-final-soft'))) return 'soft'
   return undefined
 }
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 470fb3cc4e..13d09bbc13 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -175,9 +175,9 @@ const FLAT_FIELD_VARIANTS = [
 // them). Hard scales mirror the originals: base for field-size surfaces,
 // ×1.5 for panels/overlays, ×0.66 for badge-size ones.
 const SOFT_LG = 'shadow-lg shadow-(color:--ui-shadow-final-soft)'
-const HARD_BASE = 'shadow-[var(--ui-shadow-offset-x)_var(--ui-shadow-offset-y)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]'
-const HARD_LG = 'shadow-[calc(var(--ui-shadow-offset-x)*1.5)_calc(var(--ui-shadow-offset-y)*1.5)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]'
-const HARD_SM = 'shadow-[calc(var(--ui-shadow-offset-x)*0.66)_calc(var(--ui-shadow-offset-y)*0.66)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]'
+const HARD_BASE = 'shadow-(--ui-shadow-hard)'
+const HARD_LG = 'shadow-(--ui-shadow-hard-lg)'
+const HARD_SM = 'shadow-(--ui-shadow-hard-sm)'
 
 const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
   none: {},
@@ -222,7 +222,7 @@ const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
       slots: {
         // Geometry rides CSS variables so the sliders are a variable swap;
         // hover sinks halfway into the shadow via calc, active collapses it.
-        base: 'shadow-[var(--ui-shadow-offset-x)_var(--ui-shadow-offset-y)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)] hover:translate-x-[calc(var(--ui-shadow-offset-x)/2)] hover:translate-y-[calc(var(--ui-shadow-offset-y)/2)] hover:shadow-[calc(var(--ui-shadow-offset-x)/2)_calc(var(--ui-shadow-offset-y)/2)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)] active:translate-x-(--ui-shadow-offset-x) active:translate-y-(--ui-shadow-offset-y) active:shadow-none transition-[box-shadow,translate,background-color]'
+        base: 'shadow-(--ui-shadow-hard) hover:translate-x-[calc(var(--ui-shadow-offset-x)/2)] hover:translate-y-[calc(var(--ui-shadow-offset-y)/2)] hover:shadow-(--ui-shadow-hard-half) active:translate-x-(--ui-shadow-offset-x) active:translate-y-(--ui-shadow-offset-y) active:shadow-none transition-[box-shadow,translate,background-color]'
       },
       // A floating shadow under an invisible box reads as a glitch — ghost
       // and link buttons stay flat, as in the reference neobrutalism kits.
@@ -247,7 +247,7 @@ const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
     toast: { slots: { root: HARD_LG } },
     drawer: { slots: { content: HARD_LG } },
     modal: { compoundVariants: [{ fullscreen: false, class: { content: HARD_LG } }] },
-    slideover: { slots: { content: 'sm:shadow-[calc(var(--ui-shadow-offset-x)*1.5)_calc(var(--ui-shadow-offset-y)*1.5)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]' } }
+    slideover: { slots: { content: 'sm:shadow-(--ui-shadow-hard-lg)' } }
   }
 }
 
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 495db3aa68..7bb5fd7176 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -291,13 +291,13 @@ describe('styleComponents', () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
     const components = styleComponents({ shadow: 'hard', border: 'bold' })
 
-    expect(components.button!.slots!.base).toContain('shadow-[var(--ui-shadow-offset-x)_var(--ui-shadow-offset-y)_var(--ui-shadow-blur)_var(--ui-shadow-spread)_var(--ui-shadow-final-hard)]')
+    expect(components.button!.slots!.base).toContain('shadow-(--ui-shadow-hard)')
     // bold only thickens existing rings: buttons gain no base ring, the
     // outline/subtle compound overrides carry width only
     expect(components.button!.slots!.base).not.toContain('ring')
     expect(components.button!.compoundVariants).toContainEqual({ variant: 'outline', class: 'ring-2' })
     // card rings live at variant level, so bold ships compounds, not slots
-    expect(components.card!.slots?.root ?? '').toContain('var(--ui-shadow-final-hard)]')
+    expect(components.card!.slots?.root ?? '').toContain('shadow-(--ui-shadow-hard-lg)')
     expect(components.card!.compoundVariants).toContainEqual({ variant: 'outline', class: { root: 'ring-2 divide-y-2' } })
   })
 
@@ -321,9 +321,9 @@ describe('styleComponents', () => {
     const merged = mergeUi(styleComponents({ shadow: 'hard' }), { button: { slots: { base: 'rounded-full' } } })
 
     // both the shadow classes and the explicit override survive, explicit last
-    expect(merged.button.slots.base).toContain('var(--ui-shadow-final-hard)]')
+    expect(merged.button.slots.base).toContain('shadow-(--ui-shadow-hard)')
     expect(merged.button.slots.base.endsWith('rounded-full')).toBe(true)
-    expect(merged.card.slots.root).toContain('var(--ui-shadow-final-hard)]')
+    expect(merged.card.slots.root).toContain('shadow-(--ui-shadow-hard-lg)')
   })
 })
 

From 2389a71ae92149a5f86b8e76e8106a797d5bc823 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 15:45:13 +0200
Subject: [PATCH 059/185] fix(docs): update ThemeStudioModal color to primary
 for improved visibility

---
 docs/app/components/theme-studio/ThemeStudioModal.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index 209f8d39e7..d5c0fe4039 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -87,8 +87,7 @@ const viewTabs = [
               :items="viewTabs"
               :content="false"
               size="xs"
-              color="neutral"
-              :ui="{ trigger: 'text-[11px]' }"
+              color="primary"
             />
 
             <span class="flex-1" />

From ece3b314c7736e7f378bf8e7e43136f83f2020a5 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 17:55:08 +0200
Subject: [PATCH 060/185] feat(docs): studio toolbar spans the full modal width
 above the sidebar

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioModal.vue         | 136 +++++++++---------
 1 file changed, 68 insertions(+), 68 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index d5c0fe4039..11aed3e294 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -49,82 +49,82 @@ const viewTabs = [
     description="Customize Nuxt UI live: colors, radius, fonts and icons — then export only what you changed."
   >
     <template #content>
-      <div class="flex flex-col lg:flex-row h-full overflow-y-auto lg:overflow-hidden bg-default">
-        <aside
-          v-show="sidebarOpen"
-          class="shrink-0 lg:w-80 border-default lg:overflow-y-auto"
-          :class="SIDEBAR_EDGE[chromeWidth]"
+      <div class="flex flex-col h-full bg-default">
+        <div
+          class="shrink-0 flex items-center gap-2 border-default px-4 sm:px-6 py-3"
+          :class="TOOLBAR_EDGE[chromeWidth]"
         >
-          <ThemeStudioControls />
-        </aside>
+          <UTooltip :text="sidebarOpen ? 'Hide settings' : 'Show settings'">
+            <UButton
+              :icon="sidebarOpen ? 'i-lucide-panel-left-close' : 'i-lucide-panel-left-open'"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              aria-label="Toggle settings panel"
+              @click="sidebarOpen = !sidebarOpen"
+            />
+          </UTooltip>
 
-        <div class="flex-1 flex flex-col min-w-0">
-          <div
-            class="flex items-center gap-2 border-default px-4 sm:px-6 py-3"
-            :class="TOOLBAR_EDGE[chromeWidth]"
-          >
-            <UTooltip :text="sidebarOpen ? 'Hide settings' : 'Show settings'">
-              <UButton
-                :icon="sidebarOpen ? 'i-lucide-panel-left-close' : 'i-lucide-panel-left-open'"
-                color="neutral"
-                variant="ghost"
-                size="sm"
-                aria-label="Toggle settings panel"
-                @click="sidebarOpen = !sidebarOpen"
-              />
-            </UTooltip>
-
-            <Logo class="w-auto h-4 shrink-0" />
-
-            <h2 class="text-sm font-semibold text-highlighted mt-1 me-2">
-              Theme Studio
-            </h2>
-
-            <span class="flex-1" />
-
-            <UTabs
-              v-model="view"
-              :items="viewTabs"
-              :content="false"
-              size="xs"
-              color="primary"
+          <Logo class="w-auto h-4 shrink-0" />
+
+          <h2 class="text-sm font-semibold text-highlighted mt-1 me-2">
+            Theme Studio
+          </h2>
+
+          <span class="flex-1" />
+
+          <UTabs
+            v-model="view"
+            :items="viewTabs"
+            :content="false"
+            size="xs"
+            color="primary"
+          />
+
+          <span class="flex-1" />
+
+          <ThemeStudioImport />
+
+          <ThemeStudioExport />
+
+          <UTooltip text="Reset theme">
+            <UButton
+              icon="i-lucide-rotate-ccw"
+              color="neutral"
+              variant="outline"
+              size="sm"
+              aria-label="Reset theme"
+              @click="reset"
+            />
+          </UTooltip>
+
+          <USeparator orientation="vertical" class="h-5" />
+
+          <UTooltip text="Close">
+            <UButton
+              icon="i-lucide-x"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              aria-label="Close Theme Studio"
+              @click="open = false"
             />
+          </UTooltip>
+        </div>
 
-            <span class="flex-1" />
-
-            <ThemeStudioImport />
-
-            <ThemeStudioExport />
-
-            <UTooltip text="Reset theme">
-              <UButton
-                icon="i-lucide-rotate-ccw"
-                color="neutral"
-                variant="outline"
-                size="sm"
-                aria-label="Reset theme"
-                @click="reset"
-              />
-            </UTooltip>
-
-            <USeparator orientation="vertical" class="h-5" />
-
-            <UTooltip text="Close">
-              <UButton
-                icon="i-lucide-x"
-                color="neutral"
-                variant="ghost"
-                size="sm"
-                aria-label="Close Theme Studio"
-                @click="open = false"
-              />
-            </UTooltip>
-          </div>
+        <div class="flex-1 flex flex-col lg:flex-row min-h-0 overflow-y-auto lg:overflow-hidden">
+          <aside
+            v-show="sidebarOpen"
+            class="shrink-0 lg:w-80 border-default lg:overflow-y-auto"
+            :class="SIDEBAR_EDGE[chromeWidth]"
+          >
+            <ThemeStudioControls />
+          </aside>
 
           <!-- The grid scrolls as a page; the app-shell views own their height
                and scroll internally, so the pane locks (bounded on mobile too). -->
           <div
-            class="flex-1 min-h-0 p-0"
+            class="flex-1 min-w-0 min-h-0 p-0"
             :class="view === 'grid' ? 'lg:overflow-y-auto' : 'overflow-hidden max-lg:h-[75vh]'"
           >
             <ThemeStudioBento v-if="view === 'grid'" />

From 918243b36d8bbb3eece03b1c79b45eb4f73dc779 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 18:02:41 +0200
Subject: [PATCH 061/185] =?UTF-8?q?feat(docs):=20settings=20panel=20on=20U?=
 =?UTF-8?q?Sidebar=20=E2=80=94=20offcanvas=20collapse,=20Import/Export=20i?=
 =?UTF-8?q?n=20its=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioModal.vue         | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index 11aed3e294..e667ab6c04 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -13,13 +13,7 @@ const sidebarOpen = ref(true)
 // The studio's own chrome follows the border treatment too — whole literal
 // class strings per width so tailwind's scanner sees them.
 const TOOLBAR_EDGE: Record<number, string> = { 0: 'border-b-0', 1: 'border-b', 2: 'border-b-2', 3: 'border-b-3', 4: 'border-b-4' }
-const SIDEBAR_EDGE: Record<number, string> = {
-  0: 'border-b-0 lg:border-r-0',
-  1: 'border-b lg:border-b-0 lg:border-r',
-  2: 'border-b-2 lg:border-b-0 lg:border-r-2',
-  3: 'border-b-3 lg:border-b-0 lg:border-r-3',
-  4: 'border-b-4 lg:border-b-0 lg:border-r-4'
-}
+const SIDEBAR_EDGE: Record<number, string> = { 0: 'border-e-0', 1: 'border-e', 2: 'border-e-2', 3: 'border-e-3', 4: 'border-e-4' }
 
 const chromeWidth = computed(() => {
   const border = style.value.border
@@ -83,10 +77,6 @@ const viewTabs = [
 
           <span class="flex-1" />
 
-          <ThemeStudioImport />
-
-          <ThemeStudioExport />
-
           <UTooltip text="Reset theme">
             <UButton
               icon="i-lucide-rotate-ccw"
@@ -112,14 +102,25 @@ const viewTabs = [
           </UTooltip>
         </div>
 
-        <div class="flex-1 flex flex-col lg:flex-row min-h-0 overflow-y-auto lg:overflow-hidden">
-          <aside
-            v-show="sidebarOpen"
-            class="shrink-0 lg:w-80 border-default lg:overflow-y-auto"
-            :class="SIDEBAR_EDGE[chromeWidth]"
+        <div class="relative flex-1 flex flex-col lg:flex-row min-h-0 overflow-y-auto lg:overflow-hidden">
+          <!-- USidebar's container is viewport-fixed by design; anchored to
+               this row instead so it sits below the toolbar. -->
+          <USidebar
+            v-model:open="sidebarOpen"
+            :style="{ '--sidebar-width': '20rem' }"
+            :ui="{
+              container: ['absolute h-full', SIDEBAR_EDGE[chromeWidth]],
+              body: 'p-0 gap-0',
+              footer: 'border-t border-default gap-2'
+            }"
           >
             <ThemeStudioControls />
-          </aside>
+
+            <template #footer>
+              <ThemeStudioImport />
+              <ThemeStudioExport />
+            </template>
+          </USidebar>
 
           <!-- The grid scrolls as a page; the app-shell views own their height
                and scroll internally, so the pane locks (bounded on mobile too). -->

From a0dc9f48f4c6efc85d230d13f24b73a97a3b4c1a Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 18:16:01 +0200
Subject: [PATCH 062/185] feat(docs): floating sidebar layout restored
 full-height; studio chrome shadows follow the theme

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioModal.vue         | 173 ++++++++++--------
 1 file changed, 93 insertions(+), 80 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index e667ab6c04..6e951abfec 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -12,8 +12,7 @@ const sidebarOpen = ref(true)
 
 // The studio's own chrome follows the border treatment too — whole literal
 // class strings per width so tailwind's scanner sees them.
-const TOOLBAR_EDGE: Record<number, string> = { 0: 'border-b-0', 1: 'border-b', 2: 'border-b-2', 3: 'border-b-3', 4: 'border-b-4' }
-const SIDEBAR_EDGE: Record<number, string> = { 0: 'border-e-0', 1: 'border-e', 2: 'border-e-2', 3: 'border-e-3', 4: 'border-e-4' }
+const PREVIEW_EDGE: Record<number, string> = { 0: 'border-0', 1: 'border', 2: 'border-2', 3: 'border-3', 4: 'border-4' }
 
 const chromeWidth = computed(() => {
   const border = style.value.border
@@ -22,6 +21,26 @@ const chromeWidth = computed(() => {
   return style.value.borderWidth ?? 2
 })
 
+// The studio's own floating panels cast theme-correct shadows too. The
+// sidebar override merges through tv (recoloring its stock shadow-lg is
+// enough); the preview card's plain :class doesn't merge, so it gets the
+// whole string.
+const sidebarShadow = computed(() => {
+  const shadow = style.value.shadow
+  if (shadow === 'none') return 'shadow-none'
+  if (shadow === 'hard') return 'shadow-(--ui-shadow-hard-lg)'
+  if (shadow === 'soft') return 'shadow-(color:--ui-shadow-final-soft)'
+  return ''
+})
+
+const previewShadow = computed(() => {
+  const shadow = style.value.shadow
+  if (shadow === 'none') return ''
+  if (shadow === 'hard') return 'shadow-(--ui-shadow-hard-lg)'
+  if (shadow === 'soft') return 'shadow-xl shadow-(color:--ui-shadow-final-soft)'
+  return 'shadow-xl'
+})
+
 /** Preview views: the bento grid plus app-scale layouts from the real templates. */
 const view = ref('grid')
 
@@ -43,90 +62,84 @@ const viewTabs = [
     description="Customize Nuxt UI live: colors, radius, fonts and icons — then export only what you changed."
   >
     <template #content>
-      <div class="flex flex-col h-full bg-default">
-        <div
-          class="shrink-0 flex items-center gap-2 border-default px-4 sm:px-6 py-3"
-          :class="TOOLBAR_EDGE[chromeWidth]"
+      <div class="flex flex-row w-full h-full bg-default">
+        <USidebar
+          v-model:open="sidebarOpen"
+          variant="floating"
+          :style="{ '--sidebar-width': '21rem' }"
+          :ui="{ body: 'p-0 gap-0', inner: sidebarShadow }"
         >
-          <UTooltip :text="sidebarOpen ? 'Hide settings' : 'Show settings'">
-            <UButton
-              :icon="sidebarOpen ? 'i-lucide-panel-left-close' : 'i-lucide-panel-left-open'"
-              color="neutral"
-              variant="ghost"
-              size="sm"
-              aria-label="Toggle settings panel"
-              @click="sidebarOpen = !sidebarOpen"
-            />
-          </UTooltip>
-
-          <Logo class="w-auto h-4 shrink-0" />
-
-          <h2 class="text-sm font-semibold text-highlighted mt-1 me-2">
-            Theme Studio
-          </h2>
-
-          <span class="flex-1" />
-
-          <UTabs
-            v-model="view"
-            :items="viewTabs"
-            :content="false"
-            size="xs"
-            color="primary"
-          />
-
-          <span class="flex-1" />
-
-          <UTooltip text="Reset theme">
-            <UButton
-              icon="i-lucide-rotate-ccw"
-              color="neutral"
-              variant="outline"
-              size="sm"
-              aria-label="Reset theme"
-              @click="reset"
-            />
-          </UTooltip>
-
-          <USeparator orientation="vertical" class="h-5" />
-
-          <UTooltip text="Close">
-            <UButton
-              icon="i-lucide-x"
-              color="neutral"
-              variant="ghost"
-              size="sm"
-              aria-label="Close Theme Studio"
-              @click="open = false"
-            />
-          </UTooltip>
-        </div>
+          <ThemeStudioControls />
+
+          <template #footer>
+            <ThemeStudioImport />
+            <ThemeStudioExport />
+          </template>
+        </USidebar>
 
-        <div class="relative flex-1 flex flex-col lg:flex-row min-h-0 overflow-y-auto lg:overflow-hidden">
-          <!-- USidebar's container is viewport-fixed by design; anchored to
-               this row instead so it sits below the toolbar. -->
-          <USidebar
-            v-model:open="sidebarOpen"
-            :style="{ '--sidebar-width': '20rem' }"
-            :ui="{
-              container: ['absolute h-full', SIDEBAR_EDGE[chromeWidth]],
-              body: 'p-0 gap-0',
-              footer: 'border-t border-default gap-2'
-            }"
+        <div class="flex-1 min-w-0 flex flex-col h-full">
+          <div
+            class="shrink-0 flex items-center gap-2 border-default px-4 sm:px-4 py-3"
           >
-            <ThemeStudioControls />
+            <UTooltip :text="sidebarOpen ? 'Hide settings' : 'Show settings'">
+              <UButton
+                :icon="sidebarOpen ? 'i-lucide-panel-left-close' : 'i-lucide-panel-left-open'"
+                color="neutral"
+                variant="ghost"
+                size="sm"
+                aria-label="Toggle settings panel"
+                @click="sidebarOpen = !sidebarOpen"
+              />
+            </UTooltip>
+
+            <Logo class="w-auto h-4 shrink-0" />
+
+            <h2 class="text-sm font-semibold text-highlighted mt-1 me-2">
+              Theme Studio
+            </h2>
+
+            <span class="flex-1" />
+
+            <UTabs
+              v-model="view"
+              :items="viewTabs"
+              :content="false"
+              size="xs"
+              color="primary"
+            />
 
-            <template #footer>
-              <ThemeStudioImport />
-              <ThemeStudioExport />
-            </template>
-          </USidebar>
+            <span class="flex-1" />
+
+            <UTooltip text="Reset theme">
+              <UButton
+                icon="i-lucide-rotate-ccw"
+                color="neutral"
+                variant="outline"
+                size="sm"
+                aria-label="Reset theme"
+                @click="reset"
+              />
+            </UTooltip>
+
+            <USeparator orientation="vertical" class="h-5" />
+
+            <UTooltip text="Close">
+              <UButton
+                icon="i-lucide-x"
+                color="neutral"
+                variant="ghost"
+                size="sm"
+                aria-label="Close Theme Studio"
+                @click="open = false"
+              />
+            </UTooltip>
+          </div>
 
-          <!-- The grid scrolls as a page; the app-shell views own their height
-               and scroll internally, so the pane locks (bounded on mobile too). -->
+          <!-- The floating preview card: the grid scrolls inside it; the
+               app-shell views own their height and scroll internally. -->
           <div
-            class="flex-1 min-w-0 min-h-0 p-0"
-            :class="view === 'grid' ? 'lg:overflow-y-auto' : 'overflow-hidden max-lg:h-[75vh]'"
+            class="flex-1 min-w-0 min-h-0 border-default m-4 mt-1 lg:ms-0 rounded-lg"
+            :class="[PREVIEW_EDGE[chromeWidth], previewShadow, view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden']"
           >
             <ThemeStudioBento v-if="view === 'grid'" />
             <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />

From 808122693e3b8a9dc5e153185ee0a9c5e43bce74 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 18:18:46 +0200
Subject: [PATCH 063/185] fix(docs): preview card owns its start margin so it
 keeps its inset when the sidebar collapses

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/components/theme-studio/ThemeStudioModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index 6e951abfec..67de2494a7 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -67,7 +67,7 @@ const viewTabs = [
           v-model:open="sidebarOpen"
           variant="floating"
           :style="{ '--sidebar-width': '21rem' }"
-          :ui="{ body: 'p-0 gap-0', inner: sidebarShadow }"
+          :ui="{ container: 'pe-0', body: 'p-0 gap-0', inner: sidebarShadow }"
         >
           <ThemeStudioControls />
 
@@ -138,7 +138,7 @@ const viewTabs = [
           <!-- The floating preview card: the grid scrolls inside it; the
                app-shell views own their height and scroll internally. -->
           <div
-            class="flex-1 min-w-0 min-h-0 border-default m-4 mt-1 lg:ms-0 rounded-lg"
+            class="flex-1 min-w-0 min-h-0 border-default m-4 mt-1 rounded-lg"
             :class="[PREVIEW_EDGE[chromeWidth], previewShadow, view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden']"
           >
             <ThemeStudioBento v-if="view === 'grid'" />

From 1a316fe79684a59763a144a42f3b07cda1731d48 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 18:32:39 +0200
Subject: [PATCH 064/185] =?UTF-8?q?feat(docs):=20inner=20shadow=20axis=20?=
 =?UTF-8?q?=E2=80=94=20inset=20treatment=20across=20the=20same=20surfaces,?=
 =?UTF-8?q?=20own=20geometry=20and=20opacity?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drop shadow section renamed to match. Studio chrome: Reset joins
Import/Export in the sidebar footer, mode picks are light/dark/system
buttons, the sidebar ring follows the theme border width, and the
collapsible help icons get their sizing back.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/assets/css/main.css                  |   8 ++
 .../theme-studio/ThemeStudioControls.vue      | 116 +++++++++++++-----
 .../theme-studio/ThemeStudioExport.vue        |   1 +
 .../theme-studio/ThemeStudioImport.vue        |   1 +
 .../theme-studio/ThemeStudioModal.vue         |  38 +++---
 docs/app/utils/theme-engine/export.ts         |  16 +++
 docs/app/utils/theme-engine/import.ts         |  39 ++++++
 docs/app/utils/theme-engine/styles.ts         |  73 ++++++++++-
 test/utils/theme-engine.spec.ts               |  24 ++++
 test/utils/theme-import.spec.ts               |  17 +++
 10 files changed, 284 insertions(+), 49 deletions(-)

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index 8365f3aa81..960d7dc2c2 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -150,6 +150,14 @@ html.theme-studio-dragging body *:not([data-curve-editor] *) {
   --ui-shadow-hard-lg: calc(var(--ui-shadow-offset-x) * 1.5) calc(var(--ui-shadow-offset-y) * 1.5) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard);
   --ui-shadow-hard-sm: calc(var(--ui-shadow-offset-x) * 0.66) calc(var(--ui-shadow-offset-y) * 0.66) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard);
   --ui-shadow-hard-half: calc(var(--ui-shadow-offset-x) / 2) calc(var(--ui-shadow-offset-y) / 2) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard);
+  /* Inner-shadow geometry defaults; shares --ui-shadow-color with the drop
+     treatment, with its own gentler opacity fallback. */
+  --ui-inner-shadow-offset-x: 0px;
+  --ui-inner-shadow-offset-y: 2px;
+  --ui-inner-shadow-blur: 4px;
+  --ui-inner-shadow-spread: 0px;
+  --ui-shadow-final-inner: color-mix(in oklab, var(--ui-shadow-color) var(--ui-inner-shadow-opacity, 15%), transparent);
+  --ui-inner-shadow: var(--ui-inner-shadow-offset-x) var(--ui-inner-shadow-offset-y) var(--ui-inner-shadow-blur) var(--ui-inner-shadow-spread) var(--ui-shadow-final-inner);
 }
 :where(.dark) {
   --ui-shadow-color: black;
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index ff9f471484..2a93599f38 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, BORDER_WIDTH_DEFAULT, SHADOW_GEOMETRY_DEFAULTS, resolveAlias, resolveShade } from '../../utils/theme-engine'
+import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, BORDER_WIDTH_DEFAULT, SHADOW_GEOMETRY_DEFAULTS, INNER_SHADOW_GEOMETRY_DEFAULTS, resolveAlias, resolveShade } from '../../utils/theme-engine'
 import type { VariantGroup, TokenRamp, ColorAlias, ThemeDoc } from '../../utils/theme-engine'
 
 const appConfig = useAppConfig()
@@ -50,6 +50,7 @@ const openSections = reactive<Record<string, boolean>>({
   sizing: true,
   defaults: true,
   shadows: true,
+  innerShadows: true,
   borders: true,
   font: true,
   icons: true,
@@ -108,6 +109,24 @@ const shadowOpacity = computed({
   set: (value: number) => setStyle({ shadowOpacity: value })
 })
 
+const innerShadowOptions = [
+  { label: 'None', value: 'none' },
+  { label: 'Default', value: 'soft' },
+  { label: 'Custom', value: 'hard' }
+] as const
+
+const innerShadowOpacity = computed({
+  get: () => style.value.innerShadowOpacity ?? 15,
+  set: (value: number) => setStyle({ innerShadowOpacity: value })
+})
+
+function innerGeometrySlider(key: 'x' | 'y' | 'blur' | 'spread') {
+  return computed({
+    get: () => ({ ...INNER_SHADOW_GEOMETRY_DEFAULTS, ...style.value.innerShadowGeometry })[key],
+    set: (value: number) => setStyle({ innerShadowGeometry: { ...INNER_SHADOW_GEOMETRY_DEFAULTS, ...style.value.innerShadowGeometry, [key]: value } })
+  })
+}
+
 const borderOptions = [
   { label: 'None', value: 'none' },
   { label: 'Default', value: 'default' },
@@ -217,15 +236,10 @@ function rampChip(ramp: TokenRamp): string {
 }
 
 // No 'system' tab: the studio is about previewing a concrete mode. For
-// system-pref visitors the model can read 'system' before color-mode
-// resolves it — fall back to the scheme class the color-mode script has
-// already stamped on <html>, so a tab is always highlighted.
-const modeTabs = computed(() => modes.value.filter(m => m.label !== 'system').map(m => ({ label: m.label, icon: m.icon, value: m.label })))
-
-// Resolved AFTER mount on purpose: the server can't know a system-pref
-// visitor's scheme, and hydration adopts SSR attributes without patching —
-// a post-mount write is a real update, so the highlight always lands.
-const modeTab = ref<string | undefined>()
+// The mode preference lives client-side only — resolve the highlight AFTER
+// mount so hydration's adopt-without-patching never strands a stale state.
+const colorMode = useColorMode()
+const mounted = ref(false)
 
 /**
  * Same hydration-adoption problem for every control: SSR renders default
@@ -236,9 +250,7 @@ const modeTab = ref<string | undefined>()
 const hydrationKey = ref(0)
 
 onMounted(() => {
-  modeTab.value = mode.value === 'light' || mode.value === 'dark'
-    ? mode.value
-    : document.documentElement.classList.contains('dark') ? 'dark' : 'light'
+  mounted.value = true
 
   const keys = ['nuxt-ui-style', 'nuxt-ui-css-variables', 'nuxt-ui-custom-colors', 'nuxt-ui-radius', 'nuxt-ui-font-size', 'nuxt-ui-spacing', 'nuxt-ui-ai-theme']
   if (keys.some(key => localStorage.getItem(key))) {
@@ -246,14 +258,6 @@ onMounted(() => {
   }
 })
 
-watch(modeTab, (value) => {
-  if (value && value !== mode.value) mode.value = value
-})
-
-watch(mode, (value) => {
-  if (value === 'light' || value === 'dark') modeTab.value = value
-})
-
 // One curve editor per alias, toggled by the edit icon next to each select.
 const paletteEditors = reactive<Record<string, boolean>>({})
 
@@ -331,6 +335,8 @@ function geometrySlider(key: 'x' | 'y' | 'blur' | 'spread') {
 
 const geometry = Object.fromEntries(geometryFields.map(field => [field.key, geometrySlider(field.key)])) as Record<'x' | 'y' | 'blur' | 'spread', ReturnType<typeof geometrySlider>>
 
+const innerGeometry = Object.fromEntries(geometryFields.map(field => [field.key, innerGeometrySlider(field.key)])) as Record<'x' | 'y' | 'blur' | 'spread', ReturnType<typeof innerGeometrySlider>>
+
 const borderColor = computed({
   get: () => style.value.borderColor || 'default',
   set: (value: any) => setStyle({ borderColor: value })
@@ -384,15 +390,15 @@ const shadowColor = computed({
         />
       </UTooltip>
     </div>
-    <UTabs
-      v-model="modeTab"
-      :items="modeTabs"
-      :content="false"
-      size="sm"
-      color="primary"
-      class="w-full px-4 "
-      :ui="{ trigger: ' capitalize' }"
-    />
+    <div class="grid grid-cols-3 gap-1 px-4">
+      <ThemePickerButton
+        v-for="m in modes"
+        :key="m.label"
+        v-bind="m"
+        :selected="mounted && colorMode.preference === m.label"
+        @click="mode = m.label"
+      />
+    </div>
 
     <UAccordion
       v-model="openGroups"
@@ -414,6 +420,7 @@ const shadowColor = computed({
                   color="neutral"
                   variant="ghost"
                   icon="i-lucide-help-circle"
+                  :ui="{ leadingIcon: 'size-3' }"
                   @click.stop
                 />
               </legend>
@@ -502,6 +509,7 @@ const shadowColor = computed({
                   color="neutral"
                   variant="ghost"
                   icon="i-lucide-help-circle"
+                  :ui="{ leadingIcon: 'size-3' }"
                   @click.stop
                 />
               </legend>
@@ -579,6 +587,7 @@ const shadowColor = computed({
                   color="neutral"
                   variant="ghost"
                   icon="i-lucide-help-circle"
+                  :ui="{ leadingIcon: 'size-3' }"
                   @click.stop
                 />
               </legend>
@@ -666,6 +675,7 @@ const shadowColor = computed({
                   color="neutral"
                   variant="ghost"
                   icon="i-lucide-help-circle"
+                  :ui="{ leadingIcon: 'size-3' }"
                   @click.stop
                 />
               </legend>
@@ -755,7 +765,7 @@ const shadowColor = computed({
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
                 <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
-                <span class="flex-1 text-start">Shadows</span>
+                <span class="flex-1 text-start">Drop shadow</span>
               </legend>
             </template>
             <template #content>
@@ -812,6 +822,48 @@ const shadowColor = computed({
             </template>
           </UCollapsible>
 
+          <UCollapsible v-model:open="openSections.innerShadows" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+            <template #default="{ open }">
+              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+                <span class="flex-1 text-start">Inner shadow</span>
+              </legend>
+            </template>
+            <template #content>
+              <div>
+                <div class="grid grid-cols-3 gap-1">
+                  <ThemePickerButton
+                    v-for="option in innerShadowOptions"
+                    :key="option.value"
+                    :label="option.label"
+                    :selected="(style.innerShadow || 'none') === option.value"
+                    @click="setStyle({ innerShadow: option.value })"
+                  />
+                </div>
+
+                <div v-if="(style.innerShadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
+                  <div class="flex items-center gap-2">
+                    <span class="text-[11px] text-muted w-13 shrink-0 select-none">Opacity</span>
+
+                    <USlider v-model="innerShadowOpacity" :min="5" :max="100" :step="5" size="xs" />
+
+                    <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ innerShadowOpacity }}%</span>
+                  </div>
+
+                  <template v-if="style.innerShadow === 'hard'">
+                    <div v-for="field in geometryFields" :key="field.key" class="flex items-center gap-2">
+                      <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
+
+                      <USlider v-model="innerGeometry[field.key].value" :min="field.min" :max="field.max" :step="1" size="xs" />
+
+                      <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ innerGeometry[field.key].value }}px</span>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </template>
+          </UCollapsible>
+
           <UCollapsible v-model:open="openSections.borders" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
@@ -921,6 +973,7 @@ const shadowColor = computed({
                   color="neutral"
                   variant="ghost"
                   icon="i-lucide-help-circle"
+                  :ui="{ leadingIcon: 'size-3' }"
                   @click.stop
                 />
               </legend>
@@ -950,6 +1003,7 @@ const shadowColor = computed({
                   color="neutral"
                   variant="ghost"
                   icon="i-lucide-help-circle"
+                  :ui="{ leadingIcon: 'size-3' }"
                   @click.stop
                 />
               </legend>
diff --git a/docs/app/components/theme-studio/ThemeStudioExport.vue b/docs/app/components/theme-studio/ThemeStudioExport.vue
index de28abcc6c..c09d7149d5 100644
--- a/docs/app/components/theme-studio/ThemeStudioExport.vue
+++ b/docs/app/components/theme-studio/ThemeStudioExport.vue
@@ -30,6 +30,7 @@ watch(open, (isOpen) => {
       color="neutral"
       variant="outline"
       size="sm"
+      block
     />
 
     <template #body>
diff --git a/docs/app/components/theme-studio/ThemeStudioImport.vue b/docs/app/components/theme-studio/ThemeStudioImport.vue
index 152acbea32..9bd8036d0d 100644
--- a/docs/app/components/theme-studio/ThemeStudioImport.vue
+++ b/docs/app/components/theme-studio/ThemeStudioImport.vue
@@ -48,6 +48,7 @@ function runImport() {
       color="neutral"
       variant="outline"
       size="sm"
+      block
     />
 
     <template #body>
diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index 67de2494a7..8387b44853 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -13,6 +13,7 @@ const sidebarOpen = ref(true)
 // The studio's own chrome follows the border treatment too — whole literal
 // class strings per width so tailwind's scanner sees them.
 const PREVIEW_EDGE: Record<number, string> = { 0: 'border-0', 1: 'border', 2: 'border-2', 3: 'border-3', 4: 'border-4' }
+const SIDEBAR_RING: Record<number, string> = { 0: 'ring-0', 1: 'ring-1', 2: 'ring-2', 3: 'ring-3', 4: 'ring-4' }
 
 const chromeWidth = computed(() => {
   const border = style.value.border
@@ -67,13 +68,29 @@ const viewTabs = [
           v-model:open="sidebarOpen"
           variant="floating"
           :style="{ '--sidebar-width': '21rem' }"
-          :ui="{ container: 'pe-0', body: 'p-0 gap-0', inner: sidebarShadow }"
+          :ui="{ body: 'p-0 gap-0', inner: [sidebarShadow, SIDEBAR_RING[chromeWidth]] }"
         >
           <ThemeStudioControls />
 
           <template #footer>
-            <ThemeStudioImport />
-            <ThemeStudioExport />
+            <div class="flex-1 min-w-0">
+              <ThemeStudioImport />
+            </div>
+
+            <div class="flex-1 min-w-0">
+              <ThemeStudioExport />
+            </div>
+
+            <UTooltip text="Reset theme">
+              <UButton
+                icon="i-lucide-rotate-ccw"
+                color="neutral"
+                variant="outline"
+                size="sm"
+                aria-label="Reset theme"
+                @click="reset"
+              />
+            </UTooltip>
           </template>
         </USidebar>
 
@@ -110,19 +127,6 @@ const viewTabs = [
 
             <span class="flex-1" />
 
-            <UTooltip text="Reset theme">
-              <UButton
-                icon="i-lucide-rotate-ccw"
-                color="neutral"
-                variant="outline"
-                size="sm"
-                aria-label="Reset theme"
-                @click="reset"
-              />
-            </UTooltip>
-
-            <USeparator orientation="vertical" class="h-5" />
-
             <UTooltip text="Close">
               <UButton
                 icon="i-lucide-x"
@@ -138,7 +142,7 @@ const viewTabs = [
           <!-- The floating preview card: the grid scrolls inside it; the
                app-shell views own their height and scroll internally. -->
           <div
-            class="flex-1 min-w-0 min-h-0 border-default m-4 mt-1 rounded-lg"
+            class="flex-1 min-w-0 min-h-0 border-default m-4 mt-1 lg:ms-0 rounded-lg"
             :class="[PREVIEW_EDGE[chromeWidth], previewShadow, view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden']"
           >
             <ThemeStudioBento v-if="view === 'grid'" />
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index f89cd9dea4..ef07fb730d 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -98,6 +98,22 @@ export function generateCSS(doc: ThemeDoc): string {
     style.light['--ui-shadow-final-hard'] = 'color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 100%), transparent)'
     style.light['--ui-shadow-final-soft'] = 'color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 25%), transparent)'
   }
+  if (doc.style?.innerShadow && doc.style.innerShadow !== 'none') {
+    if (!style.light['--ui-shadow-color']) {
+      style.light['--ui-shadow-color'] = 'var(--ui-color-neutral-950)'
+      style.dark['--ui-shadow-color'] = 'black'
+    }
+    if (doc.style.innerShadow === 'hard') {
+      if (!style.light['--ui-inner-shadow-offset-x']) {
+        style.light['--ui-inner-shadow-offset-x'] = '0px'
+        style.light['--ui-inner-shadow-offset-y'] = '2px'
+        style.light['--ui-inner-shadow-blur'] = '4px'
+        style.light['--ui-inner-shadow-spread'] = '0px'
+      }
+      style.light['--ui-inner-shadow'] = 'var(--ui-inner-shadow-offset-x) var(--ui-inner-shadow-offset-y) var(--ui-inner-shadow-blur) var(--ui-inner-shadow-spread) var(--ui-shadow-final-inner)'
+    }
+    style.light['--ui-shadow-final-inner'] = 'color-mix(in oklab, var(--ui-shadow-color) var(--ui-inner-shadow-opacity, 15%), transparent)'
+  }
 
   if (Object.keys(style.light).length) {
     lines.push('', ':root, .light {', ...Object.entries(style.light).map(([key, val]) => `  ${key}: ${val};`), '}')
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index 4fcf32b0a7..40cf43fb4c 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -6,6 +6,7 @@ import {
   FRAME_COLOR_VALUES,
   SHADOW_COLOR_VALUES,
   SHADOW_GEOMETRY_DEFAULTS,
+  INNER_SHADOW_GEOMETRY_DEFAULTS,
   BORDER_WIDTH_DEFAULT,
   VARIANT_GROUPS,
   VARIANT_SUPPORT,
@@ -204,6 +205,35 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
     style.shadowOpacity = Number.parseFloat(opacity.light)
   }
 
+  const innerOpacity = take('--ui-inner-shadow-opacity')
+  const innerGeometry = {
+    x: take('--ui-inner-shadow-offset-x'),
+    y: take('--ui-inner-shadow-offset-y'),
+    blur: take('--ui-inner-shadow-blur'),
+    spread: take('--ui-inner-shadow-spread')
+  }
+  const innerFinal = take('--ui-shadow-final-inner')
+  take('--ui-inner-shadow')
+
+  if (innerGeometry.x.light !== undefined) {
+    style.innerShadow = 'hard'
+    const parsed = {
+      x: Number.parseFloat(innerGeometry.x.light),
+      y: Number.parseFloat(innerGeometry.y.light ?? '2'),
+      blur: Number.parseFloat(innerGeometry.blur.light ?? '4'),
+      spread: Number.parseFloat(innerGeometry.spread.light ?? '0')
+    }
+    if (JSON.stringify(parsed) !== JSON.stringify(INNER_SHADOW_GEOMETRY_DEFAULTS)) {
+      style.innerShadowGeometry = parsed
+    }
+  } else if (innerFinal.light !== undefined) {
+    style.innerShadow = 'soft'
+  }
+
+  if (innerOpacity.light !== undefined) {
+    style.innerShadowOpacity = Number.parseFloat(innerOpacity.light)
+  }
+
   if (shadowColor.light !== undefined || shadowColor.dark !== undefined) {
     // The export force-emits neutral-950/black when no color was chosen.
     const forced = shadowColor.light === 'var(--ui-color-neutral-950)' && shadowColor.dark === 'black'
@@ -417,6 +447,14 @@ function detectShadow(components: Record<string, any>): StyleOptions['shadow'] {
   return undefined
 }
 
+/** Inner-shadow fallback when only a config was pasted. */
+function detectInnerShadow(components: Record<string, any>): StyleOptions['innerShadow'] {
+  const slots = Object.values(components).flatMap(component => Object.values(component?.slots || {})) as string[]
+  if (slots.some(classes => classes.includes('(--ui-inner-shadow)'))) return 'hard'
+  if (slots.some(classes => classes.includes('--ui-shadow-final-inner'))) return 'soft'
+  return undefined
+}
+
 /**
  * Remove the fragments the reconstructed style regenerates, leaving only
  * genuinely explicit component overrides for doc.components.
@@ -495,6 +533,7 @@ export function importTheme(input: { css?: string, config?: string }): ThemeImpo
   // config classes; either half alone still reconstructs what it can.
   const style: StyleOptions = css ? extractStyle(css.light, css.dark) : {}
   style.shadow ||= detectShadow(components)
+  style.innerShadow ||= detectInnerShadow(components)
 
   // New exports carry width through the @theme variables; older ones (and
   // config-only pastes) still declare it through ring-N classes.
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 13d09bbc13..f33f5da50c 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -69,6 +69,19 @@ export interface StyleOptions {
    * per-treatment color-mix fallbacks.
    */
   shadowOpacity?: number
+  /**
+   * Inset shadow treatment, independent of the drop shadow — same
+   * vocabulary ('soft' recolors a stock inset, 'hard' rides the geometry
+   * sliders) and the same components.
+   */
+  innerShadow?: ShadowStyle
+  /**
+   * Inner-shadow geometry in px, driving --ui-inner-shadow-offset-x/y/…
+   * Only meaningful while `innerShadow` is 'hard'.
+   */
+  innerShadowGeometry?: { x?: number, y?: number, blur?: number, spread?: number }
+  /** Inner-shadow opacity in percent; unset falls back to 15%. */
+  innerShadowOpacity?: number
   /**
    * Semantic token → neutral ramp shade, per mode. Strictly a token
    * shorthand parked on the style axis until the studio grows a full
@@ -108,6 +121,7 @@ export const VARIANT_GROUPS: Record<VariantGroup, string[]> = {
 }
 
 export const SHADOW_GEOMETRY_DEFAULTS = { x: 3, y: 3, blur: 0, spread: 0 }
+export const INNER_SHADOW_GEOMETRY_DEFAULTS = { x: 0, y: 2, blur: 4, spread: 0 }
 
 /** Borders default opposite to the surface: dark ink on light, pale on dark. */
 export const BORDER_SHADE_DEFAULTS = { light: 900, dark: 200 }
@@ -251,6 +265,46 @@ const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
   }
 }
 
+// Inset shadows use tailwind's separate inset-shadow group, so they merge
+// independently of (and coexist with) the drop treatment on every surface.
+const INNER_SOFT = 'inset-shadow-sm inset-shadow-(color:--ui-shadow-final-inner)'
+const INNER_HARD = 'inset-shadow-(--ui-inner-shadow)'
+
+const INNER_FLAT_FIELD_VARIANTS = [
+  { variant: 'ghost', class: 'inset-shadow-none' },
+  { variant: 'none', class: 'inset-shadow-none' }
+]
+
+/** The same surfaces the drop treatment covers, all at one scale. */
+function innerShadowFragments(classes: string): Fragments {
+  return {
+    button: {
+      slots: { base: classes },
+      compoundVariants: [
+        { variant: 'ghost', class: 'inset-shadow-none' },
+        { variant: 'link', class: 'inset-shadow-none' }
+      ]
+    },
+    card: { slots: { root: classes } },
+    empty: { slots: { root: classes } },
+    input: { slots: { base: classes }, compoundVariants: INNER_FLAT_FIELD_VARIANTS },
+    select: { slots: { base: classes, content: classes }, compoundVariants: INNER_FLAT_FIELD_VARIANTS },
+    selectMenu: { slots: { base: classes, content: classes }, compoundVariants: INNER_FLAT_FIELD_VARIANTS },
+    inputMenu: { slots: { base: classes, content: classes }, compoundVariants: INNER_FLAT_FIELD_VARIANTS },
+    textarea: { slots: { base: classes }, compoundVariants: INNER_FLAT_FIELD_VARIANTS },
+    alert: { slots: { root: classes } },
+    badge: { slots: { base: classes } },
+    popover: { slots: { content: classes } },
+    dropdownMenu: { slots: { content: classes } },
+    contextMenu: { slots: { content: classes } },
+    tooltip: { slots: { content: classes } },
+    toast: { slots: { root: classes } },
+    drawer: { slots: { content: classes } },
+    modal: { compoundVariants: [{ fullscreen: false, class: { content: classes } }] },
+    slideover: { slots: { content: classes } }
+  }
+}
+
 export const BORDER_WIDTH_DEFAULT = 2
 
 /**
@@ -558,6 +612,19 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
     }
   }
 
+  if (style.innerShadow && style.innerShadow !== 'none' && style.innerShadowOpacity !== undefined) {
+    light['--ui-inner-shadow-opacity'] = `${style.innerShadowOpacity}%`
+    dark['--ui-inner-shadow-opacity'] = `${style.innerShadowOpacity}%`
+  }
+
+  if (style.innerShadow === 'hard' && style.innerShadowGeometry) {
+    const geometry = { ...INNER_SHADOW_GEOMETRY_DEFAULTS, ...style.innerShadowGeometry }
+    for (const [axis, token] of [['x', '--ui-inner-shadow-offset-x'], ['y', '--ui-inner-shadow-offset-y'], ['blur', '--ui-inner-shadow-blur'], ['spread', '--ui-inner-shadow-spread']] as const) {
+      light[token] = `${geometry[axis]}px`
+      dark[token] = `${geometry[axis]}px`
+    }
+  }
+
   if (style.shadowColor === 'shade' || style.shadowColor === 'primary-shade') {
     // Per-mode ramp shade — a graded shadow that darkens or lightens
     // independently of the scheme it sits on; the primary ramp tints it.
@@ -628,6 +695,9 @@ export function styleComponents(style: StyleOptions, options: { widthAsVariables
   const sources = [
     defaults,
     SHADOW_FRAGMENTS[style.shadow ?? 'none'],
+    style.innerShadow && style.innerShadow !== 'none'
+      ? innerShadowFragments(style.innerShadow === 'hard' ? INNER_HARD : INNER_SOFT)
+      : {},
     borderFragments(style, options.widthAsVariables),
     style.borderColor && style.borderColor !== 'default' ? FRAME_COLOR_FRAGMENTS : {}
   ]
@@ -718,8 +788,9 @@ export const STYLE_COMPONENT_KEYS = [...new Set([
  * every ring), so the generic value-check can't be reused for it.
  */
 export function isDefaultStyle(style: StyleOptions = {}): boolean {
-  const { shadow, border, ...rest } = style
+  const { shadow, innerShadow, border, ...rest } = style
   return (!shadow || shadow === 'none')
+    && (!innerShadow || innerShadow === 'none')
     && (!border || border === 'default')
     && !Object.values(rest).some(value => value && value !== 'default')
 }
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 7bb5fd7176..411d458f30 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -287,6 +287,30 @@ describe('styleComponents', () => {
     expect(styleComponents({ shadow: 'none', border: 'default' })).toEqual({})
   })
 
+  it('inner shadow rides its own inset utilities on the same surfaces', async () => {
+    const { styleComponents, styleTokens } = await import('../../docs/app/utils/theme-engine')
+
+    const soft = styleComponents({ innerShadow: 'soft' })
+    expect(soft.button!.slots!.base).toContain('inset-shadow-sm inset-shadow-(color:--ui-shadow-final-inner)')
+    expect(soft.tooltip!.slots!.content).toContain('inset-shadow-(color:--ui-shadow-final-inner)')
+    // surfaceless variants stay flat, mirroring the drop treatment
+    expect(soft.button!.compoundVariants).toContainEqual({ variant: 'ghost', class: 'inset-shadow-none' })
+    expect(soft.input!.compoundVariants).toContainEqual({ variant: 'none', class: 'inset-shadow-none' })
+
+    const hard = styleComponents({ innerShadow: 'hard' })
+    expect(hard.card!.slots!.root).toContain('inset-shadow-(--ui-inner-shadow)')
+
+    // both treatments coexist on one surface — separate tailwind groups
+    const both = styleComponents({ shadow: 'hard', innerShadow: 'soft' })
+    expect(both.card!.slots!.root).toContain('shadow-(--ui-shadow-hard-lg)')
+    expect(both.card!.slots!.root).toContain('inset-shadow-sm')
+
+    const tokens = styleTokens({ innerShadow: 'hard', innerShadowGeometry: { y: 6 }, innerShadowOpacity: 30 })
+    expect(tokens.light['--ui-inner-shadow-offset-y']).toBe('6px')
+    expect(tokens.light['--ui-inner-shadow-offset-x']).toBe('0px')
+    expect(tokens.light['--ui-inner-shadow-opacity']).toBe('30%')
+  })
+
   it('merges shadow and border fragments slot-wise', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
     const components = styleComponents({ shadow: 'hard', border: 'bold' })
diff --git a/test/utils/theme-import.spec.ts b/test/utils/theme-import.spec.ts
index 9465633b52..7733099111 100644
--- a/test/utils/theme-import.spec.ts
+++ b/test/utils/theme-import.spec.ts
@@ -66,6 +66,23 @@ describe('importTheme', () => {
     })
   })
 
+  it('round-trips an inner-shadow style', () => {
+    const original: ThemeDoc = {
+      version: 1,
+      style: { innerShadow: 'hard', innerShadowGeometry: { x: 0, y: 4, blur: 8, spread: 0 }, innerShadowOpacity: 30 }
+    }
+    const css = generateCSS(original)
+    const config = generateConfig(original)
+    const { doc: imported, skipped } = importTheme({ css, config })
+
+    expect(skipped).toEqual([])
+    expect(imported.style?.innerShadow).toBe('hard')
+    expect(imported.style?.innerShadowGeometry).toEqual({ x: 0, y: 4, blur: 8, spread: 0 })
+    expect(imported.style?.innerShadowOpacity).toBe(30)
+    expect(generateConfig(imported)).toBe(config)
+    expect(generateCSS(imported)).toBe(css)
+  })
+
   it('parses sizing, font and radius from CSS alone', () => {
     const { doc, skipped } = importTheme({
       css: [

From 633fd8aaaa46a642df0c53e111a9fa5df90eab00 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 18:42:15 +0200
Subject: [PATCH 065/185] feat(docs): inner shadow gets its own color select
 and shade sliders, inheriting the drop color by default

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/assets/css/main.css                  |  2 +-
 .../theme-studio/ThemeStudioControls.vue      | 31 ++++++++++++++++++-
 docs/app/utils/theme-engine/export.ts         |  2 +-
 docs/app/utils/theme-engine/import.ts         | 15 +++++++++
 docs/app/utils/theme-engine/styles.ts         | 15 +++++++++
 test/utils/theme-import.spec.ts               |  4 ++-
 6 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index 960d7dc2c2..502b05c7b8 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -156,7 +156,7 @@ html.theme-studio-dragging body *:not([data-curve-editor] *) {
   --ui-inner-shadow-offset-y: 2px;
   --ui-inner-shadow-blur: 4px;
   --ui-inner-shadow-spread: 0px;
-  --ui-shadow-final-inner: color-mix(in oklab, var(--ui-shadow-color) var(--ui-inner-shadow-opacity, 15%), transparent);
+  --ui-shadow-final-inner: color-mix(in oklab, var(--ui-inner-shadow-color, var(--ui-shadow-color)) var(--ui-inner-shadow-opacity, 15%), transparent);
   --ui-inner-shadow: var(--ui-inner-shadow-offset-x) var(--ui-inner-shadow-offset-y) var(--ui-inner-shadow-blur) var(--ui-inner-shadow-spread) var(--ui-shadow-final-inner);
 }
 :where(.dark) {
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 2a93599f38..38431ec512 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -120,6 +120,11 @@ const innerShadowOpacity = computed({
   set: (value: number) => setStyle({ innerShadowOpacity: value })
 })
 
+const innerShadowColor = computed({
+  get: () => style.value.innerShadowColor || 'default',
+  set: (value: any) => setStyle({ innerShadowColor: value })
+})
+
 function innerGeometrySlider(key: 'x' | 'y' | 'blur' | 'spread') {
   return computed({
     get: () => ({ ...INNER_SHADOW_GEOMETRY_DEFAULTS, ...style.value.innerShadowGeometry })[key],
@@ -173,7 +178,7 @@ const shadowColorItems = [
 // Slider position ↔ SHADES index, per mode. shadow/border shades write both
 // modes on first touch (explicit 'shade' mode choice); token shades write
 // ONLY the touched mode so an untouched mode never becomes an override.
-function shadeSlider(field: 'shadowShade' | 'borderShade', defaults: { light: number, dark: number }, target: 'light' | 'dark') {
+function shadeSlider(field: 'shadowShade' | 'innerShadowShade' | 'borderShade', defaults: { light: number, dark: number }, target: 'light' | 'dark') {
   return computed({
     get: () => SHADES.indexOf((style.value[field] || defaults)[target] as typeof SHADES[number]),
     set: (index: number) => {
@@ -188,6 +193,11 @@ const shadowShades = {
   dark: shadeSlider('shadowShade', SHADOW_SHADE_DEFAULTS, 'dark')
 }
 
+const innerShadowShades = {
+  light: shadeSlider('innerShadowShade', SHADOW_SHADE_DEFAULTS, 'light'),
+  dark: shadeSlider('innerShadowShade', SHADOW_SHADE_DEFAULTS, 'dark')
+}
+
 const borderShades = {
   light: shadeSlider('borderShade', BORDER_SHADE_DEFAULTS, 'light'),
   dark: shadeSlider('borderShade', BORDER_SHADE_DEFAULTS, 'dark')
@@ -842,6 +852,25 @@ const shadowColor = computed({
                 </div>
 
                 <div v-if="(style.innerShadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
+                  <USelect
+                    v-model="innerShadowColor"
+                    size="sm"
+                    color="neutral"
+                    icon="i-lucide-paint-bucket"
+                    :items="shadowColorItems"
+                    class="w-full"
+                  />
+
+                  <template v-if="innerShadowColor === 'shade' || innerShadowColor === 'primary-shade'">
+                    <ThemeStudioShadeSlider
+                      v-for="(slider, modeName) in innerShadowShades"
+                      :key="modeName"
+                      v-model="slider.value"
+                      :mode="modeName"
+                      :chip="innerShadowColor === 'primary-shade' ? primaryChip : neutralChip"
+                    />
+                  </template>
+
                   <div class="flex items-center gap-2">
                     <span class="text-[11px] text-muted w-13 shrink-0 select-none">Opacity</span>
 
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index ef07fb730d..d73f74d208 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -112,7 +112,7 @@ export function generateCSS(doc: ThemeDoc): string {
       }
       style.light['--ui-inner-shadow'] = 'var(--ui-inner-shadow-offset-x) var(--ui-inner-shadow-offset-y) var(--ui-inner-shadow-blur) var(--ui-inner-shadow-spread) var(--ui-shadow-final-inner)'
     }
-    style.light['--ui-shadow-final-inner'] = 'color-mix(in oklab, var(--ui-shadow-color) var(--ui-inner-shadow-opacity, 15%), transparent)'
+    style.light['--ui-shadow-final-inner'] = 'color-mix(in oklab, var(--ui-inner-shadow-color, var(--ui-shadow-color)) var(--ui-inner-shadow-opacity, 15%), transparent)'
   }
 
   if (Object.keys(style.light).length) {
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index 40cf43fb4c..570707a610 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -213,6 +213,7 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
     spread: take('--ui-inner-shadow-spread')
   }
   const innerFinal = take('--ui-shadow-final-inner')
+  const innerColor = take('--ui-inner-shadow-color')
   take('--ui-inner-shadow')
 
   if (innerGeometry.x.light !== undefined) {
@@ -251,6 +252,20 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
     }
   }
 
+  if (innerColor.light !== undefined || innerColor.dark !== undefined) {
+    // Never force-emitted — any presence is a real choice.
+    const named = (Object.keys(SHADOW_COLOR_VALUES) as Array<keyof typeof SHADOW_COLOR_VALUES>)
+      .find(key => SHADOW_COLOR_VALUES[key].light === innerColor.light && SHADOW_COLOR_VALUES[key].dark === innerColor.dark)
+    const lightRef = parseUiColorRef(innerColor.light)
+    const darkRef = parseUiColorRef(innerColor.dark)
+    if (named) {
+      style.innerShadowColor = named
+    } else if (lightRef && darkRef && lightRef.alias === darkRef.alias && (lightRef.alias === 'neutral' || lightRef.alias === 'primary')) {
+      style.innerShadowColor = lightRef.alias === 'primary' ? 'primary-shade' : 'shade'
+      style.innerShadowShade = { light: lightRef.shade, dark: darkRef.shade }
+    }
+  }
+
   if (frameColor.light !== undefined || frameColor.dark !== undefined) {
     const named = (Object.keys(FRAME_COLOR_VALUES) as Array<keyof typeof FRAME_COLOR_VALUES>)
       .find(key => FRAME_COLOR_VALUES[key].light === frameColor.light && FRAME_COLOR_VALUES[key].dark === frameColor.dark)
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index f33f5da50c..d66dedf637 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -82,6 +82,10 @@ export interface StyleOptions {
   innerShadowGeometry?: { x?: number, y?: number, blur?: number, spread?: number }
   /** Inner-shadow opacity in percent; unset falls back to 15%. */
   innerShadowOpacity?: number
+  /** Inner-shadow color; unset inherits the drop shadow's color. */
+  innerShadowColor?: ShadowColor
+  /** Ramp shade per mode — neutral for 'shade', primary for 'primary-shade' */
+  innerShadowShade?: { light: number, dark: number }
   /**
    * Semantic token → neutral ramp shade, per mode. Strictly a token
    * shorthand parked on the style axis until the studio grows a full
@@ -638,6 +642,17 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
     dark['--ui-shadow-color'] = value.dark
   }
 
+  if (style.innerShadowColor === 'shade' || style.innerShadowColor === 'primary-shade') {
+    const ramp = style.innerShadowColor === 'primary-shade' ? 'primary' : 'neutral'
+    const shade = { ...SHADOW_SHADE_DEFAULTS, ...style.innerShadowShade }
+    light['--ui-inner-shadow-color'] = `var(--ui-color-${ramp}-${shade.light})`
+    dark['--ui-inner-shadow-color'] = `var(--ui-color-${ramp}-${shade.dark})`
+  } else if (style.innerShadowColor && style.innerShadowColor !== 'default') {
+    const value = SHADOW_COLOR_VALUES[style.innerShadowColor]
+    light['--ui-inner-shadow-color'] = value.light
+    dark['--ui-inner-shadow-color'] = value.dark
+  }
+
   // Studio-only: hand-rolled preview markup scales its borders through this
   // variable (`border-[length:var(--studio-border-width,1px)]`), since the
   // component fragments can't reach plain divs. Stripped from exports.
diff --git a/test/utils/theme-import.spec.ts b/test/utils/theme-import.spec.ts
index 7733099111..22c4affa59 100644
--- a/test/utils/theme-import.spec.ts
+++ b/test/utils/theme-import.spec.ts
@@ -69,7 +69,7 @@ describe('importTheme', () => {
   it('round-trips an inner-shadow style', () => {
     const original: ThemeDoc = {
       version: 1,
-      style: { innerShadow: 'hard', innerShadowGeometry: { x: 0, y: 4, blur: 8, spread: 0 }, innerShadowOpacity: 30 }
+      style: { innerShadow: 'hard', innerShadowGeometry: { x: 0, y: 4, blur: 8, spread: 0 }, innerShadowOpacity: 30, innerShadowColor: 'primary-shade', innerShadowShade: { light: 700, dark: 300 } }
     }
     const css = generateCSS(original)
     const config = generateConfig(original)
@@ -79,6 +79,8 @@ describe('importTheme', () => {
     expect(imported.style?.innerShadow).toBe('hard')
     expect(imported.style?.innerShadowGeometry).toEqual({ x: 0, y: 4, blur: 8, spread: 0 })
     expect(imported.style?.innerShadowOpacity).toBe(30)
+    expect(imported.style?.innerShadowColor).toBe('primary-shade')
+    expect(imported.style?.innerShadowShade).toEqual({ light: 700, dark: 300 })
     expect(generateConfig(imported)).toBe(config)
     expect(generateCSS(imported)).toBe(css)
   })

From bc11ecaa92d94ccacf98ae11bd95320f884ad703 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 18:46:22 +0200
Subject: [PATCH 066/185] fix(docs): restore the sidebar pe-0 / card-owned
 margin fix that regressed during edits

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/components/theme-studio/ThemeStudioModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index 8387b44853..fb42824688 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -68,7 +68,7 @@ const viewTabs = [
           v-model:open="sidebarOpen"
           variant="floating"
           :style="{ '--sidebar-width': '21rem' }"
-          :ui="{ body: 'p-0 gap-0', inner: [sidebarShadow, SIDEBAR_RING[chromeWidth]] }"
+          :ui="{ container: 'pe-0', body: 'p-0 gap-0', inner: [sidebarShadow, SIDEBAR_RING[chromeWidth]] }"
         >
           <ThemeStudioControls />
 
@@ -142,7 +142,7 @@ const viewTabs = [
           <!-- The floating preview card: the grid scrolls inside it; the
                app-shell views own their height and scroll internally. -->
           <div
-            class="flex-1 min-w-0 min-h-0 border-default m-4 mt-1 lg:ms-0 rounded-lg"
+            class="flex-1 min-w-0 min-h-0 border-default m-4 mt-1 rounded-lg"
             :class="[PREVIEW_EDGE[chromeWidth], previewShadow, view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden']"
           >
             <ThemeStudioBento v-if="view === 'grid'" />

From 2add887b160a8d2f620ab18b308585948f440485 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 19:04:16 +0200
Subject: [PATCH 067/185] =?UTF-8?q?feat(docs):=20Orchard=20resculpted=20?=
 =?UTF-8?q?=E2=80=94=20bottom-lit=20inner=20shadow=20on=20grove=20500/950?=
 =?UTF-8?q?=20over=20the=20hard=20drop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/utils/theme-engine/presets.ts | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 10674d8409..1f83609b70 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -110,7 +110,7 @@ export const presets: ThemePreset[] = [{
 }, {
   id: 'orchard',
   name: 'Orchard',
-  description: 'Orange on deep sage greens — subtle surfaces, dropped hard shadows.',
+  description: 'Orange on deep sage greens — subtle surfaces, hard shadows dropped below and inset above.',
   icon: 'i-lucide-citrus',
   doc: {
     version: 1,
@@ -149,21 +149,28 @@ export const presets: ThemePreset[] = [{
         '--ui-text-highlighted': 'var(--ui-color-neutral-50)'
       }
     },
-    // Exercises the newest axes together: straight-down hard shadow at 55%,
-    // app-wide subtle variants, and per-mode shades for the surface stack
-    // plus the success/error alias tokens.
+    // Exercises the newest axes together: straight-down hard shadow at 55%
+    // paired with a bottom-lit hard INSET at 50% (drop below, light above —
+    // the pressed-clay look), app-wide subtle variants, and per-mode shades
+    // for the surface stack plus the success/error alias tokens.
     style: {
       shadow: 'hard',
       shadowColor: 'shade',
       shadowShade: { light: 950, dark: 950 },
       shadowOpacity: 55,
       shadowGeometry: { x: 0, y: 3, blur: 0, spread: 0 },
+      innerShadow: 'hard',
+      innerShadowGeometry: { x: 0, y: -3, blur: 0, spread: 0 },
+      innerShadowOpacity: 50,
+      innerShadowColor: 'shade',
+      innerShadowShade: { light: 500, dark: 950 },
       defaults: { variant: 'subtle' },
       tokenShades: {
         '--ui-bg-muted': { light: 100 },
         '--ui-bg-elevated': { light: 200 },
         '--ui-bg-accented': { light: 300 },
         '--ui-border': { dark: 950 },
+        '--ui-border-accented': { dark: 950 },
         '--ui-success': { light: 600, dark: 300 },
         '--ui-error': { light: 600, dark: 300 }
       }

From a072bda6cf2be71677082502dd2a3ff378a2fe85 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 19:12:45 +0200
Subject: [PATCH 068/185] feat(docs): logo and mode buttons move into the
 sidebar header, tinted header/footer slots

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 22 +----------
 .../theme-studio/ThemeStudioModal.vue         | 38 +++++++++++++++----
 2 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 38431ec512..18b1066bca 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -17,9 +17,7 @@ const {
   fonts,
   font,
   icon,
-  icons,
-  modes,
-  mode
+  icons
 } = useTheme()
 
 const { selectPalette, isCustomPalette, style, setStyle, presets, activePreset, applyPreset, shuffle } = useThemeStudio()
@@ -245,12 +243,6 @@ function rampChip(ramp: TokenRamp): string {
   return name === 'neutral' ? 'old-neutral' : name
 }
 
-// No 'system' tab: the studio is about previewing a concrete mode. For
-// The mode preference lives client-side only — resolve the highlight AFTER
-// mount so hydration's adopt-without-patching never strands a stale state.
-const colorMode = useColorMode()
-const mounted = ref(false)
-
 /**
  * Same hydration-adoption problem for every control: SSR renders default
  * state (no localStorage), and persisted slider positions/selections looked
@@ -260,8 +252,6 @@ const mounted = ref(false)
 const hydrationKey = ref(0)
 
 onMounted(() => {
-  mounted.value = true
-
   const keys = ['nuxt-ui-style', 'nuxt-ui-css-variables', 'nuxt-ui-custom-colors', 'nuxt-ui-radius', 'nuxt-ui-font-size', 'nuxt-ui-spacing', 'nuxt-ui-ai-theme']
   if (keys.some(key => localStorage.getItem(key))) {
     hydrationKey.value = 1
@@ -400,16 +390,6 @@ const shadowColor = computed({
         />
       </UTooltip>
     </div>
-    <div class="grid grid-cols-3 gap-1 px-4">
-      <ThemePickerButton
-        v-for="m in modes"
-        :key="m.label"
-        v-bind="m"
-        :selected="mounted && colorMode.preference === m.label"
-        @click="mode = m.label"
-      />
-    </div>
-
     <UAccordion
       v-model="openGroups"
       :ui="{ content: 'px-4', header: 'px-6' }"
diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index fb42824688..f7549cfb5e 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -1,6 +1,15 @@
 <script setup lang="ts">
 const { track } = useAnalytics()
 const { reset, style, studioOpen: open } = useThemeStudio()
+const { modes, mode } = useTheme()
+const colorMode = useColorMode()
+
+// Resolved AFTER mount: the preference is client-only, and hydration adopts
+// SSR attributes without patching — a post-mount flip is a real update.
+const mounted = ref(false)
+onMounted(() => {
+  mounted.value = true
+})
 
 watch(open, (isOpen) => {
   if (isOpen) {
@@ -68,8 +77,27 @@ const viewTabs = [
           v-model:open="sidebarOpen"
           variant="floating"
           :style="{ '--sidebar-width': '21rem' }"
-          :ui="{ container: 'pe-0', body: 'p-0 gap-0', inner: [sidebarShadow, SIDEBAR_RING[chromeWidth]] }"
+          :ui="{ container: 'pe-0', header: 'bg-elevated/25', body: 'p-0 gap-0', footer: 'bg-elevated/25', inner: [sidebarShadow, SIDEBAR_RING[chromeWidth]] }"
         >
+          <template #header>
+            <Logo class="w-auto h-6 shrink-0 mr-auto" />
+
+            <UTooltip v-for="m in modes" :key="m.label" :text="`${m.label} mode`" class="capitalize">
+              <UButton
+                :icon="m.icon"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                square
+                :active="mounted && colorMode.preference === m.label"
+                active-color="primary"
+                active-variant="subtle"
+                :aria-label="`${m.label} mode`"
+                @click="mode = m.label"
+              />
+            </UTooltip>
+          </template>
+
           <ThemeStudioControls />
 
           <template #footer>
@@ -109,12 +137,6 @@ const viewTabs = [
               />
             </UTooltip>
 
-            <Logo class="w-auto h-4 shrink-0" />
-
-            <h2 class="text-sm font-semibold text-highlighted mt-1 me-2">
-              Theme Studio
-            </h2>
-
             <span class="flex-1" />
 
             <UTabs
@@ -142,7 +164,7 @@ const viewTabs = [
           <!-- The floating preview card: the grid scrolls inside it; the
                app-shell views own their height and scroll internally. -->
           <div
-            class="flex-1 min-w-0 min-h-0 border-default m-4 mt-1 rounded-lg"
+            class="flex-1 min-w-0 min-h-0 border-default m-4 mt-0 rounded-lg"
             :class="[PREVIEW_EDGE[chromeWidth], previewShadow, view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden']"
           >
             <ThemeStudioBento v-if="view === 'grid'" />

From f5aa2efeb5a3667f6e115e5c7f64c1fcfdc83922 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 19:35:53 +0200
Subject: [PATCH 069/185] fix(docs): neo defaults from paste; sidebar dividers,
 dashboard sidebar edge and accordion frame follow border width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The dashboard sidebar's edge lives in its side variant, which tv applies
after config slot appends — only a compound override lands on top.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/theme-studio/ThemeStudioControls.vue   |  2 +-
 docs/app/components/theme-studio/ThemeStudioModal.vue | 11 ++++++-----
 docs/app/utils/theme-engine/presets.ts                |  2 +-
 docs/app/utils/theme-engine/styles.ts                 |  7 ++++++-
 test/utils/theme-engine.spec.ts                       |  3 ++-
 5 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 18b1066bca..ee61751d70 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -395,7 +395,7 @@ const shadowColor = computed({
       :ui="{ content: 'px-4', header: 'px-6' }"
       :items="groupItems"
       :unmount-on-hide="false"
-      class="border-y border-default"
+      class="border-y-[length:var(--studio-border-width,1px)] border-default"
     >
       <template #colors>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index f7549cfb5e..167a727c0d 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -23,6 +23,7 @@ const sidebarOpen = ref(true)
 // class strings per width so tailwind's scanner sees them.
 const PREVIEW_EDGE: Record<number, string> = { 0: 'border-0', 1: 'border', 2: 'border-2', 3: 'border-3', 4: 'border-4' }
 const SIDEBAR_RING: Record<number, string> = { 0: 'ring-0', 1: 'ring-1', 2: 'ring-2', 3: 'ring-3', 4: 'ring-4' }
+const SIDEBAR_DIVIDE: Record<number, string> = { 0: 'divide-y-0', 1: 'divide-y', 2: 'divide-y-2', 3: 'divide-y-3', 4: 'divide-y-4' }
 
 const chromeWidth = computed(() => {
   const border = style.value.border
@@ -47,8 +48,8 @@ const previewShadow = computed(() => {
   const shadow = style.value.shadow
   if (shadow === 'none') return ''
   if (shadow === 'hard') return 'shadow-(--ui-shadow-hard-lg)'
-  if (shadow === 'soft') return 'shadow-xl shadow-(color:--ui-shadow-final-soft)'
-  return 'shadow-xl'
+  if (shadow === 'soft') return ' shadow-(color:--ui-shadow-final-soft)'
+  return ''
 })
 
 /** Preview views: the bento grid plus app-scale layouts from the real templates. */
@@ -72,12 +73,12 @@ const viewTabs = [
     description="Customize Nuxt UI live: colors, radius, fonts and icons — then export only what you changed."
   >
     <template #content>
-      <div class="flex flex-row w-full h-full bg-default">
+      <div class="flex flex-row w-full h-full bg-neutral-300 dark:bg-neutral-900">
         <USidebar
           v-model:open="sidebarOpen"
           variant="floating"
           :style="{ '--sidebar-width': '21rem' }"
-          :ui="{ container: 'pe-0', header: 'bg-elevated/25', body: 'p-0 gap-0', footer: 'bg-elevated/25', inner: [sidebarShadow, SIDEBAR_RING[chromeWidth]] }"
+          :ui="{ container: 'pe-0', header: 'bg-elevated/25', body: 'p-0 gap-0 bg-default', footer: 'bg-elevated/25', inner: [sidebarShadow, SIDEBAR_RING[chromeWidth], SIDEBAR_DIVIDE[chromeWidth], 'bg-default'] }"
         >
           <template #header>
             <Logo class="w-auto h-6 shrink-0 mr-auto" />
@@ -164,7 +165,7 @@ const viewTabs = [
           <!-- The floating preview card: the grid scrolls inside it; the
                app-shell views own their height and scroll internally. -->
           <div
-            class="flex-1 min-w-0 min-h-0 border-default m-4 mt-0 rounded-lg"
+            class="flex-1 min-w-0 min-h-0 border-default bg-default m-4 mt-0 rounded-lg"
             :class="[PREVIEW_EDGE[chromeWidth], previewShadow, view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden']"
           >
             <ThemeStudioBento v-if="view === 'grid'" />
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 1f83609b70..889f9c04a4 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -87,7 +87,7 @@ export const presets: ThemePreset[] = [{
       frame: true,
       borderColor: 'shade',
       borderShade: { light: 900, dark: 950 },
-      defaults: { variants: { inputs: 'soft' } },
+      defaults: { variants: { buttons: 'solid', panels: 'subtle', inputs: 'subtle' } },
       tokenShades: {
         '--ui-bg': { light: 100, dark: 800 },
         '--ui-bg-muted': { light: 300 },
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index d66dedf637..41c4a74dbb 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -390,7 +390,12 @@ function ringFragments(width: number): Fragments {
     header: { slots: { root: edge('b') } },
     accordion: { slots: { item: edge('b') } },
     table: { slots: { tbody: divide } },
-    dashboardSidebar: { slots: { root: edge('e') } },
+    // the sidebar's edge border lives in its side VARIANT, which tv applies
+    // after slot extensions — a compound is the only layer that lands on top
+    dashboardSidebar: { compoundVariants: [
+      { side: 'left', class: { root: edge('e') } },
+      { side: 'right', class: { root: edge('s') } }
+    ] },
     dashboardNavbar: { slots: { root: edge('b') } },
     dashboardToolbar: { slots: { root: edge('b') } },
     dashboardPanel: { slots: { root: PANEL_EDGE_CLASSES[width] || PANEL_EDGE_CLASSES[BORDER_WIDTH_DEFAULT]! } },
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 411d458f30..2b8abf0626 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -379,7 +379,8 @@ describe('style colors', () => {
 
     // border-utility edges scale with the width: chrome, separators, dividers
     expect(wide.header!.slots!.root).toBe('border-b-3')
-    expect(wide.dashboardSidebar!.slots!.root).toBe('border-e-3')
+    // the sidebar edge rides a compound — its side variant would outrank a slot append
+    expect(wide.dashboardSidebar!.compoundVariants).toContainEqual({ side: 'left', class: { root: 'border-e-3' } })
     expect(wide.dashboardPanel!.slots!.root).toBe('lg:not-last:border-e-3')
     expect(wide.separator!.compoundVariants).toContainEqual({ orientation: 'horizontal', class: { border: 'border-t-3' } })
     expect(wide.table!.slots!.tbody).toBe('divide-y-3')

From 3d481a9dbf82adfca5ccfb844715b20a8b27fce9 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 19:37:50 +0200
Subject: [PATCH 070/185] =?UTF-8?q?feat(docs):=20default=20border/ring=20w?=
 =?UTF-8?q?idths=20compile=20to=20the=20studio=20width=20var=20=E2=80=94?=
 =?UTF-8?q?=20the=20whole=20site=20follows=20the=20slider?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/assets/css/main.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index 502b05c7b8..66790c795b 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -6,6 +6,13 @@
 @theme static {
   --container-8xl: 90rem;
 
+  /* Every default-width border/ring/divide utility in the app compiles to
+     this var — the studio's width slider repaints the whole site through
+     one custom property instead of per-component class fragments. Exports
+     do the same thing statically (@theme --default-border-width). */
+  --default-border-width: var(--studio-border-width, 1px);
+  --default-ring-width: var(--studio-border-width, 1px);
+
   /* Studio extras: custom neutrals (sand, sage, ash) and primaries
      (cocoa, marine) beyond the stock tailwind palettes. */
   --color-sand-50: oklch(98% 0.006 84.579);

From cbb3580e0ccac97a9f3920ac1258906dad1b7ced Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 19:42:03 +0200
Subject: [PATCH 071/185] refactor(docs): unify sidebar and preview card shadow
 treatments; streamline border and ring handling

Updated the ThemeStudioModal component to consolidate shadow logic for the sidebar and preview card, ensuring consistent styling. Removed redundant border and ring width mappings, simplifying the codebase while maintaining visual integrity.
---
 .../theme-studio/ThemeStudioModal.vue         | 40 +++++--------------
 1 file changed, 9 insertions(+), 31 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index 167a727c0d..55bd225d46 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -19,37 +19,15 @@ watch(open, (isOpen) => {
 
 const sidebarOpen = ref(true)
 
-// The studio's own chrome follows the border treatment too — whole literal
-// class strings per width so tailwind's scanner sees them.
-const PREVIEW_EDGE: Record<number, string> = { 0: 'border-0', 1: 'border', 2: 'border-2', 3: 'border-3', 4: 'border-4' }
-const SIDEBAR_RING: Record<number, string> = { 0: 'ring-0', 1: 'ring-1', 2: 'ring-2', 3: 'ring-3', 4: 'ring-4' }
-const SIDEBAR_DIVIDE: Record<number, string> = { 0: 'divide-y-0', 1: 'divide-y', 2: 'divide-y-2', 3: 'divide-y-3', 4: 'divide-y-4' }
-
-const chromeWidth = computed(() => {
-  const border = style.value.border
-  if (!border || border === 'default') return 1
-  if (border === 'none') return 0
-  return style.value.borderWidth ?? 2
-})
-
-// The studio's own floating panels cast theme-correct shadows too. The
-// sidebar override merges through tv (recoloring its stock shadow-lg is
-// enough); the preview card's plain :class doesn't merge, so it gets the
-// whole string.
-const sidebarShadow = computed(() => {
+// Both floating panels wear IDENTICAL chrome: ring edges (default-width
+// rings follow the studio width variable) and one shared shadow treatment,
+// so the sidebar and preview card always match.
+const chromeShadow = computed(() => {
   const shadow = style.value.shadow
   if (shadow === 'none') return 'shadow-none'
   if (shadow === 'hard') return 'shadow-(--ui-shadow-hard-lg)'
-  if (shadow === 'soft') return 'shadow-(color:--ui-shadow-final-soft)'
-  return ''
-})
-
-const previewShadow = computed(() => {
-  const shadow = style.value.shadow
-  if (shadow === 'none') return ''
-  if (shadow === 'hard') return 'shadow-(--ui-shadow-hard-lg)'
-  if (shadow === 'soft') return ' shadow-(color:--ui-shadow-final-soft)'
-  return ''
+  if (shadow === 'soft') return 'shadow-lg shadow-(color:--ui-shadow-final-soft)'
+  return 'shadow-lg'
 })
 
 /** Preview views: the bento grid plus app-scale layouts from the real templates. */
@@ -78,7 +56,7 @@ const viewTabs = [
           v-model:open="sidebarOpen"
           variant="floating"
           :style="{ '--sidebar-width': '21rem' }"
-          :ui="{ container: 'pe-0', header: 'bg-elevated/25', body: 'p-0 gap-0 bg-default', footer: 'bg-elevated/25', inner: [sidebarShadow, SIDEBAR_RING[chromeWidth], SIDEBAR_DIVIDE[chromeWidth], 'bg-default'] }"
+          :ui="{ container: 'pe-0', header: 'bg-elevated/50', body: 'p-0 gap-0 bg-default', footer: 'bg-elevated/50', inner: [chromeShadow, 'bg-default'] }"
         >
           <template #header>
             <Logo class="w-auto h-6 shrink-0 mr-auto" />
@@ -165,8 +143,8 @@ const viewTabs = [
           <!-- The floating preview card: the grid scrolls inside it; the
                app-shell views own their height and scroll internally. -->
           <div
-            class="flex-1 min-w-0 min-h-0 border-default bg-default m-4 mt-0 rounded-lg"
-            :class="[PREVIEW_EDGE[chromeWidth], previewShadow, view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden']"
+            class="flex-1 min-w-0 min-h-0 ring ring-default bg-default m-4 mt-0 rounded-lg"
+            :class="[chromeShadow, view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden']"
           >
             <ThemeStudioBento v-if="view === 'grid'" />
             <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />

From a68fd61997b75a5fbad242caeaef36e21ee2f714 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 22:00:13 +0200
Subject: [PATCH 072/185] =?UTF-8?q?refactor(docs):=20one=20ThemePickerColo?=
 =?UTF-8?q?rMenu=20=E2=80=94=20the=20studio's=20sectioned=20swatch=20picke?=
 =?UTF-8?q?r=20now=20serves=20the=20header=20popover=20too?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/theme-picker/ThemePicker.vue   | 119 ++----------
 .../theme-picker/ThemePickerButton.vue        |   3 +-
 .../theme-picker/ThemePickerColorMenu.vue     | 103 ++++++++++
 .../theme-studio/ThemeStudioControls.vue      | 182 +-----------------
 .../theme-studio/ThemeStudioModal.vue         |   2 +-
 5 files changed, 130 insertions(+), 279 deletions(-)
 create mode 100644 docs/app/components/theme-picker/ThemePickerColorMenu.vue

diff --git a/docs/app/components/theme-picker/ThemePicker.vue b/docs/app/components/theme-picker/ThemePicker.vue
index 9636f7eb9d..1ce60efaee 100644
--- a/docs/app/components/theme-picker/ThemePicker.vue
+++ b/docs/app/components/theme-picker/ThemePicker.vue
@@ -17,12 +17,6 @@ const { copy: copyCSS, copied: copiedCSS } = useClipboard()
 const { copy: copyConfig, copied: copiedConfig } = useClipboard()
 
 const {
-  neutralColors,
-  neutral,
-  primaryColors,
-  primary,
-  blackAsPrimary,
-  setBlackAsPrimary,
   radiuses,
   radius,
   modes,
@@ -35,7 +29,7 @@ const {
   resetTheme
 } = useTheme()
 
-const { presets, activePreset, applyPreset, shuffle, selectPalette, studioOpen } = useThemeStudio()
+const { presets, activePreset, applyPreset, shuffle, studioOpen } = useThemeStudio()
 
 /** The preset's primary + neutral at 500, straight from its own document. */
 function presetSwatches(doc: ThemeDoc): string[] {
@@ -55,33 +49,6 @@ const presetItems = computed(() => presets.map(preset => ({
 
 const presetLabel = computed(() => presets.find(preset => preset.id === activePreset.value)?.name || 'Presets')
 
-/** Current values may be preset/custom ramps that aren't in the stock lists. */
-const primaryItems = computed(() => [...new Set(['black', ...(blackAsPrimary.value ? [] : [primary.value]), ...primaryColors])])
-const neutralItems = computed(() => [...new Set([neutral.value, ...neutralColors])])
-
-const primaryModel = computed({
-  get: () => blackAsPrimary.value ? 'black' : primary.value,
-  set: (value: string) => {
-    if (value === 'black') {
-      setBlackAsPrimary(true)
-    } else {
-      setBlackAsPrimary(false)
-      selectPalette('primary', value)
-    }
-  }
-})
-
-const neutralModel = computed({
-  get: () => neutral.value,
-  set: (value: string) => selectPalette('neutral', value)
-})
-
-/** Palette name → the css var chip name (tailwind's neutral gray is remapped in docs). */
-function chipColor(name: string): string | undefined {
-  if (name === 'black') return undefined
-  return `var(--color-${name === 'neutral' ? 'old-neutral' : name}-500)`
-}
-
 function openStudio() {
   open.value = false
   studioOpen.value = true
@@ -103,19 +70,19 @@ function openStudio() {
 
     <template #content>
       <div class="flex gap-1.5">
-        <UDropdownMenu :items="presetItems" :content="{ align: 'start' }" class="flex-1 min-w-0">
+        <UDropdownMenu :items="presetItems" :content="{ align: 'start' }" class="flex-1 min-w-0" :ui="{ itemTrailing: 'self-center', content: 'w-(--reka-dropdown-menu-trigger-width)' }">
           <UButton
             :label="presetLabel"
             icon="i-lucide-swatch-book"
             trailing-icon="i-lucide-chevron-down"
             color="neutral"
             variant="subtle"
-            size="sm"
+
             block
           />
 
           <template #item-trailing="{ item }">
-            <span class="inline-flex items-center gap-1">
+            <span class="inline-flex items-center gap-1 h-full">
               <span
                 v-for="(swatch, index) in item.swatches"
                 :key="index"
@@ -131,13 +98,23 @@ function openStudio() {
             icon="i-lucide-dices"
             color="neutral"
             variant="subtle"
-            size="sm"
+
             aria-label="Random theme"
             @click="shuffle"
           />
         </UTooltip>
       </div>
 
+      <UButton
+        label="Open Theme Studio"
+        icon="i-lucide-swatch-book"
+        color="neutral"
+        variant="subtle"
+
+        block
+        @click="openStudio"
+      />
+
       <fieldset>
         <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
           Primary
@@ -153,31 +130,7 @@ function openStudio() {
           />
         </legend>
 
-        <USelect
-          v-model="primaryModel"
-          :items="primaryItems"
-          size="sm"
-          color="neutral"
-          variant="subtle"
-          class="w-full capitalize"
-          :ui="{ item: 'capitalize' }"
-        >
-          <template #leading>
-            <span
-              class="inline-block size-2 rounded-full"
-              :class="{ 'bg-black dark:bg-white': primaryModel === 'black' }"
-              :style="{ backgroundColor: chipColor(primaryModel) }"
-            />
-          </template>
-
-          <template #item-leading="{ item }">
-            <span
-              class="inline-block size-2 rounded-full"
-              :class="{ 'bg-black dark:bg-white': item === 'black' }"
-              :style="{ backgroundColor: chipColor(item as string) }"
-            />
-          </template>
-        </USelect>
+        <ThemePickerColorMenu alias="primary" class="w-full" />
       </fieldset>
 
       <fieldset>
@@ -195,29 +148,7 @@ function openStudio() {
           />
         </legend>
 
-        <USelect
-          v-model="neutralModel"
-          :items="neutralItems"
-          size="sm"
-          color="neutral"
-          variant="subtle"
-          class="w-full capitalize"
-          :ui="{ item: 'capitalize' }"
-        >
-          <template #leading>
-            <span
-              class="inline-block size-2 rounded-full"
-              :style="{ backgroundColor: chipColor(neutralModel) }"
-            />
-          </template>
-
-          <template #item-leading="{ item }">
-            <span
-              class="inline-block size-2 rounded-full"
-              :style="{ backgroundColor: chipColor(item as string) }"
-            />
-          </template>
-        </USelect>
+        <ThemePickerColorMenu alias="neutral" class="w-full" />
       </fieldset>
 
       <fieldset>
@@ -273,16 +204,6 @@ function openStudio() {
         </div>
       </fieldset>
 
-      <UButton
-        label="Open Theme Studio"
-        icon="i-lucide-swatch-book"
-        color="neutral"
-        variant="subtle"
-        size="sm"
-        block
-        @click="openStudio"
-      />
-
       <fieldset v-if="hasCSSChanges || hasConfigChanges">
         <legend class="text-[11px] leading-none font-semibold mb-2 select-none">
           Export
@@ -293,7 +214,7 @@ function openStudio() {
             v-if="hasCSSChanges"
             color="neutral"
             variant="subtle"
-            size="sm"
+
             label="main.css"
             class="flex-1 text-[11px]"
             :icon="copiedCSS ? 'i-lucide-copy-check' : 'i-lucide-copy'"
@@ -303,7 +224,7 @@ function openStudio() {
             v-if="hasConfigChanges"
             color="neutral"
             variant="subtle"
-            size="sm"
+
             :label="configLabel"
             :icon="copiedConfig ? 'i-lucide-copy-check' : 'i-lucide-copy'"
             class="flex-1 text-[11px]"
@@ -313,7 +234,7 @@ function openStudio() {
             <UButton
               color="neutral"
               variant="subtle"
-              size="sm"
+
               icon="i-lucide-rotate-ccw"
               class="ms-auto"
               @click="resetTheme"
diff --git a/docs/app/components/theme-picker/ThemePickerButton.vue b/docs/app/components/theme-picker/ThemePickerButton.vue
index d67ea1bd4a..8e7bf7af94 100644
--- a/docs/app/components/theme-picker/ThemePickerButton.vue
+++ b/docs/app/components/theme-picker/ThemePickerButton.vue
@@ -4,6 +4,7 @@ defineProps<{
   icon?: string
   chip?: string
   selected?: boolean
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null
 }>()
 
 const slots = defineSlots<{
@@ -13,7 +14,7 @@ const slots = defineSlots<{
 
 <template>
   <UButton
-    size="sm"
+    :size="size ?? 'md'"
     color="neutral"
     variant="subtle"
     :active="selected"
diff --git a/docs/app/components/theme-picker/ThemePickerColorMenu.vue b/docs/app/components/theme-picker/ThemePickerColorMenu.vue
new file mode 100644
index 0000000000..338b6b8b89
--- /dev/null
+++ b/docs/app/components/theme-picker/ThemePickerColorMenu.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import type { ColorAlias } from '../../utils/theme-engine'
+
+/**
+ * The shared color picker: a swatch-labelled trigger opening the sectioned
+ * palette grid. Everything derives from the alias, so the studio sidebar
+ * and the header popover render the exact same picker.
+ */
+const props = defineProps<{ alias: ColorAlias }>()
+
+const appConfig = useAppConfig()
+const { neutralColors, primaryColors, primary, neutral, blackAsPrimary, setBlackAsPrimary } = useTheme()
+const { selectPalette, isCustomPalette } = useThemeStudio()
+
+// Every ramp suits either role — colorful ramps lead for color roles,
+// neutrals lead for the background.
+const sections = computed(() => props.alias === 'neutral'
+  ? [{ label: 'Neutrals', colors: neutralColors }, { label: 'Colors', colors: primaryColors }]
+  : [{ label: 'Colors', colors: primaryColors }, { label: 'Neutrals', colors: neutralColors }])
+
+const value = computed(() => {
+  if (props.alias === 'primary') return blackAsPrimary.value ? 'black' : primary.value
+  if (props.alias === 'neutral') return neutral.value
+  return (appConfig.ui.colors as Record<string, string>)[props.alias] || props.alias
+})
+
+const label = computed(() => {
+  if (props.alias === 'primary' && blackAsPrimary.value) return 'Black'
+  return isCustomPalette(props.alias) ? 'Custom' : value.value
+})
+
+/** Palette name → the css var chip name (tailwind's neutral gray is remapped in docs). */
+function paletteChip(name: string) {
+  return name === 'neutral' ? 'old-neutral' : name
+}
+
+const swatchColor = computed(() => {
+  if (props.alias === 'primary' && blackAsPrimary.value) return undefined
+  if (isCustomPalette(props.alias)) return `var(--color-custom-${props.alias}-500)`
+  return `var(--color-${paletteChip(value.value)}-500)`
+})
+
+function isSelected(color: string) {
+  if (props.alias === 'primary') return !blackAsPrimary.value && primary.value === color
+  if (props.alias === 'neutral') return neutral.value === color
+  return value.value === color
+}
+</script>
+
+<template>
+  <UPopover :content="{ side: 'bottom', align: 'start' }">
+    <UButton
+      color="neutral"
+      variant="subtle"
+
+      block
+      trailing-icon="i-lucide-chevron-down"
+      class="capitalize"
+    >
+      <template #leading>
+        <span
+          class="inline-block size-3 rounded-full"
+          :class="{ 'bg-black dark:bg-white': alias === 'primary' && blackAsPrimary }"
+          :style="swatchColor ? { backgroundColor: swatchColor } : undefined"
+        />
+      </template>
+
+      {{ label }}
+    </UButton>
+
+    <template #content>
+      <div class="flex flex-col gap-2 w-72 p-2">
+        <div v-for="(section, index) in sections" :key="section.label">
+          <p class="text-[11px] font-semibold text-muted px-1 mb-1 select-none">
+            {{ section.label }}
+          </p>
+
+          <div class="grid grid-cols-3 gap-1">
+            <ThemePickerButton
+              v-if="alias === 'primary' && index === 0"
+              label="Black"
+              :selected="blackAsPrimary"
+              @click="setBlackAsPrimary(true)"
+            >
+              <template #leading>
+                <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
+              </template>
+            </ThemePickerButton>
+
+            <ThemePickerButton
+              v-for="color in section.colors"
+              :key="color"
+              :label="color"
+              :chip="paletteChip(color)"
+              :selected="isSelected(color)"
+              @click="selectPalette(alias, color)"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index ee61751d70..540e532a52 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -5,12 +5,8 @@ import type { VariantGroup, TokenRamp, ColorAlias, ThemeDoc } from '../../utils/
 const appConfig = useAppConfig()
 
 const {
-  neutralColors,
   neutral,
-  primaryColors,
   primary,
-  blackAsPrimary,
-  setBlackAsPrimary,
   radius,
   fontSize,
   spacing,
@@ -20,7 +16,7 @@ const {
   icons
 } = useTheme()
 
-const { selectPalette, isCustomPalette, style, setStyle, presets, activePreset, applyPreset, shuffle } = useThemeStudio()
+const { isCustomPalette, style, setStyle, presets, activePreset, applyPreset, shuffle } = useThemeStudio()
 
 /** The preset's primary + neutral at 500, straight from its own document. */
 function presetSwatches(doc: ThemeDoc): string[] {
@@ -57,45 +53,8 @@ const openSections = reactive<Record<string, boolean>>({
   ...Object.fromEntries(TOKEN_GROUPS.map((group, index) => [`tokens-${group.key}`, index === 0]))
 })
 
-// Every ramp is a suggestion for either role, sectioned so the list stays
-// scannable: colorful ramps lead the primary/semantic pickers, neutrals
-// lead the background picker.
-const colorSections = [
-  { label: 'Colors', colors: primaryColors },
-  { label: 'Neutrals', colors: neutralColors }
-]
-const backgroundSections = [
-  { label: 'Neutrals', colors: neutralColors },
-  { label: 'Colors', colors: primaryColors }
-]
-
 const semanticAliases: ColorAlias[] = ['secondary', 'success', 'info', 'warning', 'error']
 
-const aliasValues = computed(() => appConfig.ui.colors as Record<string, string>)
-
-/** Palette name → the css var chip name (tailwind's neutral gray is remapped in docs). */
-function paletteChip(name: string) {
-  return name === 'neutral' ? 'old-neutral' : name
-}
-
-const primarySwatch = computed(() => {
-  if (blackAsPrimary.value) {
-    return { label: 'Black', color: undefined }
-  }
-  if (isCustomPalette('primary')) {
-    return { label: 'Custom', color: 'var(--color-custom-primary-500)' }
-  }
-  return { label: primary.value, color: `var(--color-${primary.value}-500)` }
-})
-
-const neutralSwatch = computed(() => {
-  if (isCustomPalette('neutral')) {
-    return { label: 'Custom', color: 'var(--color-custom-neutral-500)' }
-  }
-  const chip = neutral.value === 'neutral' ? 'old-neutral' : neutral.value
-  return { label: neutral.value, color: `var(--color-${chip}-500)` }
-})
-
 const shadowOptions = [
   { label: 'None', value: 'none' },
   { label: 'Default', value: 'soft' },
@@ -262,10 +221,6 @@ onMounted(() => {
 const paletteEditors = reactive<Record<string, boolean>>({})
 
 /** Display name for an alias's palette — custom ramps read as 'Custom'. */
-function aliasLabel(alias: ColorAlias) {
-  return isCustomPalette(alias) ? 'Custom' : aliasValues.value[alias]
-}
-
 const openGroups = ref('colors')
 
 const groupItems = [
@@ -418,58 +373,7 @@ const shadowColor = computed({
             <template #content>
               <div>
                 <UFieldGroup size="sm" class="flex w-full">
-                  <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
-                    <UButton
-                      color="neutral"
-                      variant="subtle"
-                      size="sm"
-                      block
-                      trailing-icon="i-lucide-chevron-down"
-                      class="capitalize"
-                    >
-                      <template #leading>
-                        <span
-                          class="inline-block size-3 rounded-full"
-                          :class="{ 'bg-black dark:bg-white': blackAsPrimary }"
-                          :style="primarySwatch.color ? { backgroundColor: primarySwatch.color } : undefined"
-                        />
-                      </template>
-
-                      {{ primarySwatch.label }}
-                    </UButton>
-
-                    <template #content>
-                      <div class="flex flex-col gap-2 w-72 p-2">
-                        <div v-for="(section, index) in colorSections" :key="section.label">
-                          <p class="text-[11px] font-semibold text-muted px-1 mb-1 select-none">
-                            {{ section.label }}
-                          </p>
-
-                          <div class="grid grid-cols-3 gap-1">
-                            <ThemePickerButton
-                              v-if="index === 0"
-                              label="Black"
-                              :selected="blackAsPrimary"
-                              @click="setBlackAsPrimary(true)"
-                            >
-                              <template #leading>
-                                <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
-                              </template>
-                            </ThemePickerButton>
-
-                            <ThemePickerButton
-                              v-for="color in section.colors"
-                              :key="color"
-                              :label="color"
-                              :chip="paletteChip(color)"
-                              :selected="!blackAsPrimary && primary === color"
-                              @click="selectPalette('primary', color)"
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </template>
-                  </UPopover>
+                  <ThemePickerColorMenu alias="primary" class="flex-1 min-w-0" />
 
                   <UButton
                     :icon="isCustomPalette('primary') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
@@ -507,46 +411,7 @@ const shadowColor = computed({
             <template #content>
               <div>
                 <UFieldGroup size="sm" class="flex w-full">
-                  <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
-                    <UButton
-                      color="neutral"
-                      variant="subtle"
-                      size="sm"
-                      block
-                      trailing-icon="i-lucide-chevron-down"
-                      class="capitalize"
-                    >
-                      <template #leading>
-                        <span
-                          class="inline-block size-3 rounded-full"
-                          :style="{ backgroundColor: neutralSwatch.color }"
-                        />
-                      </template>
-
-                      {{ neutralSwatch.label }}
-                    </UButton>
-
-                    <template #content>
-                      <div class="flex flex-col gap-2 w-72 p-2">
-                        <div v-for="section in backgroundSections" :key="section.label">
-                          <p class="text-[11px] font-semibold text-muted px-1 mb-1 select-none">
-                            {{ section.label }}
-                          </p>
-
-                          <div class="grid grid-cols-3 gap-1">
-                            <ThemePickerButton
-                              v-for="color in section.colors"
-                              :key="color"
-                              :label="color"
-                              :chip="paletteChip(color)"
-                              :selected="neutral === color"
-                              @click="selectPalette('neutral', color)"
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </template>
-                  </UPopover>
+                  <ThemePickerColorMenu alias="neutral" class="flex-1 min-w-0" />
 
                   <UButton
                     :icon="isCustomPalette('neutral') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
@@ -589,46 +454,7 @@ const shadowColor = computed({
                     <span class="text-[11px] text-muted w-13 shrink-0 capitalize select-none">{{ alias }}</span>
 
                     <UFieldGroup size="sm" class="flex flex-1 min-w-0">
-                      <UPopover :content="{ side: 'bottom', align: 'start' }" class="flex-1 min-w-0">
-                        <UButton
-                          color="neutral"
-                          variant="subtle"
-                          size="sm"
-                          block
-                          trailing-icon="i-lucide-chevron-down"
-                          class="capitalize"
-                        >
-                          <template #leading>
-                            <span
-                              class="inline-block size-3 rounded-full"
-                              :style="{ backgroundColor: `var(--color-${paletteChip(aliasValues[alias] || alias)}-500)` }"
-                            />
-                          </template>
-
-                          {{ aliasLabel(alias) }}
-                        </UButton>
-
-                        <template #content>
-                          <div class="flex flex-col gap-2 w-72 p-2">
-                            <div v-for="section in colorSections" :key="section.label">
-                              <p class="text-[11px] font-semibold text-muted px-1 mb-1 select-none">
-                                {{ section.label }}
-                              </p>
-
-                              <div class="grid grid-cols-3 gap-1">
-                                <ThemePickerButton
-                                  v-for="color in section.colors"
-                                  :key="color"
-                                  :label="color"
-                                  :chip="paletteChip(color)"
-                                  :selected="aliasValues[alias] === color"
-                                  @click="selectPalette(alias, color)"
-                                />
-                              </div>
-                            </div>
-                          </div>
-                        </template>
-                      </UPopover>
+                      <ThemePickerColorMenu :alias="alias" class="flex-1 min-w-0" />
 
                       <UButton
                         :icon="isCustomPalette(alias) ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index 55bd225d46..67530f4ca6 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -51,7 +51,7 @@ const viewTabs = [
     description="Customize Nuxt UI live: colors, radius, fonts and icons — then export only what you changed."
   >
     <template #content>
-      <div class="flex flex-row w-full h-full bg-neutral-300 dark:bg-neutral-900">
+      <div class="flex flex-row w-full h-full bg-neutral-200 dark:bg-neutral-950">
         <USidebar
           v-model:open="sidebarOpen"
           variant="floating"

From a38cba0de211fb2bb4238c8ff8ddd4c5b62285af Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 22:10:18 +0200
Subject: [PATCH 073/185] =?UTF-8?q?feat(docs):=20Landing=20and=20SaaS=20pr?=
 =?UTF-8?q?eviews=20faithful=20to=20the=20real=20templates=20=E2=80=94=20h?=
 =?UTF-8?q?ero=20effects,=20motion,=20section=20rhythm?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Landing ports the pixel-plasma hero and gradient glows as pure CSS, the
shimmer gradient title, staggered entrances and scroll reveals, glowing
primary buttons and the template's exact terminal. SaaS gains the header
beam, rising-stars CTA, framed hero media card and striped placeholders.
Everything rides semantic tokens so every studio theme restyles it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioViewLanding.vue   | 438 +++++++++++++-----
 .../theme-studio/ThemeStudioViewSaas.vue      | 209 ++++++++-
 2 files changed, 513 insertions(+), 134 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioViewLanding.vue b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
index 2b2db4a825..3db63c815a 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { AccordionItem, NavigationMenuItem } from '@nuxt/ui'
+import type { NavigationMenuItem } from '@nuxt/ui'
 
 const navItems: NavigationMenuItem[] = [
   { label: 'Features' },
-  { label: 'Metrics' },
-  { label: 'FAQ' }
+  { label: 'Metrics' }
 ]
 
 type TerminalSegment = {
@@ -14,65 +13,66 @@ type TerminalSegment = {
 
 const terminalLines: TerminalSegment[][] = [
   [
-    { text: '$ ', class: 'text-dimmed' },
+    { text: '$ ', class: 'text-muted' },
     { text: 'npx telemetry', class: 'text-highlighted' },
     { text: ' init', class: 'text-primary' }
   ],
-  [{ text: '→ Scanning service topology...', class: 'text-dimmed' }],
+  [{ text: '→ Scanning service topology...', class: 'text-muted' }],
   [
-    { text: '→ Found ', class: 'text-dimmed' },
+    { text: '→ Found ', class: 'text-muted' },
     { text: '23 services', class: 'text-highlighted' },
-    { text: ', ', class: 'text-dimmed' },
+    { text: ', ', class: 'text-muted' },
     { text: '847 endpoints', class: 'text-highlighted' },
-    { text: ', ', class: 'text-dimmed' },
+    { text: ', ', class: 'text-muted' },
     { text: '12 databases', class: 'text-highlighted' }
   ],
   [
-    { text: '→ Deploying collector agents ', class: 'text-dimmed' },
+    { text: '→ Deploying collector agents ', class: 'text-muted' },
     { text: '✓', class: 'text-success' }
   ],
   [
-    { text: '→ Baseline established in ', class: 'text-dimmed' },
-    { text: '340ms', class: 'text-success' }
+    { text: '→ Baseline established in ', class: 'text-muted' },
+    { text: '340ms', class: 'text-primary' }
   ],
+  [{ text: ' ' }],
   [
     { text: '✓ Live at ', class: 'text-success' },
-    { text: 'https://app.example.com/acme-corp', class: 'text-primary underline underline-offset-2' }
+    { text: 'https://app.example.com/acme-corp', class: 'text-info' }
   ]
 ]
 
 const logos = [
-  'i-lucide-triangle',
-  'i-lucide-github',
-  'i-lucide-pentagon',
-  'i-lucide-zap',
-  'i-lucide-aperture'
+  'i-simple-icons-vercel',
+  'i-simple-icons-github',
+  'i-simple-icons-linear',
+  'i-simple-icons-supabase',
+  'i-simple-icons-stripe'
 ]
 
 const features = [{
   icon: 'i-lucide-zap',
   title: 'Predictive Alerts',
-  description: 'Models trained on your own baselines flag anomalies minutes before they reach your SLOs.'
+  description: 'ML models trained on your baselines detect anomalies 4 minutes before they hit your SLOs.'
 }, {
   icon: 'i-lucide-radar',
   title: 'Topology Mapping',
-  description: 'Service dependencies discovered with zero config, so you see how one deploy ripples through checkout.'
+  description: 'Auto-discovers service dependencies with zero config. See how a deploy in auth-service ripples through checkout.'
 }, {
   icon: 'i-lucide-layers',
   title: 'Unified Telemetry',
-  description: 'Logs, metrics and traces share one query language. Stop context-switching, start correlating.'
+  description: 'Logs, metrics, and traces in one query language. Stop context-switching. Start correlating.'
 }, {
   icon: 'i-lucide-git-commit-horizontal',
   title: 'Deploy Tracking',
-  description: 'Every deploy is correlated with performance changes, so you know which commit caused the regression.'
+  description: 'Every deploy is automatically correlated with performance changes. Know which commit caused the regression.'
 }, {
   icon: 'i-lucide-filter',
   title: 'Smart Sampling',
-  description: 'Interesting traces are retained and noise is dropped, cutting storage costs without losing signal.'
+  description: 'AI-driven sampling retains interesting traces and drops noise. Cut storage costs 10× without losing signal.'
 }, {
   icon: 'i-lucide-notebook-pen',
   title: 'Team Notebooks',
-  description: 'Collaborative investigation notebooks turn incident debugging into reusable runbooks.'
+  description: 'Collaborative investigation notebooks that turn incident debugging into reusable runbooks.'
 }]
 
 const metrics = [
@@ -82,24 +82,39 @@ const metrics = [
   { value: '4 min', label: 'Early warning', class: 'text-warning' }
 ]
 
-const faqItems: AccordionItem[] = [{
-  label: 'How long does setup take?',
-  content: 'Most teams are live in under five minutes. Run the init command, and the collector discovers your services, endpoints and databases automatically — no manual instrumentation required.'
-}, {
-  label: 'Do I need to change my code?',
-  content: 'No. The collector attaches at the infrastructure layer and works with OpenTelemetry out of the box. If you already emit traces, we ingest them as-is.'
-}, {
-  label: 'What does it cost at scale?',
-  content: 'Pricing is based on retained events after sampling, not raw ingest. Smart sampling keeps the interesting traces and drops the noise, so most teams pay for a fraction of their raw volume.'
-}, {
-  label: 'Can I self-host the platform?',
-  content: 'Yes. The full platform ships as a Helm chart for Kubernetes, with the same feature set as the cloud version and no phone-home requirements.'
-}, {
-  label: 'Is there a free tier?',
-  content: 'Free for up to 5 services with 7-day retention — no credit card required. Upgrade only when you need longer retention or more services.'
-}]
-
 const footerLinks = ['Docs', 'GitHub', 'Twitter', 'Status', 'Privacy']
+
+const copied = ref(false)
+let copyTimeout: ReturnType<typeof setTimeout> | undefined
+
+function copyCommand() {
+  navigator.clipboard?.writeText('npx telemetry init')
+  copied.value = true
+  clearTimeout(copyTimeout)
+  copyTimeout = setTimeout(() => {
+    copied.value = false
+  }, 2000)
+}
+
+onUnmounted(() => clearTimeout(copyTimeout))
+
+/** Fade-and-rise elements into view on scroll, like the template's `whileInView` motion. */
+const vReveal = {
+  mounted(el: HTMLElement, binding: { value?: number }) {
+    el.classList.add('landing-reveal')
+    if (binding.value) {
+      el.style.transitionDelay = `${binding.value}ms`
+    }
+
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry?.isIntersecting) {
+        el.classList.add('landing-revealed')
+        observer.disconnect()
+      }
+    }, { threshold: 0.3 })
+    observer.observe(el)
+  }
+}
 </script>
 
 <template>
@@ -107,14 +122,14 @@ const footerLinks = ['Docs', 'GitHub', 'Twitter', 'Status', 'Privacy']
     <!-- Header -->
     <header class="sticky top-0 z-10 border-b-[length:var(--studio-border-width,1px)] border-default bg-default/75 backdrop-blur">
       <div class="flex h-14 items-center justify-between gap-3 px-4 sm:px-6">
-        <div class="flex items-center gap-1.5">
+        <div class="flex items-center gap-1.5 sm:flex-1">
           <UIcon name="i-lucide-activity" class="size-5 text-primary shrink-0" />
           <span class="text-base font-bold text-highlighted">Telemetry</span>
         </div>
 
         <UNavigationMenu :items="navItems" variant="link" class="hidden sm:flex" />
 
-        <div class="flex items-center gap-1.5">
+        <div class="flex items-center justify-end gap-1.5 sm:flex-1">
           <UButton label="Sign in" color="neutral" variant="ghost" class="hidden sm:inline-flex" />
           <UButton label="Get started" color="neutral" />
         </div>
@@ -123,82 +138,122 @@ const footerLinks = ['Docs', 'GitHub', 'Twitter', 'Status', 'Privacy']
 
     <!-- Hero -->
     <UPageHero
-      title="Observe less. Understand more."
-      description="Map your entire system in real-time, surface anomalies before they cascade, and eliminate the dashboards you never needed."
       :ui="{
-        container: 'py-16 sm:py-24 lg:py-24 gap-8 sm:gap-12',
-        title: 'tracking-tighter',
+        container: 'relative z-10 py-16 sm:py-24 lg:py-32 gap-12 sm:gap-16',
+        wrapper: 'flex flex-col items-center',
+        title: 'sm:text-6xl lg:text-7xl tracking-tighter leading-[1.05]',
+        description: 'mt-5 max-w-xl mx-auto text-base sm:text-lg leading-relaxed text-default',
         links: 'gap-3'
       }"
     >
+      <template #top>
+        <div class="landing-pixels absolute inset-x-0 top-0 h-full opacity-15" aria-hidden="true" />
+        <div class="landing-glow absolute top-0 left-1/2 h-1/2 w-2/3 -translate-x-1/2" aria-hidden="true" />
+      </template>
+
       <template #headline>
-        <UBadge
-          label="v2.0 — Now with predictive alerting"
-          color="neutral"
-          variant="soft"
-          class="rounded-full px-3 py-1.5 gap-1.5"
-        >
-          <template #leading>
-            <UChip inset standalone :ui="{ base: 'animate-pulse ring-0' }" />
-          </template>
-        </UBadge>
+        <div class="landing-enter" style="animation-delay: 200ms">
+          <UBadge
+            label="v2.0 — Now with predictive alerting"
+            color="neutral"
+            variant="soft"
+            class="rounded-full px-3 py-1.5 gap-1.5 bg-elevated/50 backdrop-blur"
+          >
+            <template #leading>
+              <UChip inset standalone :ui="{ base: 'animate-pulse ring-0' }" />
+            </template>
+          </UBadge>
+        </div>
+      </template>
+
+      <template #title>
+        <span class="landing-enter inline-block" style="animation-delay: 350ms">
+          Observe less.
+          <br>
+          <span class="landing-shimmer bg-clip-text text-transparent">Understand more.</span>
+        </span>
+      </template>
+
+      <template #description>
+        <span class="landing-enter inline-block" style="animation-delay: 500ms">
+          Map your entire system in real-time, surface anomalies before they cascade, and eliminate the dashboards you never needed.
+        </span>
       </template>
 
       <template #links>
-        <UButton label="Start for free" size="xl" />
-        <UButton label="View demo" color="neutral" variant="soft" size="xl" />
+        <div class="landing-enter flex flex-wrap justify-center gap-3" style="animation-delay: 650ms">
+          <UButton label="Start for free" size="xl" class="landing-btn-glow" />
+          <UButton label="View demo" color="neutral" variant="soft" size="xl" />
+        </div>
       </template>
 
-      <div class="max-w-2xl mx-auto w-full">
-        <div class="rounded-xl border-[length:var(--studio-border-width,1px)] border-default bg-elevated/50 overflow-hidden font-mono text-xs sm:text-sm">
-          <div class="flex items-center gap-1.5 border-b-[length:var(--studio-border-width,1px)] border-default px-4 py-2.5">
-            <span class="size-2.5 rounded-full bg-error/60" />
-            <span class="size-2.5 rounded-full bg-warning/60" />
-            <span class="size-2.5 rounded-full bg-success/60" />
-            <span class="ms-2 text-dimmed text-xs">terminal</span>
+      <div class="landing-enter max-w-2xl mx-auto w-full" style="animation-delay: 850ms">
+        <div class="rounded-xl border-[length:var(--studio-border-width,1px)] border-default bg-elevated/50 backdrop-blur overflow-hidden">
+          <div class="flex items-center gap-1.5 border-b-[length:var(--studio-border-width,1px)] border-default p-4 sm:px-6">
+            <span class="size-2.5 rounded-full border-[length:var(--studio-border-width,1px)] border-default bg-muted" />
+            <span class="size-2.5 rounded-full border-[length:var(--studio-border-width,1px)] border-default bg-muted" />
+            <span class="size-2.5 rounded-full border-[length:var(--studio-border-width,1px)] border-default bg-muted" />
           </div>
 
-          <div class="flex flex-col gap-1.5 p-4 text-start">
-            <p v-for="(line, index) in terminalLines" :key="index" class="truncate">
+          <div class="min-h-[200px] p-5 sm:p-6 font-mono text-[13px] leading-[1.8] text-start">
+            <p
+              v-for="(line, index) in terminalLines"
+              :key="index"
+              class="landing-terminal-line truncate"
+              :style="{ animationDelay: `${1400 + index * 400}ms` }"
+            >
               <span v-for="(segment, segmentIndex) in line" :key="segmentIndex" :class="segment.class">{{ segment.text }}</span>
             </p>
           </div>
         </div>
       </div>
 
-      <UPageLogos
-        title="Trusted by engineering teams at"
-        :items="logos"
-        class="max-w-lg mx-auto w-full"
-        :ui="{
-          title: 'font-mono uppercase text-xs tracking-widest text-dimmed',
-          logo: 'text-muted size-6'
-        }"
-      />
+      <div class="landing-enter max-w-lg mx-auto w-full" style="animation-delay: 950ms">
+        <UPageLogos
+          title="Trusted by engineering teams at"
+          :items="logos"
+          :ui="{
+            title: 'font-mono uppercase text-xs tracking-[0.12em] text-dimmed',
+            logo: 'text-muted size-6'
+          }"
+        />
+      </div>
     </UPageHero>
 
     <!-- Features -->
     <UPageSection
-      headline="Capabilities"
-      title="Every signal, one surface."
-      description="No more tab-switching between metrics, traces, and logs. Correlate everything into a single explorable topology."
       :ui="{
-        root: 'py-16 sm:py-24',
-        headline: 'font-mono font-medium text-xs text-primary uppercase tracking-widest',
-        description: 'text-dimmed'
+        root: 'py-24 sm:py-32',
+        container: 'max-w-5xl',
+        headline: 'font-mono font-medium text-xs text-primary uppercase tracking-[0.12em]',
+        title: 'max-w-lg mx-auto',
+        description: 'max-w-md mx-auto text-dimmed'
       }"
     >
+      <template #headline>
+        <span v-reveal class="inline-block">Capabilities</span>
+      </template>
+
+      <template #title>
+        <span v-reveal="100" class="inline-block">Every signal, one surface.</span>
+      </template>
+
+      <template #description>
+        <span v-reveal="200" class="inline-block">No more tab-switching between metrics, traces, and logs. Correlate everything into a single explorable topology.</span>
+      </template>
+
       <div class="rounded-2xl border-[length:var(--studio-border-width,1px)] border-default bg-default overflow-hidden">
         <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-[var(--studio-border-width,1px)]">
           <UPageCard
-            v-for="feature in features"
+            v-for="(feature, index) in features"
             :key="feature.title"
+            v-reveal="index * 80"
             :icon="feature.icon"
             :title="feature.title"
             :description="feature.description"
-            class="rounded-none"
+            class="rounded-none duration-300 hover:bg-elevated/50"
             :ui="{
-              leading: 'mb-4 flex size-9 items-center justify-center rounded-lg bg-primary/10',
+              leading: 'mb-5 flex size-9 items-center justify-center rounded-lg bg-primary/10',
               title: 'text-sm tracking-tight',
               description: 'text-sm leading-relaxed text-dimmed'
             }"
@@ -209,87 +264,88 @@ const footerLinks = ['Docs', 'GitHub', 'Twitter', 'Status', 'Privacy']
 
     <!-- Metrics -->
     <UPageSection
-      headline="By the numbers"
-      title="Built for scale you haven't hit yet."
-      description="Process billions of events per day across thousands of production environments."
       :ui="{
-        root: 'py-16 sm:py-24',
-        headline: 'font-mono font-medium text-xs text-primary uppercase tracking-widest',
-        description: 'text-dimmed'
+        root: 'py-24 sm:py-32',
+        container: 'max-w-5xl',
+        headline: 'font-mono font-medium text-xs text-primary uppercase tracking-[0.12em]',
+        title: 'max-w-lg mx-auto',
+        description: 'max-w-md mx-auto text-dimmed'
       }"
     >
+      <template #headline>
+        <span v-reveal class="inline-block">By the numbers</span>
+      </template>
+
+      <template #title>
+        <span v-reveal="100" class="inline-block">Built for scale you haven't hit yet.</span>
+      </template>
+
+      <template #description>
+        <span v-reveal="200" class="inline-block">Process billions of events per day across thousands of production environments with an architecture designed for the workloads of 2030.</span>
+      </template>
+
       <div class="rounded-2xl border-[length:var(--studio-border-width,1px)] border-default bg-default overflow-hidden">
         <div class="grid grid-cols-2 xl:grid-cols-4 gap-[var(--studio-border-width,1px)]">
           <UPageCard
-            v-for="metric in metrics"
+            v-for="(metric, index) in metrics"
             :key="metric.label"
+            v-reveal="index * 80"
             :title="metric.value"
             :description="metric.label"
-            class="rounded-none"
+            class="rounded-none duration-300 hover:bg-elevated/50"
             :ui="{
               root: 'text-center',
               wrapper: 'items-center',
               title: ['text-3xl sm:text-4xl font-bold tracking-tight leading-none', metric.class],
-              description: 'font-mono text-xs uppercase tracking-wide text-dimmed mt-3'
+              description: 'font-mono text-xs uppercase tracking-[0.06em] text-dimmed mt-3'
             }"
           />
         </div>
       </div>
     </UPageSection>
 
-    <!-- FAQ -->
-    <UPageSection
-      headline="FAQ"
-      title="Questions, answered."
-      description="Everything you need to know before your first deploy."
-      :ui="{
-        root: 'py-16 sm:py-24',
-        container: 'max-w-3xl',
-        headline: 'font-mono font-medium text-xs text-primary uppercase tracking-widest',
-        description: 'text-dimmed'
-      }"
-    >
-      <UAccordion
-        :items="faqItems"
-        default-value="0"
-        :unmount-on-hide="false"
-        :ui="{
-          trigger: 'text-base text-highlighted',
-          body: 'text-muted leading-relaxed'
-        }"
-      />
-    </UPageSection>
-
     <!-- CTA -->
     <UPageCTA
       variant="naked"
-      title="Ready to stop firefighting?"
-      description="Free for up to 5 services. No credit card. Deploys in under a minute."
       :ui="{
-        root: 'py-16 sm:py-24',
-        container: 'max-w-3xl',
-        title: 'tracking-tighter',
-        description: 'text-dimmed'
+        root: 'py-24 sm:py-32',
+        container: 'max-w-3xl text-center',
+        title: 'lg:text-5xl tracking-tighter',
+        description: 'mx-auto max-w-sm leading-relaxed text-dimmed'
       }"
     >
+      <template #top>
+        <div class="landing-glow absolute bottom-0 left-1/2 h-1/2 w-2/3 -translate-x-1/2" aria-hidden="true" />
+      </template>
+
+      <template #title>
+        <span v-reveal class="inline-block">Ready to stop<br>firefighting?</span>
+      </template>
+
+      <template #description>
+        <span v-reveal="100" class="inline-block">Free for up to 5 services. No credit card. Deploys in under a minute.</span>
+      </template>
+
       <template #links>
-        <div class="flex flex-col items-center gap-4">
-          <UButton label="Start for free" size="xl" />
+        <div v-reveal="200" class="flex flex-col items-center justify-center gap-6">
+          <UButton label="Start for free" size="xl" class="landing-btn-glow" />
 
           <UButton
             label="npx telemetry init"
-            trailing-icon="i-lucide-copy"
+            :trailing-icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
             color="neutral"
             variant="subtle"
             size="xl"
-            class="font-mono font-light text-toned"
+            class="font-mono font-light text-toned gap-4"
+            :ui="{ trailingIcon: 'size-5' }"
+            @click="copyCommand"
           />
         </div>
       </template>
     </UPageCTA>
 
     <!-- Footer -->
-    <UFooter :ui="{ container: 'border-t-[length:var(--studio-border-width,1px)] border-default', right: 'gap-x-0 flex-wrap justify-end' }">
+    <UFooter :ui="{ container: 'border-t-[length:var(--studio-border-width,1px)] border-default lg:py-8', right: 'gap-x-0 flex-wrap justify-end' }">
       <template #left>
         <p class="text-sm text-dimmed">
           Built with Nuxt UI • © 2026
@@ -310,3 +366,129 @@ const footerLinks = ['Docs', 'GitHub', 'Twitter', 'Status', 'Privacy']
     </UFooter>
   </div>
 </template>
+
+<style scoped>
+/* Pixelated plasma backdrop — CSS stand-in for the template's HeroShaders (Plasma + Pixelate). */
+.landing-pixels {
+  pointer-events: none;
+  background-image:
+    radial-gradient(ellipse 80% 55% at 50% 0%, var(--ui-primary), transparent 70%),
+    radial-gradient(ellipse 45% 45% at 12% 18%, var(--ui-primary), transparent 70%),
+    radial-gradient(ellipse 45% 45% at 88% 28%, var(--ui-primary), transparent 70%);
+  mask-image:
+    repeating-linear-gradient(0deg, black 0 9px, transparent 9px 13px),
+    repeating-linear-gradient(90deg, black 0 9px, transparent 9px 13px),
+    linear-gradient(to bottom, black 20%, transparent 95%);
+  mask-composite: intersect;
+  animation: landing-plasma 16s ease-in-out infinite alternate;
+}
+
+@keyframes landing-plasma {
+  0% {
+    background-position: 0 0, 0 0, 0 0;
+  }
+  100% {
+    background-position: 0 2rem, 3rem 1rem, -3rem 2rem;
+  }
+}
+
+/* Radial primary glow — port of the template's GradientGlow component. */
+.landing-glow {
+  pointer-events: none;
+  background: radial-gradient(ellipse at center, color-mix(in oklch, var(--ui-primary) 6%, transparent) 0%, transparent 70%);
+}
+
+/* Shimmering gradient text on the hero title's second line. */
+.landing-shimmer {
+  background-image: linear-gradient(135deg, var(--ui-color-primary-700), var(--ui-color-primary-600), var(--ui-color-primary-500), var(--ui-color-primary-400), var(--ui-color-primary-500), var(--ui-color-primary-600), var(--ui-color-primary-700));
+  background-size: 200% auto;
+  animation: landing-shimmer 10s ease-in-out infinite alternate;
+}
+
+.dark .landing-shimmer {
+  background-image: linear-gradient(135deg, var(--ui-color-primary-400), var(--ui-color-primary-300), var(--ui-color-primary-200), var(--ui-color-primary-100), var(--ui-color-primary-200), var(--ui-color-primary-300), var(--ui-color-primary-400));
+}
+
+@keyframes landing-shimmer {
+  0% {
+    background-position: 0% center;
+  }
+  100% {
+    background-position: 200% center;
+  }
+}
+
+/* Glowing primary buttons — port of the template's app.config button compoundVariant. */
+.landing-btn-glow {
+  box-shadow: 0 0 20px color-mix(in oklch, var(--ui-primary) 25%, transparent);
+  transition: all 0.2s;
+}
+
+.landing-btn-glow:hover {
+  box-shadow: 0 0 30px color-mix(in oklch, var(--ui-primary) 35%, transparent);
+  transform: translateY(-1px);
+}
+
+.landing-btn-glow:active {
+  transform: translateY(0);
+}
+
+/* Hero entrance — port of the template's enter motion (fade + rise, staggered). */
+.landing-enter {
+  animation: landing-enter 0.6s ease both;
+}
+
+@keyframes landing-enter {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Terminal lines type in one at a time. */
+.landing-terminal-line {
+  animation: landing-terminal-line 0.4s ease both;
+}
+
+@keyframes landing-terminal-line {
+  from {
+    opacity: 0;
+    transform: translateX(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Scroll reveal — classes applied by the v-reveal directive. */
+.landing-reveal {
+  opacity: 0;
+  transform: translateY(16px);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+.landing-reveal.landing-revealed {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .landing-pixels,
+  .landing-shimmer,
+  .landing-enter,
+  .landing-terminal-line {
+    animation: none;
+  }
+
+  .landing-reveal {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}
+</style>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewSaas.vue b/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
index 193dc33783..6d94a33289 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
@@ -10,10 +10,12 @@ const navItems: NavigationMenuItem[] = [
 
 const heroLinks = [{
   label: 'Get started',
-  trailingIcon: 'i-lucide-arrow-right'
+  trailingIcon: 'i-lucide-arrow-right',
+  size: 'xl' as const
 }, {
   label: 'Use this template',
   icon: 'i-lucide-github',
+  size: 'xl' as const,
   color: 'neutral' as const,
   variant: 'subtle' as const
 }]
@@ -114,6 +116,12 @@ const testimonials = [{
 }, {
   quote: 'Perfect Lighthouse scores out of the box. Our Core Web Vitals improved dramatically just by switching to Nuxt UI components.',
   user: { name: 'Emily Zhang', description: 'Lead Architect at ScaleForce' }
+}, {
+  quote: 'The Tailwind Variants system makes customization so intuitive. We can override any component style while keeping the functionality intact.',
+  user: { name: 'James Wilson', description: 'DevOps Lead at CloudPro' }
+}, {
+  quote: 'From the SaaS template to production in days. The pre-built layouts, navigation and content structure accelerated our launch.',
+  user: { name: 'Lisa Patel', description: 'CEO at AutoScale' }
 }]
 
 const ctaLinks = [{
@@ -152,6 +160,40 @@ const footerColumns = [{
 }]
 
 const email = ref('')
+
+// Hero background beam fades in on mount, like the template's HeroBackground.
+const heroAppear = ref(false)
+const heroAppeared = ref(false)
+
+onMounted(() => {
+  setTimeout(() => {
+    heroAppear.value = true
+    setTimeout(() => {
+      heroAppeared.value = true
+    }, 1000)
+  }, 0)
+})
+
+// Rising stars behind the CTA, ported from the template's StarsBg.
+interface Star {
+  x: number
+  y: number
+  size: number
+}
+
+function generateStars(count: number): Star[] {
+  return Array.from({ length: count }, () => ({
+    x: Math.floor(Math.random() * 2000),
+    y: Math.floor(Math.random() * 2000),
+    size: Math.random() + 1
+  }))
+}
+
+const starLayers = [
+  { stars: generateStars(80), duration: 100, opacity: 1 },
+  { stars: generateStars(60), duration: 150, opacity: 0.75 },
+  { stars: generateStars(60), duration: 200, opacity: 0.5 }
+]
 </script>
 
 <template>
@@ -168,6 +210,7 @@ const email = ref('')
       <UNavigationMenu :items="navItems" variant="link" />
 
       <template #right>
+        <UButton icon="i-lucide-sun-moon" aria-label="Color mode" color="neutral" variant="ghost" />
         <UButton label="Sign in" color="neutral" variant="outline" class="hidden lg:inline-flex" />
         <UButton label="Sign up" color="neutral" trailing-icon="i-lucide-arrow-right" />
       </template>
@@ -177,6 +220,50 @@ const email = ref('')
       description="Build production-ready SaaS applications with powerful components, authentication flows and enterprise features."
       :links="heroLinks"
     >
+      <template #top>
+        <!-- Template's HeroBackground: a primary beam along the header with a fading glow. -->
+        <div
+          class="absolute w-full -top-px transition-all text-primary shrink-0 pointer-events-none"
+          :class="[
+            heroAppear ? '' : 'opacity-0',
+            heroAppeared ? 'duration-[400ms]' : 'duration-1000'
+          ]"
+        >
+          <svg viewBox="0 0 1440 181" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <mask id="saas-hero-mask" fill="white">
+              <path d="M0 0H1440V181H0V0Z" />
+            </mask>
+            <path d="M0 0H1440V181H0V0Z" fill="url(#saas-hero-glow)" fill-opacity="0.22" />
+            <path d="M0 2H1440V-2H0V2Z" fill="url(#saas-hero-beam)" mask="url(#saas-hero-mask)" />
+            <defs>
+              <linearGradient
+                id="saas-hero-glow"
+                x1="720"
+                y1="0"
+                x2="720"
+                y2="181"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop stop-color="currentColor" />
+                <stop offset="1" stop-color="currentColor" stop-opacity="0" />
+              </linearGradient>
+              <linearGradient
+                id="saas-hero-beam"
+                x1="0"
+                y1="90.5"
+                x2="1440"
+                y2="90.5"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop stop-color="currentColor" stop-opacity="0" />
+                <stop offset="0.395" stop-color="currentColor" />
+                <stop offset="1" stop-color="currentColor" stop-opacity="0" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+      </template>
+
       <template #headline>
         <UBadge variant="subtle" icon="i-lucide-sparkles">
           Nuxt UI v4 is out
@@ -186,6 +273,21 @@ const email = ref('')
       <template #title>
         Ship your <span class="text-primary">SaaS</span> at light speed
       </template>
+
+      <!-- Template's PromotionalVideo: a framed media card below the hero copy. -->
+      <UPageCard variant="subtle" class="rounded-2xl">
+        <div class="relative aspect-video w-full rounded-xl overflow-hidden bg-elevated flex items-center justify-center">
+          <div class="absolute inset-0" style="background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--ui-primary) 15%, transparent), transparent 70%)" />
+          <UButton
+            icon="i-lucide-play"
+            size="xl"
+            color="neutral"
+            variant="outline"
+            aria-label="Play video"
+            class="rounded-full"
+          />
+        </div>
+      </UPageCard>
     </UPageHero>
 
     <UPageSection
@@ -197,9 +299,26 @@ const email = ref('')
       :reverse="section.reverse"
       :features="section.features"
     >
-      <div class="aspect-video w-full rounded-lg bg-elevated/50 ring ring-default flex items-center justify-center">
-        <UIcon name="i-lucide-image" class="size-8 text-dimmed" />
-      </div>
+      <!-- Template's ImagePlaceholder: a framed card with a diagonal-stripes pattern. -->
+      <UPageCard variant="subtle">
+        <div class="relative overflow-hidden rounded-sm border border-dashed border-accented opacity-75 px-4 flex items-center justify-center aspect-video">
+          <svg class="absolute inset-0 h-full w-full stroke-inverted/10" fill="none">
+            <defs>
+              <pattern
+                :id="`saas-stripes-${index}`"
+                x="0"
+                y="0"
+                width="10"
+                height="10"
+                patternUnits="userSpaceOnUse"
+              >
+                <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
+              </pattern>
+            </defs>
+            <rect stroke="none" :fill="`url(#saas-stripes-${index})`" width="100%" height="100%" />
+          </svg>
+        </div>
+      </UPageCard>
     </UPageSection>
 
     <UPageSection
@@ -235,7 +354,7 @@ const email = ref('')
       title="Join thousands building with Nuxt UI"
       description="See why developers choose Nuxt UI to ship their SaaS applications faster and with more confidence."
     >
-      <UPageColumns class="lg:columns-2">
+      <UPageColumns class="lg:columns-2 xl:columns-3">
         <UPageCard
           v-for="testimonial in testimonials"
           :key="testimonial.user.name"
@@ -261,7 +380,55 @@ const email = ref('')
       description="Join thousands of developers building with Nuxt and Nuxt UI. Get this template and start shipping today."
       :links="ctaLinks"
       variant="naked"
-    />
+      class="overflow-hidden"
+    >
+      <!-- Template's StarsBg: rising primary stars under a radial glow. -->
+      <div class="absolute pointer-events-none z-[-1] inset-y-0 inset-x-5 sm:inset-x-7 lg:inset-x-9 overflow-hidden">
+        <svg class="absolute inset-0 pointer-events-none size-full" viewBox="0 0 1017 181" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
+          <g opacity="0.5">
+            <path d="M0 0H1017V181H0V0Z" fill="url(#saas-stars-glow)" fill-opacity="0.22" />
+          </g>
+          <defs>
+            <radialGradient
+              id="saas-stars-glow"
+              cx="0"
+              cy="0"
+              r="1"
+              gradientUnits="userSpaceOnUse"
+              gradientTransform="translate(508.999 19.5) rotate(90.177) scale(161.501 509.002)"
+            >
+              <stop stop-color="var(--ui-primary)" />
+              <stop offset="1" stop-color="var(--ui-primary)" stop-opacity="0" />
+            </radialGradient>
+          </defs>
+        </svg>
+
+        <div class="stars size-full absolute inset-x-0 top-0">
+          <div
+            v-for="(layer, index) in starLayers"
+            :key="index"
+            class="star-layer"
+            :style="{
+              '--star-duration': `${layer.duration}s`,
+              '--star-opacity': layer.opacity
+            }"
+          >
+            <div
+              v-for="(star, starIndex) in layer.stars"
+              :key="starIndex"
+              class="absolute rounded-full bg-primary"
+              :style="{
+                left: `${star.x}px`,
+                top: `${star.y}px`,
+                width: `${star.size}px`,
+                height: `${star.size}px`,
+                opacity: 'var(--star-opacity)'
+              }"
+            />
+          </div>
+        </div>
+      </div>
+    </UPageCTA>
 
     <USeparator icon="i-lucide-rocket" class="h-px" />
 
@@ -295,3 +462,33 @@ const email = ref('')
     </UFooter>
   </div>
 </template>
+
+<style scoped>
+.stars {
+  left: 50%;
+  transform: translate(-50%);
+  mask-image: linear-gradient(180deg,
+      rgba(217, 217, 217, 0) 0%,
+      rgba(217, 217, 217, 0.8) 25%,
+      #d9d9d9 50%,
+      rgba(217, 217, 217, 0.8) 75%,
+      rgba(217, 217, 217, 0) 100%);
+  mask-size: cover;
+}
+
+.star-layer {
+  animation: risingStarsAnimation linear infinite;
+  animation-duration: var(--star-duration);
+  will-change: transform;
+}
+
+@keyframes risingStarsAnimation {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(-2000px);
+  }
+}
+</style>

From 1beaa02a022e2ac1eedefeed2c27d82605170a0d Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 22:26:01 +0200
Subject: [PATCH 074/185] =?UTF-8?q?fix(docs):=20landing=20polish=20?=
 =?UTF-8?q?=E2=80=94=20glass=20badge=20per=20template,=20pinned=20solid=20?=
 =?UTF-8?q?CTAs,=20centered=20pre-headers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The section headline slot wrapper is display:block (the theme's flex only
activates via the headline prop), so justify-center was inert.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/theme-studio/ThemeStudioViewLanding.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioViewLanding.vue b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
index 3db63c815a..1886b9884a 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
@@ -157,7 +157,7 @@ const vReveal = {
             label="v2.0 — Now with predictive alerting"
             color="neutral"
             variant="soft"
-            class="rounded-full px-3 py-1.5 gap-1.5 bg-elevated/50 backdrop-blur"
+            class="rounded-full px-3 py-1.5 gap-1.5 bg-white/5 backdrop-blur"
           >
             <template #leading>
               <UChip inset standalone :ui="{ base: 'animate-pulse ring-0' }" />
@@ -182,7 +182,7 @@ const vReveal = {
 
       <template #links>
         <div class="landing-enter flex flex-wrap justify-center gap-3" style="animation-delay: 650ms">
-          <UButton label="Start for free" size="xl" class="landing-btn-glow" />
+          <UButton label="Start for free" variant="solid" size="xl" class="landing-btn-glow" />
           <UButton label="View demo" color="neutral" variant="soft" size="xl" />
         </div>
       </template>
@@ -225,7 +225,7 @@ const vReveal = {
       :ui="{
         root: 'py-24 sm:py-32',
         container: 'max-w-5xl',
-        headline: 'font-mono font-medium text-xs text-primary uppercase tracking-[0.12em]',
+        headline: 'text-center font-mono font-medium text-xs text-primary uppercase tracking-[0.12em]',
         title: 'max-w-lg mx-auto',
         description: 'max-w-md mx-auto text-dimmed'
       }"
@@ -267,7 +267,7 @@ const vReveal = {
       :ui="{
         root: 'py-24 sm:py-32',
         container: 'max-w-5xl',
-        headline: 'font-mono font-medium text-xs text-primary uppercase tracking-[0.12em]',
+        headline: 'text-center font-mono font-medium text-xs text-primary uppercase tracking-[0.12em]',
         title: 'max-w-lg mx-auto',
         description: 'max-w-md mx-auto text-dimmed'
       }"
@@ -328,7 +328,7 @@ const vReveal = {
 
       <template #links>
         <div v-reveal="200" class="flex flex-col items-center justify-center gap-6">
-          <UButton label="Start for free" size="xl" class="landing-btn-glow" />
+          <UButton label="Start for free" variant="solid" size="xl" class="landing-btn-glow" />
 
           <UButton
             label="npx telemetry init"

From f54a6769f7773d36e58ae28f6202598a9325ae86 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 22:27:16 +0200
Subject: [PATCH 075/185] =?UTF-8?q?feat(docs):=20=3Fstudio=20query=20param?=
 =?UTF-8?q?=20=E2=80=94=20the=20open=20studio=20survives=20reloads=20and?=
 =?UTF-8?q?=20is=20linkable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/theme-studio/ThemeStudioModal.vue    | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index 67530f4ca6..1131c086a1 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -4,11 +4,24 @@ const { reset, style, studioOpen: open } = useThemeStudio()
 const { modes, mode } = useTheme()
 const colorMode = useColorMode()
 
+const route = useRoute()
+const router = useRouter()
+
 // Resolved AFTER mount: the preference is client-only, and hydration adopts
 // SSR attributes without patching — a post-mount flip is a real update.
 const mounted = ref(false)
 onMounted(() => {
   mounted.value = true
+
+  // ?studio survives reloads and makes an open studio linkable.
+  if (route.query.studio !== undefined) {
+    open.value = true
+  }
+})
+
+watch(open, (isOpen) => {
+  const { studio: _studio, ...query } = route.query
+  router.replace({ query: isOpen ? { ...query, studio: null } : query })
 })
 
 watch(open, (isOpen) => {

From dc2cb7d67e40147a9057de0ce9b7ef85af290718 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 22:33:16 +0200
Subject: [PATCH 076/185] fix(docs): badge blur freed from the entrance
 animation's backdrop root; shade slider dots lead in the label column;
 sidebar footer corners rounded
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The enter animation now fills backwards — a retained transform, even an
identity matrix, forms a backdrop root that blinds children's
backdrop-blur.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../app/components/theme-studio/ThemeStudioBento.vue |  2 +-
 .../app/components/theme-studio/ThemeStudioModal.vue |  2 +-
 .../theme-studio/ThemeStudioShadeSlider.vue          | 12 +++++++-----
 .../theme-studio/ThemeStudioViewLanding.vue          |  6 ++++--
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioBento.vue b/docs/app/components/theme-studio/ThemeStudioBento.vue
index 18466ea728..a970495cfa 100644
--- a/docs/app/components/theme-studio/ThemeStudioBento.vue
+++ b/docs/app/components/theme-studio/ThemeStudioBento.vue
@@ -118,7 +118,7 @@ function showToast() {
 </script>
 
 <template>
-  <div class="columns-1 md:columns-2 xl:columns-3 gap-4 space-y-4 p-4 sm:p-6">
+  <div class="columns-1 md:columns-2 xl:columns-3 gap-4 space-y-4 p-4">
     <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
       <p class="text-xs font-semibold text-muted uppercase tracking-wide">
         Buttons
diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index 1131c086a1..c12cb654b2 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -69,7 +69,7 @@ const viewTabs = [
           v-model:open="sidebarOpen"
           variant="floating"
           :style="{ '--sidebar-width': '21rem' }"
-          :ui="{ container: 'pe-0', header: 'bg-elevated/50', body: 'p-0 gap-0 bg-default', footer: 'bg-elevated/50', inner: [chromeShadow, 'bg-default'] }"
+          :ui="{ container: 'pe-0', header: 'bg-elevated/50 rounded-t-lg', body: 'p-0 gap-0 bg-default', footer: 'bg-elevated/50 rounded-b-lg', inner: [chromeShadow, 'bg-default'] }"
         >
           <template #header>
             <Logo class="w-auto h-6 shrink-0 mr-auto" />
diff --git a/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue b/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue
index fc68146398..77deac6f3f 100644
--- a/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue
+++ b/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue
@@ -13,14 +13,16 @@ const index = defineModel<number>({ required: true })
 
 <template>
   <div class="flex items-center gap-2">
-    <UIcon :name="mode === 'light' ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3.5 text-muted shrink-0" />
+    <span class="w-13 shrink-0 flex items-center gap-1.5">
+      <UIcon :name="mode === 'light' ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3.5 text-muted shrink-0" />
+      <span
+        class="h-3 grow shrink-0 rounded-sm ring ring-default"
+        :style="{ backgroundColor: `var(--color-${chip}-${SHADES[index]})` }"
+      />
+    </span>
 
     <USlider v-model="index" :min="0" :max="SHADES.length - 1" :step="1" size="sm" />
 
-    <span
-      class="size-4 shrink-0 rounded-sm ring ring-default"
-      :style="{ backgroundColor: `var(--color-${chip}-${SHADES[index]})` }"
-    />
     <span class="text-[11px] text-dimmed font-mono w-7 text-right shrink-0">{{ SHADES[index] }}</span>
   </div>
 </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewLanding.vue b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
index 1886b9884a..84743a2762 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
@@ -435,7 +435,9 @@ const vReveal = {
 
 /* Hero entrance — port of the template's enter motion (fade + rise, staggered). */
 .landing-enter {
-  animation: landing-enter 0.6s ease both;
+  /* backwards, not both: a retained transform (even identity) would form a
+     backdrop root and blind children's backdrop-blur after the entrance */
+  animation: landing-enter 0.6s ease backwards;
 }
 
 @keyframes landing-enter {
@@ -445,7 +447,7 @@ const vReveal = {
   }
   to {
     opacity: 1;
-    transform: translateY(0);
+    transform: none;
   }
 }
 

From 5b7c032a0e6c9e7bc7e21431677671ef3ed2c360 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 22:36:28 +0200
Subject: [PATCH 077/185] feat(docs): curve editor endpoints wear the ramp's 50
 and 950 colors

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioCurveEditor.vue   | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
index 2d4d806582..a1a2da8475 100644
--- a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
@@ -197,8 +197,23 @@ function onPointerUp(event: PointerEvent) {
     <circle :cx="toX(curve.p1x)" :cy="toHandleY(curve.p1y)" r="4" class="fill-(--ui-bg) stroke-(--ui-text-muted)" stroke-width="1.25" />
     <circle :cx="toX(curve.p2x)" :cy="toHandleY(curve.p2y)" r="4" class="fill-(--ui-bg) stroke-(--ui-text-muted)" stroke-width="1.25" />
 
-    <!-- endpoints -->
-    <circle :cx="toX(0)" :cy="toHandleY(curve.y0)" r="4.5" class="fill-(--ui-text-highlighted)" />
-    <circle :cx="toX(1)" :cy="toHandleY(curve.y1)" r="4.5" class="fill-(--ui-text-highlighted)" />
+    <!-- endpoints, filled with the ramp's 50 and 950 so the drag targets show
+         what they steer -->
+    <circle
+      :cx="toX(0)"
+      :cy="toHandleY(curve.y0)"
+      r="4.5"
+      :fill="stopColors?.[0] || 'currentColor'"
+      class="stroke-(--ui-text-highlighted)"
+      stroke-width="1.5"
+    />
+    <circle
+      :cx="toX(1)"
+      :cy="toHandleY(curve.y1)"
+      r="4.5"
+      :fill="stopColors?.[stopColors.length - 1] || 'currentColor'"
+      class="stroke-(--ui-text-highlighted)"
+      stroke-width="1.5"
+    />
   </svg>
 </template>

From ad2f3d59ed239ea5e0a4cdcde138f87b6350713e Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 22:38:09 +0200
Subject: [PATCH 078/185] =?UTF-8?q?fix(docs):=20sidebar=20slot=20rounding?=
 =?UTF-8?q?=20scoped=20to=20desktop=20=E2=80=94=20the=20mobile=20sheet=20i?=
 =?UTF-8?q?s=20square?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/components/theme-studio/ThemeStudioModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index c12cb654b2..24d6b26904 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -69,7 +69,7 @@ const viewTabs = [
           v-model:open="sidebarOpen"
           variant="floating"
           :style="{ '--sidebar-width': '21rem' }"
-          :ui="{ container: 'pe-0', header: 'bg-elevated/50 rounded-t-lg', body: 'p-0 gap-0 bg-default', footer: 'bg-elevated/50 rounded-b-lg', inner: [chromeShadow, 'bg-default'] }"
+          :ui="{ container: 'pe-0', header: 'bg-elevated/50 lg:rounded-t-lg', body: 'p-0 gap-0 bg-default', footer: 'bg-elevated/50 lg:rounded-b-lg', inner: [chromeShadow, 'bg-default'] }"
         >
           <template #header>
             <Logo class="w-auto h-6 shrink-0 mr-auto" />

From 6ed248b597c671c26abf4761265a508c549561db Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 22:51:38 +0200
Subject: [PATCH 079/185] =?UTF-8?q?refactor(docs):=20retire=20the=20border?=
 =?UTF-8?q?-width=20class=20machinery=20=E2=80=94=20widths=20ride=20the=20?=
 =?UTF-8?q?default-width=20variables=20everywhere?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ringFragments and its five width maps (~200 lines), the frame width
enumeration, the widthAsVariables export/import split and every
var-length border/ring class in the preview markup are gone: the docs
build compiles --default-border-width/--default-ring-width onto the
studio variable, so live preview and exports use the same mechanism.
Legacy pastes get their width tokens scrubbed and frame literals
renormalized so old exports still import cleanly.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioBento.vue         |   2 +-
 .../theme-studio/ThemeStudioControls.vue      |  30 +--
 .../theme-studio/ThemeStudioViewChat.vue      |   4 +-
 .../theme-studio/ThemeStudioViewDashboard.vue |   6 +-
 .../theme-studio/ThemeStudioViewLanding.vue   |  18 +-
 .../theme-studio/ThemeStudioViewSaas.vue      |   2 +-
 docs/app/utils/theme-engine/export.ts         |   2 +-
 docs/app/utils/theme-engine/import.ts         |  65 +++++-
 docs/app/utils/theme-engine/styles.ts         | 200 +++---------------
 test/utils/theme-engine.spec.ts               |  80 +++----
 10 files changed, 155 insertions(+), 254 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioBento.vue b/docs/app/components/theme-studio/ThemeStudioBento.vue
index a970495cfa..e0b86514be 100644
--- a/docs/app/components/theme-studio/ThemeStudioBento.vue
+++ b/docs/app/components/theme-studio/ThemeStudioBento.vue
@@ -281,7 +281,7 @@ function showToast() {
         Table
       </p>
 
-      <UTable :data="invoices" :columns="invoiceColumns" class="border-[length:var(--studio-border-width,1px)] border-default rounded-md" />
+      <UTable :data="invoices" :columns="invoiceColumns" class="border border-default rounded-md" />
     </UCard>
 
     <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 540e532a52..749ab3fe56 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -350,11 +350,11 @@ const shadowColor = computed({
       :ui="{ content: 'px-4', header: 'px-6' }"
       :items="groupItems"
       :unmount-on-hide="false"
-      class="border-y-[length:var(--studio-border-width,1px)] border-default"
+      class="border-y border-default"
     >
       <template #colors>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <UCollapsible v-model:open="openSections.primary" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+          <UCollapsible v-model:open="openSections.primary" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
                 <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
@@ -392,7 +392,7 @@ const shadowColor = computed({
             </template>
           </UCollapsible>
 
-          <UCollapsible v-model:open="openSections.neutral" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+          <UCollapsible v-model:open="openSections.neutral" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
                 <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
@@ -431,7 +431,7 @@ const shadowColor = computed({
             </template>
           </UCollapsible>
 
-          <UCollapsible v-model:open="openSections.semantic" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+          <UCollapsible v-model:open="openSections.semantic" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
                 <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
@@ -480,7 +480,7 @@ const shadowColor = computed({
 
       <template #style>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <UCollapsible v-model:open="openSections.radius" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+          <UCollapsible v-model:open="openSections.radius" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
                 <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
@@ -511,7 +511,7 @@ const shadowColor = computed({
             </template>
           </UCollapsible>
 
-          <UCollapsible v-model:open="openSections.sizing" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+          <UCollapsible v-model:open="openSections.sizing" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
                 <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
@@ -539,7 +539,7 @@ const shadowColor = computed({
             </template>
           </UCollapsible>
 
-          <UCollapsible v-model:open="openSections.defaults" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+          <UCollapsible v-model:open="openSections.defaults" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
                 <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
@@ -555,6 +555,7 @@ const shadowColor = computed({
                     v-model="groupVariants[field.key].value"
                     size="sm"
                     color="neutral"
+                    variant="subtle"
                     icon="i-lucide-layers"
                     :items="field.items"
                     class="flex-1"
@@ -568,6 +569,7 @@ const shadowColor = computed({
                     v-model="defaultSize"
                     size="sm"
                     color="neutral"
+                    variant="subtle"
                     icon="i-lucide-proportions"
                     :items="defaultSizeItems"
                     class="flex-1"
@@ -577,7 +579,7 @@ const shadowColor = computed({
             </template>
           </UCollapsible>
 
-          <UCollapsible v-model:open="openSections.shadows" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+          <UCollapsible v-model:open="openSections.shadows" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
                 <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
@@ -638,7 +640,7 @@ const shadowColor = computed({
             </template>
           </UCollapsible>
 
-          <UCollapsible v-model:open="openSections.innerShadows" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+          <UCollapsible v-model:open="openSections.innerShadows" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
                 <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
@@ -699,7 +701,7 @@ const shadowColor = computed({
             </template>
           </UCollapsible>
 
-          <UCollapsible v-model:open="openSections.borders" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+          <UCollapsible v-model:open="openSections.borders" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
                 <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
@@ -768,7 +770,7 @@ const shadowColor = computed({
             v-model:open="openSections[`tokens-${group.key}`]"
             as="fieldset"
             :unmount-on-hide="false"
-            class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5"
+            class="rounded-md ring ring-default bg-default p-2.5"
           >
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
@@ -797,7 +799,7 @@ const shadowColor = computed({
 
       <template #general>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <UCollapsible v-model:open="openSections.font" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+          <UCollapsible v-model:open="openSections.font" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
                 <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
@@ -819,6 +821,7 @@ const shadowColor = computed({
                   v-model="font"
                   size="sm"
                   color="neutral"
+                  variant="subtle"
                   icon="i-lucide-type"
                   :items="fonts"
                   class="w-full"
@@ -827,7 +830,7 @@ const shadowColor = computed({
             </template>
           </UCollapsible>
 
-          <UCollapsible v-model:open="openSections.icons" as="fieldset" :unmount-on-hide="false" class="rounded-md ring-[length:var(--studio-border-width,1px)] ring-default bg-default p-2.5">
+          <UCollapsible v-model:open="openSections.icons" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
                 <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
@@ -849,6 +852,7 @@ const shadowColor = computed({
                   v-model="icon"
                   size="sm"
                   color="neutral"
+                  variant="subtle"
                   :icon="icons.find(i => i.value === icon)?.icon"
                   :items="icons"
                   class="w-full capitalize"
diff --git a/docs/app/components/theme-studio/ThemeStudioViewChat.vue b/docs/app/components/theme-studio/ThemeStudioViewChat.vue
index af11231765..421416bdd6 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewChat.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewChat.vue
@@ -47,7 +47,7 @@ const messages: UIMessage[] = [{
 
 <template>
   <div class="h-full flex bg-default overflow-hidden">
-    <aside class="hidden md:flex w-56 shrink-0 flex-col gap-2 border-e-[length:var(--studio-border-width,1px)] border-default bg-elevated/25 p-3 min-h-0">
+    <aside class="hidden md:flex w-56 shrink-0 flex-col gap-2 border-e border-default bg-elevated/25 p-3 min-h-0">
       <div class="flex items-center gap-1.5 px-1.5 py-1">
         <UIcon name="i-lucide-message-circle" class="size-5 text-primary shrink-0" />
         <span class="text-lg font-bold text-highlighted">Chat</span>
@@ -71,7 +71,7 @@ const messages: UIMessage[] = [{
     </aside>
 
     <div class="flex-1 flex flex-col min-w-0 min-h-0">
-      <div class="h-12 shrink-0 flex items-center justify-between gap-2 border-b-[length:var(--studio-border-width,1px)] border-default px-4">
+      <div class="h-12 shrink-0 flex items-center justify-between gap-2 border-b border-default px-4">
         <p class="text-sm font-medium text-highlighted truncate">
           Building a dashboard with Nuxt UI
         </p>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue b/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
index 415faa5158..e7a4320d99 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
@@ -162,7 +162,7 @@ const salesColumns: TableColumn<Sale>[] = [{
       collapsible
       resizable
       class="bg-elevated/25"
-      :ui="{ root: 'flex min-h-0', footer: 'border-t-[length:var(--studio-border-width,1px)] border-default' }"
+      :ui="{ root: 'flex min-h-0', footer: 'border-t border-default' }"
     >
       <template #header="{ collapsed }">
         <UDropdownMenu
@@ -339,8 +339,8 @@ const salesColumns: TableColumn<Sale>[] = [{
             base: 'table-fixed border-separate border-spacing-0',
             thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
             tbody: '[&>tr]:last:[&>td]:border-b-0',
-            th: 'first:rounded-l-lg last:rounded-r-lg border-y-[length:var(--studio-border-width,1px)] border-default first:border-l-[length:var(--studio-border-width,1px)] last:border-r-[length:var(--studio-border-width,1px)]',
-            td: 'border-b-[length:var(--studio-border-width,1px)] border-default'
+            th: 'first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l-[length:var(--studio-border-width,1px)] last:border-r-[length:var(--studio-border-width,1px)]',
+            td: 'border-b border-default'
           }"
         />
       </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewLanding.vue b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
index 84743a2762..7081d232fe 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
@@ -120,7 +120,7 @@ const vReveal = {
 <template>
   <div class="h-full overflow-y-auto bg-default">
     <!-- Header -->
-    <header class="sticky top-0 z-10 border-b-[length:var(--studio-border-width,1px)] border-default bg-default/75 backdrop-blur">
+    <header class="sticky top-0 z-10 border-b border-default bg-default/75 backdrop-blur">
       <div class="flex h-14 items-center justify-between gap-3 px-4 sm:px-6">
         <div class="flex items-center gap-1.5 sm:flex-1">
           <UIcon name="i-lucide-activity" class="size-5 text-primary shrink-0" />
@@ -188,11 +188,11 @@ const vReveal = {
       </template>
 
       <div class="landing-enter max-w-2xl mx-auto w-full" style="animation-delay: 850ms">
-        <div class="rounded-xl border-[length:var(--studio-border-width,1px)] border-default bg-elevated/50 backdrop-blur overflow-hidden">
-          <div class="flex items-center gap-1.5 border-b-[length:var(--studio-border-width,1px)] border-default p-4 sm:px-6">
-            <span class="size-2.5 rounded-full border-[length:var(--studio-border-width,1px)] border-default bg-muted" />
-            <span class="size-2.5 rounded-full border-[length:var(--studio-border-width,1px)] border-default bg-muted" />
-            <span class="size-2.5 rounded-full border-[length:var(--studio-border-width,1px)] border-default bg-muted" />
+        <div class="rounded-xl border border-default bg-elevated/50 backdrop-blur overflow-hidden">
+          <div class="flex items-center gap-1.5 border-b border-default p-4 sm:px-6">
+            <span class="size-2.5 rounded-full border border-default bg-muted" />
+            <span class="size-2.5 rounded-full border border-default bg-muted" />
+            <span class="size-2.5 rounded-full border border-default bg-muted" />
           </div>
 
           <div class="min-h-[200px] p-5 sm:p-6 font-mono text-[13px] leading-[1.8] text-start">
@@ -242,7 +242,7 @@ const vReveal = {
         <span v-reveal="200" class="inline-block">No more tab-switching between metrics, traces, and logs. Correlate everything into a single explorable topology.</span>
       </template>
 
-      <div class="rounded-2xl border-[length:var(--studio-border-width,1px)] border-default bg-default overflow-hidden">
+      <div class="rounded-2xl border border-default bg-default overflow-hidden">
         <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-[var(--studio-border-width,1px)]">
           <UPageCard
             v-for="(feature, index) in features"
@@ -284,7 +284,7 @@ const vReveal = {
         <span v-reveal="200" class="inline-block">Process billions of events per day across thousands of production environments with an architecture designed for the workloads of 2030.</span>
       </template>
 
-      <div class="rounded-2xl border-[length:var(--studio-border-width,1px)] border-default bg-default overflow-hidden">
+      <div class="rounded-2xl border border-default bg-default overflow-hidden">
         <div class="grid grid-cols-2 xl:grid-cols-4 gap-[var(--studio-border-width,1px)]">
           <UPageCard
             v-for="(metric, index) in metrics"
@@ -345,7 +345,7 @@ const vReveal = {
     </UPageCTA>
 
     <!-- Footer -->
-    <UFooter :ui="{ container: 'border-t-[length:var(--studio-border-width,1px)] border-default lg:py-8', right: 'gap-x-0 flex-wrap justify-end' }">
+    <UFooter :ui="{ container: 'border-t border-default lg:py-8', right: 'gap-x-0 flex-wrap justify-end' }">
       <template #left>
         <p class="text-sm text-dimmed">
           Built with Nuxt UI • © 2026
diff --git a/docs/app/components/theme-studio/ThemeStudioViewSaas.vue b/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
index 6d94a33289..f75dd6d4d6 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
@@ -432,7 +432,7 @@ const starLayers = [
 
     <USeparator icon="i-lucide-rocket" class="h-px" />
 
-    <UFooter :ui="{ top: 'border-b-[length:var(--studio-border-width,1px)] border-default' }">
+    <UFooter :ui="{ top: 'border-b border-default' }">
       <template #top>
         <UContainer>
           <UFooterColumns :columns="footerColumns">
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index d73f74d208..211ed866d5 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -158,7 +158,7 @@ export function generateConfig(doc: ThemeDoc, framework: string = 'nuxt'): strin
   // explicit last so it wins) — a spread would drop one side wholesale.
   // Width rides the @theme default-width variables in the exported CSS, so
   // the config only carries frame/color/shadow classes.
-  const componentOverrides = mergeUi(doc.style ? styleComponents(doc.style, { widthAsVariables: true }) : undefined, doc.components)
+  const componentOverrides = mergeUi(doc.style ? styleComponents(doc.style) : undefined, doc.components)
   if (Object.keys(componentOverrides).length) {
     config.ui = config.ui || {}
     Object.assign(config.ui, componentOverrides)
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index 570707a610..5a1d581a24 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -474,8 +474,61 @@ function detectInnerShadow(components: Record<string, any>): StyleOptions['inner
  * Remove the fragments the reconstructed style regenerates, leaving only
  * genuinely explicit component overrides for doc.components.
  */
-function subtractStyleExpansion(components: Record<string, any>, style: StyleOptions, widthAsVariables = false): Record<string, any> {
-  const expected = styleComponents(style, { widthAsVariables })
+/**
+ * Old exports carried border widths as class fragments (ring-2, border-b-3,
+ * divide-y-2 …). Widths now live on the style axis, so those tokens are
+ * noise: drop them, and renormalize old frame literals (ring-N ring-inset …)
+ * to the default-width form so subtraction still recognizes them.
+ */
+function normalizeLegacyWidths(components: Record<string, any>) {
+  const WIDTH_TOKEN = /^(?:sm:)?(?:ring|divide-y|border(?:-[tbesxy])?)(?:-[0-4])?$|^lg:not-last:border-e(?:-[0-4])?$/
+  const scrub = (classes: unknown): string | undefined => {
+    if (typeof classes !== 'string') return undefined
+    const tokens = classes.split(/\s+/).flatMap((token) => {
+      if (/^(?:sm:)?ring-[1-4]$/.test(token)) {
+        // part of a frame literal → default-width ring; bare width → drop
+        return classes.includes('ring-(--ui-border-accented)') ? [token.replace(/ring-[1-4]$/, 'ring')] : []
+      }
+      return WIDTH_TOKEN.test(token) ? [] : [token]
+    })
+    return tokens.join(' ')
+  }
+
+  for (const [name, component] of Object.entries(components)) {
+    for (const [slot, classes] of Object.entries(component?.slots || {})) {
+      const cleaned = scrub(classes)
+      if (cleaned !== undefined) {
+        if (cleaned) component.slots[slot] = cleaned
+        else Reflect.deleteProperty(component.slots, slot)
+      }
+    }
+    if (component?.slots && !Object.keys(component.slots).length) Reflect.deleteProperty(component, 'slots')
+    if (Array.isArray(component?.compoundVariants)) {
+      component.compoundVariants = component.compoundVariants.filter((compound: any) => {
+        if (typeof compound.class === 'string') {
+          const cleaned = scrub(compound.class)!
+          if (!cleaned) return false
+          compound.class = cleaned
+        } else if (compound.class && typeof compound.class === 'object') {
+          for (const [slot, classes] of Object.entries(compound.class)) {
+            const cleaned = scrub(classes)
+            if (cleaned !== undefined) {
+              if (cleaned) compound.class[slot] = cleaned
+              else Reflect.deleteProperty(compound.class, slot)
+            }
+          }
+          if (!Object.keys(compound.class).length) return false
+        }
+        return true
+      })
+      if (!component.compoundVariants.length) Reflect.deleteProperty(component, 'compoundVariants')
+    }
+    if (component && !Object.keys(component).length) Reflect.deleteProperty(components, name)
+  }
+}
+
+function subtractStyleExpansion(components: Record<string, any>, style: StyleOptions): Record<string, any> {
+  const expected = styleComponents(style)
   const remaining: Record<string, any> = {}
 
   for (const [name, fragment] of Object.entries(components)) {
@@ -552,8 +605,7 @@ export function importTheme(input: { css?: string, config?: string }): ThemeImpo
 
   // New exports carry width through the @theme variables; older ones (and
   // config-only pastes) still declare it through ring-N classes.
-  const widthAsVariables = css?.borderWidth !== undefined
-  if (widthAsVariables) {
+  if (css?.borderWidth !== undefined) {
     style.border = css!.borderWidth === 0 ? 'none' : 'custom'
     if (css!.borderWidth !== 0 && css!.borderWidth !== BORDER_WIDTH_DEFAULT) style.borderWidth = css!.borderWidth
     if (detectFrame(components)) style.frame = true
@@ -564,11 +616,14 @@ export function importTheme(input: { css?: string, config?: string }): ThemeImpo
       if (border.borderWidth !== undefined) style.borderWidth = border.borderWidth
       if (border.frame) style.frame = true
     }
+    // only legacy pastes carry width tokens — new exports must keep their
+    // bare default-width `ring` frame literals untouched
+    normalizeLegacyWidths(components)
   }
   const defaults = extractDefaults(components)
   if (defaults) style.defaults = defaults
 
-  const explicit = subtractStyleExpansion(components, style, widthAsVariables)
+  const explicit = subtractStyleExpansion(components, style)
   if (Object.keys(explicit).length) doc.components = explicit
 
   if (Object.values(style).some(value => value !== undefined)) {
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 41c4a74dbb..8b34babb26 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -312,137 +312,17 @@ function innerShadowFragments(classes: string): Fragments {
 export const BORDER_WIDTH_DEFAULT = 2
 
 /**
- * Whole literal class strings per width so tailwind's scanner sees them —
- * the slider swaps between these, never builds a class dynamically.
+ * Frame outlines at the DEFAULT ring width — the width itself flows through
+ * --default-ring-width (compiled to the studio variable live, a static
+ * @theme value in exports), so no per-width class enumeration is needed.
  */
-const RING_WIDTH_CLASSES: Record<number, string> = { 0: 'ring-0', 1: 'ring-1', 2: 'ring-2', 3: 'ring-3', 4: 'ring-4' }
-const SM_RING_WIDTH_CLASSES: Record<number, string> = { 0: 'sm:ring-0', 1: 'sm:ring-1', 2: 'sm:ring-2', 3: 'sm:ring-3', 4: 'sm:ring-4' }
-
-/** Same idea for the border-utility edges: separators, chrome, dividers. */
-const EDGE_CLASSES: Record<'t' | 'b' | 'e' | 's', Record<number, string>> = {
-  t: { 0: 'border-t-0', 1: 'border-t', 2: 'border-t-2', 3: 'border-t-3', 4: 'border-t-4' },
-  b: { 0: 'border-b-0', 1: 'border-b', 2: 'border-b-2', 3: 'border-b-3', 4: 'border-b-4' },
-  e: { 0: 'border-e-0', 1: 'border-e', 2: 'border-e-2', 3: 'border-e-3', 4: 'border-e-4' },
-  s: { 0: 'border-s-0', 1: 'border-s', 2: 'border-s-2', 3: 'border-s-3', 4: 'border-s-4' }
-}
-const DIVIDE_Y_CLASSES: Record<number, string> = { 0: 'divide-y-0', 1: 'divide-y', 2: 'divide-y-2', 3: 'divide-y-3', 4: 'divide-y-4' }
-const BORDER_ALL_CLASSES: Record<number, string> = { 0: 'border-0', 1: 'border', 2: 'border-2', 3: 'border-3', 4: 'border-4' }
-// dashboard panels only draw their edge between siblings on lg — same scoping
-const PANEL_EDGE_CLASSES: Record<number, string> = {
-  0: 'lg:not-last:border-e-0',
-  1: 'lg:not-last:border-e',
-  2: 'lg:not-last:border-e-2',
-  3: 'lg:not-last:border-e-3',
-  4: 'lg:not-last:border-e-4'
-}
+const FRAME_INSET = 'ring ring-inset ring-(--ui-border-accented)'
+const FRAME_OUTSET = 'ring ring-(--ui-border-accented)'
 
-/**
- * Apply one ring-width class across every ring-bearing surface: variant-level
- * rings (outline/subtle on buttons/panels/fields) via compounds, slot-level
- * rings (overlay content, toast, check controls) via slots. modal is the
- * exception (ring under the fullscreen:false variant) and slideover's panel
- * ring is sm-scoped.
- */
-function ringFragments(width: number): Fragments {
-  const cls = RING_WIDTH_CLASSES[width] || RING_WIDTH_CLASSES[BORDER_WIDTH_DEFAULT]!
-  const compound = (variants: string[], slot?: string) =>
-    variants.map(variant => ({ variant, class: slot ? { [slot]: cls } : cls }))
-
-  const edge = (side: 't' | 'b' | 'e' | 's') => EDGE_CLASSES[side][width] || EDGE_CLASSES[side][BORDER_WIDTH_DEFAULT]!
-  const divide = DIVIDE_Y_CLASSES[width] || DIVIDE_Y_CLASSES[BORDER_WIDTH_DEFAULT]!
-
-  return {
-    // card's section dividers scale with its ring
-    card: {
-      compoundVariants: [
-        ...['outline', 'subtle'].map(variant => ({ variant, class: { root: `${cls} ${divide}` } })),
-        ...['solid', 'soft'].map(variant => ({ variant, class: { root: divide } }))
-      ]
-    },
-    empty: { compoundVariants: compound(['outline', 'subtle'], 'root') },
-    alert: { compoundVariants: compound(['outline', 'subtle'], 'root') },
-    button: { compoundVariants: compound(['outline', 'subtle']) },
-    badge: { compoundVariants: compound(['outline', 'subtle']) },
-    chatMessage: { compoundVariants: compound(['outline', 'subtle'], 'content') },
-    ...Object.fromEntries(FIELD_COMPONENTS.map(component => [component, { compoundVariants: compound(['outline', 'subtle']) }])),
-    // menu-bearing fields treat trigger AND dropdown surface
-    select: { slots: { content: cls }, compoundVariants: compound(['outline', 'subtle']) },
-    selectMenu: { slots: { content: cls }, compoundVariants: compound(['outline', 'subtle']) },
-    inputMenu: { slots: { content: cls }, compoundVariants: compound(['outline', 'subtle']) },
-    popover: { slots: { content: cls } },
-    dropdownMenu: { slots: { content: cls } },
-    contextMenu: { slots: { content: cls } },
-    tooltip: { slots: { content: cls } },
-    toast: { slots: { root: cls } },
-    drawer: { slots: { content: cls } },
-    modal: { compoundVariants: [{ fullscreen: false, class: { content: cls } }] },
-    slideover: { slots: { content: SM_RING_WIDTH_CLASSES[width] || SM_RING_WIDTH_CLASSES[BORDER_WIDTH_DEFAULT]! } },
-    checkbox: { slots: { base: cls } },
-    radioGroup: { slots: { base: cls } },
-    // Border-utility edges: page/app chrome, separators and dividers
-    // follow the same width so the whole preview reads consistently.
-    separator: {
-      compoundVariants: [
-        { orientation: 'horizontal', class: { border: edge('t') } },
-        { orientation: 'vertical', class: { border: edge('s') } }
-      ]
-    },
-    header: { slots: { root: edge('b') } },
-    accordion: { slots: { item: edge('b') } },
-    table: { slots: { tbody: divide } },
-    // the sidebar's edge border lives in its side VARIANT, which tv applies
-    // after slot extensions — a compound is the only layer that lands on top
-    dashboardSidebar: { compoundVariants: [
-      { side: 'left', class: { root: edge('e') } },
-      { side: 'right', class: { root: edge('s') } }
-    ] },
-    dashboardNavbar: { slots: { root: edge('b') } },
-    dashboardToolbar: { slots: { root: edge('b') } },
-    dashboardPanel: { slots: { root: PANEL_EDGE_CLASSES[width] || PANEL_EDGE_CLASSES[BORDER_WIDTH_DEFAULT]! } },
-    // ring-bearing surfaces beyond the core set (page/pricing/chat/blog)
-    pageCard: { compoundVariants: compound(['outline', 'subtle'], 'root') },
-    pageCTA: { compoundVariants: compound(['outline', 'subtle'], 'root') },
-    blogPost: { compoundVariants: compound(['outline', 'subtle'], 'root') },
-    chatPrompt: { compoundVariants: compound(['outline', 'subtle'], 'root') },
-    pricingPlan: { compoundVariants: compound(['outline', 'subtle'], 'root') },
-    // and the remaining border-utility edges
-    navigationMenu: { slots: { childList: edge('s') } },
-    pageHeader: { slots: { root: edge('b') } },
-    chatPalette: { slots: { prompt: edge('t') } },
-    commandPalette: { slots: { root: divide } },
-    fileUpload: { slots: { file: BORDER_ALL_CLASSES[width] || BORDER_ALL_CLASSES[BORDER_WIDTH_DEFAULT]! } },
-    checkboxGroup: { compoundVariants: [{ variant: 'card', class: { item: BORDER_ALL_CLASSES[width] || BORDER_ALL_CLASSES[BORDER_WIDTH_DEFAULT]! } }] },
-    listbox: { slots: { input: edge('b') } },
-    tree: { slots: { listWithChildren: edge('s') } },
-    changelogVersion: { slots: { footer: edge('t') } },
-    pricingTable: {
-      slots: {
-        item: BORDER_ALL_CLASSES[width] || BORDER_ALL_CLASSES[BORDER_WIDTH_DEFAULT]!,
-        th: edge('b'),
-        td: edge('b')
-      }
-    }
-  }
-}
-
-/** Width-parametric frame outlines (whole literals for the scanner). */
-const FRAME_INSET_CLASSES: Record<number, string> = {
-  1: 'ring-1 ring-inset ring-(--ui-border-accented)',
-  2: 'ring-2 ring-inset ring-(--ui-border-accented)',
-  3: 'ring-3 ring-inset ring-(--ui-border-accented)',
-  4: 'ring-4 ring-inset ring-(--ui-border-accented)'
-}
-const FRAME_CLASSES: Record<number, string> = {
-  1: 'ring-1 ring-(--ui-border-accented)',
-  2: 'ring-2 ring-(--ui-border-accented)',
-  3: 'ring-3 ring-(--ui-border-accented)',
-  4: 'ring-4 ring-(--ui-border-accented)'
-}
-
-/** The frame toggle: outline solid/soft surfaces too, at the chosen width. */
-function frameFragments(width: number): Fragments {
-  const inset = FRAME_INSET_CLASSES[width] || FRAME_INSET_CLASSES[BORDER_WIDTH_DEFAULT]!
-  const outset = FRAME_CLASSES[width] || FRAME_CLASSES[BORDER_WIDTH_DEFAULT]!
+/** The frame toggle: outline solid/soft surfaces too. */
+const FRAME_FRAGMENTS: Fragments = (() => {
+  const inset = FRAME_INSET
+  const outset = FRAME_OUTSET
   const frame = (cls: string, slot?: string) =>
     ['solid', 'soft'].map(variant => ({ variant, class: slot ? { [slot]: cls } : cls }))
 
@@ -466,41 +346,19 @@ function frameFragments(width: number): Fragments {
     tabs: { compoundVariants: [{ variant: 'pill', class: { list: inset, indicator: inset } }] },
     switch: { slots: { base: inset } }
   }
-}
+})()
 
 /**
- * 'none' zeroes every ring, 'custom' sets the chosen width and optionally
- * frames solid surfaces. Legacy 'bold'/'frame' (old exports and saved
- * prefs) read as custom at the default width, 'frame' keeping its outlines.
+ * Every width flows through --default-border-width/--default-ring-width —
+ * compiled onto the studio variable in the docs' own build, emitted as a
+ * static @theme value in exports — so borders need no class fragments at
+ * all. Only the frame toggle adds classes: outlines on surfaces that have
+ * none. Legacy 'frame' (old saved prefs) implies the toggle.
  */
-function borderFragments(style: StyleOptions, widthAsVariables = false): Fragments {
-  if (!style.border || style.border === 'default') return {}
-
-  // Exports carry the width through tailwind's `--default-border-width` /
-  // `--default-ring-width` theme variables instead (the consumer's compile
-  // scales every bare border/divide/ring) — only the frame outlines remain
-  // as classes. The live preview can't do that: those variables are
-  // resolved at compile time, so it keeps the class fragments.
+function borderFragments(style: StyleOptions): Fragments {
   const framed = style.frame || style.border === 'frame'
-  const width = style.border === 'none' ? 0 : style.borderWidth ?? BORDER_WIDTH_DEFAULT
-
-  if (widthAsVariables) {
-    return framed && width > 0 ? frameFragments(width) : {}
-  }
-
-  const rings = ringFragments(width)
-  if (!framed || width === 0) return rings
-
-  const frames = frameFragments(width)
-  return Object.fromEntries(
-    [...new Set([...Object.keys(rings), ...Object.keys(frames)])].map(key => [key, {
-      ...rings[key],
-      ...frames[key],
-      ...(rings[key]?.compoundVariants || frames[key]?.compoundVariants
-        ? { compoundVariants: [...(rings[key]?.compoundVariants || []), ...(frames[key]?.compoundVariants || [])] }
-        : {})
-    }])
-  )
+  const zeroed = style.border === 'none'
+  return framed && !zeroed && style.border && style.border !== 'default' ? FRAME_FRAGMENTS : {}
 }
 
 /**
@@ -658,9 +516,11 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
     dark['--ui-inner-shadow-color'] = value.dark
   }
 
-  // Studio-only: hand-rolled preview markup scales its borders through this
-  // variable (`border-[length:var(--studio-border-width,1px)]`), since the
-  // component fragments can't reach plain divs. Stripped from exports.
+  // Studio-only: the docs build compiles --default-border-width and
+  // --default-ring-width onto this variable, so EVERY default-width
+  // border/ring/divide in the app follows it live (plain gap-px boundaries
+  // reference it directly). Stripped from exports, which carry a static
+  // @theme value instead.
   if (style.border && style.border !== 'default') {
     const width = style.border === 'none' ? 0 : style.borderWidth ?? BORDER_WIDTH_DEFAULT
     light['--studio-border-width'] = `${width}px`
@@ -675,7 +535,7 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
  * merge in shadow → width → color order, so the color compounds append last
  * and win the tailwind-merge for ring color.
  */
-export function styleComponents(style: StyleOptions, options: { widthAsVariables?: boolean } = {}): Fragments {
+export function styleComponents(style: StyleOptions): Fragments {
   // App-wide defaults, only where the component supports the chosen value.
   const defaults: Fragments = {}
   const variant = style.defaults?.variant
@@ -718,7 +578,7 @@ export function styleComponents(style: StyleOptions, options: { widthAsVariables
     style.innerShadow && style.innerShadow !== 'none'
       ? innerShadowFragments(style.innerShadow === 'hard' ? INNER_HARD : INNER_SOFT)
       : {},
-    borderFragments(style, options.widthAsVariables),
+    borderFragments(style),
     style.borderColor && style.borderColor !== 'default' ? FRAME_COLOR_FRAGMENTS : {}
   ]
 
@@ -795,11 +655,15 @@ export function mergeUi(
 }
 
 /** Every component key a style bundle may touch — cleared before re-applying. */
+// Components that only ever carried retired width fragments — kept in the
+// clearing set so overrides persisted by older sessions still get swept.
+const RETIRED_WIDTH_KEYS = ['separator', 'header', 'accordion', 'table', 'dashboardSidebar', 'dashboardNavbar', 'dashboardToolbar', 'dashboardPanel', 'navigationMenu', 'pageHeader', 'chatPalette', 'commandPalette', 'fileUpload', 'checkboxGroup', 'listbox', 'tree', 'changelogVersion', 'pricingTable', 'pricingPlan', 'checkbox', 'radioGroup']
+
 export const STYLE_COMPONENT_KEYS = [...new Set([
   ...Object.values(SHADOW_FRAGMENTS).flatMap(fragments => Object.keys(fragments)),
-  ...Object.keys(ringFragments(BORDER_WIDTH_DEFAULT)),
-  ...Object.keys(frameFragments(BORDER_WIDTH_DEFAULT)),
-  ...Object.keys(FRAME_COLOR_FRAGMENTS)
+  ...Object.keys(FRAME_FRAGMENTS),
+  ...Object.keys(FRAME_COLOR_FRAGMENTS),
+  ...RETIRED_WIDTH_KEYS
 ])]
 
 /**
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 2b8abf0626..7f43c2725f 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -311,18 +311,16 @@ describe('styleComponents', () => {
     expect(tokens.light['--ui-inner-shadow-opacity']).toBe('30%')
   })
 
-  it('merges shadow and border fragments slot-wise', async () => {
+  it('merges shadow and frame fragments slot-wise', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
-    const components = styleComponents({ shadow: 'hard', border: 'bold' })
+    const components = styleComponents({ shadow: 'hard', border: 'custom', frame: true })
 
     expect(components.button!.slots!.base).toContain('shadow-(--ui-shadow-hard)')
-    // bold only thickens existing rings: buttons gain no base ring, the
-    // outline/subtle compound overrides carry width only
+    // widths ride the default-width variables — no ring-N classes anywhere
     expect(components.button!.slots!.base).not.toContain('ring')
-    expect(components.button!.compoundVariants).toContainEqual({ variant: 'outline', class: 'ring-2' })
-    // card rings live at variant level, so bold ships compounds, not slots
+    expect(components.button!.compoundVariants).toContainEqual({ variant: 'solid', class: 'ring ring-inset ring-(--ui-border-accented)' })
     expect(components.card!.slots?.root ?? '').toContain('shadow-(--ui-shadow-hard-lg)')
-    expect(components.card!.compoundVariants).toContainEqual({ variant: 'outline', class: { root: 'ring-2 divide-y-2' } })
+    expect(components.card!.compoundVariants).toContainEqual({ variant: 'soft', class: { root: 'ring ring-(--ui-border-accented)' } })
   })
 
   it('docToSettings keeps style out of the ui channel but carries its tokens', async () => {
@@ -352,44 +350,30 @@ describe('styleComponents', () => {
 })
 
 describe('style colors', () => {
-  it('custom borders set the chosen ring width; none zeroes every ring', async () => {
+  it('widths ride the default-width variables — only the frame toggle emits classes', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
 
-    const wide = styleComponents({ border: 'custom', borderWidth: 3 })
-    expect(wide.button!.compoundVariants).toContainEqual({ variant: 'outline', class: 'ring-3' })
-    expect(wide.popover!.slots!.content).toBe('ring-3')
-    expect(wide.slideover!.slots!.content).toBe('sm:ring-3')
-    // width only touches existing rings — never adds outlines to solids
-    expect(JSON.stringify(wide.button!.compoundVariants)).not.toContain('"solid"')
-    expect(JSON.stringify(wide.button!.compoundVariants)).not.toContain('"ghost"')
+    // width and none alike produce ZERO class fragments: every default-width
+    // border/ring/divide follows --default-border/ring-width instead
+    expect(styleComponents({ border: 'custom', borderWidth: 3 })).toEqual({})
+    expect(styleComponents({ border: 'none' })).toEqual({})
 
-    const none = styleComponents({ border: 'none' })
-    expect(none.card!.compoundVariants).toContainEqual({ variant: 'outline', class: { root: 'ring-0 divide-y-0' } })
-    expect(none.dropdownMenu!.slots!.content).toBe('ring-0')
-
-    // the frame toggle outlines solid/soft surfaces at the chosen width
+    // the frame toggle outlines solid/soft surfaces at the default ring width
     const framed = styleComponents({ border: 'custom', borderWidth: 3, frame: true })
-    expect(framed.button!.compoundVariants).toContainEqual({ variant: 'solid', class: 'ring-3 ring-inset ring-(--ui-border-accented)' })
-    expect(framed.card!.compoundVariants).toContainEqual({ variant: 'soft', class: { root: 'ring-3 ring-(--ui-border-accented)' } })
+    expect(framed.button!.compoundVariants).toContainEqual({ variant: 'solid', class: 'ring ring-inset ring-(--ui-border-accented)' })
+    expect(framed.card!.compoundVariants).toContainEqual({ variant: 'soft', class: { root: 'ring ring-(--ui-border-accented)' } })
     expect(JSON.stringify(framed.button!.compoundVariants)).not.toContain('"ghost"')
     // …and the other solid surfaces: pill tabs, chat bubbles, switch track
-    expect(framed.tabs!.compoundVariants).toContainEqual({ variant: 'pill', class: { list: 'ring-3 ring-inset ring-(--ui-border-accented)', indicator: 'ring-3 ring-inset ring-(--ui-border-accented)' } })
-    expect(framed.chatMessage!.compoundVariants).toContainEqual({ variant: 'solid', class: { content: 'ring-3 ring-inset ring-(--ui-border-accented)' } })
-    expect(framed.switch!.slots!.base).toBe('ring-3 ring-inset ring-(--ui-border-accented)')
+    expect(framed.tabs!.compoundVariants).toContainEqual({ variant: 'pill', class: { list: 'ring ring-inset ring-(--ui-border-accented)', indicator: 'ring ring-inset ring-(--ui-border-accented)' } })
+    expect(framed.chatMessage!.compoundVariants).toContainEqual({ variant: 'solid', class: { content: 'ring ring-inset ring-(--ui-border-accented)' } })
+    expect(framed.switch!.slots!.base).toBe('ring ring-inset ring-(--ui-border-accented)')
 
-    // border-utility edges scale with the width: chrome, separators, dividers
-    expect(wide.header!.slots!.root).toBe('border-b-3')
-    // the sidebar edge rides a compound — its side variant would outrank a slot append
-    expect(wide.dashboardSidebar!.compoundVariants).toContainEqual({ side: 'left', class: { root: 'border-e-3' } })
-    expect(wide.dashboardPanel!.slots!.root).toBe('lg:not-last:border-e-3')
-    expect(wide.separator!.compoundVariants).toContainEqual({ orientation: 'horizontal', class: { border: 'border-t-3' } })
-    expect(wide.table!.slots!.tbody).toBe('divide-y-3')
-    expect(wide.card!.compoundVariants).toContainEqual({ variant: 'outline', class: { root: 'ring-3 divide-y-3' } })
-    expect(none.header!.slots!.root).toBe('border-b-0')
+    // frame off (or border none) → no outlines
+    expect(styleComponents({ border: 'none', frame: true })).toEqual({})
 
-    // legacy saved values keep working: bold = custom width, frame keeps outlines
-    expect(styleComponents({ border: 'frame' }).button!.compoundVariants).toContainEqual({ variant: 'solid', class: 'ring-2 ring-inset ring-(--ui-border-accented)' })
-    expect(styleComponents({ border: 'bold' }).input!.compoundVariants).toContainEqual({ variant: 'subtle', class: 'ring-2' })
+    // legacy saved 'frame' keeps its outlines; legacy 'bold' is width-only → nothing
+    expect(styleComponents({ border: 'frame' }).button!.compoundVariants).toContainEqual({ variant: 'solid', class: 'ring ring-inset ring-(--ui-border-accented)' })
+    expect(styleComponents({ border: 'bold' })).toEqual({})
   })
 
   it('exports carry width via tailwind default-width variables, not classes', async () => {
@@ -400,10 +384,10 @@ describe('style colors', () => {
     expect(css).toContain('--default-border-width: 3px;')
     expect(css).toContain('--default-ring-width: 3px;')
 
-    // config keeps the frame outlines but drops the per-component width classes
+    // config keeps the frame outlines (default-width rings) and nothing else
     const config = generateConfig(doc)
-    expect(config).toContain('ring-3 ring-inset ring-(--ui-border-accented)')
-    expect(config).not.toMatch(/class: 'ring-3'/)
+    expect(config).toContain('ring ring-inset ring-(--ui-border-accented)')
+    expect(config).not.toMatch(/ring-3/)
 
     // none exports as zero-width variables and nothing else
     const none = generateCSS({ version: 1, style: { border: 'none' } })
@@ -449,12 +433,6 @@ describe('style colors', () => {
     // slideover is edge-to-edge on mobile — the shadow is sm-scoped
     expect(soft.slideover!.slots!.content).toMatch(/^sm:shadow-lg /)
 
-    const bold = styleComponents({ border: 'bold' })
-    expect(bold.dropdownMenu!.slots!.content).toBe('ring-2')
-    expect(bold.selectMenu!.slots!.content).toBe('ring-2')
-    expect(bold.selectMenu!.compoundVariants).toContainEqual({ variant: 'outline', class: 'ring-2' })
-    expect(bold.checkbox!.slots!.base).toBe('ring-2')
-
     const colored = styleComponents({ borderColor: 'inverted' })
     expect(colored.tooltip!.slots!.content).toBe('ring-(--ui-frame-color)')
     expect(colored.modal!.compoundVariants![0]).toEqual({ fullscreen: false, class: { content: 'ring-(--ui-frame-color)' } })
@@ -488,14 +466,14 @@ describe('style colors', () => {
     expect(compounds).toContainEqual({ variant: 'soft', class: 'ring-(--ui-frame-color)' })
   })
 
-  it('borderColor appends recolor compounds after width ones', async () => {
+  it('borderColor appends recolor compounds after frame ones', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
-    const compounds = styleComponents({ border: 'bold', borderColor: 'black' }).button!.compoundVariants!
+    const compounds = styleComponents({ border: 'custom', frame: true, borderColor: 'black' }).button!.compoundVariants!
 
-    const widthIndex = compounds.findIndex(entry => entry.class === 'ring-2')
+    const frameIndex = compounds.findIndex(entry => entry.class === 'ring ring-inset ring-(--ui-border-accented)')
     const colorIndex = compounds.findIndex(entry => entry.class === 'ring-(--ui-frame-color)')
-    expect(widthIndex).toBeGreaterThanOrEqual(0)
-    expect(colorIndex).toBeGreaterThan(widthIndex)
+    expect(frameIndex).toBeGreaterThanOrEqual(0)
+    expect(colorIndex).toBeGreaterThan(frameIndex)
   })
 
   it('styleTokens maps color choices per mode and default contributes nothing', async () => {

From fab9d64c0236a6501e1a4bbf5823e9761f406f8a Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 22:57:35 +0200
Subject: [PATCH 080/185] =?UTF-8?q?feat(docs):=20undo/redo=20over=20theme?=
 =?UTF-8?q?=20documents=20=E2=80=94=20footer=20buttons=20plus=20cmd/ctrl-Z?=
 =?UTF-8?q?,=20shift-Z=20and=20ctrl-Y,=20reset=20included?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioModal.vue         | 95 ++++++++++++++++++-
 1 file changed, 93 insertions(+), 2 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index 24d6b26904..07ac4c6441 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import type { ThemeDoc } from '../../utils/theme-engine'
+
 const { track } = useAnalytics()
-const { reset, style, studioOpen: open } = useThemeStudio()
-const { modes, mode } = useTheme()
+const { reset, style, applyDoc, studioOpen: open } = useThemeStudio()
+const { modes, mode, currentDoc } = useTheme()
 const colorMode = useColorMode()
 
 const route = useRoute()
@@ -19,6 +21,71 @@ onMounted(() => {
   }
 })
 
+/**
+ * Undo/redo over whole theme documents — the same serialize/restore pair
+ * exports and presets already use, so one history entry is one applyDoc
+ * away. A debounced capture folds slider-drag bursts (and a reset) into
+ * single steps. Session-only by design.
+ */
+const past = ref<ThemeDoc[]>([])
+const future = ref<ThemeDoc[]>([])
+let lastSnapshot = ''
+let suppressUntil = 0
+
+onMounted(() => {
+  lastSnapshot = JSON.stringify(currentDoc())
+})
+
+let captureTimeout: ReturnType<typeof setTimeout> | undefined
+watch(() => mounted.value && JSON.stringify(currentDoc()), (snapshot) => {
+  if (!snapshot || snapshot === true) return
+  clearTimeout(captureTimeout)
+  captureTimeout = setTimeout(() => {
+    if (snapshot === lastSnapshot) return
+    if (Date.now() < suppressUntil) {
+      // our own undo/redo restore — realign without recording
+      lastSnapshot = snapshot
+      return
+    }
+    past.value.push(JSON.parse(lastSnapshot))
+    if (past.value.length > 50) past.value.shift()
+    future.value = []
+    lastSnapshot = snapshot
+  }, 350)
+})
+
+function restore(doc: ThemeDoc) {
+  suppressUntil = Date.now() + 800
+  applyDoc(doc)
+  lastSnapshot = JSON.stringify(doc)
+}
+
+function undo() {
+  const doc = past.value.pop()
+  if (!doc) return
+  future.value.push(JSON.parse(lastSnapshot))
+  restore(doc)
+}
+
+function redo() {
+  const doc = future.value.pop()
+  if (!doc) return
+  past.value.push(JSON.parse(lastSnapshot))
+  restore(doc)
+}
+
+defineShortcuts({
+  meta_z: () => {
+    if (open.value) undo()
+  },
+  meta_shift_z: () => {
+    if (open.value) redo()
+  },
+  ctrl_y: () => {
+    if (open.value) redo()
+  }
+})
+
 watch(open, (isOpen) => {
   const { studio: _studio, ...query } = route.query
   router.replace({ query: isOpen ? { ...query, studio: null } : query })
@@ -93,6 +160,30 @@ const viewTabs = [
           <ThemeStudioControls />
 
           <template #footer>
+            <UFieldGroup size="sm">
+              <UTooltip text="Undo" :kbds="['meta', 'Z']">
+                <UButton
+                  icon="i-lucide-undo-2"
+                  color="neutral"
+                  variant="outline"
+                  :disabled="!past.length"
+                  aria-label="Undo theme change"
+                  @click="undo"
+                />
+              </UTooltip>
+
+              <UTooltip text="Redo" :kbds="['meta', 'shift', 'Z']">
+                <UButton
+                  icon="i-lucide-redo-2"
+                  color="neutral"
+                  variant="outline"
+                  :disabled="!future.length"
+                  aria-label="Redo theme change"
+                  @click="redo"
+                />
+              </UTooltip>
+            </UFieldGroup>
+
             <div class="flex-1 min-w-0">
               <ThemeStudioImport />
             </div>

From 3563264298f698ce3fbfbbeee63b3f2709ffbe11 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 23:02:53 +0200
Subject: [PATCH 081/185] =?UTF-8?q?refactor(docs):=20settings=20panel=20re?=
 =?UTF-8?q?grouped=20=E2=80=94=20Scale=20and=20Components=20join=20General?=
 =?UTF-8?q?,=20Shadow/Neutral/Shades=20renames,=20trailing=20chevrons,=20s?=
 =?UTF-8?q?ections=20open=20by=20default?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 210 ++++++++----------
 1 file changed, 96 insertions(+), 114 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 749ab3fe56..427c28417f 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -40,8 +40,7 @@ const openSections = reactive<Record<string, boolean>>({
   primary: true,
   neutral: true,
   semantic: true,
-  radius: true,
-  sizing: true,
+  scale: true,
   defaults: true,
   shadows: true,
   innerShadows: true,
@@ -49,8 +48,8 @@ const openSections = reactive<Record<string, boolean>>({
   font: true,
   icons: true,
   mode: true,
-  // token groups keyed by group name; only the first starts open
-  ...Object.fromEntries(TOKEN_GROUPS.map((group, index) => [`tokens-${group.key}`, index === 0]))
+  // token groups keyed by group name — everything starts open
+  ...Object.fromEntries(TOKEN_GROUPS.map(group => [`tokens-${group.key}`, true]))
 })
 
 const semanticAliases: ColorAlias[] = ['secondary', 'success', 'info', 'warning', 'error']
@@ -227,7 +226,7 @@ const groupItems = [
   { label: 'Colors', value: 'colors', slot: 'colors' as const },
   { label: 'General', value: 'general', slot: 'general' as const },
   { label: 'Style', value: 'style', slot: 'style' as const },
-  { label: 'Tokens', value: 'tokens', slot: 'tokens' as const }
+  { label: 'Shades', value: 'tokens', slot: 'tokens' as const }
 ]
 
 const defaultSizeItems = [
@@ -357,7 +356,6 @@ const shadowColor = computed({
           <UCollapsible v-model:open="openSections.primary" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
                 <span class="flex-1 text-start">Primary</span>
                 <UButton
                   to="/docs/getting-started/theme/css-variables#colors"
@@ -368,6 +366,7 @@ const shadowColor = computed({
                   :ui="{ leadingIcon: 'size-3' }"
                   @click.stop
                 />
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
               </legend>
             </template>
             <template #content>
@@ -395,8 +394,7 @@ const shadowColor = computed({
           <UCollapsible v-model:open="openSections.neutral" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
-                <span class="flex-1 text-start">Background</span>
+                <span class="flex-1 text-start">Neutral</span>
                 <UButton
                   to="/docs/getting-started/theme/css-variables#text"
                   size="xs"
@@ -406,6 +404,7 @@ const shadowColor = computed({
                   :ui="{ leadingIcon: 'size-3' }"
                   @click.stop
                 />
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
               </legend>
             </template>
             <template #content>
@@ -434,7 +433,6 @@ const shadowColor = computed({
           <UCollapsible v-model:open="openSections.semantic" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
                 <span class="flex-1 text-start">Semantic</span>
                 <UButton
                   to="/docs/getting-started/theme/design-system"
@@ -445,6 +443,7 @@ const shadowColor = computed({
                   :ui="{ leadingIcon: 'size-3' }"
                   @click.stop
                 />
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
               </legend>
             </template>
             <template #content>
@@ -480,110 +479,11 @@ const shadowColor = computed({
 
       <template #style>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <UCollapsible v-model:open="openSections.radius" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
-            <template #default="{ open }">
-              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
-                <span class="flex-1 text-start">Radius</span>
-                <UButton
-                  to="/docs/getting-started/theme/css-variables#radius"
-                  size="xs"
-                  color="neutral"
-                  variant="ghost"
-                  icon="i-lucide-help-circle"
-                  :ui="{ leadingIcon: 'size-3' }"
-                  @click.stop
-                />
-              </legend>
-            </template>
-            <template #content>
-              <div class="flex items-center gap-3">
-                <USlider
-                  v-model="radius"
-                  :min="0"
-                  :max="0.5"
-                  :step="0.125"
-                  size="sm"
-                />
-
-                <span class="text-[11px] font-mono text-muted tabular-nums shrink-0 w-14 text-right">{{ radius }}rem</span>
-              </div>
-            </template>
-          </UCollapsible>
-
-          <UCollapsible v-model:open="openSections.sizing" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
-            <template #default="{ open }">
-              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
-                <span class="flex-1 text-start">Sizing</span>
-              </legend>
-            </template>
-            <template #content>
-              <div class="flex flex-col gap-2">
-                <div class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Text</span>
-
-                  <USlider v-model="fontSize" :min="14" :max="18" :step="0.5" size="xs" />
-
-                  <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ fontSize }}px</span>
-                </div>
-
-                <div class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Spacing</span>
-
-                  <USlider v-model="spacing" :min="0.15" :max="0.35" :step="0.025" size="xs" />
-
-                  <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ spacing }}</span>
-                </div>
-              </div>
-            </template>
-          </UCollapsible>
-
-          <UCollapsible v-model:open="openSections.defaults" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
-            <template #default="{ open }">
-              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
-                <span class="flex-1 text-start">Defaults</span>
-              </legend>
-            </template>
-            <template #content>
-              <div class="flex flex-col gap-1.5">
-                <div v-for="field in variantGroupFields" :key="field.key" class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
-
-                  <USelect
-                    v-model="groupVariants[field.key].value"
-                    size="sm"
-                    color="neutral"
-                    variant="subtle"
-                    icon="i-lucide-layers"
-                    :items="field.items"
-                    class="flex-1"
-                  />
-                </div>
-
-                <div class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Size</span>
-
-                  <USelect
-                    v-model="defaultSize"
-                    size="sm"
-                    color="neutral"
-                    variant="subtle"
-                    icon="i-lucide-proportions"
-                    :items="defaultSizeItems"
-                    class="flex-1"
-                  />
-                </div>
-              </div>
-            </template>
-          </UCollapsible>
-
           <UCollapsible v-model:open="openSections.shadows" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
+                <span class="flex-1 text-start">Shadow</span>
                 <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
-                <span class="flex-1 text-start">Drop shadow</span>
               </legend>
             </template>
             <template #content>
@@ -643,8 +543,8 @@ const shadowColor = computed({
           <UCollapsible v-model:open="openSections.innerShadows" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
                 <span class="flex-1 text-start">Inner shadow</span>
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
               </legend>
             </template>
             <template #content>
@@ -704,8 +604,8 @@ const shadowColor = computed({
           <UCollapsible v-model:open="openSections.borders" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
                 <span class="flex-1 text-start">Borders</span>
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
               </legend>
             </template>
             <template #content>
@@ -774,8 +674,8 @@ const shadowColor = computed({
           >
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
                 <span class="flex-1 text-start">{{ group.label }}</span>
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
               </legend>
             </template>
             <template #content>
@@ -802,7 +702,6 @@ const shadowColor = computed({
           <UCollapsible v-model:open="openSections.font" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
                 <span class="flex-1 text-start">Font</span>
                 <UButton
                   to="/docs/getting-started/integrations/fonts"
@@ -813,6 +712,7 @@ const shadowColor = computed({
                   :ui="{ leadingIcon: 'size-3' }"
                   @click.stop
                 />
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
               </legend>
             </template>
             <template #content>
@@ -833,7 +733,6 @@ const shadowColor = computed({
           <UCollapsible v-model:open="openSections.icons" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
               <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
                 <span class="flex-1 text-start">Icons</span>
                 <UButton
                   to="/docs/getting-started/integrations/icons"
@@ -844,6 +743,7 @@ const shadowColor = computed({
                   :ui="{ leadingIcon: 'size-3' }"
                   @click.stop
                 />
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
               </legend>
             </template>
             <template #content>
@@ -861,6 +761,88 @@ const shadowColor = computed({
               </div>
             </template>
           </UCollapsible>
+
+          <UCollapsible v-model:open="openSections.scale" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
+            <template #default="{ open }">
+              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
+                <span class="flex-1 text-start">Scale</span>
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+              </legend>
+            </template>
+            <template #content>
+              <div class="flex flex-col gap-2">
+                <div class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Radius</span>
+
+                  <USlider
+                    v-model="radius"
+                    :min="0"
+                    :max="0.5"
+                    :step="0.125"
+                    size="xs"
+                  />
+
+                  <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ radius }}rem</span>
+                </div>
+
+                <div class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Text</span>
+
+                  <USlider v-model="fontSize" :min="14" :max="18" :step="0.5" size="xs" />
+
+                  <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ fontSize }}px</span>
+                </div>
+
+                <div class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Spacing</span>
+
+                  <USlider v-model="spacing" :min="0.15" :max="0.35" :step="0.025" size="xs" />
+
+                  <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ spacing }}</span>
+                </div>
+              </div>
+            </template>
+          </UCollapsible>
+
+          <UCollapsible v-model:open="openSections.defaults" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
+            <template #default="{ open }">
+              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
+                <span class="flex-1 text-start">Components</span>
+                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+              </legend>
+            </template>
+            <template #content>
+              <div class="flex flex-col gap-1.5">
+                <div v-for="field in variantGroupFields" :key="field.key" class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
+
+                  <USelect
+                    v-model="groupVariants[field.key].value"
+                    size="sm"
+                    color="neutral"
+                    variant="subtle"
+                    icon="i-lucide-layers"
+                    :items="field.items"
+                    class="flex-1"
+                  />
+                </div>
+
+                <div class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Size</span>
+
+                  <USelect
+                    v-model="defaultSize"
+                    size="sm"
+                    color="neutral"
+                    variant="subtle"
+                    icon="i-lucide-proportions"
+                    :items="defaultSizeItems"
+                    class="flex-1"
+                  />
+                </div>
+              </div>
+            </template>
+          </UCollapsible>
         </div>
       </template>
     </UAccordion>

From b4fbd3bb280cb4ce0b839299f47eb5e69e926a2e Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 23:09:16 +0200
Subject: [PATCH 082/185] =?UTF-8?q?fix(docs):=20type-safe=20undo=20snapsho?=
 =?UTF-8?q?t=20getter=20=E2=80=94=20undefined=20before=20mount,=20not=20fa?=
 =?UTF-8?q?lse?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/components/theme-studio/ThemeStudioModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index 07ac4c6441..f85408d5d8 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -37,8 +37,8 @@ onMounted(() => {
 })
 
 let captureTimeout: ReturnType<typeof setTimeout> | undefined
-watch(() => mounted.value && JSON.stringify(currentDoc()), (snapshot) => {
-  if (!snapshot || snapshot === true) return
+watch(() => (mounted.value ? JSON.stringify(currentDoc()) : undefined), (snapshot) => {
+  if (!snapshot) return
   clearTimeout(captureTimeout)
   captureTimeout = setTimeout(() => {
     if (snapshot === lastSnapshot) return

From 403045b3a69b4cd2191609f6d31ef3a2cd1a3bcd Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 23:28:47 +0200
Subject: [PATCH 083/185] =?UTF-8?q?feat(docs):=20section=20legends=20are?=
 =?UTF-8?q?=20real=20buttons=20=E2=80=94=20label=20plus=20trailing=20chevr?=
 =?UTF-8?q?on,=20info=20button=20after?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 148 ++++++++++++++----
 1 file changed, 115 insertions(+), 33 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 427c28417f..007986a4c0 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -355,8 +355,17 @@ const shadowColor = computed({
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
           <UCollapsible v-model:open="openSections.primary" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
-              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <span class="flex-1 text-start">Primary</span>
+              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
+                <UButton
+                  label="Primary"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  trailing-icon="i-lucide-chevron-down"
+                  class="font-semibold"
+                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
+                />
+
                 <UButton
                   to="/docs/getting-started/theme/css-variables#colors"
                   size="xs"
@@ -366,7 +375,6 @@ const shadowColor = computed({
                   :ui="{ leadingIcon: 'size-3' }"
                   @click.stop
                 />
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
               </legend>
             </template>
             <template #content>
@@ -393,8 +401,17 @@ const shadowColor = computed({
 
           <UCollapsible v-model:open="openSections.neutral" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
-              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <span class="flex-1 text-start">Neutral</span>
+              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
+                <UButton
+                  label="Neutral"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  trailing-icon="i-lucide-chevron-down"
+                  class="font-semibold"
+                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
+                />
+
                 <UButton
                   to="/docs/getting-started/theme/css-variables#text"
                   size="xs"
@@ -404,7 +421,6 @@ const shadowColor = computed({
                   :ui="{ leadingIcon: 'size-3' }"
                   @click.stop
                 />
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
               </legend>
             </template>
             <template #content>
@@ -432,8 +448,17 @@ const shadowColor = computed({
 
           <UCollapsible v-model:open="openSections.semantic" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
-              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <span class="flex-1 text-start">Semantic</span>
+              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
+                <UButton
+                  label="Semantic"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  trailing-icon="i-lucide-chevron-down"
+                  class="font-semibold"
+                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
+                />
+
                 <UButton
                   to="/docs/getting-started/theme/design-system"
                   size="xs"
@@ -443,7 +468,6 @@ const shadowColor = computed({
                   :ui="{ leadingIcon: 'size-3' }"
                   @click.stop
                 />
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
               </legend>
             </template>
             <template #content>
@@ -481,9 +505,16 @@ const shadowColor = computed({
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
           <UCollapsible v-model:open="openSections.shadows" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
-              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <span class="flex-1 text-start">Shadow</span>
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
+                <UButton
+                  label="Shadow"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  trailing-icon="i-lucide-chevron-down"
+                  class="font-semibold"
+                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
+                />
               </legend>
             </template>
             <template #content>
@@ -542,9 +573,16 @@ const shadowColor = computed({
 
           <UCollapsible v-model:open="openSections.innerShadows" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
-              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <span class="flex-1 text-start">Inner shadow</span>
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
+                <UButton
+                  label="Inner shadow"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  trailing-icon="i-lucide-chevron-down"
+                  class="font-semibold"
+                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
+                />
               </legend>
             </template>
             <template #content>
@@ -603,9 +641,16 @@ const shadowColor = computed({
 
           <UCollapsible v-model:open="openSections.borders" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
-              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <span class="flex-1 text-start">Borders</span>
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
+                <UButton
+                  label="Borders"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  trailing-icon="i-lucide-chevron-down"
+                  class="font-semibold"
+                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
+                />
               </legend>
             </template>
             <template #content>
@@ -673,9 +718,16 @@ const shadowColor = computed({
             class="rounded-md ring ring-default bg-default p-2.5"
           >
             <template #default="{ open }">
-              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <span class="flex-1 text-start">{{ group.label }}</span>
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
+                <UButton
+                  :label="group.label"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  trailing-icon="i-lucide-chevron-down"
+                  class="font-semibold"
+                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
+                />
               </legend>
             </template>
             <template #content>
@@ -701,8 +753,17 @@ const shadowColor = computed({
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
           <UCollapsible v-model:open="openSections.font" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
-              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <span class="flex-1 text-start">Font</span>
+              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
+                <UButton
+                  label="Font"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  trailing-icon="i-lucide-chevron-down"
+                  class="font-semibold"
+                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
+                />
+
                 <UButton
                   to="/docs/getting-started/integrations/fonts"
                   size="xs"
@@ -712,7 +773,6 @@ const shadowColor = computed({
                   :ui="{ leadingIcon: 'size-3' }"
                   @click.stop
                 />
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
               </legend>
             </template>
             <template #content>
@@ -732,8 +792,17 @@ const shadowColor = computed({
 
           <UCollapsible v-model:open="openSections.icons" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
-              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <span class="flex-1 text-start">Icons</span>
+              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
+                <UButton
+                  label="Icons"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  trailing-icon="i-lucide-chevron-down"
+                  class="font-semibold"
+                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
+                />
+
                 <UButton
                   to="/docs/getting-started/integrations/icons"
                   size="xs"
@@ -743,7 +812,6 @@ const shadowColor = computed({
                   :ui="{ leadingIcon: 'size-3' }"
                   @click.stop
                 />
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
               </legend>
             </template>
             <template #content>
@@ -764,9 +832,16 @@ const shadowColor = computed({
 
           <UCollapsible v-model:open="openSections.scale" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
-              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <span class="flex-1 text-start">Scale</span>
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
+                <UButton
+                  label="Scale"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  trailing-icon="i-lucide-chevron-down"
+                  class="font-semibold"
+                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
+                />
               </legend>
             </template>
             <template #content>
@@ -806,9 +881,16 @@ const shadowColor = computed({
 
           <UCollapsible v-model:open="openSections.defaults" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
             <template #default="{ open }">
-              <legend class="bg-default text-xs leading-none font-semibold select-none flex items-center gap-1 cursor-pointer">
-                <span class="flex-1 text-start">Components</span>
-                <UIcon name="i-lucide-chevron-down" class="size-3 text-dimmed transition-transform duration-200" :class="!open && '-rotate-90'" />
+              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
+                <UButton
+                  label="Components"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  trailing-icon="i-lucide-chevron-down"
+                  class="font-semibold"
+                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
+                />
               </legend>
             </template>
             <template #content>

From fe8cda2f58a3628d967e540dcb7994d89717b8ac Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 6 Jul 2026 23:52:41 +0200
Subject: [PATCH 084/185] =?UTF-8?q?refactor(docs):=20adversarial=20review?=
 =?UTF-8?q?=20pass=20=E2=80=94=20shared=20components,=20hot-path=20fixes,?=
 =?UTF-8?q?=20dead=20code=20out?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ThemeStudioSection and ThemeStudioPresetMenu replace eleven copies of
section chrome and two of the preset menu; the picker folder merges into
theme-studio (folder-prefixed auto-import names). Analytics throttled on
slider hot paths, exports tracked on copy instead of modal-open, the AI
extras channel only persists when touched, currentDoc reads style
reactively, the undo suppression window becomes a settle handshake, the
self-heal runs once, hydration re-render covers every persisted key,
reveal observers disconnect on unmount, and dead exports (STYLE_COMPONENT_KEYS,
picker size prop, reset wrapper, applying flag) are gone. Import color
reconstruction dedupes through one matcher.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/components/header/Header.vue         |   2 +-
 .../ThemeStudioColorMenu.vue}                 |   6 +-
 .../theme-studio/ThemeStudioControls.vue      | 838 ++++++------------
 .../theme-studio/ThemeStudioExport.vue        |   5 +-
 .../theme-studio/ThemeStudioModal.vue         |  21 +-
 .../theme-studio/ThemeStudioPaletteEditor.vue |  13 +-
 .../ThemeStudioPicker.vue}                    |  71 +-
 .../ThemeStudioPickerButton.vue}              |   3 +-
 .../theme-studio/ThemeStudioPresetMenu.vue    |  68 ++
 .../theme-studio/ThemeStudioSection.vue       |  42 +
 .../theme-studio/ThemeStudioViewA11y.vue      |   2 +-
 .../theme-studio/ThemeStudioViewLanding.vue   |  54 +-
 docs/app/composables/useTheme.ts              |  54 +-
 docs/app/composables/useThemeStudio.ts        |  45 +-
 docs/app/utils/theme-engine/export.ts         |  18 +-
 docs/app/utils/theme-engine/import.ts         |  54 +-
 docs/app/utils/theme-engine/styles.ts         |  11 -
 docs/app/utils/theme.ts                       |  11 +
 18 files changed, 537 insertions(+), 781 deletions(-)
 rename docs/app/components/{theme-picker/ThemePickerColorMenu.vue => theme-studio/ThemeStudioColorMenu.vue} (96%)
 rename docs/app/components/{theme-picker/ThemePicker.vue => theme-studio/ThemeStudioPicker.vue} (66%)
 rename docs/app/components/{theme-picker/ThemePickerButton.vue => theme-studio/ThemeStudioPickerButton.vue} (91%)
 create mode 100644 docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
 create mode 100644 docs/app/components/theme-studio/ThemeStudioSection.vue

diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index 3a565ce3b8..b8bdf6544f 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -45,7 +45,7 @@ function toggleChat() {
         />
       </UTooltip>
 
-      <ThemePicker />
+      <ThemeStudioPicker />
 
       <ThemeStudioModal />
 
diff --git a/docs/app/components/theme-picker/ThemePickerColorMenu.vue b/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
similarity index 96%
rename from docs/app/components/theme-picker/ThemePickerColorMenu.vue
rename to docs/app/components/theme-studio/ThemeStudioColorMenu.vue
index 338b6b8b89..fe68fb2c65 100644
--- a/docs/app/components/theme-picker/ThemePickerColorMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
@@ -76,7 +76,7 @@ function isSelected(color: string) {
           </p>
 
           <div class="grid grid-cols-3 gap-1">
-            <ThemePickerButton
+            <ThemeStudioPickerButton
               v-if="alias === 'primary' && index === 0"
               label="Black"
               :selected="blackAsPrimary"
@@ -85,9 +85,9 @@ function isSelected(color: string) {
               <template #leading>
                 <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
               </template>
-            </ThemePickerButton>
+            </ThemeStudioPickerButton>
 
-            <ThemePickerButton
+            <ThemeStudioPickerButton
               v-for="color in section.colors"
               :key="color"
               :label="color"
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 007986a4c0..37a144e350 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, BORDER_WIDTH_DEFAULT, SHADOW_GEOMETRY_DEFAULTS, INNER_SHADOW_GEOMETRY_DEFAULTS, resolveAlias, resolveShade } from '../../utils/theme-engine'
-import type { VariantGroup, TokenRamp, ColorAlias, ThemeDoc } from '../../utils/theme-engine'
+import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, BORDER_WIDTH_DEFAULT, SHADOW_GEOMETRY_DEFAULTS, INNER_SHADOW_GEOMETRY_DEFAULTS } from '../../utils/theme-engine'
+import type { VariantGroup, TokenRamp, ColorAlias } from '../../utils/theme-engine'
 
 const appConfig = useAppConfig()
 
@@ -16,25 +16,7 @@ const {
   icons
 } = useTheme()
 
-const { isCustomPalette, style, setStyle, presets, activePreset, applyPreset, shuffle } = useThemeStudio()
-
-/** The preset's primary + neutral at 500, straight from its own document. */
-function presetSwatches(doc: ThemeDoc): string[] {
-  const primary = doc.blackAsPrimary ? 'black' : resolveShade(doc, resolveAlias(doc, 'primary'), 500)
-  const neutral = resolveShade(doc, resolveAlias(doc, 'neutral'), 500)
-  return [primary, neutral].filter((color): color is string => !!color)
-}
-
-const presetItems = computed(() => presets.map(preset => ({
-  label: preset.name,
-  icon: preset.icon,
-  type: 'checkbox' as const,
-  checked: activePreset.value === preset.id,
-  swatches: presetSwatches(preset.doc),
-  onSelect: () => applyPreset(preset)
-})))
-
-const presetLabel = computed(() => presets.find(preset => preset.id === activePreset.value)?.name || 'Presets')
+const { isCustomPalette, style, setStyle } = useThemeStudio()
 
 const openSections = reactive<Record<string, boolean>>({
   primary: true,
@@ -47,14 +29,13 @@ const openSections = reactive<Record<string, boolean>>({
   borders: true,
   font: true,
   icons: true,
-  mode: true,
   // token groups keyed by group name — everything starts open
   ...Object.fromEntries(TOKEN_GROUPS.map(group => [`tokens-${group.key}`, true]))
 })
 
 const semanticAliases: ColorAlias[] = ['secondary', 'success', 'info', 'warning', 'error']
 
-const shadowOptions = [
+const SHADOW_STYLE_OPTIONS = [
   { label: 'None', value: 'none' },
   { label: 'Default', value: 'soft' },
   { label: 'Custom', value: 'hard' }
@@ -65,12 +46,6 @@ const shadowOpacity = computed({
   set: (value: number) => setStyle({ shadowOpacity: value })
 })
 
-const innerShadowOptions = [
-  { label: 'None', value: 'none' },
-  { label: 'Default', value: 'soft' },
-  { label: 'Custom', value: 'hard' }
-] as const
-
 const innerShadowOpacity = computed({
   get: () => style.value.innerShadowOpacity ?? 15,
   set: (value: number) => setStyle({ innerShadowOpacity: value })
@@ -210,8 +185,9 @@ function rampChip(ramp: TokenRamp): string {
 const hydrationKey = ref(0)
 
 onMounted(() => {
-  const keys = ['nuxt-ui-style', 'nuxt-ui-css-variables', 'nuxt-ui-custom-colors', 'nuxt-ui-radius', 'nuxt-ui-font-size', 'nuxt-ui-spacing', 'nuxt-ui-ai-theme']
-  if (keys.some(key => localStorage.getItem(key))) {
+  // ANY persisted theme state means the SSR markup rendered defaults —
+  // fonts, icon sets and palette picks included, not just the studio axes.
+  if (Object.keys(localStorage).some(key => key.startsWith('nuxt-ui-'))) {
     hydrationKey.value = 1
   }
 })
@@ -304,46 +280,7 @@ const shadowColor = computed({
 
 <template>
   <div :key="hydrationKey" class="flex flex-col gap-4">
-    <div
-      class="flex gap-2 p-4 pb-0"
-    >
-      <UDropdownMenu
-        :items="presetItems"
-        :content="{ align: 'start' }"
-        class="flex-1 min-w-0"
-        :ui="{ itemTrailing: 'self-center', content: 'w-(--reka-dropdown-menu-trigger-width)' }"
-      >
-        <UButton
-          :label="presetLabel"
-          icon="i-lucide-swatch-book"
-          trailing-icon="i-lucide-chevron-down"
-          color="neutral"
-          variant="subtle"
-          block
-        />
-
-        <template #item-trailing="{ item }">
-          <span class="inline-flex items-center gap-1 h-full">
-            <span
-              v-for="(swatch, index) in item.swatches"
-              :key="index"
-              class="size-2 rounded-full ring ring-default"
-              :style="{ backgroundColor: swatch }"
-            />
-          </span>
-        </template>
-      </UDropdownMenu>
-
-      <UTooltip text="Random theme">
-        <UButton
-          icon="i-lucide-dices"
-          color="neutral"
-          variant="subtle"
-          aria-label="Random theme"
-          @click="shuffle"
-        />
-      </UTooltip>
-    </div>
+    <ThemeStudioPresetMenu class="p-4 pb-0" />
     <UAccordion
       v-model="openGroups"
       :ui="{ content: 'px-4', header: 'px-6' }"
@@ -353,578 +290,361 @@ const shadowColor = computed({
     >
       <template #colors>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <UCollapsible v-model:open="openSections.primary" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
-            <template #default="{ open }">
-              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
-                <UButton
-                  label="Primary"
-                  color="neutral"
-                  variant="ghost"
-                  size="xs"
-                  trailing-icon="i-lucide-chevron-down"
-                  class="font-semibold"
-                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
-                />
-
-                <UButton
-                  to="/docs/getting-started/theme/css-variables#colors"
-                  size="xs"
-                  color="neutral"
-                  variant="ghost"
-                  icon="i-lucide-help-circle"
-                  :ui="{ leadingIcon: 'size-3' }"
-                  @click.stop
-                />
-              </legend>
-            </template>
-            <template #content>
-              <div>
-                <UFieldGroup size="sm" class="flex w-full">
-                  <ThemePickerColorMenu alias="primary" class="flex-1 min-w-0" />
-
-                  <UButton
-                    :icon="isCustomPalette('primary') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
-                    color="neutral"
-                    variant="subtle"
-                    :active="paletteEditors.primary || isCustomPalette('primary')"
-                    active-color="primary"
-                    active-variant="subtle"
-                    aria-label="Edit primary palette"
-                    @click="paletteEditors.primary = !paletteEditors.primary"
-                  />
-                </UFieldGroup>
-
-                <ThemeStudioPaletteEditor v-model:open="paletteEditors.primary" alias="primary" />
-              </div>
-            </template>
-          </UCollapsible>
+          <ThemeStudioSection v-model:open="openSections.primary" label="Primary" help-to="/docs/getting-started/theme/css-variables#colors">
+            <div>
+              <UFieldGroup size="sm" class="flex w-full">
+                <ThemeStudioColorMenu alias="primary" class="flex-1 min-w-0" />
 
-          <UCollapsible v-model:open="openSections.neutral" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
-            <template #default="{ open }">
-              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
                 <UButton
-                  label="Neutral"
+                  :icon="isCustomPalette('primary') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
                   color="neutral"
-                  variant="ghost"
-                  size="xs"
-                  trailing-icon="i-lucide-chevron-down"
-                  class="font-semibold"
-                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
+                  variant="subtle"
+                  :active="paletteEditors.primary || isCustomPalette('primary')"
+                  active-color="primary"
+                  active-variant="subtle"
+                  aria-label="Edit primary palette"
+                  @click="paletteEditors.primary = !paletteEditors.primary"
                 />
+              </UFieldGroup>
 
-                <UButton
-                  to="/docs/getting-started/theme/css-variables#text"
-                  size="xs"
-                  color="neutral"
-                  variant="ghost"
-                  icon="i-lucide-help-circle"
-                  :ui="{ leadingIcon: 'size-3' }"
-                  @click.stop
-                />
-              </legend>
-            </template>
-            <template #content>
-              <div>
-                <UFieldGroup size="sm" class="flex w-full">
-                  <ThemePickerColorMenu alias="neutral" class="flex-1 min-w-0" />
-
-                  <UButton
-                    :icon="isCustomPalette('neutral') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
-                    color="neutral"
-                    variant="subtle"
-                    size="sm"
-                    :active="paletteEditors.neutral || isCustomPalette('neutral')"
-                    active-color="primary"
-                    active-variant="subtle"
-                    aria-label="Edit background palette"
-                    @click="paletteEditors.neutral = !paletteEditors.neutral"
-                  />
-                </UFieldGroup>
+              <ThemeStudioPaletteEditor v-model:open="paletteEditors.primary" alias="primary" />
+            </div>
+          </ThemeStudioSection>
 
-                <ThemeStudioPaletteEditor v-model:open="paletteEditors.neutral" alias="neutral" />
-              </div>
-            </template>
-          </UCollapsible>
+          <ThemeStudioSection v-model:open="openSections.neutral" label="Neutral" help-to="/docs/getting-started/theme/css-variables#text">
+            <div>
+              <UFieldGroup size="sm" class="flex w-full">
+                <ThemeStudioColorMenu alias="neutral" class="flex-1 min-w-0" />
 
-          <UCollapsible v-model:open="openSections.semantic" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
-            <template #default="{ open }">
-              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
                 <UButton
-                  label="Semantic"
+                  :icon="isCustomPalette('neutral') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
                   color="neutral"
-                  variant="ghost"
-                  size="xs"
-                  trailing-icon="i-lucide-chevron-down"
-                  class="font-semibold"
-                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
+                  variant="subtle"
+                  size="sm"
+                  :active="paletteEditors.neutral || isCustomPalette('neutral')"
+                  active-color="primary"
+                  active-variant="subtle"
+                  aria-label="Edit background palette"
+                  @click="paletteEditors.neutral = !paletteEditors.neutral"
                 />
+              </UFieldGroup>
 
-                <UButton
-                  to="/docs/getting-started/theme/design-system"
-                  size="xs"
-                  color="neutral"
-                  variant="ghost"
-                  icon="i-lucide-help-circle"
-                  :ui="{ leadingIcon: 'size-3' }"
-                  @click.stop
-                />
-              </legend>
-            </template>
-            <template #content>
-              <div class="flex flex-col gap-1.5">
-                <div v-for="alias in semanticAliases" :key="alias">
-                  <div class="flex items-center gap-2">
-                    <span class="text-[11px] text-muted w-13 shrink-0 capitalize select-none">{{ alias }}</span>
-
-                    <UFieldGroup size="sm" class="flex flex-1 min-w-0">
-                      <ThemePickerColorMenu :alias="alias" class="flex-1 min-w-0" />
-
-                      <UButton
-                        :icon="isCustomPalette(alias) ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
-                        color="neutral"
-                        variant="subtle"
-                        size="sm"
-                        :active="paletteEditors[alias] || isCustomPalette(alias)"
-                        active-color="primary"
-                        active-variant="subtle"
-                        :aria-label="`Edit ${alias} palette`"
-                        @click="paletteEditors[alias] = !paletteEditors[alias]"
-                      />
-                    </UFieldGroup>
-                  </div>
+              <ThemeStudioPaletteEditor v-model:open="paletteEditors.neutral" alias="neutral" />
+            </div>
+          </ThemeStudioSection>
 
-                  <ThemeStudioPaletteEditor v-model:open="paletteEditors[alias]" :alias="alias" />
+          <ThemeStudioSection v-model:open="openSections.semantic" label="Semantic" help-to="/docs/getting-started/theme/design-system">
+            <div class="flex flex-col gap-1.5">
+              <div v-for="alias in semanticAliases" :key="alias">
+                <div class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 capitalize select-none">{{ alias }}</span>
+
+                  <UFieldGroup size="sm" class="flex flex-1 min-w-0">
+                    <ThemeStudioColorMenu :alias="alias" class="flex-1 min-w-0" />
+
+                    <UButton
+                      :icon="isCustomPalette(alias) ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
+                      color="neutral"
+                      variant="subtle"
+                      size="sm"
+                      :active="paletteEditors[alias] || isCustomPalette(alias)"
+                      active-color="primary"
+                      active-variant="subtle"
+                      :aria-label="`Edit ${alias} palette`"
+                      @click="paletteEditors[alias] = !paletteEditors[alias]"
+                    />
+                  </UFieldGroup>
                 </div>
+
+                <ThemeStudioPaletteEditor v-model:open="paletteEditors[alias]" :alias="alias" />
               </div>
-            </template>
-          </UCollapsible>
+            </div>
+          </ThemeStudioSection>
         </div>
       </template>
 
       <template #style>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <UCollapsible v-model:open="openSections.shadows" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
-            <template #default="{ open }">
-              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
-                <UButton
-                  label="Shadow"
+          <ThemeStudioSection v-model:open="openSections.shadows" label="Shadow">
+            <div>
+              <div class="grid grid-cols-3 gap-1">
+                <ThemeStudioPickerButton
+                  v-for="option in SHADOW_STYLE_OPTIONS"
+                  :key="option.value"
+                  :label="option.label"
+                  :selected="(style.shadow || 'none') === option.value"
+                  @click="setStyle({ shadow: option.value })"
+                />
+              </div>
+
+              <div v-if="(style.shadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
+                <USelect
+                  v-model="shadowColor"
+                  size="sm"
                   color="neutral"
-                  variant="ghost"
-                  size="xs"
-                  trailing-icon="i-lucide-chevron-down"
-                  class="font-semibold"
-                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
+                  icon="i-lucide-paint-bucket"
+                  :items="shadowColorItems"
+                  class="w-full"
                 />
-              </legend>
-            </template>
-            <template #content>
-              <div>
-                <div class="grid grid-cols-3 gap-1">
-                  <ThemePickerButton
-                    v-for="option in shadowOptions"
-                    :key="option.value"
-                    :label="option.label"
-                    :selected="(style.shadow || 'none') === option.value"
-                    @click="setStyle({ shadow: option.value })"
-                  />
-                </div>
 
-                <div v-if="(style.shadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
-                  <USelect
-                    v-model="shadowColor"
-                    size="sm"
-                    color="neutral"
-                    icon="i-lucide-paint-bucket"
-                    :items="shadowColorItems"
-                    class="w-full"
+                <template v-if="shadowColor === 'shade' || shadowColor === 'primary-shade'">
+                  <ThemeStudioShadeSlider
+                    v-for="(slider, modeName) in shadowShades"
+                    :key="modeName"
+                    v-model="slider.value"
+                    :mode="modeName"
+                    :chip="shadowColor === 'primary-shade' ? primaryChip : neutralChip"
                   />
+                </template>
 
-                  <template v-if="shadowColor === 'shade' || shadowColor === 'primary-shade'">
-                    <ThemeStudioShadeSlider
-                      v-for="(slider, modeName) in shadowShades"
-                      :key="modeName"
-                      v-model="slider.value"
-                      :mode="modeName"
-                      :chip="shadowColor === 'primary-shade' ? primaryChip : neutralChip"
-                    />
-                  </template>
-
-                  <div class="flex items-center gap-2">
-                    <span class="text-[11px] text-muted w-13 shrink-0 select-none">Opacity</span>
+                <div class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Opacity</span>
 
-                    <USlider v-model="shadowOpacity" :min="5" :max="100" :step="5" size="xs" />
+                  <USlider v-model="shadowOpacity" :min="5" :max="100" :step="5" size="xs" />
 
-                    <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ shadowOpacity }}%</span>
-                  </div>
+                  <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ shadowOpacity }}%</span>
+                </div>
 
-                  <template v-if="(style.shadow || 'none') === 'hard'">
-                    <div v-for="field in geometryFields" :key="field.key" class="flex items-center gap-2">
-                      <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
+                <template v-if="(style.shadow || 'none') === 'hard'">
+                  <div v-for="field in geometryFields" :key="field.key" class="flex items-center gap-2">
+                    <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
 
-                      <USlider v-model="geometry[field.key].value" :min="field.min" :max="field.max" :step="1" size="xs" />
+                    <USlider v-model="geometry[field.key].value" :min="field.min" :max="field.max" :step="1" size="xs" />
 
-                      <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ geometry[field.key].value }}px</span>
-                    </div>
-                  </template>
-                </div>
+                    <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ geometry[field.key].value }}px</span>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </ThemeStudioSection>
+
+          <ThemeStudioSection v-model:open="openSections.innerShadows" label="Inner shadow">
+            <div>
+              <div class="grid grid-cols-3 gap-1">
+                <ThemeStudioPickerButton
+                  v-for="option in SHADOW_STYLE_OPTIONS"
+                  :key="option.value"
+                  :label="option.label"
+                  :selected="(style.innerShadow || 'none') === option.value"
+                  @click="setStyle({ innerShadow: option.value })"
+                />
               </div>
-            </template>
-          </UCollapsible>
 
-          <UCollapsible v-model:open="openSections.innerShadows" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
-            <template #default="{ open }">
-              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
-                <UButton
-                  label="Inner shadow"
+              <div v-if="(style.innerShadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
+                <USelect
+                  v-model="innerShadowColor"
+                  size="sm"
                   color="neutral"
-                  variant="ghost"
-                  size="xs"
-                  trailing-icon="i-lucide-chevron-down"
-                  class="font-semibold"
-                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
+                  icon="i-lucide-paint-bucket"
+                  :items="shadowColorItems"
+                  class="w-full"
                 />
-              </legend>
-            </template>
-            <template #content>
-              <div>
-                <div class="grid grid-cols-3 gap-1">
-                  <ThemePickerButton
-                    v-for="option in innerShadowOptions"
-                    :key="option.value"
-                    :label="option.label"
-                    :selected="(style.innerShadow || 'none') === option.value"
-                    @click="setStyle({ innerShadow: option.value })"
-                  />
-                </div>
 
-                <div v-if="(style.innerShadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
-                  <USelect
-                    v-model="innerShadowColor"
-                    size="sm"
-                    color="neutral"
-                    icon="i-lucide-paint-bucket"
-                    :items="shadowColorItems"
-                    class="w-full"
+                <template v-if="innerShadowColor === 'shade' || innerShadowColor === 'primary-shade'">
+                  <ThemeStudioShadeSlider
+                    v-for="(slider, modeName) in innerShadowShades"
+                    :key="modeName"
+                    v-model="slider.value"
+                    :mode="modeName"
+                    :chip="innerShadowColor === 'primary-shade' ? primaryChip : neutralChip"
                   />
+                </template>
 
-                  <template v-if="innerShadowColor === 'shade' || innerShadowColor === 'primary-shade'">
-                    <ThemeStudioShadeSlider
-                      v-for="(slider, modeName) in innerShadowShades"
-                      :key="modeName"
-                      v-model="slider.value"
-                      :mode="modeName"
-                      :chip="innerShadowColor === 'primary-shade' ? primaryChip : neutralChip"
-                    />
-                  </template>
-
-                  <div class="flex items-center gap-2">
-                    <span class="text-[11px] text-muted w-13 shrink-0 select-none">Opacity</span>
+                <div class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Opacity</span>
 
-                    <USlider v-model="innerShadowOpacity" :min="5" :max="100" :step="5" size="xs" />
+                  <USlider v-model="innerShadowOpacity" :min="5" :max="100" :step="5" size="xs" />
 
-                    <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ innerShadowOpacity }}%</span>
-                  </div>
+                  <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ innerShadowOpacity }}%</span>
+                </div>
 
-                  <template v-if="style.innerShadow === 'hard'">
-                    <div v-for="field in geometryFields" :key="field.key" class="flex items-center gap-2">
-                      <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
+                <template v-if="style.innerShadow === 'hard'">
+                  <div v-for="field in geometryFields" :key="field.key" class="flex items-center gap-2">
+                    <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
 
-                      <USlider v-model="innerGeometry[field.key].value" :min="field.min" :max="field.max" :step="1" size="xs" />
+                    <USlider v-model="innerGeometry[field.key].value" :min="field.min" :max="field.max" :step="1" size="xs" />
 
-                      <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ innerGeometry[field.key].value }}px</span>
-                    </div>
-                  </template>
-                </div>
+                    <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ innerGeometry[field.key].value }}px</span>
+                  </div>
+                </template>
               </div>
-            </template>
-          </UCollapsible>
-
-          <UCollapsible v-model:open="openSections.borders" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
-            <template #default="{ open }">
-              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
-                <UButton
-                  label="Borders"
-                  color="neutral"
-                  variant="ghost"
-                  size="xs"
-                  trailing-icon="i-lucide-chevron-down"
-                  class="font-semibold"
-                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
+            </div>
+          </ThemeStudioSection>
+
+          <ThemeStudioSection v-model:open="openSections.borders" label="Borders">
+            <div>
+              <div class="grid grid-cols-3 gap-1">
+                <ThemeStudioPickerButton
+                  v-for="option in borderOptions"
+                  :key="option.value"
+                  :label="option.label"
+                  :selected="borderStyle === option.value"
+                  @click="setStyle({ border: option.value })"
                 />
-              </legend>
-            </template>
-            <template #content>
-              <div>
-                <div class="grid grid-cols-3 gap-1">
-                  <ThemePickerButton
-                    v-for="option in borderOptions"
-                    :key="option.value"
-                    :label="option.label"
-                    :selected="borderStyle === option.value"
-                    @click="setStyle({ border: option.value })"
-                  />
-                </div>
+              </div>
 
-                <div v-if="borderStyle === 'custom'" class="mt-1.5 flex flex-col gap-2">
-                  <div class="flex items-center gap-2">
-                    <span class="text-[11px] text-muted w-13 shrink-0 select-none">Width</span>
+              <div v-if="borderStyle === 'custom'" class="mt-1.5 flex flex-col gap-2">
+                <div class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Width</span>
 
-                    <USlider v-model="borderWidth" :min="1" :max="4" :step="1" size="xs" />
+                  <USlider v-model="borderWidth" :min="1" :max="4" :step="1" size="xs" />
 
-                    <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ borderWidth }}px</span>
-                  </div>
+                  <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ borderWidth }}px</span>
+                </div>
 
-                  <div class="flex items-center gap-2">
-                    <span class="text-[11px] text-muted w-13 shrink-0 select-none">Frame</span>
+                <div class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Frame</span>
 
-                    <UTooltip text="Outline solid surfaces too — the neobrutalist look">
-                      <USwitch v-model="frameSolids" size="sm" aria-label="Frame solid surfaces" />
-                    </UTooltip>
-                  </div>
+                  <UTooltip text="Outline solid surfaces too — the neobrutalist look">
+                    <USwitch v-model="frameSolids" size="sm" aria-label="Frame solid surfaces" />
+                  </UTooltip>
+                </div>
 
-                  <USelect
-                    v-model="borderColor"
-                    size="sm"
-                    color="neutral"
-                    icon="i-lucide-paint-bucket"
-                    :items="borderColorItems"
-                    class="w-full"
-                  />
+                <USelect
+                  v-model="borderColor"
+                  size="sm"
+                  color="neutral"
+                  icon="i-lucide-paint-bucket"
+                  :items="borderColorItems"
+                  class="w-full"
+                />
 
-                  <template v-if="borderColor === 'shade' || borderColor === 'primary-shade'">
-                    <ThemeStudioShadeSlider
-                      v-for="(slider, modeName) in borderShades"
-                      :key="modeName"
-                      v-model="slider.value"
-                      :mode="modeName"
-                      :chip="borderColor === 'primary-shade' ? primaryChip : neutralChip"
-                    />
-                  </template>
-                </div>
+                <template v-if="borderColor === 'shade' || borderColor === 'primary-shade'">
+                  <ThemeStudioShadeSlider
+                    v-for="(slider, modeName) in borderShades"
+                    :key="modeName"
+                    v-model="slider.value"
+                    :mode="modeName"
+                    :chip="borderColor === 'primary-shade' ? primaryChip : neutralChip"
+                  />
+                </template>
               </div>
-            </template>
-          </UCollapsible>
+            </div>
+          </ThemeStudioSection>
         </div>
       </template>
 
       <template #tokens>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <UCollapsible
+          <ThemeStudioSection
             v-for="group in tokenGroups"
             :key="group.key"
             v-model:open="openSections[`tokens-${group.key}`]"
-            as="fieldset"
-            :unmount-on-hide="false"
-            class="rounded-md ring ring-default bg-default p-2.5"
+            :label="group.label"
           >
-            <template #default="{ open }">
-              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
-                <UButton
-                  :label="group.label"
-                  color="neutral"
-                  variant="ghost"
-                  size="xs"
-                  trailing-icon="i-lucide-chevron-down"
-                  class="font-semibold"
-                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
+            <div class="flex flex-col gap-3">
+              <div v-for="section in group.sections" :key="section.token" class="flex flex-col gap-1.5">
+                <span class="text-[11px] text-muted select-none">{{ section.label }}</span>
+
+                <ThemeStudioShadeSlider
+                  v-for="(slider, modeName) in section.sliders"
+                  :key="modeName"
+                  v-model="slider.value"
+                  :mode="modeName"
+                  :chip="rampChip(section.ramp)"
                 />
-              </legend>
-            </template>
-            <template #content>
-              <div class="flex flex-col gap-3">
-                <div v-for="section in group.sections" :key="section.token" class="flex flex-col gap-1.5">
-                  <span class="text-[11px] text-muted select-none">{{ section.label }}</span>
-
-                  <ThemeStudioShadeSlider
-                    v-for="(slider, modeName) in section.sliders"
-                    :key="modeName"
-                    v-model="slider.value"
-                    :mode="modeName"
-                    :chip="rampChip(section.ramp)"
-                  />
-                </div>
               </div>
-            </template>
-          </UCollapsible>
+            </div>
+          </ThemeStudioSection>
         </div>
       </template>
 
       <template #general>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <UCollapsible v-model:open="openSections.font" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
-            <template #default="{ open }">
-              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
-                <UButton
-                  label="Font"
-                  color="neutral"
-                  variant="ghost"
-                  size="xs"
-                  trailing-icon="i-lucide-chevron-down"
-                  class="font-semibold"
-                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
-                />
-
-                <UButton
-                  to="/docs/getting-started/integrations/fonts"
-                  size="xs"
-                  color="neutral"
-                  variant="ghost"
-                  icon="i-lucide-help-circle"
-                  :ui="{ leadingIcon: 'size-3' }"
-                  @click.stop
-                />
-              </legend>
-            </template>
-            <template #content>
-              <div>
-                <USelect
-                  v-model="font"
-                  size="sm"
-                  color="neutral"
-                  variant="subtle"
-                  icon="i-lucide-type"
-                  :items="fonts"
-                  class="w-full"
-                />
-              </div>
-            </template>
-          </UCollapsible>
-
-          <UCollapsible v-model:open="openSections.icons" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
-            <template #default="{ open }">
-              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
-                <UButton
-                  label="Icons"
-                  color="neutral"
-                  variant="ghost"
+          <ThemeStudioSection v-model:open="openSections.font" label="Font" help-to="/docs/getting-started/integrations/fonts">
+            <div>
+              <USelect
+                v-model="font"
+                size="sm"
+                color="neutral"
+                variant="subtle"
+                icon="i-lucide-type"
+                :items="fonts"
+                class="w-full"
+              />
+            </div>
+          </ThemeStudioSection>
+
+          <ThemeStudioSection v-model:open="openSections.icons" label="Icons" help-to="/docs/getting-started/integrations/icons">
+            <div>
+              <USelect
+                v-model="icon"
+                size="sm"
+                color="neutral"
+                variant="subtle"
+                :icon="icons.find(i => i.value === icon)?.icon"
+                :items="icons"
+                class="w-full capitalize"
+                :ui="{ item: 'capitalize' }"
+              />
+            </div>
+          </ThemeStudioSection>
+
+          <ThemeStudioSection v-model:open="openSections.scale" label="Scale">
+            <div class="flex flex-col gap-2">
+              <div class="flex items-center gap-2">
+                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Radius</span>
+
+                <USlider
+                  v-model="radius"
+                  :min="0"
+                  :max="0.5"
+                  :step="0.125"
                   size="xs"
-                  trailing-icon="i-lucide-chevron-down"
-                  class="font-semibold"
-                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
                 />
 
-                <UButton
-                  to="/docs/getting-started/integrations/icons"
-                  size="xs"
-                  color="neutral"
-                  variant="ghost"
-                  icon="i-lucide-help-circle"
-                  :ui="{ leadingIcon: 'size-3' }"
-                  @click.stop
-                />
-              </legend>
-            </template>
-            <template #content>
-              <div>
-                <USelect
-                  v-model="icon"
-                  size="sm"
-                  color="neutral"
-                  variant="subtle"
-                  :icon="icons.find(i => i.value === icon)?.icon"
-                  :items="icons"
-                  class="w-full capitalize"
-                  :ui="{ item: 'capitalize' }"
-                />
+                <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ radius }}rem</span>
               </div>
-            </template>
-          </UCollapsible>
 
-          <UCollapsible v-model:open="openSections.scale" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
-            <template #default="{ open }">
-              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
-                <UButton
-                  label="Scale"
-                  color="neutral"
-                  variant="ghost"
-                  size="xs"
-                  trailing-icon="i-lucide-chevron-down"
-                  class="font-semibold"
-                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
-                />
-              </legend>
-            </template>
-            <template #content>
-              <div class="flex flex-col gap-2">
-                <div class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Radius</span>
-
-                  <USlider
-                    v-model="radius"
-                    :min="0"
-                    :max="0.5"
-                    :step="0.125"
-                    size="xs"
-                  />
+              <div class="flex items-center gap-2">
+                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Text</span>
 
-                  <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ radius }}rem</span>
-                </div>
+                <USlider v-model="fontSize" :min="14" :max="18" :step="0.5" size="xs" />
 
-                <div class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Text</span>
+                <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ fontSize }}px</span>
+              </div>
 
-                  <USlider v-model="fontSize" :min="14" :max="18" :step="0.5" size="xs" />
+              <div class="flex items-center gap-2">
+                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Spacing</span>
 
-                  <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ fontSize }}px</span>
-                </div>
+                <USlider v-model="spacing" :min="0.15" :max="0.35" :step="0.025" size="xs" />
 
-                <div class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Spacing</span>
+                <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ spacing }}</span>
+              </div>
+            </div>
+          </ThemeStudioSection>
 
-                  <USlider v-model="spacing" :min="0.15" :max="0.35" :step="0.025" size="xs" />
+          <ThemeStudioSection v-model:open="openSections.defaults" label="Components">
+            <div class="flex flex-col gap-1.5">
+              <div v-for="field in variantGroupFields" :key="field.key" class="flex items-center gap-2">
+                <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
 
-                  <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ spacing }}</span>
-                </div>
+                <USelect
+                  v-model="groupVariants[field.key].value"
+                  size="sm"
+                  color="neutral"
+                  variant="subtle"
+                  icon="i-lucide-layers"
+                  :items="field.items"
+                  class="flex-1"
+                />
               </div>
-            </template>
-          </UCollapsible>
 
-          <UCollapsible v-model:open="openSections.defaults" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
-            <template #default="{ open }">
-              <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
-                <UButton
-                  label="Components"
+              <div class="flex items-center gap-2">
+                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Size</span>
+
+                <USelect
+                  v-model="defaultSize"
+                  size="sm"
                   color="neutral"
-                  variant="ghost"
-                  size="xs"
-                  trailing-icon="i-lucide-chevron-down"
-                  class="font-semibold"
-                  :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !open && '-rotate-90'] }"
+                  variant="subtle"
+                  icon="i-lucide-proportions"
+                  :items="defaultSizeItems"
+                  class="flex-1"
                 />
-              </legend>
-            </template>
-            <template #content>
-              <div class="flex flex-col gap-1.5">
-                <div v-for="field in variantGroupFields" :key="field.key" class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
-
-                  <USelect
-                    v-model="groupVariants[field.key].value"
-                    size="sm"
-                    color="neutral"
-                    variant="subtle"
-                    icon="i-lucide-layers"
-                    :items="field.items"
-                    class="flex-1"
-                  />
-                </div>
-
-                <div class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Size</span>
-
-                  <USelect
-                    v-model="defaultSize"
-                    size="sm"
-                    color="neutral"
-                    variant="subtle"
-                    icon="i-lucide-proportions"
-                    :items="defaultSizeItems"
-                    class="flex-1"
-                  />
-                </div>
               </div>
-            </template>
-          </UCollapsible>
+            </div>
+          </ThemeStudioSection>
         </div>
       </template>
     </UAccordion>
diff --git a/docs/app/components/theme-studio/ThemeStudioExport.vue b/docs/app/components/theme-studio/ThemeStudioExport.vue
index c09d7149d5..092268effd 100644
--- a/docs/app/components/theme-studio/ThemeStudioExport.vue
+++ b/docs/app/components/theme-studio/ThemeStudioExport.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const { copy: copyCSS, copied: copiedCSS } = useClipboard()
 const { copy: copyConfig, copied: copiedConfig } = useClipboard()
+const { track } = useAnalytics()
 
 const { exportCSS, exportConfig, configLabel, hasCSSChanges, hasConfigChanges } = useTheme()
 
@@ -57,7 +58,7 @@ watch(open, (isOpen) => {
                 variant="ghost"
                 :icon="copiedCSS ? 'i-lucide-copy-check' : 'i-lucide-copy'"
                 aria-label="Copy CSS"
-                @click="copyCSS(css)"
+                @click="copyCSS(css); track('Theme Exported', { type: 'CSS' })"
               />
             </div>
 
@@ -76,7 +77,7 @@ watch(open, (isOpen) => {
                 variant="ghost"
                 :icon="copiedConfig ? 'i-lucide-copy-check' : 'i-lucide-copy'"
                 aria-label="Copy config"
-                @click="copyConfig(config)"
+                @click="copyConfig(config); track('Theme Exported', { type: 'Config' })"
               />
             </div>
 
diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index f85408d5d8..65138f9a5c 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -2,8 +2,8 @@
 import type { ThemeDoc } from '../../utils/theme-engine'
 
 const { track } = useAnalytics()
-const { reset, style, applyDoc, studioOpen: open } = useThemeStudio()
-const { modes, mode, currentDoc } = useTheme()
+const { style, applyDoc, studioOpen: open } = useThemeStudio()
+const { modes, mode, currentDoc, resetTheme } = useTheme()
 const colorMode = useColorMode()
 
 const route = useRoute()
@@ -30,7 +30,7 @@ onMounted(() => {
 const past = ref<ThemeDoc[]>([])
 const future = ref<ThemeDoc[]>([])
 let lastSnapshot = ''
-let suppressUntil = 0
+let pendingRestore = false
 
 onMounted(() => {
   lastSnapshot = JSON.stringify(currentDoc())
@@ -41,12 +41,14 @@ watch(() => (mounted.value ? JSON.stringify(currentDoc()) : undefined), (snapsho
   if (!snapshot) return
   clearTimeout(captureTimeout)
   captureTimeout = setTimeout(() => {
-    if (snapshot === lastSnapshot) return
-    if (Date.now() < suppressUntil) {
-      // our own undo/redo restore — realign without recording
+    if (pendingRestore) {
+      // the first settle after our own undo/redo restore — realign without
+      // recording, however long the flush took
+      pendingRestore = false
       lastSnapshot = snapshot
       return
     }
+    if (snapshot === lastSnapshot) return
     past.value.push(JSON.parse(lastSnapshot))
     if (past.value.length > 50) past.value.shift()
     future.value = []
@@ -55,9 +57,10 @@ watch(() => (mounted.value ? JSON.stringify(currentDoc()) : undefined), (snapsho
 })
 
 function restore(doc: ThemeDoc) {
-  suppressUntil = Date.now() + 800
+  pendingRestore = true
   applyDoc(doc)
-  lastSnapshot = JSON.stringify(doc)
+  // realignment happens on the next capture, from currentDoc() itself —
+  // the applied doc may re-serialize differently than it round-trips
 }
 
 function undo() {
@@ -199,7 +202,7 @@ const viewTabs = [
                 variant="outline"
                 size="sm"
                 aria-label="Reset theme"
-                @click="reset"
+                @click="resetTheme"
               />
             </UTooltip>
           </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 3277a1c205..62c7971b53 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -71,16 +71,10 @@ const offsetAmount = ref(100)
 /** Fitted base the style offsets transform from, so they never compound. */
 let seedBase: PaletteCurveParams = structuredClone(toRaw(params))
 
-// Set while OUR throttled apply writes paletteParams, so the echo watcher
-// below can tell self-originated updates from external ones (swatch clicks).
-let applying = false
-
 // Throttled (not debounced) so the theme streams live while dragging a
 // curve — the trailing call catches the release position.
 const throttledApply = useThrottleFn(() => {
-  applying = true
   setPaletteFromCurve(props.alias, structuredClone(toRaw(params)))
-  applying = false
 }, 60, true, true)
 
 // Programmatic writes into `params` (seeding, external sync) must not
@@ -134,10 +128,11 @@ function seedFromCurrent() {
   }
 }
 
-// Swatch clicks while active refit via the studio — reflect them here.
-// Self-originated writes (our own throttled applies) are skipped outright.
+// Swatch clicks while active refit via the studio — reflect them here. The
+// snapshot comparison is what breaks the echo loop for our own throttled
+// applies (the callback runs queued, after any sync flag would have reset).
 watch(() => paletteParams.value[props.alias], (value) => {
-  if (!applying && value && 'lightness' in value && JSON.stringify(value) !== JSON.stringify(toRaw(params))) {
+  if (value && 'lightness' in value && JSON.stringify(value) !== JSON.stringify(toRaw(params))) {
     seed(value as PaletteCurveParams)
   }
 })
diff --git a/docs/app/components/theme-picker/ThemePicker.vue b/docs/app/components/theme-studio/ThemeStudioPicker.vue
similarity index 66%
rename from docs/app/components/theme-picker/ThemePicker.vue
rename to docs/app/components/theme-studio/ThemeStudioPicker.vue
index 1ce60efaee..b6cd454b67 100644
--- a/docs/app/components/theme-picker/ThemePicker.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPicker.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { resolveAlias, resolveShade } from '../../utils/theme-engine'
-import type { ThemeDoc } from '../../utils/theme-engine'
-
 const colorMode = useColorMode()
 const { track } = useAnalytics()
 
@@ -29,25 +26,7 @@ const {
   resetTheme
 } = useTheme()
 
-const { presets, activePreset, applyPreset, shuffle, studioOpen } = useThemeStudio()
-
-/** The preset's primary + neutral at 500, straight from its own document. */
-function presetSwatches(doc: ThemeDoc): string[] {
-  const primaryColor = doc.blackAsPrimary ? 'black' : resolveShade(doc, resolveAlias(doc, 'primary'), 500)
-  const neutralColor = resolveShade(doc, resolveAlias(doc, 'neutral'), 500)
-  return [primaryColor, neutralColor].filter((color): color is string => !!color)
-}
-
-const presetItems = computed(() => presets.map(preset => ({
-  label: preset.name,
-  icon: preset.icon,
-  type: 'checkbox' as const,
-  checked: activePreset.value === preset.id,
-  swatches: presetSwatches(preset.doc),
-  onSelect: () => applyPreset(preset)
-})))
-
-const presetLabel = computed(() => presets.find(preset => preset.id === activePreset.value)?.name || 'Presets')
+const { studioOpen } = useThemeStudio()
 
 function openStudio() {
   open.value = false
@@ -69,41 +48,7 @@ function openStudio() {
     </template>
 
     <template #content>
-      <div class="flex gap-1.5">
-        <UDropdownMenu :items="presetItems" :content="{ align: 'start' }" class="flex-1 min-w-0" :ui="{ itemTrailing: 'self-center', content: 'w-(--reka-dropdown-menu-trigger-width)' }">
-          <UButton
-            :label="presetLabel"
-            icon="i-lucide-swatch-book"
-            trailing-icon="i-lucide-chevron-down"
-            color="neutral"
-            variant="subtle"
-
-            block
-          />
-
-          <template #item-trailing="{ item }">
-            <span class="inline-flex items-center gap-1 h-full">
-              <span
-                v-for="(swatch, index) in item.swatches"
-                :key="index"
-                class="size-2 rounded-full ring ring-default"
-                :style="{ backgroundColor: swatch }"
-              />
-            </span>
-          </template>
-        </UDropdownMenu>
-
-        <UTooltip text="Random theme">
-          <UButton
-            icon="i-lucide-dices"
-            color="neutral"
-            variant="subtle"
-
-            aria-label="Random theme"
-            @click="shuffle"
-          />
-        </UTooltip>
-      </div>
+      <ThemeStudioPresetMenu />
 
       <UButton
         label="Open Theme Studio"
@@ -130,7 +75,7 @@ function openStudio() {
           />
         </legend>
 
-        <ThemePickerColorMenu alias="primary" class="w-full" />
+        <ThemeStudioColorMenu alias="primary" class="w-full" />
       </fieldset>
 
       <fieldset>
@@ -148,7 +93,7 @@ function openStudio() {
           />
         </legend>
 
-        <ThemePickerColorMenu alias="neutral" class="w-full" />
+        <ThemeStudioColorMenu alias="neutral" class="w-full" />
       </fieldset>
 
       <fieldset>
@@ -167,7 +112,7 @@ function openStudio() {
         </legend>
 
         <UFieldGroup class="w-full">
-          <ThemePickerButton
+          <ThemeStudioPickerButton
             v-for="r in radiuses"
             :key="r"
             :label="String(r)"
@@ -194,7 +139,7 @@ function openStudio() {
         </legend>
 
         <div class="grid grid-cols-3 gap-1">
-          <ThemePickerButton
+          <ThemeStudioPickerButton
             v-for="m in modes"
             :key="m.label"
             v-bind="m"
@@ -218,7 +163,7 @@ function openStudio() {
             label="main.css"
             class="flex-1 text-[11px]"
             :icon="copiedCSS ? 'i-lucide-copy-check' : 'i-lucide-copy'"
-            @click="copyCSS(exportCSS())"
+            @click="copyCSS(exportCSS()); track('Theme Exported', { type: 'CSS' })"
           />
           <UButton
             v-if="hasConfigChanges"
@@ -228,7 +173,7 @@ function openStudio() {
             :label="configLabel"
             :icon="copiedConfig ? 'i-lucide-copy-check' : 'i-lucide-copy'"
             class="flex-1 text-[11px]"
-            @click="copyConfig(exportConfig())"
+            @click="copyConfig(exportConfig()); track('Theme Exported', { type: 'Config' })"
           />
           <UTooltip text="Reset theme">
             <UButton
diff --git a/docs/app/components/theme-picker/ThemePickerButton.vue b/docs/app/components/theme-studio/ThemeStudioPickerButton.vue
similarity index 91%
rename from docs/app/components/theme-picker/ThemePickerButton.vue
rename to docs/app/components/theme-studio/ThemeStudioPickerButton.vue
index 8e7bf7af94..c4d7ac3680 100644
--- a/docs/app/components/theme-picker/ThemePickerButton.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPickerButton.vue
@@ -4,7 +4,6 @@ defineProps<{
   icon?: string
   chip?: string
   selected?: boolean
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null
 }>()
 
 const slots = defineSlots<{
@@ -14,7 +13,7 @@ const slots = defineSlots<{
 
 <template>
   <UButton
-    :size="size ?? 'md'"
+    size="md"
     color="neutral"
     variant="subtle"
     :active="selected"
diff --git a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
new file mode 100644
index 0000000000..00d7b5e8ef
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { resolveAlias, resolveShade } from '../../utils/theme-engine'
+import type { ThemeDoc } from '../../utils/theme-engine'
+
+/** The presets dropdown (with per-preset color swatches) plus the shuffle die. */
+const { presets, activePreset, applyPreset, shuffle } = useThemeStudio()
+
+/** The preset's primary + neutral at 500, straight from its own document. */
+function presetSwatches(doc: ThemeDoc): string[] {
+  const primaryColor = doc.blackAsPrimary ? 'black' : resolveShade(doc, resolveAlias(doc, 'primary'), 500)
+  const neutralColor = resolveShade(doc, resolveAlias(doc, 'neutral'), 500)
+  return [primaryColor, neutralColor].filter((color): color is string => !!color)
+}
+
+const presetItems = computed(() => presets.map(preset => ({
+  label: preset.name,
+  icon: preset.icon,
+  type: 'checkbox' as const,
+  checked: activePreset.value === preset.id,
+  swatches: presetSwatches(preset.doc),
+  onSelect: () => applyPreset(preset)
+})))
+
+const presetLabel = computed(() => presets.find(preset => preset.id === activePreset.value)?.name || 'Presets')
+</script>
+
+<template>
+  <div class="flex gap-2">
+    <UDropdownMenu
+      :items="presetItems"
+      :content="{ align: 'start' }"
+      class="flex-1 min-w-0"
+      :ui="{ itemTrailing: 'self-center', content: 'w-(--reka-dropdown-menu-trigger-width)' }"
+    >
+      <UButton
+        :label="presetLabel"
+        icon="i-lucide-swatch-book"
+        trailing-icon="i-lucide-chevron-down"
+        color="neutral"
+        variant="subtle"
+        size="sm"
+        block
+      />
+
+      <template #item-trailing="{ item }">
+        <span class="inline-flex items-center gap-1 h-full">
+          <span
+            v-for="(swatch, index) in item.swatches"
+            :key="index"
+            class="size-2 rounded-full ring ring-default"
+            :style="{ backgroundColor: swatch }"
+          />
+        </span>
+      </template>
+    </UDropdownMenu>
+
+    <UTooltip text="Random theme">
+      <UButton
+        icon="i-lucide-dices"
+        color="neutral"
+        variant="subtle"
+        size="sm"
+        aria-label="Random theme"
+        @click="shuffle"
+      />
+    </UTooltip>
+  </div>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioSection.vue b/docs/app/components/theme-studio/ThemeStudioSection.vue
new file mode 100644
index 0000000000..069184368e
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioSection.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+/** One settings section: a fieldset card whose legend chip is the trigger. */
+defineProps<{
+  label: string
+  /** Docs page the legend's help icon links to */
+  helpTo?: string
+}>()
+
+const open = defineModel<boolean>('open', { default: true })
+</script>
+
+<template>
+  <UCollapsible v-model:open="open" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
+    <template #default="{ open: isOpen }">
+      <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
+        <UButton
+          :label="label"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          trailing-icon="i-lucide-chevron-down"
+          class="font-semibold"
+          :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !isOpen && '-rotate-90'] }"
+        />
+
+        <UButton
+          v-if="helpTo"
+          :to="helpTo"
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-help-circle"
+          :ui="{ leadingIcon: 'size-3' }"
+          @click.stop
+        />
+      </legend>
+    </template>
+    <template #content>
+      <slot />
+    </template>
+  </UCollapsible>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewA11y.vue b/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
index 7f701e1928..df4729bbff 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
@@ -83,7 +83,7 @@ let timeout: ReturnType<typeof setTimeout> | undefined
 watch([() => colorMode.value, () => ({ ...appConfig.ui.colors }), cssVariables, customColors], () => {
   clearTimeout(timeout)
   timeout = setTimeout(compute, 80)
-}, { deep: true })
+})
 
 onMounted(compute)
 onUnmounted(() => clearTimeout(timeout))
diff --git a/docs/app/components/theme-studio/ThemeStudioViewLanding.vue b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
index 7081d232fe..286c27489b 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui'
 
+/** Shared rhythm for the centered content sections. */
+const sectionUi = {
+  root: 'py-24 sm:py-32',
+  container: 'max-w-5xl',
+  headline: 'text-center font-mono font-medium text-xs text-primary uppercase tracking-[0.12em]',
+  title: 'max-w-lg mx-auto',
+  description: 'max-w-md mx-auto text-dimmed'
+}
+
 const navItems: NavigationMenuItem[] = [
   { label: 'Features' },
   { label: 'Metrics' }
@@ -84,35 +93,28 @@ const metrics = [
 
 const footerLinks = ['Docs', 'GitHub', 'Twitter', 'Status', 'Privacy']
 
-const copied = ref(false)
-let copyTimeout: ReturnType<typeof setTimeout> | undefined
-
-function copyCommand() {
-  navigator.clipboard?.writeText('npx telemetry init')
-  copied.value = true
-  clearTimeout(copyTimeout)
-  copyTimeout = setTimeout(() => {
-    copied.value = false
-  }, 2000)
-}
-
-onUnmounted(() => clearTimeout(copyTimeout))
+const { copy: copyCommand, copied } = useClipboard()
 
 /** Fade-and-rise elements into view on scroll, like the template's `whileInView` motion. */
 const vReveal = {
-  mounted(el: HTMLElement, binding: { value?: number }) {
+  mounted(el: HTMLElement & { _reveal?: IntersectionObserver }, binding: { value?: number }) {
     el.classList.add('landing-reveal')
     if (binding.value) {
       el.style.transitionDelay = `${binding.value}ms`
     }
 
-    const observer = new IntersectionObserver(([entry]) => {
+    el._reveal = new IntersectionObserver(([entry]) => {
       if (entry?.isIntersecting) {
         el.classList.add('landing-revealed')
-        observer.disconnect()
+        el._reveal?.disconnect()
       }
     }, { threshold: 0.3 })
-    observer.observe(el)
+    el._reveal.observe(el)
+  },
+  // below-the-fold elements never intersect when the user switches views —
+  // without this their observers outlive the DOM
+  unmounted(el: HTMLElement & { _reveal?: IntersectionObserver }) {
+    el._reveal?.disconnect()
   }
 }
 </script>
@@ -222,13 +224,7 @@ const vReveal = {
 
     <!-- Features -->
     <UPageSection
-      :ui="{
-        root: 'py-24 sm:py-32',
-        container: 'max-w-5xl',
-        headline: 'text-center font-mono font-medium text-xs text-primary uppercase tracking-[0.12em]',
-        title: 'max-w-lg mx-auto',
-        description: 'max-w-md mx-auto text-dimmed'
-      }"
+      :ui="sectionUi"
     >
       <template #headline>
         <span v-reveal class="inline-block">Capabilities</span>
@@ -264,13 +260,7 @@ const vReveal = {
 
     <!-- Metrics -->
     <UPageSection
-      :ui="{
-        root: 'py-24 sm:py-32',
-        container: 'max-w-5xl',
-        headline: 'text-center font-mono font-medium text-xs text-primary uppercase tracking-[0.12em]',
-        title: 'max-w-lg mx-auto',
-        description: 'max-w-md mx-auto text-dimmed'
-      }"
+      :ui="sectionUi"
     >
       <template #headline>
         <span v-reveal class="inline-block">By the numbers</span>
@@ -338,7 +328,7 @@ const vReveal = {
             size="xl"
             class="font-mono font-light text-toned gap-4"
             :ui="{ trailingIcon: 'size-5' }"
-            @click="copyCommand"
+            @click="copyCommand('npx telemetry init')"
           />
         </div>
       </template>
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 379eb7cdb1..2975dcbdac 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -1,21 +1,11 @@
 import { defu } from 'defu'
 import { useLocalStorage } from '@vueuse/core'
-import { themeIcons, cssVariableDefaults } from '../utils/theme'
+import { themeIcons, cssVariableDefaults, readLocalStorage } from '../utils/theme'
 import { generateCSS, generateConfig, mergeUi, isDefaultStyle, DEFAULT_COLORS, THEME_DEFAULTS, LIBRARY_TOKEN_DEFAULTS, CUSTOM_PALETTES } from '../utils/theme-engine'
 import type { ThemeDoc, ThemePalette } from '../utils/theme-engine'
 import { omit } from '#ui/utils'
 import colors from 'tailwindcss/colors'
 
-function readLocalStorage<T>(key: string, fallback: T): T {
-  if (!import.meta.client) return fallback
-  try {
-    const raw = window.localStorage.getItem(key)
-    return raw ? JSON.parse(raw) : fallback
-  } catch {
-    return fallback
-  }
-}
-
 // AI `applyTheme` output is untrusted and ends up concatenated into <style> rules, so
 // only persist values that are plain CSS-safe tokens. This is the single write boundary,
 // which keeps every downstream sink (live useHead styles and the FOUC inline scripts) safe.
@@ -58,6 +48,16 @@ export function useTheme() {
   const appConfig = useAppConfig()
   const colorMode = useColorMode()
   const { track } = useAnalytics()
+
+  // The scale sliders stream through their setters at drag frequency —
+  // one analytics event per burst is plenty.
+  let trackedAt: number | undefined
+  function trackThrottled(...args: Parameters<typeof track>) {
+    if (!trackedAt || Date.now() - trackedAt > 2000) {
+      trackedAt = Date.now()
+      track(...args)
+    }
+  }
   const { framework } = useFrameworks()
 
   const aiThemeExtras = useState<Record<string, any>>('nuxt-ui-ai-theme', () => readLocalStorage('nuxt-ui-ai-theme', {}))
@@ -78,6 +78,8 @@ export function useTheme() {
     return (colors as any)[neutral]?.[shade] || customColorsData.value[neutral]?.[shade] || CUSTOM_PALETTES[neutral]?.[shade] || (colors as any).slate[shade]
   })
   const cssVariablesData = useState<{ light?: Record<string, string>, dark?: Record<string, string> }>('nuxt-ui-css-variables', () => readLocalStorage('nuxt-ui-css-variables', {}))
+  /** The studio's style axis (it owns writes); read here for currentDoc/export. */
+  const stylePrefs = useState<ThemeDoc['style']>('nuxt-ui-style-prefs', () => readLocalStorage('nuxt-ui-style', {}))
   const _radius = useLocalStorage('nuxt-ui-radius', 0.25)
   const _fontSize = useLocalStorage('nuxt-ui-font-size', 16)
   const _spacing = useLocalStorage('nuxt-ui-spacing', 0.25)
@@ -119,7 +121,7 @@ export function useTheme() {
     },
     set(option) {
       _radius.value = option
-      track('Theme Changed', { setting: 'radius', value: option })
+      trackThrottled('Theme Changed', { setting: 'radius', value: option })
     }
   })
 
@@ -129,7 +131,7 @@ export function useTheme() {
     },
     set(option) {
       _fontSize.value = option
-      track('Theme Changed', { setting: 'fontSize', value: option })
+      trackThrottled('Theme Changed', { setting: 'fontSize', value: option })
     }
   })
 
@@ -139,7 +141,7 @@ export function useTheme() {
     },
     set(option) {
       _spacing.value = option
-      track('Theme Changed', { setting: 'spacing', value: option })
+      trackThrottled('Theme Changed', { setting: 'spacing', value: option })
     }
   })
 
@@ -334,10 +336,10 @@ export function useTheme() {
       doc.components = extras.ui
     }
 
-    // The studio's style prefs. ANY set axis must ride along — a defaults-only
-    // or borderColor-only theme still needs its component expansion and the
-    // classes that reference --ui-frame-color in the export.
-    const style = readLocalStorage<ThemeDoc['style']>('nuxt-ui-style', {})
+    // The studio's style prefs, read from the shared reactive state (the
+    // studio owns writes) so callers watching currentDoc() re-run on style
+    // edits — a raw localStorage read here would be invisible to reactivity.
+    const style = stylePrefs.value
     if (!isDefaultStyle(style)) {
       doc.style = style
     }
@@ -345,15 +347,13 @@ export function useTheme() {
     return doc
   }
 
+  // Pure generation — callers track 'Theme Exported' on the actual copy,
+  // so opening the export modal doesn't inflate the metric.
   function exportCSS(): string {
-    track('Theme Exported', { type: 'CSS' })
-
     return generateCSS(currentDoc())
   }
 
   function exportConfig(): string {
-    track('Theme Exported', { type: 'Config', framework: framework.value })
-
     return generateConfig(currentDoc(), framework.value)
   }
 
@@ -471,8 +471,14 @@ export function useTheme() {
       }
     }
 
-    aiThemeExtras.value = savedExtras
-    window.localStorage.setItem('nuxt-ui-ai-theme', JSON.stringify(savedExtras))
+    // Only rewrite the channel when this call actually touched it — style
+    // sliders and curve drags stream through here and must not re-persist
+    // (or reactively wake) the AI extras every tick.
+    const touchedExtras = settings.ui || colorKeys.some(color => settings[color] && SAFE_NAME.test(settings[color]))
+    if (touchedExtras) {
+      aiThemeExtras.value = savedExtras
+      window.localStorage.setItem('nuxt-ui-ai-theme', JSON.stringify(savedExtras))
+    }
     if (settings.ui) {
       recomposeComponentOverrides(Object.keys(savedExtras.ui || {}))
     }
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 847b4eacc5..44cf797ea1 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,16 +1,7 @@
 import colors from 'tailwindcss/colors'
 import { presets, docToSettings, isDefaultTheme, generatePalette, fitPalette, parseCssColor, parseUiColorRef, styleComponents, styleTokens, DEFAULT_COLORS, SHADES, TOKEN_SHADE_TARGETS } from '../utils/theme-engine'
 import type { ThemeDoc, ThemePreset, PaletteCurveParams, StyleOptions, Shade, ColorAlias } from '../utils/theme-engine'
-
-function readLocalStorage<T>(key: string, fallback: T): T {
-  if (!import.meta.client) return fallback
-  try {
-    const raw = window.localStorage.getItem(key)
-    return raw ? JSON.parse(raw) : fallback
-  } catch {
-    return fallback
-  }
-}
+import { readLocalStorage } from '../utils/theme'
 
 export function useThemeStudio() {
   const theme = useTheme()
@@ -44,14 +35,19 @@ export function useThemeStudio() {
 
   // Self-heal: the persisted class bundle is an expansion of `style` frozen
   // at write time — if the generator changed since (new fragment classes),
-  // regenerate it once so stale classes don't outlive their source.
-  if (import.meta.client) {
+  // regenerate it once so stale classes don't outlive their source. Guarded
+  // so the dozens of components calling this composable check only once.
+  const healed = useState('nuxt-ui-style-healed', () => false)
+  if (import.meta.client && !healed.value) {
+    healed.value = true
     const expected = styleComponents(style.value)
     if (JSON.stringify(expected) !== JSON.stringify(readLocalStorage('nuxt-ui-style-ui', {}))) {
       onNuxtReady(() => theme.setStyleUi(expected))
     }
   }
 
+  let trackedAt: number | undefined
+
   function setStyle(options: StyleOptions) {
     const previousStyle = style.value
     const previous = styleTokens(previousStyle)
@@ -78,16 +74,18 @@ export function useThemeStudio() {
     }
     activePreset.value = undefined
 
-    track('Theme Style Changed', {
-      shadow: style.value.shadow || 'none',
-      border: style.value.border || 'default',
-      borderColor: style.value.borderColor || 'default',
-      shadowColor: style.value.shadowColor || 'default'
-    })
+    // Sliders stream through here at drag frequency — one event per burst.
+    if (!trackedAt || Date.now() - trackedAt > 2000) {
+      trackedAt = Date.now()
+      track('Theme Style Changed', {
+        shadow: style.value.shadow || 'none',
+        border: style.value.border || 'default',
+        borderColor: style.value.borderColor || 'default',
+        shadowColor: style.value.shadowColor || 'default'
+      })
+    }
   }
 
-  let trackedAt: number | undefined
-
   function customPaletteName(alias: string) {
     return `custom-${alias}`
   }
@@ -328,10 +326,6 @@ export function useThemeStudio() {
     track('Theme Studio Shuffled')
   }
 
-  function reset() {
-    theme.resetTheme()
-  }
-
   return {
     presets,
     activePreset,
@@ -346,7 +340,6 @@ export function useThemeStudio() {
     clearCustomPalette,
     applyDoc,
     applyPreset,
-    shuffle,
-    reset
+    shuffle
   }
 }
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index 211ed866d5..24539d146c 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -71,11 +71,13 @@ export function generateCSS(doc: ThemeDoc): string {
       if (key.startsWith('--studio-')) Reflect.deleteProperty(style[mode], key)
     }
   }
+  // Any shadow treatment defaults the shared color when none was chosen.
+  const anyShadow = (doc.style?.shadow && doc.style.shadow !== 'none') || (doc.style?.innerShadow && doc.style.innerShadow !== 'none')
+  if (anyShadow && !style.light['--ui-shadow-color']) {
+    style.light['--ui-shadow-color'] = 'var(--ui-color-neutral-950)'
+    style.dark['--ui-shadow-color'] = 'black'
+  }
   if (doc.style?.shadow === 'hard') {
-    if (!style.light['--ui-shadow-color']) {
-      style.light['--ui-shadow-color'] = 'var(--ui-color-neutral-950)'
-      style.dark['--ui-shadow-color'] = 'black'
-    }
     // The hard-shadow classes reference the geometry variables — a
     // standalone export must define them even at default values.
     if (!style.light['--ui-shadow-offset-x']) {
@@ -91,18 +93,10 @@ export function generateCSS(doc: ThemeDoc): string {
     style.light['--ui-shadow-hard-half'] = 'calc(var(--ui-shadow-offset-x) / 2) calc(var(--ui-shadow-offset-y) / 2) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard)'
   }
   if (doc.style?.shadow && doc.style.shadow !== 'none') {
-    if (doc.style.shadow === 'soft' && !style.light['--ui-shadow-color']) {
-      style.light['--ui-shadow-color'] = 'var(--ui-color-neutral-950)'
-      style.dark['--ui-shadow-color'] = 'black'
-    }
     style.light['--ui-shadow-final-hard'] = 'color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 100%), transparent)'
     style.light['--ui-shadow-final-soft'] = 'color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 25%), transparent)'
   }
   if (doc.style?.innerShadow && doc.style.innerShadow !== 'none') {
-    if (!style.light['--ui-shadow-color']) {
-      style.light['--ui-shadow-color'] = 'var(--ui-color-neutral-950)'
-      style.dark['--ui-shadow-color'] = 'black'
-    }
     if (doc.style.innerShadow === 'hard') {
       if (!style.light['--ui-inner-shadow-offset-x']) {
         style.light['--ui-inner-shadow-offset-x'] = '0px'
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index 5a1d581a24..a03c371ff6 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -159,6 +159,21 @@ function parseDeclaration(result: ParsedCSS, selector: string, prop: string, val
  * them) and work backwards to the StyleOptions that would emit them.
  * What remains in light/dark afterwards is plain token overrides.
  */
+/**
+ * Reconstruct a color choice (named value, or a per-mode neutral/primary
+ * ramp shade) from a pair of emitted per-mode values.
+ */
+function matchColorChoice(value: { light?: string, dark?: string }, table: Record<string, { light: string, dark: string }>): { color: string, shade?: { light: number, dark: number } } | undefined {
+  const named = Object.keys(table).find(key => table[key]!.light === value.light && table[key]!.dark === value.dark)
+  if (named) return { color: named }
+  const lightRef = parseUiColorRef(value.light)
+  const darkRef = parseUiColorRef(value.dark)
+  if (lightRef && darkRef && lightRef.alias === darkRef.alias && (lightRef.alias === 'neutral' || lightRef.alias === 'primary')) {
+    return { color: lightRef.alias === 'primary' ? 'primary-shade' : 'shade', shade: { light: lightRef.shade, dark: darkRef.shade } }
+  }
+  return undefined
+}
+
 function extractStyle(light: Record<string, string>, dark: Record<string, string>): StyleOptions {
   const style: StyleOptions = {}
 
@@ -239,43 +254,28 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
     // The export force-emits neutral-950/black when no color was chosen.
     const forced = shadowColor.light === 'var(--ui-color-neutral-950)' && shadowColor.dark === 'black'
     if (!forced) {
-      const named = (Object.keys(SHADOW_COLOR_VALUES) as Array<keyof typeof SHADOW_COLOR_VALUES>)
-        .find(key => SHADOW_COLOR_VALUES[key].light === shadowColor.light && SHADOW_COLOR_VALUES[key].dark === shadowColor.dark)
-      const lightRef = parseUiColorRef(shadowColor.light)
-      const darkRef = parseUiColorRef(shadowColor.dark)
-      if (named) {
-        style.shadowColor = named
-      } else if (lightRef && darkRef && lightRef.alias === darkRef.alias && (lightRef.alias === 'neutral' || lightRef.alias === 'primary')) {
-        style.shadowColor = lightRef.alias === 'primary' ? 'primary-shade' : 'shade'
-        style.shadowShade = { light: lightRef.shade, dark: darkRef.shade }
+      const match = matchColorChoice(shadowColor, SHADOW_COLOR_VALUES)
+      if (match) {
+        style.shadowColor = match.color as StyleOptions['shadowColor']
+        if (match.shade) style.shadowShade = match.shade
       }
     }
   }
 
   if (innerColor.light !== undefined || innerColor.dark !== undefined) {
     // Never force-emitted — any presence is a real choice.
-    const named = (Object.keys(SHADOW_COLOR_VALUES) as Array<keyof typeof SHADOW_COLOR_VALUES>)
-      .find(key => SHADOW_COLOR_VALUES[key].light === innerColor.light && SHADOW_COLOR_VALUES[key].dark === innerColor.dark)
-    const lightRef = parseUiColorRef(innerColor.light)
-    const darkRef = parseUiColorRef(innerColor.dark)
-    if (named) {
-      style.innerShadowColor = named
-    } else if (lightRef && darkRef && lightRef.alias === darkRef.alias && (lightRef.alias === 'neutral' || lightRef.alias === 'primary')) {
-      style.innerShadowColor = lightRef.alias === 'primary' ? 'primary-shade' : 'shade'
-      style.innerShadowShade = { light: lightRef.shade, dark: darkRef.shade }
+    const match = matchColorChoice(innerColor, SHADOW_COLOR_VALUES)
+    if (match) {
+      style.innerShadowColor = match.color as StyleOptions['innerShadowColor']
+      if (match.shade) style.innerShadowShade = match.shade
     }
   }
 
   if (frameColor.light !== undefined || frameColor.dark !== undefined) {
-    const named = (Object.keys(FRAME_COLOR_VALUES) as Array<keyof typeof FRAME_COLOR_VALUES>)
-      .find(key => FRAME_COLOR_VALUES[key].light === frameColor.light && FRAME_COLOR_VALUES[key].dark === frameColor.dark)
-    const lightRef = parseUiColorRef(frameColor.light)
-    const darkRef = parseUiColorRef(frameColor.dark)
-    if (named) {
-      style.borderColor = named
-    } else if (lightRef && darkRef && lightRef.alias === darkRef.alias && (lightRef.alias === 'neutral' || lightRef.alias === 'primary')) {
-      style.borderColor = lightRef.alias === 'primary' ? 'primary-shade' : 'shade'
-      style.borderShade = { light: lightRef.shade, dark: darkRef.shade }
+    const match = matchColorChoice(frameColor, FRAME_COLOR_VALUES)
+    if (match) {
+      style.borderColor = match.color as StyleOptions['borderColor']
+      if (match.shade) style.borderShade = match.shade
     }
   }
 
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 8b34babb26..4a84b34d13 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -655,17 +655,6 @@ export function mergeUi(
 }
 
 /** Every component key a style bundle may touch — cleared before re-applying. */
-// Components that only ever carried retired width fragments — kept in the
-// clearing set so overrides persisted by older sessions still get swept.
-const RETIRED_WIDTH_KEYS = ['separator', 'header', 'accordion', 'table', 'dashboardSidebar', 'dashboardNavbar', 'dashboardToolbar', 'dashboardPanel', 'navigationMenu', 'pageHeader', 'chatPalette', 'commandPalette', 'fileUpload', 'checkboxGroup', 'listbox', 'tree', 'changelogVersion', 'pricingTable', 'pricingPlan', 'checkbox', 'radioGroup']
-
-export const STYLE_COMPONENT_KEYS = [...new Set([
-  ...Object.values(SHADOW_FRAGMENTS).flatMap(fragments => Object.keys(fragments)),
-  ...Object.keys(FRAME_FRAGMENTS),
-  ...Object.keys(FRAME_COLOR_FRAGMENTS),
-  ...RETIRED_WIDTH_KEYS
-])]
-
 /**
  * The style axes that mean "leave it alone": no shadow (or 'none'), border
  * 'default', and nothing else set. Border 'none' is a REAL choice (strip
diff --git a/docs/app/utils/theme.ts b/docs/app/utils/theme.ts
index 185efa2459..b8283458e9 100644
--- a/docs/app/utils/theme.ts
+++ b/docs/app/utils/theme.ts
@@ -1,5 +1,16 @@
 import lucide from '../../../src/theme/icons'
 
+/** Parse a persisted JSON value, falling back on SSR, absence or corruption. */
+export function readLocalStorage<T>(key: string, fallback: T): T {
+  if (!import.meta.client) return fallback
+  try {
+    const raw = window.localStorage.getItem(key)
+    return raw ? JSON.parse(raw) : fallback
+  } catch {
+    return fallback
+  }
+}
+
 export const themeIcons = {
   lucide,
   phosphor: {

From 3b4848eec40eecaaa04fe5625d76d9237a8234d9 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Tue, 7 Jul 2026 00:02:48 +0200
Subject: [PATCH 085/185] =?UTF-8?q?refactor(docs):=20review=20tail=20?=
 =?UTF-8?q?=E2=80=94=20bento=20chat=20on=20real=20components,=20determinis?=
 =?UTF-8?q?tic=20a11y=20settle,=20theme-keys=20module,=20chat-*=20ids=20re?=
 =?UTF-8?q?tired?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The bento chat card renders UChatMessage/UChatPrompt so frame and shadow
treatments preview truthfully. The a11y matrix recomputes on
nextTick + double-rAF instead of an 80ms guess, reading the owning
composable's refs instead of re-declaring the state channels. Cross-file
storage/state keys and style-tag ids live in theme-keys.ts, and the
legacy chat-* tag ids become nuxt-ui-*.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioBento.vue         | 35 +++++++++++++------
 .../theme-studio/ThemeStudioModal.vue         |  2 +-
 .../theme-studio/ThemeStudioViewA11y.vue      | 25 ++++++++-----
 docs/app/composables/useTheme.ts              | 15 ++++----
 docs/app/composables/useThemeStudio.ts        | 25 ++++++-------
 docs/app/plugins/theme.ts                     |  6 ++--
 docs/app/utils/theme-keys.ts                  | 26 ++++++++++++++
 7 files changed, 94 insertions(+), 40 deletions(-)
 create mode 100644 docs/app/utils/theme-keys.ts

diff --git a/docs/app/components/theme-studio/ThemeStudioBento.vue b/docs/app/components/theme-studio/ThemeStudioBento.vue
index e0b86514be..971af14919 100644
--- a/docs/app/components/theme-studio/ThemeStudioBento.vue
+++ b/docs/app/components/theme-studio/ThemeStudioBento.vue
@@ -309,17 +309,32 @@ function showToast() {
         Chat
       </p>
 
-      <div class="text-sm bg-elevated rounded-lg px-3 py-2 me-8">
-        Hey! How does this bubble look with your primary color?
-      </div>
-      <div class="text-sm bg-primary text-inverted rounded-lg px-3 py-2 ms-auto max-w-[80%]">
-        Looking sharp, ship it.
-      </div>
+      <!-- real chat components so the frame/shadow treatments preview truthfully -->
+      <UChatMessage
+        id="bento-assistant"
+        role="assistant"
+        variant="soft"
+        compact
+        :parts="[{ type: 'text', text: 'Hey! How does this bubble look with your primary color?' }]"
+        class="me-8"
+      />
+      <UChatMessage
+        id="bento-user"
+        role="user"
+        variant="solid"
+        color="primary"
+        side="right"
+        compact
+        :parts="[{ type: 'text', text: 'Looking sharp, ship it.' }]"
+        class="ms-auto max-w-[80%]"
+      />
 
-      <div class="flex items-center gap-2">
-        <UInput v-model="chatMessage" placeholder="Type a message..." class="flex-1" />
-        <UButton icon="i-lucide-send" square aria-label="Send message" />
-      </div>
+      <UChatPrompt v-model="chatMessage" placeholder="Type a message..." :ui="{ base: 'text-sm' }">
+        <template #footer>
+          <span />
+          <UChatPromptSubmit status="ready" size="sm" />
+        </template>
+      </UChatPrompt>
     </UCard>
 
     <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index 65138f9a5c..8c35f7c0b5 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -142,7 +142,7 @@ const viewTabs = [
           :ui="{ container: 'pe-0', header: 'bg-elevated/50 lg:rounded-t-lg', body: 'p-0 gap-0 bg-default', footer: 'bg-elevated/50 lg:rounded-b-lg', inner: [chromeShadow, 'bg-default'] }"
         >
           <template #header>
-            <Logo class="w-auto h-6 shrink-0 mr-auto" />
+            <Logo class="w-auto h-5 shrink-0 mr-auto" />
 
             <UTooltip v-for="m in modes" :key="m.label" :text="`${m.label} mode`" class="capitalize">
               <UButton
diff --git a/docs/app/components/theme-studio/ThemeStudioViewA11y.vue b/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
index df4729bbff..5f69393710 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
@@ -76,17 +76,26 @@ function compute() {
  */
 const colorMode = useColorMode()
 const appConfig = useAppConfig()
-const cssVariables = useState('nuxt-ui-css-variables', () => ({}))
-const customColors = useState('nuxt-ui-custom-colors', () => ({}))
+// the owning composable's refs — never re-seed these channels here
+const { cssVariablesData, customColorsData } = useTheme()
+
+// useHead swaps the style tags asynchronously: wait a tick for the vnodes,
+// then two frames so the new sheets are applied before reading computed
+// styles — deterministic, unlike a wall-clock delay.
+let pending = 0
+function scheduleCompute() {
+  cancelAnimationFrame(pending)
+  nextTick(() => {
+    pending = requestAnimationFrame(() => {
+      pending = requestAnimationFrame(compute)
+    })
+  })
+}
 
-let timeout: ReturnType<typeof setTimeout> | undefined
-watch([() => colorMode.value, () => ({ ...appConfig.ui.colors }), cssVariables, customColors], () => {
-  clearTimeout(timeout)
-  timeout = setTimeout(compute, 80)
-})
+watch([() => colorMode.value, () => ({ ...appConfig.ui.colors }), cssVariablesData, customColorsData], scheduleCompute)
 
 onMounted(compute)
-onUnmounted(() => clearTimeout(timeout))
+onUnmounted(() => cancelAnimationFrame(pending))
 
 function level(ratio: number): { label: string, color: 'success' | 'warning' | 'error' } {
   if (ratio >= 7) return { label: 'AAA', color: 'success' }
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 2975dcbdac..11fef7946f 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -1,4 +1,5 @@
 import { defu } from 'defu'
+import { THEME_TAG_IDS, THEME_STATE_KEYS, THEME_STORAGE_KEYS } from '../utils/theme-keys'
 import { useLocalStorage } from '@vueuse/core'
 import { themeIcons, cssVariableDefaults, readLocalStorage } from '../utils/theme'
 import { generateCSS, generateConfig, mergeUi, isDefaultStyle, DEFAULT_COLORS, THEME_DEFAULTS, LIBRARY_TOKEN_DEFAULTS, CUSTOM_PALETTES } from '../utils/theme-engine'
@@ -79,7 +80,7 @@ export function useTheme() {
   })
   const cssVariablesData = useState<{ light?: Record<string, string>, dark?: Record<string, string> }>('nuxt-ui-css-variables', () => readLocalStorage('nuxt-ui-css-variables', {}))
   /** The studio's style axis (it owns writes); read here for currentDoc/export. */
-  const stylePrefs = useState<ThemeDoc['style']>('nuxt-ui-style-prefs', () => readLocalStorage('nuxt-ui-style', {}))
+  const stylePrefs = useState<ThemeDoc['style']>(THEME_STATE_KEYS.stylePrefs, () => readLocalStorage(THEME_STORAGE_KEYS.style, {}))
   const _radius = useLocalStorage('nuxt-ui-radius', 0.25)
   const _fontSize = useLocalStorage('nuxt-ui-font-size', 16)
   const _spacing = useLocalStorage('nuxt-ui-spacing', 0.25)
@@ -253,8 +254,8 @@ export function useTheme() {
     { innerHTML: spacingStyle, id: 'nuxt-ui-spacing', tagPriority: -2 },
     { innerHTML: blackAsPrimaryStyle, id: 'nuxt-ui-black-as-primary', tagPriority: -2 },
     { innerHTML: fontStyle, id: 'nuxt-ui-font', tagPriority: -2 },
-    { innerHTML: customColorsStyle, id: 'chat-custom-colors', tagPriority: -2 },
-    { innerHTML: cssVariablesStyle, id: 'chat-css-variables', tagPriority: -2 }
+    { innerHTML: customColorsStyle, id: THEME_TAG_IDS.customColors, tagPriority: -2 },
+    { innerHTML: cssVariablesStyle, id: THEME_TAG_IDS.cssVariables, tagPriority: -2 }
   ]
 
   const hasCSSChanges = computed(() => {
@@ -374,7 +375,7 @@ export function useTheme() {
     } else {
       window.localStorage.removeItem('nuxt-ui-css-variables')
       if (import.meta.client) {
-        document.getElementById('chat-css-variables')?.replaceChildren()
+        document.getElementById(THEME_TAG_IDS.cssVariables)?.replaceChildren()
       }
     }
   }
@@ -538,8 +539,8 @@ export function useTheme() {
     useState<string | undefined>('nuxt-ui-theme-preset').value = undefined
 
     if (import.meta.client) {
-      document.getElementById('chat-css-variables')?.replaceChildren()
-      document.getElementById('chat-custom-colors')?.replaceChildren()
+      document.getElementById(THEME_TAG_IDS.cssVariables)?.replaceChildren()
+      document.getElementById(THEME_TAG_IDS.customColors)?.replaceChildren()
     }
   }
 
@@ -567,6 +568,8 @@ export function useTheme() {
     hasConfigChanges,
     configLabel: computed(() => framework.value === 'vue' ? 'vite.config.ts' : 'app.config.ts'),
     currentDoc,
+    cssVariablesData,
+    customColorsData,
     removeCustomColors,
     removeCSSVariables,
     setStyleUi,
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 44cf797ea1..f59e5f0f9a 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,4 +1,5 @@
 import colors from 'tailwindcss/colors'
+import { THEME_STATE_KEYS, THEME_STORAGE_KEYS } from '../utils/theme-keys'
 import { presets, docToSettings, isDefaultTheme, generatePalette, fitPalette, parseCssColor, parseUiColorRef, styleComponents, styleTokens, DEFAULT_COLORS, SHADES, TOKEN_SHADE_TARGETS } from '../utils/theme-engine'
 import type { ThemeDoc, ThemePreset, PaletteCurveParams, StyleOptions, Shade, ColorAlias } from '../utils/theme-engine'
 import { readLocalStorage } from '../utils/theme'
@@ -8,7 +9,7 @@ export function useThemeStudio() {
   const appConfig = useAppConfig()
   const { track } = useAnalytics()
 
-  const activePreset = useState<string | undefined>('nuxt-ui-theme-preset', () => undefined)
+  const activePreset = useState<string | undefined>(THEME_STATE_KEYS.themePreset, () => undefined)
 
   /** The studio modal — one instance mounted in the header, openable from anywhere. */
   const studioOpen = useState('nuxt-ui-studio-open', () => false)
@@ -19,19 +20,19 @@ export function useThemeStudio() {
    * resetTheme() — reachable from the popover and chat, outside this
    * composable — can clear the shared state, not just the storage key.
    */
-  const paletteParams = useState<Partial<Record<string, PaletteCurveParams>>>('nuxt-ui-palette-params-state', () => readLocalStorage('nuxt-ui-palette-params', {}))
+  const paletteParams = useState<Partial<Record<string, PaletteCurveParams>>>(THEME_STATE_KEYS.paletteParams, () => readLocalStorage(THEME_STORAGE_KEYS.paletteParams, {}))
 
   function setPaletteParams(value: Partial<Record<string, PaletteCurveParams>>) {
     paletteParams.value = value
     if (Object.keys(value).length) {
-      window.localStorage.setItem('nuxt-ui-palette-params', JSON.stringify(value))
+      window.localStorage.setItem(THEME_STORAGE_KEYS.paletteParams, JSON.stringify(value))
     } else {
-      window.localStorage.removeItem('nuxt-ui-palette-params')
+      window.localStorage.removeItem(THEME_STORAGE_KEYS.paletteParams)
     }
   }
 
   /** Shadow/border/token-shade prefs; the expanded class bundle lives in the style-ui channel. */
-  const style = useState<StyleOptions>('nuxt-ui-style-prefs', () => readLocalStorage('nuxt-ui-style', {}))
+  const style = useState<StyleOptions>(THEME_STATE_KEYS.stylePrefs, () => readLocalStorage(THEME_STORAGE_KEYS.style, {}))
 
   // Self-heal: the persisted class bundle is an expansion of `style` frozen
   // at write time — if the generator changed since (new fragment classes),
@@ -41,7 +42,7 @@ export function useThemeStudio() {
   if (import.meta.client && !healed.value) {
     healed.value = true
     const expected = styleComponents(style.value)
-    if (JSON.stringify(expected) !== JSON.stringify(readLocalStorage('nuxt-ui-style-ui', {}))) {
+    if (JSON.stringify(expected) !== JSON.stringify(readLocalStorage(THEME_STORAGE_KEYS.styleUi, {}))) {
       onNuxtReady(() => theme.setStyleUi(expected))
     }
   }
@@ -52,7 +53,7 @@ export function useThemeStudio() {
     const previousStyle = style.value
     const previous = styleTokens(previousStyle)
     style.value = { ...style.value, ...options }
-    window.localStorage.setItem('nuxt-ui-style', JSON.stringify(style.value))
+    window.localStorage.setItem(THEME_STORAGE_KEYS.style, JSON.stringify(style.value))
 
     // Remove only the tokens the PREVIOUS style emitted and the next one
     // doesn't — never preset/doc-owned values sharing the same names.
@@ -184,9 +185,9 @@ export function useThemeStudio() {
     // Remember what to restore when the custom palette is removed — the
     // default alias would discard a preset's choice (e.g. Ghibli's stone).
     if (!isCustomPalette(alias)) {
-      const prev = readLocalStorage<Record<string, string>>('nuxt-ui-palette-prev', {})
+      const prev = readLocalStorage<Record<string, string>>(THEME_STORAGE_KEYS.palettePrev, {})
       prev[alias] = (appConfig.ui.colors as Record<string, string>)[alias]!
-      window.localStorage.setItem('nuxt-ui-palette-prev', JSON.stringify(prev))
+      window.localStorage.setItem(THEME_STORAGE_KEYS.palettePrev, JSON.stringify(prev))
     }
 
     theme.applyThemeSettings({
@@ -215,10 +216,10 @@ export function useThemeStudio() {
       })
     }
 
-    const prev = readLocalStorage<Record<string, string>>('nuxt-ui-palette-prev', {})
+    const prev = readLocalStorage<Record<string, string>>(THEME_STORAGE_KEYS.palettePrev, {})
     theme.applyThemeSettings({ [alias]: prev[alias] || DEFAULT_COLORS[alias] }, { track: false })
     const { [alias]: _restored, ...remaining } = prev
-    window.localStorage.setItem('nuxt-ui-palette-prev', JSON.stringify(remaining))
+    window.localStorage.setItem(THEME_STORAGE_KEYS.palettePrev, JSON.stringify(remaining))
 
     const { [alias]: _, ...rest } = paletteParams.value
     setPaletteParams(rest)
@@ -264,7 +265,7 @@ export function useThemeStudio() {
     theme.resetTheme()
     style.value = deriveStyle(doc)
     if (Object.keys(style.value).length) {
-      window.localStorage.setItem('nuxt-ui-style', JSON.stringify(style.value))
+      window.localStorage.setItem(THEME_STORAGE_KEYS.style, JSON.stringify(style.value))
     }
 
     if (!isDefaultTheme(doc)) {
diff --git a/docs/app/plugins/theme.ts b/docs/app/plugins/theme.ts
index cb32adbac5..dfb557e021 100644
--- a/docs/app/plugins/theme.ts
+++ b/docs/app/plugins/theme.ts
@@ -77,7 +77,7 @@ export default defineNuxtPlugin({
       // Inline scripts below intentionally duplicate logic from the client-side composable
       // (useTheme / injectCustomColors / injectCSSVariables) to restore persisted theme
       // settings on first paint and prevent a flash of unstyled content (FOUC).
-      // The script IDs (chat-custom-colors, chat-css-variables, nuxt-ui-radius, etc.)
+      // The script IDs (nuxt-ui-custom-colors, nuxt-ui-css-variables, nuxt-ui-radius, etc.)
       // correspond to the <style> elements managed by useTheme via useHead.
       useHead({
         script: [{
@@ -187,7 +187,7 @@ export default defineNuxtPlugin({
                     }
                   }
                   if (vars.length) {
-                    var el = document.getElementById('chat-custom-colors');
+                    var el = document.getElementById('nuxt-ui-custom-colors');
                     if (el) { el.textContent = ':root { ' + vars.join(' ') + ' }'; }
                   }
                 } catch(e) {}
@@ -218,7 +218,7 @@ export default defineNuxtPlugin({
                     parts.push('.dark { ' + merge(defaults.dark, cssVars.dark).join(' ') + ' }');
                   }
                   if (parts.length) {
-                    var el = document.getElementById('chat-css-variables');
+                    var el = document.getElementById('nuxt-ui-css-variables');
                     if (el) { el.textContent = parts.join(' '); }
                   }
                 } catch(e) {}
diff --git a/docs/app/utils/theme-keys.ts b/docs/app/utils/theme-keys.ts
new file mode 100644
index 0000000000..88b76ee3fa
--- /dev/null
+++ b/docs/app/utils/theme-keys.ts
@@ -0,0 +1,26 @@
+/**
+ * The theme system's cross-file identifiers, in one place. Only names
+ * referenced from MORE than one module live here — single-file keys stay
+ * local, where their context is.
+ */
+
+/** localStorage keys the studio writes and useTheme/resetTheme also touch. */
+export const THEME_STORAGE_KEYS = {
+  style: 'nuxt-ui-style',
+  styleUi: 'nuxt-ui-style-ui',
+  paletteParams: 'nuxt-ui-palette-params',
+  palettePrev: 'nuxt-ui-palette-prev'
+} as const
+
+/** useState keys shared across composables. */
+export const THEME_STATE_KEYS = {
+  stylePrefs: 'nuxt-ui-style-prefs',
+  themePreset: 'nuxt-ui-theme-preset',
+  paletteParams: 'nuxt-ui-palette-params-state'
+} as const
+
+/** DOM ids of the style tags useHead owns and the FOUC scripts pre-fill. */
+export const THEME_TAG_IDS = {
+  cssVariables: 'nuxt-ui-css-variables',
+  customColors: 'nuxt-ui-custom-colors'
+} as const

From 6aed6a5b471ea9c52fa3609311a3cdb2f99e65ce Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Tue, 7 Jul 2026 01:17:30 +0200
Subject: [PATCH 086/185] =?UTF-8?q?feat(docs):=20Forest=20preset=20?=
 =?UTF-8?q?=E2=80=94=20sculpted=20evergreen=20and=20forest=20neutrals,=20s?=
 =?UTF-8?q?age=20secondary,=20spread=20hard=20shadows=20over=20a=20fine=20?=
 =?UTF-8?q?inset?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/utils/theme-engine/presets.ts | 115 +++++++++++++++++++++++++
 1 file changed, 115 insertions(+)

diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 889f9c04a4..763b78e59f 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -176,6 +176,121 @@ export const presets: ThemePreset[] = [{
       }
     }
   }
+}, {
+  id: 'forest',
+  name: 'Forest',
+  description: 'Sculpted evergreen on forest-green neutrals with a sage secondary — spread hard shadows over a fine inset.',
+  icon: 'i-lucide-trees',
+  doc: {
+    version: 1,
+    meta: { name: 'Forest', base: 'forest' },
+    // Both ramps were sculpted in the curve editor (hence the custom-* names:
+    // the editors reopen them as their own), plus a muted sage for secondary.
+    palettes: {
+      'custom-neutral': {
+        shades: {
+          50: 'oklch(93.7% 0.041 140.516)',
+          100: 'oklch(90.8% 0.053 140.375)',
+          200: 'oklch(85.5% 0.066 140.572)',
+          300: 'oklch(75% 0.079 141.493)',
+          400: 'oklch(61.8% 0.09 142.245)',
+          500: 'oklch(51.4% 0.095 142.85)',
+          600: 'oklch(43.4% 0.085 143.372)',
+          700: 'oklch(36.9% 0.067 143.839)',
+          800: 'oklch(31.3% 0.049 144.268)',
+          900: 'oklch(26.4% 0.033 144.666)',
+          950: 'oklch(22.1% 0.017 145.041)'
+        }
+      },
+      'custom-primary': {
+        shades: {
+          50: 'oklch(98.2% 0.03 144.679)',
+          100: 'oklch(96.7% 0.058 144.074)',
+          200: 'oklch(92.4% 0.124 143.449)',
+          300: 'oklch(86.5% 0.164 142.837)',
+          400: 'oklch(79.4% 0.221 142.544)',
+          500: 'oklch(71.6% 0.223 142.677)',
+          600: 'oklch(63.2% 0.196 142.818)',
+          700: 'oklch(54.4% 0.166 142.921)',
+          800: 'oklch(45.3% 0.137 142.994)',
+          900: 'oklch(36% 0.108 143.043)',
+          950: 'oklch(26.6% 0.079 143.072)'
+        }
+      },
+      'sage': {
+        shades: {
+          50: 'oklch(97.7% 0.004 134.849)',
+          100: 'oklch(95% 0.01 140.516)',
+          200: 'oklch(90% 0.018 140.022)',
+          300: 'oklch(82.6% 0.029 141.964)',
+          400: 'oklch(71.9% 0.038 142.667)',
+          500: 'oklch(61.7% 0.042 142.713)',
+          600: 'oklch(53% 0.038 143.698)',
+          700: 'oklch(45.7% 0.032 143.377)',
+          800: 'oklch(39.8% 0.026 142.997)',
+          900: 'oklch(35.1% 0.022 145.097)',
+          950: 'oklch(24.2% 0.017 145.041)'
+        }
+      }
+    },
+    colors: {
+      primary: 'custom-primary',
+      secondary: 'sage',
+      success: 'emerald',
+      info: 'cyan',
+      warning: 'amber',
+      neutral: 'custom-neutral'
+    },
+    font: { sans: 'Raleway' },
+    tokens: {
+      light: {
+        '--ui-bg': 'var(--ui-color-neutral-50)',
+        '--ui-text-inverted': 'var(--ui-color-neutral-50)'
+      },
+      dark: {
+        '--ui-text-highlighted': 'var(--ui-color-neutral-50)',
+        '--ui-bg-inverted': 'var(--ui-color-neutral-50)',
+        '--ui-border-inverted': 'var(--ui-color-neutral-50)'
+      }
+    },
+    // Spread-1 hard shadows in graded neutral shades, a 1px bottom inset at
+    // 25%, subtle surfaces with stock outline fields.
+    style: {
+      shadow: 'hard',
+      shadowGeometry: {
+        x: 0,
+        y: 3,
+        blur: 0,
+        spread: 1
+      },
+      shadowOpacity: 50,
+      innerShadow: 'hard',
+      innerShadowGeometry: {
+        x: 0,
+        y: 1,
+        blur: 0,
+        spread: 1
+      },
+      innerShadowOpacity: 25,
+      shadowColor: 'shade',
+      shadowShade: {
+        light: 500,
+        dark: 950
+      },
+      innerShadowColor: 'shade',
+      innerShadowShade: {
+        light: 950,
+        dark: 400
+      },
+      defaults: {
+        variants: {
+          buttons: 'subtle',
+          panels: 'subtle',
+          inputs: 'outline'
+        }
+      }
+    }
+  }
 }, {
   id: 'marshmallow',
   name: 'Marshmallow',

From ab7c56499e1be420f0c144a70415c8440b8a6df3 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Tue, 7 Jul 2026 01:29:40 +0200
Subject: [PATCH 087/185] =?UTF-8?q?feat(docs):=20Anthropic=20preset=20on?=
 =?UTF-8?q?=20the=20real=20palette=20=E2=80=94=20brand=20clay=20anchored?=
 =?UTF-8?q?=20at=20500,=20true=20warm-gray=20scale?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/utils/theme-engine/presets.ts | 49 ++++++++++++++------------
 1 file changed, 27 insertions(+), 22 deletions(-)

diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 763b78e59f..473c633594 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -385,34 +385,39 @@ export const presets: ThemePreset[] = [{
     version: 1,
     meta: { name: 'Anthropic', base: 'anthropic' },
     palettes: {
+      // Anchored on the real brand clay — hsl(14.8 63.1% 59.6%) — at 500,
+      // with the ramp's hue and chroma re-fit around it.
       clay: {
         shades: {
-          50: 'oklch(97.4% 0.008 48.655)',
-          100: 'oklch(94.2% 0.016 52.554)',
-          200: 'oklch(88.5% 0.031 51.489)',
-          300: 'oklch(82.1% 0.05 50.739)',
-          400: 'oklch(74.1% 0.081 47.602)',
-          500: 'oklch(65.8% 0.113 39.145)',
-          600: 'oklch(58.9% 0.119 37.977)',
-          700: 'oklch(51.4% 0.106 37.797)',
-          800: 'oklch(44.4% 0.089 37.263)',
-          900: 'oklch(38.8% 0.074 36.807)',
-          950: 'oklch(25.9% 0.047 38.544)'
+          50: 'oklch(97.4% 0.009 48.308)',
+          100: 'oklch(94.2% 0.019 52.207)',
+          200: 'oklch(88.5% 0.036 51.142)',
+          300: 'oklch(82.1% 0.058 50.392)',
+          400: 'oklch(74.1% 0.094 47.255)',
+          500: 'oklch(67.2% 0.131 38.798)',
+          600: 'oklch(58.9% 0.138 37.63)',
+          700: 'oklch(51.4% 0.123 37.45)',
+          800: 'oklch(44.4% 0.103 36.916)',
+          900: 'oklch(38.8% 0.086 36.46)',
+          950: 'oklch(25.9% 0.054 38.197)'
         }
       },
+      // The real warm-gray scale (their --_gray-* HSL stops mapped onto the
+      // tailwind ladder: 20/40/70/150/300/450/600/650/750/830/900), so the
+      // 50 IS the signature cream background.
       parchment: {
         shades: {
-          50: 'oklch(98.2% 0.005 95.099)',
-          100: 'oklch(94.8% 0.012 96.426)',
-          200: 'oklch(90.6% 0.018 92.694)',
-          300: 'oklch(84.2% 0.027 92.429)',
-          400: 'oklch(73.2% 0.03 91.711)',
-          500: 'oklch(62.1% 0.031 88.804)',
-          600: 'oklch(52.9% 0.028 89.296)',
-          700: 'oklch(45.5% 0.023 87.57)',
-          800: 'oklch(37.3% 0.021 88.083)',
-          900: 'oklch(31% 0.011 84.589)',
-          950: 'oklch(21.7% 0.01 97.797)'
+          50: 'oklch(98% 0.003 106.451)',
+          100: 'oklch(96.5% 0.004 106.469)',
+          200: 'oklch(93.6% 0.006 97.348)',
+          300: 'oklch(85.8% 0.014 102.476)',
+          400: 'oklch(72.1% 0.015 102.54)',
+          500: 'oklch(57.8% 0.008 88.877)',
+          600: 'oklch(43.2% 0.006 91.526)',
+          700: 'oklch(38.2% 0.003 84.572)',
+          800: 'oklch(29.3% 0.003 106.588)',
+          900: 'oklch(21.7% 0.002 106.561)',
+          950: 'oklch(14.6% 0 0)'
         }
       }
     },

From 0f74982575ff9c1326e5cbedc9429c42b34b24c2 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Tue, 7 Jul 2026 01:32:17 +0200
Subject: [PATCH 088/185] fix(docs): update dark theme background color from
 neutral-950 to neutral-900

---
 docs/app/utils/theme-engine/presets.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 473c633594..9ed88c656f 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -432,7 +432,7 @@ export const presets: ThemePreset[] = [{
         '--ui-bg': 'var(--ui-color-neutral-50)'
       },
       dark: {
-        '--ui-bg': 'var(--ui-color-neutral-950)'
+        '--ui-bg': 'var(--ui-color-neutral-900)'
       }
     }
   }

From e3005006078e161a2da15c690c03656336e38ae6 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Tue, 7 Jul 2026 02:14:21 +0200
Subject: [PATCH 089/185] feat(docs): enhance Theme Studio components with size
 adjustments

Updated various Theme Studio components to include size properties for buttons and picker elements, improving consistency in UI design. Adjusted button sizes to 'sm' and 'xs' where applicable, and modified the modal header style for better visual alignment.
---
 docs/app/components/theme-studio/ThemeStudioColorMenu.vue    | 4 +++-
 docs/app/components/theme-studio/ThemeStudioModal.vue        | 2 +-
 docs/app/components/theme-studio/ThemeStudioPicker.vue       | 3 ++-
 docs/app/components/theme-studio/ThemeStudioPickerButton.vue | 3 ++-
 docs/app/utils/theme-engine/presets.ts                       | 3 ++-
 5 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioColorMenu.vue b/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
index fe68fb2c65..bf2b72b114 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
@@ -52,7 +52,7 @@ function isSelected(color: string) {
     <UButton
       color="neutral"
       variant="subtle"
-
+      size="sm"
       block
       trailing-icon="i-lucide-chevron-down"
       class="capitalize"
@@ -79,6 +79,7 @@ function isSelected(color: string) {
             <ThemeStudioPickerButton
               v-if="alias === 'primary' && index === 0"
               label="Black"
+              size="xs"
               :selected="blackAsPrimary"
               @click="setBlackAsPrimary(true)"
             >
@@ -91,6 +92,7 @@ function isSelected(color: string) {
               v-for="color in section.colors"
               :key="color"
               :label="color"
+              size="xs"
               :chip="paletteChip(color)"
               :selected="isSelected(color)"
               @click="selectPalette(alias, color)"
diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index 8c35f7c0b5..91f5714abe 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -139,7 +139,7 @@ const viewTabs = [
           v-model:open="sidebarOpen"
           variant="floating"
           :style="{ '--sidebar-width': '21rem' }"
-          :ui="{ container: 'pe-0', header: 'bg-elevated/50 lg:rounded-t-lg', body: 'p-0 gap-0 bg-default', footer: 'bg-elevated/50 lg:rounded-b-lg', inner: [chromeShadow, 'bg-default'] }"
+          :ui="{ container: 'pe-0', header: 'bg-elevated/50 lg:rounded-t-lg p-4 min-h-0', body: 'p-0 gap-0 bg-default', footer: 'bg-elevated/50 lg:rounded-b-lg', inner: [chromeShadow, 'bg-default'] }"
         >
           <template #header>
             <Logo class="w-auto h-5 shrink-0 mr-auto" />
diff --git a/docs/app/components/theme-studio/ThemeStudioPicker.vue b/docs/app/components/theme-studio/ThemeStudioPicker.vue
index b6cd454b67..a2368ae577 100644
--- a/docs/app/components/theme-studio/ThemeStudioPicker.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPicker.vue
@@ -55,7 +55,7 @@ function openStudio() {
         icon="i-lucide-swatch-book"
         color="neutral"
         variant="subtle"
-
+        size="sm"
         block
         @click="openStudio"
       />
@@ -144,6 +144,7 @@ function openStudio() {
             :key="m.label"
             v-bind="m"
             :selected="colorMode.preference === m.label"
+            size="sm"
             @click="mode = m.label"
           />
         </div>
diff --git a/docs/app/components/theme-studio/ThemeStudioPickerButton.vue b/docs/app/components/theme-studio/ThemeStudioPickerButton.vue
index c4d7ac3680..3f32520445 100644
--- a/docs/app/components/theme-studio/ThemeStudioPickerButton.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPickerButton.vue
@@ -4,6 +4,7 @@ defineProps<{
   icon?: string
   chip?: string
   selected?: boolean
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null
 }>()
 
 const slots = defineSlots<{
@@ -13,7 +14,7 @@ const slots = defineSlots<{
 
 <template>
   <UButton
-    size="md"
+    :size="size ?? 'sm'"
     color="neutral"
     variant="subtle"
     :active="selected"
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 9ed88c656f..0368dcca99 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -432,7 +432,8 @@ export const presets: ThemePreset[] = [{
         '--ui-bg': 'var(--ui-color-neutral-50)'
       },
       dark: {
-        '--ui-bg': 'var(--ui-color-neutral-900)'
+        '--ui-bg': 'var(--ui-color-neutral-900)',
+        '--ui-primary': 'var(--ui-color-primary-500)'
       }
     }
   }

From 2a4c480d0c403681f3a6facfa2108289d4d382cf Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Tue, 7 Jul 2026 11:53:37 +0200
Subject: [PATCH 090/185] =?UTF-8?q?feat(docs):=20settings=20panel=20moves?=
 =?UTF-8?q?=20right=20=E2=80=94=20close=20in=20its=20header,=20view=20drop?=
 =?UTF-8?q?down=20left,=20collapse=20takes=20the=20toolbar=20corner;=20Orc?=
 =?UTF-8?q?hard's=20resculpted=20neutral;=20Harbor,=20Cabin=20and=20Ghibli?=
 =?UTF-8?q?=20retired?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioModal.vue         | 111 ++++++------
 docs/app/utils/theme-engine/presets.ts        | 169 ++----------------
 2 files changed, 66 insertions(+), 214 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index 91f5714abe..6f51d86c62 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -135,11 +135,54 @@ const viewTabs = [
   >
     <template #content>
       <div class="flex flex-row w-full h-full bg-neutral-200 dark:bg-neutral-950">
+        <div class="flex-1 min-w-0 flex flex-col h-full">
+          <div
+            class="shrink-0 flex items-center gap-2 border-default px-4 sm:px-4 py-3"
+          >
+            <USelect
+              v-model="view"
+              :items="viewTabs"
+              :icon="viewTabs.find(tab => tab.value === view)?.icon"
+              size="sm"
+              color="neutral"
+              variant="subtle"
+              class="w-44"
+            />
+
+            <span class="flex-1" />
+
+            <UTooltip :text="sidebarOpen ? 'Hide settings' : 'Show settings'">
+              <UButton
+                :icon="sidebarOpen ? 'i-lucide-panel-right-close' : 'i-lucide-panel-right-open'"
+                color="neutral"
+                variant="ghost"
+                size="sm"
+                aria-label="Toggle settings panel"
+                @click="sidebarOpen = !sidebarOpen"
+              />
+            </UTooltip>
+          </div>
+
+          <!-- The floating preview card: the grid scrolls inside it; the
+               app-shell views own their height and scroll internally. -->
+          <div
+            class="flex-1 min-w-0 min-h-0 ring ring-default bg-default m-4 mt-0 rounded-lg"
+            :class="[chromeShadow, view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden']"
+          >
+            <ThemeStudioBento v-if="view === 'grid'" />
+            <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
+            <ThemeStudioViewChat v-else-if="view === 'chat'" />
+            <ThemeStudioViewSaas v-else-if="view === 'saas'" />
+            <ThemeStudioViewLanding v-else-if="view === 'landing'" />
+            <ThemeStudioViewA11y v-else-if="view === 'a11y'" />
+          </div>
+        </div>
         <USidebar
           v-model:open="sidebarOpen"
+          side="right"
           variant="floating"
           :style="{ '--sidebar-width': '21rem' }"
-          :ui="{ container: 'pe-0', header: 'bg-elevated/50 lg:rounded-t-lg p-4 min-h-0', body: 'p-0 gap-0 bg-default', footer: 'bg-elevated/50 lg:rounded-b-lg', inner: [chromeShadow, 'bg-default'] }"
+          :ui="{ container: 'ps-0', header: 'bg-elevated/50 lg:rounded-t-lg p-4 min-h-0', body: 'p-0 gap-0 bg-default', footer: 'bg-elevated/50 lg:rounded-b-lg', inner: [chromeShadow, 'bg-default'] }"
         >
           <template #header>
             <Logo class="w-auto h-5 shrink-0 mr-auto" />
@@ -158,6 +201,18 @@ const viewTabs = [
                 @click="mode = m.label"
               />
             </UTooltip>
+
+            <UTooltip text="Close">
+              <UButton
+                icon="i-lucide-x"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                square
+                aria-label="Close Theme Studio"
+                @click="open = false"
+              />
+            </UTooltip>
           </template>
 
           <ThemeStudioControls />
@@ -207,60 +262,6 @@ const viewTabs = [
             </UTooltip>
           </template>
         </USidebar>
-
-        <div class="flex-1 min-w-0 flex flex-col h-full">
-          <div
-            class="shrink-0 flex items-center gap-2 border-default px-4 sm:px-4 py-3"
-          >
-            <UTooltip :text="sidebarOpen ? 'Hide settings' : 'Show settings'">
-              <UButton
-                :icon="sidebarOpen ? 'i-lucide-panel-left-close' : 'i-lucide-panel-left-open'"
-                color="neutral"
-                variant="ghost"
-                size="sm"
-                aria-label="Toggle settings panel"
-                @click="sidebarOpen = !sidebarOpen"
-              />
-            </UTooltip>
-
-            <span class="flex-1" />
-
-            <UTabs
-              v-model="view"
-              :items="viewTabs"
-              :content="false"
-              size="xs"
-              color="primary"
-            />
-
-            <span class="flex-1" />
-
-            <UTooltip text="Close">
-              <UButton
-                icon="i-lucide-x"
-                color="neutral"
-                variant="ghost"
-                size="sm"
-                aria-label="Close Theme Studio"
-                @click="open = false"
-              />
-            </UTooltip>
-          </div>
-
-          <!-- The floating preview card: the grid scrolls inside it; the
-               app-shell views own their height and scroll internally. -->
-          <div
-            class="flex-1 min-w-0 min-h-0 ring ring-default bg-default m-4 mt-0 rounded-lg"
-            :class="[chromeShadow, view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden']"
-          >
-            <ThemeStudioBento v-if="view === 'grid'" />
-            <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
-            <ThemeStudioViewChat v-else-if="view === 'chat'" />
-            <ThemeStudioViewSaas v-else-if="view === 'saas'" />
-            <ThemeStudioViewLanding v-else-if="view === 'landing'" />
-            <ThemeStudioViewA11y v-else-if="view === 'a11y'" />
-          </div>
-        </div>
       </div>
     </template>
   </UModal>
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 0368dcca99..54a5828187 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -1,5 +1,4 @@
 import type { ThemeDoc } from './types'
-import { CUSTOM_PALETTES } from './custom-palettes'
 
 export interface ThemePreset {
   id: string
@@ -120,16 +119,16 @@ export const presets: ThemePreset[] = [{
     palettes: {
       grove: {
         shades: {
-          50: 'oklch(91% 0.044 140.516)',
-          100: 'oklch(84.7% 0.045 140.375)',
-          200: 'oklch(78.6% 0.046 140.572)',
-          300: 'oklch(72.4% 0.046 141.493)',
-          400: 'oklch(65.8% 0.045 142.245)',
-          500: 'oklch(59% 0.039 142.85)',
-          600: 'oklch(52.1% 0.033 143.372)',
-          700: 'oklch(45.1% 0.028 143.839)',
-          800: 'oklch(38.2% 0.024 144.268)',
-          900: 'oklch(31.2% 0.02 144.666)',
+          50: 'oklch(91% 0.036 140.516)',
+          100: 'oklch(84.9% 0.042 140.374)',
+          200: 'oklch(78.6% 0.048 140.574)',
+          300: 'oklch(72.3% 0.053 141.491)',
+          400: 'oklch(65.8% 0.057 142.244)',
+          500: 'oklch(59.1% 0.051 142.85)',
+          600: 'oklch(52.2% 0.042 143.373)',
+          700: 'oklch(45.2% 0.034 143.84)',
+          800: 'oklch(38.1% 0.028 144.268)',
+          900: 'oklch(31.1% 0.022 144.667)',
           950: 'oklch(24.2% 0.017 145.041)'
         }
       }
@@ -310,49 +309,6 @@ export const presets: ThemePreset[] = [{
       shadow: 'soft'
     }
   }
-}, {
-  id: 'ghibli',
-  name: 'Ghibli',
-  description: 'Moss green and sun-warmed paper, gentle corners.',
-  icon: 'i-lucide-leaf',
-  doc: {
-    version: 1,
-    meta: { name: 'Ghibli', base: 'ghibli' },
-    palettes: {
-      moss: {
-        shades: {
-          50: 'oklch(97.7% 0.017 113.81)',
-          100: 'oklch(95% 0.035 115.901)',
-          200: 'oklch(90.3% 0.064 116.322)',
-          300: 'oklch(84.3% 0.093 117.644)',
-          400: 'oklch(77.1% 0.103 119.054)',
-          500: 'oklch(69.5% 0.1 119.088)',
-          600: 'oklch(60.3% 0.089 120.118)',
-          700: 'oklch(52% 0.077 121.459)',
-          800: 'oklch(43.7% 0.061 121.818)',
-          900: 'oklch(37.8% 0.049 122.375)',
-          950: 'oklch(25.8% 0.032 121.343)'
-        }
-      }
-    },
-    colors: {
-      primary: 'moss',
-      secondary: 'amber',
-      neutral: 'stone'
-    },
-    radius: 0.5,
-    font: { sans: 'Poppins' },
-    tokens: {
-      light: {
-        '--ui-bg': 'var(--ui-color-secondary-100)',
-        '--ui-bg-muted': 'var(--ui-color-secondary-50)',
-        '--ui-border': 'var(--ui-color-secondary-300)'
-      }
-    },
-    style: {
-      shadow: 'soft'
-    }
-  }
 }, {
   id: 'marvel',
   name: 'Marvel',
@@ -499,109 +455,4 @@ export const presets: ThemePreset[] = [{
       }
     }
   }
-}, {
-  id: 'cabin',
-  name: 'Cabin',
-  description: 'Cocoa and sand — a warm, woody lodge with soft buttons.',
-  icon: 'i-lucide-trees',
-  doc: {
-    version: 1,
-    meta: { name: 'Cabin', base: 'cabin' },
-    // the studio's own ramps, inlined so exports are self-contained
-    palettes: {
-      cocoa: { shades: CUSTOM_PALETTES.cocoa! },
-      sand: { shades: CUSTOM_PALETTES.sand! }
-    },
-    colors: {
-      primary: 'cocoa',
-      neutral: 'sand'
-    },
-    radius: 0.375,
-    font: { sans: 'Raleway' },
-    tokens: {
-      light: {
-        '--ui-bg': 'var(--ui-color-neutral-50)'
-      }
-    },
-    style: {
-      shadow: 'soft',
-      defaults: { variants: { buttons: 'soft' } }
-    }
-  }
-}, {
-  id: 'harbor',
-  name: 'Harbor',
-  description: 'Sculpted harbor blues — subtle panels, fine borders, misty shadows.',
-  icon: 'i-lucide-anchor',
-  doc: {
-    version: 1,
-    meta: { name: 'Harbor', base: 'harbor' },
-    // Deeper, moodier takes on marine/ash sculpted in the curve editor —
-    // the light end starts well below white, so both modes feel overcast.
-    palettes: {
-      marine: {
-        shades: {
-          50: 'oklch(97.2% 0.014 250.593)',
-          100: 'oklch(93.4% 0.033 250.984)',
-          200: 'oklch(88% 0.06 251.557)',
-          300: 'oklch(78.9% 0.11 252.327)',
-          400: 'oklch(67% 0.151 253.303)',
-          500: 'oklch(57.6% 0.143 254.468)',
-          600: 'oklch(49.9% 0.123 255.734)',
-          700: 'oklch(43.3% 0.1 256.821)',
-          800: 'oklch(37.2% 0.078 257.093)',
-          900: 'oklch(31.7% 0.057 255.71)',
-          950: 'oklch(26.4% 0.036 252.434)'
-        }
-      },
-      ash: {
-        shades: {
-          50: 'oklch(94% 0.029 264.505)',
-          100: 'oklch(89.3% 0.044 264.423)',
-          200: 'oklch(83.9% 0.042 264.302)',
-          300: 'oklch(74% 0.042 264.139)',
-          400: 'oklch(61.7% 0.042 263.933)',
-          500: 'oklch(52.7% 0.037 263.683)',
-          600: 'oklch(44.8% 0.032 263.395)',
-          700: 'oklch(37.6% 0.026 263.083)',
-          800: 'oklch(30.7% 0.021 262.799)',
-          900: 'oklch(24.1% 0.017 262.757)',
-          950: 'oklch(17.7% 0.012 270.771)'
-        }
-      }
-    },
-    colors: {
-      primary: 'marine',
-      neutral: 'ash'
-    },
-    radius: 0.125,
-    font: { sans: 'Inter' },
-    tokens: {
-      light: {
-        '--ui-bg': 'var(--ui-color-neutral-50)',
-        '--ui-text-inverted': 'var(--ui-color-neutral-50)'
-      },
-      dark: {
-        '--ui-text-highlighted': 'var(--ui-color-neutral-50)',
-        '--ui-bg-inverted': 'var(--ui-color-neutral-50)',
-        '--ui-border-inverted': 'var(--ui-color-neutral-50)'
-      }
-    },
-    style: {
-      shadow: 'soft',
-      shadowColor: 'shade',
-      shadowShade: { light: 400, dark: 950 },
-      shadowOpacity: 40,
-      border: 'custom',
-      borderColor: 'shade',
-      borderShade: { light: 200, dark: 700 },
-      defaults: { variants: { panels: 'subtle' } },
-      tokenShades: {
-        '--ui-primary': { dark: 300 },
-        '--ui-success': { light: 600, dark: 600 },
-        '--ui-warning': { light: 700, dark: 700 },
-        '--ui-error': { light: 700, dark: 400 }
-      }
-    }
-  }
 }]

From d1995824ed4e5a3e9f29bb45bea4e9cb146098ec Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Tue, 7 Jul 2026 13:49:38 +0200
Subject: [PATCH 091/185] =?UTF-8?q?feat(docs):=20sidebar=20refinement=20pa?=
 =?UTF-8?q?ss=20=E2=80=94=20inset=20panel=20with=20tuned=20padding,=20stat?=
 =?UTF-8?q?ic=20sections=20with=20separators,=20shade-colored=20sliders?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The settings panel becomes an inset right-hand USidebar with a
color-mode switch and close in its header; sections lose their
collapse entirely (headers over always-open controls, hairline
separators between); shade sliders tint their fill and thumb ring with
the ramp color at the selected shade; the view switcher is a ghost
select; Orchard's inner shadow lightens to grove-200 in light mode.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 102 +++++++++---------
 .../theme-studio/ThemeStudioModal.vue         |  46 +++-----
 .../theme-studio/ThemeStudioSection.vue       |  50 ++++-----
 .../theme-studio/ThemeStudioShadeSlider.vue   |  11 +-
 docs/app/utils/theme-engine/presets.ts        |   2 +-
 5 files changed, 98 insertions(+), 113 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 37a144e350..8345f4a4ed 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -4,6 +4,11 @@ import type { VariantGroup, TokenRamp, ColorAlias } from '../../utils/theme-engi
 
 const appConfig = useAppConfig()
 
+// The controls own their scroll (the sidebar body clips), so the edge
+// fades can signal overflow in both directions.
+const body = useTemplateRef('body')
+const { style: scrollShadowStyle } = useScrollShadow(body)
+
 const {
   neutral,
   primary,
@@ -18,21 +23,6 @@ const {
 
 const { isCustomPalette, style, setStyle } = useThemeStudio()
 
-const openSections = reactive<Record<string, boolean>>({
-  primary: true,
-  neutral: true,
-  semantic: true,
-  scale: true,
-  defaults: true,
-  shadows: true,
-  innerShadows: true,
-  borders: true,
-  font: true,
-  icons: true,
-  // token groups keyed by group name — everything starts open
-  ...Object.fromEntries(TOKEN_GROUPS.map(group => [`tokens-${group.key}`, true]))
-})
-
 const semanticAliases: ColorAlias[] = ['secondary', 'success', 'info', 'warning', 'error']
 
 const SHADOW_STYLE_OPTIONS = [
@@ -279,18 +269,18 @@ const shadowColor = computed({
 </script>
 
 <template>
-  <div :key="hydrationKey" class="flex flex-col gap-4">
-    <ThemeStudioPresetMenu class="p-4 pb-0" />
+  <div ref="body" :key="hydrationKey" :style="scrollShadowStyle" class="flex flex-col gap-4 h-full overflow-y-auto">
+    <ThemeStudioPresetMenu class="py-3 pb-0" />
     <UAccordion
       v-model="openGroups"
-      :ui="{ content: 'px-4', header: 'px-6' }"
+      :ui="{ content: 'px-px', header: 'px-0', item: 'border-muted' }"
       :items="groupItems"
       :unmount-on-hide="false"
-      class="border-y border-default"
+      class="border-y border-muted"
     >
       <template #colors>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <ThemeStudioSection v-model:open="openSections.primary" label="Primary" help-to="/docs/getting-started/theme/css-variables#colors">
+          <ThemeStudioSection label="Primary" help-to="/docs/getting-started/theme/css-variables#colors">
             <div>
               <UFieldGroup size="sm" class="flex w-full">
                 <ThemeStudioColorMenu alias="primary" class="flex-1 min-w-0" />
@@ -311,7 +301,9 @@ const shadowColor = computed({
             </div>
           </ThemeStudioSection>
 
-          <ThemeStudioSection v-model:open="openSections.neutral" label="Neutral" help-to="/docs/getting-started/theme/css-variables#text">
+          <USeparator />
+
+          <ThemeStudioSection label="Neutral" help-to="/docs/getting-started/theme/css-variables#text">
             <div>
               <UFieldGroup size="sm" class="flex w-full">
                 <ThemeStudioColorMenu alias="neutral" class="flex-1 min-w-0" />
@@ -333,7 +325,9 @@ const shadowColor = computed({
             </div>
           </ThemeStudioSection>
 
-          <ThemeStudioSection v-model:open="openSections.semantic" label="Semantic" help-to="/docs/getting-started/theme/design-system">
+          <USeparator />
+
+          <ThemeStudioSection label="Semantic" help-to="/docs/getting-started/theme/design-system">
             <div class="flex flex-col gap-1.5">
               <div v-for="alias in semanticAliases" :key="alias">
                 <div class="flex items-center gap-2">
@@ -365,7 +359,7 @@ const shadowColor = computed({
 
       <template #style>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <ThemeStudioSection v-model:open="openSections.shadows" label="Shadow">
+          <ThemeStudioSection label="Shadow">
             <div>
               <div class="grid grid-cols-3 gap-1">
                 <ThemeStudioPickerButton
@@ -418,7 +412,9 @@ const shadowColor = computed({
             </div>
           </ThemeStudioSection>
 
-          <ThemeStudioSection v-model:open="openSections.innerShadows" label="Inner shadow">
+          <USeparator />
+
+          <ThemeStudioSection label="Inner shadow">
             <div>
               <div class="grid grid-cols-3 gap-1">
                 <ThemeStudioPickerButton
@@ -471,7 +467,9 @@ const shadowColor = computed({
             </div>
           </ThemeStudioSection>
 
-          <ThemeStudioSection v-model:open="openSections.borders" label="Borders">
+          <USeparator />
+
+          <ThemeStudioSection label="Borders">
             <div>
               <div class="grid grid-cols-3 gap-1">
                 <ThemeStudioPickerButton
@@ -526,32 +524,34 @@ const shadowColor = computed({
 
       <template #tokens>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <ThemeStudioSection
-            v-for="group in tokenGroups"
-            :key="group.key"
-            v-model:open="openSections[`tokens-${group.key}`]"
-            :label="group.label"
-          >
-            <div class="flex flex-col gap-3">
-              <div v-for="section in group.sections" :key="section.token" class="flex flex-col gap-1.5">
-                <span class="text-[11px] text-muted select-none">{{ section.label }}</span>
-
-                <ThemeStudioShadeSlider
-                  v-for="(slider, modeName) in section.sliders"
-                  :key="modeName"
-                  v-model="slider.value"
-                  :mode="modeName"
-                  :chip="rampChip(section.ramp)"
-                />
+          <template v-for="(group, index) in tokenGroups" :key="group.key">
+            <USeparator v-if="index" />
+
+            <ThemeStudioSection
+
+              :label="group.label"
+            >
+              <div class="flex flex-col gap-3">
+                <div v-for="section in group.sections" :key="section.token" class="flex flex-col gap-1.5">
+                  <span class="text-[11px] text-muted select-none">{{ section.label }}</span>
+
+                  <ThemeStudioShadeSlider
+                    v-for="(slider, modeName) in section.sliders"
+                    :key="modeName"
+                    v-model="slider.value"
+                    :mode="modeName"
+                    :chip="rampChip(section.ramp)"
+                  />
+                </div>
               </div>
-            </div>
-          </ThemeStudioSection>
+            </ThemeStudioSection>
+          </template>
         </div>
       </template>
 
       <template #general>
         <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <ThemeStudioSection v-model:open="openSections.font" label="Font" help-to="/docs/getting-started/integrations/fonts">
+          <ThemeStudioSection label="Font" help-to="/docs/getting-started/integrations/fonts">
             <div>
               <USelect
                 v-model="font"
@@ -565,7 +565,9 @@ const shadowColor = computed({
             </div>
           </ThemeStudioSection>
 
-          <ThemeStudioSection v-model:open="openSections.icons" label="Icons" help-to="/docs/getting-started/integrations/icons">
+          <USeparator />
+
+          <ThemeStudioSection label="Icons" help-to="/docs/getting-started/integrations/icons">
             <div>
               <USelect
                 v-model="icon"
@@ -580,7 +582,9 @@ const shadowColor = computed({
             </div>
           </ThemeStudioSection>
 
-          <ThemeStudioSection v-model:open="openSections.scale" label="Scale">
+          <USeparator />
+
+          <ThemeStudioSection label="Scale">
             <div class="flex flex-col gap-2">
               <div class="flex items-center gap-2">
                 <span class="text-[11px] text-muted w-13 shrink-0 select-none">Radius</span>
@@ -614,7 +618,9 @@ const shadowColor = computed({
             </div>
           </ThemeStudioSection>
 
-          <ThemeStudioSection v-model:open="openSections.defaults" label="Components">
+          <USeparator />
+
+          <ThemeStudioSection label="Components">
             <div class="flex flex-col gap-1.5">
               <div v-for="field in variantGroupFields" :key="field.key" class="flex items-center gap-2">
                 <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index 6f51d86c62..300da6e2b3 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -3,8 +3,7 @@ import type { ThemeDoc } from '../../utils/theme-engine'
 
 const { track } = useAnalytics()
 const { style, applyDoc, studioOpen: open } = useThemeStudio()
-const { modes, mode, currentDoc, resetTheme } = useTheme()
-const colorMode = useColorMode()
+const { currentDoc, resetTheme } = useTheme()
 
 const route = useRoute()
 const router = useRouter()
@@ -134,7 +133,7 @@ const viewTabs = [
     description="Customize Nuxt UI live: colors, radius, fonts and icons — then export only what you changed."
   >
     <template #content>
-      <div class="flex flex-row w-full h-full bg-neutral-200 dark:bg-neutral-950">
+      <div class="flex flex-row w-full h-full bg-neutral-100 dark:bg-neutral-900">
         <div class="flex-1 min-w-0 flex flex-col h-full">
           <div
             class="shrink-0 flex items-center gap-2 border-default px-4 sm:px-4 py-3"
@@ -143,9 +142,9 @@ const viewTabs = [
               v-model="view"
               :items="viewTabs"
               :icon="viewTabs.find(tab => tab.value === view)?.icon"
-              size="sm"
+
               color="neutral"
-              variant="subtle"
+              variant="ghost"
               class="w-44"
             />
 
@@ -156,7 +155,7 @@ const viewTabs = [
                 :icon="sidebarOpen ? 'i-lucide-panel-right-close' : 'i-lucide-panel-right-open'"
                 color="neutral"
                 variant="ghost"
-                size="sm"
+
                 aria-label="Toggle settings panel"
                 @click="sidebarOpen = !sidebarOpen"
               />
@@ -180,34 +179,20 @@ const viewTabs = [
         <USidebar
           v-model:open="sidebarOpen"
           side="right"
-          variant="floating"
+          variant="inset"
           :style="{ '--sidebar-width': '21rem' }"
-          :ui="{ container: 'ps-0', header: 'bg-elevated/50 lg:rounded-t-lg p-4 min-h-0', body: 'p-0 gap-0 bg-default', footer: 'bg-elevated/50 lg:rounded-b-lg', inner: [chromeShadow, 'bg-default'] }"
+          :ui="{ container: 'py-3', header: 'p-6 pt-0 pb-4 min-h-0 ps-4', footer: 'p-6 pb-2 ps-4 pt-4', body: 'py-0 px-6 ps-4' }"
         >
           <template #header>
             <Logo class="w-auto h-5 shrink-0 mr-auto" />
 
-            <UTooltip v-for="m in modes" :key="m.label" :text="`${m.label} mode`" class="capitalize">
-              <UButton
-                :icon="m.icon"
-                color="neutral"
-                variant="ghost"
-                size="xs"
-                square
-                :active="mounted && colorMode.preference === m.label"
-                active-color="primary"
-                active-variant="subtle"
-                :aria-label="`${m.label} mode`"
-                @click="mode = m.label"
-              />
-            </UTooltip>
+            <UColorModeSwitch />
 
             <UTooltip text="Close">
               <UButton
                 icon="i-lucide-x"
                 color="neutral"
                 variant="ghost"
-                size="xs"
                 square
                 aria-label="Close Theme Studio"
                 @click="open = false"
@@ -218,6 +203,13 @@ const viewTabs = [
           <ThemeStudioControls />
 
           <template #footer>
+            <div class="flex-1 min-w-0">
+              <ThemeStudioImport />
+            </div>
+
+            <div class="flex-1 min-w-0">
+              <ThemeStudioExport />
+            </div>
             <UFieldGroup size="sm">
               <UTooltip text="Undo" :kbds="['meta', 'Z']">
                 <UButton
@@ -242,14 +234,6 @@ const viewTabs = [
               </UTooltip>
             </UFieldGroup>
 
-            <div class="flex-1 min-w-0">
-              <ThemeStudioImport />
-            </div>
-
-            <div class="flex-1 min-w-0">
-              <ThemeStudioExport />
-            </div>
-
             <UTooltip text="Reset theme">
               <UButton
                 icon="i-lucide-rotate-ccw"
diff --git a/docs/app/components/theme-studio/ThemeStudioSection.vue b/docs/app/components/theme-studio/ThemeStudioSection.vue
index 069184368e..c2e3432fdc 100644
--- a/docs/app/components/theme-studio/ThemeStudioSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSection.vue
@@ -1,42 +1,28 @@
 <script setup lang="ts">
-/** One settings section: a fieldset card whose legend chip is the trigger. */
+/** One settings section: a plain header row above its always-visible controls. */
 defineProps<{
   label: string
-  /** Docs page the legend's help icon links to */
+  /** Docs page the header's help icon links to */
   helpTo?: string
 }>()
-
-const open = defineModel<boolean>('open', { default: true })
 </script>
 
 <template>
-  <UCollapsible v-model:open="open" as="fieldset" :unmount-on-hide="false" class="rounded-md ring ring-default bg-default p-2.5">
-    <template #default="{ open: isOpen }">
-      <legend class="bg-default select-none flex items-center gap-1 cursor-pointer">
-        <UButton
-          :label="label"
-          color="neutral"
-          variant="ghost"
-          size="xs"
-          trailing-icon="i-lucide-chevron-down"
-          class="font-semibold"
-          :ui="{ trailingIcon: ['size-3 text-dimmed transition-transform duration-200', !isOpen && '-rotate-90'] }"
-        />
+  <div>
+    <div class="flex items-center gap-1 mb-1.5">
+      <span class="text-xs font-semibold text-highlighted select-none">{{ label }}</span>
+
+      <UButton
+        v-if="helpTo"
+        :to="helpTo"
+        size="xs"
+        color="neutral"
+        variant="ghost"
+        icon="i-lucide-help-circle"
+        :ui="{ leadingIcon: 'size-3' }"
+      />
+    </div>
 
-        <UButton
-          v-if="helpTo"
-          :to="helpTo"
-          size="xs"
-          color="neutral"
-          variant="ghost"
-          icon="i-lucide-help-circle"
-          :ui="{ leadingIcon: 'size-3' }"
-          @click.stop
-        />
-      </legend>
-    </template>
-    <template #content>
-      <slot />
-    </template>
-  </UCollapsible>
+    <slot />
+  </div>
 </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue b/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue
index 77deac6f3f..92886468d0 100644
--- a/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue
+++ b/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue
@@ -21,7 +21,16 @@ const index = defineModel<number>({ required: true })
       />
     </span>
 
-    <USlider v-model="index" :min="0" :max="SHADES.length - 1" :step="1" size="sm" />
+    <!-- the fill wears the ramp color at the selected shade -->
+    <USlider
+      v-model="index"
+      :min="0"
+      :max="SHADES.length - 1"
+      :step="1"
+      size="sm"
+      :style="{ '--slider-color': `var(--color-${chip}-${SHADES[index]})` }"
+      :ui="{ range: 'bg-(--slider-color)', thumb: 'ring-(--slider-color)' }"
+    />
 
     <span class="text-[11px] text-dimmed font-mono w-7 text-right shrink-0">{{ SHADES[index] }}</span>
   </div>
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 54a5828187..5bb3f7caf1 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -162,7 +162,7 @@ export const presets: ThemePreset[] = [{
       innerShadowGeometry: { x: 0, y: -3, blur: 0, spread: 0 },
       innerShadowOpacity: 50,
       innerShadowColor: 'shade',
-      innerShadowShade: { light: 500, dark: 950 },
+      innerShadowShade: { light: 200, dark: 950 },
       defaults: { variant: 'subtle' },
       tokenShades: {
         '--ui-bg-muted': { light: 100 },

From f9c5a991dff562af05b587ab0d00c07704a12372 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Tue, 7 Jul 2026 15:52:33 +0200
Subject: [PATCH 092/185] feat(docs): Theme Studio becomes a left-edge drawer
 with a settings snap point
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UDrawer replaces the fullscreen modal: opening lands on a snap that
exposes exactly the settings panel (21rem + the drawer inset) over the
live site, and an eye toggle pulls the full preview out. The header
popover is gone — the swatch button triggers the drawer directly — and
the sidebar header carries the color-mode switch and close. The settings
body scrolls under a scroll shadow, and the preview column fades out
below the full snap. View scrollers take the card radius and hard paint
containment (Chromium won't clip nested composited layers otherwise),
with the nav bars in the SaaS and Landing views wearing the top radius
directly.

Known issue: the ?studio param no longer opens the drawer on cold load —
vaul rejects an open set during mount.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/components/header/Header.vue         |   2 -
 .../theme-studio/ThemeStudioModal.vue         |  88 ++++++--
 .../theme-studio/ThemeStudioPicker.vue        | 193 ------------------
 .../theme-studio/ThemeStudioViewLanding.vue   |   2 +-
 .../theme-studio/ThemeStudioViewSaas.vue      |   2 +-
 5 files changed, 68 insertions(+), 219 deletions(-)
 delete mode 100644 docs/app/components/theme-studio/ThemeStudioPicker.vue

diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index b8bdf6544f..86ec737954 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -45,8 +45,6 @@ function toggleChat() {
         />
       </UTooltip>
 
-      <ThemeStudioPicker />
-
       <ThemeStudioModal />
 
       <UTooltip text="Open on GitHub" class="hidden lg:flex">
diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index 300da6e2b3..7d7532dadd 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -2,7 +2,7 @@
 import type { ThemeDoc } from '../../utils/theme-engine'
 
 const { track } = useAnalytics()
-const { style, applyDoc, studioOpen: open } = useThemeStudio()
+const { applyDoc, studioOpen: open } = useThemeStudio()
 const { currentDoc, resetTheme } = useTheme()
 
 const route = useRoute()
@@ -14,9 +14,12 @@ const mounted = ref(false)
 onMounted(() => {
   mounted.value = true
 
-  // ?studio survives reloads and makes an open studio linkable.
+  // ?studio survives reloads and makes an open studio linkable. Vaul
+  // rejects an open set during its own mount — wait a frame.
   if (route.query.studio !== undefined) {
-    open.value = true
+    requestAnimationFrame(() => {
+      open.value = true
+    })
   }
 })
 
@@ -101,15 +104,17 @@ watch(open, (isOpen) => {
 
 const sidebarOpen = ref(true)
 
-// Both floating panels wear IDENTICAL chrome: ring edges (default-width
-// rings follow the studio width variable) and one shared shadow treatment,
-// so the sidebar and preview card always match.
-const chromeShadow = computed(() => {
-  const shadow = style.value.shadow
-  if (shadow === 'none') return 'shadow-none'
-  if (shadow === 'hard') return 'shadow-(--ui-shadow-hard-lg)'
-  if (shadow === 'soft') return 'shadow-lg shadow-(color:--ui-shadow-final-soft)'
-  return 'shadow-lg'
+/**
+ * Drawer snap points: the first exposes just the settings panel, a full
+ * pull reveals the preview beside it. Reset to settings on every open.
+ * Vaul measures px snaps against the window, and the drawer sits 1rem shy
+ * of full width — so settings-only exposure is the 21rem sidebar + 1rem.
+ */
+const SETTINGS_SNAP = '352px'
+const snap = ref<string | number>(SETTINGS_SNAP)
+
+watch(open, (isOpen) => {
+  if (isOpen) snap.value = SETTINGS_SNAP
 })
 
 /** Preview views: the bento grid plus app-scale layouts from the real templates. */
@@ -126,15 +131,34 @@ const viewTabs = [
 </script>
 
 <template>
-  <UModal
+  <UDrawer
     v-model:open="open"
-    fullscreen
+    v-model:active-snap-point="snap"
+    direction="left"
+    :snap-points="[SETTINGS_SNAP, 1]"
+    :handle="false"
+    handle-only
+    :modal="false"
+    inset
     title="Theme Studio"
     description="Customize Nuxt UI live: colors, radius, fonts and icons — then export only what you changed."
+    :ui="{ content: 'w-[calc(100vw-2rem)] rounded-xl max-w-none overflow-hidden' }"
   >
+    <UTooltip text="Theme Studio">
+      <UButton
+        icon="i-lucide-swatch-book"
+        color="neutral"
+        variant="ghost"
+        aria-label="Open Theme Studio"
+      />
+    </UTooltip>
+
     <template #content>
       <div class="flex flex-row w-full h-full bg-neutral-100 dark:bg-neutral-900">
-        <div class="flex-1 min-w-0 flex flex-col h-full">
+        <div
+          class="flex-1 min-w-0 flex flex-col h-full transition-opacity duration-200"
+          :class="snap === 1 ? 'opacity-100' : 'opacity-0'"
+        >
           <div
             class="shrink-0 flex items-center gap-2 border-default px-4 sm:px-4 py-3"
           >
@@ -144,8 +168,8 @@ const viewTabs = [
               :icon="viewTabs.find(tab => tab.value === view)?.icon"
 
               color="neutral"
-              variant="ghost"
-              class="w-44"
+              variant="subtle"
+              class="w-32"
             />
 
             <span class="flex-1" />
@@ -163,10 +187,19 @@ const viewTabs = [
           </div>
 
           <!-- The floating preview card: the grid scrolls inside it; the
-               app-shell views own their height and scroll internally. -->
+               app-shell views own their height and scroll internally.
+               [&>*]:rounded-[inherit] + [contain:paint] put the radius and
+               hard paint containment on the views' own scrollers — Chromium
+               won't clip nested composited layers (sticky headers, filtered
+               glows) by an ancestor's radius or overflow alone. -->
           <div
-            class="flex-1 min-w-0 min-h-0 ring ring-default bg-default m-4 mt-0 rounded-lg"
-            :class="[chromeShadow, view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden']"
+            class="flex-1 min-w-0 min-h-0 ring ring-default bg-default m-4 mt-0 rounded-lg [&>*]:rounded-[inherit] [&>*]:[contain:paint]"
+            :class="[
+              view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden',
+              // the open sidebar's own padding provides the gap; collapsed,
+              // the card needs its margin back
+              sidebarOpen ? 'me-0' : 'me-4'
+            ]"
           >
             <ThemeStudioBento v-if="view === 'grid'" />
             <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
@@ -181,11 +214,22 @@ const viewTabs = [
           side="right"
           variant="inset"
           :style="{ '--sidebar-width': '21rem' }"
-          :ui="{ container: 'py-3', header: 'p-6 pt-0 pb-4 min-h-0 ps-4', footer: 'p-6 pb-2 ps-4 pt-4', body: 'py-0 px-6 ps-4' }"
+          :ui="{ container: 'py-3 h-full', header: 'p-6 pt-0 pb-3 min-h-0 ', footer: 'p-6 pb-3 pt-3', body: 'py-0 px-6' }"
         >
           <template #header>
             <Logo class="w-auto h-5 shrink-0 mr-auto" />
 
+            <UTooltip :text="snap === 1 ? 'Hide preview' : 'Show preview'">
+              <UButton
+                :icon="snap === 1 ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+                color="neutral"
+                variant="ghost"
+                square
+                :aria-label="snap === 1 ? 'Hide preview' : 'Show preview'"
+                @click="snap = snap === 1 ? SETTINGS_SNAP : 1"
+              />
+            </UTooltip>
+
             <UColorModeSwitch />
 
             <UTooltip text="Close">
@@ -248,5 +292,5 @@ const viewTabs = [
         </USidebar>
       </div>
     </template>
-  </UModal>
+  </UDrawer>
 </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioPicker.vue b/docs/app/components/theme-studio/ThemeStudioPicker.vue
deleted file mode 100644
index a2368ae577..0000000000
--- a/docs/app/components/theme-studio/ThemeStudioPicker.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<script setup lang="ts">
-const colorMode = useColorMode()
-const { track } = useAnalytics()
-
-const open = ref(false)
-
-watch(open, (isOpen) => {
-  if (isOpen) {
-    track('Theme Picker Opened')
-  }
-})
-
-const { copy: copyCSS, copied: copiedCSS } = useClipboard()
-const { copy: copyConfig, copied: copiedConfig } = useClipboard()
-
-const {
-  radiuses,
-  radius,
-  modes,
-  mode,
-  hasCSSChanges,
-  hasConfigChanges,
-  configLabel,
-  exportCSS,
-  exportConfig,
-  resetTheme
-} = useTheme()
-
-const { studioOpen } = useThemeStudio()
-
-function openStudio() {
-  open.value = false
-  studioOpen.value = true
-}
-</script>
-
-<template>
-  <UPopover v-model:open="open" :ui="{ content: 'w-72 p-4 flex flex-col gap-4 overflow-y-auto max-h-[calc(100vh-5rem)]' }">
-    <template #default>
-      <UButton
-        icon="i-lucide-swatch-book"
-        color="neutral"
-        :variant="open ? 'soft' : 'ghost'"
-        square
-        aria-label="Color picker"
-        :ui="{ leadingIcon: 'text-primary' }"
-      />
-    </template>
-
-    <template #content>
-      <ThemeStudioPresetMenu />
-
-      <UButton
-        label="Open Theme Studio"
-        icon="i-lucide-swatch-book"
-        color="neutral"
-        variant="subtle"
-        size="sm"
-        block
-        @click="openStudio"
-      />
-
-      <fieldset>
-        <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
-          Primary
-
-          <UButton
-            to="/docs/getting-started/theme/css-variables#colors"
-            size="xs"
-            color="neutral"
-            variant="link"
-            icon="i-lucide-help-circle"
-            class="p-0 -my-0.5"
-            :ui="{ leadingIcon: 'size-3' }"
-          />
-        </legend>
-
-        <ThemeStudioColorMenu alias="primary" class="w-full" />
-      </fieldset>
-
-      <fieldset>
-        <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
-          Background
-
-          <UButton
-            to="/docs/getting-started/theme/css-variables#text"
-            size="xs"
-            color="neutral"
-            variant="link"
-            icon="i-lucide-help-circle"
-            class="p-0 -my-0.5"
-            :ui="{ leadingIcon: 'size-3' }"
-          />
-        </legend>
-
-        <ThemeStudioColorMenu alias="neutral" class="w-full" />
-      </fieldset>
-
-      <fieldset>
-        <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
-          Radius
-
-          <UButton
-            to="/docs/getting-started/theme/css-variables#radius"
-            size="xs"
-            color="neutral"
-            variant="link"
-            icon="i-lucide-help-circle"
-            class="p-0 -my-0.5"
-            :ui="{ leadingIcon: 'size-3' }"
-          />
-        </legend>
-
-        <UFieldGroup class="w-full">
-          <ThemeStudioPickerButton
-            v-for="r in radiuses"
-            :key="r"
-            :label="String(r)"
-            class="grow"
-            :selected="radius === r"
-            @click="radius = r"
-          />
-        </UFieldGroup>
-      </fieldset>
-
-      <fieldset>
-        <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
-          Color Mode
-
-          <UButton
-            to="/docs/getting-started/integrations/color-mode"
-            size="xs"
-            color="neutral"
-            variant="link"
-            icon="i-lucide-help-circle"
-            class="p-0 -my-0.5"
-            :ui="{ leadingIcon: 'size-3' }"
-          />
-        </legend>
-
-        <div class="grid grid-cols-3 gap-1">
-          <ThemeStudioPickerButton
-            v-for="m in modes"
-            :key="m.label"
-            v-bind="m"
-            :selected="colorMode.preference === m.label"
-            size="sm"
-            @click="mode = m.label"
-          />
-        </div>
-      </fieldset>
-
-      <fieldset v-if="hasCSSChanges || hasConfigChanges">
-        <legend class="text-[11px] leading-none font-semibold mb-2 select-none">
-          Export
-        </legend>
-
-        <div class="flex items-center justify-between gap-1">
-          <UButton
-            v-if="hasCSSChanges"
-            color="neutral"
-            variant="subtle"
-
-            label="main.css"
-            class="flex-1 text-[11px]"
-            :icon="copiedCSS ? 'i-lucide-copy-check' : 'i-lucide-copy'"
-            @click="copyCSS(exportCSS()); track('Theme Exported', { type: 'CSS' })"
-          />
-          <UButton
-            v-if="hasConfigChanges"
-            color="neutral"
-            variant="subtle"
-
-            :label="configLabel"
-            :icon="copiedConfig ? 'i-lucide-copy-check' : 'i-lucide-copy'"
-            class="flex-1 text-[11px]"
-            @click="copyConfig(exportConfig()); track('Theme Exported', { type: 'Config' })"
-          />
-          <UTooltip text="Reset theme">
-            <UButton
-              color="neutral"
-              variant="subtle"
-
-              icon="i-lucide-rotate-ccw"
-              class="ms-auto"
-              @click="resetTheme"
-            />
-          </UTooltip>
-        </div>
-      </fieldset>
-    </template>
-  </UPopover>
-</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewLanding.vue b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
index 286c27489b..eec007d192 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
@@ -122,7 +122,7 @@ const vReveal = {
 <template>
   <div class="h-full overflow-y-auto bg-default">
     <!-- Header -->
-    <header class="sticky top-0 z-10 border-b border-default bg-default/75 backdrop-blur">
+    <header class="sticky top-0 z-10 border-b border-default bg-default/75 backdrop-blur rounded-t-[inherit]">
       <div class="flex h-14 items-center justify-between gap-3 px-4 sm:px-6">
         <div class="flex items-center gap-1.5 sm:flex-1">
           <UIcon name="i-lucide-activity" class="size-5 text-primary shrink-0" />
diff --git a/docs/app/components/theme-studio/ThemeStudioViewSaas.vue b/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
index f75dd6d4d6..9d8c65a4b0 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
@@ -199,7 +199,7 @@ const starLayers = [
 <template>
   <!-- A mini landing page: the pane is the scroll container, so the header sticks to it. -->
   <div class="h-full overflow-y-auto bg-default">
-    <UHeader :toggle="false">
+    <UHeader :toggle="false" class="rounded-t-[inherit]">
       <template #left>
         <div class="flex items-center gap-1.5">
           <UIcon name="i-lucide-rocket" class="size-6 text-primary shrink-0" />

From 2b342075710ec409c958b17fd223d708009b4b05 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Tue, 7 Jul 2026 20:29:51 +0200
Subject: [PATCH 093/185] =?UTF-8?q?feat(docs):=20studio=20drawer=20from=20?=
 =?UTF-8?q?the=20right=20=E2=80=94=20settings=20strip=20snaps=20in,=20clos?=
 =?UTF-8?q?e=20leads=20the=20panel=20header,=20collapse=20joins=20the=20vi?=
 =?UTF-8?q?ew=20picker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioModal.vue         | 128 +++++++++---------
 1 file changed, 62 insertions(+), 66 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/components/theme-studio/ThemeStudioModal.vue
index 7d7532dadd..babcc51689 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioModal.vue
@@ -134,7 +134,7 @@ const viewTabs = [
   <UDrawer
     v-model:open="open"
     v-model:active-snap-point="snap"
-    direction="left"
+    direction="right"
     :snap-points="[SETTINGS_SNAP, 1]"
     :handle="false"
     handle-only
@@ -155,91 +155,35 @@ const viewTabs = [
 
     <template #content>
       <div class="flex flex-row w-full h-full bg-neutral-100 dark:bg-neutral-900">
-        <div
-          class="flex-1 min-w-0 flex flex-col h-full transition-opacity duration-200"
-          :class="snap === 1 ? 'opacity-100' : 'opacity-0'"
-        >
-          <div
-            class="shrink-0 flex items-center gap-2 border-default px-4 sm:px-4 py-3"
-          >
-            <USelect
-              v-model="view"
-              :items="viewTabs"
-              :icon="viewTabs.find(tab => tab.value === view)?.icon"
-
-              color="neutral"
-              variant="subtle"
-              class="w-32"
-            />
-
-            <span class="flex-1" />
-
-            <UTooltip :text="sidebarOpen ? 'Hide settings' : 'Show settings'">
-              <UButton
-                :icon="sidebarOpen ? 'i-lucide-panel-right-close' : 'i-lucide-panel-right-open'"
-                color="neutral"
-                variant="ghost"
-
-                aria-label="Toggle settings panel"
-                @click="sidebarOpen = !sidebarOpen"
-              />
-            </UTooltip>
-          </div>
-
-          <!-- The floating preview card: the grid scrolls inside it; the
-               app-shell views own their height and scroll internally.
-               [&>*]:rounded-[inherit] + [contain:paint] put the radius and
-               hard paint containment on the views' own scrollers — Chromium
-               won't clip nested composited layers (sticky headers, filtered
-               glows) by an ancestor's radius or overflow alone. -->
-          <div
-            class="flex-1 min-w-0 min-h-0 ring ring-default bg-default m-4 mt-0 rounded-lg [&>*]:rounded-[inherit] [&>*]:[contain:paint]"
-            :class="[
-              view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden',
-              // the open sidebar's own padding provides the gap; collapsed,
-              // the card needs its margin back
-              sidebarOpen ? 'me-0' : 'me-4'
-            ]"
-          >
-            <ThemeStudioBento v-if="view === 'grid'" />
-            <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
-            <ThemeStudioViewChat v-else-if="view === 'chat'" />
-            <ThemeStudioViewSaas v-else-if="view === 'saas'" />
-            <ThemeStudioViewLanding v-else-if="view === 'landing'" />
-            <ThemeStudioViewA11y v-else-if="view === 'a11y'" />
-          </div>
-        </div>
         <USidebar
           v-model:open="sidebarOpen"
-          side="right"
+          side="left"
           variant="inset"
           :style="{ '--sidebar-width': '21rem' }"
           :ui="{ container: 'py-3 h-full', header: 'p-6 pt-0 pb-3 min-h-0 ', footer: 'p-6 pb-3 pt-3', body: 'py-0 px-6' }"
         >
           <template #header>
-            <Logo class="w-auto h-5 shrink-0 mr-auto" />
-
-            <UTooltip :text="snap === 1 ? 'Hide preview' : 'Show preview'">
+            <UTooltip text="Close" class="mr-auto">
               <UButton
-                :icon="snap === 1 ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+                icon="i-lucide-x"
                 color="neutral"
                 variant="ghost"
                 square
-                :aria-label="snap === 1 ? 'Hide preview' : 'Show preview'"
-                @click="snap = snap === 1 ? SETTINGS_SNAP : 1"
+                aria-label="Close Theme Studio"
+                @click="open = false"
               />
             </UTooltip>
 
             <UColorModeSwitch />
 
-            <UTooltip text="Close">
+            <UTooltip :text="snap === 1 ? 'Hide preview' : 'Show preview'">
               <UButton
-                icon="i-lucide-x"
+                :icon="snap === 1 ? 'i-lucide-eye-off' : 'i-lucide-eye'"
                 color="neutral"
                 variant="ghost"
                 square
-                aria-label="Close Theme Studio"
-                @click="open = false"
+                :aria-label="snap === 1 ? 'Hide preview' : 'Show preview'"
+                @click="snap = snap === 1 ? SETTINGS_SNAP : 1"
               />
             </UTooltip>
           </template>
@@ -290,6 +234,58 @@ const viewTabs = [
             </UTooltip>
           </template>
         </USidebar>
+        <div
+          class="flex-1 min-w-0 flex flex-col h-full transition-opacity duration-200"
+          :class="snap === 1 ? 'opacity-100' : 'opacity-0'"
+        >
+          <div
+            class="shrink-0 flex items-center gap-2 border-default px-4 sm:px-4 py-3"
+          >
+            <UTooltip :text="sidebarOpen ? 'Hide settings' : 'Show settings'">
+              <UButton
+                :icon="sidebarOpen ? 'i-lucide-panel-left-close' : 'i-lucide-panel-left-open'"
+                color="neutral"
+                variant="ghost"
+                aria-label="Toggle settings panel"
+                @click="sidebarOpen = !sidebarOpen"
+              />
+            </UTooltip>
+
+            <USelect
+              v-model="view"
+              :items="viewTabs"
+              :icon="viewTabs.find(tab => tab.value === view)?.icon"
+              color="neutral"
+              variant="subtle"
+              class="w-32"
+            />
+
+            <span class="flex-1" />
+          </div>
+
+          <!-- The floating preview card: the grid scrolls inside it; the
+               app-shell views own their height and scroll internally.
+               [&>*]:rounded-[inherit] + [contain:paint] put the radius and
+               hard paint containment on the views' own scrollers — Chromium
+               won't clip nested composited layers (sticky headers, filtered
+               glows) by an ancestor's radius or overflow alone. -->
+          <div
+            class="flex-1 min-w-0 min-h-0 ring ring-default bg-default m-4 mt-0 rounded-lg [&>*]:rounded-[inherit] [&>*]:[contain:paint]"
+            :class="[
+              view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden',
+              // the open sidebar's own padding provides the gap; collapsed,
+              // the card needs its margin back
+              sidebarOpen ? 'ms-0' : 'ms-4'
+            ]"
+          >
+            <ThemeStudioBento v-if="view === 'grid'" />
+            <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
+            <ThemeStudioViewChat v-else-if="view === 'chat'" />
+            <ThemeStudioViewSaas v-else-if="view === 'saas'" />
+            <ThemeStudioViewLanding v-else-if="view === 'landing'" />
+            <ThemeStudioViewA11y v-else-if="view === 'a11y'" />
+          </div>
+        </div>
       </div>
     </template>
   </UDrawer>

From 21233047bf3ed22158a5de79fbbfb64f4b67cad2 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Tue, 7 Jul 2026 20:47:18 +0200
Subject: [PATCH 094/185] feat(docs): Theme Studio returns as the /theme page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Maintainer feedback: better as a page than an overlay. The studio moves
into the standard page container under the site header — settings panel
on the right with import/export/undo/redo/reset in its header, view
picker and color-mode switch in the preview toolbar. The drawer, its
snap machinery, the ?studio param (and its cold-load bug) and the
studioOpen channel are all retired; the header swatch button links to
the page.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/components/header/Header.vue         |  10 +-
 .../theme-studio/ThemeStudioExport.vue        |   2 +-
 .../theme-studio/ThemeStudioImport.vue        |   2 +-
 docs/app/composables/useThemeStudio.ts        |   2 -
 .../ThemeStudioModal.vue => pages/theme.vue}  | 223 ++++++------------
 5 files changed, 82 insertions(+), 157 deletions(-)
 rename docs/app/{components/theme-studio/ThemeStudioModal.vue => pages/theme.vue} (58%)

diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index 86ec737954..ccc6321e29 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -45,7 +45,15 @@ function toggleChat() {
         />
       </UTooltip>
 
-      <ThemeStudioModal />
+      <UTooltip text="Theme Studio">
+        <UButton
+          icon="i-lucide-swatch-book"
+          color="neutral"
+          variant="ghost"
+          to="/theme"
+          aria-label="Open Theme Studio"
+        />
+      </UTooltip>
 
       <UTooltip text="Open on GitHub" class="hidden lg:flex">
         <UButton
diff --git a/docs/app/components/theme-studio/ThemeStudioExport.vue b/docs/app/components/theme-studio/ThemeStudioExport.vue
index 092268effd..30ff0a9e28 100644
--- a/docs/app/components/theme-studio/ThemeStudioExport.vue
+++ b/docs/app/components/theme-studio/ThemeStudioExport.vue
@@ -29,7 +29,7 @@ watch(open, (isOpen) => {
       label="Export"
       icon="i-lucide-download"
       color="neutral"
-      variant="outline"
+      variant="subtle"
       size="sm"
       block
     />
diff --git a/docs/app/components/theme-studio/ThemeStudioImport.vue b/docs/app/components/theme-studio/ThemeStudioImport.vue
index 9bd8036d0d..fd13963c9e 100644
--- a/docs/app/components/theme-studio/ThemeStudioImport.vue
+++ b/docs/app/components/theme-studio/ThemeStudioImport.vue
@@ -46,7 +46,7 @@ function runImport() {
       label="Import"
       icon="i-lucide-upload"
       color="neutral"
-      variant="outline"
+      variant="subtle"
       size="sm"
       block
     />
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index f59e5f0f9a..a28fbb19c1 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -12,7 +12,6 @@ export function useThemeStudio() {
   const activePreset = useState<string | undefined>(THEME_STATE_KEYS.themePreset, () => undefined)
 
   /** The studio modal — one instance mounted in the header, openable from anywhere. */
-  const studioOpen = useState('nuxt-ui-studio-open', () => false)
 
   /**
    * Curve params per alias, kept so the editor stays editable across
@@ -330,7 +329,6 @@ export function useThemeStudio() {
   return {
     presets,
     activePreset,
-    studioOpen,
     style,
     setStyle,
     paletteParams,
diff --git a/docs/app/components/theme-studio/ThemeStudioModal.vue b/docs/app/pages/theme.vue
similarity index 58%
rename from docs/app/components/theme-studio/ThemeStudioModal.vue
rename to docs/app/pages/theme.vue
index babcc51689..0d03147c01 100644
--- a/docs/app/components/theme-studio/ThemeStudioModal.vue
+++ b/docs/app/pages/theme.vue
@@ -1,26 +1,21 @@
 <script setup lang="ts">
-import type { ThemeDoc } from '../../utils/theme-engine'
+import type { ThemeDoc } from '../utils/theme-engine'
 
 const { track } = useAnalytics()
-const { applyDoc, studioOpen: open } = useThemeStudio()
+const { applyDoc } = useThemeStudio()
 const { currentDoc, resetTheme } = useTheme()
 
-const route = useRoute()
-const router = useRouter()
+useSeoMeta({
+  title: 'Theme Studio',
+  description: 'Customize Nuxt UI live: colors, radius, fonts and icons — then export only what you changed.'
+})
 
 // Resolved AFTER mount: the preference is client-only, and hydration adopts
 // SSR attributes without patching — a post-mount flip is a real update.
 const mounted = ref(false)
 onMounted(() => {
   mounted.value = true
-
-  // ?studio survives reloads and makes an open studio linkable. Vaul
-  // rejects an open set during its own mount — wait a frame.
-  if (route.query.studio !== undefined) {
-    requestAnimationFrame(() => {
-      open.value = true
-    })
-  }
+  track('Theme Studio Opened')
 })
 
 /**
@@ -80,43 +75,13 @@ function redo() {
 }
 
 defineShortcuts({
-  meta_z: () => {
-    if (open.value) undo()
-  },
-  meta_shift_z: () => {
-    if (open.value) redo()
-  },
-  ctrl_y: () => {
-    if (open.value) redo()
-  }
-})
-
-watch(open, (isOpen) => {
-  const { studio: _studio, ...query } = route.query
-  router.replace({ query: isOpen ? { ...query, studio: null } : query })
-})
-
-watch(open, (isOpen) => {
-  if (isOpen) {
-    track('Theme Studio Opened')
-  }
+  meta_z: undo,
+  meta_shift_z: redo,
+  ctrl_y: redo
 })
 
 const sidebarOpen = ref(true)
 
-/**
- * Drawer snap points: the first exposes just the settings panel, a full
- * pull reveals the preview beside it. Reset to settings on every open.
- * Vaul measures px snaps against the window, and the drawer sits 1rem shy
- * of full width — so settings-only exposure is the 21rem sidebar + 1rem.
- */
-const SETTINGS_SNAP = '352px'
-const snap = ref<string | number>(SETTINGS_SNAP)
-
-watch(open, (isOpen) => {
-  if (isOpen) snap.value = SETTINGS_SNAP
-})
-
 /** Preview views: the bento grid plus app-scale layouts from the real templates. */
 const view = ref('grid')
 
@@ -131,66 +96,69 @@ const viewTabs = [
 </script>
 
 <template>
-  <UDrawer
-    v-model:open="open"
-    v-model:active-snap-point="snap"
-    direction="right"
-    :snap-points="[SETTINGS_SNAP, 1]"
-    :handle="false"
-    handle-only
-    :modal="false"
-    inset
-    title="Theme Studio"
-    description="Customize Nuxt UI live: colors, radius, fonts and icons — then export only what you changed."
-    :ui="{ content: 'w-[calc(100vw-2rem)] rounded-xl max-w-none overflow-hidden' }"
-  >
-    <UTooltip text="Theme Studio">
-      <UButton
-        icon="i-lucide-swatch-book"
-        color="neutral"
-        variant="ghost"
-        aria-label="Open Theme Studio"
-      />
-    </UTooltip>
-
-    <template #content>
-      <div class="flex flex-row w-full h-full bg-neutral-100 dark:bg-neutral-900">
-        <USidebar
-          v-model:open="sidebarOpen"
-          side="left"
-          variant="inset"
-          :style="{ '--sidebar-width': '21rem' }"
-          :ui="{ container: 'py-3 h-full', header: 'p-6 pt-0 pb-3 min-h-0 ', footer: 'p-6 pb-3 pt-3', body: 'py-0 px-6' }"
-        >
-          <template #header>
-            <UTooltip text="Close" class="mr-auto">
-              <UButton
-                icon="i-lucide-x"
-                color="neutral"
-                variant="ghost"
-                square
-                aria-label="Close Theme Studio"
-                @click="open = false"
-              />
-            </UTooltip>
+  <main>
+    <UContainer>
+      <!-- [contain:layout] keeps the sidebar's fixed container anchored to the
+           studio area instead of the viewport (the drawer's transform used to
+           do this implicitly). -->
+      <div class="flex flex-row w-full h-[calc(100dvh-var(--ui-header-height))] bg-neutral-100 dark:bg-neutral-900 [contain:layout]">
+        <div class="flex-1 min-w-0 flex flex-col h-full">
+          <div class="shrink-0 flex items-center gap-2 border-default py-3">
+            <USelect
+              v-model="view"
+              :items="viewTabs"
+              :icon="viewTabs.find(tab => tab.value === view)?.icon"
+              color="neutral"
+              variant="subtle"
+              class="w-36"
+            />
 
+            <span class="flex-1" />
             <UColorModeSwitch />
 
-            <UTooltip :text="snap === 1 ? 'Hide preview' : 'Show preview'">
+            <UTooltip :text="sidebarOpen ? 'Hide settings' : 'Show settings'">
               <UButton
-                :icon="snap === 1 ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+                :icon="sidebarOpen ? 'i-lucide-panel-right-close' : 'i-lucide-panel-right-open'"
                 color="neutral"
                 variant="ghost"
-                square
-                :aria-label="snap === 1 ? 'Hide preview' : 'Show preview'"
-                @click="snap = snap === 1 ? SETTINGS_SNAP : 1"
+                aria-label="Toggle settings panel"
+                @click="sidebarOpen = !sidebarOpen"
               />
             </UTooltip>
-          </template>
+          </div>
 
-          <ThemeStudioControls />
+          <!-- The floating preview card: the grid scrolls inside it; the
+           app-shell views own their height and scroll internally.
+           [&>*]:rounded-[inherit] + [contain:paint] put the radius and
+           hard paint containment on the views' own scrollers — Chromium
+           won't clip nested composited layers (sticky headers, filtered
+           glows) by an ancestor's radius or overflow alone. -->
+          <div
+            class="flex-1 min-w-0 min-h-0 ring ring-default bg-default mb-4 rounded-lg [&>*]:rounded-[inherit] [&>*]:[contain:paint]"
+            :class="[
+              view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden',
+              // the open sidebar's own padding provides the gap; collapsed,
+              // the card needs its margin back
+              sidebarOpen ? 'me-0' : 'me-4'
+            ]"
+          >
+            <ThemeStudioBento v-if="view === 'grid'" />
+            <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
+            <ThemeStudioViewChat v-else-if="view === 'chat'" />
+            <ThemeStudioViewSaas v-else-if="view === 'saas'" />
+            <ThemeStudioViewLanding v-else-if="view === 'landing'" />
+            <ThemeStudioViewA11y v-else-if="view === 'a11y'" />
+          </div>
+        </div>
 
-          <template #footer>
+        <USidebar
+          v-model:open="sidebarOpen"
+          side="right"
+          variant="inset"
+          :style="{ '--sidebar-width': '21rem' }"
+          :ui="{ container: 'py-3 ps-6 h-full', header: 'pb-3 px-0 min-h-0', footer: 'py-3 px-0', body: 'py-0 px-0' }"
+        >
+          <template #header>
             <div class="flex-1 min-w-0">
               <ThemeStudioImport />
             </div>
@@ -198,12 +166,13 @@ const viewTabs = [
             <div class="flex-1 min-w-0">
               <ThemeStudioExport />
             </div>
+
             <UFieldGroup size="sm">
               <UTooltip text="Undo" :kbds="['meta', 'Z']">
                 <UButton
                   icon="i-lucide-undo-2"
                   color="neutral"
-                  variant="outline"
+                  variant="subtle"
                   :disabled="!past.length"
                   aria-label="Undo theme change"
                   @click="undo"
@@ -214,7 +183,7 @@ const viewTabs = [
                 <UButton
                   icon="i-lucide-redo-2"
                   color="neutral"
-                  variant="outline"
+                  variant="subtle"
                   :disabled="!future.length"
                   aria-label="Redo theme change"
                   @click="redo"
@@ -226,67 +195,17 @@ const viewTabs = [
               <UButton
                 icon="i-lucide-rotate-ccw"
                 color="neutral"
-                variant="outline"
+                variant="subtle"
                 size="sm"
                 aria-label="Reset theme"
                 @click="resetTheme"
               />
             </UTooltip>
           </template>
-        </USidebar>
-        <div
-          class="flex-1 min-w-0 flex flex-col h-full transition-opacity duration-200"
-          :class="snap === 1 ? 'opacity-100' : 'opacity-0'"
-        >
-          <div
-            class="shrink-0 flex items-center gap-2 border-default px-4 sm:px-4 py-3"
-          >
-            <UTooltip :text="sidebarOpen ? 'Hide settings' : 'Show settings'">
-              <UButton
-                :icon="sidebarOpen ? 'i-lucide-panel-left-close' : 'i-lucide-panel-left-open'"
-                color="neutral"
-                variant="ghost"
-                aria-label="Toggle settings panel"
-                @click="sidebarOpen = !sidebarOpen"
-              />
-            </UTooltip>
-
-            <USelect
-              v-model="view"
-              :items="viewTabs"
-              :icon="viewTabs.find(tab => tab.value === view)?.icon"
-              color="neutral"
-              variant="subtle"
-              class="w-32"
-            />
-
-            <span class="flex-1" />
-          </div>
 
-          <!-- The floating preview card: the grid scrolls inside it; the
-               app-shell views own their height and scroll internally.
-               [&>*]:rounded-[inherit] + [contain:paint] put the radius and
-               hard paint containment on the views' own scrollers — Chromium
-               won't clip nested composited layers (sticky headers, filtered
-               glows) by an ancestor's radius or overflow alone. -->
-          <div
-            class="flex-1 min-w-0 min-h-0 ring ring-default bg-default m-4 mt-0 rounded-lg [&>*]:rounded-[inherit] [&>*]:[contain:paint]"
-            :class="[
-              view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden',
-              // the open sidebar's own padding provides the gap; collapsed,
-              // the card needs its margin back
-              sidebarOpen ? 'ms-0' : 'ms-4'
-            ]"
-          >
-            <ThemeStudioBento v-if="view === 'grid'" />
-            <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
-            <ThemeStudioViewChat v-else-if="view === 'chat'" />
-            <ThemeStudioViewSaas v-else-if="view === 'saas'" />
-            <ThemeStudioViewLanding v-else-if="view === 'landing'" />
-            <ThemeStudioViewA11y v-else-if="view === 'a11y'" />
-          </div>
-        </div>
+          <ThemeStudioControls />
+        </USidebar>
       </div>
-    </template>
-  </UDrawer>
+    </UContainer>
+  </main>
 </template>

From 8c0dc2f90897a21a8388f51d97808cc09c052bc6 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Tue, 7 Jul 2026 21:40:40 +0200
Subject: [PATCH 095/185] feat(docs): studio toolbar with setting popovers,
 split component defaults with color axis, UI-hiding fullscreen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The settings panel dissolves into one toolbar: presets, per-group
popovers (Colors/General/Style/Shades — ThemeStudioControls renders one
group per instance now), view picker, fullscreen, import/export and
history actions. Component defaults split into Button/Card/Input
sections, buttons and inputs gain a default-color axis (emitted as
defaultVariants.color, extracted group-wise on import, round-trip
tested), and Size joins Scale. Fullscreen hides all chrome — site
header included via shared state — with a peek-on-hover exit and Esc.
Icon-only import gets a tooltip; colors keep the grouped Semantic
section with ghost edit pencils.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/app.vue                              |   8 +-
 docs/app/components/header/Header.vue         |   2 +
 .../theme-studio/ThemeStudioControls.vue      | 669 +++++++++---------
 .../theme-studio/ThemeStudioImport.vue        |  18 +-
 docs/app/pages/theme.vue                      | 222 +++---
 docs/app/utils/theme-engine/import.ts         |  21 +-
 docs/app/utils/theme-engine/styles.ts         |  21 +-
 test/utils/theme-import.spec.ts               |  11 +
 8 files changed, 537 insertions(+), 435 deletions(-)

diff --git a/docs/app/app.vue b/docs/app/app.vue
index 6b651a1b35..6cadbe372e 100644
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 const route = useRoute()
+
+/** The theme studio's UI-hiding fullscreen also hides the site chrome. */
+const studioFullscreen = useState('theme-studio-fullscreen', () => false)
 const appConfig = useAppConfig()
 const { style, link, color } = useTheme()
 
@@ -40,7 +43,7 @@ provide('navigation', rootNavigation)
 
     <div class="flex">
       <div class="flex-1 min-w-0" :class="[route.path.startsWith('/docs/') && 'root']">
-        <template v-if="!route.path.startsWith('/examples')">
+        <template v-if="!route.path.startsWith('/examples') && !studioFullscreen">
           <!-- <Banner /> -->
 
           <Header />
@@ -50,9 +53,10 @@ provide('navigation', rootNavigation)
           <NuxtPage />
         </NuxtLayout>
 
-        <template v-if="!route.path.startsWith('/examples')">
+        <template v-if="!route.path.startsWith('/examples') && route.path !== '/theme'">
           <Footer />
         </template>
+        <!-- footer stays off /theme: the studio is a fixed-height app page -->
       </div>
 
       <template v-if="!route.path.startsWith('/examples')">
diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index ccc6321e29..11ea501c6a 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -49,6 +49,8 @@ function toggleChat() {
         <UButton
           icon="i-lucide-swatch-book"
           color="neutral"
+          active-color="primary"
+          :active="route.path === '/theme'"
           variant="ghost"
           to="/theme"
           aria-label="Open Theme Studio"
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 8345f4a4ed..989e6af04e 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -4,10 +4,10 @@ import type { VariantGroup, TokenRamp, ColorAlias } from '../../utils/theme-engi
 
 const appConfig = useAppConfig()
 
-// The controls own their scroll (the sidebar body clips), so the edge
-// fades can signal overflow in both directions.
-const body = useTemplateRef('body')
-const { style: scrollShadowStyle } = useScrollShadow(body)
+/** Which settings group this instance renders — one popover per group. */
+defineProps<{
+  group: 'colors' | 'general' | 'style' | 'tokens'
+}>()
 
 const {
   neutral,
@@ -185,16 +185,6 @@ onMounted(() => {
 // One curve editor per alias, toggled by the edit icon next to each select.
 const paletteEditors = reactive<Record<string, boolean>>({})
 
-/** Display name for an alias's palette — custom ramps read as 'Custom'. */
-const openGroups = ref('colors')
-
-const groupItems = [
-  { label: 'Colors', value: 'colors', slot: 'colors' as const },
-  { label: 'General', value: 'general', slot: 'general' as const },
-  { label: 'Style', value: 'style', slot: 'style' as const },
-  { label: 'Shades', value: 'tokens', slot: 'tokens' as const }
-]
-
 const defaultSizeItems = [
   { label: 'Default', value: 'default' },
   { label: 'XS', value: 'xs' },
@@ -211,9 +201,9 @@ const defaultSizeItems = [
 const variantItems = (values: string[]) => ['default', ...values].map(value => ({ label: value.charAt(0).toUpperCase() + value.slice(1), value }))
 
 const variantGroupFields = [
-  { key: 'buttons' as const, label: 'Buttons', items: variantItems(['solid', 'outline', 'soft', 'subtle', 'ghost', 'link']) },
-  { key: 'panels' as const, label: 'Cards', items: variantItems(['solid', 'outline', 'soft', 'subtle']) },
-  { key: 'inputs' as const, label: 'Inputs', items: variantItems(['outline', 'soft', 'subtle', 'ghost', 'none']) }
+  { key: 'buttons' as const, label: 'Button Defaults', hasColor: true, items: variantItems(['solid', 'outline', 'soft', 'subtle', 'ghost', 'link']) },
+  { key: 'panels' as const, label: 'Card Defaults', hasColor: false, items: variantItems(['solid', 'outline', 'soft', 'subtle']) },
+  { key: 'inputs' as const, label: 'Input Defaults', hasColor: true, items: variantItems(['outline', 'soft', 'subtle', 'ghost', 'none']) }
 ]
 
 function groupVariantModel(group: VariantGroup) {
@@ -233,6 +223,21 @@ function groupVariantModel(group: VariantGroup) {
 
 const groupVariants = Object.fromEntries(variantGroupFields.map(field => [field.key, groupVariantModel(field.key)])) as Record<VariantGroup, ReturnType<typeof groupVariantModel>>
 
+const defaultColorItems = ['default', 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'].map(value => ({
+  label: value.charAt(0).toUpperCase() + value.slice(1),
+  value,
+  chip: value === 'default' ? undefined : { color: value as any }
+}))
+
+function groupColorModel(group: VariantGroup) {
+  return computed({
+    get: () => style.value.defaults?.colors?.[group] || 'default',
+    set: (value: any) => setStyle({ defaults: { ...style.value.defaults, colors: { ...style.value.defaults?.colors, [group]: value } } })
+  })
+}
+
+const groupColors = Object.fromEntries(variantGroupFields.map(field => [field.key, groupColorModel(field.key)])) as Record<VariantGroup, ReturnType<typeof groupColorModel>>
+
 const defaultSize = computed({
   get: () => style.value.defaults?.size || 'default',
   set: (value: any) => setStyle({ defaults: { ...style.value.defaults, size: value } })
@@ -269,361 +274,366 @@ const shadowColor = computed({
 </script>
 
 <template>
-  <div ref="body" :key="hydrationKey" :style="scrollShadowStyle" class="flex flex-col gap-4 h-full overflow-y-auto">
-    <ThemeStudioPresetMenu class="py-3 pb-0" />
-    <UAccordion
-      v-model="openGroups"
-      :ui="{ content: 'px-px', header: 'px-0', item: 'border-muted' }"
-      :items="groupItems"
-      :unmount-on-hide="false"
-      class="border-y border-muted"
-    >
-      <template #colors>
-        <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <ThemeStudioSection label="Primary" help-to="/docs/getting-started/theme/css-variables#colors">
-            <div>
-              <UFieldGroup size="sm" class="flex w-full">
-                <ThemeStudioColorMenu alias="primary" class="flex-1 min-w-0" />
-
-                <UButton
-                  :icon="isCustomPalette('primary') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
-                  color="neutral"
-                  variant="subtle"
-                  :active="paletteEditors.primary || isCustomPalette('primary')"
-                  active-color="primary"
-                  active-variant="subtle"
-                  aria-label="Edit primary palette"
-                  @click="paletteEditors.primary = !paletteEditors.primary"
-                />
-              </UFieldGroup>
-
-              <ThemeStudioPaletteEditor v-model:open="paletteEditors.primary" alias="primary" />
+  <div :key="hydrationKey">
+    <template v-if="group === 'colors'">
+      <div class="flex flex-col gap-2.5">
+        <ThemeStudioSection label="Primary" help-to="/docs/getting-started/theme/css-variables#colors">
+          <div>
+            <div class="flex w-full items-center gap-1.5">
+              <ThemeStudioColorMenu alias="primary" class="flex-1 min-w-0" />
+
+              <UButton
+                :icon="isCustomPalette('primary') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
+                color="neutral"
+                variant="ghost"
+                size="sm"
+                :active="paletteEditors.primary || isCustomPalette('primary')"
+                active-color="primary"
+                active-variant="subtle"
+                aria-label="Edit primary palette"
+                @click="paletteEditors.primary = !paletteEditors.primary"
+              />
             </div>
-          </ThemeStudioSection>
 
-          <USeparator />
+            <ThemeStudioPaletteEditor v-model:open="paletteEditors.primary" alias="primary" />
+          </div>
+        </ThemeStudioSection>
 
-          <ThemeStudioSection label="Neutral" help-to="/docs/getting-started/theme/css-variables#text">
-            <div>
-              <UFieldGroup size="sm" class="flex w-full">
-                <ThemeStudioColorMenu alias="neutral" class="flex-1 min-w-0" />
+        <USeparator />
 
-                <UButton
-                  :icon="isCustomPalette('neutral') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
-                  color="neutral"
-                  variant="subtle"
-                  size="sm"
-                  :active="paletteEditors.neutral || isCustomPalette('neutral')"
-                  active-color="primary"
-                  active-variant="subtle"
-                  aria-label="Edit background palette"
-                  @click="paletteEditors.neutral = !paletteEditors.neutral"
-                />
-              </UFieldGroup>
+        <ThemeStudioSection label="Neutral" help-to="/docs/getting-started/theme/css-variables#text">
+          <div>
+            <div class="flex w-full items-center gap-1.5">
+              <ThemeStudioColorMenu alias="neutral" class="flex-1 min-w-0" />
 
-              <ThemeStudioPaletteEditor v-model:open="paletteEditors.neutral" alias="neutral" />
+              <UButton
+                :icon="isCustomPalette('neutral') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
+                color="neutral"
+                variant="ghost"
+                size="sm"
+                :active="paletteEditors.neutral || isCustomPalette('neutral')"
+                active-color="primary"
+                active-variant="subtle"
+                aria-label="Edit background palette"
+                @click="paletteEditors.neutral = !paletteEditors.neutral"
+              />
             </div>
-          </ThemeStudioSection>
 
-          <USeparator />
+            <ThemeStudioPaletteEditor v-model:open="paletteEditors.neutral" alias="neutral" />
+          </div>
+        </ThemeStudioSection>
 
-          <ThemeStudioSection label="Semantic" help-to="/docs/getting-started/theme/design-system">
-            <div class="flex flex-col gap-1.5">
-              <div v-for="alias in semanticAliases" :key="alias">
-                <div class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 capitalize select-none">{{ alias }}</span>
-
-                  <UFieldGroup size="sm" class="flex flex-1 min-w-0">
-                    <ThemeStudioColorMenu :alias="alias" class="flex-1 min-w-0" />
-
-                    <UButton
-                      :icon="isCustomPalette(alias) ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
-                      color="neutral"
-                      variant="subtle"
-                      size="sm"
-                      :active="paletteEditors[alias] || isCustomPalette(alias)"
-                      active-color="primary"
-                      active-variant="subtle"
-                      :aria-label="`Edit ${alias} palette`"
-                      @click="paletteEditors[alias] = !paletteEditors[alias]"
-                    />
-                  </UFieldGroup>
-                </div>
+        <USeparator />
 
-                <ThemeStudioPaletteEditor v-model:open="paletteEditors[alias]" :alias="alias" />
+        <ThemeStudioSection label="Semantic" help-to="/docs/getting-started/theme/design-system">
+          <div class="flex flex-col gap-1.5">
+            <div v-for="alias in semanticAliases" :key="alias">
+              <div class="flex items-center gap-2">
+                <span class="text-[11px] text-muted w-13 shrink-0 capitalize select-none">{{ alias }}</span>
+
+                <div class="flex flex-1 min-w-0 items-center gap-1.5">
+                  <ThemeStudioColorMenu :alias="alias" class="flex-1 min-w-0" />
+
+                  <UButton
+                    :icon="isCustomPalette(alias) ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
+                    color="neutral"
+                    variant="ghost"
+                    size="sm"
+                    :active="paletteEditors[alias] || isCustomPalette(alias)"
+                    active-color="primary"
+                    active-variant="subtle"
+                    :aria-label="`Edit ${alias} palette`"
+                    @click="paletteEditors[alias] = !paletteEditors[alias]"
+                  />
+                </div>
               </div>
+
+              <ThemeStudioPaletteEditor v-model:open="paletteEditors[alias]" :alias="alias" />
+            </div>
+          </div>
+        </ThemeStudioSection>
+      </div>
+    </template>
+
+    <template v-else-if="group === 'style'">
+      <div class="flex flex-col gap-2.5">
+        <ThemeStudioSection label="Shadow">
+          <div>
+            <div class="grid grid-cols-3 gap-1">
+              <ThemeStudioPickerButton
+                v-for="option in SHADOW_STYLE_OPTIONS"
+                :key="option.value"
+                :label="option.label"
+                :selected="(style.shadow || 'none') === option.value"
+                @click="setStyle({ shadow: option.value })"
+              />
             </div>
-          </ThemeStudioSection>
-        </div>
-      </template>
-
-      <template #style>
-        <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <ThemeStudioSection label="Shadow">
-            <div>
-              <div class="grid grid-cols-3 gap-1">
-                <ThemeStudioPickerButton
-                  v-for="option in SHADOW_STYLE_OPTIONS"
-                  :key="option.value"
-                  :label="option.label"
-                  :selected="(style.shadow || 'none') === option.value"
-                  @click="setStyle({ shadow: option.value })"
-                />
-              </div>
 
-              <div v-if="(style.shadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
-                <USelect
-                  v-model="shadowColor"
-                  size="sm"
-                  color="neutral"
-                  icon="i-lucide-paint-bucket"
-                  :items="shadowColorItems"
-                  class="w-full"
-                />
+            <div v-if="(style.shadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
+              <USelect
+                v-model="shadowColor"
+                size="sm"
+                color="neutral"
+                icon="i-lucide-paint-bucket"
+                :items="shadowColorItems"
+                class="w-full"
+              />
 
-                <template v-if="shadowColor === 'shade' || shadowColor === 'primary-shade'">
-                  <ThemeStudioShadeSlider
-                    v-for="(slider, modeName) in shadowShades"
-                    :key="modeName"
-                    v-model="slider.value"
-                    :mode="modeName"
-                    :chip="shadowColor === 'primary-shade' ? primaryChip : neutralChip"
-                  />
-                </template>
+              <template v-if="shadowColor === 'shade' || shadowColor === 'primary-shade'">
+                <ThemeStudioShadeSlider
+                  v-for="(slider, modeName) in shadowShades"
+                  :key="modeName"
+                  v-model="slider.value"
+                  :mode="modeName"
+                  :chip="shadowColor === 'primary-shade' ? primaryChip : neutralChip"
+                />
+              </template>
 
-                <div class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Opacity</span>
+              <div class="flex items-center gap-2">
+                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Opacity</span>
 
-                  <USlider v-model="shadowOpacity" :min="5" :max="100" :step="5" size="xs" />
+                <USlider v-model="shadowOpacity" :min="5" :max="100" :step="5" size="xs" />
 
-                  <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ shadowOpacity }}%</span>
-                </div>
+                <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ shadowOpacity }}%</span>
+              </div>
 
-                <template v-if="(style.shadow || 'none') === 'hard'">
-                  <div v-for="field in geometryFields" :key="field.key" class="flex items-center gap-2">
-                    <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
+              <template v-if="(style.shadow || 'none') === 'hard'">
+                <div v-for="field in geometryFields" :key="field.key" class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
 
-                    <USlider v-model="geometry[field.key].value" :min="field.min" :max="field.max" :step="1" size="xs" />
+                  <USlider v-model="geometry[field.key].value" :min="field.min" :max="field.max" :step="1" size="xs" />
 
-                    <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ geometry[field.key].value }}px</span>
-                  </div>
-                </template>
-              </div>
+                  <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ geometry[field.key].value }}px</span>
+                </div>
+              </template>
+            </div>
+          </div>
+        </ThemeStudioSection>
+
+        <USeparator />
+
+        <ThemeStudioSection label="Inner shadow">
+          <div>
+            <div class="grid grid-cols-3 gap-1">
+              <ThemeStudioPickerButton
+                v-for="option in SHADOW_STYLE_OPTIONS"
+                :key="option.value"
+                :label="option.label"
+                :selected="(style.innerShadow || 'none') === option.value"
+                @click="setStyle({ innerShadow: option.value })"
+              />
             </div>
-          </ThemeStudioSection>
 
-          <USeparator />
-
-          <ThemeStudioSection label="Inner shadow">
-            <div>
-              <div class="grid grid-cols-3 gap-1">
-                <ThemeStudioPickerButton
-                  v-for="option in SHADOW_STYLE_OPTIONS"
-                  :key="option.value"
-                  :label="option.label"
-                  :selected="(style.innerShadow || 'none') === option.value"
-                  @click="setStyle({ innerShadow: option.value })"
-                />
-              </div>
+            <div v-if="(style.innerShadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
+              <USelect
+                v-model="innerShadowColor"
+                size="sm"
+                color="neutral"
+                icon="i-lucide-paint-bucket"
+                :items="shadowColorItems"
+                class="w-full"
+              />
 
-              <div v-if="(style.innerShadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
-                <USelect
-                  v-model="innerShadowColor"
-                  size="sm"
-                  color="neutral"
-                  icon="i-lucide-paint-bucket"
-                  :items="shadowColorItems"
-                  class="w-full"
+              <template v-if="innerShadowColor === 'shade' || innerShadowColor === 'primary-shade'">
+                <ThemeStudioShadeSlider
+                  v-for="(slider, modeName) in innerShadowShades"
+                  :key="modeName"
+                  v-model="slider.value"
+                  :mode="modeName"
+                  :chip="innerShadowColor === 'primary-shade' ? primaryChip : neutralChip"
                 />
+              </template>
 
-                <template v-if="innerShadowColor === 'shade' || innerShadowColor === 'primary-shade'">
-                  <ThemeStudioShadeSlider
-                    v-for="(slider, modeName) in innerShadowShades"
-                    :key="modeName"
-                    v-model="slider.value"
-                    :mode="modeName"
-                    :chip="innerShadowColor === 'primary-shade' ? primaryChip : neutralChip"
-                  />
-                </template>
-
-                <div class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Opacity</span>
-
-                  <USlider v-model="innerShadowOpacity" :min="5" :max="100" :step="5" size="xs" />
-
-                  <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ innerShadowOpacity }}%</span>
-                </div>
-
-                <template v-if="style.innerShadow === 'hard'">
-                  <div v-for="field in geometryFields" :key="field.key" class="flex items-center gap-2">
-                    <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
+              <div class="flex items-center gap-2">
+                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Opacity</span>
 
-                    <USlider v-model="innerGeometry[field.key].value" :min="field.min" :max="field.max" :step="1" size="xs" />
+                <USlider v-model="innerShadowOpacity" :min="5" :max="100" :step="5" size="xs" />
 
-                    <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ innerGeometry[field.key].value }}px</span>
-                  </div>
-                </template>
+                <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ innerShadowOpacity }}%</span>
               </div>
-            </div>
-          </ThemeStudioSection>
 
-          <USeparator />
-
-          <ThemeStudioSection label="Borders">
-            <div>
-              <div class="grid grid-cols-3 gap-1">
-                <ThemeStudioPickerButton
-                  v-for="option in borderOptions"
-                  :key="option.value"
-                  :label="option.label"
-                  :selected="borderStyle === option.value"
-                  @click="setStyle({ border: option.value })"
-                />
-              </div>
+              <template v-if="style.innerShadow === 'hard'">
+                <div v-for="field in geometryFields" :key="field.key" class="flex items-center gap-2">
+                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
 
-              <div v-if="borderStyle === 'custom'" class="mt-1.5 flex flex-col gap-2">
-                <div class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Width</span>
+                  <USlider v-model="innerGeometry[field.key].value" :min="field.min" :max="field.max" :step="1" size="xs" />
 
-                  <USlider v-model="borderWidth" :min="1" :max="4" :step="1" size="xs" />
-
-                  <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ borderWidth }}px</span>
+                  <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ innerGeometry[field.key].value }}px</span>
                 </div>
+              </template>
+            </div>
+          </div>
+        </ThemeStudioSection>
+
+        <USeparator />
+
+        <ThemeStudioSection label="Borders">
+          <div>
+            <div class="grid grid-cols-3 gap-1">
+              <ThemeStudioPickerButton
+                v-for="option in borderOptions"
+                :key="option.value"
+                :label="option.label"
+                :selected="borderStyle === option.value"
+                @click="setStyle({ border: option.value })"
+              />
+            </div>
 
-                <div class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">Frame</span>
-
-                  <UTooltip text="Outline solid surfaces too — the neobrutalist look">
-                    <USwitch v-model="frameSolids" size="sm" aria-label="Frame solid surfaces" />
-                  </UTooltip>
-                </div>
+            <div v-if="borderStyle === 'custom'" class="mt-1.5 flex flex-col gap-2">
+              <div class="flex items-center gap-2">
+                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Width</span>
 
-                <USelect
-                  v-model="borderColor"
-                  size="sm"
-                  color="neutral"
-                  icon="i-lucide-paint-bucket"
-                  :items="borderColorItems"
-                  class="w-full"
-                />
+                <USlider v-model="borderWidth" :min="1" :max="4" :step="1" size="xs" />
 
-                <template v-if="borderColor === 'shade' || borderColor === 'primary-shade'">
-                  <ThemeStudioShadeSlider
-                    v-for="(slider, modeName) in borderShades"
-                    :key="modeName"
-                    v-model="slider.value"
-                    :mode="modeName"
-                    :chip="borderColor === 'primary-shade' ? primaryChip : neutralChip"
-                  />
-                </template>
+                <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ borderWidth }}px</span>
               </div>
-            </div>
-          </ThemeStudioSection>
-        </div>
-      </template>
-
-      <template #tokens>
-        <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <template v-for="(group, index) in tokenGroups" :key="group.key">
-            <USeparator v-if="index" />
-
-            <ThemeStudioSection
-
-              :label="group.label"
-            >
-              <div class="flex flex-col gap-3">
-                <div v-for="section in group.sections" :key="section.token" class="flex flex-col gap-1.5">
-                  <span class="text-[11px] text-muted select-none">{{ section.label }}</span>
-
-                  <ThemeStudioShadeSlider
-                    v-for="(slider, modeName) in section.sliders"
-                    :key="modeName"
-                    v-model="slider.value"
-                    :mode="modeName"
-                    :chip="rampChip(section.ramp)"
-                  />
-                </div>
+
+              <div class="flex items-center gap-2">
+                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Frame</span>
+
+                <UTooltip text="Outline solid surfaces too — the neobrutalist look">
+                  <USwitch v-model="frameSolids" size="sm" aria-label="Frame solid surfaces" />
+                </UTooltip>
               </div>
-            </ThemeStudioSection>
-          </template>
-        </div>
-      </template>
-
-      <template #general>
-        <div class="flex flex-col gap-2.5 pt-1 pb-4">
-          <ThemeStudioSection label="Font" help-to="/docs/getting-started/integrations/fonts">
-            <div>
+
               <USelect
-                v-model="font"
+                v-model="borderColor"
                 size="sm"
                 color="neutral"
-                variant="subtle"
-                icon="i-lucide-type"
-                :items="fonts"
+                icon="i-lucide-paint-bucket"
+                :items="borderColorItems"
                 class="w-full"
               />
-            </div>
-          </ThemeStudioSection>
-
-          <USeparator />
 
-          <ThemeStudioSection label="Icons" help-to="/docs/getting-started/integrations/icons">
-            <div>
-              <USelect
-                v-model="icon"
-                size="sm"
-                color="neutral"
-                variant="subtle"
-                :icon="icons.find(i => i.value === icon)?.icon"
-                :items="icons"
-                class="w-full capitalize"
-                :ui="{ item: 'capitalize' }"
-              />
+              <template v-if="borderColor === 'shade' || borderColor === 'primary-shade'">
+                <ThemeStudioShadeSlider
+                  v-for="(slider, modeName) in borderShades"
+                  :key="modeName"
+                  v-model="slider.value"
+                  :mode="modeName"
+                  :chip="borderColor === 'primary-shade' ? primaryChip : neutralChip"
+                />
+              </template>
+            </div>
+          </div>
+        </ThemeStudioSection>
+      </div>
+    </template>
+
+    <template v-else-if="group === 'tokens'">
+      <div class="flex flex-col gap-2.5">
+        <template v-for="(tokenGroup, index) in tokenGroups" :key="tokenGroup.key">
+          <USeparator v-if="index" />
+
+          <ThemeStudioSection :label="tokenGroup.label">
+            <div class="flex flex-col gap-3">
+              <div v-for="section in tokenGroup.sections" :key="section.token" class="flex flex-col gap-1.5">
+                <span class="text-[11px] text-muted select-none">{{ section.label }}</span>
+
+                <ThemeStudioShadeSlider
+                  v-for="(slider, modeName) in section.sliders"
+                  :key="modeName"
+                  v-model="slider.value"
+                  :mode="modeName"
+                  :chip="rampChip(section.ramp)"
+                />
+              </div>
             </div>
           </ThemeStudioSection>
+        </template>
+      </div>
+    </template>
+
+    <template v-else-if="group === 'general'">
+      <div class="flex flex-col gap-2.5">
+        <ThemeStudioSection label="Font" help-to="/docs/getting-started/integrations/fonts">
+          <div>
+            <USelect
+              v-model="font"
+              size="sm"
+              color="neutral"
+              variant="subtle"
+              icon="i-lucide-type"
+              :items="fonts"
+              class="w-full"
+            />
+          </div>
+        </ThemeStudioSection>
+
+        <USeparator />
+
+        <ThemeStudioSection label="Icons" help-to="/docs/getting-started/integrations/icons">
+          <div>
+            <USelect
+              v-model="icon"
+              size="sm"
+              color="neutral"
+              variant="subtle"
+              :icon="icons.find(i => i.value === icon)?.icon"
+              :items="icons"
+              class="w-full capitalize"
+              :ui="{ item: 'capitalize' }"
+            />
+          </div>
+        </ThemeStudioSection>
+
+        <USeparator />
+
+        <ThemeStudioSection label="Scale">
+          <div class="flex flex-col gap-2">
+            <div class="flex items-center gap-2">
+              <span class="text-[11px] text-muted w-13 shrink-0 select-none">Radius</span>
+
+              <USlider
+                v-model="radius"
+                :min="0"
+                :max="0.5"
+                :step="0.125"
+                size="xs"
+              />
 
-          <USeparator />
+              <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ radius }}rem</span>
+            </div>
 
-          <ThemeStudioSection label="Scale">
-            <div class="flex flex-col gap-2">
-              <div class="flex items-center gap-2">
-                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Radius</span>
-
-                <USlider
-                  v-model="radius"
-                  :min="0"
-                  :max="0.5"
-                  :step="0.125"
-                  size="xs"
-                />
+            <div class="flex items-center gap-2">
+              <span class="text-[11px] text-muted w-13 shrink-0 select-none">Text</span>
 
-                <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ radius }}rem</span>
-              </div>
+              <USlider v-model="fontSize" :min="14" :max="18" :step="0.5" size="xs" />
 
-              <div class="flex items-center gap-2">
-                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Text</span>
+              <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ fontSize }}px</span>
+            </div>
 
-                <USlider v-model="fontSize" :min="14" :max="18" :step="0.5" size="xs" />
+            <div class="flex items-center gap-2">
+              <span class="text-[11px] text-muted w-13 shrink-0 select-none">Spacing</span>
 
-                <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ fontSize }}px</span>
-              </div>
+              <USlider v-model="spacing" :min="0.15" :max="0.35" :step="0.025" size="xs" />
 
-              <div class="flex items-center gap-2">
-                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Spacing</span>
+              <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ spacing }}</span>
+            </div>
 
-                <USlider v-model="spacing" :min="0.15" :max="0.35" :step="0.025" size="xs" />
+            <div class="flex items-center gap-2">
+              <span class="text-[11px] text-muted w-13 shrink-0 select-none">Size</span>
 
-                <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ spacing }}</span>
-              </div>
+              <USelect
+                v-model="defaultSize"
+                size="sm"
+                color="neutral"
+                variant="subtle"
+                icon="i-lucide-proportions"
+                :items="defaultSizeItems"
+                class="flex-1"
+              />
             </div>
-          </ThemeStudioSection>
+          </div>
+        </ThemeStudioSection>
 
-          <USeparator />
+        <USeparator />
 
-          <ThemeStudioSection label="Components">
+        <template v-for="field in variantGroupFields" :key="field.key">
+          <ThemeStudioSection :label="field.label">
             <div class="flex flex-col gap-1.5">
-              <div v-for="field in variantGroupFields" :key="field.key" class="flex items-center gap-2">
-                <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
+              <div class="flex items-center gap-2">
+                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Variant</span>
 
                 <USelect
                   v-model="groupVariants[field.key].value"
@@ -636,23 +646,34 @@ const shadowColor = computed({
                 />
               </div>
 
-              <div class="flex items-center gap-2">
-                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Size</span>
+              <div v-if="field.hasColor" class="flex items-center gap-2">
+                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Color</span>
 
                 <USelect
-                  v-model="defaultSize"
+                  v-model="groupColors[field.key].value"
                   size="sm"
                   color="neutral"
                   variant="subtle"
-                  icon="i-lucide-proportions"
-                  :items="defaultSizeItems"
+                  :items="defaultColorItems"
                   class="flex-1"
-                />
+                >
+                  <template #leading>
+                    <UChip
+                      v-if="groupColors[field.key].value !== 'default'"
+                      :color="groupColors[field.key].value as any"
+                      inset
+                      standalone
+                    />
+                    <UIcon v-else name="i-lucide-palette" class="size-4 shrink-0 text-dimmed" />
+                  </template>
+                </USelect>
               </div>
             </div>
           </ThemeStudioSection>
-        </div>
-      </template>
-    </UAccordion>
+
+          <USeparator v-if="field.key !== 'inputs'" />
+        </template>
+      </div>
+    </template>
   </div>
 </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioImport.vue b/docs/app/components/theme-studio/ThemeStudioImport.vue
index fd13963c9e..0e4213dec4 100644
--- a/docs/app/components/theme-studio/ThemeStudioImport.vue
+++ b/docs/app/components/theme-studio/ThemeStudioImport.vue
@@ -42,14 +42,16 @@ function runImport() {
     description="Paste an exported main.css and/or app.config.ts — the studio parses it back into editable settings."
     :ui="{ content: 'max-w-3xl' }"
   >
-    <UButton
-      label="Import"
-      icon="i-lucide-upload"
-      color="neutral"
-      variant="subtle"
-      size="sm"
-      block
-    />
+    <UTooltip text="Import theme">
+      <UButton
+        icon="i-lucide-upload"
+        color="neutral"
+        variant="subtle"
+        size="sm"
+        block
+        aria-label="Import theme"
+      />
+    </UTooltip>
 
     <template #body>
       <div class="flex flex-col gap-4">
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 0d03147c01..23c0e53d35 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -77,11 +77,12 @@ function redo() {
 defineShortcuts({
   meta_z: undo,
   meta_shift_z: redo,
-  ctrl_y: redo
+  ctrl_y: redo,
+  escape: () => {
+    if (fullscreen.value) fullscreen.value = false
+  }
 })
 
-const sidebarOpen = ref(true)
-
 /** Preview views: the bento grid plus app-scale layouts from the real templates. */
 const view = ref('grid')
 
@@ -93,118 +94,147 @@ const viewTabs = [
   { label: 'Landing', icon: 'i-lucide-panels-top-left', value: 'landing' },
   { label: 'A11y', icon: 'i-lucide-accessibility', value: 'a11y' }
 ]
+
+/** UI-hiding fullscreen: only the preview stays (not browser fullscreen). */
+const fullscreen = useState('theme-studio-fullscreen', () => false)
+
+const settingGroups = [
+  { label: 'Colors', value: 'colors' },
+  { label: 'General', value: 'general' },
+  { label: 'Style', value: 'style' },
+  { label: 'Shades', value: 'tokens' }
+] as const
 </script>
 
 <template>
-  <main>
-    <UContainer>
-      <!-- [contain:layout] keeps the sidebar's fixed container anchored to the
-           studio area instead of the viewport (the drawer's transform used to
-           do this implicitly). -->
-      <div class="flex flex-row w-full h-[calc(100dvh-var(--ui-header-height))] bg-neutral-100 dark:bg-neutral-900 [contain:layout]">
-        <div class="flex-1 min-w-0 flex flex-col h-full">
-          <div class="shrink-0 flex items-center gap-2 border-default py-3">
-            <USelect
-              v-model="view"
-              :items="viewTabs"
-              :icon="viewTabs.find(tab => tab.value === view)?.icon"
+  <main class="bg-neutral-100 dark:bg-neutral-900">
+    <UContainer :class="fullscreen && 'max-w-none px-0 sm:px-0 lg:px-0'">
+      <div class="flex flex-col w-full" :class="fullscreen ? 'h-dvh' : 'h-[calc(100dvh-var(--ui-header-height))]'">
+        <!-- One toolbar: presets and setting-group popovers on the left,
+             document actions on the right. -->
+        <div v-if="!fullscreen" class="shrink-0 flex items-center gap-2 py-3 overflow-x-auto">
+          <ThemeStudioPresetMenu class="w-56 shrink-0" />
+
+          <UPopover
+            v-for="settingGroup in settingGroups"
+            :key="settingGroup.value"
+            :content="{ align: 'start' }"
+          >
+            <UButton
+              :label="settingGroup.label"
               color="neutral"
               variant="subtle"
-              class="w-36"
+              size="sm"
+              trailing-icon="i-lucide-chevron-down"
             />
 
-            <span class="flex-1" />
-            <UColorModeSwitch />
-
-            <UTooltip :text="sidebarOpen ? 'Hide settings' : 'Show settings'">
-              <UButton
-                :icon="sidebarOpen ? 'i-lucide-panel-right-close' : 'i-lucide-panel-right-open'"
-                color="neutral"
-                variant="ghost"
-                aria-label="Toggle settings panel"
-                @click="sidebarOpen = !sidebarOpen"
-              />
-            </UTooltip>
-          </div>
-
-          <!-- The floating preview card: the grid scrolls inside it; the
-           app-shell views own their height and scroll internally.
-           [&>*]:rounded-[inherit] + [contain:paint] put the radius and
-           hard paint containment on the views' own scrollers — Chromium
-           won't clip nested composited layers (sticky headers, filtered
-           glows) by an ancestor's radius or overflow alone. -->
-          <div
-            class="flex-1 min-w-0 min-h-0 ring ring-default bg-default mb-4 rounded-lg [&>*]:rounded-[inherit] [&>*]:[contain:paint]"
-            :class="[
-              view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden',
-              // the open sidebar's own padding provides the gap; collapsed,
-              // the card needs its margin back
-              sidebarOpen ? 'me-0' : 'me-4'
-            ]"
-          >
-            <ThemeStudioBento v-if="view === 'grid'" />
-            <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
-            <ThemeStudioViewChat v-else-if="view === 'chat'" />
-            <ThemeStudioViewSaas v-else-if="view === 'saas'" />
-            <ThemeStudioViewLanding v-else-if="view === 'landing'" />
-            <ThemeStudioViewA11y v-else-if="view === 'a11y'" />
-          </div>
-        </div>
+            <template #content>
+              <ThemeStudioControls :group="settingGroup.value" class="w-80 max-h-[70vh] overflow-y-auto p-4" />
+            </template>
+          </UPopover>
+
+          <span class="flex-1" />
+
+          <USelect
+            v-model="view"
+            :items="viewTabs"
+            :icon="viewTabs.find(tab => tab.value === view)?.icon"
+            size="sm"
+            color="neutral"
+            variant="subtle"
+            class="w-36 shrink-0"
+          />
+
+          <UTooltip text="Fullscreen preview">
+            <UButton
+              icon="i-lucide-maximize"
+              color="neutral"
+              variant="subtle"
+              size="sm"
+              aria-label="Fullscreen preview"
+              @click="fullscreen = true"
+            />
+          </UTooltip>
 
-        <USidebar
-          v-model:open="sidebarOpen"
-          side="right"
-          variant="inset"
-          :style="{ '--sidebar-width': '21rem' }"
-          :ui="{ container: 'py-3 ps-6 h-full', header: 'pb-3 px-0 min-h-0', footer: 'py-3 px-0', body: 'py-0 px-0' }"
-        >
-          <template #header>
-            <div class="flex-1 min-w-0">
+          <div class="shrink-0">
+            <UFieldGroup>
               <ThemeStudioImport />
-            </div>
 
-            <div class="flex-1 min-w-0">
               <ThemeStudioExport />
-            </div>
-
-            <UFieldGroup size="sm">
-              <UTooltip text="Undo" :kbds="['meta', 'Z']">
-                <UButton
-                  icon="i-lucide-undo-2"
-                  color="neutral"
-                  variant="subtle"
-                  :disabled="!past.length"
-                  aria-label="Undo theme change"
-                  @click="undo"
-                />
-              </UTooltip>
-
-              <UTooltip text="Redo" :kbds="['meta', 'shift', 'Z']">
-                <UButton
-                  icon="i-lucide-redo-2"
-                  color="neutral"
-                  variant="subtle"
-                  :disabled="!future.length"
-                  aria-label="Redo theme change"
-                  @click="redo"
-                />
-              </UTooltip>
             </UFieldGroup>
+          </div>
 
-            <UTooltip text="Reset theme">
+          <UFieldGroup size="sm">
+            <UTooltip text="Undo" :kbds="['meta', 'Z']">
               <UButton
-                icon="i-lucide-rotate-ccw"
+                icon="i-lucide-undo-2"
                 color="neutral"
                 variant="subtle"
-                size="sm"
-                aria-label="Reset theme"
-                @click="resetTheme"
+                :disabled="!past.length"
+                aria-label="Undo theme change"
+                @click="undo"
               />
             </UTooltip>
-          </template>
 
-          <ThemeStudioControls />
-        </USidebar>
+            <UTooltip text="Redo" :kbds="['meta', 'shift', 'Z']">
+              <UButton
+                icon="i-lucide-redo-2"
+                color="neutral"
+                variant="subtle"
+                :disabled="!future.length"
+                aria-label="Redo theme change"
+                @click="redo"
+              />
+            </UTooltip>
+          </UFieldGroup>
+
+          <UTooltip text="Reset theme">
+            <UButton
+              icon="i-lucide-rotate-ccw"
+              color="neutral"
+              variant="subtle"
+              size="sm"
+              aria-label="Reset theme"
+              @click="resetTheme"
+            />
+          </UTooltip>
+        </div>
+
+        <!-- The floating preview card: the grid scrolls inside it; the
+             app-shell views own their height and scroll internally.
+             [&>*]:rounded-[inherit] + [contain:paint] put the radius and
+             hard paint containment on the views' own scrollers — Chromium
+             won't clip nested composited layers (sticky headers, filtered
+             glows) by an ancestor's radius or overflow alone. -->
+        <div
+          class="flex-1 min-w-0 min-h-0 bg-default [&>*]:rounded-[inherit] [&>*]:[contain:paint]"
+          :class="[
+            view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden',
+            fullscreen ? 'rounded-none' : 'ring ring-default mb-4 rounded-lg'
+          ]"
+        >
+          <ThemeStudioBento v-if="view === 'grid'" />
+          <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
+          <ThemeStudioViewChat v-else-if="view === 'chat'" />
+          <ThemeStudioViewSaas v-else-if="view === 'saas'" />
+          <ThemeStudioViewLanding v-else-if="view === 'landing'" />
+          <ThemeStudioViewA11y v-else-if="view === 'a11y'" />
+        </div>
+      </div>
+
+      <!-- Exit peeks a few pixels into the corner; nearing it slides the
+           button fully in (Esc always works). -->
+      <div v-if="fullscreen" class="group fixed top-0 right-0 z-50 flex justify-end items-start w-32 h-20 pt-2 pe-4 pointer-events-auto">
+        <UTooltip text="Exit fullscreen" :kbds="['Esc']">
+          <UButton
+            icon="i-lucide-minimize"
+            color="neutral"
+            variant="subtle"
+            class="translate-x-[calc(100%-6px)] group-hover:translate-x-0 transition-transform duration-200"
+            aria-label="Exit fullscreen preview"
+            @click="fullscreen = false"
+          />
+        </UTooltip>
       </div>
     </UContainer>
   </main>
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index a03c371ff6..c18c7240a5 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -1,6 +1,6 @@
 import type { ThemeDoc, Shade } from './types'
 import { SHADES, DEFAULT_COLORS } from './types'
-import type { StyleOptions, DefaultVariant, DefaultSize, VariantGroup } from './styles'
+import type { StyleOptions, DefaultVariant, DefaultSize, DefaultColor, VariantGroup } from './styles'
 import {
   styleComponents,
   FRAME_COLOR_VALUES,
@@ -10,7 +10,8 @@ import {
   BORDER_WIDTH_DEFAULT,
   VARIANT_GROUPS,
   VARIANT_SUPPORT,
-  SIZE_SUPPORT
+  SIZE_SUPPORT,
+  COLOR_SUPPORT
 } from './styles'
 import { parseUiColorRef } from './resolve'
 import { themeIcons } from '../theme'
@@ -387,7 +388,19 @@ function parseConfig(config: string, skipped: string[]): Record<string, any> | u
 
 /** Rebuild `defaults` from per-component defaultVariants, group-wise. */
 function extractDefaults(components: Record<string, any>): StyleOptions['defaults'] {
-  const defaults: { size?: DefaultSize, variants?: Partial<Record<VariantGroup, DefaultVariant>> } = {}
+  const defaults: { size?: DefaultSize, variants?: Partial<Record<VariantGroup, DefaultVariant>>, colors?: Partial<Record<VariantGroup, DefaultColor>> } = {}
+
+  for (const [group, groupComponents] of Object.entries(VARIANT_GROUPS)) {
+    const colors = groupComponents.map(component => components[component]?.defaultVariants?.color)
+    const candidate = colors.find(Boolean)
+    if (!candidate) continue
+    const consistent = groupComponents.every((component, index) =>
+      COLOR_SUPPORT.includes(component) ? colors[index] === candidate : colors[index] === undefined
+    )
+    if (consistent) {
+      defaults.colors = { ...defaults.colors, [group]: candidate }
+    }
+  }
 
   const sizes = SIZE_SUPPORT.map(component => components[component]?.defaultVariants?.size)
   if (sizes[0] && sizes.every(size => size === sizes[0])) {
@@ -417,7 +430,7 @@ function extractDefaults(components: Record<string, any>): StyleOptions['default
       .filter(([, groupComponents]) => groupComponents.some(component => VARIANT_SUPPORT[component]?.includes(value)))
       .map(([group]) => group as VariantGroup)
     if (expressible.every(group => defaults.variants?.[group] === value)) {
-      return { variant: value, ...(defaults.size ? { size: defaults.size } : {}) }
+      return { variant: value, ...(defaults.size ? { size: defaults.size } : {}), ...(defaults.colors ? { colors: defaults.colors } : {}) }
     }
   }
 
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 4a84b34d13..0534a8c442 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -33,6 +33,7 @@ export type BorderColor = 'default' | 'inverted' | 'black' | 'white' | 'primary'
 export type ShadowColor = 'default' | 'black' | 'inverted' | 'primary' | 'shade' | 'primary-shade'
 export type DefaultVariant = 'default' | 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'link' | 'none'
 export type DefaultSize = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type DefaultColor = 'default' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
 export type VariantGroup = 'buttons' | 'panels' | 'inputs'
 
 export interface StyleOptions {
@@ -57,7 +58,7 @@ export interface StyleOptions {
    * components that actually support the chosen value. `variant` applies
    * app-wide; `variants` refines it per component group and wins where set.
    */
-  defaults?: { variant?: DefaultVariant, size?: DefaultSize, variants?: Partial<Record<VariantGroup, DefaultVariant>> }
+  defaults?: { variant?: DefaultVariant, size?: DefaultSize, variants?: Partial<Record<VariantGroup, DefaultVariant>>, colors?: Partial<Record<VariantGroup, DefaultColor>> }
   /**
    * Hard-shadow geometry in px, driving --ui-shadow-offset-x/y/blur/spread.
    * Only meaningful while `shadow` is 'hard'.
@@ -117,6 +118,9 @@ export const VARIANT_SUPPORT: Record<string, string[]> = {
 // inputRating is size-only (no variant axis); everything here spans xs–xl exactly.
 export const SIZE_SUPPORT = ['button', 'badge', ...FIELD_COMPONENTS, 'inputRating']
 
+/** Components with a color prop — the panels group has no color axis (card and empty lack one; a lone alert color stays a verbatim override). */
+export const COLOR_SUPPORT = ['button', 'badge', ...FIELD_COMPONENTS]
+
 /** Component groups behind the per-group default-variant selects. */
 export const VARIANT_GROUPS: Record<VariantGroup, string[]> = {
   buttons: ['button', 'badge'],
@@ -562,6 +566,21 @@ export function styleComponents(style: StyleOptions): Fragments {
     }
   }
 
+  // Per-group default colors, only on components with a color axis.
+  for (const [group, components] of Object.entries(VARIANT_GROUPS)) {
+    const groupColor = style.defaults?.colors?.[group as VariantGroup]
+    if (groupColor && groupColor !== 'default') {
+      for (const component of components) {
+        if (COLOR_SUPPORT.includes(component)) {
+          defaults[component] = {
+            ...defaults[component],
+            defaultVariants: { ...(defaults[component] as any)?.defaultVariants, color: groupColor }
+          }
+        }
+      }
+    }
+  }
+
   const size = style.defaults?.size
   if (size && size !== 'default') {
     for (const component of SIZE_SUPPORT) {
diff --git a/test/utils/theme-import.spec.ts b/test/utils/theme-import.spec.ts
index 22c4affa59..43b5466fc0 100644
--- a/test/utils/theme-import.spec.ts
+++ b/test/utils/theme-import.spec.ts
@@ -130,6 +130,17 @@ describe('importTheme', () => {
     expect(skipped).toEqual(['.made-up-selector { color: red }'])
   })
 
+  it('round-trips per-group default colors', () => {
+    const doc: ThemeDoc = {
+      version: 1,
+      style: {
+        defaults: { variants: { buttons: 'soft' }, colors: { buttons: 'secondary', inputs: 'neutral' } }
+      }
+    }
+    const { doc: imported } = importTheme({ config: generateConfig(doc) })
+    expect(imported.style?.defaults).toEqual(doc.style!.defaults)
+  })
+
   it('reads colors and defaults from a config alone', () => {
     const { doc, skipped } = importTheme({
       config: [

From 4658982d83009fa4a1737dda903c94099aa484f9 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Tue, 7 Jul 2026 21:58:07 +0200
Subject: [PATCH 096/185] feat(docs): add UColorModeButton to theme page for
 improved color mode switching

---
 docs/app/pages/theme.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 23c0e53d35..af3e2aab43 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -145,6 +145,8 @@ const settingGroups = [
             class="w-36 shrink-0"
           />
 
+          <UColorModeButton size="sm" variant="subtle" />
+
           <UTooltip text="Fullscreen preview">
             <UButton
               icon="i-lucide-maximize"

From 77dbc399d823f1d7d618eee623559313785fd68b Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Tue, 7 Jul 2026 22:14:20 +0200
Subject: [PATCH 097/185] =?UTF-8?q?feat(docs):=20Marshmallow=20resculpted?=
 =?UTF-8?q?=20=E2=80=94=20pink-mauve=20custom=20neutral,=20pink-cast=20sof?=
 =?UTF-8?q?t=20shadows=20over=20a=20top-lit=20inset?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The stock mauve neutral gives way to a sculpted pink-tinted ramp, with
primary-shade soft shadows (700 light / 950 dark at 15%), a blurred
upward inner shadow, and the neutral token remaps.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/utils/theme-engine/presets.ts | 55 +++++++++++++++++++++++---
 1 file changed, 50 insertions(+), 5 deletions(-)

diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 5bb3f7caf1..330b16d967 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -88,7 +88,7 @@ export const presets: ThemePreset[] = [{
       borderShade: { light: 900, dark: 950 },
       defaults: { variants: { buttons: 'solid', panels: 'subtle', inputs: 'subtle' } },
       tokenShades: {
-        '--ui-bg': { light: 100, dark: 800 },
+        '--ui-bg': { light: 50, dark: 800 },
         '--ui-bg-muted': { light: 300 },
         '--ui-bg-elevated': { light: 300, dark: 700 },
         '--ui-bg-accented': { light: 400, dark: 600 },
@@ -155,14 +155,14 @@ export const presets: ThemePreset[] = [{
     style: {
       shadow: 'hard',
       shadowColor: 'shade',
-      shadowShade: { light: 950, dark: 950 },
+      shadowShade: { light: 200, dark: 950 },
       shadowOpacity: 55,
       shadowGeometry: { x: 0, y: 3, blur: 0, spread: 0 },
       innerShadow: 'hard',
       innerShadowGeometry: { x: 0, y: -3, blur: 0, spread: 0 },
       innerShadowOpacity: 50,
       innerShadowColor: 'shade',
-      innerShadowShade: { light: 200, dark: 950 },
+      innerShadowShade: { light: 500, dark: 950 },
       defaults: { variant: 'subtle' },
       tokenShades: {
         '--ui-bg-muted': { light: 100 },
@@ -298,15 +298,60 @@ export const presets: ThemePreset[] = [{
   doc: {
     version: 1,
     meta: { name: 'Marshmallow', base: 'marshmallow' },
+    // A sculpted pink-mauve neutral (chroma peaks mid-ramp) instead of the
+    // stock mauve.
+    palettes: {
+      'custom-neutral': {
+        shades: {
+          50: 'oklch(96.1% 0.021 325.68)',
+          100: 'oklch(92.4% 0.039 325.829)',
+          200: 'oklch(88% 0.057 325.83)',
+          300: 'oklch(81.2% 0.073 325.398)',
+          400: 'oklch(66.1% 0.084 323.292)',
+          500: 'oklch(52.4% 0.079 322.443)',
+          600: 'oklch(42.7% 0.064 322.128)',
+          700: 'oklch(34.6% 0.048 322.004)',
+          800: 'oklch(27.4% 0.034 321.983)',
+          900: 'oklch(20.7% 0.02 322.028)',
+          950: 'oklch(14.5% 0.008 322.12)'
+        }
+      }
+    },
     colors: {
       primary: 'pink',
       secondary: 'violet',
-      neutral: 'mauve'
+      neutral: 'custom-neutral'
     },
     radius: 0.5,
     font: { sans: 'Poppins' },
+    tokens: {
+      light: {
+        '--ui-bg': 'var(--ui-color-neutral-50)',
+        '--ui-text-inverted': 'var(--ui-color-neutral-50)'
+      },
+      dark: {
+        '--ui-text-highlighted': 'var(--ui-color-neutral-50)',
+        '--ui-bg-inverted': 'var(--ui-color-neutral-50)',
+        '--ui-border-inverted': 'var(--ui-color-neutral-50)'
+      }
+    },
+    // Soft pink-cast shadows (primary 700 light / 950 dark at 15%) over a
+    // top-lit blurred inset.
     style: {
-      shadow: 'soft'
+      shadow: 'soft',
+      shadowOpacity: 15,
+      innerShadow: 'hard',
+      innerShadowGeometry: {
+        x: 0,
+        y: -4,
+        blur: 4,
+        spread: 0
+      },
+      shadowColor: 'primary-shade',
+      shadowShade: {
+        light: 700,
+        dark: 950
+      }
     }
   }
 }, {

From aaa0d5c63b0a84da7f35f2990774234c9af6dc52 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Tue, 7 Jul 2026 22:20:58 +0200
Subject: [PATCH 098/185] =?UTF-8?q?feat(docs):=20Anthropic=20restyle=20?=
 =?UTF-8?q?=E2=80=94=20cream=20page=20under=20ivory=20surfaces,=20blurred?=
 =?UTF-8?q?=20warm=20shadows,=20flat=20dark=20surface=20family?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/utils/theme-engine/presets.ts | 28 ++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 330b16d967..92d48e4ba5 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -428,14 +428,38 @@ export const presets: ThemePreset[] = [{
     },
     radius: 0.375,
     font: { sans: 'DM Sans' },
+    // Deep cream page over ivory surfaces in light; one flat 800 surface
+    // family in dark, with the brand clay held at 500.
     tokens: {
       light: {
-        '--ui-bg': 'var(--ui-color-neutral-50)'
+        '--ui-bg': 'var(--ui-color-neutral-200)',
+        '--ui-bg-elevated': 'var(--ui-color-neutral-50)'
       },
       dark: {
+        '--ui-primary': 'var(--ui-color-primary-500)',
         '--ui-bg': 'var(--ui-color-neutral-900)',
-        '--ui-primary': 'var(--ui-color-primary-500)'
+        '--ui-bg-muted': 'var(--ui-color-neutral-800)',
+        '--ui-bg-elevated': 'var(--ui-color-neutral-800)',
+        '--ui-bg-accented': 'var(--ui-color-neutral-800)'
       }
+    },
+    // Blurred warm-gray drop shadows (500 light / 950 dark at 25%) with
+    // subtle panels.
+    style: {
+      shadow: 'hard',
+      shadowGeometry: {
+        x: 0,
+        y: 2,
+        blur: 9,
+        spread: 0
+      },
+      shadowOpacity: 25,
+      shadowColor: 'shade',
+      shadowShade: {
+        light: 500,
+        dark: 950
+      },
+      defaults: { variants: { panels: 'subtle' } }
     }
   }
 }, {

From b31b7b9c92b1a0f6e58a41fbf27632903a470375 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Tue, 7 Jul 2026 22:26:27 +0200
Subject: [PATCH 099/185] feat(docs): remove 'Forest' preset and update
 'Marshmallow' with new custom neutral palette and token adjustments

The 'Forest' theme preset has been removed. The 'Marshmallow' preset has been updated to include a new custom neutral palette with shades, and the token definitions have been enhanced for both light and dark modes, improving overall design consistency.
---
 docs/app/utils/theme-engine/presets.ts | 161 +++++++------------------
 1 file changed, 43 insertions(+), 118 deletions(-)

diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 92d48e4ba5..b10d92b1a5 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -175,121 +175,6 @@ export const presets: ThemePreset[] = [{
       }
     }
   }
-}, {
-  id: 'forest',
-  name: 'Forest',
-  description: 'Sculpted evergreen on forest-green neutrals with a sage secondary — spread hard shadows over a fine inset.',
-  icon: 'i-lucide-trees',
-  doc: {
-    version: 1,
-    meta: { name: 'Forest', base: 'forest' },
-    // Both ramps were sculpted in the curve editor (hence the custom-* names:
-    // the editors reopen them as their own), plus a muted sage for secondary.
-    palettes: {
-      'custom-neutral': {
-        shades: {
-          50: 'oklch(93.7% 0.041 140.516)',
-          100: 'oklch(90.8% 0.053 140.375)',
-          200: 'oklch(85.5% 0.066 140.572)',
-          300: 'oklch(75% 0.079 141.493)',
-          400: 'oklch(61.8% 0.09 142.245)',
-          500: 'oklch(51.4% 0.095 142.85)',
-          600: 'oklch(43.4% 0.085 143.372)',
-          700: 'oklch(36.9% 0.067 143.839)',
-          800: 'oklch(31.3% 0.049 144.268)',
-          900: 'oklch(26.4% 0.033 144.666)',
-          950: 'oklch(22.1% 0.017 145.041)'
-        }
-      },
-      'custom-primary': {
-        shades: {
-          50: 'oklch(98.2% 0.03 144.679)',
-          100: 'oklch(96.7% 0.058 144.074)',
-          200: 'oklch(92.4% 0.124 143.449)',
-          300: 'oklch(86.5% 0.164 142.837)',
-          400: 'oklch(79.4% 0.221 142.544)',
-          500: 'oklch(71.6% 0.223 142.677)',
-          600: 'oklch(63.2% 0.196 142.818)',
-          700: 'oklch(54.4% 0.166 142.921)',
-          800: 'oklch(45.3% 0.137 142.994)',
-          900: 'oklch(36% 0.108 143.043)',
-          950: 'oklch(26.6% 0.079 143.072)'
-        }
-      },
-      'sage': {
-        shades: {
-          50: 'oklch(97.7% 0.004 134.849)',
-          100: 'oklch(95% 0.01 140.516)',
-          200: 'oklch(90% 0.018 140.022)',
-          300: 'oklch(82.6% 0.029 141.964)',
-          400: 'oklch(71.9% 0.038 142.667)',
-          500: 'oklch(61.7% 0.042 142.713)',
-          600: 'oklch(53% 0.038 143.698)',
-          700: 'oklch(45.7% 0.032 143.377)',
-          800: 'oklch(39.8% 0.026 142.997)',
-          900: 'oklch(35.1% 0.022 145.097)',
-          950: 'oklch(24.2% 0.017 145.041)'
-        }
-      }
-    },
-    colors: {
-      primary: 'custom-primary',
-      secondary: 'sage',
-      success: 'emerald',
-      info: 'cyan',
-      warning: 'amber',
-      neutral: 'custom-neutral'
-    },
-    font: { sans: 'Raleway' },
-    tokens: {
-      light: {
-        '--ui-bg': 'var(--ui-color-neutral-50)',
-        '--ui-text-inverted': 'var(--ui-color-neutral-50)'
-      },
-      dark: {
-        '--ui-text-highlighted': 'var(--ui-color-neutral-50)',
-        '--ui-bg-inverted': 'var(--ui-color-neutral-50)',
-        '--ui-border-inverted': 'var(--ui-color-neutral-50)'
-      }
-    },
-    // Spread-1 hard shadows in graded neutral shades, a 1px bottom inset at
-    // 25%, subtle surfaces with stock outline fields.
-    style: {
-      shadow: 'hard',
-      shadowGeometry: {
-        x: 0,
-        y: 3,
-        blur: 0,
-        spread: 1
-      },
-      shadowOpacity: 50,
-      innerShadow: 'hard',
-      innerShadowGeometry: {
-        x: 0,
-        y: 1,
-        blur: 0,
-        spread: 1
-      },
-      innerShadowOpacity: 25,
-      shadowColor: 'shade',
-      shadowShade: {
-        light: 500,
-        dark: 950
-      },
-      innerShadowColor: 'shade',
-      innerShadowShade: {
-        light: 950,
-        dark: 400
-      },
-      defaults: {
-        variants: {
-          buttons: 'subtle',
-          panels: 'subtle',
-          inputs: 'outline'
-        }
-      }
-    }
-  }
 }, {
   id: 'marshmallow',
   name: 'Marshmallow',
@@ -362,19 +247,59 @@ export const presets: ThemePreset[] = [{
   doc: {
     version: 1,
     meta: { name: 'Marvel', base: 'marvel' },
+    // A cool-violet sculpted neutral for the panel grays.
+    palettes: {
+      'custom-neutral': {
+        shades: {
+          50: 'oklch(97.3% 0.013 286.067)',
+          100: 'oklch(91.3% 0.023 286.073)',
+          200: 'oklch(84% 0.028 286.076)',
+          300: 'oklch(72.5% 0.032 286.073)',
+          400: 'oklch(60.1% 0.034 286.058)',
+          500: 'oklch(50.6% 0.033 285.932)',
+          600: 'oklch(42.3% 0.028 285.808)',
+          700: 'oklch(34.8% 0.021 285.795)',
+          800: 'oklch(27.6% 0.015 285.794)',
+          900: 'oklch(20.8% 0.01 285.798)',
+          950: 'oklch(14.1% 0.005 285.805)'
+        }
+      }
+    },
     colors: {
       primary: 'red',
-      secondary: 'blue',
-      neutral: 'zinc'
+      neutral: 'custom-neutral'
     },
     radius: 0.125,
     font: { sans: 'Outfit' },
+    // Inked page: near-black default borders over muted panel edges, deep
+    // red at 600 in light, flat 50s inversions in dark.
+    tokens: {
+      light: {
+        '--ui-bg': 'var(--ui-color-neutral-50)',
+        '--ui-text-inverted': 'var(--ui-color-neutral-50)',
+        '--ui-bg-muted': 'var(--ui-color-neutral-50)',
+        '--ui-border': 'var(--ui-color-neutral-950)',
+        '--ui-border-muted': 'var(--ui-color-neutral-300)',
+        '--ui-border-accented': 'var(--ui-color-neutral-400)',
+        '--ui-bg-elevated': 'var(--ui-color-neutral-100)',
+        '--ui-bg-accented': 'var(--ui-color-neutral-200)',
+        '--ui-primary': 'var(--ui-color-primary-600)'
+      },
+      dark: {
+        '--ui-bg': 'var(--ui-color-neutral-900)',
+        '--ui-bg-inverted': 'var(--ui-color-neutral-50)',
+        '--ui-text-highlighted': 'var(--ui-color-neutral-50)',
+        '--ui-border-inverted': 'var(--ui-color-neutral-50)',
+        '--ui-primary': 'var(--ui-color-primary-500)'
+      }
+    },
     style: {
       shadow: 'hard',
       shadowColor: 'black',
       border: 'custom',
       frame: true,
-      borderColor: 'black'
+      borderColor: 'black',
+      defaults: { variants: { panels: 'subtle' } }
     }
   }
 }, {

From 853ab96bf2571426274c79f671ebd0b8a946f8bb Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Wed, 8 Jul 2026 00:00:54 +0200
Subject: [PATCH 100/185] fix(docs): studio fullscreen state can't hide the
 chrome on other pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The site header gates on the fullscreen state, which survives navigation
— leaving the studio while fullscreen stripped the header everywhere.
The gate now only applies on /theme and the page resets the state on
unmount.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/app.vue         | 2 +-
 docs/app/pages/theme.vue | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/docs/app/app.vue b/docs/app/app.vue
index 6cadbe372e..f47f367552 100644
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -43,7 +43,7 @@ provide('navigation', rootNavigation)
 
     <div class="flex">
       <div class="flex-1 min-w-0" :class="[route.path.startsWith('/docs/') && 'root']">
-        <template v-if="!route.path.startsWith('/examples') && !studioFullscreen">
+        <template v-if="!route.path.startsWith('/examples') && !(route.path === '/theme' && studioFullscreen)">
           <!-- <Banner /> -->
 
           <Header />
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index af3e2aab43..d0c015df0a 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -98,6 +98,12 @@ const viewTabs = [
 /** UI-hiding fullscreen: only the preview stays (not browser fullscreen). */
 const fullscreen = useState('theme-studio-fullscreen', () => false)
 
+// The state is app-level (the site header gates on it) — never let it
+// leak past the studio.
+onUnmounted(() => {
+  fullscreen.value = false
+})
+
 const settingGroups = [
   { label: 'Colors', value: 'colors' },
   { label: 'General', value: 'general' },

From ecc88fcd9e51d9adf3bd2a77914fc791ef5c2180 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Thu, 9 Jul 2026 19:26:10 +0200
Subject: [PATCH 101/185] feat(docs): studio controls move into the site header
 on /theme

Marshmallow: radius 0.375, muted light bg, primary-400 dark, and the
inner shadow gets its own lighter primary shade (500/900).

The header center becomes the view switcher while on /theme, with the
site pages folded into a single Menu popover; undo/redo/reset replace
the version menu on the far left. View, fullscreen and history state
move into app-level composables so the header and page share them; the
page toolbar keeps lg:hidden fallbacks since the header center
collapses on mobile.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/components/header/Header.vue         | 102 +++++++++++-
 docs/app/composables/useThemeStudioHistory.ts |  61 +++++++
 docs/app/composables/useThemeStudioView.ts    |  28 ++++
 docs/app/pages/theme.vue                      | 153 ++++++------------
 docs/app/utils/theme-engine/presets.ts        |  17 +-
 5 files changed, 246 insertions(+), 115 deletions(-)
 create mode 100644 docs/app/composables/useThemeStudioHistory.ts
 create mode 100644 docs/app/composables/useThemeStudioView.ts

diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index 11ea501c6a..7b772a6297 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -10,6 +10,67 @@ function toggleChat() {
   }
   open.value = !open.value
 }
+
+/**
+ * On /theme the header center becomes the studio's view switcher, with the
+ * regular pages folded into a single Menu popover; undo/redo/reset take the
+ * version menu's spot on the left.
+ */
+const isStudio = computed(() => route.path === '/theme')
+
+const { view, views } = useThemeStudioView()
+const { past, future, undo, redo } = useThemeStudioHistory()
+const { resetTheme } = useTheme()
+
+const studioLinks = computed(() => [
+  ...views.map(tab => ({
+    label: tab.label,
+    icon: tab.icon,
+    active: view.value === tab.value,
+    onSelect: () => {
+      view.value = tab.value
+    }
+  })),
+  {
+    label: 'Menu',
+    children: [{
+      label: 'Docs',
+      description: 'Learn how to build with Nuxt UI.',
+      icon: 'i-lucide-book-open',
+      to: '/docs'
+    }, {
+      label: 'Templates',
+      description: 'Start from a ready-made template.',
+      icon: 'i-lucide-panels-top-left',
+      to: '/templates'
+    }, {
+      label: 'Showcase',
+      description: 'Discover websites built with Nuxt UI.',
+      icon: 'i-lucide-presentation',
+      to: '/showcase'
+    }, {
+      label: 'Community',
+      description: 'Explore projects built around Nuxt UI.',
+      icon: 'i-lucide-globe',
+      to: '/community'
+    }, {
+      label: 'Blog',
+      description: 'Read the latest news and updates.',
+      icon: 'i-lucide-newspaper',
+      to: '/blog'
+    }, {
+      label: 'Figma',
+      description: 'Design with the official Figma kit.',
+      icon: 'i-simple-icons-figma',
+      to: '/figma'
+    }, {
+      label: 'Releases',
+      description: 'Follow what ships in each release.',
+      icon: 'i-lucide-rocket',
+      to: '/releases'
+    }]
+  }
+])
 </script>
 
 <!-- eslint-disable vue/no-template-shadow -->
@@ -25,10 +86,47 @@ function toggleChat() {
     <template #left>
       <HeaderLogo />
 
-      <VersionMenu />
+      <VersionMenu v-if="!isStudio" />
+
+      <template v-if="isStudio">
+        <UFieldGroup class="hidden lg:flex">
+          <UTooltip text="Undo" :kbds="['meta', 'Z']">
+            <UButton
+              icon="i-lucide-undo-2"
+              color="neutral"
+              variant="ghost"
+              :disabled="!past.length"
+              aria-label="Undo theme change"
+              @click="undo"
+            />
+          </UTooltip>
+
+          <UTooltip text="Redo" :kbds="['meta', 'shift', 'Z']">
+            <UButton
+              icon="i-lucide-redo-2"
+              color="neutral"
+              variant="ghost"
+              :disabled="!future.length"
+              aria-label="Redo theme change"
+              @click="redo"
+            />
+          </UTooltip>
+        </UFieldGroup>
+
+        <UTooltip text="Reset theme" class="hidden lg:flex">
+          <UButton
+            icon="i-lucide-rotate-ccw"
+            color="neutral"
+            variant="ghost"
+            aria-label="Reset theme"
+            @click="resetTheme"
+          />
+        </UTooltip>
+      </template>
     </template>
 
-    <UNavigationMenu :items="desktopLinks" variant="link" content-orientation="vertical" />
+    <UNavigationMenu v-if="isStudio" :items="studioLinks" variant="link" content-orientation="vertical" />
+    <UNavigationMenu v-else :items="desktopLinks" variant="link" content-orientation="vertical" />
 
     <template #right>
       <UTooltip text="Search" :kbds="['meta', 'K']" ignore-non-keyboard-focus>
diff --git a/docs/app/composables/useThemeStudioHistory.ts b/docs/app/composables/useThemeStudioHistory.ts
new file mode 100644
index 0000000000..ad008383ae
--- /dev/null
+++ b/docs/app/composables/useThemeStudioHistory.ts
@@ -0,0 +1,61 @@
+import type { ThemeDoc } from '../utils/theme-engine'
+
+/**
+ * Undo/redo over whole theme documents — the same serialize/restore pair
+ * exports and presets already use, so one history entry is one applyDoc
+ * away. State is app-level because the site header hosts the undo/redo
+ * buttons while on /theme; the page owns the debounced capture watcher.
+ * Session-only by design.
+ */
+export function useThemeStudioHistory() {
+  const { applyDoc } = useThemeStudio()
+
+  const past = useState<ThemeDoc[]>('theme-studio-history-past', () => [])
+  const future = useState<ThemeDoc[]>('theme-studio-history-future', () => [])
+  const lastSnapshot = useState('theme-studio-history-snapshot', () => '')
+  const pendingRestore = useState('theme-studio-history-pending', () => false)
+
+  /** Realign the baseline without recording (page mount). */
+  function align(snapshot: string) {
+    lastSnapshot.value = snapshot
+  }
+
+  /** Record a settled snapshot (call after the page's debounce). */
+  function capture(snapshot: string) {
+    if (pendingRestore.value) {
+      // the first settle after our own undo/redo restore — realign without
+      // recording, however long the flush took
+      pendingRestore.value = false
+      lastSnapshot.value = snapshot
+      return
+    }
+    if (snapshot === lastSnapshot.value) return
+    past.value.push(JSON.parse(lastSnapshot.value))
+    if (past.value.length > 50) past.value.shift()
+    future.value = []
+    lastSnapshot.value = snapshot
+  }
+
+  function restore(doc: ThemeDoc) {
+    pendingRestore.value = true
+    applyDoc(doc)
+    // realignment happens on the next capture, from currentDoc() itself —
+    // the applied doc may re-serialize differently than it round-trips
+  }
+
+  function undo() {
+    const doc = past.value.pop()
+    if (!doc) return
+    future.value.push(JSON.parse(lastSnapshot.value))
+    restore(doc)
+  }
+
+  function redo() {
+    const doc = future.value.pop()
+    if (!doc) return
+    past.value.push(JSON.parse(lastSnapshot.value))
+    restore(doc)
+  }
+
+  return { past, future, align, capture, undo, redo }
+}
diff --git a/docs/app/composables/useThemeStudioView.ts b/docs/app/composables/useThemeStudioView.ts
new file mode 100644
index 0000000000..ddf9084867
--- /dev/null
+++ b/docs/app/composables/useThemeStudioView.ts
@@ -0,0 +1,28 @@
+export type ThemeStudioView = 'grid' | 'dashboard' | 'chat' | 'saas' | 'landing' | 'a11y'
+
+export interface ThemeStudioViewTab {
+  label: string
+  icon: string
+  value: ThemeStudioView
+}
+
+export const THEME_STUDIO_VIEWS: ThemeStudioViewTab[] = [
+  { label: 'Grid', icon: 'i-lucide-layout-grid', value: 'grid' },
+  { label: 'Dashboard', icon: 'i-lucide-layout-dashboard', value: 'dashboard' },
+  { label: 'Chat', icon: 'i-lucide-message-circle', value: 'chat' },
+  { label: 'SaaS', icon: 'i-lucide-rocket', value: 'saas' },
+  { label: 'Landing', icon: 'i-lucide-panels-top-left', value: 'landing' },
+  { label: 'A11y', icon: 'i-lucide-accessibility', value: 'a11y' }
+]
+
+/**
+ * The studio's preview state lives at app level: while on /theme the site
+ * header hosts the view switcher and fullscreen gates the chrome, so both
+ * the page and the header read the same state.
+ */
+export function useThemeStudioView() {
+  const view = useState<ThemeStudioView>('theme-studio-view', () => 'grid')
+  const fullscreen = useState('theme-studio-fullscreen', () => false)
+
+  return { view, fullscreen, views: THEME_STUDIO_VIEWS }
+}
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index d0c015df0a..3f1c0213a3 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import type { ThemeDoc } from '../utils/theme-engine'
-
 const { track } = useAnalytics()
-const { applyDoc } = useThemeStudio()
 const { currentDoc, resetTheme } = useTheme()
 
+// View, fullscreen and undo/redo history are app-level state: the site
+// header hosts the view switcher and undo/redo/reset while on /theme
+// (the toolbar keeps lg:hidden fallbacks for mobile).
+const { view, fullscreen, views } = useThemeStudioView()
+const { past, future, align, capture, undo, redo } = useThemeStudioHistory()
+
 useSeoMeta({
   title: 'Theme Studio',
   description: 'Customize Nuxt UI live: colors, radius, fonts and icons — then export only what you changed.'
@@ -16,64 +19,18 @@ const mounted = ref(false)
 onMounted(() => {
   mounted.value = true
   track('Theme Studio Opened')
+  align(JSON.stringify(currentDoc()))
 })
 
-/**
- * Undo/redo over whole theme documents — the same serialize/restore pair
- * exports and presets already use, so one history entry is one applyDoc
- * away. A debounced capture folds slider-drag bursts (and a reset) into
- * single steps. Session-only by design.
- */
-const past = ref<ThemeDoc[]>([])
-const future = ref<ThemeDoc[]>([])
-let lastSnapshot = ''
-let pendingRestore = false
-
-onMounted(() => {
-  lastSnapshot = JSON.stringify(currentDoc())
-})
-
+// A debounced capture folds slider-drag bursts (and a reset) into single
+// history steps.
 let captureTimeout: ReturnType<typeof setTimeout> | undefined
 watch(() => (mounted.value ? JSON.stringify(currentDoc()) : undefined), (snapshot) => {
   if (!snapshot) return
   clearTimeout(captureTimeout)
-  captureTimeout = setTimeout(() => {
-    if (pendingRestore) {
-      // the first settle after our own undo/redo restore — realign without
-      // recording, however long the flush took
-      pendingRestore = false
-      lastSnapshot = snapshot
-      return
-    }
-    if (snapshot === lastSnapshot) return
-    past.value.push(JSON.parse(lastSnapshot))
-    if (past.value.length > 50) past.value.shift()
-    future.value = []
-    lastSnapshot = snapshot
-  }, 350)
+  captureTimeout = setTimeout(() => capture(snapshot), 350)
 })
 
-function restore(doc: ThemeDoc) {
-  pendingRestore = true
-  applyDoc(doc)
-  // realignment happens on the next capture, from currentDoc() itself —
-  // the applied doc may re-serialize differently than it round-trips
-}
-
-function undo() {
-  const doc = past.value.pop()
-  if (!doc) return
-  future.value.push(JSON.parse(lastSnapshot))
-  restore(doc)
-}
-
-function redo() {
-  const doc = future.value.pop()
-  if (!doc) return
-  past.value.push(JSON.parse(lastSnapshot))
-  restore(doc)
-}
-
 defineShortcuts({
   meta_z: undo,
   meta_shift_z: redo,
@@ -83,23 +40,8 @@ defineShortcuts({
   }
 })
 
-/** Preview views: the bento grid plus app-scale layouts from the real templates. */
-const view = ref('grid')
-
-const viewTabs = [
-  { label: 'Grid', icon: 'i-lucide-layout-grid', value: 'grid' },
-  { label: 'Dashboard', icon: 'i-lucide-layout-dashboard', value: 'dashboard' },
-  { label: 'Chat', icon: 'i-lucide-message-circle', value: 'chat' },
-  { label: 'SaaS', icon: 'i-lucide-rocket', value: 'saas' },
-  { label: 'Landing', icon: 'i-lucide-panels-top-left', value: 'landing' },
-  { label: 'A11y', icon: 'i-lucide-accessibility', value: 'a11y' }
-]
-
-/** UI-hiding fullscreen: only the preview stays (not browser fullscreen). */
-const fullscreen = useState('theme-studio-fullscreen', () => false)
-
-// The state is app-level (the site header gates on it) — never let it
-// leak past the studio.
+// The fullscreen state is app-level (the site header gates on it) — never
+// let it leak past the studio.
 onUnmounted(() => {
   fullscreen.value = false
 })
@@ -141,16 +83,46 @@ const settingGroups = [
 
           <span class="flex-1" />
 
+          <!-- The header center hosts the view switcher on desktop; below
+               lg it collapses, so the toolbar keeps a select as fallback. -->
           <USelect
             v-model="view"
-            :items="viewTabs"
-            :icon="viewTabs.find(tab => tab.value === view)?.icon"
+            :items="views"
+            :icon="views.find(tab => tab.value === view)?.icon"
             size="sm"
             color="neutral"
             variant="subtle"
-            class="w-36 shrink-0"
+            class="w-36 shrink-0 lg:hidden"
           />
 
+          <UFieldGroup size="sm" class="lg:hidden">
+            <UButton
+              icon="i-lucide-undo-2"
+              color="neutral"
+              variant="subtle"
+              :disabled="!past.length"
+              aria-label="Undo theme change"
+              @click="undo"
+            />
+
+            <UButton
+              icon="i-lucide-redo-2"
+              color="neutral"
+              variant="subtle"
+              :disabled="!future.length"
+              aria-label="Redo theme change"
+              @click="redo"
+            />
+
+            <UButton
+              icon="i-lucide-rotate-ccw"
+              color="neutral"
+              variant="subtle"
+              aria-label="Reset theme"
+              @click="resetTheme"
+            />
+          </UFieldGroup>
+
           <UColorModeButton size="sm" variant="subtle" />
 
           <UTooltip text="Fullscreen preview">
@@ -171,41 +143,6 @@ const settingGroups = [
               <ThemeStudioExport />
             </UFieldGroup>
           </div>
-
-          <UFieldGroup size="sm">
-            <UTooltip text="Undo" :kbds="['meta', 'Z']">
-              <UButton
-                icon="i-lucide-undo-2"
-                color="neutral"
-                variant="subtle"
-                :disabled="!past.length"
-                aria-label="Undo theme change"
-                @click="undo"
-              />
-            </UTooltip>
-
-            <UTooltip text="Redo" :kbds="['meta', 'shift', 'Z']">
-              <UButton
-                icon="i-lucide-redo-2"
-                color="neutral"
-                variant="subtle"
-                :disabled="!future.length"
-                aria-label="Redo theme change"
-                @click="redo"
-              />
-            </UTooltip>
-          </UFieldGroup>
-
-          <UTooltip text="Reset theme">
-            <UButton
-              icon="i-lucide-rotate-ccw"
-              color="neutral"
-              variant="subtle"
-              size="sm"
-              aria-label="Reset theme"
-              @click="resetTheme"
-            />
-          </UTooltip>
         </div>
 
         <!-- The floating preview card: the grid scrolls inside it; the
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index b10d92b1a5..addf3b72cc 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -207,21 +207,23 @@ export const presets: ThemePreset[] = [{
       secondary: 'violet',
       neutral: 'custom-neutral'
     },
-    radius: 0.5,
+    radius: 0.375,
     font: { sans: 'Poppins' },
     tokens: {
       light: {
         '--ui-bg': 'var(--ui-color-neutral-50)',
-        '--ui-text-inverted': 'var(--ui-color-neutral-50)'
+        '--ui-text-inverted': 'var(--ui-color-neutral-50)',
+        '--ui-bg-muted': 'var(--ui-color-neutral-100)'
       },
       dark: {
-        '--ui-text-highlighted': 'var(--ui-color-neutral-50)',
         '--ui-bg-inverted': 'var(--ui-color-neutral-50)',
-        '--ui-border-inverted': 'var(--ui-color-neutral-50)'
+        '--ui-text-highlighted': 'var(--ui-color-neutral-50)',
+        '--ui-border-inverted': 'var(--ui-color-neutral-50)',
+        '--ui-primary': 'var(--ui-color-primary-400)'
       }
     },
     // Soft pink-cast shadows (primary 700 light / 950 dark at 15%) over a
-    // top-lit blurred inset.
+    // top-lit blurred inset in its own lighter shade (500 light / 900 dark).
     style: {
       shadow: 'soft',
       shadowOpacity: 15,
@@ -236,6 +238,11 @@ export const presets: ThemePreset[] = [{
       shadowShade: {
         light: 700,
         dark: 950
+      },
+      innerShadowColor: 'primary-shade',
+      innerShadowShade: {
+        light: 500,
+        dark: 900
       }
     }
   }

From 7b453d0daf55ff363e1dd0ca43d56b852bfc218c Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Thu, 9 Jul 2026 19:42:07 +0200
Subject: [PATCH 102/185] feat(docs): bottom toolbar, fullscreen floating bar,
 header view tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The studio toolbar moves below the preview with undo/redo/reset at the
far left; in fullscreen it becomes a floating bottom bar that peeks a
few pixels until hovered, so every control (including the view select
and exit) works without leaving fullscreen. The header view switcher
becomes a primary UTabs, with the site pages in a Menu popover sized
explicitly — a single trigger makes the nav root, and so the default
viewport wrapper, only as wide as the button, and the flex wrapper
shrinks the popover to match.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/components/header/Header.vue |  75 +++------
 docs/app/pages/theme.vue              | 213 +++++++++++++-------------
 2 files changed, 131 insertions(+), 157 deletions(-)

diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index 7b772a6297..8ba209f21e 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -13,24 +13,13 @@ function toggleChat() {
 
 /**
  * On /theme the header center becomes the studio's view switcher, with the
- * regular pages folded into a single Menu popover; undo/redo/reset take the
- * version menu's spot on the left.
+ * regular pages folded into a single Menu popover.
  */
 const isStudio = computed(() => route.path === '/theme')
 
 const { view, views } = useThemeStudioView()
-const { past, future, undo, redo } = useThemeStudioHistory()
-const { resetTheme } = useTheme()
 
-const studioLinks = computed(() => [
-  ...views.map(tab => ({
-    label: tab.label,
-    icon: tab.icon,
-    active: view.value === tab.value,
-    onSelect: () => {
-      view.value = tab.value
-    }
-  })),
+const studioMenu = [
   {
     label: 'Menu',
     children: [{
@@ -70,7 +59,7 @@ const studioLinks = computed(() => [
       to: '/releases'
     }]
   }
-])
+]
 </script>
 
 <!-- eslint-disable vue/no-template-shadow -->
@@ -86,46 +75,28 @@ const studioLinks = computed(() => [
     <template #left>
       <HeaderLogo />
 
-      <VersionMenu v-if="!isStudio" />
-
-      <template v-if="isStudio">
-        <UFieldGroup class="hidden lg:flex">
-          <UTooltip text="Undo" :kbds="['meta', 'Z']">
-            <UButton
-              icon="i-lucide-undo-2"
-              color="neutral"
-              variant="ghost"
-              :disabled="!past.length"
-              aria-label="Undo theme change"
-              @click="undo"
-            />
-          </UTooltip>
-
-          <UTooltip text="Redo" :kbds="['meta', 'shift', 'Z']">
-            <UButton
-              icon="i-lucide-redo-2"
-              color="neutral"
-              variant="ghost"
-              :disabled="!future.length"
-              aria-label="Redo theme change"
-              @click="redo"
-            />
-          </UTooltip>
-        </UFieldGroup>
-
-        <UTooltip text="Reset theme" class="hidden lg:flex">
-          <UButton
-            icon="i-lucide-rotate-ccw"
-            color="neutral"
-            variant="ghost"
-            aria-label="Reset theme"
-            @click="resetTheme"
-          />
-        </UTooltip>
-      </template>
+      <VersionMenu />
     </template>
 
-    <UNavigationMenu v-if="isStudio" :items="studioLinks" variant="link" content-orientation="vertical" />
+    <div v-if="isStudio" class="flex items-center gap-1">
+      <UTabs
+        v-model="view"
+        :items="views"
+        :content="false"
+        color="primary"
+        size="sm"
+      />
+
+      <!-- A single trigger makes the menu root (and so the default
+           popover viewport) only as wide as the button — size the
+           popover explicitly. -->
+      <UNavigationMenu
+        :items="studioMenu"
+        variant="link"
+        content-orientation="vertical"
+        :ui="{ viewportWrapper: 'w-[25rem]', content: 'w-[25rem]' }"
+      />
+    </div>
     <UNavigationMenu v-else :items="desktopLinks" variant="link" content-orientation="vertical" />
 
     <template #right>
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 3f1c0213a3..ebc8ce8954 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -2,9 +2,8 @@
 const { track } = useAnalytics()
 const { currentDoc, resetTheme } = useTheme()
 
-// View, fullscreen and undo/redo history are app-level state: the site
-// header hosts the view switcher and undo/redo/reset while on /theme
-// (the toolbar keeps lg:hidden fallbacks for mobile).
+// View and fullscreen are app-level state: the site header hosts the view
+// switcher while on /theme and hides itself in fullscreen.
 const { view, fullscreen, views } = useThemeStudioView()
 const { past, future, align, capture, undo, redo } = useThemeStudioHistory()
 
@@ -58,93 +57,6 @@ const settingGroups = [
   <main class="bg-neutral-100 dark:bg-neutral-900">
     <UContainer :class="fullscreen && 'max-w-none px-0 sm:px-0 lg:px-0'">
       <div class="flex flex-col w-full" :class="fullscreen ? 'h-dvh' : 'h-[calc(100dvh-var(--ui-header-height))]'">
-        <!-- One toolbar: presets and setting-group popovers on the left,
-             document actions on the right. -->
-        <div v-if="!fullscreen" class="shrink-0 flex items-center gap-2 py-3 overflow-x-auto">
-          <ThemeStudioPresetMenu class="w-56 shrink-0" />
-
-          <UPopover
-            v-for="settingGroup in settingGroups"
-            :key="settingGroup.value"
-            :content="{ align: 'start' }"
-          >
-            <UButton
-              :label="settingGroup.label"
-              color="neutral"
-              variant="subtle"
-              size="sm"
-              trailing-icon="i-lucide-chevron-down"
-            />
-
-            <template #content>
-              <ThemeStudioControls :group="settingGroup.value" class="w-80 max-h-[70vh] overflow-y-auto p-4" />
-            </template>
-          </UPopover>
-
-          <span class="flex-1" />
-
-          <!-- The header center hosts the view switcher on desktop; below
-               lg it collapses, so the toolbar keeps a select as fallback. -->
-          <USelect
-            v-model="view"
-            :items="views"
-            :icon="views.find(tab => tab.value === view)?.icon"
-            size="sm"
-            color="neutral"
-            variant="subtle"
-            class="w-36 shrink-0 lg:hidden"
-          />
-
-          <UFieldGroup size="sm" class="lg:hidden">
-            <UButton
-              icon="i-lucide-undo-2"
-              color="neutral"
-              variant="subtle"
-              :disabled="!past.length"
-              aria-label="Undo theme change"
-              @click="undo"
-            />
-
-            <UButton
-              icon="i-lucide-redo-2"
-              color="neutral"
-              variant="subtle"
-              :disabled="!future.length"
-              aria-label="Redo theme change"
-              @click="redo"
-            />
-
-            <UButton
-              icon="i-lucide-rotate-ccw"
-              color="neutral"
-              variant="subtle"
-              aria-label="Reset theme"
-              @click="resetTheme"
-            />
-          </UFieldGroup>
-
-          <UColorModeButton size="sm" variant="subtle" />
-
-          <UTooltip text="Fullscreen preview">
-            <UButton
-              icon="i-lucide-maximize"
-              color="neutral"
-              variant="subtle"
-              size="sm"
-              aria-label="Fullscreen preview"
-              @click="fullscreen = true"
-            />
-          </UTooltip>
-
-          <div class="shrink-0">
-            <UFieldGroup>
-              <ThemeStudioImport />
-
-              <ThemeStudioExport />
-            </UFieldGroup>
-          </div>
-        </div>
-
         <!-- The floating preview card: the grid scrolls inside it; the
              app-shell views own their height and scroll internally.
              [&>*]:rounded-[inherit] + [contain:paint] put the radius and
@@ -155,7 +67,7 @@ const settingGroups = [
           class="flex-1 min-w-0 min-h-0 bg-default [&>*]:rounded-[inherit] [&>*]:[contain:paint]"
           :class="[
             view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden',
-            fullscreen ? 'rounded-none' : 'ring ring-default mb-4 rounded-lg'
+            fullscreen ? 'rounded-none' : 'ring ring-default mt-4 rounded-lg'
           ]"
         >
           <ThemeStudioBento v-if="view === 'grid'" />
@@ -165,21 +77,112 @@ const settingGroups = [
           <ThemeStudioViewLanding v-else-if="view === 'landing'" />
           <ThemeStudioViewA11y v-else-if="view === 'a11y'" />
         </div>
-      </div>
 
-      <!-- Exit peeks a few pixels into the corner; nearing it slides the
-           button fully in (Esc always works). -->
-      <div v-if="fullscreen" class="group fixed top-0 right-0 z-50 flex justify-end items-start w-32 h-20 pt-2 pe-4 pointer-events-auto">
-        <UTooltip text="Exit fullscreen" :kbds="['Esc']">
-          <UButton
-            icon="i-lucide-minimize"
-            color="neutral"
-            variant="subtle"
-            class="translate-x-[calc(100%-6px)] group-hover:translate-x-0 transition-transform duration-200"
-            aria-label="Exit fullscreen preview"
-            @click="fullscreen = false"
-          />
-        </UTooltip>
+        <!-- One toolbar at the bottom: history leftmost, presets and
+             setting-group popovers, document actions on the right. In
+             fullscreen it floats over the bottom edge, peeking a few
+             pixels until hovered (Esc still exits); only a thin strip
+             catches the pointer so the preview stays clickable. -->
+        <div :class="fullscreen ? 'group fixed bottom-0 inset-x-0 z-50 pointer-events-none' : 'shrink-0'">
+          <div v-if="fullscreen" class="absolute bottom-0 inset-x-0 h-2.5 pointer-events-auto" />
+
+          <div
+            class="flex items-center gap-2 py-3 overflow-x-auto"
+            :class="fullscreen && 'm-4 px-4 rounded-lg bg-default ring ring-default shadow-lg pointer-events-auto translate-y-[calc(100%+6px)] group-hover:translate-y-0 group-focus-within:translate-y-0 transition-transform duration-200'"
+          >
+            <UFieldGroup size="sm">
+              <UTooltip text="Undo" :kbds="['meta', 'Z']">
+                <UButton
+                  icon="i-lucide-undo-2"
+                  color="neutral"
+                  variant="subtle"
+                  :disabled="!past.length"
+                  aria-label="Undo theme change"
+                  @click="undo"
+                />
+              </UTooltip>
+
+              <UTooltip text="Redo" :kbds="['meta', 'shift', 'Z']">
+                <UButton
+                  icon="i-lucide-redo-2"
+                  color="neutral"
+                  variant="subtle"
+                  :disabled="!future.length"
+                  aria-label="Redo theme change"
+                  @click="redo"
+                />
+              </UTooltip>
+            </UFieldGroup>
+
+            <UTooltip text="Reset theme">
+              <UButton
+                icon="i-lucide-rotate-ccw"
+                color="neutral"
+                variant="subtle"
+                size="sm"
+                aria-label="Reset theme"
+                @click="resetTheme"
+              />
+            </UTooltip>
+
+            <ThemeStudioPresetMenu class="w-56 shrink-0" />
+
+            <UPopover
+              v-for="settingGroup in settingGroups"
+              :key="settingGroup.value"
+              :content="{ align: 'start' }"
+            >
+              <UButton
+                :label="settingGroup.label"
+                color="neutral"
+                variant="subtle"
+                size="sm"
+                trailing-icon="i-lucide-chevron-down"
+              />
+
+              <template #content>
+                <ThemeStudioControls :group="settingGroup.value" class="w-80 max-h-[70vh] overflow-y-auto p-4" />
+              </template>
+            </UPopover>
+
+            <span class="flex-1" />
+
+            <!-- The header center hosts the view switcher on desktop; the
+               toolbar keeps a select for mobile and for fullscreen, where
+               the header is hidden. -->
+            <USelect
+              v-model="view"
+              :items="views"
+              :icon="views.find(tab => tab.value === view)?.icon"
+              size="sm"
+              color="neutral"
+              variant="subtle"
+              class="w-36 shrink-0"
+              :class="!fullscreen && 'lg:hidden'"
+            />
+
+            <UColorModeButton size="sm" variant="subtle" />
+
+            <UTooltip :text="fullscreen ? 'Exit fullscreen' : 'Fullscreen preview'" :kbds="fullscreen ? ['Esc'] : undefined">
+              <UButton
+                :icon="fullscreen ? 'i-lucide-minimize' : 'i-lucide-maximize'"
+                color="neutral"
+                variant="subtle"
+                size="sm"
+                :aria-label="fullscreen ? 'Exit fullscreen preview' : 'Fullscreen preview'"
+                @click="fullscreen = !fullscreen"
+              />
+            </UTooltip>
+
+            <div class="shrink-0">
+              <UFieldGroup>
+                <ThemeStudioImport />
+
+                <ThemeStudioExport />
+              </UFieldGroup>
+            </div>
+          </div>
+        </div>
       </div>
     </UContainer>
   </main>

From 2045a34e89c64c071b21c1b8ef1ed0ad084312b4 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Thu, 9 Jul 2026 19:52:41 +0200
Subject: [PATCH 103/185] refactor(docs): header view tabs move into the
 navigation menu's list-leading slot

One component instead of a wrapper div; the popover keeps its explicit
width since the default viewport wrapper tracks the root, not the
content.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/components/header/Header.vue | 39 ++++++++++++++-------------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index 8ba209f21e..bba3febfd5 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -78,25 +78,26 @@ const studioMenu = [
       <VersionMenu />
     </template>
 
-    <div v-if="isStudio" class="flex items-center gap-1">
-      <UTabs
-        v-model="view"
-        :items="views"
-        :content="false"
-        color="primary"
-        size="sm"
-      />
-
-      <!-- A single trigger makes the menu root (and so the default
-           popover viewport) only as wide as the button — size the
-           popover explicitly. -->
-      <UNavigationMenu
-        :items="studioMenu"
-        variant="link"
-        content-orientation="vertical"
-        :ui="{ viewportWrapper: 'w-[25rem]', content: 'w-[25rem]' }"
-      />
-    </div>
+    <!-- The popover is sized explicitly: with a single trigger the
+         default viewport wrapper tracks the root's width, not the
+         content's. -->
+    <UNavigationMenu
+      v-if="isStudio"
+      :items="studioMenu"
+      variant="link"
+      content-orientation="vertical"
+      :ui="{ viewportWrapper: 'w-[16rem]', content: 'w-[16rem]' }"
+    >
+      <template #list-leading>
+        <UTabs
+          v-model="view"
+          :items="views"
+          :content="false"
+          color="primary"
+          size="sm"
+        />
+      </template>
+    </UNavigationMenu>
     <UNavigationMenu v-else :items="desktopLinks" variant="link" content-orientation="vertical" />
 
     <template #right>

From 7d6db7c6351cd78b71269eb44ab801d941cee9e6 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Thu, 9 Jul 2026 19:55:16 +0200
Subject: [PATCH 104/185] feat(docs): studio menu nests resources one level
 down
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The popover body becomes a vertical navigation menu rendered through
the item's content slot — horizontal popover child lists only render
one level, but the vertical orientation collapses Showcase, Community,
Playground and Blog into a Resources group.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/components/header/Header.vue | 91 +++++++++++++++------------
 1 file changed, 50 insertions(+), 41 deletions(-)

diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index bba3febfd5..c9efb13680 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -19,47 +19,48 @@ const isStudio = computed(() => route.path === '/theme')
 
 const { view, views } = useThemeStudioView()
 
-const studioMenu = [
-  {
-    label: 'Menu',
-    children: [{
-      label: 'Docs',
-      description: 'Learn how to build with Nuxt UI.',
-      icon: 'i-lucide-book-open',
-      to: '/docs'
-    }, {
-      label: 'Templates',
-      description: 'Start from a ready-made template.',
-      icon: 'i-lucide-panels-top-left',
-      to: '/templates'
-    }, {
-      label: 'Showcase',
-      description: 'Discover websites built with Nuxt UI.',
-      icon: 'i-lucide-presentation',
-      to: '/showcase'
-    }, {
-      label: 'Community',
-      description: 'Explore projects built around Nuxt UI.',
-      icon: 'i-lucide-globe',
-      to: '/community'
-    }, {
-      label: 'Blog',
-      description: 'Read the latest news and updates.',
-      icon: 'i-lucide-newspaper',
-      to: '/blog'
-    }, {
-      label: 'Figma',
-      description: 'Design with the official Figma kit.',
-      icon: 'i-simple-icons-figma',
-      to: '/figma'
-    }, {
-      label: 'Releases',
-      description: 'Follow what ships in each release.',
-      icon: 'i-lucide-rocket',
-      to: '/releases'
-    }]
-  }
-]
+// The popover body is a vertical menu so Resources can nest as a
+// collapsed group — horizontal popover child lists only render one level.
+const studioMenu = [{ label: 'Menu', slot: 'pages' as const }]
+
+const studioMenuLinks = [{
+  label: 'Docs',
+  icon: 'i-lucide-book-open',
+  to: '/docs'
+}, {
+  label: 'Templates',
+  icon: 'i-lucide-panels-top-left',
+  to: '/templates'
+}, {
+  label: 'Figma',
+  icon: 'i-simple-icons-figma',
+  to: '/figma'
+}, {
+  label: 'Releases',
+  icon: 'i-lucide-rocket',
+  to: '/releases'
+}, {
+  label: 'Resources',
+  icon: 'i-lucide-library',
+  children: [{
+    label: 'Showcase',
+    icon: 'i-lucide-presentation',
+    to: '/showcase'
+  }, {
+    label: 'Community',
+    icon: 'i-lucide-globe',
+    to: '/community'
+  }, {
+    label: 'Playground',
+    icon: 'i-lucide-square-terminal',
+    to: '/play',
+    target: '_blank'
+  }, {
+    label: 'Blog',
+    icon: 'i-lucide-newspaper',
+    to: '/blog'
+  }]
+}]
 </script>
 
 <!-- eslint-disable vue/no-template-shadow -->
@@ -97,6 +98,14 @@ const studioMenu = [
           size="sm"
         />
       </template>
+
+      <template #pages-content>
+        <UNavigationMenu
+          orientation="vertical"
+          :items="studioMenuLinks"
+          class="p-2"
+        />
+      </template>
     </UNavigationMenu>
     <UNavigationMenu v-else :items="desktopLinks" variant="link" content-orientation="vertical" />
 

From de1d29d5c56c8a635c100abf5c358c35390a0c7b Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Thu, 9 Jul 2026 20:15:40 +0200
Subject: [PATCH 105/185] feat(docs): studio grid renders the landing
 playground masonry
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Slurps the playground component family from docs/landing-playground —
26 self-contained, product-like tiles in a responsive masonry — as the
studio's Grid view, replacing the hand-rolled bento. Every tile picks
up the live theme.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/components/playground/Playground.vue |  75 +++++++++
 .../playground/PlaygroundAnalytics.vue        |  38 +++++
 .../playground/PlaygroundAnnouncement.vue     |  32 ++++
 .../playground/PlaygroundAuthForm.vue         |  63 +++++++
 .../playground/PlaygroundBadges.vue           |  23 +++
 .../playground/PlaygroundButtons.vue          |  23 +++
 .../playground/PlaygroundCalendar.vue         |  11 ++
 .../components/playground/PlaygroundCard.vue  |   5 +
 .../playground/PlaygroundColorPicker.vue      |  18 ++
 .../playground/PlaygroundCommandPalette.vue   |  65 ++++++++
 .../playground/PlaygroundContributors.vue     |  37 +++++
 .../playground/PlaygroundDashboard.vue        |  69 ++++++++
 .../components/playground/PlaygroundEmpty.vue |  10 ++
 .../components/playground/PlaygroundGoal.vue  |  25 +++
 .../components/playground/PlaygroundInput.vue |  20 +++
 .../playground/PlaygroundInviteTeam.vue       |  56 +++++++
 .../playground/PlaygroundNavigation.vue       |  22 +++
 .../playground/PlaygroundNotifications.vue    |  34 ++++
 .../playground/PlaygroundPinInput.vue         |  24 +++
 .../playground/PlaygroundPrompt.vue           | 155 ++++++++++++++++++
 .../playground/PlaygroundReportBug.vue        |  57 +++++++
 .../playground/PlaygroundSavingsTargets.vue   |  30 ++++
 .../playground/PlaygroundShortcuts.vue        |  33 ++++
 .../components/playground/PlaygroundTabs.vue  |  49 ++++++
 .../playground/PlaygroundTransactions.vue     |  46 ++++++
 .../playground/PlaygroundTransferFunds.vue    |  54 ++++++
 .../playground/PlaygroundTypography.vue       |  31 ++++
 docs/app/pages/theme.vue                      |   2 +-
 28 files changed, 1106 insertions(+), 1 deletion(-)
 create mode 100644 docs/app/components/playground/Playground.vue
 create mode 100644 docs/app/components/playground/PlaygroundAnalytics.vue
 create mode 100644 docs/app/components/playground/PlaygroundAnnouncement.vue
 create mode 100644 docs/app/components/playground/PlaygroundAuthForm.vue
 create mode 100644 docs/app/components/playground/PlaygroundBadges.vue
 create mode 100644 docs/app/components/playground/PlaygroundButtons.vue
 create mode 100644 docs/app/components/playground/PlaygroundCalendar.vue
 create mode 100644 docs/app/components/playground/PlaygroundCard.vue
 create mode 100644 docs/app/components/playground/PlaygroundColorPicker.vue
 create mode 100644 docs/app/components/playground/PlaygroundCommandPalette.vue
 create mode 100644 docs/app/components/playground/PlaygroundContributors.vue
 create mode 100644 docs/app/components/playground/PlaygroundDashboard.vue
 create mode 100644 docs/app/components/playground/PlaygroundEmpty.vue
 create mode 100644 docs/app/components/playground/PlaygroundGoal.vue
 create mode 100644 docs/app/components/playground/PlaygroundInput.vue
 create mode 100644 docs/app/components/playground/PlaygroundInviteTeam.vue
 create mode 100644 docs/app/components/playground/PlaygroundNavigation.vue
 create mode 100644 docs/app/components/playground/PlaygroundNotifications.vue
 create mode 100644 docs/app/components/playground/PlaygroundPinInput.vue
 create mode 100644 docs/app/components/playground/PlaygroundPrompt.vue
 create mode 100644 docs/app/components/playground/PlaygroundReportBug.vue
 create mode 100644 docs/app/components/playground/PlaygroundSavingsTargets.vue
 create mode 100644 docs/app/components/playground/PlaygroundShortcuts.vue
 create mode 100644 docs/app/components/playground/PlaygroundTabs.vue
 create mode 100644 docs/app/components/playground/PlaygroundTransactions.vue
 create mode 100644 docs/app/components/playground/PlaygroundTransferFunds.vue
 create mode 100644 docs/app/components/playground/PlaygroundTypography.vue

diff --git a/docs/app/components/playground/Playground.vue b/docs/app/components/playground/Playground.vue
new file mode 100644
index 0000000000..92f3a19fab
--- /dev/null
+++ b/docs/app/components/playground/Playground.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import {
+  PlaygroundInput,
+  PlaygroundCommandPalette,
+  PlaygroundCalendar,
+  PlaygroundButtons,
+  PlaygroundNotifications,
+  PlaygroundTransactions,
+  PlaygroundTransferFunds,
+  PlaygroundInviteTeam,
+  PlaygroundAnalytics,
+  PlaygroundPinInput,
+  PlaygroundBadges,
+  PlaygroundDashboard,
+  PlaygroundReportBug,
+  PlaygroundGoal,
+  PlaygroundSavingsTargets,
+  PlaygroundTypography,
+  PlaygroundShortcuts,
+  PlaygroundNavigation,
+  PlaygroundColorPicker,
+  PlaygroundEmpty,
+  PlaygroundAnnouncement,
+  PlaygroundTabs,
+  PlaygroundContributors,
+  PlaygroundAuthForm,
+  PlaygroundPrompt
+} from '#components'
+
+// Live, interactive component showcase rendered in the landing page hero, laid
+// out as a masonry of content-sized cards à la shadcn/HeroUI. Each tile is a
+// self-contained, product-like block (header + body + footer action). Overlays
+// are only shown embedded in richer examples (command palette, dashboard
+// dropdown, select menus, auth form, chat), never as bare triggers. Tiles are
+// progressively revealed as the viewport widens to keep the columns balanced.
+const tiles = [
+  { name: 'input', component: PlaygroundInput, class: '' },
+  { name: 'command-palette', component: PlaygroundCommandPalette, class: '' },
+  { name: 'calendar', component: PlaygroundCalendar, class: '' },
+  { name: 'buttons', component: PlaygroundButtons, class: '' },
+  { name: 'notifications', component: PlaygroundNotifications, class: '' },
+  { name: 'transactions', component: PlaygroundTransactions, class: '' },
+  { name: 'transfer-funds', component: PlaygroundTransferFunds, class: 'hidden sm:block' },
+  { name: 'invite-team', component: PlaygroundInviteTeam, class: 'hidden sm:block' },
+  { name: 'analytics', component: PlaygroundAnalytics, class: 'hidden sm:block' },
+  { name: 'pin-input', component: PlaygroundPinInput, class: 'hidden sm:block' },
+  { name: 'badges', component: PlaygroundBadges, class: 'hidden sm:block' },
+  { name: 'dashboard', component: PlaygroundDashboard, class: 'hidden sm:block' },
+  { name: 'report-bug', component: PlaygroundReportBug, class: 'hidden lg:block' },
+  { name: 'goal', component: PlaygroundGoal, class: 'hidden lg:block' },
+  { name: 'savings-targets', component: PlaygroundSavingsTargets, class: 'hidden lg:block' },
+  { name: 'typography', component: PlaygroundTypography, class: 'hidden lg:block' },
+  { name: 'shortcuts', component: PlaygroundShortcuts, class: 'hidden lg:block' },
+  { name: 'navigation', component: PlaygroundNavigation, class: 'hidden lg:block' },
+  { name: 'color-picker', component: PlaygroundColorPicker, class: 'hidden lg:block' },
+  { name: 'empty', component: PlaygroundEmpty, class: 'hidden xl:block' },
+  { name: 'announcement', component: PlaygroundAnnouncement, class: 'hidden xl:block' },
+  { name: 'tabs', component: PlaygroundTabs, class: 'hidden xl:block' },
+  { name: 'contributors', component: PlaygroundContributors, class: 'hidden xl:block' },
+  { name: 'auth-form', component: PlaygroundAuthForm, class: 'hidden xl:block' },
+  { name: 'prompt', component: PlaygroundPrompt, class: 'hidden xl:block' }
+]
+
+const columnsClass = 'columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-4'
+</script>
+
+<template>
+  <div class="w-full max-w-7xl mx-auto px-4 sm:px-6">
+    <div :class="columnsClass">
+      <PlaygroundCard v-for="tile in tiles" :key="tile.name" :class="tile.class">
+        <component :is="tile.component" />
+      </PlaygroundCard>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundAnalytics.vue b/docs/app/components/playground/PlaygroundAnalytics.vue
new file mode 100644
index 0000000000..210e25989a
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundAnalytics.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const bars = [40, 65, 52, 80, 60, 95, 72]
+const days = ['M', 'T', 'W', 'T', 'F', 'S', 'S']
+</script>
+
+<template>
+  <div class="p-4 space-y-4">
+    <div class="flex items-start justify-between">
+      <div>
+        <p class="text-sm text-muted">
+          Visitors
+        </p>
+        <p class="text-2xl font-semibold text-highlighted">
+          418.2K
+        </p>
+      </div>
+      <UBadge color="success" variant="subtle" size="sm" icon="i-lucide-trending-up">
+        +10%
+      </UBadge>
+    </div>
+
+    <div>
+      <div class="flex items-end gap-1.5 h-24">
+        <div
+          v-for="(bar, index) in bars"
+          :key="index"
+          class="flex-1 rounded-t-sm bg-primary/80 transition-colors hover:bg-primary"
+          :style="{ height: `${bar}%` }"
+        />
+      </div>
+      <div class="flex gap-1.5 mt-1.5">
+        <span v-for="(day, index) in days" :key="index" class="flex-1 text-center text-xs text-muted">
+          {{ day }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundAnnouncement.vue b/docs/app/components/playground/PlaygroundAnnouncement.vue
new file mode 100644
index 0000000000..8274541069
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundAnnouncement.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const toast = useToast()
+</script>
+
+<template>
+  <div>
+    <div class="p-4 flex items-start gap-3">
+      <div class="flex items-center justify-center size-9 rounded-lg bg-elevated text-primary shrink-0">
+        <UIcon name="i-lucide-radar" class="size-5" />
+      </div>
+      <div>
+        <p class="font-semibold text-highlighted">
+          Observability Plus
+        </p>
+        <p class="text-sm text-muted">
+          A faster, natural-language way to explore your data. Monitoring moves to the Pro plan in 2026.
+        </p>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-end gap-2 border-t border-default p-3">
+      <UButton label="Dismiss" color="neutral" variant="ghost" />
+      <UButton
+        label="Learn more"
+        color="neutral"
+        variant="subtle"
+        trailing-icon="i-lucide-arrow-right"
+        @click="toast.add({ title: 'Observability Plus' })"
+      />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundAuthForm.vue b/docs/app/components/playground/PlaygroundAuthForm.vue
new file mode 100644
index 0000000000..81f0f9f1c7
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundAuthForm.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import type { FormSubmitEvent, AuthFormField } from '@nuxt/ui'
+
+const toast = useToast()
+
+const fields: AuthFormField[] = [{
+  name: 'email',
+  type: 'email',
+  label: 'Email',
+  placeholder: 'Enter your email',
+  required: true
+}, {
+  name: 'password',
+  label: 'Password',
+  type: 'password',
+  placeholder: 'Enter your password',
+  required: true
+}, {
+  name: 'remember',
+  label: 'Remember me',
+  type: 'checkbox'
+}]
+
+const providers = [{
+  label: 'Google',
+  icon: 'i-simple-icons-google',
+  onClick: () => {
+    toast.add({ title: 'Google', description: 'Login with Google' })
+  }
+}, {
+  label: 'GitHub',
+  icon: 'i-simple-icons-github',
+  onClick: () => {
+    toast.add({ title: 'GitHub', description: 'Login with GitHub' })
+  }
+}]
+
+const schema = z.object({
+  email: z.email('Invalid email'),
+  password: z.string('Password is required').min(8, 'Must be at least 8 characters')
+})
+
+type Schema = z.output<typeof schema>
+
+function onSubmit(payload: FormSubmitEvent<Schema>) {
+  toast.add({ title: 'Submitted', description: payload.data.email })
+}
+</script>
+
+<template>
+  <div class="p-6">
+    <UAuthForm
+      :schema="schema"
+      title="Login"
+      description="Enter your credentials to access your account."
+      icon="i-lucide-user"
+      :fields="fields"
+      :providers="providers"
+      @submit="onSubmit"
+    />
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundBadges.vue b/docs/app/components/playground/PlaygroundBadges.vue
new file mode 100644
index 0000000000..49e7959d58
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundBadges.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="flex flex-col gap-3 p-4">
+    <div class="flex flex-wrap gap-2">
+      <UBadge label="Primary" />
+      <UBadge label="Success" color="success" variant="subtle" />
+      <UBadge label="Warning" color="warning" variant="subtle" />
+      <UBadge label="Error" color="error" variant="subtle" />
+      <UBadge label="Neutral" color="neutral" variant="outline" />
+    </div>
+
+    <div class="flex flex-wrap items-center gap-2">
+      <UBadge color="success" variant="soft" icon="i-lucide-circle-check">
+        Shipped
+      </UBadge>
+      <UBadge color="warning" variant="soft" icon="i-lucide-clock">
+        Pending
+      </UBadge>
+      <UBadge color="neutral" variant="soft" size="lg">
+        v4.9.0
+      </UBadge>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundButtons.vue b/docs/app/components/playground/PlaygroundButtons.vue
new file mode 100644
index 0000000000..bd18617641
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundButtons.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="flex flex-col gap-3 p-4">
+    <div class="flex flex-wrap gap-2">
+      <UButton label="Solid" />
+      <UButton label="Outline" variant="outline" />
+      <UButton label="Soft" variant="soft" />
+      <UButton label="Subtle" variant="subtle" />
+      <UButton label="Ghost" variant="ghost" />
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <UButton label="Get started" icon="i-lucide-rocket" color="primary" />
+      <UButton label="Loading" loading variant="outline" />
+      <UButton icon="i-lucide-heart" color="error" variant="soft" square aria-label="Like" />
+      <UButton icon="i-lucide-settings" color="neutral" variant="ghost" square aria-label="Settings" />
+    </div>
+
+    <UFieldGroup>
+      <UButton label="Copy" icon="i-lucide-copy" color="neutral" variant="subtle" />
+      <UButton icon="i-lucide-chevron-down" color="neutral" variant="subtle" square aria-label="More" />
+    </UFieldGroup>
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundCalendar.vue b/docs/app/components/playground/PlaygroundCalendar.vue
new file mode 100644
index 0000000000..d8e887d915
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundCalendar.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { getLocalTimeZone, today } from '@internationalized/date'
+
+const modelValue = shallowRef(today(getLocalTimeZone()))
+</script>
+
+<template>
+  <div class="flex items-center justify-center p-4">
+    <UCalendar v-model="modelValue" :week-starts-on="1" />
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundCard.vue b/docs/app/components/playground/PlaygroundCard.vue
new file mode 100644
index 0000000000..b7702e498b
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundCard.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="relative isolate break-inside-avoid mb-4 rounded-xl ring ring-default bg-default shadow-sm overflow-hidden">
+    <slot />
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundColorPicker.vue b/docs/app/components/playground/PlaygroundColorPicker.vue
new file mode 100644
index 0000000000..7c588ad94d
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundColorPicker.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const color = ref('#00C16A')
+
+const chip = computed(() => ({ backgroundColor: color.value }))
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4 p-4">
+    <UColorPicker v-model="color" />
+
+    <UBadge color="neutral" variant="outline" size="lg" class="font-mono">
+      <template #leading>
+        <span :style="chip" class="size-3 rounded-full" />
+      </template>
+      {{ color }}
+    </UBadge>
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundCommandPalette.vue b/docs/app/components/playground/PlaygroundCommandPalette.vue
new file mode 100644
index 0000000000..6cec931c7c
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundCommandPalette.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { CommandPaletteGroup, CommandPaletteItem } from '@nuxt/ui'
+
+const toast = useToast()
+
+const groups = ref<CommandPaletteGroup<CommandPaletteItem>[]>([
+  {
+    id: 'users',
+    label: 'Users',
+    items: [
+      {
+        label: 'Benjamin Canac',
+        suffix: 'benjamincanac',
+        avatar: { src: 'https://github.com/benjamincanac.png', loading: 'lazy' }
+      },
+      {
+        label: 'Romain Hamel',
+        suffix: 'romhml',
+        avatar: { src: 'https://github.com/romhml.png', loading: 'lazy' }
+      },
+      {
+        label: 'Neil Richter',
+        suffix: 'noook',
+        avatar: { src: 'https://github.com/noook.png', loading: 'lazy' }
+      }
+    ]
+  },
+  {
+    id: 'actions',
+    items: [
+      {
+        label: 'Add new file',
+        suffix: 'Create a new file in the current workspace.',
+        icon: 'i-lucide-file-plus',
+        kbds: ['meta', 'N'],
+        onSelect() {
+          toast.add({ title: 'Add new file' })
+        }
+      },
+      {
+        label: 'Add new folder',
+        suffix: 'Create a new folder in the current workspace.',
+        icon: 'i-lucide-folder-plus',
+        kbds: ['meta', 'F'],
+        onSelect() {
+          toast.add({ title: 'Add new folder' })
+        }
+      },
+      {
+        label: 'Add label',
+        suffix: 'Add a label to the current item.',
+        icon: 'i-lucide-tag',
+        kbds: ['meta', 'L'],
+        onSelect() {
+          toast.add({ title: 'Add label' })
+        }
+      }
+    ]
+  }
+])
+</script>
+
+<template>
+  <UCommandPalette :groups="groups" placeholder="Search users and actions..." class="h-80" />
+</template>
diff --git a/docs/app/components/playground/PlaygroundContributors.vue b/docs/app/components/playground/PlaygroundContributors.vue
new file mode 100644
index 0000000000..4e0ea80e32
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundContributors.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const usernames = [
+  'benjamincanac', 'romhml', 'noook', 'atinux', 'HugoRCD',
+  'sandros94', 'danielroe', 'J-Michalek', 'genu', 'smarroufin'
+]
+</script>
+
+<template>
+  <div class="p-4 space-y-4">
+    <div class="flex items-start justify-between">
+      <div>
+        <p class="font-semibold text-highlighted">
+          Contributors
+        </p>
+        <p class="text-sm text-muted">
+          Built by the community.
+        </p>
+      </div>
+      <UBadge color="neutral" variant="subtle">
+        312
+      </UBadge>
+    </div>
+
+    <div class="flex flex-wrap gap-1.5">
+      <UAvatar
+        v-for="username in usernames"
+        :key="username"
+        :src="`https://github.com/${username}.png`"
+        :alt="username"
+        loading="lazy"
+      />
+      <div class="flex items-center justify-center size-8 rounded-full bg-elevated text-xs font-medium text-muted">
+        +300
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundDashboard.vue b/docs/app/components/playground/PlaygroundDashboard.vue
new file mode 100644
index 0000000000..91a43c7fbd
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundDashboard.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+
+const toast = useToast()
+
+const items: DropdownMenuItem[][] = [
+  [
+    { label: 'View report', icon: 'i-lucide-eye', onSelect: () => toast.add({ title: 'View report' }) },
+    { label: 'Export as CSV', icon: 'i-lucide-download', onSelect: () => toast.add({ title: 'Exporting…' }) },
+    { label: 'Refresh', icon: 'i-lucide-refresh-cw', onSelect: () => toast.add({ title: 'Refreshed' }) }
+  ],
+  [
+    { label: 'Delete', icon: 'i-lucide-trash', color: 'error', onSelect: () => toast.add({ title: 'Deleted', color: 'error' }) }
+  ]
+]
+
+const progress = ref(75)
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 p-4">
+    <div class="flex items-start justify-between">
+      <div>
+        <p class="text-sm text-muted">
+          Total revenue
+        </p>
+        <p class="text-2xl font-semibold text-highlighted">
+          $48,200
+        </p>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <UBadge color="success" variant="subtle" size="sm" icon="i-lucide-trending-up">
+          +12.5%
+        </UBadge>
+
+        <UDropdownMenu :items="items" :ui="{ content: 'w-44' }">
+          <UButton
+            icon="i-lucide-ellipsis-vertical"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            square
+            aria-label="Actions"
+          />
+        </UDropdownMenu>
+      </div>
+    </div>
+
+    <div class="space-y-1.5">
+      <div class="flex items-center justify-between text-sm">
+        <span class="text-muted">Monthly goal</span>
+        <span class="font-medium text-highlighted">{{ progress }}%</span>
+      </div>
+      <UProgress v-model="progress" size="sm" />
+    </div>
+
+    <USeparator />
+
+    <div class="flex items-center justify-between">
+      <UAvatarGroup size="xs">
+        <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" loading="lazy" />
+        <UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" loading="lazy" />
+        <UAvatar src="https://github.com/noook.png" alt="Neil Richter" loading="lazy" />
+      </UAvatarGroup>
+      <span class="text-xs text-muted">+8 active now</span>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundEmpty.vue b/docs/app/components/playground/PlaygroundEmpty.vue
new file mode 100644
index 0000000000..aab4ce979a
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundEmpty.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="flex items-center justify-center p-6 h-full">
+    <UEmpty
+      icon="i-lucide-landmark"
+      title="Connect your bank"
+      description="Link your account to receive monthly payouts automatically."
+      :actions="[{ label: 'Set up payouts', icon: 'i-lucide-plug-zap' }]"
+    />
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundGoal.vue b/docs/app/components/playground/PlaygroundGoal.vue
new file mode 100644
index 0000000000..1ced36578e
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundGoal.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const percent = 80
+
+const ring = `conic-gradient(var(--ui-primary) ${percent}%, var(--ui-bg-accented) 0)`
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4 p-4">
+    <p class="self-start font-semibold text-highlighted">
+      Investment goal
+    </p>
+
+    <div class="relative size-32 rounded-full" :style="{ background: ring }">
+      <div class="absolute inset-3 rounded-full bg-default flex flex-col items-center justify-center">
+        <span class="text-xl font-semibold text-highlighted">$24k</span>
+        <span class="text-xs text-muted">{{ percent }}% of $30k</span>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between w-full text-sm">
+      <span class="text-muted">Projected finish</span>
+      <span class="font-medium text-highlighted">Oct 2026</span>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundInput.vue b/docs/app/components/playground/PlaygroundInput.vue
new file mode 100644
index 0000000000..5470765382
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundInput.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const email = ref('')
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 p-4">
+    <UFormField label="Your email" description="We won't share your email." required>
+      <UInput v-model="email" type="email" placeholder="john@example.com" icon="i-lucide-mail" class="w-full" />
+    </UFormField>
+
+    <UFormField label="Search" hint="⌘K">
+      <UInput placeholder="Search documentation…" icon="i-lucide-search" class="w-full">
+        <template #trailing>
+          <UKbd value="meta" />
+          <UKbd value="K" />
+        </template>
+      </UInput>
+    </UFormField>
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundInviteTeam.vue b/docs/app/components/playground/PlaygroundInviteTeam.vue
new file mode 100644
index 0000000000..2dac25c04c
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundInviteTeam.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+const toast = useToast()
+
+const roles = [
+  { label: 'Editor', value: 'editor' },
+  { label: 'Viewer', value: 'viewer' }
+]
+
+const members = ref([
+  { email: 'alex@example.com', role: 'editor' },
+  { email: 'sam@example.com', role: 'viewer' }
+])
+
+const link = 'https://app.nuxt.com/invite/x8f2k'
+</script>
+
+<template>
+  <div>
+    <div class="p-4 space-y-4">
+      <div>
+        <p class="font-semibold text-highlighted">
+          Invite your team
+        </p>
+        <p class="text-sm text-muted">
+          Add members to your workspace.
+        </p>
+      </div>
+
+      <div class="space-y-2">
+        <div v-for="(member, index) in members" :key="index" class="flex items-center gap-2">
+          <UInput v-model="member.email" type="email" class="flex-1" />
+          <USelect v-model="member.role" :items="roles" class="w-28" />
+        </div>
+      </div>
+
+      <USeparator label="Or share a link" />
+
+      <UInput :model-value="link" readonly class="w-full">
+        <template #trailing>
+          <UButton
+            icon="i-lucide-copy"
+            color="neutral"
+            variant="link"
+            size="xs"
+            aria-label="Copy link"
+            @click="toast.add({ title: 'Invite link copied' })"
+          />
+        </template>
+      </UInput>
+    </div>
+
+    <div class="flex justify-end border-t border-default p-3">
+      <UButton label="Send invites" @click="toast.add({ title: 'Invites sent' })" />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundNavigation.vue b/docs/app/components/playground/PlaygroundNavigation.vue
new file mode 100644
index 0000000000..eb6e2cc252
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundNavigation.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const items: NavigationMenuItem[][] = [
+  [
+    { label: 'Dashboard', icon: 'i-lucide-layout-dashboard', active: true },
+    { label: 'Inbox', icon: 'i-lucide-inbox', badge: '4' },
+    { label: 'Projects', icon: 'i-lucide-folder' },
+    { label: 'Calendar', icon: 'i-lucide-calendar' }
+  ],
+  [
+    { label: 'Settings', icon: 'i-lucide-settings' },
+    { label: 'Help', icon: 'i-lucide-circle-help' }
+  ]
+]
+</script>
+
+<template>
+  <div class="p-2">
+    <UNavigationMenu orientation="vertical" :items="items" class="w-full" />
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundNotifications.vue b/docs/app/components/playground/PlaygroundNotifications.vue
new file mode 100644
index 0000000000..6dca00a59a
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundNotifications.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const toast = useToast()
+
+const settings = ref({
+  transactions: true,
+  security: true,
+  marketing: false
+})
+</script>
+
+<template>
+  <div>
+    <div class="p-4 space-y-4">
+      <div>
+        <p class="font-semibold text-highlighted">
+          Notifications
+        </p>
+        <p class="text-sm text-muted">
+          Choose what you want to be notified about.
+        </p>
+      </div>
+
+      <div class="space-y-3">
+        <USwitch v-model="settings.transactions" label="Transaction alerts" description="Deposits, withdrawals and transfers." />
+        <USwitch v-model="settings.security" label="Security alerts" description="Login attempts and account changes." />
+        <USwitch v-model="settings.marketing" label="Marketing emails" description="Product news and occasional updates." />
+      </div>
+    </div>
+
+    <div class="flex justify-end border-t border-default p-3">
+      <UButton label="Save preferences" @click="toast.add({ title: 'Preferences saved' })" />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundPinInput.vue b/docs/app/components/playground/PlaygroundPinInput.vue
new file mode 100644
index 0000000000..50d768ac19
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundPinInput.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const value = ref<string[]>(['4', '3', '2'])
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-3 p-6 text-center">
+    <UIcon name="i-lucide-shield-check" class="size-7 text-primary" />
+
+    <div>
+      <p class="font-semibold text-highlighted">
+        Verify your account
+      </p>
+      <p class="text-sm text-muted">
+        Enter the 6-digit code we sent you.
+      </p>
+    </div>
+
+    <UPinInput v-model="value" :length="6" otp />
+
+    <p class="text-sm text-muted">
+      Didn't get a code? <UButton variant="link" size="sm" class="p-0" label="Resend" />
+    </p>
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundPrompt.vue b/docs/app/components/playground/PlaygroundPrompt.vue
new file mode 100644
index 0000000000..f3a29e4edc
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundPrompt.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+
+const toast = useToast()
+
+const input = ref('')
+const awsMarketplace = ref(true)
+const claudeInChrome = ref(true)
+const webSearch = ref(true)
+
+const items = computed<DropdownMenuItem[][]>(() => [
+  [
+    { label: 'Add files or photos', icon: 'i-lucide-paperclip', kbds: ['meta', 'U'] },
+    {
+      label: 'Add to project',
+      icon: 'i-lucide-folder',
+      children: [
+        { label: 'New project', icon: 'i-lucide-plus' },
+        { label: 'Nuxt UI', icon: 'i-lucide-folder' }
+      ]
+    }
+  ],
+  [
+    {
+      label: 'Skills',
+      icon: 'i-lucide-shapes',
+      children: [
+        { label: 'Canvas design', icon: 'i-lucide-palette' },
+        { label: 'Slides', icon: 'i-lucide-presentation' },
+        { label: 'PDF', icon: 'i-lucide-file-text' }
+      ]
+    },
+    {
+      label: 'Connectors',
+      icon: 'i-lucide-blocks',
+      children: [
+        [
+          { label: 'Add connector', icon: 'i-lucide-plus' },
+          { label: 'Manage connectors', icon: 'i-lucide-briefcase' }
+        ],
+        [
+          {
+            label: 'AWS Marketplace',
+            icon: 'i-simple-icons-amazon',
+            slot: 'switch',
+            checked: awsMarketplace.value,
+            onSelect(e: Event) {
+              e.preventDefault()
+              awsMarketplace.value = !awsMarketplace.value
+            }
+          },
+          {
+            label: 'Claude in Chrome',
+            icon: 'i-simple-icons-googlechrome',
+            slot: 'switch',
+            checked: claudeInChrome.value,
+            onSelect(e: Event) {
+              e.preventDefault()
+              claudeInChrome.value = !claudeInChrome.value
+            }
+          }
+        ],
+        [
+          { label: 'Tool access', icon: 'i-lucide-search' }
+        ]
+      ]
+    },
+    { label: 'Add plugins…', icon: 'i-lucide-plug' }
+  ],
+  [
+    { label: 'Ask Vercel', icon: 'i-simple-icons-vercel' },
+    { label: 'Research', icon: 'i-lucide-activity' },
+    {
+      label: 'Web search',
+      icon: 'i-lucide-globe',
+      type: 'checkbox',
+      checked: webSearch.value,
+      onUpdateChecked(checked: boolean) {
+        webSearch.value = checked
+      }
+    }
+  ]
+])
+
+function onSubmit() {
+  if (!input.value.trim()) return
+
+  toast.add({ title: 'Message sent', description: input.value })
+  input.value = ''
+}
+</script>
+
+<template>
+  <UChatPrompt
+    v-model="input"
+    variant="naked"
+    :rows="3"
+    autoresize
+    placeholder="Paste a doc, an email, or a question to get started"
+    :ui="{ root: 'rounded-none p-2.5', footer: 'pt-1' }"
+    @submit="onSubmit"
+  >
+    <template #footer>
+      <div class="flex items-center justify-between gap-2 w-full">
+        <div class="flex items-center gap-1">
+          <UDropdownMenu :items="items" :content="{ align: 'start', side: 'top' }" :ui="{ content: 'w-60' }">
+            <UButton
+              icon="i-lucide-plus"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              square
+              aria-label="Add content"
+            />
+
+            <template #switch-trailing="{ item }">
+              <USwitch :model-value="(item as DropdownMenuItem).checked" size="sm" tabindex="-1" />
+            </template>
+          </UDropdownMenu>
+
+          <UButton color="neutral" variant="ghost" size="sm" trailing-icon="i-lucide-chevron-down">
+            Opus 4.8 <span class="text-dimmed">High</span>
+          </UButton>
+        </div>
+
+        <div class="flex items-center gap-1">
+          <UButton
+            icon="i-lucide-mic"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            square
+            aria-label="Dictate"
+          />
+          <UButton
+            icon="i-lucide-audio-lines"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            square
+            aria-label="Voice mode"
+          />
+          <UButton
+            icon="i-lucide-arrow-up"
+            color="primary"
+            size="sm"
+            square
+            aria-label="Send"
+            @click="onSubmit"
+          />
+        </div>
+      </div>
+    </template>
+  </UChatPrompt>
+</template>
diff --git a/docs/app/components/playground/PlaygroundReportBug.vue b/docs/app/components/playground/PlaygroundReportBug.vue
new file mode 100644
index 0000000000..4fd3037009
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundReportBug.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const toast = useToast()
+
+const severities = [
+  { label: 'Low', value: 'low' },
+  { label: 'Medium', value: 'medium' },
+  { label: 'High', value: 'high' }
+]
+
+const components = [
+  { label: 'Dashboard', value: 'dashboard' },
+  { label: 'API', value: 'api' },
+  { label: 'Billing', value: 'billing' }
+]
+
+const title = ref('')
+const severity = ref('medium')
+const component = ref('dashboard')
+const steps = ref('')
+</script>
+
+<template>
+  <div>
+    <div class="p-4 space-y-4">
+      <div>
+        <p class="font-semibold text-highlighted">
+          Report a bug
+        </p>
+        <p class="text-sm text-muted">
+          Help us fix issues faster.
+        </p>
+      </div>
+
+      <UFormField label="Title">
+        <UInput v-model="title" placeholder="Brief description of the issue" class="w-full" />
+      </UFormField>
+
+      <div class="grid grid-cols-2 gap-3">
+        <UFormField label="Severity">
+          <USelect v-model="severity" :items="severities" class="w-full" />
+        </UFormField>
+        <UFormField label="Component">
+          <USelect v-model="component" :items="components" class="w-full" />
+        </UFormField>
+      </div>
+
+      <UFormField label="Steps to reproduce">
+        <UTextarea v-model="steps" :rows="3" placeholder="1. Go to… 2. Click on… 3. See error" class="w-full" />
+      </UFormField>
+    </div>
+
+    <div class="flex items-center justify-between border-t border-default p-3">
+      <UButton label="Attach file" icon="i-lucide-paperclip" color="neutral" variant="ghost" />
+      <UButton label="Submit bug" @click="toast.add({ title: 'Bug reported' })" />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundSavingsTargets.vue b/docs/app/components/playground/PlaygroundSavingsTargets.vue
new file mode 100644
index 0000000000..214e04d92b
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundSavingsTargets.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const targets = [
+  { label: 'Retirement', amount: '$420,000', value: 65 },
+  { label: 'Real estate', amount: '$85,000', value: 32 }
+]
+</script>
+
+<template>
+  <div class="p-4 space-y-4">
+    <div>
+      <p class="font-semibold text-highlighted">
+        Savings targets
+      </p>
+      <p class="text-sm text-muted">
+        Active milestones for 2026.
+      </p>
+    </div>
+
+    <div v-for="target in targets" :key="target.label" class="space-y-2">
+      <div class="flex items-baseline justify-between">
+        <span class="text-xs uppercase tracking-wide text-muted">{{ target.label }}</span>
+        <span class="text-xs text-muted">{{ target.value }}% achieved</span>
+      </div>
+      <p class="text-xl font-semibold text-highlighted">
+        {{ target.amount }}
+      </p>
+      <UProgress :model-value="target.value" size="sm" />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundShortcuts.vue b/docs/app/components/playground/PlaygroundShortcuts.vue
new file mode 100644
index 0000000000..c997147de1
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundShortcuts.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const shortcuts = [
+  { label: 'Search', keys: ['meta', 'K'] },
+  { label: 'Quick actions', keys: ['meta', 'J'] },
+  { label: 'New file', keys: ['meta', 'N'] },
+  { label: 'Save', keys: ['meta', 'S'] },
+  { label: 'Toggle sidebar', keys: ['meta', 'B'] }
+]
+</script>
+
+<template>
+  <div>
+    <div class="p-4">
+      <p class="font-semibold text-highlighted">
+        Shortcuts
+      </p>
+      <p class="text-sm text-muted">
+        Work faster with the keyboard.
+      </p>
+    </div>
+
+    <USeparator />
+
+    <ul class="divide-y divide-default">
+      <li v-for="shortcut in shortcuts" :key="shortcut.label" class="flex items-center justify-between px-4 py-2.5">
+        <span class="text-sm text-default">{{ shortcut.label }}</span>
+        <div class="flex gap-1">
+          <UKbd v-for="key in shortcut.keys" :key="key" :value="key" />
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundTabs.vue b/docs/app/components/playground/PlaygroundTabs.vue
new file mode 100644
index 0000000000..1080d5c0b4
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundTabs.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Account',
+    icon: 'i-lucide-user',
+    slot: 'account'
+  },
+  {
+    label: 'Password',
+    icon: 'i-lucide-lock',
+    slot: 'password'
+  }
+]
+
+const state = reactive({
+  name: 'Benjamin Canac',
+  username: 'benjamincanac',
+  currentPassword: '',
+  newPassword: ''
+})
+</script>
+
+<template>
+  <div class="p-4">
+    <UTabs :items="items" class="w-full">
+      <template #account>
+        <UForm :state="state" class="flex flex-col gap-4">
+          <UFormField label="Name" name="name">
+            <UInput v-model="state.name" class="w-full" />
+          </UFormField>
+          <UFormField label="Username" name="username">
+            <UInput v-model="state.username" class="w-full" />
+          </UFormField>
+        </UForm>
+      </template>
+
+      <template #password>
+        <UForm :state="state" class="flex flex-col gap-4">
+          <UFormField label="Current Password" name="current" required>
+            <UInput v-model="state.currentPassword" type="password" required class="w-full" />
+          </UFormField>
+          <UFormField label="New Password" name="new" required>
+            <UInput v-model="state.newPassword" type="password" required class="w-full" />
+          </UFormField>
+        </UForm>
+      </template>
+    </UTabs>
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundTransactions.vue b/docs/app/components/playground/PlaygroundTransactions.vue
new file mode 100644
index 0000000000..203633dbc4
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundTransactions.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+const transactions = [
+  { name: 'Stripe Payout', category: 'Income', icon: 'i-lucide-arrow-down-left', amount: 2400.00 },
+  { name: 'Blue Bottle Coffee', category: 'Food & Drink', icon: 'i-lucide-coffee', amount: -8.50 },
+  { name: 'Whole Foods Market', category: 'Groceries', icon: 'i-lucide-shopping-cart', amount: -64.20 },
+  { name: 'Netflix', category: 'Entertainment', icon: 'i-lucide-clapperboard', amount: -19.99 }
+]
+
+function format(amount: number) {
+  return `${amount < 0 ? '-' : '+'}$${Math.abs(amount).toFixed(2)}`
+}
+</script>
+
+<template>
+  <div>
+    <div class="p-4">
+      <p class="font-semibold text-highlighted">
+        Recent transactions
+      </p>
+      <p class="text-sm text-muted">
+        Your latest account activity.
+      </p>
+    </div>
+
+    <USeparator />
+
+    <ul class="divide-y divide-default">
+      <li v-for="transaction in transactions" :key="transaction.name" class="flex items-center gap-3 px-4 py-2.5">
+        <div class="flex items-center justify-center size-8 rounded-full bg-elevated text-muted shrink-0">
+          <UIcon :name="transaction.icon" class="size-4" />
+        </div>
+        <div class="min-w-0 flex-1">
+          <p class="text-sm font-medium text-highlighted truncate">
+            {{ transaction.name }}
+          </p>
+          <p class="text-xs text-muted truncate">
+            {{ transaction.category }}
+          </p>
+        </div>
+        <span class="text-sm font-medium" :class="transaction.amount < 0 ? 'text-highlighted' : 'text-success'">
+          {{ format(transaction.amount) }}
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundTransferFunds.vue b/docs/app/components/playground/PlaygroundTransferFunds.vue
new file mode 100644
index 0000000000..a936f02013
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundTransferFunds.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const toast = useToast()
+
+const accounts = [
+  { label: 'Main Checking •8402', value: 'checking' },
+  { label: 'High Yield Savings •1192', value: 'savings' }
+]
+
+const amount = ref(1200)
+const from = ref('checking')
+const to = ref('savings')
+</script>
+
+<template>
+  <div>
+    <div class="p-4 space-y-4">
+      <div>
+        <p class="font-semibold text-highlighted">
+          Transfer funds
+        </p>
+        <p class="text-sm text-muted">
+          Move money between your accounts.
+        </p>
+      </div>
+
+      <UFormField label="Amount">
+        <UInputNumber v-model="amount" :format-options="{ style: 'currency', currency: 'USD' }" class="w-full" />
+      </UFormField>
+
+      <UFormField label="From">
+        <USelect v-model="from" :items="accounts" class="w-full" />
+      </UFormField>
+
+      <UFormField label="To">
+        <USelect v-model="to" :items="accounts" class="w-full" />
+      </UFormField>
+
+      <div class="space-y-1.5 text-sm">
+        <div class="flex justify-between">
+          <span class="text-muted">Estimated arrival</span>
+          <span class="font-medium text-highlighted">Today</span>
+        </div>
+        <div class="flex justify-between">
+          <span class="text-muted">Transaction fee</span>
+          <span class="font-medium text-highlighted">$0.00</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex justify-end border-t border-default p-3">
+      <UButton label="Confirm transfer" @click="toast.add({ title: 'Transfer confirmed' })" />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/playground/PlaygroundTypography.vue b/docs/app/components/playground/PlaygroundTypography.vue
new file mode 100644
index 0000000000..ddc6c3fe52
--- /dev/null
+++ b/docs/app/components/playground/PlaygroundTypography.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="p-4 space-y-3">
+    <p class="text-xs uppercase tracking-widest text-muted">
+      Type scale
+    </p>
+
+    <h3 class="text-xl font-semibold text-highlighted leading-tight">
+      Designing with rhythm &amp; hierarchy
+    </h3>
+
+    <p class="text-sm text-muted leading-relaxed">
+      A strong body style keeps long-form content readable and balances the visual weight of headings.
+    </p>
+
+    <div class="flex items-baseline justify-between text-highlighted pt-1">
+      <span class="font-light">Light</span>
+      <span class="font-normal">Regular</span>
+      <span class="font-medium">Medium</span>
+      <span class="font-semibold">Semibold</span>
+      <span class="font-bold">Bold</span>
+    </div>
+
+    <div class="flex gap-1.5 pt-1">
+      <span class="size-6 rounded-md bg-primary" />
+      <span class="size-6 rounded-md bg-elevated" />
+      <span class="size-6 rounded-md bg-accented" />
+      <span class="size-6 rounded-md bg-inverted" />
+      <span class="size-6 rounded-md ring ring-default" />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index ebc8ce8954..413a323779 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -70,7 +70,7 @@ const settingGroups = [
             fullscreen ? 'rounded-none' : 'ring ring-default mt-4 rounded-lg'
           ]"
         >
-          <ThemeStudioBento v-if="view === 'grid'" />
+          <Playground v-if="view === 'grid'" class="py-4" />
           <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
           <ThemeStudioViewChat v-else-if="view === 'chat'" />
           <ThemeStudioViewSaas v-else-if="view === 'saas'" />

From 25d257e45c44159667a7cec5c79056e46d0aa766 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Thu, 9 Jul 2026 20:18:23 +0200
Subject: [PATCH 106/185] fix(docs): fullscreen toolbar gets container
 max-width and a taller reveal zone

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/pages/theme.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 413a323779..85d0759a58 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -80,15 +80,16 @@ const settingGroups = [
 
         <!-- One toolbar at the bottom: history leftmost, presets and
              setting-group popovers, document actions on the right. In
-             fullscreen it floats over the bottom edge, peeking a few
-             pixels until hovered (Esc still exits); only a thin strip
-             catches the pointer so the preview stays clickable. -->
+             fullscreen it floats over the bottom edge at the normal
+             container width, peeking a few pixels until the pointer
+             nears the bottom (Esc still exits); only that strip catches
+             the pointer so the preview stays clickable. -->
         <div :class="fullscreen ? 'group fixed bottom-0 inset-x-0 z-50 pointer-events-none' : 'shrink-0'">
-          <div v-if="fullscreen" class="absolute bottom-0 inset-x-0 h-2.5 pointer-events-auto" />
+          <div v-if="fullscreen" class="absolute bottom-0 inset-x-0 h-8 pointer-events-auto" />
 
           <div
             class="flex items-center gap-2 py-3 overflow-x-auto"
-            :class="fullscreen && 'm-4 px-4 rounded-lg bg-default ring ring-default shadow-lg pointer-events-auto translate-y-[calc(100%+6px)] group-hover:translate-y-0 group-focus-within:translate-y-0 transition-transform duration-200'"
+            :class="fullscreen && 'my-4 mx-auto w-[calc(100%-2rem)] max-w-(--ui-container) px-4 rounded-lg bg-default ring ring-default shadow-lg pointer-events-auto translate-y-[calc(100%+6px)] group-hover:translate-y-0 group-focus-within:translate-y-0 transition-transform duration-200'"
           >
             <UFieldGroup size="sm">
               <UTooltip text="Undo" :kbds="['meta', 'Z']">

From 74fd8d0e06c1fba64eaa95761a9c31a3f141ecbb Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Thu, 9 Jul 2026 20:23:28 +0200
Subject: [PATCH 107/185] fix(docs): adjust studio menu popover width for
 improved layout

Updated the popover UI settings in the header component to reduce the viewport and content width from 16rem to 12rem, enhancing the overall layout and usability of the studio menu.
---
 docs/app/components/header/Header.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index c9efb13680..28e312a8c6 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -87,7 +87,7 @@ const studioMenuLinks = [{
       :items="studioMenu"
       variant="link"
       content-orientation="vertical"
-      :ui="{ viewportWrapper: 'w-[16rem]', content: 'w-[16rem]' }"
+      :ui="{ viewportWrapper: 'w-[12rem]', content: 'w-[12rem]' }"
     >
       <template #list-leading>
         <UTabs

From 7e5359b693dfcd79e636a656d2294b7e30c74599 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Thu, 9 Jul 2026 20:36:03 +0200
Subject: [PATCH 108/185] feat(docs): palette curve editors get a live 2D color
 field background
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each tab plots the curve over the colors it can reach: columns follow
the ramp, rows sweep the edited channel across its window while the
other two channels track the live curves — real engine samples, gamut
clamp included, tiled as one vertical SVG gradient per column (CSS has
no two-axis gradients; blend-mode tricks would mix in sRGB and lie
about oklch). The field bleeds to the canvas edges while its value
mapping stays pinned to the padded plot via userSpaceOnUse gradients.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioCurveEditor.vue   | 50 +++++++++++++++++++
 .../theme-studio/ThemeStudioPaletteEditor.vue | 32 +++++++++++-
 2 files changed, 81 insertions(+), 1 deletion(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
index a1a2da8475..f74a79af86 100644
--- a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
@@ -8,6 +8,13 @@ const props = defineProps<{
   yMax: number
   /** Fill colors for the 11 stop dots along the curve */
   stopColors?: string[]
+  /**
+   * 2D color field behind the plot: one entry per column (ramp position),
+   * each an array of colors sampled top (yMax) to bottom (yMin). SVG can't
+   * do two-axis gradients, but a vertical gradient per column tiles into
+   * one — showing exactly what dragging the curve at that x would produce.
+   */
+  field?: string[][]
 }>()
 
 const curve = defineModel<ChannelCurve>({ required: true })
@@ -21,6 +28,9 @@ const W = 200
 const H = 180
 const PAD = 10
 
+/** Unique per instance — primary and neutral editors can be open at once. */
+const gradientId = useId()
+
 function toX(x: number) {
   return PAD + x * (W - 2 * PAD)
 }
@@ -136,6 +146,46 @@ function onPointerUp(event: PointerEvent) {
     @pointerup="onPointerUp"
     @pointercancel="onPointerUp"
   >
+    <!-- the channel's reachable colors behind the plot: the curve sits on
+         the exact color each (position, value) point would produce. The
+         field bleeds to the canvas edges, but its value mapping stays
+         pinned to the padded plot (userSpaceOnUse + pad spread), so the
+         curve/color correspondence is exact. -->
+    <template v-if="field?.length">
+      <defs>
+        <linearGradient
+          v-for="(column, columnIndex) in field"
+          :id="`${gradientId}-${columnIndex}`"
+          :key="columnIndex"
+          gradientUnits="userSpaceOnUse"
+          :x1="0"
+          :y1="PAD"
+          :x2="0"
+          :y2="H - PAD"
+          spreadMethod="pad"
+        >
+          <stop
+            v-for="(color, rowIndex) in column"
+            :key="rowIndex"
+            :offset="`${(rowIndex / (column.length - 1)) * 100}%`"
+            :stop-color="color"
+          />
+        </linearGradient>
+      </defs>
+
+      <g opacity="0.75">
+        <rect
+          v-for="(column, columnIndex) in field"
+          :key="`column-${columnIndex}`"
+          :x="columnIndex === 0 ? 0 : PAD + (columnIndex / field.length) * (W - 2 * PAD)"
+          :y="0"
+          :width="(W - 2 * PAD) / field.length + 0.5 + (columnIndex === 0 || columnIndex === field.length - 1 ? PAD : 0)"
+          :height="H"
+          :fill="`url(#${gradientId}-${columnIndex})`"
+        />
+      </g>
+    </template>
+
     <!-- grid -->
     <line
       v-for="fraction in [0.25, 0.5, 0.75]"
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 62c7971b53..482ddf6055 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useThrottleFn, watchIgnorable } from '@vueuse/core'
-import { SHADES, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, generatePalette, fitPalette } from '../../utils/theme-engine'
+import { SHADES, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, generatePalette, fitPalette, sampleCurve, clampToGamut, formatOklch } from '../../utils/theme-engine'
 import type { PaletteCurveParams, ColorAlias } from '../../utils/theme-engine'
 
 const props = defineProps<{
@@ -48,6 +48,35 @@ const windows = {
   hue: { min: 0, max: 360 }
 }
 
+/**
+ * The color field behind the active tab's curve: columns follow the ramp,
+ * rows sweep the edited channel across its window (top = max) while the
+ * other two channels track the live curves — each point shows the color
+ * that dragging the curve there would produce, gamut clamp included.
+ */
+const FIELD_COLUMNS = 16
+const FIELD_ROWS = 12
+const CHANNEL_KEYS = { lightness: 'l', chroma: 'c', hue: 'h' } as const
+
+const field = computed(() => {
+  const channel = tab.value
+  const { min, max } = windows[channel]
+
+  return Array.from({ length: FIELD_COLUMNS }, (_, columnIndex) => {
+    const x = (columnIndex + 0.5) / FIELD_COLUMNS
+    const base = {
+      l: sampleCurve(x, params.lightness),
+      c: Math.max(0, sampleCurve(x, params.chroma)),
+      h: sampleCurve(x, params.hue)
+    }
+
+    return Array.from({ length: FIELD_ROWS }, (_, rowIndex) => {
+      const value = max - (rowIndex / (FIELD_ROWS - 1)) * (max - min)
+      return formatOklch(clampToGamut({ ...base, [CHANNEL_KEYS[channel]]: value }))
+    })
+  })
+})
+
 function normalizeHue(values: PaletteCurveParams) {
   const points = [values.hue.y0, values.hue.y1, values.hue.p1y, values.hue.p2y]
   const mean = points.reduce((sum, value) => sum + value, 0) / points.length
@@ -235,6 +264,7 @@ function remove() {
             :y-min="windows[tab].min"
             :y-max="windows[tab].max"
             :stop-colors="stopColors"
+            :field="field"
             @drag-start="onDragStart"
             @drag-end="onDragEnd"
           />

From c57e93d7ce29f901d2a54a06388b27d639f2d409 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Thu, 9 Jul 2026 20:39:04 +0200
Subject: [PATCH 109/185] feat(docs): smooth the curve editor color field, drop
 the grid lines
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

24 columns through a horizontal-only feGaussianBlur — the vertical
axis is already a true gradient, so only the column steps needed
smoothing. Edge columns overhang the canvas so the blur has solid
color to sample at the borders. Blend-mode compositing was considered
and rejected: it mixes in sRGB and can't reproduce oklch chroma/hue
response or the gamut clamp.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioCurveEditor.vue   | 35 ++++++-------------
 .../theme-studio/ThemeStudioPaletteEditor.vue |  2 +-
 2 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
index f74a79af86..246c1670aa 100644
--- a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
@@ -171,43 +171,28 @@ function onPointerUp(event: PointerEvent) {
             :stop-color="color"
           />
         </linearGradient>
+
+        <!-- horizontal-only blur smooths the column steps (the vertical
+             axis is already a true gradient); the edge columns overhang
+             the canvas so the blur has solid color to sample there -->
+        <filter :id="`${gradientId}-smooth`" x="-5%" y="-5%" width="110%" height="110%">
+          <feGaussianBlur stdDeviation="3 0" />
+        </filter>
       </defs>
 
-      <g opacity="0.75">
+      <g opacity="0.75" :filter="`url(#${gradientId}-smooth)`">
         <rect
           v-for="(column, columnIndex) in field"
           :key="`column-${columnIndex}`"
-          :x="columnIndex === 0 ? 0 : PAD + (columnIndex / field.length) * (W - 2 * PAD)"
+          :x="columnIndex === 0 ? -8 : PAD + (columnIndex / field.length) * (W - 2 * PAD)"
           :y="0"
-          :width="(W - 2 * PAD) / field.length + 0.5 + (columnIndex === 0 || columnIndex === field.length - 1 ? PAD : 0)"
+          :width="(W - 2 * PAD) / field.length + 0.5 + (columnIndex === 0 || columnIndex === field.length - 1 ? PAD + 8 : 0)"
           :height="H"
           :fill="`url(#${gradientId}-${columnIndex})`"
         />
       </g>
     </template>
 
-    <!-- grid -->
-    <line
-      v-for="fraction in [0.25, 0.5, 0.75]"
-      :key="`v${fraction}`"
-      :x1="toX(fraction)"
-      :x2="toX(fraction)"
-      :y1="PAD"
-      :y2="H - PAD"
-      class="stroke-(--ui-border) opacity-40"
-      stroke-width="0.5"
-    />
-    <line
-      v-for="fraction in [0.25, 0.5, 0.75]"
-      :key="`h${fraction}`"
-      :x1="PAD"
-      :x2="W - PAD"
-      :y1="PAD + fraction * (H - 2 * PAD)"
-      :y2="PAD + fraction * (H - 2 * PAD)"
-      class="stroke-(--ui-border) opacity-40"
-      stroke-width="0.5"
-    />
-
     <!-- handle connectors -->
     <line
       :x1="toX(0)"
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 482ddf6055..6353da6e2a 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -54,7 +54,7 @@ const windows = {
  * other two channels track the live curves — each point shows the color
  * that dragging the curve there would produce, gamut clamp included.
  */
-const FIELD_COLUMNS = 16
+const FIELD_COLUMNS = 24
 const FIELD_ROWS = 12
 const CHANNEL_KEYS = { lightness: 'l', chroma: 'c', hue: 'h' } as const
 

From 6ed2a487533bfb6a16493096d7a62c5dc50aae06 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Thu, 9 Jul 2026 20:45:08 +0200
Subject: [PATCH 110/185] fix(docs): curve editor field columns align
 fence-post with the plot

Columns are sampled at i/(n-1) and drawn centered on that plot x, so
the endpoint colors sit directly under the endpoint controls; the
outer columns fill the margins to the canvas edges, overhanging
off-canvas so the blur keeps solid color at the borders.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioCurveEditor.vue   | 23 ++++++++++++++++---
 .../theme-studio/ThemeStudioPaletteEditor.vue |  5 +++-
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
index 246c1670aa..74422aa977 100644
--- a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
@@ -57,6 +57,23 @@ const path = computed(() => {
   return `M ${toX(0)} ${toY(c.y0)} C ${toX(c.p1x)} ${toY(c.p1y)}, ${toX(c.p2x)} ${toY(c.p2y)}, ${toX(1)} ${toY(c.y1)}`
 })
 
+/**
+ * Fence-post layout: column i is sampled at ramp x = i/(n-1) and drawn
+ * centered on that plot position, so the endpoint colors sit directly
+ * under the endpoint controls. The outer columns extend to the canvas
+ * edges (overhanging off-canvas so the blur has solid color to sample).
+ */
+const fieldRects = computed(() => {
+  if (!props.field?.length) return []
+  const n = props.field.length
+  const base = (W - 2 * PAD) / (n - 1)
+  return props.field.map((_, index) => {
+    const start = index === 0 ? -8 : PAD + (index - 0.5) * base
+    const end = index === n - 1 ? W + 8 : PAD + (index + 0.5) * base
+    return { x: start, width: end - start + 0.5 }
+  })
+})
+
 const stops = computed(() => SHADES.map((shade, index) => {
   const x = index / (SHADES.length - 1)
   return {
@@ -182,11 +199,11 @@ function onPointerUp(event: PointerEvent) {
 
       <g opacity="0.75" :filter="`url(#${gradientId}-smooth)`">
         <rect
-          v-for="(column, columnIndex) in field"
+          v-for="(rect, columnIndex) in fieldRects"
           :key="`column-${columnIndex}`"
-          :x="columnIndex === 0 ? -8 : PAD + (columnIndex / field.length) * (W - 2 * PAD)"
+          :x="rect.x"
           :y="0"
-          :width="(W - 2 * PAD) / field.length + 0.5 + (columnIndex === 0 || columnIndex === field.length - 1 ? PAD + 8 : 0)"
+          :width="rect.width"
           :height="H"
           :fill="`url(#${gradientId}-${columnIndex})`"
         />
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 6353da6e2a..780bffac34 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -62,8 +62,11 @@ const field = computed(() => {
   const channel = tab.value
   const { min, max } = windows[channel]
 
+  // Fence-post: column i is sampled AT ramp position i/(n-1) — the editor
+  // draws each column centered on that plot x, endpoints under the
+  // endpoint controls.
   return Array.from({ length: FIELD_COLUMNS }, (_, columnIndex) => {
-    const x = (columnIndex + 0.5) / FIELD_COLUMNS
+    const x = columnIndex / (FIELD_COLUMNS - 1)
     const base = {
       l: sampleCurve(x, params.lightness),
       c: Math.max(0, sampleCurve(x, params.chroma)),

From decb68e014e3b72cf42ee114fc1c17bbccc7ad6e Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Thu, 9 Jul 2026 20:47:36 +0200
Subject: [PATCH 111/185] fix(docs): playground prompt tile no longer steals
 focus on load

UChatPrompt autofocuses by default; the prompt sits at the bottom of
the masonry, so opening the grid scrolled straight past everything.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/components/playground/PlaygroundPrompt.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/app/components/playground/PlaygroundPrompt.vue b/docs/app/components/playground/PlaygroundPrompt.vue
index f3a29e4edc..4baf5d29c3 100644
--- a/docs/app/components/playground/PlaygroundPrompt.vue
+++ b/docs/app/components/playground/PlaygroundPrompt.vue
@@ -96,6 +96,7 @@ function onSubmit() {
     variant="naked"
     :rows="3"
     autoresize
+    :autofocus="false"
     placeholder="Paste a doc, an email, or a question to get started"
     :ui="{ root: 'rounded-none p-2.5', footer: 'pt-1' }"
     @submit="onSubmit"

From 7bbe30f394cdbb2151fcd8eab7ca5c243077a802 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Thu, 9 Jul 2026 20:54:49 +0200
Subject: [PATCH 112/185] feat(docs): slim theme popover on the header swatch
 button

Presets, quick primary/neutral pickers and a light/dark switch from
any page, with Open Theme Studio one click away (hidden on /theme
itself, where the studio already is).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/components/header/Header.vue         | 12 +---
 .../theme-studio/ThemeStudioPicker.vue        | 70 +++++++++++++++++++
 2 files changed, 71 insertions(+), 11 deletions(-)
 create mode 100644 docs/app/components/theme-studio/ThemeStudioPicker.vue

diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index 28e312a8c6..344e3ea9ab 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -124,17 +124,7 @@ const studioMenuLinks = [{
         />
       </UTooltip>
 
-      <UTooltip text="Theme Studio">
-        <UButton
-          icon="i-lucide-swatch-book"
-          color="neutral"
-          active-color="primary"
-          :active="route.path === '/theme'"
-          variant="ghost"
-          to="/theme"
-          aria-label="Open Theme Studio"
-        />
-      </UTooltip>
+      <ThemeStudioPicker />
 
       <UTooltip text="Open on GitHub" class="hidden lg:flex">
         <UButton
diff --git a/docs/app/components/theme-studio/ThemeStudioPicker.vue b/docs/app/components/theme-studio/ThemeStudioPicker.vue
new file mode 100644
index 0000000000..f303b62711
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioPicker.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+/**
+ * The header's slim theme popover: presets and quick color pickers for
+ * fast theming from any page, with the full studio one click away.
+ */
+const route = useRoute()
+const { track } = useAnalytics()
+
+const open = ref(false)
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    track('Theme Picker Opened')
+  }
+})
+
+const aliases = [
+  { alias: 'primary', label: 'Primary' },
+  { alias: 'neutral', label: 'Neutral' }
+] as const
+</script>
+
+<template>
+  <UPopover v-model:open="open" :ui="{ content: 'w-64 p-3 flex flex-col gap-3' }">
+    <UTooltip text="Theme">
+      <UButton
+        icon="i-lucide-swatch-book"
+        color="neutral"
+        active-color="primary"
+        :active="route.path === '/theme'"
+        :variant="open ? 'soft' : 'ghost'"
+        square
+        aria-label="Theme"
+      />
+    </UTooltip>
+
+    <template #content>
+      <div class="flex items-center justify-between gap-2">
+        <span class="text-xs font-semibold text-muted">Theme</span>
+
+        <UColorModeSwitch />
+      </div>
+
+      <ThemeStudioPresetMenu />
+
+      <div class="flex flex-col gap-2">
+        <div v-for="{ alias, label } in aliases" :key="alias" class="flex items-center gap-2">
+          <span class="text-xs text-muted w-14 shrink-0">{{ label }}</span>
+
+          <ThemeStudioColorMenu :alias="alias" class="flex-1 min-w-0" />
+        </div>
+      </div>
+
+      <template v-if="route.path !== '/theme'">
+        <USeparator />
+
+        <UButton
+          label="Open Theme Studio"
+          icon="i-lucide-swatch-book"
+          trailing-icon="i-lucide-arrow-right"
+          color="neutral"
+          variant="subtle"
+          block
+          to="/theme"
+          @click="open = false"
+        />
+      </template>
+    </template>
+  </UPopover>
+</template>

From 37cdb2ecc16eda804cf54bd01cfcf8729243ba6a Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Thu, 9 Jul 2026 21:06:11 +0200
Subject: [PATCH 113/185] fix(docs): preset menu names the applied preset
 across reloads, says Custom once edited

The active preset id persists to localStorage (cleared by every edit
path including primary/neutral swaps, and by resetTheme); the menu
label resolves after mount so hydration matches the server, and falls
back to Custom whenever the theme has changes that no preset explains.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioPresetMenu.vue    | 16 ++++++++++++-
 docs/app/composables/useTheme.ts              |  1 +
 docs/app/composables/useThemeStudio.ts        | 24 ++++++++++++++-----
 docs/app/utils/theme-keys.ts                  |  1 +
 4 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
index 00d7b5e8ef..39d56b9c1b 100644
--- a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
@@ -4,6 +4,14 @@ import type { ThemeDoc } from '../../utils/theme-engine'
 
 /** The presets dropdown (with per-preset color swatches) plus the shuffle die. */
 const { presets, activePreset, applyPreset, shuffle } = useThemeStudio()
+const { hasCSSChanges, hasConfigChanges } = useTheme()
+
+// The persisted preset (and any persisted edits) are client-only — resolve
+// the label after mount so hydration matches the server's fallback.
+const mounted = ref(false)
+onMounted(() => {
+  mounted.value = true
+})
 
 /** The preset's primary + neutral at 500, straight from its own document. */
 function presetSwatches(doc: ThemeDoc): string[] {
@@ -21,7 +29,13 @@ const presetItems = computed(() => presets.map(preset => ({
   onSelect: () => applyPreset(preset)
 })))
 
-const presetLabel = computed(() => presets.find(preset => preset.id === activePreset.value)?.name || 'Presets')
+/** The applied preset's name; 'Custom' once edits diverge from it. */
+const presetLabel = computed(() => {
+  if (!mounted.value) return 'Presets'
+  const active = presets.find(preset => preset.id === activePreset.value)
+  if (active) return active.name
+  return (hasCSSChanges.value || hasConfigChanges.value) ? 'Custom' : 'Presets'
+})
 </script>
 
 <template>
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 11fef7946f..586c2bc530 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -532,6 +532,7 @@ export function useTheme() {
     // reset button was pressed (popover, chat, or studio) — orphaned style
     // prefs would silently resurrect on the next style click or export.
     setStyleUi({})
+    window.localStorage.removeItem('nuxt-ui-preset')
     window.localStorage.removeItem('nuxt-ui-style')
     window.localStorage.removeItem('nuxt-ui-palette-params')
     window.localStorage.removeItem('nuxt-ui-palette-prev')
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index a28fbb19c1..9932fc7f3e 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -9,7 +9,17 @@ export function useThemeStudio() {
   const appConfig = useAppConfig()
   const { track } = useAnalytics()
 
-  const activePreset = useState<string | undefined>(THEME_STATE_KEYS.themePreset, () => undefined)
+  /** Persisted so the preset menu still names the applied preset after a reload. */
+  const activePreset = useState<string | undefined>(THEME_STATE_KEYS.themePreset, () => readLocalStorage(THEME_STORAGE_KEYS.preset, undefined))
+
+  function setActivePreset(id: string | undefined) {
+    activePreset.value = id
+    if (id) {
+      window.localStorage.setItem(THEME_STORAGE_KEYS.preset, JSON.stringify(id))
+    } else {
+      window.localStorage.removeItem(THEME_STORAGE_KEYS.preset)
+    }
+  }
 
   /** The studio modal — one instance mounted in the header, openable from anywhere. */
 
@@ -72,7 +82,7 @@ export function useThemeStudio() {
     if (Object.keys(tokens.light).length || Object.keys(tokens.dark).length) {
       theme.applyThemeSettings({ cssVariables: tokens }, { track: false })
     }
-    activePreset.value = undefined
+    setActivePreset(undefined)
 
     // Sliders stream through here at drag frequency — one event per burst.
     if (!trackedAt || Date.now() - trackedAt > 2000) {
@@ -133,15 +143,17 @@ export function useThemeStudio() {
 
     if (alias === 'primary') {
       theme.primary.value = name
+      setActivePreset(undefined)
     } else if (alias === 'neutral') {
       theme.neutral.value = name
       // Stock neutrals need the white-literal remaps too — without them the
       // preview (docs baseline: neutral-50 bg) diverges from the export
       // (library baseline: white bg) for every tinted ramp.
       theme.applyThemeSettings({ cssVariables: unownedNeutralRemaps() }, { track: false })
+      setActivePreset(undefined)
     } else {
       theme.applyThemeSettings({ [alias]: name }, { track: false })
-      activePreset.value = undefined
+      setActivePreset(undefined)
       track('Theme Changed', { setting: alias, value: name })
     }
   }
@@ -195,7 +207,7 @@ export function useThemeStudio() {
       ...(alias === 'neutral' ? { cssVariables: unownedNeutralRemaps() } : {})
     }, { track: false })
     setPaletteParams({ ...paletteParams.value, [alias]: params })
-    activePreset.value = undefined
+    setActivePreset(undefined)
 
     // Live drags call this at ~16Hz — one analytics event per burst is plenty.
     if (!trackedAt || Date.now() - trackedAt > 2000) {
@@ -278,7 +290,7 @@ export function useThemeStudio() {
 
   function applyPreset(preset: ThemePreset) {
     applyDoc(preset.doc)
-    activePreset.value = preset.id
+    setActivePreset(preset.id)
 
     track('Theme Preset Applied', { preset: preset.id })
   }
@@ -321,7 +333,7 @@ export function useThemeStudio() {
     }
 
     applyDoc(doc)
-    activePreset.value = undefined
+    setActivePreset(undefined)
 
     track('Theme Studio Shuffled')
   }
diff --git a/docs/app/utils/theme-keys.ts b/docs/app/utils/theme-keys.ts
index 88b76ee3fa..e6daeb3595 100644
--- a/docs/app/utils/theme-keys.ts
+++ b/docs/app/utils/theme-keys.ts
@@ -6,6 +6,7 @@
 
 /** localStorage keys the studio writes and useTheme/resetTheme also touch. */
 export const THEME_STORAGE_KEYS = {
+  preset: 'nuxt-ui-preset',
   style: 'nuxt-ui-style',
   styleUi: 'nuxt-ui-style-ui',
   paletteParams: 'nuxt-ui-palette-params',

From d7acb94376c304fcefe845100874f551c5c9316f Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Thu, 9 Jul 2026 21:48:09 +0200
Subject: [PATCH 114/185] feat(docs): shades fold into the Colors popover

A collapsed Shades row after Semantic keeps the advanced per-token
shade sliders one click away without crowding the color pickers; the
standalone Shades popover is gone from the toolbar.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 69 ++++++++++++-------
 docs/app/pages/theme.vue                      |  3 +-
 2 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 989e6af04e..1c6b623945 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -6,7 +6,7 @@ const appConfig = useAppConfig()
 
 /** Which settings group this instance renders — one popover per group. */
 defineProps<{
-  group: 'colors' | 'general' | 'style' | 'tokens'
+  group: 'colors' | 'general' | 'style'
 }>()
 
 const {
@@ -185,6 +185,9 @@ onMounted(() => {
 // One curve editor per alias, toggled by the edit icon next to each select.
 const paletteEditors = reactive<Record<string, boolean>>({})
 
+/** The Shades fold in the Colors group — advanced, so closed by default. */
+const shadesOpen = ref(false)
+
 const defaultSizeItems = [
   { label: 'Default', value: 'default' },
   { label: 'XS', value: 'xs' },
@@ -352,6 +355,46 @@ const shadowColor = computed({
             </div>
           </div>
         </ThemeStudioSection>
+
+        <USeparator />
+
+        <!-- Advanced per-token shade remapping — folded away so the common
+             color pickers stay front and center. -->
+        <UCollapsible v-model:open="shadesOpen">
+          <UButton
+            label="Shades"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            block
+            class="justify-between"
+            :trailing-icon="shadesOpen ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+          />
+
+          <template #content>
+            <div class="flex flex-col gap-2.5 pt-2.5">
+              <template v-for="(tokenGroup, index) in tokenGroups" :key="tokenGroup.key">
+                <USeparator v-if="index" />
+
+                <ThemeStudioSection :label="tokenGroup.label">
+                  <div class="flex flex-col gap-3">
+                    <div v-for="section in tokenGroup.sections" :key="section.token" class="flex flex-col gap-1.5">
+                      <span class="text-[11px] text-muted select-none">{{ section.label }}</span>
+
+                      <ThemeStudioShadeSlider
+                        v-for="(slider, modeName) in section.sliders"
+                        :key="modeName"
+                        v-model="slider.value"
+                        :mode="modeName"
+                        :chip="rampChip(section.ramp)"
+                      />
+                    </div>
+                  </div>
+                </ThemeStudioSection>
+              </template>
+            </div>
+          </template>
+        </UCollapsible>
       </div>
     </template>
 
@@ -520,30 +563,6 @@ const shadowColor = computed({
       </div>
     </template>
 
-    <template v-else-if="group === 'tokens'">
-      <div class="flex flex-col gap-2.5">
-        <template v-for="(tokenGroup, index) in tokenGroups" :key="tokenGroup.key">
-          <USeparator v-if="index" />
-
-          <ThemeStudioSection :label="tokenGroup.label">
-            <div class="flex flex-col gap-3">
-              <div v-for="section in tokenGroup.sections" :key="section.token" class="flex flex-col gap-1.5">
-                <span class="text-[11px] text-muted select-none">{{ section.label }}</span>
-
-                <ThemeStudioShadeSlider
-                  v-for="(slider, modeName) in section.sliders"
-                  :key="modeName"
-                  v-model="slider.value"
-                  :mode="modeName"
-                  :chip="rampChip(section.ramp)"
-                />
-              </div>
-            </div>
-          </ThemeStudioSection>
-        </template>
-      </div>
-    </template>
-
     <template v-else-if="group === 'general'">
       <div class="flex flex-col gap-2.5">
         <ThemeStudioSection label="Font" help-to="/docs/getting-started/integrations/fonts">
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 85d0759a58..5db64c820e 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -48,8 +48,7 @@ onUnmounted(() => {
 const settingGroups = [
   { label: 'Colors', value: 'colors' },
   { label: 'General', value: 'general' },
-  { label: 'Style', value: 'style' },
-  { label: 'Shades', value: 'tokens' }
+  { label: 'Style', value: 'style' }
 ] as const
 </script>
 

From af1bcde6c3f6eeb912af90e8a570526cff21aa70 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Thu, 9 Jul 2026 21:54:51 +0200
Subject: [PATCH 115/185] fix(docs): CodeRabbit review pass
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- frameSolids setter migrates the legacy border:'frame' encoding so the
  switch can turn off
- resetTheme uses the centralized THEME_STORAGE_KEYS/THEME_STATE_KEYS
- history capture adopts (not parses) an empty baseline; the page clears
  its debounce timer on unmount
- fitPalette returns stock curves for unparseable input instead of
  crashing fitCurve
- style self-heal retries after a throwing expansion; analytics throttle
  state shared across composable instances
- A11y contrast recompute queues one tick at a time; plan doc fences get
  language specifiers

Skipped: the export config JSON-to-JS regex (closed vocabulary — no
single quotes can reach it).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 THEME_STUDIO_PLAN.md                          |  4 ++--
 .../theme-studio/ThemeStudioControls.vue      |  7 +++++-
 .../theme-studio/ThemeStudioViewA11y.vue      |  7 ++++++
 docs/app/composables/useTheme.ts              | 12 +++++-----
 docs/app/composables/useThemeStudio.ts        | 24 ++++++++++++-------
 docs/app/composables/useThemeStudioHistory.ts |  6 +++++
 docs/app/pages/theme.vue                      |  4 +++-
 docs/app/utils/theme-engine/palette.ts        |  6 +++++
 8 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/THEME_STUDIO_PLAN.md b/THEME_STUDIO_PLAN.md
index 6cd4a11f20..6b74653660 100644
--- a/THEME_STUDIO_PLAN.md
+++ b/THEME_STUDIO_PLAN.md
@@ -123,7 +123,7 @@ full viewport; the docs chrome (aside, toc) doesn't apply.
 
 **Layout** — three zones:
 
-```
+```text
 ┌──────────────────────────────────────────────────────────────┐
 │ Presets ▾   🎲 Shuffle   [locks]        Share ⧉  Export ⬇  ↺ │
 ├───────────────┬──────────────────────────────────────────────┤
@@ -256,7 +256,7 @@ Routing table (each ThemeDoc field has exactly one export medium):
 
 ## 6. Architecture & repo layout
 
-```
+```text
 docs/app/
   utils/theme-engine/          # pure TS, unit-tested (vitest)
     schema.ts                  # ThemeDoc types + zod-ish validation + version migration
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 1c6b623945..76fba420cd 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -73,7 +73,12 @@ const borderWidth = computed({
 // Outline solid/soft surfaces too — the neobrutalist frame look.
 const frameSolids = computed({
   get: () => !!style.value.frame || style.value.border === 'frame',
-  set: (value: boolean) => setStyle({ frame: value })
+  // Migrate the legacy border: 'frame' encoding on write — otherwise the
+  // getter keeps reading true and the switch can never turn off.
+  set: (value: boolean) => setStyle({
+    frame: value,
+    border: style.value.border === 'frame' ? 'custom' : style.value.border
+  })
 })
 
 const borderColorItems = [
diff --git a/docs/app/components/theme-studio/ThemeStudioViewA11y.vue b/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
index 5f69393710..39b64a2f2b 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
@@ -83,9 +83,16 @@ const { cssVariablesData, customColorsData } = useTheme()
 // then two frames so the new sheets are applied before reading computed
 // styles — deterministic, unlike a wall-clock delay.
 let pending = 0
+let queued = false
 function scheduleCompute() {
   cancelAnimationFrame(pending)
+  // One queued tick at a time — rapid changes (curve drags) would otherwise
+  // stack nextTick callbacks, each spawning its own rAF chain into the
+  // layout-reading compute().
+  if (queued) return
+  queued = true
   nextTick(() => {
+    queued = false
     pending = requestAnimationFrame(() => {
       pending = requestAnimationFrame(compute)
     })
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 586c2bc530..1557c045d6 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -532,12 +532,12 @@ export function useTheme() {
     // reset button was pressed (popover, chat, or studio) — orphaned style
     // prefs would silently resurrect on the next style click or export.
     setStyleUi({})
-    window.localStorage.removeItem('nuxt-ui-preset')
-    window.localStorage.removeItem('nuxt-ui-style')
-    window.localStorage.removeItem('nuxt-ui-palette-params')
-    window.localStorage.removeItem('nuxt-ui-palette-prev')
-    useState<Record<string, any>>('nuxt-ui-style-prefs').value = {}
-    useState<string | undefined>('nuxt-ui-theme-preset').value = undefined
+    window.localStorage.removeItem(THEME_STORAGE_KEYS.preset)
+    window.localStorage.removeItem(THEME_STORAGE_KEYS.style)
+    window.localStorage.removeItem(THEME_STORAGE_KEYS.paletteParams)
+    window.localStorage.removeItem(THEME_STORAGE_KEYS.palettePrev)
+    useState<Record<string, any>>(THEME_STATE_KEYS.stylePrefs).value = {}
+    useState<string | undefined>(THEME_STATE_KEYS.themePreset).value = undefined
 
     if (import.meta.client) {
       document.getElementById(THEME_TAG_IDS.cssVariables)?.replaceChildren()
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 9932fc7f3e..14b800387d 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -50,13 +50,21 @@ export function useThemeStudio() {
   const healed = useState('nuxt-ui-style-healed', () => false)
   if (import.meta.client && !healed.value) {
     healed.value = true
-    const expected = styleComponents(style.value)
-    if (JSON.stringify(expected) !== JSON.stringify(readLocalStorage(THEME_STORAGE_KEYS.styleUi, {}))) {
-      onNuxtReady(() => theme.setStyleUi(expected))
+    try {
+      const expected = styleComponents(style.value)
+      if (JSON.stringify(expected) !== JSON.stringify(readLocalStorage(THEME_STORAGE_KEYS.styleUi, {}))) {
+        onNuxtReady(() => theme.setStyleUi(expected))
+      }
+    } catch {
+      // A throwing expansion (corrupt persisted style) shouldn't permanently
+      // disable healing — retry on the next load.
+      healed.value = false
     }
   }
 
-  let trackedAt: number | undefined
+  // Shared across composable instances so the analytics throttle holds no
+  // matter which component fires the event.
+  const trackedAt = useState<number | undefined>('nuxt-ui-style-tracked-at', () => undefined)
 
   function setStyle(options: StyleOptions) {
     const previousStyle = style.value
@@ -85,8 +93,8 @@ export function useThemeStudio() {
     setActivePreset(undefined)
 
     // Sliders stream through here at drag frequency — one event per burst.
-    if (!trackedAt || Date.now() - trackedAt > 2000) {
-      trackedAt = Date.now()
+    if (!trackedAt.value || Date.now() - trackedAt.value > 2000) {
+      trackedAt.value = Date.now()
       track('Theme Style Changed', {
         shadow: style.value.shadow || 'none',
         border: style.value.border || 'default',
@@ -210,8 +218,8 @@ export function useThemeStudio() {
     setActivePreset(undefined)
 
     // Live drags call this at ~16Hz — one analytics event per burst is plenty.
-    if (!trackedAt || Date.now() - trackedAt > 2000) {
-      trackedAt = Date.now()
+    if (!trackedAt.value || Date.now() - trackedAt.value > 2000) {
+      trackedAt.value = Date.now()
       track('Theme Custom Palette', { alias })
     }
   }
diff --git a/docs/app/composables/useThemeStudioHistory.ts b/docs/app/composables/useThemeStudioHistory.ts
index ad008383ae..b36b4bbb8f 100644
--- a/docs/app/composables/useThemeStudioHistory.ts
+++ b/docs/app/composables/useThemeStudioHistory.ts
@@ -30,6 +30,12 @@ export function useThemeStudioHistory() {
       return
     }
     if (snapshot === lastSnapshot.value) return
+    // No baseline yet (capture before the page's mount align) — adopt
+    // rather than record: JSON.parse('') would throw.
+    if (!lastSnapshot.value) {
+      lastSnapshot.value = snapshot
+      return
+    }
     past.value.push(JSON.parse(lastSnapshot.value))
     if (past.value.length > 50) past.value.shift()
     future.value = []
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 5db64c820e..d49b2d9403 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -40,9 +40,11 @@ defineShortcuts({
 })
 
 // The fullscreen state is app-level (the site header gates on it) — never
-// let it leak past the studio.
+// let it leak past the studio. The pending capture dies with the page too,
+// or it would record against a baseline the next mount is about to reset.
 onUnmounted(() => {
   fullscreen.value = false
+  clearTimeout(captureTimeout)
 })
 
 const settingGroups = [
diff --git a/docs/app/utils/theme-engine/palette.ts b/docs/app/utils/theme-engine/palette.ts
index f7f8c7976c..285899e916 100644
--- a/docs/app/utils/theme-engine/palette.ts
+++ b/docs/app/utils/theme-engine/palette.ts
@@ -184,6 +184,12 @@ export function fitPalette(shades: Partial<Record<Shade, string>>): PaletteCurve
     }
   }
 
+  // Nothing parseable to fit — fall back to the stock curves rather than
+  // letting fitCurve([]) throw.
+  if (!stops.length) {
+    return structuredClone(CURVE_DEFAULTS)
+  }
+
   // Hue is noise below ~0.01 chroma — borrow the nearest chromatic stop.
   const chromatic = stops.filter(stop => stop.color.c >= 0.01)
   const hues = stops.map((stop) => {

From c83fd13d17c35b82bc790fc04662c70c56636e4a Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Thu, 9 Jul 2026 22:19:23 +0200
Subject: [PATCH 116/185] =?UTF-8?q?fix(docs):=20adversarial=20review=20pas?=
 =?UTF-8?q?s=20=E2=80=94=20history,=20fullscreen,=20palette=20and=20import?=
 =?UTF-8?q?=20hardening?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

History: undo/redo move the baseline synchronously (a second click
inside the debounce window dropped a state and duplicated redo
entries); align() invalidates the stacks when the theme changed while
no watcher was mounted; unmount flushes the pending capture instead of
dropping it.

Fullscreen: Esc leaves defineShortcuts (whose unconditional
preventDefault stopped every Reka layer on the page from closing) for
a plain listener that defers to visible dismissable layers — one press
closes the popover, the next exits. The toolbar reveal is proximity-
driven instead of an invisible click-eating overlay, and pins open
while any of its panels is open (their content portals to body, so
hover/focus-within alone retracted the bar under its own popovers).

Palette: the hue window stretches at seed to cover seam-crossing fits
(grabbing an out-of-window handle snapped the color); pointercancel no
longer throws through releasePointerCapture and strands the dragging
class; generatePalette clamps lightness (gamut clamp only searches
chroma); fitCurve survives empty input.

Engine: import puts style variables it cannot express back into the
token channel instead of silently destroying them (with a regression
test); picking Default on a per-group variant under an app-wide
variant now explodes the app-wide value into the other groups so it
actually wins; shadeSlider tolerates single-mode shade objects;
resetTheme clears the in-memory palette params it already cleared from
storage.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 33 +++++++++-
 .../theme-studio/ThemeStudioCurveEditor.vue   |  7 +-
 .../theme-studio/ThemeStudioPaletteEditor.vue | 13 +++-
 .../theme-studio/ThemeStudioPresetMenu.vue    |  4 ++
 docs/app/composables/useTheme.ts              |  3 +
 docs/app/composables/useThemeStudio.ts        |  1 +
 docs/app/composables/useThemeStudioHistory.ts | 21 +++++-
 docs/app/pages/theme.vue                      | 64 ++++++++++++++++---
 docs/app/utils/theme-engine/import.ts         | 39 ++++++++++-
 docs/app/utils/theme-engine/palette.ts        |  9 ++-
 test/utils/theme-import.spec.ts               | 21 ++++++
 11 files changed, 193 insertions(+), 22 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 76fba420cd..23791d4bd3 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -106,7 +106,10 @@ const shadowColorItems = [
 // ONLY the touched mode so an untouched mode never becomes an override.
 function shadeSlider(field: 'shadowShade' | 'innerShadowShade' | 'borderShade', defaults: { light: number, dark: number }, target: 'light' | 'dark') {
   return computed({
-    get: () => SHADES.indexOf((style.value[field] || defaults)[target] as typeof SHADES[number]),
+    // Per-key fallback: an imported doc can carry a single-mode shade
+    // object ({ light: 400 }) — indexOf(undefined) would park the slider
+    // at -1 and the chip at var(--color-…-undefined).
+    get: () => SHADES.indexOf((style.value[field]?.[target] ?? defaults[target]) as typeof SHADES[number]),
     set: (index: number) => {
       const current = { ...defaults, ...style.value[field] }
       setStyle({ [field]: { ...current, [target]: SHADES[index]! } })
@@ -219,13 +222,37 @@ function groupVariantModel(group: VariantGroup) {
   return computed({
     get: () => {
       const own = style.value.defaults?.variants?.[group]
-      if (own) return own
+      if (own && own !== 'default') return own
       // An app-wide value this group can't express (e.g. solid inputs)
       // truthfully reads as Default — the engine skips it there too.
       const appWide = style.value.defaults?.variant
       return appWide && supported.includes(appWide) ? appWide : 'default'
     },
-    set: (value: any) => setStyle({ defaults: { ...style.value.defaults, variants: { ...style.value.defaults?.variants, [group]: value } } })
+    set: (value: any) => {
+      const defaults = style.value.defaults || {}
+
+      // Picking Default under an app-wide variant must actually win: the
+      // engine skips 'default' entries, so the app-wide value explodes
+      // into the OTHER groups (where they support it) and disappears.
+      if (value === 'default' && defaults.variant) {
+        const variants: Record<string, any> = {}
+        for (const field of variantGroupFields) {
+          if (field.key === group) continue
+          const existing = defaults.variants?.[field.key]
+          if (existing && existing !== 'default') {
+            variants[field.key] = existing
+          } else if (field.items.some(item => item.value === defaults.variant)) {
+            variants[field.key] = defaults.variant
+          }
+        }
+        const next = { ...defaults, variants }
+        delete next.variant
+        setStyle({ defaults: next })
+        return
+      }
+
+      setStyle({ defaults: { ...defaults, variants: { ...defaults.variants, [group]: value } } })
+    }
   })
 }
 
diff --git a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
index 74422aa977..e4acdca30f 100644
--- a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
@@ -146,7 +146,12 @@ function onPointerMove(event: PointerEvent) {
 function onPointerUp(event: PointerEvent) {
   if (dragging.value) {
     dragging.value = null
-    svgRef.value!.releasePointerCapture(event.pointerId)
+    // After a pointercancel the capture is already gone and release throws
+    // NotFoundError — which would skip dragEnd and leave the page-wide
+    // dragging class stuck on <html>.
+    if (svgRef.value?.hasPointerCapture(event.pointerId)) {
+      svgRef.value.releasePointerCapture(event.pointerId)
+    }
     emit('dragEnd')
   }
 }
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 780bffac34..d049acd92e 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -39,13 +39,20 @@ const stopColors = computed(() => SHADES.map(shade => shades.value[shade]))
 /**
  * Every axis is a fixed 1:1 window — the full physical range fits the
  * canvas, so dragging never pans or rescales under the pointer. Hue params
- * are normalized into 0–360 on seed instead (cyclic, so shifting by full
- * turns is color-identical; fitPalette unwraps across the seam).
+ * are normalized into 0–360 on seed (cyclic, so shifting by full turns is
+ * color-identical; fitPalette unwraps across the seam), but a seam-crossing
+ * fit legitimately leaves individual points outside [0, 360] — the window
+ * stretches once, at seed, to include them, or the drag clamp would snap a
+ * merely-grabbed handle back into range and shift the color uninvited.
  */
+const seedHues = [params.hue.y0, params.hue.y1, params.hue.p1y, params.hue.p2y]
 const windows = {
   lightness: { min: 0, max: 1 },
   chroma: { min: 0, max: 0.35 },
-  hue: { min: 0, max: 360 }
+  hue: {
+    min: Math.min(0, Math.floor(Math.min(...seedHues) / 10) * 10),
+    max: Math.max(360, Math.ceil(Math.max(...seedHues) / 10) * 10)
+  }
 }
 
 /**
diff --git a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
index 39d56b9c1b..3cc73bf297 100644
--- a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
@@ -4,6 +4,9 @@ import type { ThemeDoc } from '../../utils/theme-engine'
 
 /** The presets dropdown (with per-preset color swatches) plus the shuffle die. */
 const { presets, activePreset, applyPreset, shuffle } = useThemeStudio()
+
+/** Exposed so hosts (the fullscreen toolbar) can pin themselves while open. */
+const open = defineModel<boolean>('open', { default: false })
 const { hasCSSChanges, hasConfigChanges } = useTheme()
 
 // The persisted preset (and any persisted edits) are client-only — resolve
@@ -41,6 +44,7 @@ const presetLabel = computed(() => {
 <template>
   <div class="flex gap-2">
     <UDropdownMenu
+      v-model:open="open"
       :items="presetItems"
       :content="{ align: 'start' }"
       class="flex-1 min-w-0"
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 1557c045d6..aa4a4672e0 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -538,6 +538,9 @@ export function useTheme() {
     window.localStorage.removeItem(THEME_STORAGE_KEYS.palettePrev)
     useState<Record<string, any>>(THEME_STATE_KEYS.stylePrefs).value = {}
     useState<string | undefined>(THEME_STATE_KEYS.themePreset).value = undefined
+    // The in-memory curve params too — the storage key alone leaves the
+    // palette editor showing (and re-persisting) supposedly-reset curves.
+    useState<Record<string, any>>(THEME_STATE_KEYS.paletteParams).value = {}
 
     if (import.meta.client) {
       document.getElementById(THEME_TAG_IDS.cssVariables)?.replaceChildren()
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 14b800387d..a755dbedb0 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -14,6 +14,7 @@ export function useThemeStudio() {
 
   function setActivePreset(id: string | undefined) {
     activePreset.value = id
+    if (!import.meta.client) return
     if (id) {
       window.localStorage.setItem(THEME_STORAGE_KEYS.preset, JSON.stringify(id))
     } else {
diff --git a/docs/app/composables/useThemeStudioHistory.ts b/docs/app/composables/useThemeStudioHistory.ts
index b36b4bbb8f..b47fc98f94 100644
--- a/docs/app/composables/useThemeStudioHistory.ts
+++ b/docs/app/composables/useThemeStudioHistory.ts
@@ -15,8 +15,19 @@ export function useThemeStudioHistory() {
   const lastSnapshot = useState('theme-studio-history-snapshot', () => '')
   const pendingRestore = useState('theme-studio-history-pending', () => false)
 
-  /** Realign the baseline without recording (page mount). */
+  /**
+   * Realign the baseline without recording (page mount). If the theme
+   * changed while no watcher was mounted (preset from the header picker on
+   * another page), the stacks describe a document lineage that no longer
+   * exists — undo/redo against them would clobber the off-page change, so
+   * they reset.
+   */
   function align(snapshot: string) {
+    if (lastSnapshot.value && snapshot !== lastSnapshot.value) {
+      past.value = []
+      future.value = []
+    }
+    pendingRestore.value = false
     lastSnapshot.value = snapshot
   }
 
@@ -44,9 +55,13 @@ export function useThemeStudioHistory() {
 
   function restore(doc: ThemeDoc) {
     pendingRestore.value = true
+    // The baseline moves NOW, not at the debounced settle — a second
+    // undo/redo inside the debounce window must push this doc, not the
+    // pre-restore state (which would drop a step and duplicate another).
+    lastSnapshot.value = JSON.stringify(doc)
     applyDoc(doc)
-    // realignment happens on the next capture, from currentDoc() itself —
-    // the applied doc may re-serialize differently than it round-trips
+    // the settle still realigns from currentDoc() itself — the applied doc
+    // may re-serialize differently than it round-trips
   }
 
   function undo() {
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index d49b2d9403..163e50a75b 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -33,18 +33,34 @@ watch(() => (mounted.value ? JSON.stringify(currentDoc()) : undefined), (snapsho
 defineShortcuts({
   meta_z: undo,
   meta_shift_z: redo,
-  ctrl_y: redo,
-  escape: () => {
-    if (fullscreen.value) fullscreen.value = false
-  }
+  ctrl_y: redo
 })
 
+// Esc exits fullscreen — but NOT through defineShortcuts, which
+// preventDefaults every matched key and would stop Reka's dismissable
+// layers from ever seeing Escape (no popover on /theme could close). A
+// plain listener defers whenever a layer is open, so Esc closes the
+// popover first and exits fullscreen on the next press.
+function onEscape(event: KeyboardEvent) {
+  if (event.key !== 'Escape' || !fullscreen.value || event.defaultPrevented) return
+  // Only VISIBLE layers defer — pre-mounted closed overlays (the search
+  // palette) keep their layer marker in the DOM.
+  const layers = document.querySelectorAll('[data-dismissable-layer]')
+  if ([...layers].some(layer => layer.getClientRects().length)) return
+  fullscreen.value = false
+}
+onMounted(() => window.addEventListener('keydown', onEscape))
+
 // The fullscreen state is app-level (the site header gates on it) — never
-// let it leak past the studio. The pending capture dies with the page too,
-// or it would record against a baseline the next mount is about to reset.
+// let it leak past the studio. The pending capture flushes rather than
+// dies: an edit made inside the debounce window would otherwise vanish
+// from history, and a pending post-restore realign would stay armed and
+// swallow the next edit after remount.
 onUnmounted(() => {
+  window.removeEventListener('keydown', onEscape)
   fullscreen.value = false
   clearTimeout(captureTimeout)
+  capture(JSON.stringify(currentDoc()))
 })
 
 const settingGroups = [
@@ -52,6 +68,30 @@ const settingGroups = [
   { label: 'General', value: 'general' },
   { label: 'Style', value: 'style' }
 ] as const
+
+/**
+ * Fullscreen toolbar reveal. Pointer proximity is tracked with a mousemove
+ * listener instead of an invisible hover overlay — an overlay would eat
+ * clicks on the preview's bottom edge. The bar also pins open while any of
+ * its panels is open: their content portals to <body>, so hover/focus-within
+ * alone would retract the bar underneath its own popovers.
+ */
+const nearBottom = ref(false)
+function onPointerNear(event: MouseEvent) {
+  nearBottom.value = window.innerHeight - event.clientY <= 96
+}
+watch(fullscreen, (on) => {
+  if (on) {
+    window.addEventListener('mousemove', onPointerNear)
+  } else {
+    window.removeEventListener('mousemove', onPointerNear)
+    nearBottom.value = false
+  }
+})
+onUnmounted(() => window.removeEventListener('mousemove', onPointerNear))
+
+const openPanels = reactive({ presets: false, colors: false, general: false, style: false, view: false })
+const toolbarPinned = computed(() => nearBottom.value || Object.values(openPanels).some(Boolean))
 </script>
 
 <template>
@@ -86,11 +126,15 @@ const settingGroups = [
              nears the bottom (Esc still exits); only that strip catches
              the pointer so the preview stays clickable. -->
         <div :class="fullscreen ? 'group fixed bottom-0 inset-x-0 z-50 pointer-events-none' : 'shrink-0'">
-          <div v-if="fullscreen" class="absolute bottom-0 inset-x-0 h-8 pointer-events-auto" />
+          <!-- thin touch affordance only — mouse reveal is proximity-driven -->
+          <div v-if="fullscreen" class="absolute bottom-0 inset-x-0 h-2 pointer-events-auto" />
 
           <div
             class="flex items-center gap-2 py-3 overflow-x-auto"
-            :class="fullscreen && 'my-4 mx-auto w-[calc(100%-2rem)] max-w-(--ui-container) px-4 rounded-lg bg-default ring ring-default shadow-lg pointer-events-auto translate-y-[calc(100%+6px)] group-hover:translate-y-0 group-focus-within:translate-y-0 transition-transform duration-200'"
+            :class="fullscreen && [
+              'my-4 mx-auto w-[calc(100%-2rem)] max-w-(--ui-container) px-4 rounded-lg bg-default ring ring-default shadow-lg pointer-events-auto transition-transform duration-200',
+              toolbarPinned ? 'translate-y-0' : 'translate-y-[calc(100%+6px)] group-hover:translate-y-0 group-focus-within:translate-y-0'
+            ]"
           >
             <UFieldGroup size="sm">
               <UTooltip text="Undo" :kbds="['meta', 'Z']">
@@ -127,11 +171,12 @@ const settingGroups = [
               />
             </UTooltip>
 
-            <ThemeStudioPresetMenu class="w-56 shrink-0" />
+            <ThemeStudioPresetMenu v-model:open="openPanels.presets" class="w-56 shrink-0" />
 
             <UPopover
               v-for="settingGroup in settingGroups"
               :key="settingGroup.value"
+              v-model:open="openPanels[settingGroup.value]"
               :content="{ align: 'start' }"
             >
               <UButton
@@ -154,6 +199,7 @@ const settingGroups = [
                the header is hidden. -->
             <USelect
               v-model="view"
+              v-model:open="openPanels.view"
               :items="views"
               :icon="views.find(tab => tab.value === view)?.icon"
               size="sm"
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index c18c7240a5..e739a86392 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -185,6 +185,14 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
     return value
   }
 
+  // A consumed variable the style axis can't express (unknown color value,
+  // single-mode declaration) goes back into the residual maps — it then
+  // survives as a plain token override instead of silently vanishing.
+  const putBack = (prop: string, value: { light?: string, dark?: string }) => {
+    if (value.light !== undefined) light[prop] = value.light
+    if (value.dark !== undefined) dark[prop] = value.dark
+  }
+
   const opacity = take('--ui-shadow-opacity')
   const geometry = {
     x: take('--ui-shadow-offset-x'),
@@ -217,8 +225,20 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
     style.shadow = 'soft'
   }
 
-  if (opacity.light !== undefined) {
+  if (style.shadow !== 'hard') {
+    // dark-only geometry can't seed a hard shadow — keep it as tokens
+    putBack('--ui-shadow-offset-x', geometry.x)
+    putBack('--ui-shadow-offset-y', geometry.y)
+    putBack('--ui-shadow-blur', geometry.blur)
+    putBack('--ui-shadow-spread', geometry.spread)
+  }
+
+  if (opacity.light !== undefined && style.shadow) {
     style.shadowOpacity = Number.parseFloat(opacity.light)
+  } else {
+    // without a shadow the option would never re-emit (styleTokens gates
+    // opacity on shadow) — as a token it at least round-trips
+    putBack('--ui-shadow-opacity', opacity)
   }
 
   const innerOpacity = take('--ui-inner-shadow-opacity')
@@ -247,8 +267,17 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
     style.innerShadow = 'soft'
   }
 
-  if (innerOpacity.light !== undefined) {
+  if (style.innerShadow !== 'hard') {
+    putBack('--ui-inner-shadow-offset-x', innerGeometry.x)
+    putBack('--ui-inner-shadow-offset-y', innerGeometry.y)
+    putBack('--ui-inner-shadow-blur', innerGeometry.blur)
+    putBack('--ui-inner-shadow-spread', innerGeometry.spread)
+  }
+
+  if (innerOpacity.light !== undefined && style.innerShadow) {
     style.innerShadowOpacity = Number.parseFloat(innerOpacity.light)
+  } else {
+    putBack('--ui-inner-shadow-opacity', innerOpacity)
   }
 
   if (shadowColor.light !== undefined || shadowColor.dark !== undefined) {
@@ -259,6 +288,8 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
       if (match) {
         style.shadowColor = match.color as StyleOptions['shadowColor']
         if (match.shade) style.shadowShade = match.shade
+      } else {
+        putBack('--ui-shadow-color', shadowColor)
       }
     }
   }
@@ -269,6 +300,8 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
     if (match) {
       style.innerShadowColor = match.color as StyleOptions['innerShadowColor']
       if (match.shade) style.innerShadowShade = match.shade
+    } else {
+      putBack('--ui-inner-shadow-color', innerColor)
     }
   }
 
@@ -277,6 +310,8 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
     if (match) {
       style.borderColor = match.color as StyleOptions['borderColor']
       if (match.shade) style.borderShade = match.shade
+    } else {
+      putBack('--ui-frame-color', frameColor)
     }
   }
 
diff --git a/docs/app/utils/theme-engine/palette.ts b/docs/app/utils/theme-engine/palette.ts
index 285899e916..d35c742e5e 100644
--- a/docs/app/utils/theme-engine/palette.ts
+++ b/docs/app/utils/theme-engine/palette.ts
@@ -85,8 +85,11 @@ export function generatePalette(params: PaletteCurveParams): Record<Shade, strin
 
     // Clamp here, not in the serializer: sculpted curves can demand
     // impossible chroma, and the swatches/contrast math assume sRGB.
+    // Lightness clamps too — clampToGamut only searches chroma, so an
+    // overshooting curve (handles may exceed the window) would otherwise
+    // emit oklch(112% …) verbatim into exports and contrast math.
     result[shade] = formatOklch(clampToGamut({
-      l: sampleCurve(x, params.lightness),
+      l: Math.min(1, Math.max(0, sampleCurve(x, params.lightness))),
       c: Math.max(0, sampleCurve(x, params.chroma)),
       h: sampleCurve(x, params.hue)
     }))
@@ -102,6 +105,10 @@ export function generatePalette(params: PaletteCurveParams): Record<Shade, strin
  * every palette selection.
  */
 export function fitCurve(points: Array<[number, number]>): ChannelCurve {
+  // Nothing to fit — a flat zero curve beats a TypeError.
+  if (!points.length) {
+    return { y0: 0, p1x: 0.33, p1y: 0, p2x: 0.66, p2y: 0, y1: 0 }
+  }
   const y0 = points[0]![1]
   const y1 = points[points.length - 1]![1]
   const span = Math.max(Math.abs(y1 - y0), 1e-6)
diff --git a/test/utils/theme-import.spec.ts b/test/utils/theme-import.spec.ts
index 43b5466fc0..0d58cc4de9 100644
--- a/test/utils/theme-import.spec.ts
+++ b/test/utils/theme-import.spec.ts
@@ -130,6 +130,27 @@ describe('importTheme', () => {
     expect(skipped).toEqual(['.made-up-selector { color: red }'])
   })
 
+  it('keeps style variables it cannot express as plain tokens', () => {
+    const { doc, skipped } = importTheme({
+      css: [
+        ':root, .light {',
+        '  --ui-frame-color: #ff0000;',
+        '}',
+        '',
+        '.dark {',
+        '  --ui-frame-color: #ff0000;',
+        '}'
+      ].join('\n')
+    })
+
+    // A literal the border-color table can't name is not a style choice —
+    // but it must survive somewhere, not silently vanish.
+    expect(skipped).toEqual([])
+    expect(doc.style?.borderColor).toBeUndefined()
+    expect(doc.tokens?.light?.['--ui-frame-color']).toBe('#ff0000')
+    expect(doc.tokens?.dark?.['--ui-frame-color']).toBe('#ff0000')
+  })
+
   it('round-trips per-group default colors', () => {
     const doc: ThemeDoc = {
       version: 1,

From cc54613a7a6483fb0c347c1a291fa6973f4bb6d1 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Fri, 10 Jul 2026 16:12:40 +0200
Subject: [PATCH 117/185] feat(docs): neutral-as-primary, leaner color controls
 and layered palette modifiers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Primary offers a single full-width Neutral option mapping to the neutral
  ALIAS (#6608 semantics): the primary scale mirrors whatever neutral
  resolves to, live, with FOUC restore, export recipe and import round-trip
- Drop the docs-only ramps (sand/sage/ash/cocoa/marine) from main.css, the
  pickers and the engine; restore tailwind v4's own extra neutrals
  (taupe/mauve/mist/olive) — CSS-variable resolved, they're not in the
  tailwindcss/colors JS export
- Colors panel: shared ThemeStudioColorSection renders every alias (header
  row hosts the edit + adjust-shades toggles), semantic rows sit under one
  header, neutral's shade groups fold individually (closed by default)
- Palette modifiers: chroma presets gain a flat offset so gray ramps
  respond, plus a Custom mode layering lightness/contrast/saturation/
  chroma-offset/hue sliders over the fitted base
- Shade sliders keep a hairline inset ring so fills matching the panel
  background stay visible
- Toolbar buttons move to the default size (header picker stays sm);
  shared slider rows collapse into ThemeStudioSliderRow

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/assets/css/main.css                  |  62 ----
 .../theme-studio/ThemeStudioColorMenu.vue     |  48 ++-
 .../theme-studio/ThemeStudioColorSection.vue  | 140 +++++++++
 .../theme-studio/ThemeStudioControls.vue      | 293 +++++-------------
 .../theme-studio/ThemeStudioExport.vue        |   1 -
 .../theme-studio/ThemeStudioImport.vue        |   1 -
 .../theme-studio/ThemeStudioPaletteEditor.vue | 141 +++++++--
 .../theme-studio/ThemeStudioPicker.vue        |   2 +-
 .../theme-studio/ThemeStudioPickerButton.vue  |   7 +-
 .../theme-studio/ThemeStudioPresetMenu.vue    |   9 +-
 .../theme-studio/ThemeStudioSection.vue       |  10 +
 .../theme-studio/ThemeStudioShadeSlider.vue   |   9 +-
 .../theme-studio/ThemeStudioSliderRow.vue     |  30 ++
 docs/app/composables/useTheme.ts              |  27 +-
 docs/app/composables/useThemeStudio.ts        |  30 +-
 docs/app/pages/theme.vue                      |   8 +-
 docs/app/plugins/theme.ts                     |  15 +-
 .../app/utils/theme-engine/custom-palettes.ts |  74 -----
 docs/app/utils/theme-engine/export.ts         |  14 +-
 docs/app/utils/theme-engine/import.ts         |  22 +-
 docs/app/utils/theme-engine/index.ts          |   1 -
 test/utils/theme-engine.spec.ts               |  22 +-
 test/utils/theme-import.spec.ts               |  34 ++
 23 files changed, 567 insertions(+), 433 deletions(-)
 create mode 100644 docs/app/components/theme-studio/ThemeStudioColorSection.vue
 create mode 100644 docs/app/components/theme-studio/ThemeStudioSliderRow.vue
 delete mode 100644 docs/app/utils/theme-engine/custom-palettes.ts

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index 66790c795b..04e6482494 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -13,68 +13,6 @@
   --default-border-width: var(--studio-border-width, 1px);
   --default-ring-width: var(--studio-border-width, 1px);
 
-  /* Studio extras: custom neutrals (sand, sage, ash) and primaries
-     (cocoa, marine) beyond the stock tailwind palettes. */
-  --color-sand-50: oklch(98% 0.006 84.579);
-  --color-sand-100: oklch(92.7% 0.013 84.455);
-  --color-sand-200: oklch(85.6% 0.02 84.205);
-  --color-sand-300: oklch(75% 0.03 83.784);
-  --color-sand-400: oklch(62.5% 0.041 83.119);
-  --color-sand-500: oklch(52.6% 0.044 82.076);
-  --color-sand-600: oklch(45% 0.038 80.381);
-  --color-sand-700: oklch(38.8% 0.032 77.816);
-  --color-sand-800: oklch(33.4% 0.026 76.102);
-  --color-sand-900: oklch(28.5% 0.021 75.84);
-  --color-sand-950: oklch(24.1% 0.015 76.21);
-
-  --color-sage-50: oklch(97.7% 0.004 134.849);
-  --color-sage-100: oklch(95% 0.01 140.516);
-  --color-sage-200: oklch(90% 0.018 140.022);
-  --color-sage-300: oklch(82.6% 0.029 141.964);
-  --color-sage-400: oklch(71.9% 0.038 142.667);
-  --color-sage-500: oklch(61.7% 0.042 142.713);
-  --color-sage-600: oklch(53% 0.038 143.698);
-  --color-sage-700: oklch(45.7% 0.032 143.377);
-  --color-sage-800: oklch(39.8% 0.026 142.997);
-  --color-sage-900: oklch(35.1% 0.022 145.097);
-  --color-sage-950: oklch(24.2% 0.017 145.041);
-
-  --color-ash-50: oklch(97.3% 0.003 264.542);
-  --color-ash-100: oklch(94% 0.006 264.532);
-  --color-ash-200: oklch(87.8% 0.012 264.505);
-  --color-ash-300: oklch(77.8% 0.02 262.99);
-  --color-ash-400: oklch(64.5% 0.031 263.35);
-  --color-ash-500: oklch(54% 0.036 263.342);
-  --color-ash-600: oklch(45.9% 0.032 264.197);
-  --color-ash-700: oklch(39.7% 0.025 264.228);
-  --color-ash-800: oklch(35.5% 0.021 262.595);
-  --color-ash-900: oklch(31.2% 0.018 262.24);
-  --color-ash-950: oklch(21% 0.012 270.771);
-
-  --color-cocoa-50: oklch(97.5% 0.007 67.745);
-  --color-cocoa-100: oklch(93.9% 0.015 64.338);
-  --color-cocoa-200: oklch(87.3% 0.029 65.727);
-  --color-cocoa-300: oklch(78.7% 0.044 62.544);
-  --color-cocoa-400: oklch(67.8% 0.064 61.516);
-  --color-cocoa-500: oklch(57.3% 0.07 62.619);
-  --color-cocoa-600: oklch(49.6% 0.063 62.025);
-  --color-cocoa-700: oklch(43% 0.053 61.313);
-  --color-cocoa-800: oklch(37.7% 0.043 59.008);
-  --color-cocoa-900: oklch(33.7% 0.035 59.102);
-  --color-cocoa-950: oklch(22.9% 0.023 57.319);
-
-  --color-marine-50: oklch(97.2% 0.008 253.853);
-  --color-marine-100: oklch(93.9% 0.018 250.593);
-  --color-marine-200: oklch(87.8% 0.037 252.096);
-  --color-marine-300: oklch(78.8% 0.063 252.304);
-  --color-marine-400: oklch(67.5% 0.095 253.08);
-  --color-marine-500: oklch(57.6% 0.114 254.216);
-  --color-marine-600: oklch(49% 0.111 256.206);
-  --color-marine-700: oklch(42.6% 0.092 256.598);
-  --color-marine-800: oklch(37.7% 0.073 257.11);
-  --color-marine-900: oklch(34.5% 0.058 255.734);
-  --color-marine-950: oklch(26.4% 0.036 252.434);
-
   --font-sans: 'Public Sans', sans-serif;
 
   --color-green-50: #EFFDF5;
diff --git a/docs/app/components/theme-studio/ThemeStudioColorMenu.vue b/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
index bf2b72b114..56129bf0e1 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
@@ -12,11 +12,20 @@ const appConfig = useAppConfig()
 const { neutralColors, primaryColors, primary, neutral, blackAsPrimary, setBlackAsPrimary } = useTheme()
 const { selectPalette, isCustomPalette } = useThemeStudio()
 
-// Every ramp suits either role — colorful ramps lead for color roles,
-// neutrals lead for the background.
-const sections = computed(() => props.alias === 'neutral'
-  ? [{ label: 'Neutrals', colors: neutralColors }, { label: 'Colors', colors: primaryColors }]
-  : [{ label: 'Colors', colors: primaryColors }, { label: 'Neutrals', colors: neutralColors }])
+// Colorful ramps lead for color roles, neutrals lead for the background.
+// Primary offers no gray ramps at all: a gray through the chromatic shade
+// recipe is a washed-out accent, so the single Neutral entry (mapping to
+// the neutral alias) replaces them.
+const sections = computed(() => {
+  if (props.alias === 'neutral') {
+    return [
+      { label: 'Neutrals', colors: neutralColors },
+      { label: 'Colors', colors: primaryColors, hint: 'These may need some adjustment for comfortable use, try the modifiers in the palette editor.' }
+    ]
+  }
+  if (props.alias === 'primary') return [{ label: 'Colors', colors: primaryColors }]
+  return [{ label: 'Colors', colors: primaryColors }, { label: 'Neutrals', colors: neutralColors }]
+})
 
 const value = computed(() => {
   if (props.alias === 'primary') return blackAsPrimary.value ? 'black' : primary.value
@@ -36,10 +45,15 @@ function paletteChip(name: string) {
 
 const swatchColor = computed(() => {
   if (props.alias === 'primary' && blackAsPrimary.value) return undefined
+  // primary set to the neutral alias mirrors the selected neutral ramp
+  if (props.alias === 'primary' && value.value === 'neutral') return 'var(--ui-color-neutral-500)'
   if (isCustomPalette(props.alias)) return `var(--color-custom-${props.alias}-500)`
   return `var(--color-${paletteChip(value.value)}-500)`
 })
 
+/** What the primary menu's Neutral row resolves to right now. */
+const neutralName = computed(() => isCustomPalette('neutral') ? 'Custom' : neutral.value)
+
 function isSelected(color: string) {
   if (props.alias === 'primary') return !blackAsPrimary.value && primary.value === color
   if (props.alias === 'neutral') return neutral.value === color
@@ -69,12 +83,32 @@ function isSelected(color: string) {
     </UButton>
 
     <template #content>
-      <div class="flex flex-col gap-2 w-72 p-2">
+      <div class="flex flex-col gap-3 w-72 p-2">
+        <!-- Not a ramp swatch: primary follows whatever the neutral alias
+             resolves to, so it gets a distinct full-width row. -->
+        <ThemeStudioPickerButton
+          v-if="alias === 'primary'"
+          size="xs"
+          :selected="!blackAsPrimary && primary === 'neutral'"
+          class="w-full"
+          @click="selectPalette(alias, 'neutral')"
+        >
+          <template #leading>
+            <span class="inline-block size-2 rounded-full" :style="{ backgroundColor: 'var(--ui-color-neutral-500)' }" />
+          </template>
+
+          Neutral <span class="text-muted">({{ neutralName }})</span>
+        </ThemeStudioPickerButton>
+
         <div v-for="(section, index) in sections" :key="section.label">
-          <p class="text-[11px] font-semibold text-muted px-1 mb-1 select-none">
+          <p class="text-[11px] font-semibold text-muted px-1 mb-0.5 select-none">
             {{ section.label }}
           </p>
 
+          <p v-if="section.hint" class="text-[10px] text-muted px-1 mb-1 select-none">
+            {{ section.hint }}
+          </p>
+
           <div class="grid grid-cols-3 gap-1">
             <ThemeStudioPickerButton
               v-if="alias === 'primary' && index === 0"
diff --git a/docs/app/components/theme-studio/ThemeStudioColorSection.vue b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
new file mode 100644
index 0000000000..fb4aada378
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADES } from '../../utils/theme-engine'
+import type { ColorAlias } from '../../utils/theme-engine'
+
+/**
+ * One color alias in the Colors panel: a section header carrying the edit
+ * and adjust-shades toggles, the picker below, and the palette editor /
+ * shade sliders folding out underneath. Color aliases expose their accent
+ * pair; neutral carries every neutral-ramped token group.
+ */
+const props = defineProps<{
+  alias: ColorAlias
+  /** Header text — defaults to the capitalized alias. */
+  label?: string
+  helpTo?: string
+}>()
+
+const { isCustomPalette, style, setStyle, rampChip } = useThemeStudio()
+
+const title = computed(() => props.label ?? props.alias.charAt(0).toUpperCase() + props.alias.slice(1))
+
+const paletteEditor = ref(false)
+const shadeEditor = ref(false)
+
+// Per-token shade sliders, one light/dark pair. Only the touched mode is
+// written so an untouched mode never becomes an override.
+function tokenShadeSlider(token: string, defaults: { light: number, dark: number }, target: 'light' | 'dark') {
+  return computed({
+    get: () => {
+      const value = style.value.tokenShades?.[token]?.[target] ?? defaults[target]
+      return SHADES.indexOf(value as typeof SHADES[number])
+    },
+    set: (index: number) => {
+      setStyle({
+        tokenShades: {
+          ...style.value.tokenShades,
+          [token]: { ...style.value.tokenShades?.[token], [target]: SHADES[index]! }
+        }
+      })
+    }
+  })
+}
+
+const sections = TOKEN_SHADE_TARGETS
+  .filter(target => props.alias === 'neutral' ? target.ramp === 'neutral' : target.token === `--ui-${props.alias}`)
+  .map(target => ({
+    ...target,
+    sliders: {
+      light: tokenShadeSlider(target.token, target.defaults, 'light'),
+      dark: tokenShadeSlider(target.token, target.defaults, 'dark')
+    }
+  }))
+
+// Neutral's token groups (background, text, borders) fold individually —
+// all closed by default so the big panel opens compact.
+const tokenGroups = TOKEN_GROUPS
+  .map(group => ({ ...group, sections: sections.filter(section => section.group === group.key) }))
+  .filter(group => group.sections.length)
+const openGroups = reactive<Record<string, boolean>>({})
+</script>
+
+<template>
+  <ThemeStudioSection :label="title" :help-to="helpTo">
+    <template #actions>
+      <UButton
+        :icon="isCustomPalette(alias) ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        :active="paletteEditor || isCustomPalette(alias)"
+        active-color="primary"
+        active-variant="subtle"
+        :aria-label="`Edit ${alias} palette`"
+        @click="paletteEditor = !paletteEditor"
+      />
+
+      <UTooltip text="Adjust shades">
+        <UButton
+          icon="i-lucide-sliders-horizontal"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          :active="shadeEditor"
+          active-color="primary"
+          active-variant="subtle"
+          :aria-label="`Adjust ${alias} shades`"
+          @click="shadeEditor = !shadeEditor"
+        />
+      </UTooltip>
+    </template>
+
+    <div>
+      <ThemeStudioColorMenu :alias="alias" class="w-full" />
+
+      <ThemeStudioPaletteEditor v-model:open="paletteEditor" :alias="alias" />
+
+      <!-- The accent pair for color aliases. -->
+      <div v-if="shadeEditor && alias !== 'neutral'" class="flex flex-col gap-1.5 pt-2">
+        <ThemeStudioShadeSlider
+          v-for="(slider, modeName) in sections[0]!.sliders"
+          :key="modeName"
+          v-model="slider.value"
+          :mode="modeName"
+          :chip="rampChip(alias)"
+        />
+      </div>
+
+      <!-- Every neutral-ramped semantic token — the big one. -->
+      <div v-else-if="shadeEditor" class="flex flex-col gap-1 pt-2">
+        <UCollapsible v-for="tokenGroup in tokenGroups" :key="tokenGroup.key" v-model:open="openGroups[tokenGroup.key]">
+          <UButton
+            :label="tokenGroup.label"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            block
+            class="justify-between"
+            :trailing-icon="openGroups[tokenGroup.key] ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+          />
+
+          <template #content>
+            <div class="flex flex-col gap-3 pt-2 pb-1 px-1">
+              <div v-for="section in tokenGroup.sections" :key="section.token" class="flex flex-col gap-1.5">
+                <span class="text-[11px] text-muted select-none">{{ section.label }}</span>
+
+                <ThemeStudioShadeSlider
+                  v-for="(slider, modeName) in section.sliders"
+                  :key="modeName"
+                  v-model="slider.value"
+                  :mode="modeName"
+                  :chip="rampChip(section.ramp)"
+                />
+              </div>
+            </div>
+          </template>
+        </UCollapsible>
+      </div>
+    </div>
+  </ThemeStudioSection>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 23791d4bd3..b43e4f2d2a 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, BORDER_WIDTH_DEFAULT, SHADOW_GEOMETRY_DEFAULTS, INNER_SHADOW_GEOMETRY_DEFAULTS } from '../../utils/theme-engine'
-import type { VariantGroup, TokenRamp, ColorAlias } from '../../utils/theme-engine'
-
-const appConfig = useAppConfig()
+import { SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, BORDER_WIDTH_DEFAULT, SHADOW_GEOMETRY_DEFAULTS, INNER_SHADOW_GEOMETRY_DEFAULTS } from '../../utils/theme-engine'
+import type { VariantGroup, ColorAlias } from '../../utils/theme-engine'
 
 /** Which settings group this instance renders — one popover per group. */
 defineProps<{
@@ -10,8 +8,6 @@ defineProps<{
 }>()
 
 const {
-  neutral,
-  primary,
   radius,
   fontSize,
   spacing,
@@ -21,7 +17,7 @@ const {
   icons
 } = useTheme()
 
-const { isCustomPalette, style, setStyle } = useThemeStudio()
+const { style, setStyle, primaryChip, neutralChip } = useThemeStudio()
 
 const semanticAliases: ColorAlias[] = ['secondary', 'success', 'info', 'warning', 'error']
 
@@ -132,48 +128,6 @@ const borderShades = {
   dark: shadeSlider('borderShade', BORDER_SHADE_DEFAULTS, 'dark')
 }
 
-// Per-semantic-token shade sliders (Background, Inverted, Highlighted…).
-function tokenShadeSlider(token: string, defaults: { light: number, dark: number }, target: 'light' | 'dark') {
-  return computed({
-    get: () => {
-      const value = style.value.tokenShades?.[token]?.[target] ?? defaults[target]
-      return SHADES.indexOf(value as typeof SHADES[number])
-    },
-    set: (index: number) => {
-      setStyle({
-        tokenShades: {
-          ...style.value.tokenShades,
-          [token]: { ...style.value.tokenShades?.[token], [target]: SHADES[index]! }
-        }
-      })
-    }
-  })
-}
-
-const tokenSections = TOKEN_SHADE_TARGETS.map(target => ({
-  ...target,
-  sliders: {
-    light: tokenShadeSlider(target.token, target.defaults, 'light'),
-    dark: tokenShadeSlider(target.token, target.defaults, 'dark')
-  }
-}))
-
-const tokenGroups = TOKEN_GROUPS.map(group => ({
-  ...group,
-  sections: tokenSections.filter(section => section.group === group.key)
-}))
-
-const neutralChip = computed(() => neutral.value === 'neutral' ? 'old-neutral' : neutral.value)
-const primaryChip = computed(() => isCustomPalette('primary') ? 'custom-primary' : primary.value)
-
-/** Palette name coloring a token slider's swatch — the alias's current ramp. */
-function rampChip(ramp: TokenRamp): string {
-  if (ramp === 'primary') return primaryChip.value
-  if (ramp === 'neutral') return neutralChip.value
-  const name = (appConfig.ui.colors as Record<string, string>)[ramp] || ramp
-  return name === 'neutral' ? 'old-neutral' : name
-}
-
 /**
  * Same hydration-adoption problem for every control: SSR renders default
  * state (no localStorage), and persisted slider positions/selections looked
@@ -190,12 +144,6 @@ onMounted(() => {
   }
 })
 
-// One curve editor per alias, toggled by the edit icon next to each select.
-const paletteEditors = reactive<Record<string, boolean>>({})
-
-/** The Shades fold in the Colors group — advanced, so closed by default. */
-const shadesOpen = ref(false)
-
 const defaultSizeItems = [
   { label: 'Default', value: 'default' },
   { label: 'XS', value: 'xs' },
@@ -311,122 +259,20 @@ const shadowColor = computed({
 <template>
   <div :key="hydrationKey">
     <template v-if="group === 'colors'">
-      <div class="flex flex-col gap-2.5">
-        <ThemeStudioSection label="Primary" help-to="/docs/getting-started/theme/css-variables#colors">
-          <div>
-            <div class="flex w-full items-center gap-1.5">
-              <ThemeStudioColorMenu alias="primary" class="flex-1 min-w-0" />
-
-              <UButton
-                :icon="isCustomPalette('primary') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
-                color="neutral"
-                variant="ghost"
-                size="sm"
-                :active="paletteEditors.primary || isCustomPalette('primary')"
-                active-color="primary"
-                active-variant="subtle"
-                aria-label="Edit primary palette"
-                @click="paletteEditors.primary = !paletteEditors.primary"
-              />
-            </div>
-
-            <ThemeStudioPaletteEditor v-model:open="paletteEditors.primary" alias="primary" />
-          </div>
-        </ThemeStudioSection>
+      <div class="flex flex-col gap-4">
+        <ThemeStudioColorSection alias="primary" help-to="/docs/getting-started/theme/css-variables#colors" />
 
         <USeparator />
 
-        <ThemeStudioSection label="Neutral" help-to="/docs/getting-started/theme/css-variables#text">
-          <div>
-            <div class="flex w-full items-center gap-1.5">
-              <ThemeStudioColorMenu alias="neutral" class="flex-1 min-w-0" />
-
-              <UButton
-                :icon="isCustomPalette('neutral') ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
-                color="neutral"
-                variant="ghost"
-                size="sm"
-                :active="paletteEditors.neutral || isCustomPalette('neutral')"
-                active-color="primary"
-                active-variant="subtle"
-                aria-label="Edit background palette"
-                @click="paletteEditors.neutral = !paletteEditors.neutral"
-              />
-            </div>
-
-            <ThemeStudioPaletteEditor v-model:open="paletteEditors.neutral" alias="neutral" />
-          </div>
-        </ThemeStudioSection>
+        <ThemeStudioColorSection alias="neutral" help-to="/docs/getting-started/theme/css-variables#text" />
 
         <USeparator />
 
         <ThemeStudioSection label="Semantic" help-to="/docs/getting-started/theme/design-system">
-          <div class="flex flex-col gap-1.5">
-            <div v-for="alias in semanticAliases" :key="alias">
-              <div class="flex items-center gap-2">
-                <span class="text-[11px] text-muted w-13 shrink-0 capitalize select-none">{{ alias }}</span>
-
-                <div class="flex flex-1 min-w-0 items-center gap-1.5">
-                  <ThemeStudioColorMenu :alias="alias" class="flex-1 min-w-0" />
-
-                  <UButton
-                    :icon="isCustomPalette(alias) ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
-                    color="neutral"
-                    variant="ghost"
-                    size="sm"
-                    :active="paletteEditors[alias] || isCustomPalette(alias)"
-                    active-color="primary"
-                    active-variant="subtle"
-                    :aria-label="`Edit ${alias} palette`"
-                    @click="paletteEditors[alias] = !paletteEditors[alias]"
-                  />
-                </div>
-              </div>
-
-              <ThemeStudioPaletteEditor v-model:open="paletteEditors[alias]" :alias="alias" />
-            </div>
+          <div class="flex flex-col gap-3 pt-1">
+            <ThemeStudioColorSection v-for="alias in semanticAliases" :key="alias" :alias="alias" />
           </div>
         </ThemeStudioSection>
-
-        <USeparator />
-
-        <!-- Advanced per-token shade remapping — folded away so the common
-             color pickers stay front and center. -->
-        <UCollapsible v-model:open="shadesOpen">
-          <UButton
-            label="Shades"
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            block
-            class="justify-between"
-            :trailing-icon="shadesOpen ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
-          />
-
-          <template #content>
-            <div class="flex flex-col gap-2.5 pt-2.5">
-              <template v-for="(tokenGroup, index) in tokenGroups" :key="tokenGroup.key">
-                <USeparator v-if="index" />
-
-                <ThemeStudioSection :label="tokenGroup.label">
-                  <div class="flex flex-col gap-3">
-                    <div v-for="section in tokenGroup.sections" :key="section.token" class="flex flex-col gap-1.5">
-                      <span class="text-[11px] text-muted select-none">{{ section.label }}</span>
-
-                      <ThemeStudioShadeSlider
-                        v-for="(slider, modeName) in section.sliders"
-                        :key="modeName"
-                        v-model="slider.value"
-                        :mode="modeName"
-                        :chip="rampChip(section.ramp)"
-                      />
-                    </div>
-                  </div>
-                </ThemeStudioSection>
-              </template>
-            </div>
-          </template>
-        </UCollapsible>
       </div>
     </template>
 
@@ -464,22 +310,26 @@ const shadowColor = computed({
                 />
               </template>
 
-              <div class="flex items-center gap-2">
-                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Opacity</span>
-
-                <USlider v-model="shadowOpacity" :min="5" :max="100" :step="5" size="xs" />
-
-                <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ shadowOpacity }}%</span>
-              </div>
+              <ThemeStudioSliderRow
+                v-model="shadowOpacity"
+                label="Opacity"
+                :min="5"
+                :max="100"
+                :step="5"
+                unit="%"
+              />
 
               <template v-if="(style.shadow || 'none') === 'hard'">
-                <div v-for="field in geometryFields" :key="field.key" class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
-
-                  <USlider v-model="geometry[field.key].value" :min="field.min" :max="field.max" :step="1" size="xs" />
-
-                  <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ geometry[field.key].value }}px</span>
-                </div>
+                <ThemeStudioSliderRow
+                  v-for="field in geometryFields"
+                  :key="field.key"
+                  v-model="geometry[field.key].value"
+                  :label="field.label"
+                  :min="field.min"
+                  :max="field.max"
+                  :step="1"
+                  unit="px"
+                />
               </template>
             </div>
           </div>
@@ -519,22 +369,26 @@ const shadowColor = computed({
                 />
               </template>
 
-              <div class="flex items-center gap-2">
-                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Opacity</span>
-
-                <USlider v-model="innerShadowOpacity" :min="5" :max="100" :step="5" size="xs" />
-
-                <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ innerShadowOpacity }}%</span>
-              </div>
+              <ThemeStudioSliderRow
+                v-model="innerShadowOpacity"
+                label="Opacity"
+                :min="5"
+                :max="100"
+                :step="5"
+                unit="%"
+              />
 
               <template v-if="style.innerShadow === 'hard'">
-                <div v-for="field in geometryFields" :key="field.key" class="flex items-center gap-2">
-                  <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ field.label }}</span>
-
-                  <USlider v-model="innerGeometry[field.key].value" :min="field.min" :max="field.max" :step="1" size="xs" />
-
-                  <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ innerGeometry[field.key].value }}px</span>
-                </div>
+                <ThemeStudioSliderRow
+                  v-for="field in geometryFields"
+                  :key="field.key"
+                  v-model="innerGeometry[field.key].value"
+                  :label="field.label"
+                  :min="field.min"
+                  :max="field.max"
+                  :step="1"
+                  unit="px"
+                />
               </template>
             </div>
           </div>
@@ -555,13 +409,14 @@ const shadowColor = computed({
             </div>
 
             <div v-if="borderStyle === 'custom'" class="mt-1.5 flex flex-col gap-2">
-              <div class="flex items-center gap-2">
-                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Width</span>
-
-                <USlider v-model="borderWidth" :min="1" :max="4" :step="1" size="xs" />
-
-                <span class="text-[11px] text-dimmed font-mono w-8 text-right shrink-0">{{ borderWidth }}px</span>
-              </div>
+              <ThemeStudioSliderRow
+                v-model="borderWidth"
+                label="Width"
+                :min="1"
+                :max="4"
+                :step="1"
+                unit="px"
+              />
 
               <div class="flex items-center gap-2">
                 <span class="text-[11px] text-muted w-13 shrink-0 select-none">Frame</span>
@@ -632,35 +487,25 @@ const shadowColor = computed({
 
         <ThemeStudioSection label="Scale">
           <div class="flex flex-col gap-2">
-            <div class="flex items-center gap-2">
-              <span class="text-[11px] text-muted w-13 shrink-0 select-none">Radius</span>
-
-              <USlider
-                v-model="radius"
-                :min="0"
-                :max="0.5"
-                :step="0.125"
-                size="xs"
-              />
-
-              <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ radius }}rem</span>
-            </div>
-
-            <div class="flex items-center gap-2">
-              <span class="text-[11px] text-muted w-13 shrink-0 select-none">Text</span>
-
-              <USlider v-model="fontSize" :min="14" :max="18" :step="0.5" size="xs" />
-
-              <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ fontSize }}px</span>
-            </div>
-
-            <div class="flex items-center gap-2">
-              <span class="text-[11px] text-muted w-13 shrink-0 select-none">Spacing</span>
+            <ThemeStudioSliderRow
+              v-model="radius"
+              label="Radius"
+              :min="0"
+              :max="0.5"
+              :step="0.125"
+              unit="rem"
+            />
 
-              <USlider v-model="spacing" :min="0.15" :max="0.35" :step="0.025" size="xs" />
+            <ThemeStudioSliderRow
+              v-model="fontSize"
+              label="Text"
+              :min="14"
+              :max="18"
+              :step="0.5"
+              unit="px"
+            />
 
-              <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ spacing }}</span>
-            </div>
+            <ThemeStudioSliderRow v-model="spacing" label="Spacing" :min="0.15" :max="0.35" :step="0.025" />
 
             <div class="flex items-center gap-2">
               <span class="text-[11px] text-muted w-13 shrink-0 select-none">Size</span>
diff --git a/docs/app/components/theme-studio/ThemeStudioExport.vue b/docs/app/components/theme-studio/ThemeStudioExport.vue
index 30ff0a9e28..8ae33729cd 100644
--- a/docs/app/components/theme-studio/ThemeStudioExport.vue
+++ b/docs/app/components/theme-studio/ThemeStudioExport.vue
@@ -30,7 +30,6 @@ watch(open, (isOpen) => {
       icon="i-lucide-download"
       color="neutral"
       variant="subtle"
-      size="sm"
       block
     />
 
diff --git a/docs/app/components/theme-studio/ThemeStudioImport.vue b/docs/app/components/theme-studio/ThemeStudioImport.vue
index 0e4213dec4..41f81759ec 100644
--- a/docs/app/components/theme-studio/ThemeStudioImport.vue
+++ b/docs/app/components/theme-studio/ThemeStudioImport.vue
@@ -47,7 +47,6 @@ function runImport() {
         icon="i-lucide-upload"
         color="neutral"
         variant="subtle"
-        size="sm"
         block
         aria-label="Import theme"
       />
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index d049acd92e..ac5e6325d1 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -129,6 +129,8 @@ function seed(values: PaletteCurveParams) {
   seedBase = structuredClone(next)
   styleOffset.value = 'fitted'
   offsetAmount.value = 100
+  lastPreset = 'fitted'
+  Object.assign(effects, EFFECT_DEFAULTS)
   ignoreUpdates(() => {
     Object.assign(params, next)
   })
@@ -158,7 +160,12 @@ onUnmounted(() => {
 
 /** Fit curves from whatever palette the alias currently shows. */
 function seedFromCurrent() {
-  const name = (appConfig.ui.colors as Record<string, string>)[props.alias]
+  let name = (appConfig.ui.colors as Record<string, string>)[props.alias]
+  // primary: 'neutral' follows the neutral ALIAS — seed from the ramp it
+  // resolves to, not tailwind's gray that happens to share the name.
+  if (props.alias === 'primary' && name === 'neutral') {
+    name = (appConfig.ui.colors as Record<string, string>).neutral
+  }
   if (!name) return
 
   const source = paletteShades(name)
@@ -189,14 +196,17 @@ const styleOffsetItems = [
   { label: 'Pastel', value: 'pastel' },
   { label: 'Muted', value: 'muted' },
   { label: 'Vivid', value: 'vivid' },
-  { label: 'Dazzling', value: 'dazzling' }
+  { label: 'Dazzling', value: 'dazzling' },
+  { label: 'Custom', value: 'custom' }
 ]
 
-function scaleChroma(curve: PaletteCurveParams['chroma'], factor: number) {
-  curve.y0 *= factor
-  curve.y1 *= factor
-  curve.p1y *= factor
-  curve.p2y *= factor
+// Scale AND offset: a pure multiply barely moves low-chroma (gray) ramps,
+// so the boosting presets add a flat chroma floor that registers there too.
+function scaleChroma(curve: PaletteCurveParams['chroma'], factor: number, offset = 0) {
+  curve.y0 = Math.max(0, curve.y0 * factor + offset)
+  curve.y1 = Math.max(0, curve.y1 * factor + offset)
+  curve.p1y = Math.max(0, curve.p1y * factor + offset)
+  curve.p2y = Math.max(0, curve.p2y * factor + offset)
 }
 
 /** Linearly remap a lightness curve onto new endpoints, preserving its shape. */
@@ -234,13 +244,13 @@ function applyStyleOffset(name: string) {
     // near-white, nothing dark) and push chroma UP so the softness stays
     // colorful — the gamut clamp keeps the very light stops in check.
     remapLightness(target.lightness, Math.min(target.lightness.y0, 0.945), Math.max(target.lightness.y1, 0.52))
-    scaleChroma(target.chroma, 1.35)
+    scaleChroma(target.chroma, 1.35, 0.01)
   } else if (name === 'muted') {
     scaleChroma(target.chroma, 0.55)
   } else if (name === 'vivid') {
-    scaleChroma(target.chroma, 1.45)
+    scaleChroma(target.chroma, 1.45, 0.015)
   } else if (name === 'dazzling') {
-    scaleChroma(target.chroma, 2)
+    scaleChroma(target.chroma, 2, 0.03)
   }
 
   const next = name === 'fitted' ? target : lerpParams(seedBase, target, offsetAmount.value / 100)
@@ -249,6 +259,80 @@ function applyStyleOffset(name: string) {
   Object.assign(params, next)
 }
 
+/* ------------------------------------------------------ custom effects -- */
+
+/**
+ * The Custom modifier: independent effects layered on top of the fitted
+ * base — lightness shift, contrast about the ramp's own midpoint, chroma
+ * scale AND flat offset (the offset is what moves gray ramps), hue
+ * rotation. Idempotent like the presets: always recomputed from seedBase.
+ */
+const EFFECT_DEFAULTS = { lightness: 0, contrast: 0, chromaScale: 100, chromaOffset: 0, hueShift: 0 }
+const effects = reactive({ ...EFFECT_DEFAULTS })
+
+const effectRows = [
+  { key: 'lightness', label: 'Lightness', min: -30, max: 30, step: 1, unit: '%' },
+  { key: 'contrast', label: 'Contrast', min: -50, max: 50, step: 1, unit: '%' },
+  { key: 'chromaScale', label: 'Saturation', min: 0, max: 300, step: 5, unit: '%' },
+  { key: 'chromaOffset', label: 'Chroma +', min: -100, max: 100, step: 5, unit: '' },
+  { key: 'hueShift', label: 'Hue', min: -180, max: 180, step: 5, unit: '°' }
+] as const
+
+/** Where each preset lands in effect terms — Custom picks up from the active preset. */
+const PRESET_EFFECTS: Record<string, Partial<typeof EFFECT_DEFAULTS>> = {
+  muted: { chromaScale: 55 },
+  vivid: { chromaScale: 145, chromaOffset: 15 },
+  dazzling: { chromaScale: 200, chromaOffset: 30 },
+  // Approximation — the real pastel remaps lightness to absolute endpoints.
+  pastel: { lightness: 8, contrast: -30, chromaScale: 135, chromaOffset: 10 }
+}
+
+function seedEffects(preset: string, amount: number) {
+  const target = { ...EFFECT_DEFAULTS, ...PRESET_EFFECTS[preset] }
+  for (const key of Object.keys(EFFECT_DEFAULTS) as Array<keyof typeof EFFECT_DEFAULTS>) {
+    effects[key] = Math.round(EFFECT_DEFAULTS[key] + (target[key] - EFFECT_DEFAULTS[key]) * amount)
+  }
+}
+
+function applyEffects() {
+  const target = structuredClone(seedBase)
+
+  // Lightness: contrast expands/compresses about the curve's own midpoint,
+  // then the shift slides the whole ramp.
+  const lightness = target.lightness
+  const mid = (lightness.y0 + lightness.y1) / 2
+  const span = 1 + effects.contrast / 100
+  const shift = effects.lightness / 100
+  const mapLightness = (value: number) => mid + (value - mid) * span + shift
+  lightness.y0 = mapLightness(lightness.y0)
+  lightness.y1 = mapLightness(lightness.y1)
+  lightness.p1y = mapLightness(lightness.p1y)
+  lightness.p2y = mapLightness(lightness.p2y)
+
+  scaleChroma(target.chroma, effects.chromaScale / 100, effects.chromaOffset / 1000)
+
+  target.hue.y0 += effects.hueShift
+  target.hue.y1 += effects.hueShift
+  target.hue.p1y += effects.hueShift
+  target.hue.p2y += effects.hueShift
+
+  // A user edit, like the presets — the watcher live-applies it.
+  Object.assign(params, target)
+}
+
+/** The last non-custom choice, so Custom starts from the look on screen. */
+let lastPreset = 'fitted'
+
+function onOffsetSelect(name: string) {
+  if (name === 'custom') {
+    seedEffects(lastPreset, offsetAmount.value / 100)
+    applyEffects()
+  } else {
+    lastPreset = name
+    applyStyleOffset(name)
+  }
+}
+
 function remove() {
   clearCustomPalette(props.alias)
   open.value = false
@@ -294,7 +378,7 @@ function remove() {
             icon="i-lucide-sparkles"
             :items="styleOffsetItems"
             class="flex-1"
-            @update:model-value="applyStyleOffset($event as string)"
+            @update:model-value="onOffsetSelect($event as string)"
           />
 
           <UTooltip v-if="active" text="Remove custom palette">
@@ -309,19 +393,30 @@ function remove() {
           </UTooltip>
         </div>
 
-        <div v-if="styleOffset !== 'fitted'" class="flex items-center gap-2">
-          <span class="text-[11px] text-muted shrink-0 w-10">Effect</span>
-          <USlider
-            v-model="offsetAmount"
-            :min="0"
-            :max="200"
-            :step="5"
-            size="sm"
-            color="neutral"
-            aria-label="Effect strength"
-            @update:model-value="applyStyleOffset(styleOffset)"
+        <ThemeStudioSliderRow
+          v-if="styleOffset !== 'fitted' && styleOffset !== 'custom'"
+          v-model="offsetAmount"
+          label="Effect"
+          :min="0"
+          :max="200"
+          :step="5"
+          unit="%"
+          @update:model-value="applyStyleOffset(styleOffset)"
+        />
+
+        <!-- Layered custom effects, each recomputed from the fitted base. -->
+        <div v-else-if="styleOffset === 'custom'" class="flex flex-col gap-1.5">
+          <ThemeStudioSliderRow
+            v-for="row in effectRows"
+            :key="row.key"
+            v-model="effects[row.key]"
+            :label="row.label"
+            :min="row.min"
+            :max="row.max"
+            :step="row.step"
+            :unit="row.unit"
+            @update:model-value="applyEffects()"
           />
-          <span class="text-[11px] text-dimmed tabular-nums shrink-0 w-8 text-right">{{ offsetAmount }}%</span>
         </div>
       </div>
     </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioPicker.vue b/docs/app/components/theme-studio/ThemeStudioPicker.vue
index f303b62711..01f7f0a7a4 100644
--- a/docs/app/components/theme-studio/ThemeStudioPicker.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPicker.vue
@@ -41,7 +41,7 @@ const aliases = [
         <UColorModeSwitch />
       </div>
 
-      <ThemeStudioPresetMenu />
+      <ThemeStudioPresetMenu size="sm" />
 
       <div class="flex flex-col gap-2">
         <div v-for="{ alias, label } in aliases" :key="alias" class="flex items-center gap-2">
diff --git a/docs/app/components/theme-studio/ThemeStudioPickerButton.vue b/docs/app/components/theme-studio/ThemeStudioPickerButton.vue
index 3f32520445..0641153af4 100644
--- a/docs/app/components/theme-studio/ThemeStudioPickerButton.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPickerButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineProps<{
-  label: string
+  label?: string
   icon?: string
   chip?: string
   selected?: boolean
@@ -9,6 +9,7 @@ defineProps<{
 
 const slots = defineSlots<{
   leading: () => any
+  default: () => any
 }>()
 </script>
 
@@ -24,6 +25,10 @@ const slots = defineSlots<{
     :label="label"
     class="capitalize"
   >
+    <template v-if="!!slots.default" #default>
+      <slot />
+    </template>
+
     <template v-if="chip || !!slots.leading" #leading>
       <slot name="leading">
         <span
diff --git a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
index 3cc73bf297..c459c23fce 100644
--- a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
@@ -3,6 +3,11 @@ import { resolveAlias, resolveShade } from '../../utils/theme-engine'
 import type { ThemeDoc } from '../../utils/theme-engine'
 
 /** The presets dropdown (with per-preset color swatches) plus the shuffle die. */
+defineProps<{
+  /** Button size — the toolbar uses the default, the header picker slims down. */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+}>()
+
 const { presets, activePreset, applyPreset, shuffle } = useThemeStudio()
 
 /** Exposed so hosts (the fullscreen toolbar) can pin themselves while open. */
@@ -56,7 +61,7 @@ const presetLabel = computed(() => {
         trailing-icon="i-lucide-chevron-down"
         color="neutral"
         variant="subtle"
-        size="sm"
+        :size="size"
         block
       />
 
@@ -77,7 +82,7 @@ const presetLabel = computed(() => {
         icon="i-lucide-dices"
         color="neutral"
         variant="subtle"
-        size="sm"
+        :size="size"
         aria-label="Random theme"
         @click="shuffle"
       />
diff --git a/docs/app/components/theme-studio/ThemeStudioSection.vue b/docs/app/components/theme-studio/ThemeStudioSection.vue
index c2e3432fdc..9d26e51805 100644
--- a/docs/app/components/theme-studio/ThemeStudioSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSection.vue
@@ -5,6 +5,12 @@ defineProps<{
   /** Docs page the header's help icon links to */
   helpTo?: string
 }>()
+
+const slots = defineSlots<{
+  default: () => any
+  /** Right-aligned controls in the header row (edit/adjust toggles). */
+  actions: () => any
+}>()
 </script>
 
 <template>
@@ -21,6 +27,10 @@ defineProps<{
         icon="i-lucide-help-circle"
         :ui="{ leadingIcon: 'size-3' }"
       />
+
+      <div v-if="!!slots.actions" class="ms-auto flex items-center gap-1.5">
+        <slot name="actions" />
+      </div>
     </div>
 
     <slot />
diff --git a/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue b/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue
index 92886468d0..9e6a31f1a1 100644
--- a/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue
+++ b/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue
@@ -21,7 +21,9 @@ const index = defineModel<number>({ required: true })
       />
     </span>
 
-    <!-- the fill wears the ramp color at the selected shade -->
+    <!-- The fill wears the ramp color at the selected shade. Hairline inset
+         rings keep the fill and thumb visible when that color melts into
+         the panel background (light shades in light mode and vice versa). -->
     <USlider
       v-model="index"
       :min="0"
@@ -29,7 +31,10 @@ const index = defineModel<number>({ required: true })
       :step="1"
       size="sm"
       :style="{ '--slider-color': `var(--color-${chip}-${SHADES[index]})` }"
-      :ui="{ range: 'bg-(--slider-color)', thumb: 'ring-(--slider-color)' }"
+      :ui="{
+        range: 'bg-(--slider-color) inset-ring inset-ring-accented',
+        thumb: 'ring-(--slider-color) inset-ring inset-ring-accented shadow-sm'
+      }"
     />
 
     <span class="text-[11px] text-dimmed font-mono w-7 text-right shrink-0">{{ SHADES[index] }}</span>
diff --git a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
new file mode 100644
index 0000000000..f9304a9360
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+/** The studio's standard control row: tiny label, slider, monospace readout. */
+defineProps<{
+  label: string
+  min: number
+  max: number
+  step: number
+  /** Readout suffix (%, px, rem, °). */
+  unit?: string
+}>()
+
+const value = defineModel<number>({ required: true })
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ label }}</span>
+
+    <USlider
+      v-model="value"
+      :min="min"
+      :max="max"
+      :step="step"
+      size="xs"
+      :aria-label="label"
+    />
+
+    <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ value }}{{ unit }}</span>
+  </div>
+</template>
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index aa4a4672e0..4049b65115 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -2,7 +2,7 @@ import { defu } from 'defu'
 import { THEME_TAG_IDS, THEME_STATE_KEYS, THEME_STORAGE_KEYS } from '../utils/theme-keys'
 import { useLocalStorage } from '@vueuse/core'
 import { themeIcons, cssVariableDefaults, readLocalStorage } from '../utils/theme'
-import { generateCSS, generateConfig, mergeUi, isDefaultStyle, DEFAULT_COLORS, THEME_DEFAULTS, LIBRARY_TOKEN_DEFAULTS, CUSTOM_PALETTES } from '../utils/theme-engine'
+import { generateCSS, generateConfig, mergeUi, isDefaultStyle, DEFAULT_COLORS, THEME_DEFAULTS, LIBRARY_TOKEN_DEFAULTS, NEUTRAL_PRIMARY_ROOT } from '../utils/theme-engine'
 import type { ThemeDoc, ThemePalette } from '../utils/theme-engine'
 import { omit } from '#ui/utils'
 import colors from 'tailwindcss/colors'
@@ -76,7 +76,7 @@ export function useTheme() {
     // Match the page background in both modes (docs light baseline is
     // neutral-50, not white) so browser chrome doesn't seam against the page.
     const shade = colorMode.value === 'dark' ? 900 : 50
-    return (colors as any)[neutral]?.[shade] || customColorsData.value[neutral]?.[shade] || CUSTOM_PALETTES[neutral]?.[shade] || (colors as any).slate[shade]
+    return (colors as any)[neutral]?.[shade] || customColorsData.value[neutral]?.[shade] || (colors as any).slate[shade]
   })
   const cssVariablesData = useState<{ light?: Record<string, string>, dark?: Record<string, string> }>('nuxt-ui-css-variables', () => readLocalStorage('nuxt-ui-css-variables', {}))
   /** The studio's style axis (it owns writes); read here for currentDoc/export. */
@@ -88,7 +88,10 @@ export function useTheme() {
   const _iconSet = useLocalStorage('nuxt-ui-icons', 'lucide')
   const _blackAsPrimary = useLocalStorage('nuxt-ui-black-as-primary', false)
 
-  const neutralColors = ['slate', 'gray', 'zinc', 'neutral', 'stone', 'taupe', 'mauve', 'mist', 'olive', 'sand', 'sage', 'ash']
+  // taupe/mauve/mist/olive ship with tailwind v4's theme.css but not (yet)
+  // the tailwindcss/colors JS export — swatches and fits resolve them from
+  // the CSS variables instead.
+  const neutralColors = ['slate', 'gray', 'zinc', 'neutral', 'stone', 'taupe', 'mauve', 'mist', 'olive']
   const neutral = computed({
     get() {
       return appConfig.ui.colors.neutral
@@ -101,8 +104,7 @@ export function useTheme() {
   })
 
   const colorsToOmit = ['inherit', 'current', 'transparent', 'black', 'white', ...neutralColors]
-  // Custom docs palettes (defined in main.css @theme static) extend tailwind's set.
-  const primaryColors = [...Object.keys(omit(colors, colorsToOmit as any)), 'cocoa', 'marine']
+  const primaryColors = Object.keys(omit(colors, colorsToOmit as any))
   const primary = computed({
     get() {
       return appConfig.ui.colors.primary
@@ -215,6 +217,13 @@ export function useTheme() {
   const fontSizeStyle = computed(() => _fontSize.value !== 16 ? `html { font-size: ${_fontSize.value}px; }` : 'html {}')
   const spacingStyle = computed(() => _spacing.value !== 0.25 ? `:root { --spacing: ${_spacing.value}rem; }` : ':root {}')
   const blackAsPrimaryStyle = computed(() => _blackAsPrimary.value ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
+  // primary === 'neutral' means the neutral ALIAS (#6608 semantics), which
+  // the module would render as tailwind's gray — the same mirror the export
+  // emits keeps the preview honest. Black wins when both are set (parity
+  // with the export, which drops the recipe under blackAsPrimary).
+  const neutralAsPrimaryStyle = computed(() => appConfig.ui.colors.primary === 'neutral' && !_blackAsPrimary.value
+    ? `:root { ${NEUTRAL_PRIMARY_ROOT.join(' ')} }`
+    : ':root {}')
   const fontStyle = computed(() => `:root { --font-sans: '${_font.value}', sans-serif; }`)
   const customColorsStyle = computed(() => {
     const entries = Object.entries(customColorsData.value)
@@ -252,6 +261,7 @@ export function useTheme() {
     { innerHTML: radiusStyle, id: 'nuxt-ui-radius', tagPriority: -2 },
     { innerHTML: fontSizeStyle, id: 'nuxt-ui-font-size', tagPriority: -2 },
     { innerHTML: spacingStyle, id: 'nuxt-ui-spacing', tagPriority: -2 },
+    { innerHTML: neutralAsPrimaryStyle, id: 'nuxt-ui-neutral-as-primary', tagPriority: -2 },
     { innerHTML: blackAsPrimaryStyle, id: 'nuxt-ui-black-as-primary', tagPriority: -2 },
     { innerHTML: fontStyle, id: 'nuxt-ui-font', tagPriority: -2 },
     { innerHTML: customColorsStyle, id: THEME_TAG_IDS.customColors, tagPriority: -2 },
@@ -309,13 +319,6 @@ export function useTheme() {
     // stays 'green') and must still export.
     const referenced = new Set(Object.values(appConfig.ui.colors as Record<string, string>))
     const paletteEntries = Object.entries(customColorsData.value).filter(([name]) => referenced.has(name))
-    // Docs-only palettes (sand, cocoa, …) exist in main.css, not tailwind —
-    // a consumer's build can't resolve them, so inline their ramps too.
-    for (const name of referenced) {
-      if (CUSTOM_PALETTES[name] && !customColorsData.value[name]) {
-        paletteEntries.push([name, CUSTOM_PALETTES[name]])
-      }
-    }
     if (paletteEntries.length) {
       doc.palettes = Object.fromEntries(paletteEntries.map(([name, shades]) => [name, { shades: shades as ThemePalette['shades'] }]))
     }
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index a755dbedb0..34130527b2 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,7 +1,7 @@
 import colors from 'tailwindcss/colors'
 import { THEME_STATE_KEYS, THEME_STORAGE_KEYS } from '../utils/theme-keys'
 import { presets, docToSettings, isDefaultTheme, generatePalette, fitPalette, parseCssColor, parseUiColorRef, styleComponents, styleTokens, DEFAULT_COLORS, SHADES, TOKEN_SHADE_TARGETS } from '../utils/theme-engine'
-import type { ThemeDoc, ThemePreset, PaletteCurveParams, StyleOptions, Shade, ColorAlias } from '../utils/theme-engine'
+import type { ThemeDoc, ThemePreset, PaletteCurveParams, StyleOptions, Shade, ColorAlias, TokenRamp } from '../utils/theme-engine'
 import { readLocalStorage } from '../utils/theme'
 
 export function useThemeStudio() {
@@ -142,6 +142,18 @@ export function useThemeStudio() {
    * AI theme feature uses.
    */
   function selectPalette(alias: ColorAlias, name: string) {
+    // 'neutral' on primary means the neutral ALIAS, not tailwind's gray ramp
+    // — always a plain alias switch, never a curve seed (fitting from the
+    // gray ramp would silently turn "follow neutral" into a frozen copy).
+    if (alias === 'primary' && name === 'neutral') {
+      if (isCustomPalette(alias)) {
+        clearCustomPalette(alias)
+      }
+      theme.primary.value = 'neutral'
+      setActivePreset(undefined)
+      return
+    }
+
     if (isCustomPalette(alias)) {
       const shades = paletteShades(name)
       if (shades) {
@@ -347,6 +359,17 @@ export function useThemeStudio() {
     track('Theme Studio Shuffled')
   }
 
+  /** Palette-name chips coloring shade-slider swatches — each alias's current ramp. */
+  const neutralChip = computed(() => theme.neutral.value === 'neutral' ? 'old-neutral' : theme.neutral.value)
+  const primaryChip = computed(() => isCustomPalette('primary') ? 'custom-primary' : theme.primary.value)
+
+  function rampChip(ramp: TokenRamp): string {
+    if (ramp === 'primary') return primaryChip.value
+    if (ramp === 'neutral') return neutralChip.value
+    const name = (appConfig.ui.colors as Record<string, string>)[ramp] || ramp
+    return name === 'neutral' ? 'old-neutral' : name
+  }
+
   return {
     presets,
     activePreset,
@@ -360,6 +383,9 @@ export function useThemeStudio() {
     clearCustomPalette,
     applyDoc,
     applyPreset,
-    shuffle
+    shuffle,
+    neutralChip,
+    primaryChip,
+    rampChip
   }
 }
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 163e50a75b..13c938f520 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -136,7 +136,7 @@ const toolbarPinned = computed(() => nearBottom.value || Object.values(openPanel
               toolbarPinned ? 'translate-y-0' : 'translate-y-[calc(100%+6px)] group-hover:translate-y-0 group-focus-within:translate-y-0'
             ]"
           >
-            <UFieldGroup size="sm">
+            <UFieldGroup>
               <UTooltip text="Undo" :kbds="['meta', 'Z']">
                 <UButton
                   icon="i-lucide-undo-2"
@@ -165,7 +165,6 @@ const toolbarPinned = computed(() => nearBottom.value || Object.values(openPanel
                 icon="i-lucide-rotate-ccw"
                 color="neutral"
                 variant="subtle"
-                size="sm"
                 aria-label="Reset theme"
                 @click="resetTheme"
               />
@@ -183,7 +182,6 @@ const toolbarPinned = computed(() => nearBottom.value || Object.values(openPanel
                 :label="settingGroup.label"
                 color="neutral"
                 variant="subtle"
-                size="sm"
                 trailing-icon="i-lucide-chevron-down"
               />
 
@@ -202,21 +200,19 @@ const toolbarPinned = computed(() => nearBottom.value || Object.values(openPanel
               v-model:open="openPanels.view"
               :items="views"
               :icon="views.find(tab => tab.value === view)?.icon"
-              size="sm"
               color="neutral"
               variant="subtle"
               class="w-36 shrink-0"
               :class="!fullscreen && 'lg:hidden'"
             />
 
-            <UColorModeButton size="sm" variant="subtle" />
+            <UColorModeButton variant="subtle" />
 
             <UTooltip :text="fullscreen ? 'Exit fullscreen' : 'Fullscreen preview'" :kbds="fullscreen ? ['Esc'] : undefined">
               <UButton
                 :icon="fullscreen ? 'i-lucide-minimize' : 'i-lucide-maximize'"
                 color="neutral"
                 variant="subtle"
-                size="sm"
                 :aria-label="fullscreen ? 'Exit fullscreen preview' : 'Fullscreen preview'"
                 @click="fullscreen = !fullscreen"
               />
diff --git a/docs/app/plugins/theme.ts b/docs/app/plugins/theme.ts
index dfb557e021..4cd5af8002 100644
--- a/docs/app/plugins/theme.ts
+++ b/docs/app/plugins/theme.ts
@@ -1,6 +1,6 @@
 import { defu } from 'defu'
 import { themeIcons, cssVariableDefaults } from '../utils/theme'
-import { mergeUi } from '../utils/theme-engine'
+import { mergeUi, NEUTRAL_PRIMARY_ROOT } from '../utils/theme-engine'
 
 export default defineNuxtPlugin({
   enforce: 'post',
@@ -88,7 +88,7 @@ export default defineNuxtPlugin({
               if (!primaryColor && !neutralColor) return;
               function swapColors(el) {
                 var html = el.innerHTML;
-                if (primaryColor && primaryColor !== 'black') {
+                if (primaryColor && primaryColor !== 'black' && primaryColor !== 'neutral') {
                   html = html.replace(
                     /(--ui-color-primary-\\d{2,3}:\\s*var\\(--color-)${appConfig.ui.colors.primary}(-\\d{2,3}.*?\\))/g,
                     \`$1\${primaryColor}$2\`
@@ -148,6 +148,17 @@ export default defineNuxtPlugin({
           `.replace(/\s+/g, ' '),
           type: 'text/javascript',
           tagPriority: -1
+        }, {
+          innerHTML: `
+            var napEl = document.querySelector('style#nuxt-ui-neutral-as-primary');
+            if (napEl) {
+              if (localStorage.getItem('nuxt-ui-primary') === 'neutral' && localStorage.getItem('nuxt-ui-black-as-primary') !== 'true') {
+                napEl.innerHTML = ':root { ${NEUTRAL_PRIMARY_ROOT.join(' ')} }';
+              } else {
+                napEl.innerHTML = '';
+              }
+            }
+          `.replace(/\s+/g, ' ')
         }, {
           innerHTML: `
             var bapEl = document.querySelector('style#nuxt-ui-black-as-primary');
diff --git a/docs/app/utils/theme-engine/custom-palettes.ts b/docs/app/utils/theme-engine/custom-palettes.ts
deleted file mode 100644
index c73e428b52..0000000000
--- a/docs/app/utils/theme-engine/custom-palettes.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import type { Shade } from './types'
-
-/**
- * Studio-only palettes, mirrored from the docs' `@theme static` block in
- * main.css. They aren't part of tailwind, so exports referencing them must
- * inline the ramp — a consumer's build has no `--color-sand-*` to resolve.
- */
-export const CUSTOM_PALETTES: Record<string, Record<Shade, string>> = {
-  sand: {
-    50: 'oklch(98% 0.006 84.579)',
-    100: 'oklch(92.7% 0.013 84.455)',
-    200: 'oklch(85.6% 0.02 84.205)',
-    300: 'oklch(75% 0.03 83.784)',
-    400: 'oklch(62.5% 0.041 83.119)',
-    500: 'oklch(52.6% 0.044 82.076)',
-    600: 'oklch(45% 0.038 80.381)',
-    700: 'oklch(38.8% 0.032 77.816)',
-    800: 'oklch(33.4% 0.026 76.102)',
-    900: 'oklch(28.5% 0.021 75.84)',
-    950: 'oklch(24.1% 0.015 76.21)'
-  },
-  sage: {
-    50: 'oklch(97.7% 0.004 134.849)',
-    100: 'oklch(95% 0.01 140.516)',
-    200: 'oklch(90% 0.018 140.022)',
-    300: 'oklch(82.6% 0.029 141.964)',
-    400: 'oklch(71.9% 0.038 142.667)',
-    500: 'oklch(61.7% 0.042 142.713)',
-    600: 'oklch(53% 0.038 143.698)',
-    700: 'oklch(45.7% 0.032 143.377)',
-    800: 'oklch(39.8% 0.026 142.997)',
-    900: 'oklch(35.1% 0.022 145.097)',
-    950: 'oklch(24.2% 0.017 145.041)'
-  },
-  ash: {
-    50: 'oklch(97.3% 0.003 264.542)',
-    100: 'oklch(94% 0.006 264.532)',
-    200: 'oklch(87.8% 0.012 264.505)',
-    300: 'oklch(77.8% 0.02 262.99)',
-    400: 'oklch(64.5% 0.031 263.35)',
-    500: 'oklch(54% 0.036 263.342)',
-    600: 'oklch(45.9% 0.032 264.197)',
-    700: 'oklch(39.7% 0.025 264.228)',
-    800: 'oklch(35.5% 0.021 262.595)',
-    900: 'oklch(31.2% 0.018 262.24)',
-    950: 'oklch(21% 0.012 270.771)'
-  },
-  cocoa: {
-    50: 'oklch(97.5% 0.007 67.745)',
-    100: 'oklch(93.9% 0.015 64.338)',
-    200: 'oklch(87.3% 0.029 65.727)',
-    300: 'oklch(78.7% 0.044 62.544)',
-    400: 'oklch(67.8% 0.064 61.516)',
-    500: 'oklch(57.3% 0.07 62.619)',
-    600: 'oklch(49.6% 0.063 62.025)',
-    700: 'oklch(43% 0.053 61.313)',
-    800: 'oklch(37.7% 0.043 59.008)',
-    900: 'oklch(33.7% 0.035 59.102)',
-    950: 'oklch(22.9% 0.023 57.319)'
-  },
-  marine: {
-    50: 'oklch(97.2% 0.008 253.853)',
-    100: 'oklch(93.9% 0.018 250.593)',
-    200: 'oklch(87.8% 0.037 252.096)',
-    300: 'oklch(78.8% 0.063 252.304)',
-    400: 'oklch(67.5% 0.095 253.08)',
-    500: 'oklch(57.6% 0.114 254.216)',
-    600: 'oklch(49% 0.111 256.206)',
-    700: 'oklch(42.6% 0.092 256.598)',
-    800: 'oklch(37.7% 0.073 257.11)',
-    900: 'oklch(34.5% 0.058 255.734)',
-    950: 'oklch(26.4% 0.036 252.434)'
-  }
-}
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index 24539d146c..6031f1b779 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -1,8 +1,18 @@
 import { themeIcons } from '../theme'
 import type { ThemeDoc } from './types'
-import { DEFAULT_COLORS, THEME_DEFAULTS } from './types'
+import { DEFAULT_COLORS, THEME_DEFAULTS, SHADES } from './types'
 import { styleComponents, styleTokens, mergeUi, BORDER_WIDTH_DEFAULT } from './styles'
 
+/**
+ * The CSS recipe behind `primary: 'neutral'` — the neutral ALIAS, not
+ * tailwind's gray ramp. The primary scale mirrors whatever neutral
+ * resolves to (stock, tinted or custom), so primary IS the selected
+ * neutral palette; the accent stays on the standard 500/400 recipe,
+ * which the mirror redirects — a deliberate monochrome accent, distinct
+ * from black-as-primary.
+ */
+export const NEUTRAL_PRIMARY_ROOT = SHADES.map(shade => `--ui-color-primary-${shade}: var(--ui-color-neutral-${shade});`)
+
 /**
  * Generate the minimal `main.css`. The document only holds overrides, so
  * everything present is emitted and nothing else.
@@ -56,6 +66,8 @@ export function generateCSS(doc: ThemeDoc): string {
   }
   if (doc.blackAsPrimary) {
     rootLines.push('  --ui-primary: black;')
+  } else if (doc.colors?.primary === 'neutral') {
+    rootLines.push(...NEUTRAL_PRIMARY_ROOT.map(line => `  ${line}`))
   }
 
   if (rootLines.length) {
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index e739a86392..ae836c2e4a 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -38,6 +38,13 @@ interface ParsedCSS {
   fontSize?: number
   radius?: number
   blackAsPrimary?: boolean
+  /**
+   * `--ui-color-primary-N: var(--ui-color-neutral-N)` mirror lines. A
+   * complete set is the neutral-as-primary recipe (folded back into
+   * `colors.primary = 'neutral'`); anything partial is hand-written and
+   * survives as plain token overrides.
+   */
+  primaryMirror: Record<string, string>
   /** From @theme --default-border-width — the export's width channel. */
   borderWidth?: number
   light: Record<string, string>
@@ -46,7 +53,7 @@ interface ParsedCSS {
 }
 
 function parseCSS(css: string): ParsedCSS {
-  const result: ParsedCSS = { palettes: {}, light: {}, dark: {}, skipped: [] }
+  const result: ParsedCSS = { palettes: {}, primaryMirror: {}, light: {}, dark: {}, skipped: [] }
   const clean = css.replace(/\/\*[\s\S]*?\*\//g, '')
 
   const blockRe = /([^{}]+)\{([^{}]*)\}/g
@@ -133,6 +140,11 @@ function parseDeclaration(result: ParsedCSS, selector: string, prop: string, val
       result.blackAsPrimary = true
       return true
     }
+    const mirror = prop.match(/^--ui-color-primary-(\d{2,3})$/)
+    if (mirror && value === `var(--ui-color-neutral-${mirror[1]})`) {
+      result.primaryMirror[prop] = value
+      return true
+    }
     if (prop === '--spacing' && value.endsWith('rem')) {
       result.spacing = Number.parseFloat(value)
       return true
@@ -691,6 +703,14 @@ export function importTheme(input: { css?: string, config?: string }): ThemeImpo
       // its .dark counterpart is generated, not a token choice
       if (css.dark['--ui-primary'] === 'white') delete css.dark['--ui-primary']
     }
+    if (SHADES.every(shade => css.primaryMirror[`--ui-color-primary-${shade}`])) {
+      // the complete mirror is the neutral-as-primary recipe — a choice,
+      // not eleven token overrides
+      doc.colors = { ...doc.colors, primary: 'neutral' }
+    } else if (Object.keys(css.primaryMirror).length) {
+      // a partial mirror is deliberate hand-written overrides
+      Object.assign(css.light, css.primaryMirror)
+    }
     if (Object.keys(css.light).length || Object.keys(css.dark).length) {
       doc.tokens = {
         ...(Object.keys(css.light).length ? { light: css.light } : {}),
diff --git a/docs/app/utils/theme-engine/index.ts b/docs/app/utils/theme-engine/index.ts
index 0374251bbe..860d80b660 100644
--- a/docs/app/utils/theme-engine/index.ts
+++ b/docs/app/utils/theme-engine/index.ts
@@ -6,4 +6,3 @@ export * from './presets'
 export * from './oklch'
 export * from './palette'
 export * from './styles'
-export * from './custom-palettes'
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 7f43c2725f..a7933f8011 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -14,8 +14,7 @@ import {
   parseColor,
   contrastRatio,
   CURVE_DEFAULTS,
-  SHADES,
-  CUSTOM_PALETTES
+  SHADES
 } from '../../docs/app/utils/theme-engine'
 import type { ThemeDoc } from '../../docs/app/utils/theme-engine'
 import colors from 'tailwindcss/colors'
@@ -230,15 +229,23 @@ describe('theme-engine', () => {
     })
 
     it('fitPalette accepts hex and oklch inputs equivalently', () => {
-      // The hex ramp CUSTOM_PALETTES.cocoa was converted from.
       const cocoaHex = {
         50: '#FAF6F2', 100: '#F2E9E1', 200: '#E3D2C2', 300: '#CFB49D',
         400: '#B58F6F', 500: '#966F4C', 600: '#7C5A3C', 700: '#654931',
         800: '#533C2A', 900: '#453325', 950: '#251A12'
       } as const
+      // The same ramp converted to oklch.
+      const cocoaOklch = {
+        50: 'oklch(97.5% 0.007 67.745)', 100: 'oklch(93.9% 0.015 64.338)',
+        200: 'oklch(87.3% 0.029 65.727)', 300: 'oklch(78.7% 0.044 62.544)',
+        400: 'oklch(67.8% 0.064 61.516)', 500: 'oklch(57.3% 0.07 62.619)',
+        600: 'oklch(49.6% 0.063 62.025)', 700: 'oklch(43% 0.053 61.313)',
+        800: 'oklch(37.7% 0.043 59.008)', 900: 'oklch(33.7% 0.035 59.102)',
+        950: 'oklch(22.9% 0.023 57.319)'
+      } as const
 
       const fromHex = generatePalette(fitPalette(cocoaHex))
-      const fromOklch = generatePalette(fitPalette(CUSTOM_PALETTES.cocoa!))
+      const fromOklch = generatePalette(fitPalette(cocoaOklch))
 
       // The fit is a numeric optimization — rounded oklch inputs may land a
       // hair off the full-precision hex fit, so compare channels, not strings.
@@ -263,12 +270,7 @@ describe('theme-engine', () => {
       expect(contrastRatio('#FFFFFF', 'oklch(100% 0 0)')).toBeCloseTo(1, 1)
     })
 
-    it('studio and preset ramps are stored as canonical oklch', () => {
-      for (const [name, shades] of Object.entries(CUSTOM_PALETTES)) {
-        for (const [shade, value] of Object.entries(shades)) {
-          expect(value, `${name}-${shade}`).toMatch(CANONICAL_OKLCH)
-        }
-      }
+    it('preset ramps are stored as canonical oklch', () => {
       for (const preset of presets) {
         for (const [name, palette] of Object.entries(preset.doc.palettes || {})) {
           for (const [shade, value] of Object.entries(palette.shades)) {
diff --git a/test/utils/theme-import.spec.ts b/test/utils/theme-import.spec.ts
index 0d58cc4de9..b4c6059506 100644
--- a/test/utils/theme-import.spec.ts
+++ b/test/utils/theme-import.spec.ts
@@ -151,6 +151,40 @@ describe('importTheme', () => {
     expect(doc.tokens?.dark?.['--ui-frame-color']).toBe('#ff0000')
   })
 
+  it('round-trips neutral as primary', () => {
+    const original: ThemeDoc = { version: 1, colors: { primary: 'neutral' } }
+    const css = generateCSS(original)
+    const config = generateConfig(original)
+    const { doc: imported, skipped } = importTheme({ css, config })
+
+    // The recipe (primary scale mirroring neutral + the inverted accent) is
+    // generated from the choice, not a set of token overrides.
+    expect(skipped).toEqual([])
+    expect(imported.colors?.primary).toBe('neutral')
+    expect(imported.tokens).toBeUndefined()
+    expect(generateCSS(imported)).toBe(css)
+    expect(generateConfig(imported)).toBe(config)
+  })
+
+  it('reads neutral as primary from CSS alone', () => {
+    const { doc, skipped } = importTheme({ css: generateCSS({ version: 1, colors: { primary: 'neutral' } }) })
+
+    expect(skipped).toEqual([])
+    expect(doc.colors?.primary).toBe('neutral')
+  })
+
+  it('keeps a lone primary mirror line as a token override', () => {
+    const { doc, skipped } = importTheme({
+      css: ':root {\n  --ui-color-primary-500: var(--ui-color-neutral-500);\n}'
+    })
+
+    // Without the accent marker this is a deliberate hand-written override,
+    // not the neutral-as-primary recipe — it must survive, not vanish.
+    expect(skipped).toEqual([])
+    expect(doc.colors?.primary).toBeUndefined()
+    expect(doc.tokens?.light?.['--ui-color-primary-500']).toBe('var(--ui-color-neutral-500)')
+  })
+
   it('round-trips per-group default colors', () => {
     const doc: ThemeDoc = {
       version: 1,

From f41c925f0410d222a186ed2b5a1c03156825da21 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Fri, 10 Jul 2026 17:21:42 +0200
Subject: [PATCH 118/185] feat(docs): collapsible studio sections, reworked
 palette modifiers and toolbar polish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Every settings section folds behind a ghost trigger button with a
  LEADING chevron (the disclosure cue that tells folds from selects);
  help links and the edit/shades toggles sit beside it as their own
  buttons — stopped clicks, with actions forcing a collapsed section
  open. Semantic regains its help link, closed by default
- Palette modifiers drop the preset dropdown for an always-there fold:
  an eye-labelled strength row plus the photo-editing quartet
  (lightness, contrast about the ramp midpoint, saturation as scale
  with an additive floor so grays respond, hue), all idempotent from
  the fitted base, with a reset beside the trigger
- Swatch clicks always really select: an active custom palette is
  cleared (curves, params, remaps) instead of silently reseeding, so
  the menu names the choice instead of a stale Custom
- Grid tiles become real UCards, inheriting panel default variants and
  style treatments; SIZE_SUPPORT widens to every xs–xl component (tabs,
  toggles, sliders, menus, calendar, field/form groups) with a
  round-trip test
- Toolbar: history/reset move to the right cluster, fullscreen caps the
  row, the color-mode switch caps the left cluster; slider readouts
  truncate with a title fallback and shave leading zeros; studio-wide
  text-xs/gap alignment; shade-slider fills keep a hairline inset ring
  so they never vanish into the panel background

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/components/header/Header.vue         |   1 -
 .../components/playground/PlaygroundCard.vue  |  10 +-
 .../theme-studio/ThemeStudioColorMenu.vue     |   6 +-
 .../theme-studio/ThemeStudioColorSection.vue  |  32 +--
 .../theme-studio/ThemeStudioControls.vue      |  17 +-
 .../theme-studio/ThemeStudioPaletteEditor.vue | 252 +++++++-----------
 .../theme-studio/ThemeStudioSection.vue       |  50 +++-
 .../theme-studio/ThemeStudioShadeSlider.vue   |   2 +-
 .../theme-studio/ThemeStudioSliderRow.vue     |  15 +-
 docs/app/composables/useThemeStudio.ts        |  31 +--
 docs/app/pages/theme.vue                      |  78 +++---
 docs/app/utils/theme-engine/styles.ts         |  12 +-
 test/utils/theme-import.spec.ts               |  11 +
 13 files changed, 251 insertions(+), 266 deletions(-)

diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index 344e3ea9ab..8ee143d14d 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -95,7 +95,6 @@ const studioMenuLinks = [{
           :items="views"
           :content="false"
           color="primary"
-          size="sm"
         />
       </template>
 
diff --git a/docs/app/components/playground/PlaygroundCard.vue b/docs/app/components/playground/PlaygroundCard.vue
index b7702e498b..60a69a6857 100644
--- a/docs/app/components/playground/PlaygroundCard.vue
+++ b/docs/app/components/playground/PlaygroundCard.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="relative isolate break-inside-avoid mb-4 rounded-xl ring ring-default bg-default shadow-sm overflow-hidden">
+  <!-- A real UCard (no explicit variant) so the studio's panel defaults
+       and style treatments apply to the grid tiles too. Tiles bring their
+       own padding — the body slot contributes none. -->
+  <UCard
+    class="relative isolate break-inside-avoid mb-4 rounded-xl shadow-sm overflow-hidden"
+    :ui="{ body: 'p-0 sm:p-0' }"
+  >
     <slot />
-  </div>
+  </UCard>
 </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioColorMenu.vue b/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
index 56129bf0e1..9e1cc15ff5 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
@@ -20,7 +20,7 @@ const sections = computed(() => {
   if (props.alias === 'neutral') {
     return [
       { label: 'Neutrals', colors: neutralColors },
-      { label: 'Colors', colors: primaryColors, hint: 'These may need some adjustment for comfortable use, try the modifiers in the palette editor.' }
+      { label: 'Colors', colors: primaryColors, hint: 'These may need some adjustment, try the modifiers in the editor' }
     ]
   }
   if (props.alias === 'primary') return [{ label: 'Colors', colors: primaryColors }]
@@ -101,11 +101,11 @@ function isSelected(color: string) {
         </ThemeStudioPickerButton>
 
         <div v-for="(section, index) in sections" :key="section.label">
-          <p class="text-[11px] font-semibold text-muted px-1 mb-0.5 select-none">
+          <p class="text-sm font-semibold text-highlighted px-1 mb-2 select-none">
             {{ section.label }}
           </p>
 
-          <p v-if="section.hint" class="text-[10px] text-muted px-1 mb-1 select-none">
+          <p v-if="section.hint" class="text-xs text-muted px-1 mb-2 -mt-1.5 select-none">
             {{ section.hint }}
           </p>
 
diff --git a/docs/app/components/theme-studio/ThemeStudioColorSection.vue b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
index fb4aada378..29694d434e 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
@@ -15,7 +15,7 @@ const props = defineProps<{
   helpTo?: string
 }>()
 
-const { isCustomPalette, style, setStyle, rampChip } = useThemeStudio()
+const { style, setStyle, rampChip } = useThemeStudio()
 
 const title = computed(() => props.label ?? props.alias.charAt(0).toUpperCase() + props.alias.slice(1))
 
@@ -62,17 +62,19 @@ const openGroups = reactive<Record<string, boolean>>({})
 <template>
   <ThemeStudioSection :label="title" :help-to="helpTo">
     <template #actions>
-      <UButton
-        :icon="isCustomPalette(alias) ? 'i-lucide-paintbrush' : 'i-lucide-pencil'"
-        color="neutral"
-        variant="ghost"
-        size="xs"
-        :active="paletteEditor || isCustomPalette(alias)"
-        active-color="primary"
-        active-variant="subtle"
-        :aria-label="`Edit ${alias} palette`"
-        @click="paletteEditor = !paletteEditor"
-      />
+      <UTooltip text="Edit palette">
+        <UButton
+          icon="i-lucide-pencil"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          :active="paletteEditor"
+          active-color="primary"
+          active-variant="subtle"
+          :aria-label="`Edit ${alias} palette`"
+          @click="paletteEditor = !paletteEditor"
+        />
+      </UTooltip>
 
       <UTooltip text="Adjust shades">
         <UButton
@@ -110,18 +112,18 @@ const openGroups = reactive<Record<string, boolean>>({})
         <UCollapsible v-for="tokenGroup in tokenGroups" :key="tokenGroup.key" v-model:open="openGroups[tokenGroup.key]">
           <UButton
             :label="tokenGroup.label"
+            :icon="openGroups[tokenGroup.key] ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
             color="neutral"
             variant="ghost"
             size="sm"
             block
-            class="justify-between"
-            :trailing-icon="openGroups[tokenGroup.key] ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+            class="justify-start"
           />
 
           <template #content>
             <div class="flex flex-col gap-3 pt-2 pb-1 px-1">
               <div v-for="section in tokenGroup.sections" :key="section.token" class="flex flex-col gap-1.5">
-                <span class="text-[11px] text-muted select-none">{{ section.label }}</span>
+                <span class="text-xs text-muted select-none">{{ section.label }}</span>
 
                 <ThemeStudioShadeSlider
                   v-for="(slider, modeName) in section.sliders"
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index b43e4f2d2a..f23f2f4662 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -268,7 +268,7 @@ const shadowColor = computed({
 
         <USeparator />
 
-        <ThemeStudioSection label="Semantic" help-to="/docs/getting-started/theme/design-system">
+        <ThemeStudioSection label="Semantic" help-to="/docs/getting-started/theme/design-system" :default-open="false">
           <div class="flex flex-col gap-3 pt-1">
             <ThemeStudioColorSection v-for="alias in semanticAliases" :key="alias" :alias="alias" />
           </div>
@@ -277,7 +277,7 @@ const shadowColor = computed({
     </template>
 
     <template v-else-if="group === 'style'">
-      <div class="flex flex-col gap-2.5">
+      <div class="flex flex-col gap-4">
         <ThemeStudioSection label="Shadow">
           <div>
             <div class="grid grid-cols-3 gap-1">
@@ -295,6 +295,7 @@ const shadowColor = computed({
                 v-model="shadowColor"
                 size="sm"
                 color="neutral"
+                variant="subtle"
                 icon="i-lucide-paint-bucket"
                 :items="shadowColorItems"
                 class="w-full"
@@ -354,6 +355,7 @@ const shadowColor = computed({
                 v-model="innerShadowColor"
                 size="sm"
                 color="neutral"
+                variant="ghost"
                 icon="i-lucide-paint-bucket"
                 :items="shadowColorItems"
                 class="w-full"
@@ -419,7 +421,7 @@ const shadowColor = computed({
               />
 
               <div class="flex items-center gap-2">
-                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Frame</span>
+                <span class="text-xs text-muted w-13 shrink-0 select-none">Frame</span>
 
                 <UTooltip text="Outline solid surfaces too — the neobrutalist look">
                   <USwitch v-model="frameSolids" size="sm" aria-label="Frame solid surfaces" />
@@ -430,6 +432,7 @@ const shadowColor = computed({
                 v-model="borderColor"
                 size="sm"
                 color="neutral"
+                variant="subtle"
                 icon="i-lucide-paint-bucket"
                 :items="borderColorItems"
                 class="w-full"
@@ -451,7 +454,7 @@ const shadowColor = computed({
     </template>
 
     <template v-else-if="group === 'general'">
-      <div class="flex flex-col gap-2.5">
+      <div class="flex flex-col gap-4">
         <ThemeStudioSection label="Font" help-to="/docs/getting-started/integrations/fonts">
           <div>
             <USelect
@@ -508,7 +511,7 @@ const shadowColor = computed({
             <ThemeStudioSliderRow v-model="spacing" label="Spacing" :min="0.15" :max="0.35" :step="0.025" />
 
             <div class="flex items-center gap-2">
-              <span class="text-[11px] text-muted w-13 shrink-0 select-none">Size</span>
+              <span class="text-xs text-muted w-13 shrink-0 select-none">Size</span>
 
               <USelect
                 v-model="defaultSize"
@@ -529,7 +532,7 @@ const shadowColor = computed({
           <ThemeStudioSection :label="field.label">
             <div class="flex flex-col gap-1.5">
               <div class="flex items-center gap-2">
-                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Variant</span>
+                <span class="text-xs text-muted w-13 shrink-0 select-none">Variant</span>
 
                 <USelect
                   v-model="groupVariants[field.key].value"
@@ -543,7 +546,7 @@ const shadowColor = computed({
               </div>
 
               <div v-if="field.hasColor" class="flex items-center gap-2">
-                <span class="text-[11px] text-muted w-13 shrink-0 select-none">Color</span>
+                <span class="text-xs text-muted w-13 shrink-0 select-none">Color</span>
 
                 <USelect
                   v-model="groupColors[field.key].value"
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index ac5e6325d1..ae7d4dcf76 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 }>()
 
 const appConfig = useAppConfig()
-const { paletteParams, isCustomPalette, paletteShades, setPaletteFromCurve, clearCustomPalette } = useThemeStudio()
+const { paletteParams, isCustomPalette, paletteShades, setPaletteFromCurve } = useThemeStudio()
 
 const open = defineModel<boolean>('open', { default: false })
 const tab = ref<'lightness' | 'chroma' | 'hue'>('lightness')
@@ -99,15 +99,7 @@ function normalizeHue(values: PaletteCurveParams) {
   }
 }
 
-const styleOffset = ref('fitted')
-
-/**
- * Effect strength: 100% is the offset as designed, lower blends back toward
- * the fitted base, above 100% extrapolates past it for a stronger take.
- */
-const offsetAmount = ref(100)
-
-/** Fitted base the style offsets transform from, so they never compound. */
+/** Fitted base the modifiers transform from, so they never compound. */
 let seedBase: PaletteCurveParams = structuredClone(toRaw(params))
 
 // Throttled (not debounced) so the theme streams live while dragging a
@@ -127,10 +119,8 @@ function seed(values: PaletteCurveParams) {
   const next = structuredClone(toRaw(values))
   normalizeHue(next)
   seedBase = structuredClone(next)
-  styleOffset.value = 'fitted'
-  offsetAmount.value = 100
-  lastPreset = 'fitted'
   Object.assign(effects, EFFECT_DEFAULTS)
+  effectAmount.value = 100
   ignoreUpdates(() => {
     Object.assign(params, next)
   })
@@ -191,17 +181,8 @@ watch([() => (appConfig.ui.colors as Record<string, string>)[props.alias], open]
   }
 })
 
-const styleOffsetItems = [
-  { label: 'Fitted', value: 'fitted' },
-  { label: 'Pastel', value: 'pastel' },
-  { label: 'Muted', value: 'muted' },
-  { label: 'Vivid', value: 'vivid' },
-  { label: 'Dazzling', value: 'dazzling' },
-  { label: 'Custom', value: 'custom' }
-]
-
 // Scale AND offset: a pure multiply barely moves low-chroma (gray) ramps,
-// so the boosting presets add a flat chroma floor that registers there too.
+// so a flat chroma term registers there too.
 function scaleChroma(curve: PaletteCurveParams['chroma'], factor: number, offset = 0) {
   curve.y0 = Math.max(0, curve.y0 * factor + offset)
   curve.y1 = Math.max(0, curve.y1 * factor + offset)
@@ -209,133 +190,75 @@ function scaleChroma(curve: PaletteCurveParams['chroma'], factor: number, offset
   curve.p2y = Math.max(0, curve.p2y * factor + offset)
 }
 
-/** Linearly remap a lightness curve onto new endpoints, preserving its shape. */
-function remapLightness(curve: PaletteCurveParams['lightness'], newY0: number, newY1: number) {
-  const oldY0 = curve.y0
-  const oldY1 = curve.y1
-  const span = oldY0 - oldY1 || 1e-6
-  const map = (value: number) => newY1 + ((value - oldY1) / span) * (newY0 - newY1)
-  curve.p1y = map(curve.p1y)
-  curve.p2y = map(curve.p2y)
-  curve.y0 = newY0
-  curve.y1 = newY1
-}
-
-const CURVE_KEYS = ['y0', 'y1', 'p1x', 'p1y', 'p2x', 'p2y'] as const
-
-function lerpParams(base: PaletteCurveParams, target: PaletteCurveParams, t: number): PaletteCurveParams {
-  const result = structuredClone(target)
-  for (const channel of ['lightness', 'chroma', 'hue'] as const) {
-    for (const key of CURVE_KEYS) {
-      const value = base[channel][key] + (target[channel][key] - base[channel][key]) * t
-      // Extrapolated chroma can cross zero; keep it a real chroma.
-      result[channel][key] = channel === 'chroma' ? Math.max(0, value) : value
-    }
-  }
-  return result
-}
-
-/** Apply a taste offset ON TOP of the fitted base (idempotent, not cumulative). */
-function applyStyleOffset(name: string) {
-  const target = structuredClone(seedBase)
-
-  if (name === 'pastel') {
-    // Candy pastels: compress the lightness range from BOTH ends (nothing
-    // near-white, nothing dark) and push chroma UP so the softness stays
-    // colorful — the gamut clamp keeps the very light stops in check.
-    remapLightness(target.lightness, Math.min(target.lightness.y0, 0.945), Math.max(target.lightness.y1, 0.52))
-    scaleChroma(target.chroma, 1.35, 0.01)
-  } else if (name === 'muted') {
-    scaleChroma(target.chroma, 0.55)
-  } else if (name === 'vivid') {
-    scaleChroma(target.chroma, 1.45, 0.015)
-  } else if (name === 'dazzling') {
-    scaleChroma(target.chroma, 2, 0.03)
-  }
-
-  const next = name === 'fitted' ? target : lerpParams(seedBase, target, offsetAmount.value / 100)
-
-  // Not seed(): this IS a user edit, the watcher should live-apply it.
-  Object.assign(params, next)
-}
-
 /* ------------------------------------------------------ custom effects -- */
 
 /**
- * The Custom modifier: independent effects layered on top of the fitted
- * base — lightness shift, contrast about the ramp's own midpoint, chroma
- * scale AND flat offset (the offset is what moves gray ramps), hue
- * rotation. Idempotent like the presets: always recomputed from seedBase.
+ * Modifiers: the photo-editing quartet layered on top of the fitted base —
+ * lightness shift, contrast about the ramp's own midpoint, saturation
+ * (multiplicative with an additive floor, so gray ramps respond too) and
+ * hue rotation. Idempotent: always recomputed from seedBase, never
+ * compounding.
  */
-const EFFECT_DEFAULTS = { lightness: 0, contrast: 0, chromaScale: 100, chromaOffset: 0, hueShift: 0 }
+const EFFECT_DEFAULTS = { lightness: 0, contrast: 0, saturation: 0, hueShift: 0 }
 const effects = reactive({ ...EFFECT_DEFAULTS })
 
+/**
+ * Overall strength: 100% applies the sliders as set, lower blends back
+ * toward the fitted base, above 100% extrapolates past them.
+ */
+const effectAmount = ref(100)
+
+/** The modifiers fold — closed by default like the other advanced panels. */
+const modifiersOpen = ref(false)
+
 const effectRows = [
   { key: 'lightness', label: 'Lightness', min: -30, max: 30, step: 1, unit: '%' },
   { key: 'contrast', label: 'Contrast', min: -50, max: 50, step: 1, unit: '%' },
-  { key: 'chromaScale', label: 'Saturation', min: 0, max: 300, step: 5, unit: '%' },
-  { key: 'chromaOffset', label: 'Chroma +', min: -100, max: 100, step: 5, unit: '' },
+  { key: 'saturation', label: 'Saturation', min: -100, max: 200, step: 5, unit: '%' },
   { key: 'hueShift', label: 'Hue', min: -180, max: 180, step: 5, unit: '°' }
 ] as const
 
-/** Where each preset lands in effect terms — Custom picks up from the active preset. */
-const PRESET_EFFECTS: Record<string, Partial<typeof EFFECT_DEFAULTS>> = {
-  muted: { chromaScale: 55 },
-  vivid: { chromaScale: 145, chromaOffset: 15 },
-  dazzling: { chromaScale: 200, chromaOffset: 30 },
-  // Approximation — the real pastel remaps lightness to absolute endpoints.
-  pastel: { lightness: 8, contrast: -30, chromaScale: 135, chromaOffset: 10 }
-}
-
-function seedEffects(preset: string, amount: number) {
-  const target = { ...EFFECT_DEFAULTS, ...PRESET_EFFECTS[preset] }
-  for (const key of Object.keys(EFFECT_DEFAULTS) as Array<keyof typeof EFFECT_DEFAULTS>) {
-    effects[key] = Math.round(EFFECT_DEFAULTS[key] + (target[key] - EFFECT_DEFAULTS[key]) * amount)
-  }
-}
-
 function applyEffects() {
   const target = structuredClone(seedBase)
 
+  // The strength slider scales every effect's distance from its default.
+  const amount = effectAmount.value / 100
+  const effective = (key: keyof typeof EFFECT_DEFAULTS) =>
+    EFFECT_DEFAULTS[key] + (effects[key] - EFFECT_DEFAULTS[key]) * amount
+
   // Lightness: contrast expands/compresses about the curve's own midpoint,
   // then the shift slides the whole ramp.
   const lightness = target.lightness
   const mid = (lightness.y0 + lightness.y1) / 2
-  const span = 1 + effects.contrast / 100
-  const shift = effects.lightness / 100
+  const span = 1 + effective('contrast') / 100
+  const shift = effective('lightness') / 100
   const mapLightness = (value: number) => mid + (value - mid) * span + shift
   lightness.y0 = mapLightness(lightness.y0)
   lightness.y1 = mapLightness(lightness.y1)
   lightness.p1y = mapLightness(lightness.p1y)
   lightness.p2y = mapLightness(lightness.p2y)
 
-  scaleChroma(target.chroma, effects.chromaScale / 100, effects.chromaOffset / 1000)
+  // Saturation: scale for colorful ramps, plus a small additive floor when
+  // boosting so near-gray ramps (where a multiply is a no-op) respond too.
+  const saturation = effective('saturation') / 100
+  scaleChroma(target.chroma, 1 + saturation, Math.max(0, saturation) * 0.02)
 
-  target.hue.y0 += effects.hueShift
-  target.hue.y1 += effects.hueShift
-  target.hue.p1y += effects.hueShift
-  target.hue.p2y += effects.hueShift
+  const hueShift = effective('hueShift')
+  target.hue.y0 += hueShift
+  target.hue.y1 += hueShift
+  target.hue.p1y += hueShift
+  target.hue.p2y += hueShift
 
-  // A user edit, like the presets — the watcher live-applies it.
+  // A user edit — the watcher live-applies it.
   Object.assign(params, target)
 }
 
-/** The last non-custom choice, so Custom starts from the look on screen. */
-let lastPreset = 'fitted'
+const effectsDirty = computed(() => effectAmount.value !== 100 || effectRows.some(row => effects[row.key] !== EFFECT_DEFAULTS[row.key]))
 
-function onOffsetSelect(name: string) {
-  if (name === 'custom') {
-    seedEffects(lastPreset, offsetAmount.value / 100)
-    applyEffects()
-  } else {
-    lastPreset = name
-    applyStyleOffset(name)
-  }
-}
-
-function remove() {
-  clearCustomPalette(props.alias)
-  open.value = false
+function resetEffects() {
+  Object.assign(effects, EFFECT_DEFAULTS)
+  effectAmount.value = 100
+  applyEffects()
 }
 </script>
 
@@ -370,54 +293,61 @@ function remove() {
           </div>
         </div>
 
-        <div class="flex items-center gap-1.5">
-          <USelect
-            v-model="styleOffset"
-            size="sm"
-            color="neutral"
-            icon="i-lucide-sparkles"
-            :items="styleOffsetItems"
-            class="flex-1"
-            @update:model-value="onOffsetSelect($event as string)"
-          />
-
-          <UTooltip v-if="active" text="Remove custom palette">
+        <!-- Layered modifiers, each recomputed from the fitted base. The
+             whole trigger group toggles the fold; the reset stops the click
+             so it only resets. -->
+        <UCollapsible v-model:open="modifiersOpen">
+          <div class="flex items-center gap-1">
             <UButton
-              icon="i-lucide-trash-2"
+              label="Modifiers"
+              :icon="modifiersOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
               color="neutral"
-              variant="soft"
+              variant="ghost"
               size="sm"
-              aria-label="Remove custom palette"
-              @click="remove"
+              block
+              class="justify-start"
             />
-          </UTooltip>
-        </div>
 
-        <ThemeStudioSliderRow
-          v-if="styleOffset !== 'fitted' && styleOffset !== 'custom'"
-          v-model="offsetAmount"
-          label="Effect"
-          :min="0"
-          :max="200"
-          :step="5"
-          unit="%"
-          @update:model-value="applyStyleOffset(styleOffset)"
-        />
+            <UTooltip text="Reset modifiers">
+              <UButton
+                icon="i-lucide-rotate-ccw"
+                color="neutral"
+                variant="subtle"
+                size="sm"
+                :disabled="!effectsDirty"
+                aria-label="Reset modifiers"
+                @click.stop="resetEffects"
+              />
+            </UTooltip>
+          </div>
 
-        <!-- Layered custom effects, each recomputed from the fitted base. -->
-        <div v-else-if="styleOffset === 'custom'" class="flex flex-col gap-1.5">
-          <ThemeStudioSliderRow
-            v-for="row in effectRows"
-            :key="row.key"
-            v-model="effects[row.key]"
-            :label="row.label"
-            :min="row.min"
-            :max="row.max"
-            :step="row.step"
-            :unit="row.unit"
-            @update:model-value="applyEffects()"
-          />
-        </div>
+          <template #content>
+            <div class="flex flex-col gap-1.5 pt-2 px-1">
+              <ThemeStudioSliderRow
+                v-model="effectAmount"
+                label="Effect"
+                icon="i-lucide-eye"
+                :min="0"
+                :max="200"
+                :step="5"
+                unit="%"
+                @update:model-value="applyEffects()"
+              />
+
+              <ThemeStudioSliderRow
+                v-for="row in effectRows"
+                :key="row.key"
+                v-model="effects[row.key]"
+                :label="row.label"
+                :min="row.min"
+                :max="row.max"
+                :step="row.step"
+                :unit="row.unit"
+                @update:model-value="applyEffects()"
+              />
+            </div>
+          </template>
+        </UCollapsible>
       </div>
     </template>
   </UCollapsible>
diff --git a/docs/app/components/theme-studio/ThemeStudioSection.vue b/docs/app/components/theme-studio/ThemeStudioSection.vue
index 9d26e51805..54baffede8 100644
--- a/docs/app/components/theme-studio/ThemeStudioSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSection.vue
@@ -1,38 +1,64 @@
 <script setup lang="ts">
-/** One settings section: a plain header row above its always-visible controls. */
-defineProps<{
+/**
+ * One settings section, folded behind a full-width trigger button (the
+ * Semantic/Modifiers treatment). The help link and action toggles sit
+ * beside the trigger as their own buttons — they stop the click so they
+ * never toggle the fold; actions force it open instead, so what they
+ * reveal is visible.
+ */
+const props = withDefaults(defineProps<{
   label: string
   /** Docs page the header's help icon links to */
   helpTo?: string
-}>()
+  defaultOpen?: boolean
+}>(), {
+  defaultOpen: true
+})
 
 const slots = defineSlots<{
   default: () => any
-  /** Right-aligned controls in the header row (edit/adjust toggles). */
+  /** Controls beside the trigger (edit/adjust toggles). */
   actions: () => any
 }>()
+
+const open = ref(props.defaultOpen)
 </script>
 
 <template>
-  <div>
-    <div class="flex items-center gap-1 mb-1.5">
-      <span class="text-xs font-semibold text-highlighted select-none">{{ label }}</span>
+  <UCollapsible v-model:open="open">
+    <div class="flex items-center gap-1">
+      <!-- Leading chevron: the disclosure cue that tells a fold trigger
+           apart from a select (whose chevron trails). -->
+      <UButton
+        :label="label"
+        :icon="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        block
+        class="justify-start flex-1"
+      />
 
       <UButton
         v-if="helpTo"
         :to="helpTo"
-        size="xs"
+        size="sm"
         color="neutral"
         variant="ghost"
         icon="i-lucide-help-circle"
-        :ui="{ leadingIcon: 'size-3' }"
+        aria-label="About this setting"
+        @click.stop
       />
 
-      <div v-if="!!slots.actions" class="ms-auto flex items-center gap-1.5">
+      <div v-if="!!slots.actions" class="flex items-center gap-1" @click.stop="open = true">
         <slot name="actions" />
       </div>
     </div>
 
-    <slot />
-  </div>
+    <template #content>
+      <div class="pt-2">
+        <slot />
+      </div>
+    </template>
+  </UCollapsible>
 </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue b/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue
index 9e6a31f1a1..8105263d1a 100644
--- a/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue
+++ b/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue
@@ -37,6 +37,6 @@ const index = defineModel<number>({ required: true })
       }"
     />
 
-    <span class="text-[11px] text-dimmed font-mono w-7 text-right shrink-0">{{ SHADES[index] }}</span>
+    <span class="text-xs text-dimmed font-mono w-7 text-right shrink-0 truncate" :title="String(SHADES[index])">{{ SHADES[index] }}</span>
   </div>
 </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
index f9304a9360..4900b29a4f 100644
--- a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 /** The studio's standard control row: tiny label, slider, monospace readout. */
-defineProps<{
+const props = defineProps<{
+  /** Names the slider (aria) — shown unless an icon replaces it. */
   label: string
+  /** Rendered in place of the label text. */
+  icon?: string
   min: number
   max: number
   step: number
@@ -10,11 +13,17 @@ defineProps<{
 }>()
 
 const value = defineModel<number>({ required: true })
+
+/** `0.25rem` reads as `.25rem` — the leading zero is noise at this width. */
+const display = computed(() => `${String(value.value).replace(/^(-?)0\./, '$1.')}${props.unit ?? ''}`)
 </script>
 
 <template>
   <div class="flex items-center gap-2">
-    <span class="text-[11px] text-muted w-13 shrink-0 select-none">{{ label }}</span>
+    <span class="text-xs text-muted w-13 shrink-0 select-none flex items-center">
+      <UIcon v-if="icon" :name="icon" class="size-3.5" />
+      <template v-else>{{ label }}</template>
+    </span>
 
     <USlider
       v-model="value"
@@ -25,6 +34,6 @@ const value = defineModel<number>({ required: true })
       :aria-label="label"
     />
 
-    <span class="text-[11px] text-dimmed font-mono w-10 text-right shrink-0">{{ value }}{{ unit }}</span>
+    <span class="text-xs text-dimmed font-mono w-10 text-right shrink-0 truncate" :title="display">{{ display }}</span>
   </div>
 </template>
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 34130527b2..1e55542b1e 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,6 +1,6 @@
 import colors from 'tailwindcss/colors'
 import { THEME_STATE_KEYS, THEME_STORAGE_KEYS } from '../utils/theme-keys'
-import { presets, docToSettings, isDefaultTheme, generatePalette, fitPalette, parseCssColor, parseUiColorRef, styleComponents, styleTokens, DEFAULT_COLORS, SHADES, TOKEN_SHADE_TARGETS } from '../utils/theme-engine'
+import { presets, docToSettings, isDefaultTheme, generatePalette, parseCssColor, parseUiColorRef, styleComponents, styleTokens, DEFAULT_COLORS, SHADES, TOKEN_SHADE_TARGETS } from '../utils/theme-engine'
 import type { ThemeDoc, ThemePreset, PaletteCurveParams, StyleOptions, Shade, ColorAlias, TokenRamp } from '../utils/theme-engine'
 import { readLocalStorage } from '../utils/theme'
 
@@ -134,34 +134,23 @@ export function useThemeStudio() {
   }
 
   /**
-   * Swatch-click entry point, for any color alias. With a custom palette
-   * active the primary/neutral swatches act as curve seeds: the chosen
-   * palette is reverse-fitted so the editor shows the curves that reproduce
-   * it, replacing whatever was sculpted before. Otherwise it is a plain
-   * alias switch; semantic aliases ride the same persistence channel the
-   * AI theme feature uses.
+   * Swatch-click entry point, for any color alias — always a real alias
+   * switch. A custom palette in place is dropped first (its curves and
+   * modifiers included), so the menu names the selection instead of a
+   * stale Custom; an open editor refits from the new color by itself.
    */
   function selectPalette(alias: ColorAlias, name: string) {
-    // 'neutral' on primary means the neutral ALIAS, not tailwind's gray ramp
-    // — always a plain alias switch, never a curve seed (fitting from the
-    // gray ramp would silently turn "follow neutral" into a frozen copy).
+    if (isCustomPalette(alias)) {
+      clearCustomPalette(alias)
+    }
+
+    // 'neutral' on primary means the neutral ALIAS, not tailwind's gray ramp.
     if (alias === 'primary' && name === 'neutral') {
-      if (isCustomPalette(alias)) {
-        clearCustomPalette(alias)
-      }
       theme.primary.value = 'neutral'
       setActivePreset(undefined)
       return
     }
 
-    if (isCustomPalette(alias)) {
-      const shades = paletteShades(name)
-      if (shades) {
-        setPaletteFromCurve(alias, fitPalette(shades))
-        return
-      }
-    }
-
     if (alias === 'primary') {
       theme.primary.value = name
       setActivePreset(undefined)
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 13c938f520..9178c33da5 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -136,40 +136,6 @@ const toolbarPinned = computed(() => nearBottom.value || Object.values(openPanel
               toolbarPinned ? 'translate-y-0' : 'translate-y-[calc(100%+6px)] group-hover:translate-y-0 group-focus-within:translate-y-0'
             ]"
           >
-            <UFieldGroup>
-              <UTooltip text="Undo" :kbds="['meta', 'Z']">
-                <UButton
-                  icon="i-lucide-undo-2"
-                  color="neutral"
-                  variant="subtle"
-                  :disabled="!past.length"
-                  aria-label="Undo theme change"
-                  @click="undo"
-                />
-              </UTooltip>
-
-              <UTooltip text="Redo" :kbds="['meta', 'shift', 'Z']">
-                <UButton
-                  icon="i-lucide-redo-2"
-                  color="neutral"
-                  variant="subtle"
-                  :disabled="!future.length"
-                  aria-label="Redo theme change"
-                  @click="redo"
-                />
-              </UTooltip>
-            </UFieldGroup>
-
-            <UTooltip text="Reset theme">
-              <UButton
-                icon="i-lucide-rotate-ccw"
-                color="neutral"
-                variant="subtle"
-                aria-label="Reset theme"
-                @click="resetTheme"
-              />
-            </UTooltip>
-
             <ThemeStudioPresetMenu v-model:open="openPanels.presets" class="w-56 shrink-0" />
 
             <UPopover
@@ -190,6 +156,8 @@ const toolbarPinned = computed(() => nearBottom.value || Object.values(openPanel
               </template>
             </UPopover>
 
+            <UColorModeSwitch class="shrink-0" />
+
             <span class="flex-1" />
 
             <!-- The header center hosts the view switcher on desktop; the
@@ -206,15 +174,37 @@ const toolbarPinned = computed(() => nearBottom.value || Object.values(openPanel
               :class="!fullscreen && 'lg:hidden'"
             />
 
-            <UColorModeButton variant="subtle" />
+            <UFieldGroup class="shrink-0">
+              <UTooltip text="Undo" :kbds="['meta', 'Z']">
+                <UButton
+                  icon="i-lucide-undo-2"
+                  color="neutral"
+                  variant="subtle"
+                  :disabled="!past.length"
+                  aria-label="Undo theme change"
+                  @click="undo"
+                />
+              </UTooltip>
+
+              <UTooltip text="Redo" :kbds="['meta', 'shift', 'Z']">
+                <UButton
+                  icon="i-lucide-redo-2"
+                  color="neutral"
+                  variant="subtle"
+                  :disabled="!future.length"
+                  aria-label="Redo theme change"
+                  @click="redo"
+                />
+              </UTooltip>
+            </UFieldGroup>
 
-            <UTooltip :text="fullscreen ? 'Exit fullscreen' : 'Fullscreen preview'" :kbds="fullscreen ? ['Esc'] : undefined">
+            <UTooltip text="Reset theme">
               <UButton
-                :icon="fullscreen ? 'i-lucide-minimize' : 'i-lucide-maximize'"
+                icon="i-lucide-rotate-ccw"
                 color="neutral"
                 variant="subtle"
-                :aria-label="fullscreen ? 'Exit fullscreen preview' : 'Fullscreen preview'"
-                @click="fullscreen = !fullscreen"
+                aria-label="Reset theme"
+                @click="resetTheme"
               />
             </UTooltip>
 
@@ -225,6 +215,16 @@ const toolbarPinned = computed(() => nearBottom.value || Object.values(openPanel
                 <ThemeStudioExport />
               </UFieldGroup>
             </div>
+
+            <UTooltip :text="fullscreen ? 'Exit fullscreen' : 'Fullscreen preview'" :kbds="fullscreen ? ['Esc'] : undefined">
+              <UButton
+                :icon="fullscreen ? 'i-lucide-minimize' : 'i-lucide-maximize'"
+                color="neutral"
+                variant="subtle"
+                :aria-label="fullscreen ? 'Exit fullscreen preview' : 'Fullscreen preview'"
+                @click="fullscreen = !fullscreen"
+              />
+            </UTooltip>
           </div>
         </div>
       </div>
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 0534a8c442..3f07de051b 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -116,7 +116,17 @@ export const VARIANT_SUPPORT: Record<string, string[]> = {
 }
 
 // inputRating is size-only (no variant axis); everything here spans xs–xl exactly.
-export const SIZE_SUPPORT = ['button', 'badge', ...FIELD_COMPONENTS, 'inputRating']
+/**
+ * Every component the app-wide Size default scales — those with the full
+ * xs–xl size axis and a user-facing footprint. Components on other scales
+ * (avatar/chip/timeline's 3xs–3xl, kbd's sm–lg) stay out.
+ */
+export const SIZE_SUPPORT = [
+  'button', 'badge', ...FIELD_COMPONENTS, 'inputRating',
+  'tabs', 'checkbox', 'checkboxGroup', 'radioGroup', 'switch', 'slider', 'stepper',
+  'calendar', 'colorPicker', 'fileUpload', 'formField', 'fieldGroup',
+  'dropdownMenu', 'contextMenu', 'commandPalette', 'listbox'
+]
 
 /** Components with a color prop — the panels group has no color axis (card and empty lack one; a lone alert color stays a verbatim override). */
 export const COLOR_SUPPORT = ['button', 'badge', ...FIELD_COMPONENTS]
diff --git a/test/utils/theme-import.spec.ts b/test/utils/theme-import.spec.ts
index b4c6059506..5eb91eb872 100644
--- a/test/utils/theme-import.spec.ts
+++ b/test/utils/theme-import.spec.ts
@@ -185,6 +185,17 @@ describe('importTheme', () => {
     expect(doc.tokens?.light?.['--ui-color-primary-500']).toBe('var(--ui-color-neutral-500)')
   })
 
+  it('round-trips the app-wide default size across every sized component', () => {
+    const original: ThemeDoc = { version: 1, style: { defaults: { size: 'lg' } } }
+    const config = generateConfig(original)
+    const { doc: imported, skipped } = importTheme({ config })
+
+    expect(skipped).toEqual([])
+    expect(imported.style?.defaults?.size).toBe('lg')
+    expect(imported.components).toBeUndefined()
+    expect(generateConfig(imported)).toBe(config)
+  })
+
   it('round-trips per-group default colors', () => {
     const doc: ThemeDoc = {
       version: 1,

From 0a4e8a81b7bb50cbd34c776f1dd7c96e0a5df74c Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Fri, 10 Jul 2026 17:27:09 +0200
Subject: [PATCH 119/185] feat(docs): strict color roles for v4, active fold
 triggers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- The pickers separate strictly per the module's v4 shade recipes:
  primary and semantic aliases offer only chromatic ramps, neutral only
  gray ramps — the neutral-as-primary path (picker row, alias redirect,
  mirror recipe, FOUC restore, import fold-back) comes out, parked for
  v5 where the variant redirect becomes possible
- Fold triggers light up while open (subtle active variant) across
  sections, token groups and the modifiers panel; the General panel's
  button/card/input default sections start collapsed

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioColorMenu.vue     | 101 ++++++------------
 .../theme-studio/ThemeStudioColorSection.vue  |   2 +
 .../theme-studio/ThemeStudioControls.vue      |   2 +-
 .../theme-studio/ThemeStudioPaletteEditor.vue |   9 +-
 .../theme-studio/ThemeStudioSection.vue       |   2 +
 docs/app/composables/useTheme.ts              |  10 +-
 docs/app/composables/useThemeStudio.ts        |   7 --
 docs/app/plugins/theme.ts                     |  15 +--
 docs/app/utils/theme-engine/export.ts         |  14 +--
 docs/app/utils/theme-engine/import.ts         |  22 +---
 test/utils/theme-import.spec.ts               |  34 ------
 11 files changed, 43 insertions(+), 175 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioColorMenu.vue b/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
index 9e1cc15ff5..015af7bef1 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
@@ -2,9 +2,9 @@
 import type { ColorAlias } from '../../utils/theme-engine'
 
 /**
- * The shared color picker: a swatch-labelled trigger opening the sectioned
- * palette grid. Everything derives from the alias, so the studio sidebar
- * and the header popover render the exact same picker.
+ * The shared color picker: a swatch-labelled trigger opening the palette
+ * grid. Everything derives from the alias, so the studio sidebar and the
+ * header popover render the exact same picker.
  */
 const props = defineProps<{ alias: ColorAlias }>()
 
@@ -12,20 +12,10 @@ const appConfig = useAppConfig()
 const { neutralColors, primaryColors, primary, neutral, blackAsPrimary, setBlackAsPrimary } = useTheme()
 const { selectPalette, isCustomPalette } = useThemeStudio()
 
-// Colorful ramps lead for color roles, neutrals lead for the background.
-// Primary offers no gray ramps at all: a gray through the chromatic shade
-// recipe is a washed-out accent, so the single Neutral entry (mapping to
-// the neutral alias) replaces them.
-const sections = computed(() => {
-  if (props.alias === 'neutral') {
-    return [
-      { label: 'Neutrals', colors: neutralColors },
-      { label: 'Colors', colors: primaryColors, hint: 'These may need some adjustment, try the modifiers in the editor' }
-    ]
-  }
-  if (props.alias === 'primary') return [{ label: 'Colors', colors: primaryColors }]
-  return [{ label: 'Colors', colors: primaryColors }, { label: 'Neutrals', colors: neutralColors }]
-})
+// Strictly separated for v4: color roles offer only chromatic ramps, the
+// neutral role only gray ramps — the module's shade recipes differ per
+// role, so a ramp can't cross over faithfully until v5.
+const colors = computed(() => props.alias === 'neutral' ? neutralColors : primaryColors)
 
 const value = computed(() => {
   if (props.alias === 'primary') return blackAsPrimary.value ? 'black' : primary.value
@@ -45,15 +35,10 @@ function paletteChip(name: string) {
 
 const swatchColor = computed(() => {
   if (props.alias === 'primary' && blackAsPrimary.value) return undefined
-  // primary set to the neutral alias mirrors the selected neutral ramp
-  if (props.alias === 'primary' && value.value === 'neutral') return 'var(--ui-color-neutral-500)'
   if (isCustomPalette(props.alias)) return `var(--color-custom-${props.alias}-500)`
   return `var(--color-${paletteChip(value.value)}-500)`
 })
 
-/** What the primary menu's Neutral row resolves to right now. */
-const neutralName = computed(() => isCustomPalette('neutral') ? 'Custom' : neutral.value)
-
 function isSelected(color: string) {
   if (props.alias === 'primary') return !blackAsPrimary.value && primary.value === color
   if (props.alias === 'neutral') return neutral.value === color
@@ -83,55 +68,29 @@ function isSelected(color: string) {
     </UButton>
 
     <template #content>
-      <div class="flex flex-col gap-3 w-72 p-2">
-        <!-- Not a ramp swatch: primary follows whatever the neutral alias
-             resolves to, so it gets a distinct full-width row. -->
-        <ThemeStudioPickerButton
-          v-if="alias === 'primary'"
-          size="xs"
-          :selected="!blackAsPrimary && primary === 'neutral'"
-          class="w-full"
-          @click="selectPalette(alias, 'neutral')"
-        >
-          <template #leading>
-            <span class="inline-block size-2 rounded-full" :style="{ backgroundColor: 'var(--ui-color-neutral-500)' }" />
-          </template>
-
-          Neutral <span class="text-muted">({{ neutralName }})</span>
-        </ThemeStudioPickerButton>
-
-        <div v-for="(section, index) in sections" :key="section.label">
-          <p class="text-sm font-semibold text-highlighted px-1 mb-2 select-none">
-            {{ section.label }}
-          </p>
-
-          <p v-if="section.hint" class="text-xs text-muted px-1 mb-2 -mt-1.5 select-none">
-            {{ section.hint }}
-          </p>
-
-          <div class="grid grid-cols-3 gap-1">
-            <ThemeStudioPickerButton
-              v-if="alias === 'primary' && index === 0"
-              label="Black"
-              size="xs"
-              :selected="blackAsPrimary"
-              @click="setBlackAsPrimary(true)"
-            >
-              <template #leading>
-                <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
-              </template>
-            </ThemeStudioPickerButton>
-
-            <ThemeStudioPickerButton
-              v-for="color in section.colors"
-              :key="color"
-              :label="color"
-              size="xs"
-              :chip="paletteChip(color)"
-              :selected="isSelected(color)"
-              @click="selectPalette(alias, color)"
-            />
-          </div>
+      <div class="w-72 p-2">
+        <div class="grid grid-cols-3 gap-1">
+          <ThemeStudioPickerButton
+            v-if="alias === 'primary'"
+            label="Black"
+            size="xs"
+            :selected="blackAsPrimary"
+            @click="setBlackAsPrimary(true)"
+          >
+            <template #leading>
+              <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
+            </template>
+          </ThemeStudioPickerButton>
+
+          <ThemeStudioPickerButton
+            v-for="color in colors"
+            :key="color"
+            :label="color"
+            size="xs"
+            :chip="paletteChip(color)"
+            :selected="isSelected(color)"
+            @click="selectPalette(alias, color)"
+          />
         </div>
       </div>
     </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioColorSection.vue b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
index 29694d434e..38b42de3ae 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
@@ -117,6 +117,8 @@ const openGroups = reactive<Record<string, boolean>>({})
             variant="ghost"
             size="sm"
             block
+            :active="openGroups[tokenGroup.key]"
+            active-variant="subtle"
             class="justify-start"
           />
 
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index f23f2f4662..2c0330c86d 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -529,7 +529,7 @@ const shadowColor = computed({
         <USeparator />
 
         <template v-for="field in variantGroupFields" :key="field.key">
-          <ThemeStudioSection :label="field.label">
+          <ThemeStudioSection :label="field.label" :default-open="false">
             <div class="flex flex-col gap-1.5">
               <div class="flex items-center gap-2">
                 <span class="text-xs text-muted w-13 shrink-0 select-none">Variant</span>
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index ae7d4dcf76..f11045a4f0 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -150,12 +150,7 @@ onUnmounted(() => {
 
 /** Fit curves from whatever palette the alias currently shows. */
 function seedFromCurrent() {
-  let name = (appConfig.ui.colors as Record<string, string>)[props.alias]
-  // primary: 'neutral' follows the neutral ALIAS — seed from the ramp it
-  // resolves to, not tailwind's gray that happens to share the name.
-  if (props.alias === 'primary' && name === 'neutral') {
-    name = (appConfig.ui.colors as Record<string, string>).neutral
-  }
+  const name = (appConfig.ui.colors as Record<string, string>)[props.alias]
   if (!name) return
 
   const source = paletteShades(name)
@@ -305,6 +300,8 @@ function resetEffects() {
               variant="ghost"
               size="sm"
               block
+              :active="modifiersOpen"
+              active-variant="subtle"
               class="justify-start"
             />
 
diff --git a/docs/app/components/theme-studio/ThemeStudioSection.vue b/docs/app/components/theme-studio/ThemeStudioSection.vue
index 54baffede8..21a0067622 100644
--- a/docs/app/components/theme-studio/ThemeStudioSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSection.vue
@@ -36,6 +36,8 @@ const open = ref(props.defaultOpen)
         variant="ghost"
         size="sm"
         block
+        :active="open"
+        active-variant="subtle"
         class="justify-start flex-1"
       />
 
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 4049b65115..90e1bc34dd 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -2,7 +2,7 @@ import { defu } from 'defu'
 import { THEME_TAG_IDS, THEME_STATE_KEYS, THEME_STORAGE_KEYS } from '../utils/theme-keys'
 import { useLocalStorage } from '@vueuse/core'
 import { themeIcons, cssVariableDefaults, readLocalStorage } from '../utils/theme'
-import { generateCSS, generateConfig, mergeUi, isDefaultStyle, DEFAULT_COLORS, THEME_DEFAULTS, LIBRARY_TOKEN_DEFAULTS, NEUTRAL_PRIMARY_ROOT } from '../utils/theme-engine'
+import { generateCSS, generateConfig, mergeUi, isDefaultStyle, DEFAULT_COLORS, THEME_DEFAULTS, LIBRARY_TOKEN_DEFAULTS } from '../utils/theme-engine'
 import type { ThemeDoc, ThemePalette } from '../utils/theme-engine'
 import { omit } from '#ui/utils'
 import colors from 'tailwindcss/colors'
@@ -217,13 +217,6 @@ export function useTheme() {
   const fontSizeStyle = computed(() => _fontSize.value !== 16 ? `html { font-size: ${_fontSize.value}px; }` : 'html {}')
   const spacingStyle = computed(() => _spacing.value !== 0.25 ? `:root { --spacing: ${_spacing.value}rem; }` : ':root {}')
   const blackAsPrimaryStyle = computed(() => _blackAsPrimary.value ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
-  // primary === 'neutral' means the neutral ALIAS (#6608 semantics), which
-  // the module would render as tailwind's gray — the same mirror the export
-  // emits keeps the preview honest. Black wins when both are set (parity
-  // with the export, which drops the recipe under blackAsPrimary).
-  const neutralAsPrimaryStyle = computed(() => appConfig.ui.colors.primary === 'neutral' && !_blackAsPrimary.value
-    ? `:root { ${NEUTRAL_PRIMARY_ROOT.join(' ')} }`
-    : ':root {}')
   const fontStyle = computed(() => `:root { --font-sans: '${_font.value}', sans-serif; }`)
   const customColorsStyle = computed(() => {
     const entries = Object.entries(customColorsData.value)
@@ -261,7 +254,6 @@ export function useTheme() {
     { innerHTML: radiusStyle, id: 'nuxt-ui-radius', tagPriority: -2 },
     { innerHTML: fontSizeStyle, id: 'nuxt-ui-font-size', tagPriority: -2 },
     { innerHTML: spacingStyle, id: 'nuxt-ui-spacing', tagPriority: -2 },
-    { innerHTML: neutralAsPrimaryStyle, id: 'nuxt-ui-neutral-as-primary', tagPriority: -2 },
     { innerHTML: blackAsPrimaryStyle, id: 'nuxt-ui-black-as-primary', tagPriority: -2 },
     { innerHTML: fontStyle, id: 'nuxt-ui-font', tagPriority: -2 },
     { innerHTML: customColorsStyle, id: THEME_TAG_IDS.customColors, tagPriority: -2 },
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 1e55542b1e..612df25716 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -144,13 +144,6 @@ export function useThemeStudio() {
       clearCustomPalette(alias)
     }
 
-    // 'neutral' on primary means the neutral ALIAS, not tailwind's gray ramp.
-    if (alias === 'primary' && name === 'neutral') {
-      theme.primary.value = 'neutral'
-      setActivePreset(undefined)
-      return
-    }
-
     if (alias === 'primary') {
       theme.primary.value = name
       setActivePreset(undefined)
diff --git a/docs/app/plugins/theme.ts b/docs/app/plugins/theme.ts
index 4cd5af8002..dfb557e021 100644
--- a/docs/app/plugins/theme.ts
+++ b/docs/app/plugins/theme.ts
@@ -1,6 +1,6 @@
 import { defu } from 'defu'
 import { themeIcons, cssVariableDefaults } from '../utils/theme'
-import { mergeUi, NEUTRAL_PRIMARY_ROOT } from '../utils/theme-engine'
+import { mergeUi } from '../utils/theme-engine'
 
 export default defineNuxtPlugin({
   enforce: 'post',
@@ -88,7 +88,7 @@ export default defineNuxtPlugin({
               if (!primaryColor && !neutralColor) return;
               function swapColors(el) {
                 var html = el.innerHTML;
-                if (primaryColor && primaryColor !== 'black' && primaryColor !== 'neutral') {
+                if (primaryColor && primaryColor !== 'black') {
                   html = html.replace(
                     /(--ui-color-primary-\\d{2,3}:\\s*var\\(--color-)${appConfig.ui.colors.primary}(-\\d{2,3}.*?\\))/g,
                     \`$1\${primaryColor}$2\`
@@ -148,17 +148,6 @@ export default defineNuxtPlugin({
           `.replace(/\s+/g, ' '),
           type: 'text/javascript',
           tagPriority: -1
-        }, {
-          innerHTML: `
-            var napEl = document.querySelector('style#nuxt-ui-neutral-as-primary');
-            if (napEl) {
-              if (localStorage.getItem('nuxt-ui-primary') === 'neutral' && localStorage.getItem('nuxt-ui-black-as-primary') !== 'true') {
-                napEl.innerHTML = ':root { ${NEUTRAL_PRIMARY_ROOT.join(' ')} }';
-              } else {
-                napEl.innerHTML = '';
-              }
-            }
-          `.replace(/\s+/g, ' ')
         }, {
           innerHTML: `
             var bapEl = document.querySelector('style#nuxt-ui-black-as-primary');
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index 6031f1b779..24539d146c 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -1,18 +1,8 @@
 import { themeIcons } from '../theme'
 import type { ThemeDoc } from './types'
-import { DEFAULT_COLORS, THEME_DEFAULTS, SHADES } from './types'
+import { DEFAULT_COLORS, THEME_DEFAULTS } from './types'
 import { styleComponents, styleTokens, mergeUi, BORDER_WIDTH_DEFAULT } from './styles'
 
-/**
- * The CSS recipe behind `primary: 'neutral'` — the neutral ALIAS, not
- * tailwind's gray ramp. The primary scale mirrors whatever neutral
- * resolves to (stock, tinted or custom), so primary IS the selected
- * neutral palette; the accent stays on the standard 500/400 recipe,
- * which the mirror redirects — a deliberate monochrome accent, distinct
- * from black-as-primary.
- */
-export const NEUTRAL_PRIMARY_ROOT = SHADES.map(shade => `--ui-color-primary-${shade}: var(--ui-color-neutral-${shade});`)
-
 /**
  * Generate the minimal `main.css`. The document only holds overrides, so
  * everything present is emitted and nothing else.
@@ -66,8 +56,6 @@ export function generateCSS(doc: ThemeDoc): string {
   }
   if (doc.blackAsPrimary) {
     rootLines.push('  --ui-primary: black;')
-  } else if (doc.colors?.primary === 'neutral') {
-    rootLines.push(...NEUTRAL_PRIMARY_ROOT.map(line => `  ${line}`))
   }
 
   if (rootLines.length) {
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index ae836c2e4a..e739a86392 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -38,13 +38,6 @@ interface ParsedCSS {
   fontSize?: number
   radius?: number
   blackAsPrimary?: boolean
-  /**
-   * `--ui-color-primary-N: var(--ui-color-neutral-N)` mirror lines. A
-   * complete set is the neutral-as-primary recipe (folded back into
-   * `colors.primary = 'neutral'`); anything partial is hand-written and
-   * survives as plain token overrides.
-   */
-  primaryMirror: Record<string, string>
   /** From @theme --default-border-width — the export's width channel. */
   borderWidth?: number
   light: Record<string, string>
@@ -53,7 +46,7 @@ interface ParsedCSS {
 }
 
 function parseCSS(css: string): ParsedCSS {
-  const result: ParsedCSS = { palettes: {}, primaryMirror: {}, light: {}, dark: {}, skipped: [] }
+  const result: ParsedCSS = { palettes: {}, light: {}, dark: {}, skipped: [] }
   const clean = css.replace(/\/\*[\s\S]*?\*\//g, '')
 
   const blockRe = /([^{}]+)\{([^{}]*)\}/g
@@ -140,11 +133,6 @@ function parseDeclaration(result: ParsedCSS, selector: string, prop: string, val
       result.blackAsPrimary = true
       return true
     }
-    const mirror = prop.match(/^--ui-color-primary-(\d{2,3})$/)
-    if (mirror && value === `var(--ui-color-neutral-${mirror[1]})`) {
-      result.primaryMirror[prop] = value
-      return true
-    }
     if (prop === '--spacing' && value.endsWith('rem')) {
       result.spacing = Number.parseFloat(value)
       return true
@@ -703,14 +691,6 @@ export function importTheme(input: { css?: string, config?: string }): ThemeImpo
       // its .dark counterpart is generated, not a token choice
       if (css.dark['--ui-primary'] === 'white') delete css.dark['--ui-primary']
     }
-    if (SHADES.every(shade => css.primaryMirror[`--ui-color-primary-${shade}`])) {
-      // the complete mirror is the neutral-as-primary recipe — a choice,
-      // not eleven token overrides
-      doc.colors = { ...doc.colors, primary: 'neutral' }
-    } else if (Object.keys(css.primaryMirror).length) {
-      // a partial mirror is deliberate hand-written overrides
-      Object.assign(css.light, css.primaryMirror)
-    }
     if (Object.keys(css.light).length || Object.keys(css.dark).length) {
       doc.tokens = {
         ...(Object.keys(css.light).length ? { light: css.light } : {}),
diff --git a/test/utils/theme-import.spec.ts b/test/utils/theme-import.spec.ts
index 5eb91eb872..7b994a423e 100644
--- a/test/utils/theme-import.spec.ts
+++ b/test/utils/theme-import.spec.ts
@@ -151,40 +151,6 @@ describe('importTheme', () => {
     expect(doc.tokens?.dark?.['--ui-frame-color']).toBe('#ff0000')
   })
 
-  it('round-trips neutral as primary', () => {
-    const original: ThemeDoc = { version: 1, colors: { primary: 'neutral' } }
-    const css = generateCSS(original)
-    const config = generateConfig(original)
-    const { doc: imported, skipped } = importTheme({ css, config })
-
-    // The recipe (primary scale mirroring neutral + the inverted accent) is
-    // generated from the choice, not a set of token overrides.
-    expect(skipped).toEqual([])
-    expect(imported.colors?.primary).toBe('neutral')
-    expect(imported.tokens).toBeUndefined()
-    expect(generateCSS(imported)).toBe(css)
-    expect(generateConfig(imported)).toBe(config)
-  })
-
-  it('reads neutral as primary from CSS alone', () => {
-    const { doc, skipped } = importTheme({ css: generateCSS({ version: 1, colors: { primary: 'neutral' } }) })
-
-    expect(skipped).toEqual([])
-    expect(doc.colors?.primary).toBe('neutral')
-  })
-
-  it('keeps a lone primary mirror line as a token override', () => {
-    const { doc, skipped } = importTheme({
-      css: ':root {\n  --ui-color-primary-500: var(--ui-color-neutral-500);\n}'
-    })
-
-    // Without the accent marker this is a deliberate hand-written override,
-    // not the neutral-as-primary recipe — it must survive, not vanish.
-    expect(skipped).toEqual([])
-    expect(doc.colors?.primary).toBeUndefined()
-    expect(doc.tokens?.light?.['--ui-color-primary-500']).toBe('var(--ui-color-neutral-500)')
-  })
-
   it('round-trips the app-wide default size across every sized component', () => {
     const original: ThemeDoc = { version: 1, style: { defaults: { size: 'lg' } } }
     const config = generateConfig(original)

From 55f32b74660c09753045ceb7cc718de8d6724cc9 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Fri, 10 Jul 2026 17:30:06 +0200
Subject: [PATCH 120/185] fix(docs): adjust ThemeStudioColorMenu and
 ThemeStudioSection for improved UI consistency

- Updated ThemeStudioColorMenu to change the size of color chips from 'xs' to 'sm' for better visibility.
- Removed the ':active' binding from the button in ThemeStudioSection to streamline the component's behavior.

These changes enhance the user interface by ensuring consistent sizing and interaction feedback across components.
---
 docs/app/components/theme-studio/ThemeStudioColorMenu.vue | 2 +-
 docs/app/components/theme-studio/ThemeStudioSection.vue   | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioColorMenu.vue b/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
index 015af7bef1..ff4b2f0639 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
@@ -86,7 +86,7 @@ function isSelected(color: string) {
             v-for="color in colors"
             :key="color"
             :label="color"
-            size="xs"
+            size="sm"
             :chip="paletteChip(color)"
             :selected="isSelected(color)"
             @click="selectPalette(alias, color)"
diff --git a/docs/app/components/theme-studio/ThemeStudioSection.vue b/docs/app/components/theme-studio/ThemeStudioSection.vue
index 21a0067622..c535946175 100644
--- a/docs/app/components/theme-studio/ThemeStudioSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSection.vue
@@ -36,7 +36,6 @@ const open = ref(props.defaultOpen)
         variant="ghost"
         size="sm"
         block
-        :active="open"
         active-variant="subtle"
         class="justify-start flex-1"
       />

From daef31faf0f0f7cd99bcea41d1b3ff2651232e38 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Fri, 10 Jul 2026 17:32:13 +0200
Subject: [PATCH 121/185] fix(docs): update button variant in
 ThemeStudioPaletteEditor for improved UI clarity

- Changed the button variant from 'subtle' to 'ghost' in the ThemeStudioPaletteEditor component to enhance visual distinction and user interaction feedback.

This adjustment contributes to a more intuitive user experience within the theme studio.
---
 docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index f11045a4f0..76633b8866 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -309,7 +309,7 @@ function resetEffects() {
               <UButton
                 icon="i-lucide-rotate-ccw"
                 color="neutral"
-                variant="subtle"
+                variant="ghost"
                 size="sm"
                 :disabled="!effectsDirty"
                 aria-label="Reset modifiers"

From f9255a15ac10f322969077967a9cba2da5d9ef73 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Fri, 10 Jul 2026 17:52:34 +0200
Subject: [PATCH 122/185] refactor(docs): consolidate the studio to fewer,
 stockier components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Delete the dead ThemeStudioBento (the playground grid replaced it)
- ThemeStudioSliderRow absorbs the shade slider and rebuilds on a
  horizontal UFormField (real label wiring); chip + mode props turn a
  row into a ramp-colored shade slider
- The Style panel's option grids become stock UTabs segmented controls;
  the color swatch grid inlines plain UButtons — ThemeStudioPickerButton
  goes away
- Import/Export collapse to plain toolbar buttons opening one shared
  ThemeStudioShareModal (open + mode models)
- Sections keep their div-trigger collapsible: AccordionTrigger renders
  a <button>, and headers carrying pencil/shades/help controls can't
  legally nest inside one

14 studio components → 10.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioBento.vue         | 383 ------------------
 .../theme-studio/ThemeStudioColorMenu.vue     |  35 +-
 .../theme-studio/ThemeStudioColorSection.vue  |   4 +-
 .../theme-studio/ThemeStudioControls.vue      |  80 ++--
 .../theme-studio/ThemeStudioExport.vue        |  89 ----
 .../theme-studio/ThemeStudioPickerButton.vue  |  45 --
 .../theme-studio/ThemeStudioShadeSlider.vue   |  42 --
 ...ioImport.vue => ThemeStudioShareModal.vue} |  80 ++--
 .../theme-studio/ThemeStudioSliderRow.vue     |  74 +++-
 docs/app/pages/theme.vue                      |  24 +-
 10 files changed, 205 insertions(+), 651 deletions(-)
 delete mode 100644 docs/app/components/theme-studio/ThemeStudioBento.vue
 delete mode 100644 docs/app/components/theme-studio/ThemeStudioExport.vue
 delete mode 100644 docs/app/components/theme-studio/ThemeStudioPickerButton.vue
 delete mode 100644 docs/app/components/theme-studio/ThemeStudioShadeSlider.vue
 rename docs/app/components/theme-studio/{ThemeStudioImport.vue => ThemeStudioShareModal.vue} (52%)

diff --git a/docs/app/components/theme-studio/ThemeStudioBento.vue b/docs/app/components/theme-studio/ThemeStudioBento.vue
deleted file mode 100644
index 971af14919..0000000000
--- a/docs/app/components/theme-studio/ThemeStudioBento.vue
+++ /dev/null
@@ -1,383 +0,0 @@
-<script setup lang="ts">
-import { h, resolveComponent } from 'vue'
-import { CalendarDate } from '@internationalized/date'
-import type { TableColumn } from '@nuxt/ui'
-
-const UBadge = resolveComponent('UBadge')
-
-const toast = useToast()
-
-const variants = ['solid', 'outline', 'soft', 'subtle', 'ghost'] as const
-
-const checked = ref(true)
-const switched = ref(true)
-const slider = ref(40)
-const page = ref(3)
-const pin = ref([])
-const calendarDate = shallowRef(new CalendarDate(2026, 7, 5))
-
-const tabItems = [
-  { label: 'Account', icon: 'i-lucide-user' },
-  { label: 'Password', icon: 'i-lucide-lock' },
-  { label: 'Billing', icon: 'i-lucide-credit-card' }
-]
-
-const breadcrumbItems = [
-  { label: 'Home', icon: 'i-lucide-house' },
-  { label: 'Components', to: '/docs/components' },
-  { label: 'Theme Studio' }
-]
-
-const accordionItems = [
-  { label: 'Is it accessible?', icon: 'i-lucide-accessibility', content: 'Yes. It adheres to the WAI-ARIA design pattern.' },
-  { label: 'Is it themeable?', icon: 'i-lucide-swatch-book', content: 'Yes. That is rather the point of this page.' }
-]
-
-const selectItems = ['Backlog', 'Todo', 'In Progress', 'Done']
-const selectValue = ref('Todo')
-
-type Invoice = {
-  id: string
-  customer: string
-  status: 'paid' | 'pending' | 'failed'
-  amount: number
-}
-
-const invoices: Invoice[] = [
-  { id: '3021', customer: 'Alex Turner', status: 'paid', amount: 594 },
-  { id: '3022', customer: 'Mia Chen', status: 'pending', amount: 276 },
-  { id: '3023', customer: 'Sam Ortiz', status: 'failed', amount: 315 },
-  { id: '3024', customer: 'Emma Davis', status: 'paid', amount: 529 }
-]
-
-const invoiceColumns: TableColumn<Invoice>[] = [{
-  accessorKey: 'id',
-  header: '#',
-  cell: ({ row }) => `#${row.getValue('id')}`
-}, {
-  accessorKey: 'customer',
-  header: 'Customer'
-}, {
-  accessorKey: 'status',
-  header: 'Status',
-  cell: ({ row }) => {
-    const color = ({
-      paid: 'success' as const,
-      pending: 'warning' as const,
-      failed: 'error' as const
-    })[row.getValue('status') as string]
-
-    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
-  }
-}, {
-  accessorKey: 'amount',
-  header: 'Amount',
-  meta: {
-    class: {
-      th: 'text-right',
-      td: 'text-right font-medium'
-    }
-  },
-  cell: ({ row }) => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'EUR'
-    }).format(Number.parseFloat(row.getValue('amount')))
-  }
-}]
-
-const stats = [
-  { label: 'Revenue', value: '$45.2k', delta: '+12%', color: 'success' as const },
-  { label: 'Users', value: '2,350', delta: '+8%', color: 'success' as const },
-  { label: 'Churn', value: '1.9%', delta: '-4%', color: 'error' as const },
-  { label: 'Sessions', value: '12.4k', delta: '+23%', color: 'success' as const }
-]
-
-const chatMessage = ref('')
-
-const roleItems = ['Owner', 'Member', 'Viewer']
-const teamMembers = ref([
-  { name: 'Benjamin Canac', username: 'benjamincanac', role: 'Owner' },
-  { name: 'Sébastien Chopin', username: 'atinux', role: 'Member' },
-  { name: 'Daniel Roe', username: 'danielroe', role: 'Viewer' }
-])
-
-const notificationSettings = ref([
-  { label: 'Email digest', description: 'A weekly summary of activity.', enabled: true },
-  { label: 'Push notifications', description: 'Mentions, replies and reactions.', enabled: true },
-  { label: 'Marketing emails', description: 'Product news and tips.', enabled: false }
-])
-
-function showToast() {
-  toast.add({
-    title: 'Theme applied',
-    description: 'This toast is styled by your theme too.',
-    icon: 'i-lucide-swatch-book'
-  })
-}
-</script>
-
-<template>
-  <div class="columns-1 md:columns-2 xl:columns-3 gap-4 space-y-4 p-4">
-    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
-      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
-        Buttons
-      </p>
-
-      <div v-for="color in ['primary', 'neutral', 'error'] as const" :key="color" class="flex flex-wrap items-center gap-2">
-        <UButton
-          v-for="variant in variants"
-          :key="variant"
-          :color="color"
-          :variant="variant"
-          :label="variant"
-
-          class="capitalize"
-        />
-      </div>
-
-      <div class="flex flex-wrap items-center gap-2">
-        <UButton icon="i-lucide-plus" label="New item" />
-        <UButton
-          icon="i-lucide-settings"
-
-          color="neutral"
-          variant="outline"
-          square
-          aria-label="Settings"
-        />
-        <UButton color="neutral" variant="ghost" label="Cancel" />
-        <UButton loading label="Saving" />
-      </div>
-    </UCard>
-
-    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-4' }">
-      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
-        Form
-      </p>
-
-      <UFormField label="Email" required help="We'll never share it.">
-        <UInput icon="i-lucide-at-sign" placeholder="you@example.com" class="w-full" />
-      </UFormField>
-
-      <UFormField label="Status">
-        <USelect v-model="selectValue" :items="selectItems" class="w-full" />
-      </UFormField>
-
-      <div class="flex items-center justify-between gap-4">
-        <UCheckbox v-model="checked" label="Remember me" />
-        <USwitch v-model="switched" label="Notifications" />
-      </div>
-
-      <USlider v-model="slider" />
-
-      <UButton label="Submit" block />
-    </UCard>
-
-    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
-      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
-        Feedback
-      </p>
-
-      <UAlert
-        title="Heads up!"
-        description="Semantic tokens keep this readable in any theme."
-        icon="i-lucide-terminal"
-        color="primary"
-        variant="subtle"
-      />
-
-      <div class="flex flex-wrap items-center gap-2">
-        <UBadge label="Badge" />
-        <UBadge label="Outline" variant="outline" />
-        <UBadge label="Soft" variant="soft" color="neutral" />
-        <UBadge label="Subtle" variant="subtle" color="error" />
-        <UBadge label="Success" variant="subtle" color="success" />
-      </div>
-
-      <UProgress :model-value="65" />
-
-      <div class="flex items-center gap-2">
-        <UButton
-          label="Show toast"
-          color="neutral"
-          variant="outline"
-          size="sm"
-          icon="i-lucide-bell"
-          @click="showToast"
-        />
-        <UTooltip text="Tooltips follow the theme too">
-          <UButton label="Hover me" color="neutral" variant="ghost" size="sm" />
-        </UTooltip>
-      </div>
-    </UCard>
-
-    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
-      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
-        Navigation
-      </p>
-
-      <UBreadcrumb :items="breadcrumbItems" />
-
-      <UTabs :items="tabItems" :content="false" />
-
-      <UPagination v-model:page="page" :total="50" size="sm" />
-    </UCard>
-
-    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
-      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
-        Content
-      </p>
-
-      <div class="flex items-center gap-3">
-        <UChip inset color="success">
-          <UAvatar src="https://avatars.githubusercontent.com/u/22576486" alt="Mike Newbon" />
-        </UChip>
-        <div class="text-sm">
-          <p class="font-medium text-highlighted">
-            Mike Newbon
-          </p>
-          <p class="text-muted">
-            mikenewbon
-          </p>
-        </div>
-        <UButton
-          label="Follow"
-          to="https://github.com/mikenewbon"
-          target="_blank"
-          size="xs"
-          color="neutral"
-          variant="subtle"
-          class="ms-auto"
-        />
-      </div>
-
-      <USeparator />
-
-      <UAccordion :items="accordionItems" />
-
-      <div class="flex items-center gap-1.5 text-sm text-muted">
-        Press
-
-        <UKbd value="meta" />
-        <UKbd value="K" />
-
-        to search
-      </div>
-    </UCard>
-
-    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3 items-center' }">
-      <p class="text-xs font-semibold text-muted uppercase tracking-wide self-start">
-        Pickers
-      </p>
-
-      <UCalendar v-model="calendarDate" size="sm" class="w-full" />
-
-      <UPinInput v-model="pin" :length="4" placeholder="○" />
-    </UCard>
-
-    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
-      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
-        Table
-      </p>
-
-      <UTable :data="invoices" :columns="invoiceColumns" class="border border-default rounded-md" />
-    </UCard>
-
-    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
-      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
-        Stats
-      </p>
-
-      <div class="grid grid-cols-2 gap-3">
-        <div v-for="stat in stats" :key="stat.label" class="flex flex-col gap-1 p-3 rounded-lg bg-elevated/50">
-          <p class="text-xs text-muted">
-            {{ stat.label }}
-          </p>
-          <div class="flex items-center justify-between gap-2">
-            <p class="text-2xl font-bold text-highlighted">
-              {{ stat.value }}
-            </p>
-            <UBadge :label="stat.delta" :color="stat.color" variant="subtle" size="sm" />
-          </div>
-        </div>
-      </div>
-    </UCard>
-
-    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
-      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
-        Chat
-      </p>
-
-      <!-- real chat components so the frame/shadow treatments preview truthfully -->
-      <UChatMessage
-        id="bento-assistant"
-        role="assistant"
-        variant="soft"
-        compact
-        :parts="[{ type: 'text', text: 'Hey! How does this bubble look with your primary color?' }]"
-        class="me-8"
-      />
-      <UChatMessage
-        id="bento-user"
-        role="user"
-        variant="solid"
-        color="primary"
-        side="right"
-        compact
-        :parts="[{ type: 'text', text: 'Looking sharp, ship it.' }]"
-        class="ms-auto max-w-[80%]"
-      />
-
-      <UChatPrompt v-model="chatMessage" placeholder="Type a message..." :ui="{ base: 'text-sm' }">
-        <template #footer>
-          <span />
-          <UChatPromptSubmit status="ready" size="sm" />
-        </template>
-      </UChatPrompt>
-    </UCard>
-
-    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
-      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
-        Team
-      </p>
-
-      <div v-for="member in teamMembers" :key="member.username" class="flex items-center gap-3">
-        <UAvatar :src="`https://github.com/${member.username}.png`" :alt="member.name" />
-        <div class="flex-1 min-w-0">
-          <p class="text-sm font-medium text-highlighted truncate">
-            {{ member.name }}
-          </p>
-          <p class="text-xs text-muted truncate">
-            {{ member.role }}
-          </p>
-        </div>
-        <USelect v-model="member.role" :items="roleItems" size="sm" class="w-28" />
-      </div>
-
-      <UButton label="Invite member" icon="i-lucide-user-plus" variant="soft" block />
-    </UCard>
-
-    <UCard class="break-inside-avoid" :ui="{ body: 'flex flex-col gap-3' }">
-      <p class="text-xs font-semibold text-muted uppercase tracking-wide">
-        Notifications
-      </p>
-
-      <template v-for="(setting, index) in notificationSettings" :key="setting.label">
-        <USeparator v-if="index > 0" />
-
-        <div class="flex items-center justify-between gap-4">
-          <div>
-            <p class="text-sm text-highlighted">
-              {{ setting.label }}
-            </p>
-            <p class="text-xs text-muted">
-              {{ setting.description }}
-            </p>
-          </div>
-          <USwitch v-model="setting.enabled" />
-        </div>
-      </template>
-    </UCard>
-  </div>
-</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioColorMenu.vue b/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
index ff4b2f0639..3dddd7d689 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
@@ -70,27 +70,46 @@ function isSelected(color: string) {
     <template #content>
       <div class="w-72 p-2">
         <div class="grid grid-cols-3 gap-1">
-          <ThemeStudioPickerButton
+          <UButton
             v-if="alias === 'primary'"
             label="Black"
-            size="xs"
-            :selected="blackAsPrimary"
+            size="sm"
+            color="neutral"
+            variant="subtle"
+            :active="blackAsPrimary"
+            active-color="primary"
+            active-variant="subtle"
+            class="capitalize"
             @click="setBlackAsPrimary(true)"
           >
             <template #leading>
               <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
             </template>
-          </ThemeStudioPickerButton>
+          </UButton>
 
-          <ThemeStudioPickerButton
+          <UButton
             v-for="color in colors"
             :key="color"
             :label="color"
             size="sm"
-            :chip="paletteChip(color)"
-            :selected="isSelected(color)"
+            color="neutral"
+            variant="subtle"
+            :active="isSelected(color)"
+            active-color="primary"
+            active-variant="subtle"
+            class="capitalize"
             @click="selectPalette(alias, color)"
-          />
+          >
+            <template #leading>
+              <span
+                class="inline-block size-2 rounded-full bg-(--color-light) dark:bg-(--color-dark)"
+                :style="{
+                  '--color-light': `var(--color-${paletteChip(color)}-500)`,
+                  '--color-dark': `var(--color-${paletteChip(color)}-400)`
+                }"
+              />
+            </template>
+          </UButton>
         </div>
       </div>
     </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioColorSection.vue b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
index 38b42de3ae..7a5b0cb8da 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
@@ -98,7 +98,7 @@ const openGroups = reactive<Record<string, boolean>>({})
 
       <!-- The accent pair for color aliases. -->
       <div v-if="shadeEditor && alias !== 'neutral'" class="flex flex-col gap-1.5 pt-2">
-        <ThemeStudioShadeSlider
+        <ThemeStudioSliderRow
           v-for="(slider, modeName) in sections[0]!.sliders"
           :key="modeName"
           v-model="slider.value"
@@ -127,7 +127,7 @@ const openGroups = reactive<Record<string, boolean>>({})
               <div v-for="section in tokenGroup.sections" :key="section.token" class="flex flex-col gap-1.5">
                 <span class="text-xs text-muted select-none">{{ section.label }}</span>
 
-                <ThemeStudioShadeSlider
+                <ThemeStudioSliderRow
                   v-for="(slider, modeName) in section.sliders"
                   :key="modeName"
                   v-model="slider.value"
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 2c0330c86d..e1a0f0275b 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -25,7 +25,17 @@ const SHADOW_STYLE_OPTIONS = [
   { label: 'None', value: 'none' },
   { label: 'Default', value: 'soft' },
   { label: 'Custom', value: 'hard' }
-] as const
+]
+
+const shadowStyle = computed({
+  get: () => style.value.shadow || 'none',
+  set: (value: any) => setStyle({ shadow: value })
+})
+
+const innerShadowStyle = computed({
+  get: () => style.value.innerShadow || 'none',
+  set: (value: any) => setStyle({ innerShadow: value })
+})
 
 const shadowOpacity = computed({
   get: () => style.value.shadowOpacity ?? (style.value.shadow === 'hard' ? 100 : 25),
@@ -53,12 +63,15 @@ const borderOptions = [
   { label: 'None', value: 'none' },
   { label: 'Default', value: 'default' },
   { label: 'Custom', value: 'custom' }
-] as const
+]
 
 // Legacy saved prefs may still hold bold/frame — both read as custom.
-const borderStyle = computed(() => {
-  const value = style.value.border || 'default'
-  return value === 'bold' || value === 'frame' ? 'custom' : value
+const borderStyle = computed({
+  get: () => {
+    const value = style.value.border || 'default'
+    return value === 'bold' || value === 'frame' ? 'custom' : value
+  },
+  set: (value: any) => setStyle({ border: value })
 })
 
 const borderWidth = computed({
@@ -280,15 +293,14 @@ const shadowColor = computed({
       <div class="flex flex-col gap-4">
         <ThemeStudioSection label="Shadow">
           <div>
-            <div class="grid grid-cols-3 gap-1">
-              <ThemeStudioPickerButton
-                v-for="option in SHADOW_STYLE_OPTIONS"
-                :key="option.value"
-                :label="option.label"
-                :selected="(style.shadow || 'none') === option.value"
-                @click="setStyle({ shadow: option.value })"
-              />
-            </div>
+            <UTabs
+              v-model="shadowStyle"
+              :items="SHADOW_STYLE_OPTIONS"
+              :content="false"
+              size="xs"
+              color="neutral"
+              class="w-full"
+            />
 
             <div v-if="(style.shadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
               <USelect
@@ -302,7 +314,7 @@ const shadowColor = computed({
               />
 
               <template v-if="shadowColor === 'shade' || shadowColor === 'primary-shade'">
-                <ThemeStudioShadeSlider
+                <ThemeStudioSliderRow
                   v-for="(slider, modeName) in shadowShades"
                   :key="modeName"
                   v-model="slider.value"
@@ -340,15 +352,14 @@ const shadowColor = computed({
 
         <ThemeStudioSection label="Inner shadow">
           <div>
-            <div class="grid grid-cols-3 gap-1">
-              <ThemeStudioPickerButton
-                v-for="option in SHADOW_STYLE_OPTIONS"
-                :key="option.value"
-                :label="option.label"
-                :selected="(style.innerShadow || 'none') === option.value"
-                @click="setStyle({ innerShadow: option.value })"
-              />
-            </div>
+            <UTabs
+              v-model="innerShadowStyle"
+              :items="SHADOW_STYLE_OPTIONS"
+              :content="false"
+              size="xs"
+              color="neutral"
+              class="w-full"
+            />
 
             <div v-if="(style.innerShadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
               <USelect
@@ -362,7 +373,7 @@ const shadowColor = computed({
               />
 
               <template v-if="innerShadowColor === 'shade' || innerShadowColor === 'primary-shade'">
-                <ThemeStudioShadeSlider
+                <ThemeStudioSliderRow
                   v-for="(slider, modeName) in innerShadowShades"
                   :key="modeName"
                   v-model="slider.value"
@@ -400,15 +411,14 @@ const shadowColor = computed({
 
         <ThemeStudioSection label="Borders">
           <div>
-            <div class="grid grid-cols-3 gap-1">
-              <ThemeStudioPickerButton
-                v-for="option in borderOptions"
-                :key="option.value"
-                :label="option.label"
-                :selected="borderStyle === option.value"
-                @click="setStyle({ border: option.value })"
-              />
-            </div>
+            <UTabs
+              v-model="borderStyle"
+              :items="borderOptions"
+              :content="false"
+              size="xs"
+              color="neutral"
+              class="w-full"
+            />
 
             <div v-if="borderStyle === 'custom'" class="mt-1.5 flex flex-col gap-2">
               <ThemeStudioSliderRow
@@ -439,7 +449,7 @@ const shadowColor = computed({
               />
 
               <template v-if="borderColor === 'shade' || borderColor === 'primary-shade'">
-                <ThemeStudioShadeSlider
+                <ThemeStudioSliderRow
                   v-for="(slider, modeName) in borderShades"
                   :key="modeName"
                   v-model="slider.value"
diff --git a/docs/app/components/theme-studio/ThemeStudioExport.vue b/docs/app/components/theme-studio/ThemeStudioExport.vue
deleted file mode 100644
index 8ae33729cd..0000000000
--- a/docs/app/components/theme-studio/ThemeStudioExport.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script setup lang="ts">
-const { copy: copyCSS, copied: copiedCSS } = useClipboard()
-const { copy: copyConfig, copied: copiedConfig } = useClipboard()
-const { track } = useAnalytics()
-
-const { exportCSS, exportConfig, configLabel, hasCSSChanges, hasConfigChanges } = useTheme()
-
-const open = ref(false)
-
-const css = ref('')
-const config = ref('')
-
-watch(open, (isOpen) => {
-  if (isOpen) {
-    css.value = exportCSS()
-    config.value = exportConfig()
-  }
-})
-</script>
-
-<template>
-  <UModal
-    v-model:open="open"
-    title="Export theme"
-    description="Copy only what you changed — everything else stays inherited from Nuxt UI defaults."
-    :ui="{ content: 'max-w-3xl' }"
-  >
-    <UButton
-      label="Export"
-      icon="i-lucide-download"
-      color="neutral"
-      variant="subtle"
-      block
-    />
-
-    <template #body>
-      <div class="flex flex-col gap-4">
-        <UAlert
-          v-if="!hasCSSChanges && !hasConfigChanges"
-          title="No changes yet"
-          description="You are on the default theme. Tweak something and come back."
-          icon="i-lucide-info"
-          color="neutral"
-          variant="subtle"
-        />
-
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-          <div class="flex flex-col gap-2 min-w-0">
-            <div class="flex items-center justify-between gap-2">
-              <p class="text-xs font-semibold text-muted font-mono">
-                main.css
-              </p>
-
-              <UButton
-                size="xs"
-                color="neutral"
-                variant="ghost"
-                :icon="copiedCSS ? 'i-lucide-copy-check' : 'i-lucide-copy'"
-                aria-label="Copy CSS"
-                @click="copyCSS(css); track('Theme Exported', { type: 'CSS' })"
-              />
-            </div>
-
-            <pre class="text-xs font-mono bg-muted rounded-md p-3 overflow-x-auto max-h-96 whitespace-pre">{{ css }}</pre>
-          </div>
-
-          <div class="flex flex-col gap-2 min-w-0">
-            <div class="flex items-center justify-between gap-2">
-              <p class="text-xs font-semibold text-muted font-mono">
-                {{ configLabel }}
-              </p>
-
-              <UButton
-                size="xs"
-                color="neutral"
-                variant="ghost"
-                :icon="copiedConfig ? 'i-lucide-copy-check' : 'i-lucide-copy'"
-                aria-label="Copy config"
-                @click="copyConfig(config); track('Theme Exported', { type: 'Config' })"
-              />
-            </div>
-
-            <pre class="text-xs font-mono bg-muted rounded-md p-3 overflow-x-auto max-h-96 whitespace-pre">{{ config }}</pre>
-          </div>
-        </div>
-      </div>
-    </template>
-  </UModal>
-</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioPickerButton.vue b/docs/app/components/theme-studio/ThemeStudioPickerButton.vue
deleted file mode 100644
index 0641153af4..0000000000
--- a/docs/app/components/theme-studio/ThemeStudioPickerButton.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  label?: string
-  icon?: string
-  chip?: string
-  selected?: boolean
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null
-}>()
-
-const slots = defineSlots<{
-  leading: () => any
-  default: () => any
-}>()
-</script>
-
-<template>
-  <UButton
-    :size="size ?? 'sm'"
-    color="neutral"
-    variant="subtle"
-    :active="selected"
-    active-color="primary"
-    active-variant="subtle"
-    :icon="icon"
-    :label="label"
-    class="capitalize"
-  >
-    <template v-if="!!slots.default" #default>
-      <slot />
-    </template>
-
-    <template v-if="chip || !!slots.leading" #leading>
-      <slot name="leading">
-        <span
-          class="inline-block size-2 rounded-full"
-          :class="`bg-(--color-light) dark:bg-(--color-dark)`"
-          :style="{
-            '--color-light': `var(--color-${chip}-500)`,
-            '--color-dark': `var(--color-${chip}-400)`
-          }"
-        />
-      </slot>
-    </template>
-  </UButton>
-</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue b/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue
deleted file mode 100644
index 8105263d1a..0000000000
--- a/docs/app/components/theme-studio/ThemeStudioShadeSlider.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { SHADES } from '../../utils/theme-engine'
-
-defineProps<{
-  mode: 'light' | 'dark'
-  /** Palette name whose ramp colors the preview swatch */
-  chip: string
-}>()
-
-/** Slider position: index into SHADES (0 = 50 … 10 = 950) */
-const index = defineModel<number>({ required: true })
-</script>
-
-<template>
-  <div class="flex items-center gap-2">
-    <span class="w-13 shrink-0 flex items-center gap-1.5">
-      <UIcon :name="mode === 'light' ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3.5 text-muted shrink-0" />
-      <span
-        class="h-3 grow shrink-0 rounded-sm ring ring-default"
-        :style="{ backgroundColor: `var(--color-${chip}-${SHADES[index]})` }"
-      />
-    </span>
-
-    <!-- The fill wears the ramp color at the selected shade. Hairline inset
-         rings keep the fill and thumb visible when that color melts into
-         the panel background (light shades in light mode and vice versa). -->
-    <USlider
-      v-model="index"
-      :min="0"
-      :max="SHADES.length - 1"
-      :step="1"
-      size="sm"
-      :style="{ '--slider-color': `var(--color-${chip}-${SHADES[index]})` }"
-      :ui="{
-        range: 'bg-(--slider-color) inset-ring inset-ring-accented',
-        thumb: 'ring-(--slider-color) inset-ring inset-ring-accented shadow-sm'
-      }"
-    />
-
-    <span class="text-xs text-dimmed font-mono w-7 text-right shrink-0 truncate" :title="String(SHADES[index])">{{ SHADES[index] }}</span>
-  </div>
-</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioImport.vue b/docs/app/components/theme-studio/ThemeStudioShareModal.vue
similarity index 52%
rename from docs/app/components/theme-studio/ThemeStudioImport.vue
rename to docs/app/components/theme-studio/ThemeStudioShareModal.vue
index 41f81759ec..6d68e25fb8 100644
--- a/docs/app/components/theme-studio/ThemeStudioImport.vue
+++ b/docs/app/components/theme-studio/ThemeStudioShareModal.vue
@@ -1,24 +1,33 @@
 <script setup lang="ts">
 import { importTheme, isDefaultTheme } from '../../utils/theme-engine'
 
+/**
+ * The shared import/export modal — plain toolbar buttons open it in either
+ * mode. Export shows the generated files with copy buttons; import parses
+ * a paste of the same two files back into editable settings.
+ */
+const open = defineModel<boolean>('open', { default: false })
+const mode = defineModel<'import' | 'export'>('mode', { default: 'export' })
+
 const { applyDoc } = useThemeStudio()
+const { exportCSS, exportConfig, configLabel, hasCSSChanges, hasConfigChanges } = useTheme()
 const { track } = useAnalytics()
-
-const open = ref(false)
+const { copy: copyCSS, copied: copiedCSS } = useClipboard()
+const { copy: copyConfig, copied: copiedConfig } = useClipboard()
 
 const css = ref('')
 const config = ref('')
-
 const skipped = ref<string[]>([])
 const imported = ref(false)
 const empty = ref(false)
 
-watch(open, () => {
-  css.value = ''
-  config.value = ''
+watch([open, mode], () => {
   skipped.value = []
   imported.value = false
   empty.value = false
+  // Export fills the panes with the generated files; import starts blank.
+  css.value = mode.value === 'export' && open.value ? exportCSS() : ''
+  config.value = mode.value === 'export' && open.value ? exportConfig() : ''
 })
 
 function runImport() {
@@ -38,43 +47,56 @@ function runImport() {
 <template>
   <UModal
     v-model:open="open"
-    title="Import theme"
-    description="Paste an exported main.css and/or app.config.ts — the studio parses it back into editable settings."
+    :title="mode === 'export' ? 'Export theme' : 'Import theme'"
+    :description="mode === 'export'
+      ? 'Copy only what you changed — everything else stays inherited from Nuxt UI defaults.'
+      : 'Paste an exported main.css and/or app.config.ts — the studio parses it back into editable settings.'"
     :ui="{ content: 'max-w-3xl' }"
   >
-    <UTooltip text="Import theme">
-      <UButton
-        icon="i-lucide-upload"
-        color="neutral"
-        variant="subtle"
-        block
-        aria-label="Import theme"
-      />
-    </UTooltip>
-
     <template #body>
       <div class="flex flex-col gap-4">
+        <UAlert
+          v-if="mode === 'export' && !hasCSSChanges && !hasConfigChanges"
+          title="No changes yet"
+          description="You are on the default theme. Tweak something and come back."
+          icon="i-lucide-info"
+          color="neutral"
+          variant="subtle"
+        />
+
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-          <div class="flex flex-col gap-2 min-w-0">
-            <p class="text-xs font-semibold text-muted font-mono">
-              main.css
-            </p>
+          <div v-for="pane in (['css', 'config'] as const)" :key="pane" class="flex flex-col gap-2 min-w-0">
+            <div class="flex items-center justify-between gap-2">
+              <p class="text-xs font-semibold text-muted font-mono">
+                {{ pane === 'css' ? 'main.css' : configLabel }}
+              </p>
+
+              <UButton
+                v-if="mode === 'export'"
+                size="xs"
+                color="neutral"
+                variant="ghost"
+                :icon="(pane === 'css' ? copiedCSS : copiedConfig) ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+                :aria-label="pane === 'css' ? 'Copy CSS' : 'Copy config'"
+                @click="pane === 'css'
+                  ? (copyCSS(css), track('Theme Exported', { type: 'CSS' }))
+                  : (copyConfig(config), track('Theme Exported', { type: 'Config' }))"
+              />
+            </div>
+
+            <pre v-if="mode === 'export'" class="text-xs font-mono bg-muted rounded-md p-3 overflow-x-auto max-h-96 whitespace-pre">{{ pane === 'css' ? css : config }}</pre>
 
             <UTextarea
+              v-else-if="pane === 'css'"
               v-model="css"
               :rows="10"
               placeholder="@import &quot;tailwindcss&quot;;&#10;@import &quot;@nuxt/ui&quot;;&#10;…"
               class="w-full font-mono"
               :ui="{ base: 'text-xs' }"
             />
-          </div>
-
-          <div class="flex flex-col gap-2 min-w-0">
-            <p class="text-xs font-semibold text-muted font-mono">
-              app.config.ts
-            </p>
 
             <UTextarea
+              v-else
               v-model="config"
               :rows="10"
               placeholder="export default defineAppConfig({&#10;  ui: { … }&#10;})"
@@ -111,7 +133,7 @@ function runImport() {
       </div>
     </template>
 
-    <template #footer>
+    <template v-if="mode === 'import'" #footer>
       <div class="flex justify-end gap-2 w-full">
         <UButton
           label="Cancel"
diff --git a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
index 4900b29a4f..810dcf08be 100644
--- a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
@@ -1,39 +1,81 @@
 <script setup lang="ts">
-/** The studio's standard control row: tiny label, slider, monospace readout. */
-const props = defineProps<{
-  /** Names the slider (aria) — shown unless an icon replaces it. */
-  label: string
+import { SHADES } from '../../utils/theme-engine'
+
+/**
+ * The studio's control row — a horizontal UFormField: tiny label (or icon),
+ * slider, monospace readout. With `chip` + `mode` it becomes a shade
+ * slider: the fill and swatch wear the ramp color at the selected shade,
+ * and the readout names the shade.
+ */
+const props = withDefaults(defineProps<{
+  /** Names the slider (aria) — shown unless an icon or chip replaces it. */
+  label?: string
   /** Rendered in place of the label text. */
   icon?: string
-  min: number
-  max: number
-  step: number
+  min?: number
+  max?: number
+  step?: number
   /** Readout suffix (%, px, rem, °). */
   unit?: string
-}>()
+  /** Palette chip name — turns the row into a shade slider… */
+  chip?: string
+  /** …for this color mode. */
+  mode?: 'light' | 'dark'
+}>(), {
+  min: 0,
+  max: SHADES.length - 1,
+  step: 1
+})
 
+/** Plain rows: the value itself. Shade rows: an index into SHADES. */
 const value = defineModel<number>({ required: true })
 
+const shade = computed(() => !!props.chip && !!props.mode)
+const sliderColor = computed(() => shade.value ? `var(--color-${props.chip}-${SHADES[value.value]})` : undefined)
+
 /** `0.25rem` reads as `.25rem` — the leading zero is noise at this width. */
-const display = computed(() => `${String(value.value).replace(/^(-?)0\./, '$1.')}${props.unit ?? ''}`)
+const display = computed(() => shade.value
+  ? String(SHADES[value.value])
+  : `${String(value.value).replace(/^(-?)0\./, '$1.')}${props.unit ?? ''}`)
 </script>
 
 <template>
-  <div class="flex items-center gap-2">
-    <span class="text-xs text-muted w-13 shrink-0 select-none flex items-center">
-      <UIcon v-if="icon" :name="icon" class="size-3.5" />
-      <template v-else>{{ label }}</template>
-    </span>
+  <UFormField
+    :label="icon || shade ? undefined : label"
+    orientation="horizontal"
+    size="xs"
+    :ui="{
+      root: 'flex items-center gap-2',
+      wrapper: 'w-13 shrink-0',
+      label: 'text-muted select-none truncate',
+      container: 'flex-1 flex items-center gap-2 mt-0'
+    }"
+  >
+    <template v-if="icon || shade" #label>
+      <UIcon v-if="icon" :name="icon" class="size-3.5 text-muted" />
+
+      <span v-else class="flex items-center gap-1.5 w-full grow">
+        <UIcon :name="mode === 'light' ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3.5 text-muted shrink-0" />
+        <span class="h-3 w-6 grow rounded-sm ring ring-default me-px" :style="{ backgroundColor: sliderColor }" />
+      </span>
+    </template>
 
+    <!-- Shade fills keep a hairline inset ring so a color matching the
+         panel background never makes the slider vanish. -->
     <USlider
       v-model="value"
       :min="min"
       :max="max"
       :step="step"
       size="xs"
-      :aria-label="label"
+      :aria-label="label ?? mode"
+      :style="sliderColor ? { '--slider-color': sliderColor } : undefined"
+      :ui="sliderColor ? {
+        range: 'bg-(--slider-color) inset-ring inset-ring-accented',
+        thumb: 'ring-(--slider-color) inset-ring inset-ring-accented shadow-sm'
+      } : undefined"
     />
 
     <span class="text-xs text-dimmed font-mono w-10 text-right shrink-0 truncate" :title="display">{{ display }}</span>
-  </div>
+  </UFormField>
 </template>
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 9178c33da5..5cad4e22ba 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -92,6 +92,10 @@ onUnmounted(() => window.removeEventListener('mousemove', onPointerNear))
 
 const openPanels = reactive({ presets: false, colors: false, general: false, style: false, view: false })
 const toolbarPinned = computed(() => nearBottom.value || Object.values(openPanels).some(Boolean))
+
+/** The shared import/export modal — the two toolbar buttons pick its mode. */
+const shareOpen = ref(false)
+const shareMode = ref<'import' | 'export'>('export')
 </script>
 
 <template>
@@ -210,9 +214,23 @@ const toolbarPinned = computed(() => nearBottom.value || Object.values(openPanel
 
             <div class="shrink-0">
               <UFieldGroup>
-                <ThemeStudioImport />
+                <UTooltip text="Import theme">
+                  <UButton
+                    icon="i-lucide-upload"
+                    color="neutral"
+                    variant="subtle"
+                    aria-label="Import theme"
+                    @click="shareMode = 'import'; shareOpen = true"
+                  />
+                </UTooltip>
 
-                <ThemeStudioExport />
+                <UButton
+                  label="Export"
+                  icon="i-lucide-download"
+                  color="neutral"
+                  variant="subtle"
+                  @click="shareMode = 'export'; shareOpen = true"
+                />
               </UFieldGroup>
             </div>
 
@@ -229,5 +247,7 @@ const toolbarPinned = computed(() => nearBottom.value || Object.values(openPanel
         </div>
       </div>
     </UContainer>
+
+    <ThemeStudioShareModal v-model:open="shareOpen" v-model:mode="shareMode" />
   </main>
 </template>

From 05af01c6ac1793cc7c878c7a0a2bd8aa5998803b Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Fri, 10 Jul 2026 19:18:25 +0200
Subject: [PATCH 123/185] refactor(docs): enhance theme studio with palette
 effects and UI improvements

- Introduced PaletteEffects to manage lightness, contrast, saturation, and hue shifts independently from base curves.
- Updated ThemeStudioPaletteEditor and related components to support new palette effects, ensuring a more dynamic user experience.
- Improved UI consistency by adjusting button labels and styles across ThemeStudio components.
- Refined color handling in ThemeStudioSliderRow to ensure better contrast and visibility.
- Updated main.css to remove hardcoded background colors, allowing for a more flexible theming approach.

These changes enhance the overall functionality and usability of the theme studio, providing users with more control over their color palettes.
---
 docs/app/assets/css/main.css                  |   2 -
 .../theme-studio/ThemeStudioColorSection.vue  |  21 ++-
 .../theme-studio/ThemeStudioPaletteEditor.vue | 132 +++++++-----------
 .../theme-studio/ThemeStudioSliderRow.vue     |  24 +++-
 docs/app/composables/useThemeStudio.ts        |  23 +--
 docs/app/pages/theme.vue                      |  10 +-
 docs/app/utils/theme-engine/palette.ts        |  89 +++++++++++-
 7 files changed, 190 insertions(+), 111 deletions(-)

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index 04e6482494..e92b1b732f 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -72,8 +72,6 @@ html.theme-studio-dragging body *:not([data-curve-editor] *) {
    user override from the theme studio (plain .light/.dark rules injected
    via useHead) wins regardless of load order. */
 :where(:root:not(.dark), .light) {
-  /* the app background follows the neutral ramp instead of hardcoded white */
-  --ui-bg: var(--ui-color-neutral-50);
   /* hard-shadow treatment: a shadow, not a glow */
   --ui-shadow-color: var(--ui-color-neutral-950);
 }
diff --git a/docs/app/components/theme-studio/ThemeStudioColorSection.vue b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
index 7a5b0cb8da..10451181b3 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
@@ -62,31 +62,30 @@ const openGroups = reactive<Record<string, boolean>>({})
 <template>
   <ThemeStudioSection :label="title" :help-to="helpTo">
     <template #actions>
-      <UTooltip text="Edit palette">
+      <UTooltip text="Adjust shades">
         <UButton
-          icon="i-lucide-pencil"
+          icon="i-lucide-sliders-horizontal"
           color="neutral"
           variant="ghost"
           size="xs"
-          :active="paletteEditor"
+          :active="shadeEditor"
           active-color="primary"
           active-variant="subtle"
-          :aria-label="`Edit ${alias} palette`"
-          @click="paletteEditor = !paletteEditor"
+          :aria-label="`Adjust ${alias} shades`"
+          @click="shadeEditor = !shadeEditor"
         />
       </UTooltip>
-
-      <UTooltip text="Adjust shades">
+      <UTooltip text="Edit palette">
         <UButton
-          icon="i-lucide-sliders-horizontal"
+          icon="i-lucide-pencil"
           color="neutral"
           variant="ghost"
           size="xs"
-          :active="shadeEditor"
+          :active="paletteEditor"
           active-color="primary"
           active-variant="subtle"
-          :aria-label="`Adjust ${alias} shades`"
-          @click="shadeEditor = !shadeEditor"
+          :aria-label="`Edit ${alias} palette`"
+          @click="paletteEditor = !paletteEditor"
         />
       </UTooltip>
     </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 76633b8866..c6da898a8d 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useThrottleFn, watchIgnorable } from '@vueuse/core'
-import { SHADES, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, generatePalette, fitPalette, sampleCurve, clampToGamut, formatOklch } from '../../utils/theme-engine'
-import type { PaletteCurveParams, ColorAlias } from '../../utils/theme-engine'
+import { SHADES, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, PALETTE_EFFECT_DEFAULTS, generatePalette, fitPalette, applyPaletteEffects, isDefaultEffects, sampleCurve, clampToGamut, formatOklch } from '../../utils/theme-engine'
+import type { PaletteCurveParams, PaletteEffects, StoredPaletteParams, ColorAlias } from '../../utils/theme-engine'
 
 const props = defineProps<{
   alias: ColorAlias
@@ -23,13 +23,25 @@ function defaults(): PaletteCurveParams {
   return structuredClone(props.alias === 'neutral' ? NEUTRAL_CURVE_DEFAULTS : CURVE_DEFAULTS)
 }
 
+/** The stored entry's base curves, without the lens. */
+function pickCurves(value: StoredPaletteParams): PaletteCurveParams {
+  return structuredClone({ lightness: toRaw(value.lightness), chroma: toRaw(value.chroma), hue: toRaw(value.hue) })
+}
+
+// The modifier lens, restored alongside the base so a reload lands exactly
+// where the session left off instead of silently baking the sliders in.
 const stored = paletteParams.value[props.alias]
-const params = reactive<PaletteCurveParams>(
-  // Older stored shapes (anchor/slider based) are simply refitted on open.
-  stored && 'lightness' in stored ? structuredClone(toRaw(stored)) as PaletteCurveParams : defaults()
-)
+const effects = reactive<PaletteEffects>({ ...PALETTE_EFFECT_DEFAULTS, ...(stored?.effects ?? {}) })
+const effectAmount = ref(stored?.amount ?? 100)
+
+/** Base curves the modifiers transform from, so they never compound. */
+let seedBase: PaletteCurveParams
+  = stored && 'lightness' in stored ? pickCurves(stored) : defaults()
 // Stored params may predate the fixed 0–360 axis (or carry unwrapped hues).
-normalizeHue(params)
+normalizeHue(seedBase)
+
+/** The DISPLAYED curves: base with the lens applied — what generates the ramp. */
+const params = reactive<PaletteCurveParams>(applyPaletteEffects(seedBase, effects, effectAmount.value))
 
 const active = computed(() => isCustomPalette(props.alias))
 
@@ -99,13 +111,14 @@ function normalizeHue(values: PaletteCurveParams) {
   }
 }
 
-/** Fitted base the modifiers transform from, so they never compound. */
-let seedBase: PaletteCurveParams = structuredClone(toRaw(params))
-
 // Throttled (not debounced) so the theme streams live while dragging a
-// curve — the trailing call catches the release position.
+// curve — the trailing call catches the release position. With a neutral
+// lens the base simply tracks the edited curves.
 const throttledApply = useThrottleFn(() => {
-  setPaletteFromCurve(props.alias, structuredClone(toRaw(params)))
+  if (!effectsDirty.value) {
+    seedBase = structuredClone(toRaw(params))
+  }
+  setPaletteFromCurve(props.alias, structuredClone(seedBase), { ...effects }, effectAmount.value)
 }, 60, true, true)
 
 // Programmatic writes into `params` (seeding, external sync) must not
@@ -119,7 +132,7 @@ function seed(values: PaletteCurveParams) {
   const next = structuredClone(toRaw(values))
   normalizeHue(next)
   seedBase = structuredClone(next)
-  Object.assign(effects, EFFECT_DEFAULTS)
+  Object.assign(effects, PALETTE_EFFECT_DEFAULTS)
   effectAmount.value = 100
   ignoreUpdates(() => {
     Object.assign(params, next)
@@ -131,6 +144,14 @@ function seed(values: PaletteCurveParams) {
 let dragEndTimeout: ReturnType<typeof setTimeout> | undefined
 
 function onDragStart() {
+  // Editing a curve commits the lens: the base becomes the curves on
+  // screen (the look doesn't change) and the modifier sliders reset, so
+  // a later modifier edit can never throw the drag away.
+  if (effectsDirty.value) {
+    seedBase = structuredClone(toRaw(params))
+    Object.assign(effects, PALETTE_EFFECT_DEFAULTS)
+    effectAmount.value = 100
+  }
   clearTimeout(dragEndTimeout)
   document.documentElement.classList.add('theme-studio-dragging')
 }
@@ -159,13 +180,21 @@ function seedFromCurrent() {
   }
 }
 
-// Swatch clicks while active refit via the studio — reflect them here. The
-// snapshot comparison is what breaks the echo loop for our own throttled
-// applies (the callback runs queued, after any sync flag would have reset).
+// External writes to the stored entry — reflect them here, lens included.
+// The effective-curve comparison is what breaks the echo loop for our own
+// throttled applies (the callback runs queued, after any sync flag reset).
 watch(() => paletteParams.value[props.alias], (value) => {
-  if (value && 'lightness' in value && JSON.stringify(value) !== JSON.stringify(toRaw(params))) {
-    seed(value as PaletteCurveParams)
-  }
+  if (!value || !('lightness' in value)) return
+  const effective = applyPaletteEffects(pickCurves(value), value.effects, value.amount)
+  if (JSON.stringify(effective) === JSON.stringify(toRaw(params))) return
+
+  seedBase = pickCurves(value)
+  normalizeHue(seedBase)
+  Object.assign(effects, PALETTE_EFFECT_DEFAULTS, value.effects ?? {})
+  effectAmount.value = value.amount ?? 100
+  ignoreUpdates(() => {
+    Object.assign(params, applyPaletteEffects(seedBase, effects, effectAmount.value))
+  })
 })
 
 // While inactive, follow the selected palette so opening the editor starts
@@ -176,32 +205,7 @@ watch([() => (appConfig.ui.colors as Record<string, string>)[props.alias], open]
   }
 })
 
-// Scale AND offset: a pure multiply barely moves low-chroma (gray) ramps,
-// so a flat chroma term registers there too.
-function scaleChroma(curve: PaletteCurveParams['chroma'], factor: number, offset = 0) {
-  curve.y0 = Math.max(0, curve.y0 * factor + offset)
-  curve.y1 = Math.max(0, curve.y1 * factor + offset)
-  curve.p1y = Math.max(0, curve.p1y * factor + offset)
-  curve.p2y = Math.max(0, curve.p2y * factor + offset)
-}
-
-/* ------------------------------------------------------ custom effects -- */
-
-/**
- * Modifiers: the photo-editing quartet layered on top of the fitted base —
- * lightness shift, contrast about the ramp's own midpoint, saturation
- * (multiplicative with an additive floor, so gray ramps respond too) and
- * hue rotation. Idempotent: always recomputed from seedBase, never
- * compounding.
- */
-const EFFECT_DEFAULTS = { lightness: 0, contrast: 0, saturation: 0, hueShift: 0 }
-const effects = reactive({ ...EFFECT_DEFAULTS })
-
-/**
- * Overall strength: 100% applies the sliders as set, lower blends back
- * toward the fitted base, above 100% extrapolates past them.
- */
-const effectAmount = ref(100)
+/* ---------------------------------------------------------- modifiers -- */
 
 /** The modifiers fold — closed by default like the other advanced panels. */
 const modifiersOpen = ref(false)
@@ -213,45 +217,15 @@ const effectRows = [
   { key: 'hueShift', label: 'Hue', min: -180, max: 180, step: 5, unit: '°' }
 ] as const
 
+/** Re-derive the displayed curves from the base — a user edit, live-applied. */
 function applyEffects() {
-  const target = structuredClone(seedBase)
-
-  // The strength slider scales every effect's distance from its default.
-  const amount = effectAmount.value / 100
-  const effective = (key: keyof typeof EFFECT_DEFAULTS) =>
-    EFFECT_DEFAULTS[key] + (effects[key] - EFFECT_DEFAULTS[key]) * amount
-
-  // Lightness: contrast expands/compresses about the curve's own midpoint,
-  // then the shift slides the whole ramp.
-  const lightness = target.lightness
-  const mid = (lightness.y0 + lightness.y1) / 2
-  const span = 1 + effective('contrast') / 100
-  const shift = effective('lightness') / 100
-  const mapLightness = (value: number) => mid + (value - mid) * span + shift
-  lightness.y0 = mapLightness(lightness.y0)
-  lightness.y1 = mapLightness(lightness.y1)
-  lightness.p1y = mapLightness(lightness.p1y)
-  lightness.p2y = mapLightness(lightness.p2y)
-
-  // Saturation: scale for colorful ramps, plus a small additive floor when
-  // boosting so near-gray ramps (where a multiply is a no-op) respond too.
-  const saturation = effective('saturation') / 100
-  scaleChroma(target.chroma, 1 + saturation, Math.max(0, saturation) * 0.02)
-
-  const hueShift = effective('hueShift')
-  target.hue.y0 += hueShift
-  target.hue.y1 += hueShift
-  target.hue.p1y += hueShift
-  target.hue.p2y += hueShift
-
-  // A user edit — the watcher live-applies it.
-  Object.assign(params, target)
+  Object.assign(params, applyPaletteEffects(seedBase, effects, effectAmount.value))
 }
 
-const effectsDirty = computed(() => effectAmount.value !== 100 || effectRows.some(row => effects[row.key] !== EFFECT_DEFAULTS[row.key]))
+const effectsDirty = computed(() => !isDefaultEffects(effects, effectAmount.value))
 
 function resetEffects() {
-  Object.assign(effects, EFFECT_DEFAULTS)
+  Object.assign(effects, PALETTE_EFFECT_DEFAULTS)
   effectAmount.value = 100
   applyEffects()
 }
diff --git a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
index 810dcf08be..8c95853bad 100644
--- a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
@@ -33,6 +33,16 @@ const value = defineModel<number>({ required: true })
 const shade = computed(() => !!props.chip && !!props.mode)
 const sliderColor = computed(() => shade.value ? `var(--color-${props.chip}-${SHADES[value.value]})` : undefined)
 
+/**
+ * A border that always contrasts with the fill, derived FROM the fill:
+ * relative color syntax steps lightness to near-black on light fills and
+ * near-white on dark ones (the ×1000 turns the difference into a hard
+ * switch the clamp bounds).
+ */
+const contrastColor = computed(() => shade.value
+  ? `oklch(from ${sliderColor.value} clamp(0.12, (0.66 - l) * 1000, 0.95) 0 h / 0.65)`
+  : undefined)
+
 /** `0.25rem` reads as `.25rem` — the leading zero is noise at this width. */
 const display = computed(() => shade.value
   ? String(SHADES[value.value])
@@ -44,10 +54,13 @@ const display = computed(() => shade.value
     :label="icon || shade ? undefined : label"
     orientation="horizontal"
     size="xs"
+    :style="sliderColor ? { '--slider-color': sliderColor, '--slider-contrast': contrastColor } : undefined"
     :ui="{
       root: 'flex items-center gap-2',
       wrapper: 'w-13 shrink-0',
-      label: 'text-muted select-none truncate',
+      /* truncate only text labels — its overflow:hidden would clip the
+         shade chip's ring once thick-border themes inflate it */
+      label: `w-full text-muted select-none${icon || shade ? '' : ' truncate'}`,
       container: 'flex-1 flex items-center gap-2 mt-0'
     }"
   >
@@ -56,7 +69,7 @@ const display = computed(() => shade.value
 
       <span v-else class="flex items-center gap-1.5 w-full grow">
         <UIcon :name="mode === 'light' ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3.5 text-muted shrink-0" />
-        <span class="h-3 w-6 grow rounded-sm ring ring-default me-px" :style="{ backgroundColor: sliderColor }" />
+        <span class="h-3 w-6 grow rounded-sm bg-(--slider-color) ring ring-1 ring-(--slider-contrast) me-px" />
       </span>
     </template>
 
@@ -69,13 +82,12 @@ const display = computed(() => shade.value
       :step="step"
       size="xs"
       :aria-label="label ?? mode"
-      :style="sliderColor ? { '--slider-color': sliderColor } : undefined"
       :ui="sliderColor ? {
-        range: 'bg-(--slider-color) inset-ring inset-ring-accented',
-        thumb: 'ring-(--slider-color) inset-ring inset-ring-accented shadow-sm'
+        range: 'bg-(--slider-color) inset-ring inset-ring-(--slider-contrast)',
+        thumb: 'bg-(--slider-color) ring-1 ring-(--slider-contrast) shadow-sm'
       } : undefined"
     />
 
-    <span class="text-xs text-dimmed font-mono w-10 text-right shrink-0 truncate" :title="display">{{ display }}</span>
+    <span class="text-xs text-dimmed font-mono w-12 text-right shrink-0 truncate" :title="display">{{ display }}</span>
   </UFormField>
 </template>
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 612df25716..b97109f1dd 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,7 +1,7 @@
 import colors from 'tailwindcss/colors'
 import { THEME_STATE_KEYS, THEME_STORAGE_KEYS } from '../utils/theme-keys'
-import { presets, docToSettings, isDefaultTheme, generatePalette, parseCssColor, parseUiColorRef, styleComponents, styleTokens, DEFAULT_COLORS, SHADES, TOKEN_SHADE_TARGETS } from '../utils/theme-engine'
-import type { ThemeDoc, ThemePreset, PaletteCurveParams, StyleOptions, Shade, ColorAlias, TokenRamp } from '../utils/theme-engine'
+import { presets, docToSettings, isDefaultTheme, generatePalette, applyPaletteEffects, isDefaultEffects, parseCssColor, parseUiColorRef, styleComponents, styleTokens, DEFAULT_COLORS, SHADES, TOKEN_SHADE_TARGETS } from '../utils/theme-engine'
+import type { ThemeDoc, ThemePreset, PaletteCurveParams, PaletteEffects, StoredPaletteParams, StyleOptions, Shade, ColorAlias, TokenRamp } from '../utils/theme-engine'
 import { readLocalStorage } from '../utils/theme'
 
 export function useThemeStudio() {
@@ -30,9 +30,9 @@ export function useThemeStudio() {
    * resetTheme() — reachable from the popover and chat, outside this
    * composable — can clear the shared state, not just the storage key.
    */
-  const paletteParams = useState<Partial<Record<string, PaletteCurveParams>>>(THEME_STATE_KEYS.paletteParams, () => readLocalStorage(THEME_STORAGE_KEYS.paletteParams, {}))
+  const paletteParams = useState<Partial<Record<string, StoredPaletteParams>>>(THEME_STATE_KEYS.paletteParams, () => readLocalStorage(THEME_STORAGE_KEYS.paletteParams, {}))
 
-  function setPaletteParams(value: Partial<Record<string, PaletteCurveParams>>) {
+  function setPaletteParams(value: Partial<Record<string, StoredPaletteParams>>) {
     paletteParams.value = value
     if (Object.keys(value).length) {
       window.localStorage.setItem(THEME_STORAGE_KEYS.paletteParams, JSON.stringify(value))
@@ -192,8 +192,12 @@ export function useThemeStudio() {
     }
   }
 
-  /** Generate a ramp from curve params and point the alias at it. */
-  function setPaletteFromCurve(alias: ColorAlias, params: PaletteCurveParams) {
+  /**
+   * Generate a ramp and point the alias at it. The base curves and the
+   * modifier lens persist separately, so a reload restores the editor's
+   * sliders instead of silently baking them into the curves.
+   */
+  function setPaletteFromCurve(alias: ColorAlias, base: PaletteCurveParams, effects?: PaletteEffects, amount = 100) {
     const name = customPaletteName(alias)
 
     // Remember what to restore when the custom palette is removed — the
@@ -205,11 +209,14 @@ export function useThemeStudio() {
     }
 
     theme.applyThemeSettings({
-      customColors: { [name]: generatePalette(params) },
+      customColors: { [name]: generatePalette(applyPaletteEffects(base, effects, amount)) },
       [alias]: name,
       ...(alias === 'neutral' ? { cssVariables: unownedNeutralRemaps() } : {})
     }, { track: false })
-    setPaletteParams({ ...paletteParams.value, [alias]: params })
+    const entry: StoredPaletteParams = isDefaultEffects(effects, amount)
+      ? { ...base }
+      : { ...base, effects, amount }
+    setPaletteParams({ ...paletteParams.value, [alias]: entry })
     setActivePreset(undefined)
 
     // Live drags call this at ~16Hz — one analytics event per burst is plenty.
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 5cad4e22ba..0a0bcb4e58 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -99,7 +99,9 @@ const shareMode = ref<'import' | 'export'>('export')
 </script>
 
 <template>
-  <main class="bg-neutral-100 dark:bg-neutral-900">
+  <!-- The app root (#__nuxt) paints bg-default via nuxt.config rootAttrs —
+       the page tint composites on top of it. -->
+  <main class="bg-elevated/25">
     <UContainer :class="fullscreen && 'max-w-none px-0 sm:px-0 lg:px-0'">
       <div class="flex flex-col w-full" :class="fullscreen ? 'h-dvh' : 'h-[calc(100dvh-var(--ui-header-height))]'">
         <!-- The floating preview card: the grid scrolls inside it; the
@@ -129,14 +131,16 @@ const shareMode = ref<'import' | 'export'>('export')
              container width, peeking a few pixels until the pointer
              nears the bottom (Esc still exits); only that strip catches
              the pointer so the preview stays clickable. -->
-        <div :class="fullscreen ? 'group fixed bottom-0 inset-x-0 z-50 pointer-events-none' : 'shrink-0'">
+        <!-- UContainer's own recipe, so the floating bar's edges line up
+             with every other page's content. -->
+        <div :class="fullscreen ? 'group fixed bottom-0 inset-x-0 z-50 pointer-events-none w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8' : 'shrink-0'">
           <!-- thin touch affordance only — mouse reveal is proximity-driven -->
           <div v-if="fullscreen" class="absolute bottom-0 inset-x-0 h-2 pointer-events-auto" />
 
           <div
             class="flex items-center gap-2 py-3 overflow-x-auto"
             :class="fullscreen && [
-              'my-4 mx-auto w-[calc(100%-2rem)] max-w-(--ui-container) px-4 rounded-lg bg-default ring ring-default shadow-lg pointer-events-auto transition-transform duration-200',
+              'mt-4 px-4 rounded-t-lg bg-default/75 backdrop-blur ring ring-default shadow-lg pointer-events-auto transition-transform duration-200',
               toolbarPinned ? 'translate-y-0' : 'translate-y-[calc(100%+6px)] group-hover:translate-y-0 group-focus-within:translate-y-0'
             ]"
           >
diff --git a/docs/app/utils/theme-engine/palette.ts b/docs/app/utils/theme-engine/palette.ts
index d35c742e5e..98d05857fd 100644
--- a/docs/app/utils/theme-engine/palette.ts
+++ b/docs/app/utils/theme-engine/palette.ts
@@ -49,6 +49,89 @@ export const NEUTRAL_CURVE_DEFAULTS: PaletteCurveParams = {
   hue: CURVE_DEFAULTS.hue
 }
 
+/**
+ * The editor's modifier lens: independent effects layered on top of base
+ * curves — lightness shift, contrast about the ramp's own midpoint,
+ * saturation (multiplicative with an additive floor, so gray ramps respond
+ * too) and hue rotation, all scaled by an overall amount. Pure: always
+ * derives fresh curves from the base, never compounding.
+ */
+export interface PaletteEffects {
+  lightness: number
+  contrast: number
+  saturation: number
+  hueShift: number
+}
+
+export const PALETTE_EFFECT_DEFAULTS: PaletteEffects = { lightness: 0, contrast: 0, saturation: 0, hueShift: 0 }
+
+/** A persisted palette: the base curves plus the modifier lens over them. */
+export type StoredPaletteParams = PaletteCurveParams & { effects?: PaletteEffects, amount?: number }
+
+export function isDefaultEffects(effects?: PaletteEffects, amount = 100): boolean {
+  if (amount !== 100) return false
+  if (!effects) return true
+  return (Object.keys(PALETTE_EFFECT_DEFAULTS) as Array<keyof PaletteEffects>)
+    .every(key => effects[key] === PALETTE_EFFECT_DEFAULTS[key])
+}
+
+export function applyPaletteEffects(base: PaletteCurveParams, effects?: PaletteEffects, amount = 100): PaletteCurveParams {
+  const target = structuredClone(base)
+  if (isDefaultEffects(effects, amount)) return target
+
+  // The strength scales every effect's distance from its default: 100% as
+  // set, lower blends back toward the base, higher extrapolates past.
+  const strength = amount / 100
+  const effective = (key: keyof PaletteEffects) =>
+    PALETTE_EFFECT_DEFAULTS[key] + ((effects?.[key] ?? PALETTE_EFFECT_DEFAULTS[key]) - PALETTE_EFFECT_DEFAULTS[key]) * strength
+
+  // Lightness: contrast expands/compresses about the curve's own midpoint,
+  // then the shift slides the whole ramp. Every point clamps to the
+  // physical [0, 1] window, exactly like a drag stopping at the edge.
+  const lightness = target.lightness
+  const mid = (lightness.y0 + lightness.y1) / 2
+  const span = 1 + effective('contrast') / 100
+  const shift = effective('lightness') / 100
+  const mapLightness = (value: number) => Math.min(1, Math.max(0, mid + (value - mid) * span + shift))
+  lightness.y0 = mapLightness(lightness.y0)
+  lightness.y1 = mapLightness(lightness.y1)
+  lightness.p1y = mapLightness(lightness.p1y)
+  lightness.p2y = mapLightness(lightness.p2y)
+
+  // Saturation: scale for colorful ramps, plus a small additive floor when
+  // boosting so near-gray ramps (where a multiply is a no-op) respond too.
+  // Clamped to the editor's chroma window (sRGB tops out around 0.37).
+  const saturation = effective('saturation') / 100
+  const factor = 1 + saturation
+  const floor = Math.max(0, saturation) * 0.02
+  const mapChroma = (value: number) => Math.min(0.4, Math.max(0, value * factor + floor))
+  const chroma = target.chroma
+  chroma.y0 = mapChroma(chroma.y0)
+  chroma.y1 = mapChroma(chroma.y1)
+  chroma.p1y = mapChroma(chroma.p1y)
+  chroma.p2y = mapChroma(chroma.p2y)
+
+  // Hue shifts the whole curve, then re-centers by full turns so the mean
+  // stays in [0, 360) — a uniform shift keeps the curve continuous, and
+  // hue is cyclic so the colors are identical.
+  const hueShift = effective('hueShift')
+  const hue = target.hue
+  hue.y0 += hueShift
+  hue.y1 += hueShift
+  hue.p1y += hueShift
+  hue.p2y += hueShift
+  const mean = (hue.y0 + hue.y1 + hue.p1y + hue.p2y) / 4
+  const turns = -360 * Math.floor(mean / 360)
+  if (turns !== 0) {
+    hue.y0 += turns
+    hue.y1 += turns
+    hue.p1y += turns
+    hue.p2y += turns
+  }
+
+  return target
+}
+
 function cubicBezier(t: number, a: number, b: number, c: number, d: number): number {
   const u = 1 - t
   return u * u * u * a + 3 * u * u * t * b + 3 * u * t * t * c + t * t * t * d
@@ -87,11 +170,13 @@ export function generatePalette(params: PaletteCurveParams): Record<Shade, strin
     // impossible chroma, and the swatches/contrast math assume sRGB.
     // Lightness clamps too — clampToGamut only searches chroma, so an
     // overshooting curve (handles may exceed the window) would otherwise
-    // emit oklch(112% …) verbatim into exports and contrast math.
+    // emit oklch(112% …) verbatim into exports and contrast math. Hue
+    // wraps into [0, 360): a negative or 4-digit hue would fail the
+    // sanitizer's canonical-oklch check and silently DROP the shade.
     result[shade] = formatOklch(clampToGamut({
       l: Math.min(1, Math.max(0, sampleCurve(x, params.lightness))),
       c: Math.max(0, sampleCurve(x, params.chroma)),
-      h: sampleCurve(x, params.hue)
+      h: ((sampleCurve(x, params.hue) % 360) + 360) % 360
     }))
   }
 

From c762b4129218ab2b97489be3c49b2c87361e8605 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Fri, 10 Jul 2026 19:32:08 +0200
Subject: [PATCH 124/185] refactor(docs): enhance shadow handling and UI
 consistency in Theme Studio

- Updated shadow style options to include 'Inherit' and 'flat', improving clarity in shadow management.
- Refined inner shadow handling to streamline options and ensure consistent behavior across components.
- Removed unused local storage references for palette management, simplifying state handling.
- Adjusted UI elements in ThemeStudioControls for better interaction feedback and visual consistency.

These changes improve the overall user experience and maintainability of the theme studio.
---
 .../theme-studio/ThemeStudioControls.vue      | 36 +++++++++++++------
 docs/app/composables/useTheme.ts              |  1 -
 docs/app/composables/useThemeStudio.ts        | 19 ++++------
 docs/app/utils/theme-engine/export.ts         |  5 +--
 docs/app/utils/theme-engine/import.ts         |  2 ++
 docs/app/utils/theme-engine/styles.ts         | 19 ++++++++--
 docs/app/utils/theme-keys.ts                  |  3 +-
 test/utils/theme-import.spec.ts               | 14 ++++++++
 8 files changed, 68 insertions(+), 31 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index e1a0f0275b..a038aa5d39 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -21,20 +21,34 @@ const { style, setStyle, primaryChip, neutralChip } = useThemeStudio()
 
 const semanticAliases: ColorAlias[] = ['secondary', 'success', 'info', 'warning', 'error']
 
+// Inherit leaves the library's own shadows alone, None strips them, Custom
+// is the studio treatment. The engine still understands 'soft' (presets,
+// imports) — it simply reads as Custom here.
 const SHADOW_STYLE_OPTIONS = [
+  { label: 'Inherit', value: 'inherit' },
   { label: 'None', value: 'none' },
-  { label: 'Default', value: 'soft' },
-  { label: 'Custom', value: 'hard' }
+  { label: 'Custom', value: 'custom' }
 ]
 
 const shadowStyle = computed({
-  get: () => style.value.shadow || 'none',
-  set: (value: any) => setStyle({ shadow: value })
+  get: () => {
+    const shadow = style.value.shadow
+    if (!shadow || shadow === 'none') return 'inherit'
+    return shadow === 'flat' ? 'none' : 'custom'
+  },
+  set: (value: any) => setStyle({ shadow: value === 'custom' ? 'hard' : value === 'none' ? 'flat' : 'none' })
 })
 
+// Nothing in the library casts an inner shadow, so None and Inherit are
+// the same thing — two options suffice.
+const INNER_SHADOW_OPTIONS = [
+  { label: 'None', value: 'none' },
+  { label: 'Custom', value: 'custom' }
+]
+
 const innerShadowStyle = computed({
-  get: () => style.value.innerShadow || 'none',
-  set: (value: any) => setStyle({ innerShadow: value })
+  get: () => (!style.value.innerShadow || style.value.innerShadow === 'none') ? 'none' : 'custom',
+  set: (value: any) => setStyle({ innerShadow: value === 'custom' ? 'hard' : 'none' })
 })
 
 const shadowOpacity = computed({
@@ -60,8 +74,8 @@ function innerGeometrySlider(key: 'x' | 'y' | 'blur' | 'spread') {
 }
 
 const borderOptions = [
+  { label: 'Inherit', value: 'default' },
   { label: 'None', value: 'none' },
-  { label: 'Default', value: 'default' },
   { label: 'Custom', value: 'custom' }
 ]
 
@@ -302,7 +316,7 @@ const shadowColor = computed({
               class="w-full"
             />
 
-            <div v-if="(style.shadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
+            <div v-if="shadowStyle === 'custom'" class="mt-1.5 flex flex-col gap-2">
               <USelect
                 v-model="shadowColor"
                 size="sm"
@@ -354,19 +368,19 @@ const shadowColor = computed({
           <div>
             <UTabs
               v-model="innerShadowStyle"
-              :items="SHADOW_STYLE_OPTIONS"
+              :items="INNER_SHADOW_OPTIONS"
               :content="false"
               size="xs"
               color="neutral"
               class="w-full"
             />
 
-            <div v-if="(style.innerShadow || 'none') !== 'none'" class="mt-1.5 flex flex-col gap-2">
+            <div v-if="innerShadowStyle === 'custom'" class="mt-1.5 flex flex-col gap-2">
               <USelect
                 v-model="innerShadowColor"
                 size="sm"
                 color="neutral"
-                variant="ghost"
+                variant="subtle"
                 icon="i-lucide-paint-bucket"
                 :items="shadowColorItems"
                 class="w-full"
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 90e1bc34dd..70e1f818b6 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -530,7 +530,6 @@ export function useTheme() {
     window.localStorage.removeItem(THEME_STORAGE_KEYS.preset)
     window.localStorage.removeItem(THEME_STORAGE_KEYS.style)
     window.localStorage.removeItem(THEME_STORAGE_KEYS.paletteParams)
-    window.localStorage.removeItem(THEME_STORAGE_KEYS.palettePrev)
     useState<Record<string, any>>(THEME_STATE_KEYS.stylePrefs).value = {}
     useState<string | undefined>(THEME_STATE_KEYS.themePreset).value = undefined
     // The in-memory curve params too — the storage key alone leaves the
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index b97109f1dd..a947fead6e 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -200,14 +200,6 @@ export function useThemeStudio() {
   function setPaletteFromCurve(alias: ColorAlias, base: PaletteCurveParams, effects?: PaletteEffects, amount = 100) {
     const name = customPaletteName(alias)
 
-    // Remember what to restore when the custom palette is removed — the
-    // default alias would discard a preset's choice (e.g. Ghibli's stone).
-    if (!isCustomPalette(alias)) {
-      const prev = readLocalStorage<Record<string, string>>(THEME_STORAGE_KEYS.palettePrev, {})
-      prev[alias] = (appConfig.ui.colors as Record<string, string>)[alias]!
-      window.localStorage.setItem(THEME_STORAGE_KEYS.palettePrev, JSON.stringify(prev))
-    }
-
     theme.applyThemeSettings({
       customColors: { [name]: generatePalette(applyPaletteEffects(base, effects, amount)) },
       [alias]: name,
@@ -226,7 +218,11 @@ export function useThemeStudio() {
     }
   }
 
-  /** Drop the custom ramp and restore the palette that preceded it. */
+  /**
+   * Drop the custom ramp and its curve params. Callers (swatch selection)
+   * always set the alias right after, so no restore dance is needed — the
+   * default is just a safety net for a clear without a follow-up pick.
+   */
   function clearCustomPalette(alias: ColorAlias) {
     theme.removeCustomColors([customPaletteName(alias)])
     if (alias === 'neutral') {
@@ -237,10 +233,7 @@ export function useThemeStudio() {
       })
     }
 
-    const prev = readLocalStorage<Record<string, string>>(THEME_STORAGE_KEYS.palettePrev, {})
-    theme.applyThemeSettings({ [alias]: prev[alias] || DEFAULT_COLORS[alias] }, { track: false })
-    const { [alias]: _restored, ...remaining } = prev
-    window.localStorage.setItem(THEME_STORAGE_KEYS.palettePrev, JSON.stringify(remaining))
+    theme.applyThemeSettings({ [alias]: DEFAULT_COLORS[alias] }, { track: false })
 
     const { [alias]: _, ...rest } = paletteParams.value
     setPaletteParams(rest)
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index 24539d146c..1fa3842690 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -72,7 +72,8 @@ export function generateCSS(doc: ThemeDoc): string {
     }
   }
   // Any shadow treatment defaults the shared color when none was chosen.
-  const anyShadow = (doc.style?.shadow && doc.style.shadow !== 'none') || (doc.style?.innerShadow && doc.style.innerShadow !== 'none')
+  const castsShadow = (value?: string) => !!value && value !== 'none' && value !== 'flat'
+  const anyShadow = castsShadow(doc.style?.shadow) || castsShadow(doc.style?.innerShadow)
   if (anyShadow && !style.light['--ui-shadow-color']) {
     style.light['--ui-shadow-color'] = 'var(--ui-color-neutral-950)'
     style.dark['--ui-shadow-color'] = 'black'
@@ -92,7 +93,7 @@ export function generateCSS(doc: ThemeDoc): string {
     style.light['--ui-shadow-hard-sm'] = 'calc(var(--ui-shadow-offset-x) * 0.66) calc(var(--ui-shadow-offset-y) * 0.66) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard)'
     style.light['--ui-shadow-hard-half'] = 'calc(var(--ui-shadow-offset-x) / 2) calc(var(--ui-shadow-offset-y) / 2) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard)'
   }
-  if (doc.style?.shadow && doc.style.shadow !== 'none') {
+  if (castsShadow(doc.style?.shadow)) {
     style.light['--ui-shadow-final-hard'] = 'color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 100%), transparent)'
     style.light['--ui-shadow-final-soft'] = 'color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 25%), transparent)'
   }
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index e739a86392..ed62085a0d 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -507,6 +507,8 @@ function detectShadow(components: Record<string, any>): StyleOptions['shadow'] {
   const slots = Object.values(components).flatMap(component => Object.values(component?.slots || {})) as string[]
   if (slots.some(classes => classes.includes('--ui-shadow-hard') || classes.includes('var(--ui-shadow-offset-x)'))) return 'hard'
   if (slots.some(classes => classes.includes('--ui-shadow-final-soft'))) return 'soft'
+  // the flat treatment is bare shadow-none on the overlay surfaces
+  if (components.popover?.slots?.content?.includes('shadow-none') && components.toast?.slots?.root?.includes('shadow-none')) return 'flat'
   return undefined
 }
 
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 3f07de051b..c65e2ce014 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -26,7 +26,7 @@
  *   each element's own ring color / the dark shadow color untouched.
  */
 
-export type ShadowStyle = 'none' | 'soft' | 'hard'
+export type ShadowStyle = 'none' | 'flat' | 'soft' | 'hard'
 /** 'bold'/'frame' are legacy values (old exports/saved state) treated as 'custom'. */
 export type BorderStyle = 'default' | 'none' | 'custom' | 'bold' | 'frame'
 export type BorderColor = 'default' | 'inverted' | 'black' | 'white' | 'primary' | 'neutral' | 'shade' | 'primary-shade'
@@ -213,6 +213,21 @@ const HARD_SM = 'shadow-(--ui-shadow-hard-sm)'
 
 const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
   none: {},
+  // Strip the stock shadows the library ships on overlay surfaces — the
+  // studio's None, distinct from Inherit (no treatment at all).
+  flat: {
+    popover: { slots: { content: 'shadow-none' } },
+    dropdownMenu: { slots: { content: 'shadow-none' } },
+    contextMenu: { slots: { content: 'shadow-none' } },
+    select: { slots: { content: 'shadow-none' } },
+    selectMenu: { slots: { content: 'shadow-none' } },
+    inputMenu: { slots: { content: 'shadow-none' } },
+    tooltip: { slots: { content: 'shadow-none' } },
+    toast: { slots: { root: 'shadow-none' } },
+    drawer: { slots: { content: 'shadow-none' } },
+    modal: { compoundVariants: [{ fullscreen: false, class: { content: 'shadow-none' } }] },
+    slideover: { slots: { content: 'sm:shadow-none' } }
+  },
   soft: {
     // shadow-(color:--ui-shadow-final-soft) recolors the preset shadows through the
     // same variable the hard treatment uses, so the color/shade options
@@ -480,7 +495,7 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
     }
   }
 
-  if (style.shadow && style.shadow !== 'none' && style.shadowOpacity !== undefined) {
+  if (style.shadow && style.shadow !== 'none' && style.shadow !== 'flat' && style.shadowOpacity !== undefined) {
     light['--ui-shadow-opacity'] = `${style.shadowOpacity}%`
     dark['--ui-shadow-opacity'] = `${style.shadowOpacity}%`
   }
diff --git a/docs/app/utils/theme-keys.ts b/docs/app/utils/theme-keys.ts
index e6daeb3595..70c3ded30c 100644
--- a/docs/app/utils/theme-keys.ts
+++ b/docs/app/utils/theme-keys.ts
@@ -9,8 +9,7 @@ export const THEME_STORAGE_KEYS = {
   preset: 'nuxt-ui-preset',
   style: 'nuxt-ui-style',
   styleUi: 'nuxt-ui-style-ui',
-  paletteParams: 'nuxt-ui-palette-params',
-  palettePrev: 'nuxt-ui-palette-prev'
+  paletteParams: 'nuxt-ui-palette-params'
 } as const
 
 /** useState keys shared across composables. */
diff --git a/test/utils/theme-import.spec.ts b/test/utils/theme-import.spec.ts
index 7b994a423e..6c68c488ba 100644
--- a/test/utils/theme-import.spec.ts
+++ b/test/utils/theme-import.spec.ts
@@ -151,6 +151,20 @@ describe('importTheme', () => {
     expect(doc.tokens?.dark?.['--ui-frame-color']).toBe('#ff0000')
   })
 
+  it('round-trips the flat shadow treatment without color defaults', () => {
+    const original: ThemeDoc = { version: 1, style: { shadow: 'flat' } }
+    const css = generateCSS(original)
+    const config = generateConfig(original)
+    const { doc: imported, skipped } = importTheme({ css, config })
+
+    // flat strips shadows — no shadow color belongs in its export
+    expect(css).not.toContain('--ui-shadow-color')
+    expect(skipped).toEqual([])
+    expect(imported.style?.shadow).toBe('flat')
+    expect(generateConfig(imported)).toBe(config)
+    expect(generateCSS(imported)).toBe(css)
+  })
+
   it('round-trips the app-wide default size across every sized component', () => {
     const original: ThemeDoc = { version: 1, style: { defaults: { size: 'lg' } } }
     const config = generateConfig(original)

From cf162ac981651d88adb636640ab1ce942395af67 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Fri, 10 Jul 2026 21:12:22 +0200
Subject: [PATCH 125/185] =?UTF-8?q?feat(docs):=20typography=20system=20?=
 =?UTF-8?q?=E2=80=94=20weights,=20heading=20treatment=20and=20richer=20pic?=
 =?UTF-8?q?kers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ThemeDoc.font grows tailwind weight-step overrides (normal/medium/
  semibold/bold — live variables components dereference, so they restyle
  the whole UI), base uppercase/italic/tracking/leading, and a prose
  heading treatment (font, weight, italic, underline, case, tracking,
  leading) emitted as body and h1–h6 rules; import parses it all back,
  round-trip tested
- Preview rides one nuxt-ui-font-prefs channel (state, storage, FOUC
  script, plugin restore); Google Fonts links cover both families at
  300–800 (also the Comic Neue thinness fix)
- The Font panel becomes a type editor: live specimen atop the fold,
  Base and Headings rows with font selects previewing their own faces,
  and grouped icon toolbars — face [B I(U)], case [AB], rhythm [↔ ↕] —
  with sliders tucked in popovers; Icons fold leads with a 20-icon
  spread of the selected set; text size returns to Scale
- Comic Neue joins the font list

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue      | 404 +++++++++++++++++-
 .../theme-studio/ThemeStudioPaletteEditor.vue |   2 -
 .../theme-studio/ThemeStudioSliderRow.vue     |   1 +
 docs/app/composables/useTheme.ts              | 150 ++++++-
 docs/app/plugins/theme.ts                     |  46 +-
 docs/app/utils/theme-engine/export.ts         |  40 ++
 docs/app/utils/theme-engine/import.ts         |  84 +++-
 docs/app/utils/theme-engine/presets.ts        |  40 +-
 docs/app/utils/theme-engine/types.ts          |  28 +-
 docs/app/utils/theme.ts                       |   3 +
 test/utils/theme-import.spec.ts               |  13 +
 11 files changed, 772 insertions(+), 39 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index a038aa5d39..af4d777d2c 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, BORDER_WIDTH_DEFAULT, SHADOW_GEOMETRY_DEFAULTS, INNER_SHADOW_GEOMETRY_DEFAULTS } from '../../utils/theme-engine'
+import { themeIcons, FONT_WEIGHT_DEFAULTS } from '../../utils/theme'
 import type { VariantGroup, ColorAlias } from '../../utils/theme-engine'
 
 /** Which settings group this instance renders — one popover per group. */
@@ -13,12 +14,131 @@ const {
   spacing,
   fonts,
   font,
+  fontPrefs,
+  setFontPrefs,
   icon,
   icons
 } = useTheme()
 
 const { style, setStyle, primaryChip, neutralChip } = useThemeStudio()
 
+/* ------------------------------------------------------------ typography -- */
+
+/** Every listed family, loaded once so the pickers can preview themselves. */
+onMounted(() => {
+  if (document.getElementById('font-previews')) return
+  const families = fonts.filter(name => name !== 'Public Sans')
+    .map(name => `family=${encodeURIComponent(name)}:wght@400;700`).join('&')
+  const link = document.createElement('link')
+  link.rel = 'stylesheet'
+  link.id = 'font-previews'
+  link.href = `https://fonts.googleapis.com/css2?${families}&display=swap`
+  document.head.appendChild(link)
+})
+
+// One writable model per tailwind weight step — the knobs components
+// actually dereference at runtime.
+function weightStepModel(step: keyof typeof FONT_WEIGHT_DEFAULTS) {
+  return computed({
+    get: () => fontPrefs.value.weights?.[step] ?? FONT_WEIGHT_DEFAULTS[step],
+    set: (value: number) => setFontPrefs({ ...fontPrefs.value, weights: { ...fontPrefs.value.weights, [step]: value } })
+  })
+}
+
+const WEIGHT_STEPS = ['normal', 'medium', 'semibold', 'bold'] as const
+const weightSteps = Object.fromEntries(WEIGHT_STEPS.map(step => [step, weightStepModel(step)])) as Record<typeof WEIGHT_STEPS[number], ReturnType<typeof weightStepModel>>
+const weightsDirty = computed(() => !!fontPrefs.value.weights)
+
+const INHERIT_FONT = { label: 'Inherit base', value: 'inherit' }
+const headingFontItems = computed(() => [INHERIT_FONT, ...fonts.map(name => ({ label: name, value: name }))])
+
+function setHeading(patch: Record<string, unknown>) {
+  setFontPrefs({ ...fontPrefs.value, heading: { ...fontPrefs.value.heading, ...patch } })
+}
+
+const headingFont = computed({
+  get: () => fontPrefs.value.heading?.font ?? 'inherit',
+  set: (value: string) => setHeading({ font: value === 'inherit' ? undefined : value })
+})
+
+const headingWeight = computed({
+  get: () => fontPrefs.value.heading?.weight ?? 700,
+  set: (value: number) => setHeading({ weight: value })
+})
+
+const headingUppercase = computed({
+  get: () => !!fontPrefs.value.heading?.uppercase,
+  set: (value: boolean) => setHeading({ uppercase: value })
+})
+
+const headingItalic = computed({
+  get: () => !!fontPrefs.value.heading?.italic,
+  set: (value: boolean) => setHeading({ italic: value })
+})
+
+const baseUppercase = computed({
+  get: () => !!fontPrefs.value.uppercase,
+  set: (value: boolean) => setFontPrefs({ ...fontPrefs.value, uppercase: value })
+})
+
+const baseItalic = computed({
+  get: () => !!fontPrefs.value.italic,
+  set: (value: boolean) => setFontPrefs({ ...fontPrefs.value, italic: value })
+})
+
+const headingUnderline = computed({
+  get: () => !!fontPrefs.value.heading?.underline,
+  set: (value: boolean) => setHeading({ underline: value })
+})
+
+const baseLetterSpacing = computed({
+  get: () => fontPrefs.value.letterSpacing ?? 0,
+  set: (value: number) => setFontPrefs({ ...fontPrefs.value, letterSpacing: value })
+})
+
+const baseLineHeight = computed({
+  get: () => fontPrefs.value.lineHeight ?? 1.5,
+  set: (value: number) => setFontPrefs({ ...fontPrefs.value, lineHeight: value })
+})
+
+const headingLetterSpacing = computed({
+  get: () => fontPrefs.value.heading?.letterSpacing ?? 0,
+  set: (value: number) => setHeading({ letterSpacing: value })
+})
+
+const headingLineHeight = computed({
+  get: () => fontPrefs.value.heading?.lineHeight ?? 1.5,
+  set: (value: number) => setHeading({ lineHeight: value })
+})
+
+/** Live specimen: a heading line in the heading treatment over a body line. */
+const headingSampleStyle = computed(() => ({
+  fontFamily: `'${fontPrefs.value.heading?.font ?? font.value}', sans-serif`,
+  fontWeight: fontPrefs.value.heading?.weight ?? 700,
+  textTransform: (fontPrefs.value.heading?.uppercase || fontPrefs.value.uppercase) ? 'uppercase' as const : undefined,
+  fontStyle: (fontPrefs.value.heading?.italic || fontPrefs.value.italic) ? 'italic' as const : undefined,
+  textDecoration: fontPrefs.value.heading?.underline ? 'underline' as const : undefined,
+  letterSpacing: `${fontPrefs.value.heading?.letterSpacing ?? fontPrefs.value.letterSpacing ?? 0}em`,
+  lineHeight: fontPrefs.value.heading?.lineHeight ?? 1.25
+}))
+const bodySampleStyle = computed(() => ({
+  fontFamily: `'${font.value}', sans-serif`,
+  fontWeight: fontPrefs.value.weights?.normal ?? 400,
+  textTransform: fontPrefs.value.uppercase ? 'uppercase' as const : undefined,
+  fontStyle: fontPrefs.value.italic ? 'italic' as const : undefined,
+  letterSpacing: `${fontPrefs.value.letterSpacing ?? 0}em`,
+  lineHeight: fontPrefs.value.lineHeight ?? 1.5
+}))
+
+/* ---------------------------------------------------------------- icons -- */
+
+/** A representative spread from the selected set for the preview grid. */
+const SAMPLE_ICON_KEYS = ['search', 'check', 'close', 'warning', 'error', 'info', 'tip', 'light', 'dark', 'external', 'plus', 'minus', 'loading', 'copy', 'file', 'folder', 'eye', 'star', 'upload', 'menu', 'ellipsis', 'reload', 'arrowRight', 'chevronDown']
+const iconPreviews = computed(() => {
+  const set = (themeIcons as Record<string, Record<string, string>>)[icon.value] || {}
+  return SAMPLE_ICON_KEYS.map(key => set[key]).filter((name): name is string => !!name).slice(0, 20)
+})
+
 const semanticAliases: ColorAlias[] = ['secondary', 'success', 'info', 'warning', 'error']
 
 // Inherit leaves the library's own shadows alone, None strips them, Custom
@@ -480,7 +600,19 @@ const shadowColor = computed({
     <template v-else-if="group === 'general'">
       <div class="flex flex-col gap-4">
         <ThemeStudioSection label="Font" help-to="/docs/getting-started/integrations/fonts">
-          <div>
+          <div class="flex flex-col gap-2">
+            <!-- live specimen: the heading treatment over the base body -->
+            <div class="rounded-md ring ring-default bg-elevated/50 px-3 py-2 select-none">
+              <p class="text-sm text-highlighted truncate" :style="headingSampleStyle">
+                Grumpy wizards make toxic brew
+              </p>
+              <p class="text-xs text-muted truncate" :style="bodySampleStyle">
+                The quick brown fox jumps over the lazy dog 0123456789
+              </p>
+            </div>
+
+            <span class="text-xs font-semibold text-muted select-none">Base</span>
+
             <USelect
               v-model="font"
               size="sm"
@@ -489,14 +621,280 @@ const shadowColor = computed({
               icon="i-lucide-type"
               :items="fonts"
               class="w-full"
-            />
+            >
+              <template #item-label="{ item }">
+                <span :style="{ fontFamily: `'${item}', sans-serif` }">{{ item }}</span>
+              </template>
+            </USelect>
+
+            <div class="flex items-center gap-1.5">
+              <!-- face -->
+              <UFieldGroup size="sm">
+                <UPopover :content="{ align: 'start' }">
+                  <UTooltip text="Weights">
+                    <UButton
+                      icon="i-lucide-bold"
+                      color="neutral"
+                      variant="subtle"
+                      :active="weightsDirty"
+                      active-color="primary"
+                      active-variant="subtle"
+                      aria-label="Font weights"
+                    />
+                  </UTooltip>
+
+                  <template #content>
+                    <div class="w-64 p-3 flex flex-col gap-1.5">
+                      <ThemeStudioSliderRow
+                        v-for="step in WEIGHT_STEPS"
+                        :key="step"
+                        v-model="weightSteps[step].value"
+                        :label="step.charAt(0).toUpperCase() + step.slice(1)"
+                        :min="100"
+                        :max="900"
+                        :step="25"
+                      />
+                    </div>
+                  </template>
+                </UPopover>
+
+                <UTooltip text="Italic">
+                  <UButton
+                    icon="i-lucide-italic"
+                    color="neutral"
+                    variant="subtle"
+                    :active="baseItalic"
+                    active-color="primary"
+                    active-variant="subtle"
+                    aria-label="Italic text"
+                    @click="baseItalic = !baseItalic"
+                  />
+                </UTooltip>
+              </UFieldGroup>
+
+              <!-- glyph treatment -->
+              <UFieldGroup size="sm">
+                <UTooltip text="Uppercase">
+                  <UButton
+                    icon="i-lucide-case-upper"
+                    color="neutral"
+                    variant="subtle"
+                    :active="baseUppercase"
+                    active-color="primary"
+                    active-variant="subtle"
+                    aria-label="Uppercase text"
+                    @click="baseUppercase = !baseUppercase"
+                  />
+                </UTooltip>
+              </UFieldGroup>
+
+              <!-- rhythm -->
+              <UFieldGroup size="sm">
+                <UPopover :content="{ align: 'start' }">
+                  <UTooltip text="Letter spacing">
+                    <UButton
+                      icon="i-lucide-move-horizontal"
+                      color="neutral"
+                      variant="subtle"
+                      :active="baseLetterSpacing !== 0"
+                      active-color="primary"
+                      active-variant="subtle"
+                      aria-label="Letter spacing"
+                    />
+                  </UTooltip>
+
+                  <template #content>
+                    <ThemeStudioSliderRow
+                      v-model="baseLetterSpacing"
+                      label="Spacing"
+                      :min="-0.05"
+                      :max="0.25"
+                      :step="0.005"
+                      unit="em"
+                      class="w-64 p-3"
+                    />
+                  </template>
+                </UPopover>
+
+                <UPopover :content="{ align: 'start' }">
+                  <UTooltip text="Line height">
+                    <UButton
+                      icon="i-lucide-move-vertical"
+                      color="neutral"
+                      variant="subtle"
+                      :active="baseLineHeight !== 1.5"
+                      active-color="primary"
+                      active-variant="subtle"
+                      aria-label="Line height"
+                    />
+                  </UTooltip>
+
+                  <template #content>
+                    <ThemeStudioSliderRow
+                      v-model="baseLineHeight"
+                      label="Height"
+                      :min="1"
+                      :max="2"
+                      :step="0.05"
+                      class="w-64 p-3"
+                    />
+                  </template>
+                </UPopover>
+              </UFieldGroup>
+            </div>
+
+            <span class="text-xs font-semibold text-muted select-none pt-1">Headings (Prose)</span>
+
+            <USelect
+              v-model="headingFont"
+              size="sm"
+              color="neutral"
+              variant="subtle"
+              icon="i-lucide-heading"
+              :items="headingFontItems"
+              class="w-full"
+            >
+              <template #item-label="{ item }">
+                <span :style="item.value === 'inherit' ? undefined : { fontFamily: `'${item.value}', sans-serif` }">{{ item.label }}</span>
+              </template>
+            </USelect>
+
+            <div class="flex items-center gap-1.5">
+              <!-- face -->
+              <UFieldGroup size="sm">
+                <UPopover :content="{ align: 'start' }">
+                  <UTooltip text="Weight">
+                    <UButton
+                      icon="i-lucide-bold"
+                      color="neutral"
+                      variant="subtle"
+                      :active="fontPrefs.heading?.weight !== undefined"
+                      active-color="primary"
+                      active-variant="subtle"
+                      aria-label="Heading weight"
+                    />
+                  </UTooltip>
+
+                  <template #content>
+                    <ThemeStudioSliderRow
+                      v-model="headingWeight"
+                      label="Weight"
+                      :min="100"
+                      :max="900"
+                      :step="25"
+                      class="w-64 p-3"
+                    />
+                  </template>
+                </UPopover>
+
+                <UTooltip text="Italic">
+                  <UButton
+                    icon="i-lucide-italic"
+                    color="neutral"
+                    variant="subtle"
+                    :active="headingItalic"
+                    active-color="primary"
+                    active-variant="subtle"
+                    aria-label="Italic headings"
+                    @click="headingItalic = !headingItalic"
+                  />
+                </UTooltip>
+
+                <UTooltip text="Underline">
+                  <UButton
+                    icon="i-lucide-underline"
+                    color="neutral"
+                    variant="subtle"
+                    :active="headingUnderline"
+                    active-color="primary"
+                    active-variant="subtle"
+                    aria-label="Underline headings"
+                    @click="headingUnderline = !headingUnderline"
+                  />
+                </UTooltip>
+              </UFieldGroup>
+
+              <!-- glyph treatment -->
+              <UTooltip text="Uppercase">
+                <UButton
+                  icon="i-lucide-case-upper"
+                  color="neutral"
+                  variant="subtle"
+                  size="sm"
+                  :active="headingUppercase"
+                  active-color="primary"
+                  active-variant="subtle"
+                  aria-label="Uppercase headings"
+                  @click="headingUppercase = !headingUppercase"
+                />
+              </UTooltip>
+
+              <!-- rhythm -->
+              <UFieldGroup size="sm">
+                <UPopover :content="{ align: 'start' }">
+                  <UTooltip text="Letter spacing">
+                    <UButton
+                      icon="i-lucide-move-horizontal"
+                      color="neutral"
+                      variant="subtle"
+                      :active="headingLetterSpacing !== 0"
+                      active-color="primary"
+                      active-variant="subtle"
+                      aria-label="Heading letter spacing"
+                    />
+                  </UTooltip>
+
+                  <template #content>
+                    <ThemeStudioSliderRow
+                      v-model="headingLetterSpacing"
+                      label="Spacing"
+                      :min="-0.05"
+                      :max="0.25"
+                      :step="0.005"
+                      unit="em"
+                      class="w-64 p-3"
+                    />
+                  </template>
+                </UPopover>
+
+                <UPopover :content="{ align: 'start' }">
+                  <UTooltip text="Line height">
+                    <UButton
+                      icon="i-lucide-move-vertical"
+                      color="neutral"
+                      variant="subtle"
+                      :active="headingLineHeight !== 1.5"
+                      active-color="primary"
+                      active-variant="subtle"
+                      aria-label="Heading line height"
+                    />
+                  </UTooltip>
+
+                  <template #content>
+                    <ThemeStudioSliderRow
+                      v-model="headingLineHeight"
+                      label="Height"
+                      :min="1"
+                      :max="2"
+                      :step="0.05"
+                      class="w-64 p-3"
+                    />
+                  </template>
+                </UPopover>
+              </UFieldGroup>
+            </div>
           </div>
         </ThemeStudioSection>
 
         <USeparator />
 
         <ThemeStudioSection label="Icons" help-to="/docs/getting-started/integrations/icons">
-          <div>
+          <div class="flex flex-col gap-2">
+            <!-- a spread of the selected set -->
+            <div class="rounded-md ring ring-default bg-elevated/50 px-3 py-2 flex flex-wrap justify-center gap-2.5">
+              <UIcon v-for="name in iconPreviews" :key="name" :name="name" class="size-4 text-muted" />
+            </div>
+
             <USelect
               v-model="icon"
               size="sm"
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index c6da898a8d..0a67a8a3fe 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -274,8 +274,6 @@ function resetEffects() {
               variant="ghost"
               size="sm"
               block
-              :active="modifiersOpen"
-              active-variant="subtle"
               class="justify-start"
             />
 
diff --git a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
index 8c95853bad..3e1b573163 100644
--- a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
@@ -80,6 +80,7 @@ const display = computed(() => shade.value
       :min="min"
       :max="max"
       :step="step"
+      color="neutral"
       size="xs"
       :aria-label="label ?? mode"
       :ui="sliderColor ? {
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 70e1f818b6..8aa4f96302 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -1,7 +1,7 @@
 import { defu } from 'defu'
 import { THEME_TAG_IDS, THEME_STATE_KEYS, THEME_STORAGE_KEYS } from '../utils/theme-keys'
 import { useLocalStorage } from '@vueuse/core'
-import { themeIcons, cssVariableDefaults, readLocalStorage } from '../utils/theme'
+import { themeIcons, cssVariableDefaults, readLocalStorage, FONT_WEIGHT_DEFAULTS } from '../utils/theme'
 import { generateCSS, generateConfig, mergeUi, isDefaultStyle, DEFAULT_COLORS, THEME_DEFAULTS, LIBRARY_TOKEN_DEFAULTS } from '../utils/theme-engine'
 import type { ThemeDoc, ThemePalette } from '../utils/theme-engine'
 import { omit } from '#ui/utils'
@@ -45,6 +45,17 @@ function sanitizeCSSVariables(input: { light?: Record<string, any>, dark?: Recor
   return { light: clean(input.light), dark: clean(input.dark) }
 }
 
+export interface FontPrefs {
+  weights?: { normal?: number, medium?: number, semibold?: number, bold?: number }
+  uppercase?: boolean
+  italic?: boolean
+  /** Tracking in em. */
+  letterSpacing?: number
+  /** Unitless line height — 1.5 is the tailwind preflight default. */
+  lineHeight?: number
+  heading?: { font?: string, weight?: number, uppercase?: boolean, italic?: boolean, underline?: boolean, letterSpacing?: number, lineHeight?: number }
+}
+
 export function useTheme() {
   const appConfig = useAppConfig()
   const colorMode = useColorMode()
@@ -88,6 +99,48 @@ export function useTheme() {
   const _iconSet = useLocalStorage('nuxt-ui-icons', 'lucide')
   const _blackAsPrimary = useLocalStorage('nuxt-ui-black-as-primary', false)
 
+  /**
+   * Typography beyond the base family: body weight plus the heading
+   * treatment. One JSON channel (state + storage under the same key) so
+   * resetTheme and the FOUC script share it.
+   */
+  const fontPrefs = useState<FontPrefs>('nuxt-ui-font-prefs', () => readLocalStorage('nuxt-ui-font-prefs', {}))
+
+  function setFontPrefs(next: FontPrefs) {
+    // Normalize: defaults are absences, so hasCSSChanges/export stay clean.
+    const clean: FontPrefs = {}
+    const weights: NonNullable<FontPrefs['weights']> = {}
+    for (const step of ['normal', 'medium', 'semibold', 'bold'] as const) {
+      const weight = next.weights?.[step]
+      if (weight !== undefined && weight !== FONT_WEIGHT_DEFAULTS[step]) weights[step] = weight
+    }
+    if (Object.keys(weights).length) clean.weights = weights
+    if (next.uppercase) clean.uppercase = true
+    if (next.italic) clean.italic = true
+    if (next.letterSpacing !== undefined && next.letterSpacing !== 0) clean.letterSpacing = next.letterSpacing
+    if (next.lineHeight !== undefined && next.lineHeight !== 1.5) clean.lineHeight = next.lineHeight
+    const heading = next.heading || {}
+    const cleanHeading: NonNullable<FontPrefs['heading']> = {}
+    if (heading.font && heading.font !== _font.value) cleanHeading.font = heading.font
+    // 700 is the heading resting point (the slider's default position) —
+    // storing it would pin the toolbar's B active and pollute exports.
+    if (heading.weight !== undefined && heading.weight !== 700) cleanHeading.weight = heading.weight
+    if (heading.uppercase) cleanHeading.uppercase = true
+    if (heading.italic) cleanHeading.italic = true
+    if (heading.underline) cleanHeading.underline = true
+    if (heading.letterSpacing !== undefined && heading.letterSpacing !== 0) cleanHeading.letterSpacing = heading.letterSpacing
+    if (heading.lineHeight !== undefined && heading.lineHeight !== 1.5) cleanHeading.lineHeight = heading.lineHeight
+    if (Object.keys(cleanHeading).length) clean.heading = cleanHeading
+
+    fontPrefs.value = clean
+    if (Object.keys(clean).length) {
+      window.localStorage.setItem('nuxt-ui-font-prefs', JSON.stringify(clean))
+    } else {
+      window.localStorage.removeItem('nuxt-ui-font-prefs')
+    }
+    trackThrottled('Theme Changed', { setting: 'fontPrefs' })
+  }
+
   // taupe/mauve/mist/olive ship with tailwind v4's theme.css but not (yet)
   // the tailwindcss/colors JS export — swatches and fits resolve them from
   // the CSS variables instead.
@@ -148,7 +201,7 @@ export function useTheme() {
     }
   })
 
-  const fonts = ['Public Sans', 'DM Sans', 'Geist', 'Inter', 'Poppins', 'Outfit', 'Raleway']
+  const fonts = ['Public Sans', 'Comic Neue', 'DM Sans', 'Geist', 'Inter', 'Poppins', 'Outfit', 'Raleway']
 
   const font = computed({
     get() {
@@ -217,7 +270,38 @@ export function useTheme() {
   const fontSizeStyle = computed(() => _fontSize.value !== 16 ? `html { font-size: ${_fontSize.value}px; }` : 'html {}')
   const spacingStyle = computed(() => _spacing.value !== 0.25 ? `:root { --spacing: ${_spacing.value}rem; }` : ':root {}')
   const blackAsPrimaryStyle = computed(() => _blackAsPrimary.value ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
-  const fontStyle = computed(() => `:root { --font-sans: '${_font.value}', sans-serif; }`)
+  const fontStyle = computed(() => {
+    const parts = [`:root { --font-sans: '${_font.value}', sans-serif; }`]
+    const prefs = fontPrefs.value
+    const weights = prefs.weights || {}
+    const weightVars = (Object.keys(weights) as Array<keyof typeof weights>)
+      .map(step => `--font-weight-${step}: ${weights[step]};`)
+    if (weightVars.length) {
+      parts.push(`:root { ${weightVars.join(' ')} }`)
+    }
+    const bodyRules: string[] = []
+    if (weights.normal !== undefined) bodyRules.push(`font-weight: ${weights.normal};`)
+    if (prefs.uppercase) bodyRules.push('text-transform: uppercase;')
+    if (prefs.italic) bodyRules.push('font-style: italic;')
+    if (prefs.letterSpacing !== undefined) bodyRules.push(`letter-spacing: ${prefs.letterSpacing}em;`)
+    if (prefs.lineHeight !== undefined) bodyRules.push(`line-height: ${prefs.lineHeight};`)
+    if (bodyRules.length) {
+      parts.push(`body { ${bodyRules.join(' ')} }`)
+    }
+    const heading = prefs.heading
+    if (heading && Object.keys(heading).length) {
+      const rules: string[] = []
+      if (heading.font) rules.push(`font-family: '${heading.font}', sans-serif;`)
+      if (heading.weight !== undefined) rules.push(`font-weight: ${heading.weight};`)
+      if (heading.uppercase) rules.push('text-transform: uppercase;')
+      if (heading.italic) rules.push('font-style: italic;')
+      if (heading.underline) rules.push('text-decoration: underline;')
+      if (heading.letterSpacing !== undefined) rules.push(`letter-spacing: ${heading.letterSpacing}em;`)
+      if (heading.lineHeight !== undefined) rules.push(`line-height: ${heading.lineHeight};`)
+      parts.push(`h1, h2, h3, h4, h5, h6 { ${rules.join(' ')} }`)
+    }
+    return parts.join(' ')
+  })
   const customColorsStyle = computed(() => {
     const entries = Object.entries(customColorsData.value)
     if (!entries.length) return ''
@@ -240,14 +324,18 @@ export function useTheme() {
     return parts.join(' ')
   })
 
-  const link = computed(() => {
-    const name = _font.value
-    if (name === 'Public Sans') return []
-    return [{
+  /** Google Fonts stylesheet link for a family (Public Sans is bundled). */
+  function fontLink(name: string) {
+    return {
       rel: 'stylesheet' as const,
-      href: `https://fonts.googleapis.com/css2?family=${encodeURIComponent(name)}:wght@400;500;600;700&display=swap`,
+      href: `https://fonts.googleapis.com/css2?family=${encodeURIComponent(name)}:wght@300;400;500;600;700;800&display=swap`,
       id: `font-${name.toLowerCase().replace(/\s+/g, '-')}`
-    }]
+    }
+  }
+
+  const link = computed(() => {
+    const names = new Set([_font.value, fontPrefs.value.heading?.font].filter((name): name is string => !!name && name !== 'Public Sans'))
+    return [...names].map(fontLink)
   })
 
   const style = [
@@ -266,6 +354,7 @@ export function useTheme() {
       || _spacing.value !== 0.25
       || _blackAsPrimary.value
       || _font.value !== 'Public Sans'
+      || Object.keys(fontPrefs.value).length > 0
       || hasCustomColors.value
       || hasCSSVariables.value
   })
@@ -301,7 +390,16 @@ export function useTheme() {
     if (_radius.value !== THEME_DEFAULTS.radius) doc.radius = _radius.value
     if (_fontSize.value !== THEME_DEFAULTS.fontSize) doc.fontSize = _fontSize.value
     if (_spacing.value !== THEME_DEFAULTS.spacing) doc.spacing = _spacing.value
-    if (_font.value !== THEME_DEFAULTS.font) doc.font = { sans: _font.value }
+    const fontDoc: ThemeDoc['font'] = {
+      ...(_font.value !== THEME_DEFAULTS.font ? { sans: _font.value } : {}),
+      ...(fontPrefs.value.weights ? { weights: { ...fontPrefs.value.weights } } : {}),
+      ...(fontPrefs.value.uppercase ? { uppercase: true } : {}),
+      ...(fontPrefs.value.italic ? { italic: true } : {}),
+      ...(fontPrefs.value.letterSpacing !== undefined ? { letterSpacing: fontPrefs.value.letterSpacing } : {}),
+      ...(fontPrefs.value.lineHeight !== undefined ? { lineHeight: fontPrefs.value.lineHeight } : {}),
+      ...(fontPrefs.value.heading ? { heading: { ...fontPrefs.value.heading } } : {})
+    }
+    if (Object.keys(fontDoc).length) doc.font = fontDoc
     if (_iconSet.value !== THEME_DEFAULTS.icons) doc.icons = _iconSet.value
 
     // Only palettes actually referenced by an alias belong in the export —
@@ -443,6 +541,34 @@ export function useTheme() {
     if (settings.fontSize !== undefined && Number.isFinite(Number(settings.fontSize))) fontSize.value = Math.min(20, Math.max(12, Number(settings.fontSize)))
     if (settings.spacing !== undefined && Number.isFinite(Number(settings.spacing))) spacing.value = Math.min(0.5, Math.max(0.125, Number(settings.spacing)))
     if (settings.font && SAFE_NAME.test(settings.font)) font.value = settings.font
+    if (settings.fontWeights !== undefined || settings.fontBody !== undefined || settings.fontHeading !== undefined) {
+      const heading = settings.fontHeading && typeof settings.fontHeading === 'object' ? settings.fontHeading : {}
+      const rawWeights = settings.fontWeights && typeof settings.fontWeights === 'object' ? settings.fontWeights : fontPrefs.value.weights || {}
+      const weights: NonNullable<FontPrefs['weights']> = {}
+      for (const step of ['normal', 'medium', 'semibold', 'bold'] as const) {
+        const weight = Number(rawWeights[step])
+        if (Number.isFinite(weight)) weights[step] = Math.min(900, Math.max(100, weight))
+      }
+      const body = settings.fontBody && typeof settings.fontBody === 'object' ? settings.fontBody : {}
+      const em = (value: unknown) => Number.isFinite(Number(value)) ? Math.min(1, Math.max(-0.2, Number(value))) : undefined
+      const leading = (value: unknown) => Number.isFinite(Number(value)) ? Math.min(3, Math.max(0.8, Number(value))) : undefined
+      setFontPrefs({
+        weights,
+        uppercase: !!body.uppercase,
+        italic: !!body.italic,
+        letterSpacing: em(body.letterSpacing),
+        lineHeight: leading(body.lineHeight),
+        heading: {
+          font: heading.font && SAFE_NAME.test(heading.font) ? heading.font : undefined,
+          weight: Number.isFinite(Number(heading.weight)) ? Math.min(900, Math.max(100, Number(heading.weight))) : undefined,
+          uppercase: !!heading.uppercase,
+          italic: !!heading.italic,
+          underline: !!heading.underline,
+          letterSpacing: em(heading.letterSpacing),
+          lineHeight: leading(heading.lineHeight)
+        }
+      })
+    }
     if (settings.icons && settings.icons in themeIcons) icon.value = settings.icons
     if (settings.blackAsPrimary !== undefined) setBlackAsPrimary(!!settings.blackAsPrimary)
 
@@ -499,6 +625,8 @@ export function useTheme() {
     _fontSize.value = 16
     _spacing.value = 0.25
     _font.value = 'Public Sans'
+    fontPrefs.value = {}
+    window.localStorage.removeItem('nuxt-ui-font-prefs')
     _iconSet.value = 'lucide'
     appConfig.ui.icons = themeIcons.lucide as any
     _blackAsPrimary.value = false
@@ -558,6 +686,8 @@ export function useTheme() {
     spacing,
     fonts,
     font,
+    fontPrefs,
+    setFontPrefs,
     icon,
     icons,
     modes,
diff --git a/docs/app/plugins/theme.ts b/docs/app/plugins/theme.ts
index dfb557e021..dc2eea883b 100644
--- a/docs/app/plugins/theme.ts
+++ b/docs/app/plugins/theme.ts
@@ -33,6 +33,7 @@ export default defineNuxtPlugin({
       restoreState('nuxt-ui-style-ui')
       restoreState('nuxt-ui-custom-colors')
       restoreState('nuxt-ui-css-variables')
+      restoreState('nuxt-ui-font-prefs')
 
       // Studio prefs use useState keys that differ from their storage keys
       // (state must be clearable by resetTheme outside the composable).
@@ -161,17 +162,48 @@ export default defineNuxtPlugin({
           `.replace(/\s+/g, ' ')
         }, {
           innerHTML: [
-            `if (localStorage.getItem('nuxt-ui-font')) {`,
-            `var font = localStorage.getItem('nuxt-ui-font');`,
+            `(function() {`,
+            `var font = localStorage.getItem('nuxt-ui-font') || 'Public Sans';`,
+            `var prefs = {};`,
+            `try { prefs = JSON.parse(localStorage.getItem('nuxt-ui-font-prefs') || '{}'); } catch(e) {}`,
+            `var css = ':root { --font-sans: \\'' + font + '\\', sans-serif; }';`,
+            `var w = prefs.weights || {};`,
+            `var wVars = Object.keys(w).map(function(s) { return '--font-weight-' + s + ': ' + w[s] + ';'; }).join(' ');`,
+            `if (wVars) { css += ' :root { ' + wVars + ' }'; }`,
+            `var bodyRules = '';`,
+            `if (w.normal) { bodyRules += 'font-weight: ' + w.normal + '; '; }`,
+            `if (prefs.uppercase) { bodyRules += 'text-transform: uppercase; '; }`,
+            `if (prefs.italic) { bodyRules += 'font-style: italic; '; }`,
+            `if (prefs.letterSpacing) { bodyRules += 'letter-spacing: ' + prefs.letterSpacing + 'em; '; }`,
+            `if (prefs.lineHeight) { bodyRules += 'line-height: ' + prefs.lineHeight + '; '; }`,
+            `if (bodyRules) { css += ' body { ' + bodyRules + '}'; }`,
+            `var h = prefs.heading || {};`,
+            `if (h.font || h.weight || h.uppercase || h.italic || h.underline || h.letterSpacing || h.lineHeight) {`,
+            `var rules = '';`,
+            `if (h.font) { rules += 'font-family: \\'' + h.font + '\\', sans-serif; '; }`,
+            `if (h.weight) { rules += 'font-weight: ' + h.weight + '; '; }`,
+            `if (h.uppercase) { rules += 'text-transform: uppercase; '; }`,
+            `if (h.italic) { rules += 'font-style: italic; '; }`,
+            `if (h.underline) { rules += 'text-decoration: underline; '; }`,
+            `if (h.letterSpacing) { rules += 'letter-spacing: ' + h.letterSpacing + 'em; '; }`,
+            `if (h.lineHeight) { rules += 'line-height: ' + h.lineHeight + '; '; }`,
+            `css += ' h1, h2, h3, h4, h5, h6 { ' + rules + '}';`,
+            `}`,
+            `if (localStorage.getItem('nuxt-ui-font') || Object.keys(prefs).length) {`,
             `var fontEl = document.querySelector('style#nuxt-ui-font');`,
-            `if (fontEl) { fontEl.innerHTML = ':root { --font-sans: \\'' + font + '\\', sans-serif; }'; }`,
-            `if (font !== 'Public Sans') {`,
+            `if (fontEl) { fontEl.innerHTML = css; }`,
+            `}`,
+            `[font, h.font].forEach(function(name) {`,
+            `if (!name || name === 'Public Sans') return;`,
+            `var id = 'font-' + name.toLowerCase().replace(/\\s+/g, '-');`,
+            `if (document.getElementById(id)) return;`,
             `var lnk = document.createElement('link');`,
             `lnk.rel = 'stylesheet';`,
-            `lnk.href = 'https://fonts.googleapis.com/css2?family=' + encodeURIComponent(font) + ':wght@400;500;600;700&display=swap';`,
-            `lnk.id = 'font-' + font.toLowerCase().replace(/\\s+/g, '-');`,
+            `lnk.href = 'https://fonts.googleapis.com/css2?family=' + encodeURIComponent(name) + ':wght@300;400;500;600;700;800&display=swap';`,
+            `lnk.id = id;`,
             `document.head.appendChild(lnk);`,
-            `}}`
+            `});`,
+            `})();`
           ].join(' ')
         }, {
           innerHTML: `
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index 1fa3842690..ac776159cc 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -17,6 +17,15 @@ export function generateCSS(doc: ThemeDoc): string {
   if (doc.font?.sans && doc.font.sans !== THEME_DEFAULTS.font) {
     themeLines.push(`  --font-sans: '${doc.font.sans}', sans-serif;`)
   }
+  // Weight steps are live variables in tailwind v4 — font-medium compiles
+  // to font-weight: var(--font-weight-medium) — so remapping them reaches
+  // every component, not just inherited text.
+  for (const step of ['normal', 'medium', 'semibold', 'bold'] as const) {
+    const weight = doc.font?.weights?.[step]
+    if (weight !== undefined) {
+      themeLines.push(`  --font-weight-${step}: ${weight};`)
+    }
+  }
   if (doc.spacing !== undefined && doc.spacing !== THEME_DEFAULTS.spacing) {
     themeLines.push(`  --spacing: ${doc.spacing}rem;`)
   }
@@ -50,6 +59,32 @@ export function generateCSS(doc: ThemeDoc): string {
     lines.push('', 'html {', `  font-size: ${doc.fontSize}px;`, '}')
   }
 
+  // Body-level treatment: classless text has no utility to dereference the
+  // weight variable, and case/tracking/leading are inherited properties.
+  const bodyLines: string[] = []
+  if (doc.font?.weights?.normal !== undefined) bodyLines.push(`  font-weight: ${doc.font.weights.normal};`)
+  if (doc.font?.uppercase) bodyLines.push('  text-transform: uppercase;')
+  if (doc.font?.italic) bodyLines.push('  font-style: italic;')
+  if (doc.font?.letterSpacing !== undefined) bodyLines.push(`  letter-spacing: ${doc.font.letterSpacing}em;`)
+  if (doc.font?.lineHeight !== undefined) bodyLines.push(`  line-height: ${doc.font.lineHeight};`)
+  if (bodyLines.length) {
+    lines.push('', 'body {', ...bodyLines, '}')
+  }
+
+  // Headings ride one h1–h6 rule; unset fields inherit the base treatment.
+  const heading = doc.font?.heading
+  if (heading && Object.keys(heading).length) {
+    const headingLines: string[] = []
+    if (heading.font) headingLines.push(`  font-family: '${heading.font}', sans-serif;`)
+    if (heading.weight !== undefined) headingLines.push(`  font-weight: ${heading.weight};`)
+    if (heading.uppercase) headingLines.push('  text-transform: uppercase;')
+    if (heading.italic) headingLines.push('  font-style: italic;')
+    if (heading.underline) headingLines.push('  text-decoration: underline;')
+    if (heading.letterSpacing !== undefined) headingLines.push(`  letter-spacing: ${heading.letterSpacing}em;`)
+    if (heading.lineHeight !== undefined) headingLines.push(`  line-height: ${heading.lineHeight};`)
+    if (headingLines.length) lines.push('', 'h1, h2, h3, h4, h5, h6 {', ...headingLines, '}')
+  }
+
   const rootLines: string[] = []
   if (doc.radius !== undefined && doc.radius !== THEME_DEFAULTS.radius) {
     rootLines.push(`  --ui-radius: ${doc.radius}rem;`)
@@ -203,6 +238,11 @@ export function docToSettings(doc: ThemeDoc): Record<string, any> {
   if (doc.fontSize !== undefined) settings.fontSize = doc.fontSize
   if (doc.spacing !== undefined) settings.spacing = doc.spacing
   if (doc.font?.sans) settings.font = doc.font.sans
+  if (doc.font?.weights) settings.fontWeights = doc.font.weights
+  if (doc.font?.uppercase || doc.font?.italic || doc.font?.letterSpacing !== undefined || doc.font?.lineHeight !== undefined) {
+    settings.fontBody = { uppercase: doc.font.uppercase, italic: doc.font.italic, letterSpacing: doc.font.letterSpacing, lineHeight: doc.font.lineHeight }
+  }
+  if (doc.font?.heading) settings.fontHeading = doc.font.heading
   if (doc.icons) settings.icons = doc.icons
 
   if (doc.palettes) {
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index ed62085a0d..0c888de4ed 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -37,6 +37,9 @@ interface ParsedCSS {
   spacing?: number
   fontSize?: number
   radius?: number
+  fontWeights?: { normal?: number, medium?: number, semibold?: number, bold?: number }
+  body?: { weight?: number, uppercase?: boolean, italic?: boolean, letterSpacing?: number, lineHeight?: number }
+  heading?: { font?: string, weight?: number, uppercase?: boolean, italic?: boolean, underline?: boolean, letterSpacing?: number, lineHeight?: number }
   blackAsPrimary?: boolean
   /** From @theme --default-border-width — the export's width channel. */
   borderWidth?: number
@@ -104,6 +107,11 @@ function parseDeclaration(result: ParsedCSS, selector: string, prop: string, val
         return true
       }
     }
+    const weightStep = prop.match(/^--font-weight-(normal|medium|semibold|bold)$/)
+    if (weightStep && /^\d+$/.test(value)) {
+      result.fontWeights = { ...result.fontWeights, [weightStep[1]!]: Number(value) }
+      return true
+    }
     if (prop === '--spacing' && value.endsWith('rem')) {
       result.spacing = Number.parseFloat(value)
       return true
@@ -124,6 +132,68 @@ function parseDeclaration(result: ParsedCSS, selector: string, prop: string, val
     return true
   }
 
+  if (selector === 'body') {
+    const body = result.body ||= {}
+    if (prop === 'font-weight' && /^\d+$/.test(value)) {
+      // generated alongside the normal-weight step, not a separate choice
+      body.weight = Number(value)
+      return true
+    }
+    if (prop === 'text-transform' && value === 'uppercase') {
+      body.uppercase = true
+      return true
+    }
+    if (prop === 'font-style' && value === 'italic') {
+      body.italic = true
+      return true
+    }
+    if (prop === 'letter-spacing' && value.endsWith('em')) {
+      body.letterSpacing = Number.parseFloat(value)
+      return true
+    }
+    if (prop === 'line-height' && /^\d+(?:\.\d+)?$/.test(value)) {
+      body.lineHeight = Number(value)
+      return true
+    }
+    return false
+  }
+
+  if (selector === 'h1, h2, h3, h4, h5, h6') {
+    const heading = result.heading ||= {}
+    if (prop === 'font-family') {
+      const family = value.match(/^'([^']+)'/) || value.match(/^"([^"]+)"/)
+      if (family) {
+        heading.font = family[1]
+        return true
+      }
+    }
+    if (prop === 'font-weight' && /^\d+$/.test(value)) {
+      heading.weight = Number(value)
+      return true
+    }
+    if (prop === 'text-transform' && value === 'uppercase') {
+      heading.uppercase = true
+      return true
+    }
+    if (prop === 'font-style' && value === 'italic') {
+      heading.italic = true
+      return true
+    }
+    if (prop === 'text-decoration' && value === 'underline') {
+      heading.underline = true
+      return true
+    }
+    if (prop === 'letter-spacing' && value.endsWith('em')) {
+      heading.letterSpacing = Number.parseFloat(value)
+      return true
+    }
+    if (prop === 'line-height' && /^\d+(?:\.\d+)?$/.test(value)) {
+      heading.lineHeight = Number(value)
+      return true
+    }
+    return false
+  }
+
   if (selector === ':root') {
     if (prop === '--ui-radius' && value.endsWith('rem')) {
       result.radius = Number.parseFloat(value)
@@ -684,7 +754,19 @@ export function importTheme(input: { css?: string, config?: string }): ThemeImpo
     if (Object.keys(css.palettes).length) {
       doc.palettes = Object.fromEntries(Object.entries(css.palettes).map(([name, shades]) => [name, { shades }]))
     }
-    if (css.font) doc.font = { sans: css.font }
+    // A body weight without theme steps (older exports) reads as normal.
+    const weights = css.fontWeights || (css.body?.weight !== undefined ? { normal: css.body.weight } : undefined)
+    if (css.font || weights || css.body || css.heading) {
+      doc.font = {
+        ...(css.font ? { sans: css.font } : {}),
+        ...(weights ? { weights } : {}),
+        ...(css.body?.uppercase ? { uppercase: true } : {}),
+        ...(css.body?.italic ? { italic: true } : {}),
+        ...(css.body?.letterSpacing !== undefined ? { letterSpacing: css.body.letterSpacing } : {}),
+        ...(css.body?.lineHeight !== undefined ? { lineHeight: css.body.lineHeight } : {}),
+        ...(css.heading ? { heading: css.heading } : {})
+      }
+    }
     if (css.spacing !== undefined) doc.spacing = css.spacing
     if (css.fontSize !== undefined) doc.fontSize = css.fontSize
     if (css.radius !== undefined) doc.radius = css.radius
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index addf3b72cc..84653f92cc 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -247,13 +247,13 @@ export const presets: ThemePreset[] = [{
     }
   }
 }, {
-  id: 'marvel',
-  name: 'Marvel',
+  id: 'comicbook',
+  name: 'Comicbook',
   description: 'Comic-book red and blue with inked panel outlines.',
   icon: 'i-lucide-book-open',
   doc: {
     version: 1,
-    meta: { name: 'Marvel', base: 'marvel' },
+    meta: { name: 'Comicbook', base: 'comicbook' },
     // A cool-violet sculpted neutral for the panel grays.
     palettes: {
       'custom-neutral': {
@@ -277,27 +277,30 @@ export const presets: ThemePreset[] = [{
       neutral: 'custom-neutral'
     },
     radius: 0.125,
-    font: { sans: 'Outfit' },
-    // Inked page: near-black default borders over muted panel edges, deep
-    // red at 600 in light, flat 50s inversions in dark.
+    font: { sans: 'Comic Neue' },
+    // Inked page: near-black default AND accented borders over muted panel
+    // edges, deep red at 600 in light, flat 50s inversions in dark.
     tokens: {
       light: {
+        '--ui-primary': 'var(--ui-color-primary-600)',
         '--ui-bg': 'var(--ui-color-neutral-50)',
+        '--ui-bg-muted': 'var(--ui-color-neutral-100)',
+        '--ui-bg-elevated': 'var(--ui-color-neutral-200)',
+        '--ui-bg-accented': 'var(--ui-color-neutral-200)',
         '--ui-text-inverted': 'var(--ui-color-neutral-50)',
-        '--ui-bg-muted': 'var(--ui-color-neutral-50)',
         '--ui-border': 'var(--ui-color-neutral-950)',
         '--ui-border-muted': 'var(--ui-color-neutral-300)',
-        '--ui-border-accented': 'var(--ui-color-neutral-400)',
-        '--ui-bg-elevated': 'var(--ui-color-neutral-100)',
-        '--ui-bg-accented': 'var(--ui-color-neutral-200)',
-        '--ui-primary': 'var(--ui-color-primary-600)'
+        '--ui-border-accented': 'var(--ui-color-neutral-950)'
       },
       dark: {
+        '--ui-primary': 'var(--ui-color-primary-500)',
         '--ui-bg': 'var(--ui-color-neutral-900)',
         '--ui-bg-inverted': 'var(--ui-color-neutral-50)',
         '--ui-text-highlighted': 'var(--ui-color-neutral-50)',
-        '--ui-border-inverted': 'var(--ui-color-neutral-50)',
-        '--ui-primary': 'var(--ui-color-primary-500)'
+        '--ui-border': 'var(--ui-color-neutral-950)',
+        '--ui-border-muted': 'var(--ui-color-neutral-700)',
+        '--ui-border-accented': 'var(--ui-color-neutral-950)',
+        '--ui-border-inverted': 'var(--ui-color-neutral-50)'
       }
     },
     style: {
@@ -360,12 +363,19 @@ export const presets: ThemePreset[] = [{
     },
     radius: 0.375,
     font: { sans: 'DM Sans' },
-    // Deep cream page over ivory surfaces in light; one flat 800 surface
+    // Deep cream page over ivory surfaces in light, with the border family
+    // stepped one deeper to hold on the tinted page; one flat 800 surface
     // family in dark, with the brand clay held at 500.
     tokens: {
       light: {
         '--ui-bg': 'var(--ui-color-neutral-200)',
-        '--ui-bg-elevated': 'var(--ui-color-neutral-50)'
+        '--ui-bg-muted': 'var(--ui-color-neutral-50)',
+        '--ui-bg-elevated': 'var(--ui-color-neutral-50)',
+        '--ui-bg-accented': 'var(--ui-color-neutral-300)',
+        '--ui-border': 'var(--ui-color-neutral-300)',
+        '--ui-border-muted': 'var(--ui-color-neutral-200)',
+        '--ui-border-accented': 'var(--ui-color-neutral-400)',
+        '--ui-bg-inverted': 'var(--ui-color-neutral-900)'
       },
       dark: {
         '--ui-primary': 'var(--ui-color-primary-500)',
diff --git a/docs/app/utils/theme-engine/types.ts b/docs/app/utils/theme-engine/types.ts
index 80f1a35f60..a642695bf6 100644
--- a/docs/app/utils/theme-engine/types.ts
+++ b/docs/app/utils/theme-engine/types.ts
@@ -49,6 +49,29 @@ export interface ThemeDoc {
   spacing?: number
   font?: {
     sans?: string
+    /**
+     * Overrides for tailwind's weight steps — the knobs components
+     * actually dereference (`font-medium` compiles to
+     * `font-weight: var(--font-weight-medium)`). Sparse: only set steps
+     * are emitted. normal also drives classless body text.
+     */
+    weights?: { normal?: number, medium?: number, semibold?: number, bold?: number }
+    uppercase?: boolean
+    italic?: boolean
+    /** Tracking in em. */
+    letterSpacing?: number
+    /** Unitless line height (browser/tailwind default is 1.5). */
+    lineHeight?: number
+    /** Heading treatment (h1–h6); every field falls back to the base. */
+    heading?: {
+      font?: string
+      weight?: number
+      uppercase?: boolean
+      italic?: boolean
+      underline?: boolean
+      letterSpacing?: number
+      lineHeight?: number
+    }
   }
   icons?: string
   /**
@@ -86,6 +109,9 @@ export function createThemeDoc(): ThemeDoc {
 export function isDefaultTheme(doc: ThemeDoc): boolean {
   return !doc.palettes && !doc.colors && !doc.blackAsPrimary && !doc.tokens
     && doc.radius === undefined && doc.fontSize === undefined && doc.spacing === undefined
-    && !doc.font?.sans && !doc.icons && !doc.components
+    && !doc.font?.sans && !doc.font?.weights && !doc.font?.heading
+    && !doc.font?.uppercase && !doc.font?.italic
+    && doc.font?.letterSpacing === undefined && doc.font?.lineHeight === undefined
+    && !doc.icons && !doc.components
     && isDefaultStyle(doc.style)
 }
diff --git a/docs/app/utils/theme.ts b/docs/app/utils/theme.ts
index b8283458e9..39519bf051 100644
--- a/docs/app/utils/theme.ts
+++ b/docs/app/utils/theme.ts
@@ -11,6 +11,9 @@ export function readLocalStorage<T>(key: string, fallback: T): T {
   }
 }
 
+/** Tailwind's stock weight ladder — set steps are absences at these values. */
+export const FONT_WEIGHT_DEFAULTS = { normal: 400, medium: 500, semibold: 600, bold: 700 } as const
+
 export const themeIcons = {
   lucide,
   phosphor: {
diff --git a/test/utils/theme-import.spec.ts b/test/utils/theme-import.spec.ts
index 6c68c488ba..7a20b0bde7 100644
--- a/test/utils/theme-import.spec.ts
+++ b/test/utils/theme-import.spec.ts
@@ -151,6 +151,19 @@ describe('importTheme', () => {
     expect(doc.tokens?.dark?.['--ui-frame-color']).toBe('#ff0000')
   })
 
+  it('round-trips base weight and heading typography', () => {
+    const original: ThemeDoc = {
+      version: 1,
+      font: { sans: 'Comic Neue', weights: { normal: 450, medium: 550, semibold: 650 }, uppercase: true, italic: true, letterSpacing: 0.05, lineHeight: 1.6, heading: { font: 'Outfit', weight: 800, uppercase: true, italic: true, underline: true, letterSpacing: -0.02, lineHeight: 1.2 } }
+    }
+    const css = generateCSS(original)
+    const { doc: imported, skipped } = importTheme({ css })
+
+    expect(skipped).toEqual([])
+    expect(imported.font).toEqual(original.font)
+    expect(generateCSS(imported)).toBe(css)
+  })
+
   it('round-trips the flat shadow treatment without color defaults', () => {
     const original: ThemeDoc = { version: 1, style: { shadow: 'flat' } }
     const css = generateCSS(original)

From eb9aa2a71de9bd0291a9990051f65c26fccfa6b8 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Fri, 10 Jul 2026 21:19:12 +0200
Subject: [PATCH 126/185] fix(docs): adjust padding in theme.vue for improved
 layout consistency

- Updated padding in the theme component to enhance visual alignment and spacing.
- Removed unnecessary padding on the top while maintaining overall layout integrity.

These changes contribute to a more polished user interface in the theme studio.
---
 docs/app/pages/theme.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 0a0bcb4e58..3cad42ac27 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -138,9 +138,9 @@ const shareMode = ref<'import' | 'export'>('export')
           <div v-if="fullscreen" class="absolute bottom-0 inset-x-0 h-2 pointer-events-auto" />
 
           <div
-            class="flex items-center gap-2 py-3 overflow-x-auto"
+            class="flex items-center gap-2 p-3 overflow-x-auto"
             :class="fullscreen && [
-              'mt-4 px-4 rounded-t-lg bg-default/75 backdrop-blur ring ring-default shadow-lg pointer-events-auto transition-transform duration-200',
+              'mt-4 rounded-t-lg bg-default/75 backdrop-blur ring ring-default shadow-lg pointer-events-auto transition-transform duration-200',
               toolbarPinned ? 'translate-y-0' : 'translate-y-[calc(100%+6px)] group-hover:translate-y-0 group-focus-within:translate-y-0'
             ]"
           >

From 8f7f28ea812c03fe4ef1560f00a357607eae1b48 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Fri, 10 Jul 2026 21:52:41 +0200
Subject: [PATCH 127/185] feat(docs): enhance ThemeStudioPaletteEditor with
 swatch tooltips and color copying

- Added functionality to display swatch information including hex and RGB equivalents in tooltips.
- Implemented a copy feature for Oklch values, allowing users to easily copy color information.
- Introduced a pinning mechanism for tooltips to improve user interaction and accessibility.
- Updated the theme engine to include new color conversion functions for better color handling.

These enhancements improve the usability and functionality of the Theme Studio, providing users with more control over color palettes.
---
 .../theme-studio/ThemeStudioPaletteEditor.vue | 102 +++++++++++++++++-
 docs/app/utils/theme-engine/oklch.ts          |   6 ++
 docs/app/utils/theme-engine/presets.ts        |   4 +-
 3 files changed, 108 insertions(+), 4 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 0a67a8a3fe..795d1faff4 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useThrottleFn, watchIgnorable } from '@vueuse/core'
-import { SHADES, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, PALETTE_EFFECT_DEFAULTS, generatePalette, fitPalette, applyPaletteEffects, isDefaultEffects, sampleCurve, clampToGamut, formatOklch } from '../../utils/theme-engine'
+import { SHADES, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, PALETTE_EFFECT_DEFAULTS, generatePalette, fitPalette, applyPaletteEffects, isDefaultEffects, sampleCurve, clampToGamut, formatOklch, parseColor, oklchToRgb, rgbToHex } from '../../utils/theme-engine'
 import type { PaletteCurveParams, PaletteEffects, StoredPaletteParams, ColorAlias } from '../../utils/theme-engine'
 
 const props = defineProps<{
@@ -48,6 +48,46 @@ const active = computed(() => isCustomPalette(props.alias))
 const shades = computed(() => generatePalette(params))
 const stopColors = computed(() => SHADES.map(shade => shades.value[shade]))
 
+/** Every swatch with its hex/rgb equivalents for the tooltip. */
+const swatchInfo = computed(() => SHADES.map((shade) => {
+  const oklch = shades.value[shade]!
+  const parsed = parseColor(oklch)
+  const rgb = parsed ? oklchToRgb(parsed) : undefined
+  return {
+    shade,
+    oklch,
+    hex: rgb ? rgbToHex(rgb) : '',
+    rgb: rgb ? `rgb(${rgb.map(channel => Math.round(channel * 255)).join(', ')})` : ''
+  }
+}))
+
+const { copy: copyShade } = useClipboard()
+const copiedShade = ref<number>()
+let copiedTimeout: ReturnType<typeof setTimeout> | undefined
+
+function copySwatch(info: { shade: number, oklch: string }) {
+  copyShade(info.oklch)
+  copiedShade.value = info.shade
+  clearTimeout(copiedTimeout)
+  copiedTimeout = setTimeout(() => {
+    copiedShade.value = undefined
+  }, 1500)
+}
+onUnmounted(() => clearTimeout(copiedTimeout))
+
+/**
+ * A pinned swatch tooltip stays open for reading/copying at leisure. Reka
+ * locks controlled-vs-uncontrolled at mount, so the tooltips are always
+ * controlled: hover intent lands in `hoveredTips` and a pin overrides it.
+ */
+const pinnedShade = ref<number>()
+const hoveredTips = reactive<Partial<Record<number, boolean>>>({})
+
+/** One pin at a time — pinning a swatch unpins any other. */
+function togglePin(shade: number) {
+  pinnedShade.value = pinnedShade.value === shade ? undefined : shade
+}
+
 /**
  * Every axis is a fixed 1:1 window — the full physical range fits the
  * canvas, so dragging never pans or rescales under the pointer. Hue params
@@ -256,8 +296,64 @@ function resetEffects() {
           />
 
           <div class="flex rounded-b-sm overflow-hidden ring ring-default">
-            <UTooltip v-for="shade in SHADES" :key="shade" :text="`${shade} · ${shades[shade]}`">
-              <div class="aspect-square flex-1" :style="{ backgroundColor: shades[shade] }" />
+            <UTooltip
+              v-for="info in swatchInfo"
+              :key="info.shade"
+              disable-closing-trigger
+              :open="pinnedShade === info.shade || (hoveredTips[info.shade] ?? false)"
+              :content="{ side: 'right' }"
+              :ui="{ content: 'h-auto' }"
+              @update:open="hoveredTips[info.shade] = $event"
+            >
+              <button
+                type="button"
+                class="aspect-square flex-1"
+                :style="{ backgroundColor: info.oklch }"
+                :aria-label="`Shade ${info.shade}: ${info.oklch}`"
+                :aria-pressed="pinnedShade === info.shade"
+                @click="togglePin(info.shade)"
+              />
+
+              <template #content>
+                <div class="px-1 py-1 text-xs font-mono flex flex-col gap-0.5">
+                  <div class="flex items-center justify-between gap-3">
+                    <span class="font-semibold">{{ info.shade }}</span>
+
+                    <div class="flex items-center">
+                      <UTooltip text="Copy Oklch">
+                        <UButton
+                          size="xs"
+                          color="neutral"
+                          square
+                          variant="ghost"
+                          :ui="{ leadingIcon: 'size-3' }"
+                          :icon="copiedShade === info.shade ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+                          :aria-label="`Copy ${info.oklch}`"
+                          @click="copySwatch(info)"
+                        />
+                      </UTooltip>
+
+                      <UTooltip :text="pinnedShade === info.shade ? 'Unpin' : 'Pin open'">
+                        <UButton
+                          size="xs"
+                          color="neutral"
+                          square
+                          variant="ghost"
+                          active-color="primary"
+                          active-variant="ghost"
+                          :active="pinnedShade === info.shade"
+                          :ui="{ leadingIcon: 'size-3' }"
+                          :icon="pinnedShade === info.shade ? 'i-lucide-pin-off' : 'i-lucide-pin'"
+                          :aria-label="pinnedShade === info.shade ? 'Unpin tooltip' : 'Pin tooltip open'"
+                          @click="togglePin(info.shade)"
+                        />
+                      </UTooltip>
+                    </div>
+                  </div>
+                  <span>{{ info.oklch }}</span>
+                  <span class="text-muted">{{ info.hex }} · {{ info.rgb }}</span>
+                </div>
+              </template>
             </UTooltip>
           </div>
         </div>
diff --git a/docs/app/utils/theme-engine/oklch.ts b/docs/app/utils/theme-engine/oklch.ts
index e527bb9b94..0e9e61587a 100644
--- a/docs/app/utils/theme-engine/oklch.ts
+++ b/docs/app/utils/theme-engine/oklch.ts
@@ -77,6 +77,12 @@ function oklchToLinearRgb({ l: L, c, h }: Oklch): [number, number, number] {
   ]
 }
 
+/** Gamut-clipped sRGB channels (0–1) — for showing hex/rgb equivalents. */
+export function oklchToRgb(color: Oklch): [number, number, number] {
+  return oklchToLinearRgb(color).map(channel =>
+    Math.min(1, Math.max(0, linearToSrgb(channel)))) as [number, number, number]
+}
+
 const GAMUT_EPSILON = 0.000005
 
 export function inGamut(color: Oklch): boolean {
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 84653f92cc..e699482640 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -277,7 +277,9 @@ export const presets: ThemePreset[] = [{
       neutral: 'custom-neutral'
     },
     radius: 0.125,
-    font: { sans: 'Comic Neue' },
+    // One flat 600 across every weight step — comic lettering has a single
+    // stroke width, and Comic Neue's 400 reads too thin for the look.
+    font: { sans: 'Comic Neue', weights: { normal: 600, medium: 600, semibold: 600, bold: 600 } },
     // Inked page: near-black default AND accented borders over muted panel
     // edges, deep red at 600 in light, flat 50s inversions in dark.
     tokens: {

From 274d1da5203482d7ae76850680f95bc79ac22df5 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 11 Jul 2026 15:54:44 +0200
Subject: [PATCH 128/185] feat(docs): structured borders, richer icon sets and
 a Bootstrap 5 preset
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- /theme adopts the releases/templates structured-border layout: border-x
  rails from the header to the viewport bottom replace the floating
  preview card; the toolbar separates with a border-t
- setting popovers drop their content padding — sections carry p-4 so
  separators run edge to edge
- Font section: base/heading selects share a row with a single grouped
  modifier cluster; italic and underline options removed
- five new complete icon sets (Bootstrap, Heroicons, Iconoir, Material
  Symbols, Remix), every name validated against the Iconify API; the
  material sun needed the colon form to dodge the material-symbols-light
  collection prefix collision
- Bootstrap 5 preset built from twbs _variables.scss: real tint/shade
  ramps extended to 50/950 stored as canonical oklch, gray-600 secondary,
  .375rem radius, Roboto, headings at 500, flat shadows, bi icon set
- Shift+D toggles color mode; the toolbar switch is marked
  data-keep-panels so flipping modes no longer dismisses open panels
- orchard preset drops its no-op default radius (broke export round-trip)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/components/header/Header.vue         |   2 +
 .../theme-studio/ThemeStudioControls.vue      | 162 ++++--------
 .../theme-studio/ThemeStudioPresetMenu.vue    |  13 +-
 .../theme-studio/ThemeStudioSliderRow.vue     |   2 +-
 docs/app/composables/useTheme.ts              |  22 +-
 docs/app/pages/theme.vue                      |  56 +++--
 docs/app/utils/theme-engine/presets.ts        | 159 +++++++++++-
 docs/app/utils/theme.ts                       | 231 ++++++++++++++++++
 8 files changed, 510 insertions(+), 137 deletions(-)

diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index 8ee143d14d..071964e4a2 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -94,6 +94,7 @@ const studioMenuLinks = [{
           v-model="view"
           :items="views"
           :content="false"
+          size="sm"
           color="primary"
         />
       </template>
@@ -101,6 +102,7 @@ const studioMenuLinks = [{
       <template #pages-content>
         <UNavigationMenu
           orientation="vertical"
+          size="sm"
           :items="studioMenuLinks"
           class="p-2"
         />
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index af4d777d2c..724692513e 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -71,26 +71,11 @@ const headingUppercase = computed({
   set: (value: boolean) => setHeading({ uppercase: value })
 })
 
-const headingItalic = computed({
-  get: () => !!fontPrefs.value.heading?.italic,
-  set: (value: boolean) => setHeading({ italic: value })
-})
-
 const baseUppercase = computed({
   get: () => !!fontPrefs.value.uppercase,
   set: (value: boolean) => setFontPrefs({ ...fontPrefs.value, uppercase: value })
 })
 
-const baseItalic = computed({
-  get: () => !!fontPrefs.value.italic,
-  set: (value: boolean) => setFontPrefs({ ...fontPrefs.value, italic: value })
-})
-
-const headingUnderline = computed({
-  get: () => !!fontPrefs.value.heading?.underline,
-  set: (value: boolean) => setHeading({ underline: value })
-})
-
 const baseLetterSpacing = computed({
   get: () => fontPrefs.value.letterSpacing ?? 0,
   set: (value: number) => setFontPrefs({ ...fontPrefs.value, letterSpacing: value })
@@ -406,16 +391,17 @@ const shadowColor = computed({
 <template>
   <div :key="hydrationKey">
     <template v-if="group === 'colors'">
-      <div class="flex flex-col gap-4">
-        <ThemeStudioColorSection alias="primary" help-to="/docs/getting-started/theme/css-variables#colors" />
+      <!-- Sections own their padding so the separators run edge to edge. -->
+      <div class="flex flex-col">
+        <ThemeStudioColorSection alias="primary" help-to="/docs/getting-started/theme/css-variables#colors" class="p-4" />
 
         <USeparator />
 
-        <ThemeStudioColorSection alias="neutral" help-to="/docs/getting-started/theme/css-variables#text" />
+        <ThemeStudioColorSection alias="neutral" help-to="/docs/getting-started/theme/css-variables#text" class="p-4" />
 
         <USeparator />
 
-        <ThemeStudioSection label="Semantic" help-to="/docs/getting-started/theme/design-system" :default-open="false">
+        <ThemeStudioSection label="Semantic" help-to="/docs/getting-started/theme/design-system" :default-open="false" class="p-4">
           <div class="flex flex-col gap-3 pt-1">
             <ThemeStudioColorSection v-for="alias in semanticAliases" :key="alias" :alias="alias" />
           </div>
@@ -424,8 +410,8 @@ const shadowColor = computed({
     </template>
 
     <template v-else-if="group === 'style'">
-      <div class="flex flex-col gap-4">
-        <ThemeStudioSection label="Shadow">
+      <div class="flex flex-col">
+        <ThemeStudioSection label="Shadow" class="p-4">
           <div>
             <UTabs
               v-model="shadowStyle"
@@ -484,7 +470,7 @@ const shadowColor = computed({
 
         <USeparator />
 
-        <ThemeStudioSection label="Inner shadow">
+        <ThemeStudioSection label="Inner shadow" class="p-4">
           <div>
             <UTabs
               v-model="innerShadowStyle"
@@ -543,7 +529,7 @@ const shadowColor = computed({
 
         <USeparator />
 
-        <ThemeStudioSection label="Borders">
+        <ThemeStudioSection label="Borders" class="p-4">
           <div>
             <UTabs
               v-model="borderStyle"
@@ -598,8 +584,8 @@ const shadowColor = computed({
     </template>
 
     <template v-else-if="group === 'general'">
-      <div class="flex flex-col gap-4">
-        <ThemeStudioSection label="Font" help-to="/docs/getting-started/integrations/fonts">
+      <div class="flex flex-col">
+        <ThemeStudioSection label="Font" help-to="/docs/getting-started/integrations/fonts" class="p-4">
           <div class="flex flex-col gap-2">
             <!-- live specimen: the heading treatment over the base body -->
             <div class="rounded-md ring ring-default bg-elevated/50 px-3 py-2 select-none">
@@ -613,22 +599,21 @@ const shadowColor = computed({
 
             <span class="text-xs font-semibold text-muted select-none">Base</span>
 
-            <USelect
-              v-model="font"
-              size="sm"
-              color="neutral"
-              variant="subtle"
-              icon="i-lucide-type"
-              :items="fonts"
-              class="w-full"
-            >
-              <template #item-label="{ item }">
-                <span :style="{ fontFamily: `'${item}', sans-serif` }">{{ item }}</span>
-              </template>
-            </USelect>
-
             <div class="flex items-center gap-1.5">
-              <!-- face -->
+              <USelect
+                v-model="font"
+                size="sm"
+                color="neutral"
+                variant="subtle"
+                icon="i-lucide-type"
+                :items="fonts"
+                class="flex-1 min-w-0"
+              >
+                <template #item-label="{ item }">
+                  <span :style="{ fontFamily: `'${item}', sans-serif` }">{{ item }}</span>
+                </template>
+              </USelect>
+
               <UFieldGroup size="sm">
                 <UPopover :content="{ align: 'start' }">
                   <UTooltip text="Weights">
@@ -658,22 +643,6 @@ const shadowColor = computed({
                   </template>
                 </UPopover>
 
-                <UTooltip text="Italic">
-                  <UButton
-                    icon="i-lucide-italic"
-                    color="neutral"
-                    variant="subtle"
-                    :active="baseItalic"
-                    active-color="primary"
-                    active-variant="subtle"
-                    aria-label="Italic text"
-                    @click="baseItalic = !baseItalic"
-                  />
-                </UTooltip>
-              </UFieldGroup>
-
-              <!-- glyph treatment -->
-              <UFieldGroup size="sm">
                 <UTooltip text="Uppercase">
                   <UButton
                     icon="i-lucide-case-upper"
@@ -686,10 +655,6 @@ const shadowColor = computed({
                     @click="baseUppercase = !baseUppercase"
                   />
                 </UTooltip>
-              </UFieldGroup>
-
-              <!-- rhythm -->
-              <UFieldGroup size="sm">
                 <UPopover :content="{ align: 'start' }">
                   <UTooltip text="Letter spacing">
                     <UButton
@@ -745,22 +710,21 @@ const shadowColor = computed({
 
             <span class="text-xs font-semibold text-muted select-none pt-1">Headings (Prose)</span>
 
-            <USelect
-              v-model="headingFont"
-              size="sm"
-              color="neutral"
-              variant="subtle"
-              icon="i-lucide-heading"
-              :items="headingFontItems"
-              class="w-full"
-            >
-              <template #item-label="{ item }">
-                <span :style="item.value === 'inherit' ? undefined : { fontFamily: `'${item.value}', sans-serif` }">{{ item.label }}</span>
-              </template>
-            </USelect>
-
             <div class="flex items-center gap-1.5">
-              <!-- face -->
+              <USelect
+                v-model="headingFont"
+                size="sm"
+                color="neutral"
+                variant="subtle"
+                icon="i-lucide-heading"
+                :items="headingFontItems"
+                class="flex-1 min-w-0"
+              >
+                <template #item-label="{ item }">
+                  <span :style="item.value === 'inherit' ? undefined : { fontFamily: `'${item.value}', sans-serif` }">{{ item.label }}</span>
+                </template>
+              </USelect>
+
               <UFieldGroup size="sm">
                 <UPopover :content="{ align: 'start' }">
                   <UTooltip text="Weight">
@@ -787,50 +751,18 @@ const shadowColor = computed({
                   </template>
                 </UPopover>
 
-                <UTooltip text="Italic">
-                  <UButton
-                    icon="i-lucide-italic"
-                    color="neutral"
-                    variant="subtle"
-                    :active="headingItalic"
-                    active-color="primary"
-                    active-variant="subtle"
-                    aria-label="Italic headings"
-                    @click="headingItalic = !headingItalic"
-                  />
-                </UTooltip>
-
-                <UTooltip text="Underline">
+                <UTooltip text="Uppercase">
                   <UButton
-                    icon="i-lucide-underline"
+                    icon="i-lucide-case-upper"
                     color="neutral"
                     variant="subtle"
-                    :active="headingUnderline"
+                    :active="headingUppercase"
                     active-color="primary"
                     active-variant="subtle"
-                    aria-label="Underline headings"
-                    @click="headingUnderline = !headingUnderline"
+                    aria-label="Uppercase headings"
+                    @click="headingUppercase = !headingUppercase"
                   />
                 </UTooltip>
-              </UFieldGroup>
-
-              <!-- glyph treatment -->
-              <UTooltip text="Uppercase">
-                <UButton
-                  icon="i-lucide-case-upper"
-                  color="neutral"
-                  variant="subtle"
-                  size="sm"
-                  :active="headingUppercase"
-                  active-color="primary"
-                  active-variant="subtle"
-                  aria-label="Uppercase headings"
-                  @click="headingUppercase = !headingUppercase"
-                />
-              </UTooltip>
-
-              <!-- rhythm -->
-              <UFieldGroup size="sm">
                 <UPopover :content="{ align: 'start' }">
                   <UTooltip text="Letter spacing">
                     <UButton
@@ -888,7 +820,7 @@ const shadowColor = computed({
 
         <USeparator />
 
-        <ThemeStudioSection label="Icons" help-to="/docs/getting-started/integrations/icons">
+        <ThemeStudioSection label="Icons" help-to="/docs/getting-started/integrations/icons" class="p-4">
           <div class="flex flex-col gap-2">
             <!-- a spread of the selected set -->
             <div class="rounded-md ring ring-default bg-elevated/50 px-3 py-2 flex flex-wrap justify-center gap-2.5">
@@ -910,7 +842,7 @@ const shadowColor = computed({
 
         <USeparator />
 
-        <ThemeStudioSection label="Scale">
+        <ThemeStudioSection label="Scale" class="p-4">
           <div class="flex flex-col gap-2">
             <ThemeStudioSliderRow
               v-model="radius"
@@ -951,7 +883,7 @@ const shadowColor = computed({
         <USeparator />
 
         <template v-for="field in variantGroupFields" :key="field.key">
-          <ThemeStudioSection :label="field.label" :default-open="false">
+          <ThemeStudioSection :label="field.label" :default-open="false" class="p-4">
             <div class="flex flex-col gap-1.5">
               <div class="flex items-center gap-2">
                 <span class="text-xs text-muted w-13 shrink-0 select-none">Variant</span>
diff --git a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
index c459c23fce..d3363a13b5 100644
--- a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
@@ -37,6 +37,16 @@ const presetItems = computed(() => presets.map(preset => ({
   onSelect: () => applyPreset(preset)
 })))
 
+/**
+ * Toolbar chrome marked data-keep-panels (the color-mode switch) must stay
+ * clickable and non-dismissing while the menu is open — hence non-modal.
+ */
+function keepPanels(event: Event) {
+  if ((event.target as HTMLElement | null)?.closest?.('[data-keep-panels]')) {
+    event.preventDefault()
+  }
+}
+
 /** The applied preset's name; 'Custom' once edits diverge from it. */
 const presetLabel = computed(() => {
   if (!mounted.value) return 'Presets'
@@ -51,7 +61,8 @@ const presetLabel = computed(() => {
     <UDropdownMenu
       v-model:open="open"
       :items="presetItems"
-      :content="{ align: 'start' }"
+      :modal="false"
+      :content="{ align: 'start', onInteractOutside: keepPanels }"
       class="flex-1 min-w-0"
       :ui="{ itemTrailing: 'self-center', content: 'w-(--reka-dropdown-menu-trigger-width)' }"
     >
diff --git a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
index 3e1b573163..7667b38117 100644
--- a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
@@ -56,7 +56,7 @@ const display = computed(() => shade.value
     size="xs"
     :style="sliderColor ? { '--slider-color': sliderColor, '--slider-contrast': contrastColor } : undefined"
     :ui="{
-      root: 'flex items-center gap-2',
+      root: 'flex items-center gap-2 px-1',
       wrapper: 'w-13 shrink-0',
       /* truncate only text labels — its overflow:hidden would clip the
          shade chip's ring once thick-border themes inflate it */
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 8aa4f96302..649aad7195 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -201,7 +201,7 @@ export function useTheme() {
     }
   })
 
-  const fonts = ['Public Sans', 'Comic Neue', 'DM Sans', 'Geist', 'Inter', 'Poppins', 'Outfit', 'Raleway']
+  const fonts = ['Public Sans', 'Comic Neue', 'DM Sans', 'Geist', 'Inter', 'Poppins', 'Outfit', 'Raleway', 'Roboto']
 
   const font = computed({
     get() {
@@ -217,10 +217,30 @@ export function useTheme() {
     label: 'Lucide',
     icon: 'i-lucide-feather',
     value: 'lucide'
+  }, {
+    label: 'Bootstrap',
+    icon: 'i-bi-bootstrap',
+    value: 'bootstrap'
+  }, {
+    label: 'Heroicons',
+    icon: 'i-simple-icons-tailwindcss',
+    value: 'heroicons'
+  }, {
+    label: 'Iconoir',
+    icon: 'i-iconoir-iconoir',
+    value: 'iconoir'
+  }, {
+    label: 'Material Symbols',
+    icon: 'i-simple-icons-materialdesign',
+    value: 'material'
   }, {
     label: 'Phosphor',
     icon: 'i-ph-phosphor-logo',
     value: 'phosphor'
+  }, {
+    label: 'Remix',
+    icon: 'i-ri-remixicon-line',
+    value: 'remix'
   }, {
     label: 'Tabler',
     icon: 'i-tabler-brand-tabler',
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 3cad42ac27..488132c13b 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -30,12 +30,31 @@ watch(() => (mounted.value ? JSON.stringify(currentDoc()) : undefined), (snapsho
   captureTimeout = setTimeout(() => capture(snapshot), 350)
 })
 
+// Shift+D flips the mode without a click, so open panels survive the
+// switch (defineShortcuts already defers while an input has focus).
+const colorMode = useColorMode()
+function toggleColorMode() {
+  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+}
+
 defineShortcuts({
   meta_z: undo,
   meta_shift_z: redo,
-  ctrl_y: redo
+  ctrl_y: redo,
+  shift_d: toggleColorMode
 })
 
+/**
+ * Clicking toolbar chrome marked data-keep-panels (the color-mode switch)
+ * must not dismiss an open panel — flipping the mode while tuning colors is
+ * the studio's core loop.
+ */
+function keepPanels(event: Event) {
+  if ((event.target as HTMLElement | null)?.closest?.('[data-keep-panels]')) {
+    event.preventDefault()
+  }
+}
+
 // Esc exits fullscreen — but NOT through defineShortcuts, which
 // preventDefaults every matched key and would stop Reka's dismissable
 // layers from ever seeing Escape (no popover on /theme could close). A
@@ -103,19 +122,18 @@ const shareMode = ref<'import' | 'export'>('export')
        the page tint composites on top of it. -->
   <main class="bg-elevated/25">
     <UContainer :class="fullscreen && 'max-w-none px-0 sm:px-0 lg:px-0'">
-      <div class="flex flex-col w-full" :class="fullscreen ? 'h-dvh' : 'h-[calc(100dvh-var(--ui-header-height))]'">
-        <!-- The floating preview card: the grid scrolls inside it; the
-             app-shell views own their height and scroll internally.
-             [&>*]:rounded-[inherit] + [contain:paint] put the radius and
-             hard paint containment on the views' own scrollers — Chromium
-             won't clip nested composited layers (sticky headers, filtered
-             glows) by an ancestor's radius or overflow alone. -->
+      <!-- Structured borders (like /releases and /templates): border-x rails
+           run from the header's bottom border to the viewport bottom at the
+           container's padding edge — no floating card. -->
+      <div class="flex flex-col w-full" :class="fullscreen ? 'h-dvh' : 'h-[calc(100dvh-var(--ui-header-height))] border-x border-default bg-default'">
+        <!-- The preview: the grid scrolls inside it; the app-shell views own
+             their height and scroll internally. [contain:paint] puts hard
+             paint containment on the views' own scrollers — Chromium won't
+             clip nested composited layers (sticky headers, filtered glows)
+             by an ancestor's overflow alone. -->
         <div
-          class="flex-1 min-w-0 min-h-0 bg-default [&>*]:rounded-[inherit] [&>*]:[contain:paint]"
-          :class="[
-            view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden',
-            fullscreen ? 'rounded-none' : 'ring ring-default mt-4 rounded-lg'
-          ]"
+          class="flex-1 min-w-0 min-h-0 bg-default [&>*]:[contain:paint]"
+          :class="view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden'"
         >
           <Playground v-if="view === 'grid'" class="py-4" />
           <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
@@ -139,10 +157,10 @@ const shareMode = ref<'import' | 'export'>('export')
 
           <div
             class="flex items-center gap-2 p-3 overflow-x-auto"
-            :class="fullscreen && [
+            :class="fullscreen ? [
               'mt-4 rounded-t-lg bg-default/75 backdrop-blur ring ring-default shadow-lg pointer-events-auto transition-transform duration-200',
               toolbarPinned ? 'translate-y-0' : 'translate-y-[calc(100%+6px)] group-hover:translate-y-0 group-focus-within:translate-y-0'
-            ]"
+            ] : 'border-t border-default'"
           >
             <ThemeStudioPresetMenu v-model:open="openPanels.presets" class="w-56 shrink-0" />
 
@@ -150,7 +168,7 @@ const shareMode = ref<'import' | 'export'>('export')
               v-for="settingGroup in settingGroups"
               :key="settingGroup.value"
               v-model:open="openPanels[settingGroup.value]"
-              :content="{ align: 'start' }"
+              :content="{ align: 'start', onInteractOutside: keepPanels }"
             >
               <UButton
                 :label="settingGroup.label"
@@ -160,11 +178,13 @@ const shareMode = ref<'import' | 'export'>('export')
               />
 
               <template #content>
-                <ThemeStudioControls :group="settingGroup.value" class="w-80 max-h-[70vh] overflow-y-auto p-4" />
+                <ThemeStudioControls :group="settingGroup.value" class="w-80 max-h-[70vh] overflow-y-auto" />
               </template>
             </UPopover>
 
-            <UColorModeSwitch class="shrink-0" />
+            <UTooltip text="Color mode" :kbds="['shift', 'D']">
+              <UColorModeSwitch data-keep-panels class="shrink-0" />
+            </UTooltip>
 
             <span class="flex-1" />
 
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index e699482640..7de36c7435 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -137,7 +137,6 @@ export const presets: ThemePreset[] = [{
       primary: 'orange',
       neutral: 'grove'
     },
-    radius: 0.5,
     font: { sans: 'DM Sans' },
     tokens: {
       light: {
@@ -468,4 +467,162 @@ export const presets: ThemePreset[] = [{
       }
     }
   }
+}, {
+  id: 'bootstrap',
+  name: 'Bootstrap',
+  description: 'The Bootstrap 5 look — its blue, its grays, .375rem corners, flat bordered surfaces.',
+  icon: 'i-simple-icons-bootstrap',
+  doc: {
+    version: 1,
+    meta: { name: 'Bootstrap', base: 'bootstrap' },
+    // The real 5.3 scales: 100–400 are tint-color() (mix with white at
+    // 80/60/40/20%), 600–900 are shade-color() (mix with black), extended
+    // to 50/950 with the same math. The names deliberately shadow the
+    // tailwind ramps — inside this theme, blue IS Bootstrap blue.
+    palettes: {
+      blue: {
+        shades: {
+          50: 'oklch(95.3% 0.022 260.723)',
+          100: 'oklch(90.8% 0.045 258.763)',
+          200: 'oklch(81.6% 0.091 257.776)',
+          300: 'oklch(72.9% 0.14 258.068)',
+          400: 'oklch(64.7% 0.186 258.256)',
+          500: 'oklch(57.8% 0.228 260.025)',
+          600: 'oklch(49.2% 0.19 259.799)',
+          700: 'oklch(40.2% 0.152 259.656)',
+          800: 'oklch(30.7% 0.109 258.934)',
+          900: 'oklch(20.4% 0.063 257.52)',
+          950: 'oklch(95.3% 0.022 260.723)'
+        }
+      },
+      // $gray-100…$gray-900 verbatim, with 50/950 extrapolated.
+      gray: {
+        shades: {
+          50: 'oklch(99.1% 0 0)',
+          100: 'oklch(98.2% 0.002 247.839)',
+          200: 'oklch(94.2% 0.005 247.879)',
+          300: 'oklch(91.1% 0.007 247.901)',
+          400: 'oklch(86.7% 0.011 247.949)',
+          500: 'oklch(76.9% 0.015 248.017)',
+          600: 'oklch(55.8% 0.016 244.893)',
+          700: 'oklch(42.8% 0.015 248.172)',
+          800: 'oklch(34.5% 0.013 248.212)',
+          900: 'oklch(26.2% 0.009 248.19)',
+          950: 'oklch(99.1% 0 0)'
+        }
+      },
+      green: {
+        shades: {
+          50: 'oklch(95.5% 0.013 167.173)',
+          100: 'oklch(90.9% 0.027 166.725)',
+          200: 'oklch(81.7% 0.054 165.592)',
+          300: 'oklch(72.6% 0.082 163.174)',
+          400: 'oklch(63.7% 0.106 160.921)',
+          500: 'oklch(55.2% 0.123 157.012)',
+          600: 'oklch(47.1% 0.104 157.226)',
+          700: 'oklch(38.6% 0.083 157.541)',
+          800: 'oklch(29.7% 0.06 159.192)',
+          900: 'oklch(20% 0.035 161.761)',
+          950: 'oklch(95.5% 0.013 167.173)'
+        }
+      },
+      red: {
+        shades: {
+          50: 'oklch(95.4% 0.019 13.379)',
+          100: 'oklch(90.7% 0.037 11.626)',
+          200: 'oklch(81.5% 0.079 12.026)',
+          300: 'oklch(73% 0.123 14.804)',
+          400: 'oklch(65.2% 0.167 17.173)',
+          500: 'oklch(59.2% 0.202 21.239)',
+          600: 'oklch(50.2% 0.17 20.933)',
+          700: 'oklch(41% 0.134 20.765)',
+          800: 'oklch(31.2% 0.097 19.17)',
+          900: 'oklch(20.7% 0.055 17.828)',
+          950: 'oklch(95.4% 0.019 13.379)'
+        }
+      },
+      yellow: {
+        shades: {
+          50: 'oklch(98.2% 0.026 92.389)',
+          100: 'oklch(96.4% 0.051 92.554)',
+          200: 'oklch(92.9% 0.097 91.534)',
+          300: 'oklch(89.8% 0.137 91.178)',
+          400: 'oklch(86.9% 0.162 88.789)',
+          500: 'oklch(84.4% 0.172 84.934)',
+          600: 'oklch(71.4% 0.145 85.028)',
+          700: 'oklch(58% 0.118 86.024)',
+          800: 'oklch(43.5% 0.088 86.646)',
+          900: 'oklch(27.9% 0.056 90.569)',
+          950: 'oklch(98.2% 0.026 92.389)'
+        }
+      },
+      cyan: {
+        shades: {
+          50: 'oklch(97.2% 0.021 211.758)',
+          100: 'oklch(94.3% 0.04 212.228)',
+          200: 'oklch(89.3% 0.077 211.321)',
+          300: 'oklch(84.6% 0.107 212.793)',
+          400: 'oklch(80.8% 0.129 214.292)',
+          500: 'oklch(77.5% 0.138 218.055)',
+          600: 'oklch(65.8% 0.116 217.451)',
+          700: 'oklch(53.2% 0.094 217.564)',
+          800: 'oklch(40.1% 0.07 216.209)',
+          900: 'oklch(25.6% 0.043 215.657)',
+          950: 'oklch(97.2% 0.021 211.758)'
+        }
+      }
+    },
+    // $primary/$secondary/$success/$info/$warning/$danger — secondary is
+    // literally $gray-600, so the gray ramp serves both roles.
+    colors: {
+      primary: 'blue',
+      secondary: 'gray',
+      success: 'green',
+      info: 'cyan',
+      warning: 'yellow',
+      error: 'red',
+      neutral: 'gray'
+    },
+    radius: 0.375,
+    // system-ui stack in the sources; Roboto is its named web fallback.
+    // $headings-font-weight: 500.
+    font: { sans: 'Roboto', heading: { weight: 500 } },
+    icons: 'bootstrap',
+    // Light rides the gray ramp one step deeper than stock (page on gray-100,
+    // surfaces stepped 200/300) with a single strong border family.
+    tokens: {
+      light: {
+        '--ui-success': 'var(--ui-color-success-400)',
+        '--ui-bg-muted': 'var(--ui-color-neutral-200)',
+        '--ui-text': 'var(--ui-color-neutral-800)',
+        '--ui-border': 'var(--ui-color-neutral-400)',
+        '--ui-border-muted': 'var(--ui-color-neutral-300)',
+        '--ui-bg': 'var(--ui-color-neutral-100)',
+        '--ui-text-toned': 'var(--ui-color-neutral-700)',
+        '--ui-text-muted': 'var(--ui-color-neutral-600)',
+        '--ui-text-dimmed': 'var(--ui-color-neutral-600)',
+        '--ui-bg-elevated': 'var(--ui-color-neutral-200)',
+        '--ui-bg-accented': 'var(--ui-color-neutral-300)'
+      },
+      // Dark mode keeps the very same brand colors (--bs-primary stays
+      // #0d6efd); $body-color-dark: $gray-300, $border-color-dark: $gray-700.
+      dark: {
+        '--ui-primary': 'var(--ui-color-primary-500)',
+        '--ui-secondary': 'var(--ui-color-secondary-500)',
+        '--ui-success': 'var(--ui-color-success-500)',
+        '--ui-info': 'var(--ui-color-info-500)',
+        '--ui-warning': 'var(--ui-color-warning-500)',
+        '--ui-error': 'var(--ui-color-error-500)',
+        '--ui-bg-muted': 'var(--ui-color-neutral-700)',
+        '--ui-text': 'var(--ui-color-neutral-300)',
+        '--ui-border': 'var(--ui-color-neutral-800)',
+        '--ui-bg': 'var(--ui-color-neutral-900)',
+        '--ui-bg-elevated': 'var(--ui-color-neutral-800)',
+        '--ui-bg-accented': 'var(--ui-color-neutral-700)'
+      }
+    },
+    // Bootstrap is famously flat: borders, not shadows; subtle cards and
+    // explicit outline inputs.
+    style: { shadow: 'flat', defaults: { variants: { panels: 'subtle', inputs: 'outline' } } }
+  }
 }]
diff --git a/docs/app/utils/theme.ts b/docs/app/utils/theme.ts
index 39519bf051..d6cf0b7c40 100644
--- a/docs/app/utils/theme.ts
+++ b/docs/app/utils/theme.ts
@@ -14,8 +14,194 @@ export function readLocalStorage<T>(key: string, fallback: T): T {
 /** Tailwind's stock weight ladder — set steps are absences at these values. */
 export const FONT_WEIGHT_DEFAULTS = { normal: 400, medium: 500, semibold: 600, bold: 700 } as const
 
+// Picking a set replaces appConfig.ui.icons wholesale, so every set must
+// map the full key list from src/theme/icons — a missing key would blank
+// that icon across the whole app. Names are validated against the Iconify
+// API (sets beyond lucide resolve through @nuxt/icon's API fallback).
 export const themeIcons = {
   lucide,
+  bootstrap: {
+    arrowDown: 'i-bi-arrow-down',
+    arrowLeft: 'i-bi-arrow-left',
+    arrowRight: 'i-bi-arrow-right',
+    arrowUp: 'i-bi-arrow-up',
+    caution: 'i-bi-exclamation-circle',
+    check: 'i-bi-check',
+    chevronDoubleLeft: 'i-bi-chevron-double-left',
+    chevronDoubleRight: 'i-bi-chevron-double-right',
+    chevronDown: 'i-bi-chevron-down',
+    chevronLeft: 'i-bi-chevron-left',
+    chevronRight: 'i-bi-chevron-right',
+    chevronUp: 'i-bi-chevron-up',
+    close: 'i-bi-x',
+    copy: 'i-bi-clipboard',
+    copyCheck: 'i-bi-clipboard-check',
+    dark: 'i-bi-moon',
+    drag: 'i-bi-grip-vertical',
+    ellipsis: 'i-bi-three-dots',
+    error: 'i-bi-x-circle',
+    external: 'i-bi-box-arrow-up-right',
+    eye: 'i-bi-eye',
+    eyeOff: 'i-bi-eye-slash',
+    file: 'i-bi-file-earmark',
+    folder: 'i-bi-folder',
+    folderOpen: 'i-bi-folder2-open',
+    hash: 'i-bi-hash',
+    info: 'i-bi-info-circle',
+    light: 'i-bi-sun',
+    loading: 'i-bi-arrow-repeat',
+    menu: 'i-bi-list',
+    minus: 'i-bi-dash',
+    panelClose: 'i-bi-arrow-bar-left',
+    panelOpen: 'i-bi-arrow-bar-right',
+    plus: 'i-bi-plus',
+    reload: 'i-bi-arrow-counterclockwise',
+    search: 'i-bi-search',
+    stop: 'i-bi-square',
+    star: 'i-bi-star',
+    success: 'i-bi-check-circle',
+    system: 'i-bi-display',
+    tip: 'i-bi-lightbulb',
+    upload: 'i-bi-upload',
+    warning: 'i-bi-exclamation-triangle'
+  },
+  heroicons: {
+    arrowDown: 'i-heroicons-arrow-down',
+    arrowLeft: 'i-heroicons-arrow-left',
+    arrowRight: 'i-heroicons-arrow-right',
+    arrowUp: 'i-heroicons-arrow-up',
+    caution: 'i-heroicons-exclamation-circle',
+    check: 'i-heroicons-check',
+    chevronDoubleLeft: 'i-heroicons-chevron-double-left',
+    chevronDoubleRight: 'i-heroicons-chevron-double-right',
+    chevronDown: 'i-heroicons-chevron-down',
+    chevronLeft: 'i-heroicons-chevron-left',
+    chevronRight: 'i-heroicons-chevron-right',
+    chevronUp: 'i-heroicons-chevron-up',
+    close: 'i-heroicons-x-mark',
+    copy: 'i-heroicons-clipboard',
+    copyCheck: 'i-heroicons-clipboard-document-check',
+    dark: 'i-heroicons-moon',
+    drag: 'i-heroicons-bars-3',
+    ellipsis: 'i-heroicons-ellipsis-horizontal',
+    error: 'i-heroicons-x-circle',
+    external: 'i-heroicons-arrow-up-right',
+    eye: 'i-heroicons-eye',
+    eyeOff: 'i-heroicons-eye-slash',
+    file: 'i-heroicons-document',
+    folder: 'i-heroicons-folder',
+    folderOpen: 'i-heroicons-folder-open',
+    hash: 'i-heroicons-hashtag',
+    info: 'i-heroicons-information-circle',
+    light: 'i-heroicons-sun',
+    loading: 'i-heroicons-arrow-path',
+    menu: 'i-heroicons-bars-3',
+    minus: 'i-heroicons-minus',
+    panelClose: 'i-heroicons-chevron-left',
+    panelOpen: 'i-heroicons-chevron-right',
+    plus: 'i-heroicons-plus',
+    reload: 'i-heroicons-arrow-uturn-left',
+    search: 'i-heroicons-magnifying-glass',
+    stop: 'i-heroicons-stop',
+    star: 'i-heroicons-star',
+    success: 'i-heroicons-check-circle',
+    system: 'i-heroicons-computer-desktop',
+    tip: 'i-heroicons-light-bulb',
+    upload: 'i-heroicons-arrow-up-tray',
+    warning: 'i-heroicons-exclamation-triangle'
+  },
+  iconoir: {
+    arrowDown: 'i-iconoir-arrow-down',
+    arrowLeft: 'i-iconoir-arrow-left',
+    arrowRight: 'i-iconoir-arrow-right',
+    arrowUp: 'i-iconoir-arrow-up',
+    caution: 'i-iconoir-warning-circle',
+    check: 'i-iconoir-check',
+    chevronDoubleLeft: 'i-iconoir-fast-arrow-left',
+    chevronDoubleRight: 'i-iconoir-fast-arrow-right',
+    chevronDown: 'i-iconoir-nav-arrow-down',
+    chevronLeft: 'i-iconoir-nav-arrow-left',
+    chevronRight: 'i-iconoir-nav-arrow-right',
+    chevronUp: 'i-iconoir-nav-arrow-up',
+    close: 'i-iconoir-xmark',
+    copy: 'i-iconoir-copy',
+    copyCheck: 'i-iconoir-multiple-pages-plus',
+    dark: 'i-iconoir-half-moon',
+    drag: 'i-iconoir-menu',
+    ellipsis: 'i-iconoir-more-horiz',
+    error: 'i-iconoir-xmark-circle',
+    external: 'i-iconoir-arrow-up-right',
+    eye: 'i-iconoir-eye',
+    eyeOff: 'i-iconoir-eye-closed',
+    file: 'i-iconoir-page',
+    folder: 'i-iconoir-folder',
+    folderOpen: 'i-iconoir-open-book',
+    hash: 'i-iconoir-hashtag',
+    info: 'i-iconoir-info-circle',
+    light: 'i-iconoir-sun-light',
+    loading: 'i-iconoir-refresh',
+    menu: 'i-iconoir-menu',
+    minus: 'i-iconoir-minus',
+    panelClose: 'i-iconoir-sidebar-collapse',
+    panelOpen: 'i-iconoir-sidebar-expand',
+    plus: 'i-iconoir-plus',
+    reload: 'i-iconoir-undo',
+    search: 'i-iconoir-search',
+    stop: 'i-iconoir-square',
+    star: 'i-iconoir-star',
+    success: 'i-iconoir-check-circle',
+    system: 'i-iconoir-computer',
+    tip: 'i-iconoir-light-bulb',
+    upload: 'i-iconoir-upload',
+    warning: 'i-iconoir-warning-triangle'
+  },
+  material: {
+    arrowDown: 'i-material-symbols-arrow-downward-rounded',
+    arrowLeft: 'i-material-symbols-arrow-back-rounded',
+    arrowRight: 'i-material-symbols-arrow-forward-rounded',
+    arrowUp: 'i-material-symbols-arrow-upward-rounded',
+    caution: 'i-material-symbols-error-outline-rounded',
+    check: 'i-material-symbols-check-rounded',
+    chevronDoubleLeft: 'i-material-symbols-keyboard-double-arrow-left-rounded',
+    chevronDoubleRight: 'i-material-symbols-keyboard-double-arrow-right-rounded',
+    chevronDown: 'i-material-symbols-keyboard-arrow-down-rounded',
+    chevronLeft: 'i-material-symbols-chevron-left-rounded',
+    chevronRight: 'i-material-symbols-chevron-right-rounded',
+    chevronUp: 'i-material-symbols-keyboard-arrow-up-rounded',
+    close: 'i-material-symbols-close-rounded',
+    copy: 'i-material-symbols-content-copy-outline-rounded',
+    copyCheck: 'i-material-symbols-inventory-rounded',
+    dark: 'i-material-symbols-dark-mode-outline-rounded',
+    drag: 'i-material-symbols-drag-indicator',
+    ellipsis: 'i-material-symbols-more-horiz',
+    error: 'i-material-symbols-cancel-outline-rounded',
+    external: 'i-material-symbols-arrow-outward-rounded',
+    eye: 'i-material-symbols-visibility-outline-rounded',
+    eyeOff: 'i-material-symbols-visibility-off-outline-rounded',
+    file: 'i-material-symbols-description-outline-rounded',
+    folder: 'i-material-symbols-folder-outline-rounded',
+    folderOpen: 'i-material-symbols-folder-open-outline-rounded',
+    hash: 'i-material-symbols-tag-rounded',
+    info: 'i-material-symbols-info-outline-rounded',
+    // colon form: the dashed name would resolve against the separate
+    // material-symbols-light collection and never load
+    light: 'i-material-symbols:light-mode-outline-rounded',
+    loading: 'i-material-symbols-progress-activity',
+    menu: 'i-material-symbols-menu-rounded',
+    minus: 'i-material-symbols-remove-rounded',
+    panelClose: 'i-material-symbols-left-panel-close-outline-rounded',
+    panelOpen: 'i-material-symbols-left-panel-open-outline-rounded',
+    plus: 'i-material-symbols-add-rounded',
+    reload: 'i-material-symbols-refresh-rounded',
+    search: 'i-material-symbols-search-rounded',
+    stop: 'i-material-symbols-stop-outline-rounded',
+    star: 'i-material-symbols-star-outline-rounded',
+    success: 'i-material-symbols-check-circle-outline-rounded',
+    system: 'i-material-symbols-desktop-windows-outline-rounded',
+    tip: 'i-material-symbols-lightbulb-outline-rounded',
+    upload: 'i-material-symbols-upload-rounded',
+    warning: 'i-material-symbols-warning-outline-rounded'
+  },
   phosphor: {
     arrowDown: 'i-ph-arrow-down',
     arrowLeft: 'i-ph-arrow-left',
@@ -61,6 +247,51 @@ export const themeIcons = {
     upload: 'i-ph-upload',
     warning: 'i-ph-warning'
   },
+  remix: {
+    arrowDown: 'i-ri-arrow-down-line',
+    arrowLeft: 'i-ri-arrow-left-line',
+    arrowRight: 'i-ri-arrow-right-line',
+    arrowUp: 'i-ri-arrow-up-line',
+    caution: 'i-ri-error-warning-line',
+    check: 'i-ri-check-line',
+    chevronDoubleLeft: 'i-ri-arrow-left-double-line',
+    chevronDoubleRight: 'i-ri-arrow-right-double-line',
+    chevronDown: 'i-ri-arrow-down-s-line',
+    chevronLeft: 'i-ri-arrow-left-s-line',
+    chevronRight: 'i-ri-arrow-right-s-line',
+    chevronUp: 'i-ri-arrow-up-s-line',
+    close: 'i-ri-close-line',
+    copy: 'i-ri-file-copy-line',
+    copyCheck: 'i-ri-checkbox-multiple-line',
+    dark: 'i-ri-moon-line',
+    drag: 'i-ri-draggable',
+    ellipsis: 'i-ri-more-line',
+    error: 'i-ri-close-circle-line',
+    external: 'i-ri-external-link-line',
+    eye: 'i-ri-eye-line',
+    eyeOff: 'i-ri-eye-off-line',
+    file: 'i-ri-file-line',
+    folder: 'i-ri-folder-line',
+    folderOpen: 'i-ri-folder-open-line',
+    hash: 'i-ri-hashtag',
+    info: 'i-ri-information-line',
+    light: 'i-ri-sun-line',
+    loading: 'i-ri-loader-4-line',
+    menu: 'i-ri-menu-line',
+    minus: 'i-ri-subtract-line',
+    panelClose: 'i-ri-sidebar-fold-line',
+    panelOpen: 'i-ri-sidebar-unfold-line',
+    plus: 'i-ri-add-line',
+    reload: 'i-ri-arrow-go-back-line',
+    search: 'i-ri-search-line',
+    stop: 'i-ri-stop-line',
+    star: 'i-ri-star-line',
+    success: 'i-ri-checkbox-circle-line',
+    system: 'i-ri-computer-line',
+    tip: 'i-ri-lightbulb-line',
+    upload: 'i-ri-upload-2-line',
+    warning: 'i-ri-alert-line'
+  },
   tabler: {
     arrowDown: 'i-tabler-arrow-down',
     arrowLeft: 'i-tabler-arrow-left',

From aa34b532bf942bd1b98c284b503e655e0805bcb4 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 11 Jul 2026 16:54:28 +0200
Subject: [PATCH 129/185] fix(docs): adversarial review pass over the full
 theme studio PR
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bugs:
- bootstrap ramps: all six 950 stops were copies of the 50 stop (regex
  slip during hex→oklch conversion); real shade-color(90%) values restored
- bootstrap palettes renamed bs-* — plain blue/gray shadowed the tailwind
  ramps app-wide (header preset apply recolored every text-blue-* in docs)
  and broke curve-editor seeding; light secondary now the true $gray-600
- shuffle() now applies the neutral white-literal remaps selectPalette
  uses — a shuffled tinted neutral exported a white-background theme
- resetTheme takes { track: false } so preset/import/shuffle/undo no
  longer pollute the Theme Reset analytics metric
- import: legacy ring-N scrubber gated on detection (ate user classes on
  config-only pastes; broke width-1 frame round-trips); non-custom-property
  declarations and nested at-rule blocks now land in `skipped` instead of
  importing as tokens; parseColor rejects truncated/alpha hex that fed NaN
  through the curve fitter
- ai.post.ts advertised sand/sage/ash neutrals that don't exist
- heading line-height defaults unified on 1.25 (slider claimed 1.5 while
  the page rendered ~1.25); AI ui.icons payloads skipped on the live path
- pinned swatch state reset on palette switch; curve editor drags only on
  the primary button; swatch details are a popover (keyboard-reachable
  copy/pin, pin survives outside clicks); Shift+D → ⌘⇧L (Notion
  convention, WCAG 2.1.4-safe); keep-panels scoped behind a prop so the
  header preset menu keeps stock modal dismiss
- Custom shadow opens seeded to the stock shadow-lg look (y6 blur12 @10%)

Bloat & noise:
- ThemeStudioControls: dead hydrationKey remount machinery removed;
  typography rows and shadow sections deduped through config arrays
  (~170 lines); five dead utility classes; orphaned docblocks rehomed
- 16 no-op preset token lines deleted; new tests forbid tokens equal to
  library defaults and 950 stops lighter than 50
- keepPanels shared from utils/theme.ts; plugin imports the storage-key
  constants; black-as-primary FOUC script gets tagPriority
- THEME_STUDIO_PLAN.md removed from the PR

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 THEME_STUDIO_PLAN.md                          | 328 ----------
 docs/app/components/chat/Chat.vue             |   2 +-
 docs/app/components/playground/Playground.vue |   4 +-
 .../theme-studio/ThemeStudioColorSection.vue  |   2 +-
 .../theme-studio/ThemeStudioControls.vue      | 562 +++++++-----------
 .../theme-studio/ThemeStudioCurveEditor.vue   |   3 +
 .../theme-studio/ThemeStudioPaletteEditor.vue |  66 +-
 .../theme-studio/ThemeStudioPresetMenu.vue    |  23 +-
 .../theme-studio/ThemeStudioSection.vue       |   1 -
 .../theme-studio/ThemeStudioSliderRow.vue     |   4 +-
 .../theme-studio/ThemeStudioViewA11y.vue      |   9 +-
 .../theme-studio/ThemeStudioViewDashboard.vue |   2 +-
 .../theme-studio/ThemeStudioViewLanding.vue   |   2 +-
 .../theme-studio/ThemeStudioViewSaas.vue      |   8 +-
 docs/app/composables/useTheme.ts              |  22 +-
 docs/app/composables/useThemeStudio.ts        |   9 +-
 docs/app/pages/theme.vue                      |  30 +-
 docs/app/plugins/theme.ts                     |   9 +-
 docs/app/utils/theme-engine/import.ts         |  41 +-
 docs/app/utils/theme-engine/oklch.ts          |   4 +-
 docs/app/utils/theme-engine/presets.ts        |  81 +--
 docs/app/utils/theme-engine/styles.ts         |   1 -
 docs/app/utils/theme.ts                       |  16 +-
 docs/server/api/ai.post.ts                    |   5 +-
 test/utils/theme-engine.spec.ts               |  38 +-
 test/utils/theme-import.spec.ts               |  41 ++
 26 files changed, 494 insertions(+), 819 deletions(-)
 delete mode 100644 THEME_STUDIO_PLAN.md

diff --git a/THEME_STUDIO_PLAN.md b/THEME_STUDIO_PLAN.md
deleted file mode 100644
index 6b74653660..0000000000
--- a/THEME_STUDIO_PLAN.md
+++ /dev/null
@@ -1,328 +0,0 @@
-# Nuxt UI Theme Studio — Master Plan
-
-> Working plan for the "ultimate theme customizer" contribution, targeting Nuxt UI v5.
-> Status: draft for discussion.
-
-## 1. Vision
-
-Bootstrap sites "all looked the same" only when people shipped the default CSS. The fix was
-never more components — it was making deep customization *approachable*. Nuxt UI has the
-best raw material of any component system today: a clean chain of Tailwind palette → color
-aliases → semantic CSS variables → component variants, split across CSS and `app.config`.
-What it lacks is a rich theming ecosystem and a tool that exposes that chain.
-
-The Theme Studio is a standalone page (main header navigation, not part of the docs) that:
-
-- lets you go from "pick a primary color" to "edit the OKLCH curve of your neutral palette"
-  on one continuous slope of drill-down, Blender-style;
-- shows *where every value comes from* (inherited vs. overridden), Bootstrap-variable-chain-style;
-- ships opinionated presets (Shadcn, Neo-brutalist, Anthropic, Spotify, …) and a taste-constrained shuffle;
-- exports the **minimal** `main.css` + `app.config.ts` diff — only what you changed;
-- previews live on a component bento and on template-scale pages (SaaS, Chat, Dashboard).
-
-North star: someone who has never opened the theming docs produces a theme that doesn't
-look like default Nuxt UI in 60 seconds — and someone who cares can drill all the way down
-to a single semantic token or component slot without leaving the page.
-
-## 2. Ground truth: how Nuxt UI theming works today (v4)
-
-The studio must be a *lens over the real system*, not a parallel one. The real system is a
-five-level inheritance chain:
-
-| Level | What | Where | Mechanism |
-|---|---|---|---|
-| L0 | Palette: `--color-{name}-{50..950}` | Tailwind `@theme` / CSS | Tailwind defaults, overridable in `@theme static` |
-| L1 | Alias shades: `--ui-color-{alias}-{shade}` | `src/runtime/plugins/colors.ts` | Generated at runtime from `app.config ui.colors` (`primary`, `secondary`, `success`, `info`, `warning`, `error`, `neutral`), each shade falls back through `var(--color-{value}-{shade}, hex)` |
-| L2 | Semantic tokens: `--ui-text[-dimmed/muted/toned/highlighted/inverted]`, `--ui-bg[-muted/elevated/accented/inverted]`, `--ui-border[-muted/accented/inverted]`, `--ui-primary` (=shade 500 light / 400 dark), `--ui-radius`, `--font-sans` | `src/runtime/index.css` (`:root` / `.dark`) | Plain CSS custom properties referencing L1 |
-| L3 | Component themes: slots / variants / compoundVariants | `src/theme/*.ts` via `tv()` | Tailwind classes referencing L2 utilities (`text-muted`, `bg-elevated`, `rounded-md`…) |
-| L4 | Defaults & overrides: `defaultVariants` + `app.config ui.<component>` | components spread `appConfig.ui?.<name>` into their `tv()` options | Runtime-mergeable, including `defaultVariants` per component |
-
-Facts that matter for the design (verified in source):
-
-- **Per-component `defaultVariants` are already overridable at runtime** via
-  `app.config ui.button.defaultVariants` etc. (`Button.vue:95-108` spreads `appConfig.ui?.button`
-  into the `tv()` options).
-- **Global `defaultVariants`** exist only as a *build-time* module option and only for
-  `color` and `size` (`src/module.ts:67`) — there is no global "default variant = subtle"
-  switch. Gap → §7.
-- The docs site already live-applies themes with zero flash: `useHead` inline `<style>`
-  blocks + direct `app.config` mutation + localStorage persistence + FOUC inline scripts
-  (`docs/app/composables/useTheme.ts`, `docs/app/plugins/theme.ts`). There is also a
-  sanitized `applyThemeSettings()` path used by the AI theme feature — the studio must
-  stay compatible with (and eventually power) it.
-- The current popover exports are already **minimal-diff** (compare against defaults, emit
-  only overrides, for both Nuxt `app.config.ts` and Vue `vite.config.ts`). This philosophy
-  scales up; the mechanism (ad-hoc conditionals) doesn't — it becomes a generic
-  diff-against-defaults engine (§4).
-- The docs site already has custom neutral palettes (`taupe`, `mauve`, `mist`, `olive`)
-  injected as `--color-*-{shade}` hex values — exactly the pattern the palette editor
-  generalizes.
-
-## 3. Core concept: the Theme Document and its resolver
-
-Everything in the studio is a view over one serializable, versioned **Theme Document**.
-The rule that makes inheritance, drill-down, shuffle, presets, share-links and minimal
-export all fall out of one design:
-
-> **A ThemeDoc stores only explicit overrides. Everything else is `inherit`.**
-
-```ts
-interface ThemeDoc {
-  version: 1
-  meta?: { name?: string, base?: string /* preset id this was forked from */, seed?: number }
-
-  /** L0 — custom or tweaked palettes. Generator params kept so palettes stay editable. */
-  palettes?: Record<string, {
-    /** explicit shades win over generated ones */
-    shades?: Partial<Record<Shade, string>>
-    /** OKLCH curve generator params (see §5.2) */
-    curve?: { anchor?: string, lightness?: CurveParams, chroma?: CurveParams, hue?: CurveParams }
-    /** when tweaking an existing tailwind palette rather than creating one */
-    extends?: string
-  }>
-
-  /** L1 — alias → palette name ('indigo', 'neutral', or a key of `palettes`) */
-  colors?: Partial<Record<'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral', string>>
-
-  /** L2 — semantic token overrides per mode; values are `var(--ui-color-…)` refs or raw colors */
-  tokens?: { light?: Record<string, string>, dark?: Record<string, string> }
-  radius?: number
-  font?: { sans?: string /* future: mono, heading */ }
-  icons?: string
-
-  /** L4 — global defaults, expanded to per-component app.config on export until core supports it */
-  defaultVariants?: { color?: string, size?: string, variant?: string }
-
-  /** L4 — per-component overrides: defaultVariants + slot/variant class overrides */
-  components?: Record<string, Record<string, unknown>>
-}
-```
-
-Around it, a small pure-TypeScript **theme engine** (no Vue imports, fully unit-testable):
-
-- `resolve(doc): ResolvedTheme` — walks the chain and computes every effective value **with
-  provenance**: `{ value, source: 'default' | 'override', chain: ['--ui-border', '--ui-color-neutral-200', '--color-slate-200', '#e2e8f0'] }`.
-  Provenance is what powers the Blender-style UI: overridden controls get a highlight dot,
-  every control has "reset to inherited", and hovering a value shows its inheritance
-  breadcrumb.
-- `materializePalette(def): Record<Shade, string>` — runs the OKLCH curve generator.
-- `diff(doc): { css: string, appConfig: object }` — the export generators. Because the doc
-  *is* the diff, minimal export is free: serialize what's there, route each override to the
-  right medium (CSS vs config) per the table in §5.6.
-- `applyRuntime(doc)` — thin Vue adapter: mutates `app.config` + feeds `useHead` styles,
-  extending the exact mechanism `useTheme` uses today (same localStorage keys, so the
-  existing popover and the studio stay in sync — the popover becomes the "mini" remote
-  control of the same state, plus an "Open Theme Studio →" link).
-
-## 4. The page
-
-**Placement** — standalone page in the main header navigation (like Templates, Showcase,
-Figma), *not* under `/docs`. Proposed route: `/theme` (bikeshed: `/studio`, `/themes`).
-Added to `desktopLinks` / mobile links in `docs/app/components/header/`. The page gets the
-full viewport; the docs chrome (aside, toc) doesn't apply.
-
-**Layout** — three zones:
-
-```text
-┌──────────────────────────────────────────────────────────────┐
-│ Presets ▾   🎲 Shuffle   [locks]        Share ⧉  Export ⬇  ↺ │
-├───────────────┬──────────────────────────────────────────────┤
-│ CONTROLS      │ PREVIEW                                      │
-│               │  [Bento | SaaS | Dashboard | Chat]  ☀/🌙  ⤢  │
-│ ▸ Essentials  │                                              │
-│ ▸ Palette     │   live components / template page            │
-│ ▸ Tokens      │                                              │
-│ ▸ Components  │                                              │
-└───────────────┴──────────────────────────────────────────────┘
-```
-
-**Control altitudes** (the drill-down slope — each level is optional, defaults flow up):
-
-1. **Essentials** — parity with today's popover: primary, neutral, radius, font, icons,
-   color mode, plus the new *global default variant* control ("solid / soft / subtle /
-   outline everywhere"). One screen, 60-second theme.
-2. **Palette** — the OKLCH curve editor (§5.2). Edit primary's ramp, replace the neutral
-   ramp ("I want my -50s less white"), create named custom palettes.
-3. **Tokens** — the semantic layer: every `--ui-*` variable per light/dark, each shown with
-   its inheritance chain and a picker constrained to sensible values (a shade of an alias,
-   another token, or a raw color). This is where "background color (and edit)" lives beyond
-   the neutral swap: remap `--ui-bg` to `neutral-950` in dark, tint `--ui-bg-muted`, etc.
-4. **Components** — per-component `defaultVariants` and (expert mode) slot class overrides,
-   fed by the same theme metadata the docs' ComponentTheme pages use. Search box + the
-   handful of components people actually restyle (Button, Input, Card, Badge, Alert…)
-   surfaced first.
-
-Every control at every altitude follows the same contract: shows effective value, shows
-override state (dot), offers reset-to-inherited, and edits write into the ThemeDoc — never
-into derived state.
-
-## 5. Feature specs
-
-### 5.1 Primary & background color — choose *and edit*
-
-- Choose: swatch grid of Tailwind palettes (as today) + black-as-primary + custom palettes.
-- Edit: any chosen palette opens in the curve editor pre-loaded with its current values
-  (`extends: 'indigo'` + sparse `shades` overrides → export emits only changed shades).
-- Background = the neutral alias + the `--ui-bg*` token remaps in the Tokens altitude.
-
-### 5.2 OKLCH palette curve editor (the gray-generator, generalized)
-
-Port of the Tailwind gray palette generator concept, on OKLCH (perceptually uniform, what
-Tailwind v4 itself uses):
-
-- Three curves across the 11 shade stops: **Lightness** (monotonic, eased), **Chroma**
-  (bell-ish curve — where does color concentrate), **Hue** (base + drift, for warm-dark /
-  cool-light ramps). Parametric (a few draggable handles per curve), not 33 free numbers —
-  with per-shade nudge overrides on top.
-- **Anchor color**: paste a brand hex, pin it to a stop (e.g. 500), curves fit around it.
-- Rendering: `culori` (tiny, tree-shakeable) for OKLCH↔sRGB + gamut clamping.
-- Guardrails inline: WCAG/APCA contrast badges for the token pairs that matter
-  (`text` on `bg`, `text-inverted` on `primary-500`, `text-muted` on `bg-elevated`…).
-- Output: 11 hex values injected as `--color-{name}-{shade}` (exactly how the docs' custom
-  neutrals work today) — plus the generator params stored in the doc so it stays editable.
-
-### 5.3 Inheritance & drill-down (Blender × Bootstrap)
-
-Covered structurally by §3/§4. UI specifics:
-
-- Overridden values get a colored dot + bold label (Blender's "changed from default" cue).
-- Hover/expand shows the chain: `--ui-border ← --ui-color-neutral-200 ← --color-slate-200 ← #e2e8f0`.
-- "Reset" exists at every granularity: single value, section, altitude, whole theme.
-- Editing an inherited value forks it into an override *at that level only* — e.g. changing
-  `--ui-bg-elevated` doesn't touch the neutral palette; changing the neutral palette flows
-  into every token still inheriting from it.
-
-### 5.4 Default variants
-
-- Global control in Essentials: default `variant` (+ `color`, `size`) for all components
-  that have them. Until core has a global runtime switch (§7), the engine expands it to
-  per-component `defaultVariants` entries in the exported `app.config` (the mechanism that
-  already works today).
-- Per-component refinement in the Components altitude ("Buttons solid, everything else subtle").
-
-### 5.5 Presets & shuffle
-
-Presets are just ThemeDocs shipped as static JSON — each one deliberately exercises a
-different engine capability (they double as milestones and as living tests):
-
-| Preset | What it proves |
-|---|---|
-| **Nuxt UI** (default) | empty doc, everything inherited |
-| **Shadcn** | neutral=zinc, black-as-primary, radius 0.5, tight shadows, global subtle-ish variants |
-| **Neo-brutalist** | radius 0, thick borders, hard offset shadows, bold type → component class overrides + the shadow/border token gap (§7) |
-| **Anthropic** | custom warm neutral ramp (ivory/kraft/book-cloth) + clay primary (~`#CC785C`) → the palette curve editor |
-| **Spotify** | dark-first, custom `#1DB954` ramp, near-black green-tinted neutrals, pill buttons → per-component defaultVariants + token remaps |
-
-- Selecting a preset *replaces* the doc (with confirm if dirty); `meta.base` tracks the fork
-  so "changed vs. preset" provenance still works.
-- **Shuffle** 🎲: seeded, taste-constrained randomness — pick an archetype (preset family),
-  then hue, curve params, radius, font pairing and variant defaults from curated
-  compatibility sets. Per-section **locks** (lock primary, shuffle the rest — coolors.co
-  model). Seed stored in `meta.seed` so a great roll is reproducible and shareable.
-- Later: community preset gallery — presets are JSON, submissions are PRs adding a file.
-
-### 5.6 Export — minimal by construction
-
-Routing table (each ThemeDoc field has exactly one export medium):
-
-| Doc field | `main.css` | `app.config.ts` / `vite.config.ts` |
-|---|---|---|
-| `palettes` | `@theme static { --color-… }` (only changed/generated shades) | — |
-| `colors` (aliases) | — | `ui.colors` |
-| `tokens` | `:root, .light { --ui-… }` / `.dark { … }` | — |
-| `radius`, `font` | `:root { --ui-radius }` / `@theme { --font-sans }` | — |
-| `icons` | — | `ui.icons` |
-| `defaultVariants` (global) | — | expanded per-component (until core support) |
-| `components` | — | `ui.<component>` |
-
-- Both targets rendered for Nuxt and Vue (as today), shown in a side-by-side code panel
-  with copy buttons, not just clipboard-only.
-- **Share URL**: lz-string-compressed doc in the hash (`/theme#<payload>`) → paste a link
-  in a PR/issue/Discord and the recipient sees your exact theme. Also "Copy JSON" for
-  preset submissions and for feeding the AI theme endpoint.
-
-### 5.7 Preview
-
-- **Bento** (default): a dense grid of real components rendered in-page — buttons in all
-  variants, form cluster, card, table, tabs, chat bubbles, pricing card, calendar, toast
-  trigger, auth form. Same Vue app ⇒ live theming is free via the existing head-style +
-  app.config mechanism. Light/dark toggle, and a split view showing both modes at once.
-- **Template previews**: the real templates (SaaS, Chat, Dashboard…) are separate repos
-  deployed cross-origin — CSS injection is impossible there. Instead: lightweight
-  replica pages inside the docs app (`/theme/preview/saas` etc.), rendered in a
-  **same-origin iframe** (isolates full-page layout from the studio chrome) and themed via
-  `BroadcastChannel`/localStorage — the persistence layer already broadcasts. Start with
-  one (SaaS landing), add more as the bento proves insufficient.
-
-## 6. Architecture & repo layout
-
-```text
-docs/app/
-  utils/theme-engine/          # pure TS, unit-tested (vitest)
-    schema.ts                  # ThemeDoc types + zod-ish validation + version migration
-    resolve.ts                 # provenance resolver
-    palette.ts                 # OKLCH curve generator (culori)
-    export-css.ts, export-config.ts
-    presets/*.json
-  composables/useThemeStudio.ts  # doc state, persistence (same keys as useTheme), applyRuntime
-  pages/theme/index.vue          # the studio
-  pages/theme/preview/*.vue      # iframe template replicas
-  components/theme-studio/       # ControlRow, ProvenanceChip, PaletteCurveEditor,
-                                 # TokenGrid, PresetGallery, ShuffleBar, ExportPanel, BentoPreview…
-```
-
-- Engine stays framework-free so it can graduate later into a package
-  (`@nuxt/ui-theme-tools`) usable by a CLI (`npx nuxt-ui-theme`) or third parties — but we
-  don't build the package first. Docs-side proves it.
-- `useTheme` (popover) is refactored to read/write through the same store; the popover
-  shrinks to Essentials + "Open Theme Studio →".
-- The AI theme path (`applyThemeSettings`) migrates to "AI produces a ThemeDoc" — same
-  sanitization boundary, richer output. Optional later phase: a "describe your brand" box
-  in the studio itself.
-
-## 7. Core gaps → small upstream PRs (the contribution trail)
-
-The studio mostly needs zero core changes (it's docs-side). But it exposes real gaps worth
-individual, well-scoped PRs to `nuxt/ui` — nice contribution artifacts on their own:
-
-1. **Global `defaultVariants.variant`** — module option today only covers `color`/`size`
-   and is build-time; propose adding `variant` and/or a runtime `app.config` equivalent.
-2. **Semantic shadow & border-width tokens** (`--ui-shadow-*`, `--ui-border-width`) —
-   without them, neo-brutalism needs per-component class hacks; with them it's two tokens.
-3. **Font pairing** — only `--font-sans` is themed today; a heading/serif slot would
-   unlock editorial presets (Anthropic-style).
-4. **Custom alias names** are build-time (`theme.colors` module option) — fine for the
-   studio (works with the seven standard aliases), documented as a known limit.
-
-Each lands independently; the studio degrades gracefully without them.
-
-## 8. Phased roadmap (each phase ships)
-
-- **P0 — RFC.** Open a discussion/issue on `nuxt/ui`: this document, distilled. Align on
-  naming, the header-nav placement, v5 timing, and appetite for the §7 core PRs before
-  building big. (The team is active; theme tooling touches their website — buy-in first.)
-- **P1 — Engine.** `theme-engine/` with schema, resolver+provenance, palette generator,
-  export generators. Pure TS + tests. Snapshot tests: preset → expected css/config output.
-- **P2 — Studio shell.** `/theme` page + header nav entry, bento preview, Essentials
-  altitude at parity with the popover, shared state with it, reset. *Already useful.*
-- **P3 — Palette editor.** OKLCH curves, anchor color, contrast badges, custom
-  primary/neutral flowing into minimal `@theme` export.
-- **P4 — Drill-down.** Tokens altitude with provenance UI + reset-to-inherited; Components
-  altitude with per-component/global defaultVariants.
-- **P5 — Presets & shuffle.** The five launch presets, seeded shuffle with locks, share
-  URLs, JSON import/export.
-- **P6 — Scale-out.** Template preview iframes, a11y/contrast audit panel, community preset
-  gallery, AI → ThemeDoc integration.
-
-## 9. Risks & open questions
-
-- **v5 timing** — repo is v4.9.0; "v5" scope/schedule unknown. Mitigation: build against
-  v4 branch, version the ThemeDoc schema, keep the engine independent of component
-  internals (it only knows tokens + app.config shapes).
-- **Scope creep** — this plan is deliberately phase-gated; P2 alone already beats the
-  status quo. Resist starting the palette editor before the engine has tests.
-- **Preview drift** — replica template pages need upkeep; start with one, treat the bento
-  as the primary surface.
-- **Upstream acceptance** — worst case the studio lives as a community site first; the
-  engine/package split keeps that door open. P0 exists to avoid finding out late.
-- **Naming** — "Theme Studio"? route `/theme`? To settle in P0.
diff --git a/docs/app/components/chat/Chat.vue b/docs/app/components/chat/Chat.vue
index 29103ab0fc..fc6c147425 100644
--- a/docs/app/components/chat/Chat.vue
+++ b/docs/app/components/chat/Chat.vue
@@ -242,7 +242,7 @@ defineShortcuts({
           icon="i-lucide-rotate-ccw"
           color="neutral"
           variant="ghost"
-          @click="resetTheme"
+          @click="resetTheme()"
         />
       </UTooltip>
 
diff --git a/docs/app/components/playground/Playground.vue b/docs/app/components/playground/Playground.vue
index 92f3a19fab..03682ce7b9 100644
--- a/docs/app/components/playground/Playground.vue
+++ b/docs/app/components/playground/Playground.vue
@@ -27,7 +27,7 @@ import {
   PlaygroundPrompt
 } from '#components'
 
-// Live, interactive component showcase rendered in the landing page hero, laid
+// Live, interactive component showcase — the Theme Studio's grid view, laid
 // out as a masonry of content-sized cards à la shadcn/HeroUI. Each tile is a
 // self-contained, product-like block (header + body + footer action). Overlays
 // are only shown embedded in richer examples (command palette, dashboard
@@ -65,7 +65,7 @@ const columnsClass = 'columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-4'
 </script>
 
 <template>
-  <div class="w-full max-w-7xl mx-auto px-4 sm:px-6">
+  <div class="w-full mx-auto px-4 sm:px-6">
     <div :class="columnsClass">
       <PlaygroundCard v-for="tile in tiles" :key="tile.name" :class="tile.class">
         <component :is="tile.component" />
diff --git a/docs/app/components/theme-studio/ThemeStudioColorSection.vue b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
index 10451181b3..91241e2e09 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
@@ -91,7 +91,7 @@ const openGroups = reactive<Record<string, boolean>>({})
     </template>
 
     <div>
-      <ThemeStudioColorMenu :alias="alias" class="w-full" />
+      <ThemeStudioColorMenu :alias="alias" />
 
       <ThemeStudioPaletteEditor v-model:open="paletteEditor" :alias="alias" />
 
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 724692513e..3264a199c7 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -91,11 +91,45 @@ const headingLetterSpacing = computed({
   set: (value: number) => setHeading({ letterSpacing: value })
 })
 
+// Headings natively lead at ~1.25 (the specimen agrees) — 1.5 here would
+// show a value the page isn't actually rendering.
 const headingLineHeight = computed({
-  get: () => fontPrefs.value.heading?.lineHeight ?? 1.5,
+  get: () => fontPrefs.value.heading?.lineHeight ?? 1.25,
   set: (value: number) => setHeading({ lineHeight: value })
 })
 
+// The Base and Headings rows are the same toolbar over different models —
+// one config each, one template. Base tunes the four tailwind weight steps;
+// headings have a single weight.
+const capitalize = (value: string) => value.charAt(0).toUpperCase() + value.slice(1)
+const fontRows = [{
+  key: 'base',
+  label: 'Base',
+  selectIcon: 'i-lucide-type',
+  items: computed(() => fonts.map(name => ({ label: name, value: name }))),
+  font,
+  weights: WEIGHT_STEPS.map(step => ({ label: capitalize(step), model: weightSteps[step]!, min: 100, max: 900 })),
+  weightsActive: weightsDirty,
+  uppercase: baseUppercase,
+  letterSpacing: baseLetterSpacing,
+  lineHeight: baseLineHeight,
+  lineHeightDefault: 1.5,
+  aria: { weights: 'Font weights', uppercase: 'Uppercase text', spacing: 'Letter spacing', height: 'Line height' }
+}, {
+  key: 'heading',
+  label: 'Headings (Prose)',
+  selectIcon: 'i-lucide-heading',
+  items: headingFontItems,
+  font: headingFont,
+  weights: [{ label: 'Weight', model: headingWeight, min: 100, max: 900 }],
+  weightsActive: computed(() => fontPrefs.value.heading?.weight !== undefined),
+  uppercase: headingUppercase,
+  letterSpacing: headingLetterSpacing,
+  lineHeight: headingLineHeight,
+  lineHeightDefault: 1.25,
+  aria: { weights: 'Heading weight', uppercase: 'Uppercase headings', spacing: 'Heading letter spacing', height: 'Heading line height' }
+}]
+
 /** Live specimen: a heading line in the heading treatment over a body line. */
 const headingSampleStyle = computed(() => ({
   fontFamily: `'${fontPrefs.value.heading?.font ?? font.value}', sans-serif`,
@@ -141,7 +175,13 @@ const shadowStyle = computed({
     if (!shadow || shadow === 'none') return 'inherit'
     return shadow === 'flat' ? 'none' : 'custom'
   },
-  set: (value: any) => setStyle({ shadow: value === 'custom' ? 'hard' : value === 'none' ? 'flat' : 'none' })
+  // Custom starts where the library already is: geometry and weight
+  // approximating the stock shadow-lg, so entering Custom isn't a jump.
+  set: (value: any) => setStyle({
+    shadow: value === 'custom' ? 'hard' : value === 'none' ? 'flat' : 'none',
+    ...(value === 'custom' && style.value.shadowGeometry === undefined ? { shadowGeometry: { x: 0, y: 6, blur: 12, spread: 0 } } : {}),
+    ...(value === 'custom' && style.value.shadowOpacity === undefined ? { shadowOpacity: 10 } : {})
+  })
 })
 
 // Nothing in the library casts an inner shadow, so None and Inherit are
@@ -171,13 +211,6 @@ const innerShadowColor = computed({
   set: (value: any) => setStyle({ innerShadowColor: value })
 })
 
-function innerGeometrySlider(key: 'x' | 'y' | 'blur' | 'spread') {
-  return computed({
-    get: () => ({ ...INNER_SHADOW_GEOMETRY_DEFAULTS, ...style.value.innerShadowGeometry })[key],
-    set: (value: number) => setStyle({ innerShadowGeometry: { ...INNER_SHADOW_GEOMETRY_DEFAULTS, ...style.value.innerShadowGeometry, [key]: value } })
-  })
-}
-
 const borderOptions = [
   { label: 'Inherit', value: 'default' },
   { label: 'None', value: 'none' },
@@ -260,22 +293,6 @@ const borderShades = {
   dark: shadeSlider('borderShade', BORDER_SHADE_DEFAULTS, 'dark')
 }
 
-/**
- * Same hydration-adoption problem for every control: SSR renders default
- * state (no localStorage), and persisted slider positions/selections looked
- * stale until touched. One post-mount re-render — only when saved state
- * exists — puts everything on client truth.
- */
-const hydrationKey = ref(0)
-
-onMounted(() => {
-  // ANY persisted theme state means the SSR markup rendered defaults —
-  // fonts, icon sets and palette picks included, not just the studio axes.
-  if (Object.keys(localStorage).some(key => key.startsWith('nuxt-ui-'))) {
-    hydrationKey.value = 1
-  }
-})
-
 const defaultSizeItems = [
   { label: 'Default', value: 'default' },
   { label: 'XS', value: 'xs' },
@@ -366,17 +383,14 @@ const geometryFields = [
   { key: 'spread', label: 'Spread', min: 0, max: 8 }
 ] as const
 
-function geometrySlider(key: 'x' | 'y' | 'blur' | 'spread') {
-  return computed({
-    get: () => ({ ...SHADOW_GEOMETRY_DEFAULTS, ...style.value.shadowGeometry })[key],
-    set: (value: number) => setStyle({ shadowGeometry: { ...SHADOW_GEOMETRY_DEFAULTS, ...style.value.shadowGeometry, [key]: value } })
+function geometrySliders(field: 'shadowGeometry' | 'innerShadowGeometry', defaults: typeof SHADOW_GEOMETRY_DEFAULTS) {
+  const slider = (key: 'x' | 'y' | 'blur' | 'spread') => computed({
+    get: () => ({ ...defaults, ...style.value[field] })[key],
+    set: (value: number) => setStyle({ [field]: { ...defaults, ...style.value[field], [key]: value } })
   })
+  return Object.fromEntries(geometryFields.map(({ key }) => [key, slider(key)])) as Record<'x' | 'y' | 'blur' | 'spread', ReturnType<typeof slider>>
 }
 
-const geometry = Object.fromEntries(geometryFields.map(field => [field.key, geometrySlider(field.key)])) as Record<'x' | 'y' | 'blur' | 'spread', ReturnType<typeof geometrySlider>>
-
-const innerGeometry = Object.fromEntries(geometryFields.map(field => [field.key, innerGeometrySlider(field.key)])) as Record<'x' | 'y' | 'blur' | 'spread', ReturnType<typeof innerGeometrySlider>>
-
 const borderColor = computed({
   get: () => style.value.borderColor || 'default',
   set: (value: any) => setStyle({ borderColor: value })
@@ -386,10 +400,32 @@ const shadowColor = computed({
   get: () => style.value.shadowColor || 'default',
   set: (value: any) => setStyle({ shadowColor: value })
 })
+
+// The two shadow sections are the same panel pointed at different style
+// fields — one config each, one template.
+const shadowSections = [{
+  label: 'Shadow',
+  model: shadowStyle,
+  options: SHADOW_STYLE_OPTIONS,
+  color: shadowColor,
+  shades: shadowShades,
+  opacity: shadowOpacity,
+  geometry: geometrySliders('shadowGeometry', SHADOW_GEOMETRY_DEFAULTS),
+  hard: computed(() => (style.value.shadow || 'none') === 'hard')
+}, {
+  label: 'Inner shadow',
+  model: innerShadowStyle,
+  options: INNER_SHADOW_OPTIONS,
+  color: innerShadowColor,
+  shades: innerShadowShades,
+  opacity: innerShadowOpacity,
+  geometry: geometrySliders('innerShadowGeometry', INNER_SHADOW_GEOMETRY_DEFAULTS),
+  hard: computed(() => style.value.innerShadow === 'hard')
+}]
 </script>
 
 <template>
-  <div :key="hydrationKey">
+  <div>
     <template v-if="group === 'colors'">
       <!-- Sections own their padding so the separators run edge to edge. -->
       <div class="flex flex-col">
@@ -411,123 +447,66 @@ const shadowColor = computed({
 
     <template v-else-if="group === 'style'">
       <div class="flex flex-col">
-        <ThemeStudioSection label="Shadow" class="p-4">
-          <div>
-            <UTabs
-              v-model="shadowStyle"
-              :items="SHADOW_STYLE_OPTIONS"
-              :content="false"
-              size="xs"
-              color="neutral"
-              class="w-full"
-            />
-
-            <div v-if="shadowStyle === 'custom'" class="mt-1.5 flex flex-col gap-2">
-              <USelect
-                v-model="shadowColor"
-                size="sm"
+        <template v-for="section in shadowSections" :key="section.label">
+          <ThemeStudioSection :label="section.label" class="p-4">
+            <div>
+              <UTabs
+                v-model="section.model.value"
+                :items="section.options"
+                :content="false"
+                size="xs"
                 color="neutral"
-                variant="subtle"
-                icon="i-lucide-paint-bucket"
-                :items="shadowColorItems"
                 class="w-full"
               />
 
-              <template v-if="shadowColor === 'shade' || shadowColor === 'primary-shade'">
-                <ThemeStudioSliderRow
-                  v-for="(slider, modeName) in shadowShades"
-                  :key="modeName"
-                  v-model="slider.value"
-                  :mode="modeName"
-                  :chip="shadowColor === 'primary-shade' ? primaryChip : neutralChip"
-                />
-              </template>
-
-              <ThemeStudioSliderRow
-                v-model="shadowOpacity"
-                label="Opacity"
-                :min="5"
-                :max="100"
-                :step="5"
-                unit="%"
-              />
-
-              <template v-if="(style.shadow || 'none') === 'hard'">
-                <ThemeStudioSliderRow
-                  v-for="field in geometryFields"
-                  :key="field.key"
-                  v-model="geometry[field.key].value"
-                  :label="field.label"
-                  :min="field.min"
-                  :max="field.max"
-                  :step="1"
-                  unit="px"
+              <div v-if="section.model.value === 'custom'" class="mt-1.5 flex flex-col gap-2">
+                <USelect
+                  v-model="section.color.value"
+                  size="sm"
+                  color="neutral"
+                  variant="subtle"
+                  icon="i-lucide-paint-bucket"
+                  :items="shadowColorItems"
+                  class="w-full"
                 />
-              </template>
-            </div>
-          </div>
-        </ThemeStudioSection>
-
-        <USeparator />
 
-        <ThemeStudioSection label="Inner shadow" class="p-4">
-          <div>
-            <UTabs
-              v-model="innerShadowStyle"
-              :items="INNER_SHADOW_OPTIONS"
-              :content="false"
-              size="xs"
-              color="neutral"
-              class="w-full"
-            />
-
-            <div v-if="innerShadowStyle === 'custom'" class="mt-1.5 flex flex-col gap-2">
-              <USelect
-                v-model="innerShadowColor"
-                size="sm"
-                color="neutral"
-                variant="subtle"
-                icon="i-lucide-paint-bucket"
-                :items="shadowColorItems"
-                class="w-full"
-              />
+                <template v-if="section.color.value === 'shade' || section.color.value === 'primary-shade'">
+                  <ThemeStudioSliderRow
+                    v-for="(slider, modeName) in section.shades"
+                    :key="modeName"
+                    v-model="slider.value"
+                    :mode="modeName"
+                    :chip="section.color.value === 'primary-shade' ? primaryChip : neutralChip"
+                  />
+                </template>
 
-              <template v-if="innerShadowColor === 'shade' || innerShadowColor === 'primary-shade'">
                 <ThemeStudioSliderRow
-                  v-for="(slider, modeName) in innerShadowShades"
-                  :key="modeName"
-                  v-model="slider.value"
-                  :mode="modeName"
-                  :chip="innerShadowColor === 'primary-shade' ? primaryChip : neutralChip"
+                  v-model="section.opacity.value"
+                  label="Opacity"
+                  :min="5"
+                  :max="100"
+                  :step="5"
+                  unit="%"
                 />
-              </template>
 
-              <ThemeStudioSliderRow
-                v-model="innerShadowOpacity"
-                label="Opacity"
-                :min="5"
-                :max="100"
-                :step="5"
-                unit="%"
-              />
-
-              <template v-if="style.innerShadow === 'hard'">
-                <ThemeStudioSliderRow
-                  v-for="field in geometryFields"
-                  :key="field.key"
-                  v-model="innerGeometry[field.key].value"
-                  :label="field.label"
-                  :min="field.min"
-                  :max="field.max"
-                  :step="1"
-                  unit="px"
-                />
-              </template>
+                <template v-if="section.hard.value">
+                  <ThemeStudioSliderRow
+                    v-for="field in geometryFields"
+                    :key="field.key"
+                    v-model="section.geometry[field.key].value"
+                    :label="field.label"
+                    :min="field.min"
+                    :max="field.max"
+                    :step="1"
+                    unit="px"
+                  />
+                </template>
+              </div>
             </div>
-          </div>
-        </ThemeStudioSection>
+          </ThemeStudioSection>
 
-        <USeparator />
+          <USeparator />
+        </template>
 
         <ThemeStudioSection label="Borders" class="p-4">
           <div>
@@ -597,224 +576,119 @@ const shadowColor = computed({
               </p>
             </div>
 
-            <span class="text-xs font-semibold text-muted select-none">Base</span>
-
-            <div class="flex items-center gap-1.5">
-              <USelect
-                v-model="font"
-                size="sm"
-                color="neutral"
-                variant="subtle"
-                icon="i-lucide-type"
-                :items="fonts"
-                class="flex-1 min-w-0"
-              >
-                <template #item-label="{ item }">
-                  <span :style="{ fontFamily: `'${item}', sans-serif` }">{{ item }}</span>
-                </template>
-              </USelect>
-
-              <UFieldGroup size="sm">
-                <UPopover :content="{ align: 'start' }">
-                  <UTooltip text="Weights">
-                    <UButton
-                      icon="i-lucide-bold"
-                      color="neutral"
-                      variant="subtle"
-                      :active="weightsDirty"
-                      active-color="primary"
-                      active-variant="subtle"
-                      aria-label="Font weights"
-                    />
-                  </UTooltip>
-
-                  <template #content>
-                    <div class="w-64 p-3 flex flex-col gap-1.5">
-                      <ThemeStudioSliderRow
-                        v-for="step in WEIGHT_STEPS"
-                        :key="step"
-                        v-model="weightSteps[step].value"
-                        :label="step.charAt(0).toUpperCase() + step.slice(1)"
-                        :min="100"
-                        :max="900"
-                        :step="25"
-                      />
-                    </div>
-                  </template>
-                </UPopover>
-
-                <UTooltip text="Uppercase">
-                  <UButton
-                    icon="i-lucide-case-upper"
-                    color="neutral"
-                    variant="subtle"
-                    :active="baseUppercase"
-                    active-color="primary"
-                    active-variant="subtle"
-                    aria-label="Uppercase text"
-                    @click="baseUppercase = !baseUppercase"
-                  />
-                </UTooltip>
-                <UPopover :content="{ align: 'start' }">
-                  <UTooltip text="Letter spacing">
-                    <UButton
-                      icon="i-lucide-move-horizontal"
-                      color="neutral"
-                      variant="subtle"
-                      :active="baseLetterSpacing !== 0"
-                      active-color="primary"
-                      active-variant="subtle"
-                      aria-label="Letter spacing"
-                    />
-                  </UTooltip>
+            <template v-for="row in fontRows" :key="row.key">
+              <span class="text-xs font-semibold text-muted select-none" :class="row.key === 'heading' && 'pt-1'">{{ row.label }}</span>
 
-                  <template #content>
-                    <ThemeStudioSliderRow
-                      v-model="baseLetterSpacing"
-                      label="Spacing"
-                      :min="-0.05"
-                      :max="0.25"
-                      :step="0.005"
-                      unit="em"
-                      class="w-64 p-3"
-                    />
-                  </template>
-                </UPopover>
-
-                <UPopover :content="{ align: 'start' }">
-                  <UTooltip text="Line height">
-                    <UButton
-                      icon="i-lucide-move-vertical"
-                      color="neutral"
-                      variant="subtle"
-                      :active="baseLineHeight !== 1.5"
-                      active-color="primary"
-                      active-variant="subtle"
-                      aria-label="Line height"
-                    />
-                  </UTooltip>
-
-                  <template #content>
-                    <ThemeStudioSliderRow
-                      v-model="baseLineHeight"
-                      label="Height"
-                      :min="1"
-                      :max="2"
-                      :step="0.05"
-                      class="w-64 p-3"
-                    />
+              <div class="flex items-center gap-1.5">
+                <USelect
+                  v-model="row.font.value"
+                  size="sm"
+                  color="neutral"
+                  variant="subtle"
+                  :icon="row.selectIcon"
+                  :items="row.items.value"
+                  class="flex-1 min-w-0"
+                >
+                  <template #item-label="{ item }">
+                    <span :style="item.value === 'inherit' ? undefined : { fontFamily: `'${item.value}', sans-serif` }">{{ item.label }}</span>
                   </template>
-                </UPopover>
-              </UFieldGroup>
-            </div>
-
-            <span class="text-xs font-semibold text-muted select-none pt-1">Headings (Prose)</span>
-
-            <div class="flex items-center gap-1.5">
-              <USelect
-                v-model="headingFont"
-                size="sm"
-                color="neutral"
-                variant="subtle"
-                icon="i-lucide-heading"
-                :items="headingFontItems"
-                class="flex-1 min-w-0"
-              >
-                <template #item-label="{ item }">
-                  <span :style="item.value === 'inherit' ? undefined : { fontFamily: `'${item.value}', sans-serif` }">{{ item.label }}</span>
-                </template>
-              </USelect>
-
-              <UFieldGroup size="sm">
-                <UPopover :content="{ align: 'start' }">
-                  <UTooltip text="Weight">
-                    <UButton
-                      icon="i-lucide-bold"
-                      color="neutral"
-                      variant="subtle"
-                      :active="fontPrefs.heading?.weight !== undefined"
-                      active-color="primary"
-                      active-variant="subtle"
-                      aria-label="Heading weight"
-                    />
-                  </UTooltip>
+                </USelect>
 
-                  <template #content>
-                    <ThemeStudioSliderRow
-                      v-model="headingWeight"
-                      label="Weight"
-                      :min="100"
-                      :max="900"
-                      :step="25"
-                      class="w-64 p-3"
-                    />
-                  </template>
-                </UPopover>
-
-                <UTooltip text="Uppercase">
-                  <UButton
-                    icon="i-lucide-case-upper"
-                    color="neutral"
-                    variant="subtle"
-                    :active="headingUppercase"
-                    active-color="primary"
-                    active-variant="subtle"
-                    aria-label="Uppercase headings"
-                    @click="headingUppercase = !headingUppercase"
-                  />
-                </UTooltip>
-                <UPopover :content="{ align: 'start' }">
-                  <UTooltip text="Letter spacing">
+                <UFieldGroup size="sm">
+                  <UPopover :content="{ align: 'start' }">
+                    <UTooltip :text="row.weights.length > 1 ? 'Weights' : 'Weight'">
+                      <UButton
+                        icon="i-lucide-bold"
+                        color="neutral"
+                        variant="subtle"
+                        :active="row.weightsActive.value"
+                        active-color="primary"
+                        active-variant="subtle"
+                        :aria-label="row.aria.weights"
+                      />
+                    </UTooltip>
+
+                    <template #content>
+                      <div class="w-64 p-3 flex flex-col gap-1.5">
+                        <ThemeStudioSliderRow
+                          v-for="weight in row.weights"
+                          :key="weight.label"
+                          v-model="weight.model.value"
+                          :label="weight.label"
+                          :min="weight.min"
+                          :max="weight.max"
+                          :step="25"
+                        />
+                      </div>
+                    </template>
+                  </UPopover>
+
+                  <UTooltip text="Uppercase">
                     <UButton
-                      icon="i-lucide-move-horizontal"
+                      icon="i-lucide-case-upper"
                       color="neutral"
                       variant="subtle"
-                      :active="headingLetterSpacing !== 0"
+                      :active="row.uppercase.value"
                       active-color="primary"
                       active-variant="subtle"
-                      aria-label="Heading letter spacing"
+                      :aria-label="row.aria.uppercase"
+                      @click="row.uppercase.value = !row.uppercase.value"
                     />
                   </UTooltip>
 
-                  <template #content>
-                    <ThemeStudioSliderRow
-                      v-model="headingLetterSpacing"
-                      label="Spacing"
-                      :min="-0.05"
-                      :max="0.25"
-                      :step="0.005"
-                      unit="em"
-                      class="w-64 p-3"
-                    />
-                  </template>
-                </UPopover>
+                  <UPopover :content="{ align: 'start' }">
+                    <UTooltip text="Letter spacing">
+                      <UButton
+                        icon="i-lucide-move-horizontal"
+                        color="neutral"
+                        variant="subtle"
+                        :active="row.letterSpacing.value !== 0"
+                        active-color="primary"
+                        active-variant="subtle"
+                        :aria-label="row.aria.spacing"
+                      />
+                    </UTooltip>
 
-                <UPopover :content="{ align: 'start' }">
-                  <UTooltip text="Line height">
-                    <UButton
-                      icon="i-lucide-move-vertical"
-                      color="neutral"
-                      variant="subtle"
-                      :active="headingLineHeight !== 1.5"
-                      active-color="primary"
-                      active-variant="subtle"
-                      aria-label="Heading line height"
-                    />
-                  </UTooltip>
+                    <template #content>
+                      <ThemeStudioSliderRow
+                        v-model="row.letterSpacing.value"
+                        label="Spacing"
+                        :min="-0.05"
+                        :max="0.25"
+                        :step="0.005"
+                        unit="em"
+                        class="w-64 p-3"
+                      />
+                    </template>
+                  </UPopover>
+
+                  <UPopover :content="{ align: 'start' }">
+                    <UTooltip text="Line height">
+                      <UButton
+                        icon="i-lucide-move-vertical"
+                        color="neutral"
+                        variant="subtle"
+                        :active="row.lineHeight.value !== row.lineHeightDefault"
+                        active-color="primary"
+                        active-variant="subtle"
+                        :aria-label="row.aria.height"
+                      />
+                    </UTooltip>
 
-                  <template #content>
-                    <ThemeStudioSliderRow
-                      v-model="headingLineHeight"
-                      label="Height"
-                      :min="1"
-                      :max="2"
-                      :step="0.05"
-                      class="w-64 p-3"
-                    />
-                  </template>
-                </UPopover>
-              </UFieldGroup>
-            </div>
+                    <template #content>
+                      <ThemeStudioSliderRow
+                        v-model="row.lineHeight.value"
+                        label="Height"
+                        :min="1"
+                        :max="2"
+                        :step="0.05"
+                        class="w-64 p-3"
+                      />
+                    </template>
+                  </UPopover>
+                </UFieldGroup>
+              </div>
+            </template>
           </div>
         </ThemeStudioSection>
 
diff --git a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
index e4acdca30f..3c739495b5 100644
--- a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
@@ -96,6 +96,9 @@ function svgPoint(event: PointerEvent): { x: number, y: number } {
 }
 
 function onPointerDown(event: PointerEvent) {
+  // right/middle clicks must not start a drag (the context menu would
+  // strand the page-wide dragging state)
+  if (event.button !== 0) return
   const point = svgPoint(event)
   const c = curve.value
 
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 795d1faff4..575a94f1cf 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -76,18 +76,39 @@ function copySwatch(info: { shade: number, oklch: string }) {
 onUnmounted(() => clearTimeout(copiedTimeout))
 
 /**
- * A pinned swatch tooltip stays open for reading/copying at leisure. Reka
- * locks controlled-vs-uncontrolled at mount, so the tooltips are always
- * controlled: hover intent lands in `hoveredTips` and a pin overrides it.
+ * Swatch details live in a popover, not a tooltip: the copy/pin buttons
+ * inside must be keyboard-reachable, and popover content can take focus.
+ * Hover previews it (hand-rolled, with a grace gap so the pointer can cross
+ * onto the content); click or Enter pins it open — one pin at a time.
  */
 const pinnedShade = ref<number>()
-const hoveredTips = reactive<Partial<Record<number, boolean>>>({})
+const hoveredShade = ref<number>()
+let hoverLeaveTimeout: ReturnType<typeof setTimeout> | undefined
+
+function onSwatchEnter(shade: number) {
+  clearTimeout(hoverLeaveTimeout)
+  hoveredShade.value = shade
+}
+
+function onSwatchLeave() {
+  clearTimeout(hoverLeaveTimeout)
+  hoverLeaveTimeout = setTimeout(() => (hoveredShade.value = undefined), 150)
+}
+
+onUnmounted(() => clearTimeout(hoverLeaveTimeout))
 
 /** One pin at a time — pinning a swatch unpins any other. */
 function togglePin(shade: number) {
   pinnedShade.value = pinnedShade.value === shade ? undefined : shade
 }
 
+/** Reka-side dismissals (Esc, outside click) clear pin and hover both. */
+function onSwatchOpenUpdate(shade: number, open: boolean) {
+  if (open) return
+  if (pinnedShade.value === shade) pinnedShade.value = undefined
+  if (hoveredShade.value === shade) hoveredShade.value = undefined
+}
+
 /**
  * Every axis is a fixed 1:1 window — the full physical range fits the
  * canvas, so dragging never pans or rescales under the pointer. Hue params
@@ -238,8 +259,12 @@ watch(() => paletteParams.value[props.alias], (value) => {
 })
 
 // While inactive, follow the selected palette so opening the editor starts
-// from the curves of the color already on screen.
+// from the curves of the color already on screen. Pin/hover tooltip state
+// resets with it: the swatch strip unmounts with the fold, so a stale pin
+// would pop a tooltip for a palette the user never pinned.
 watch([() => (appConfig.ui.colors as Record<string, string>)[props.alias], open], ([, isOpen]) => {
+  pinnedShade.value = undefined
+  hoveredShade.value = undefined
   if (isOpen && !active.value) {
     seedFromCurrent()
   }
@@ -296,14 +321,21 @@ function resetEffects() {
           />
 
           <div class="flex rounded-b-sm overflow-hidden ring ring-default">
-            <UTooltip
+            <UPopover
               v-for="info in swatchInfo"
               :key="info.shade"
-              disable-closing-trigger
-              :open="pinnedShade === info.shade || (hoveredTips[info.shade] ?? false)"
-              :content="{ side: 'right' }"
-              :ui="{ content: 'h-auto' }"
-              @update:open="hoveredTips[info.shade] = $event"
+              :open="pinnedShade === info.shade || hoveredShade === info.shade"
+              :content="{
+                side: 'right',
+                // hover-opened popovers must not steal focus; a pinned one
+                // takes it so Tab lands on the copy/pin buttons
+                onOpenAutoFocus: pinnedShade === info.shade ? undefined : (event: Event) => event.preventDefault(),
+                // pinning means pinned: clicks elsewhere (curve drags,
+                // sliders) must not dismiss — only Esc, unpin or another pin
+                onInteractOutside: pinnedShade === info.shade ? (event: Event) => event.preventDefault() : undefined,
+                onFocusOutside: pinnedShade === info.shade ? (event: Event) => event.preventDefault() : undefined
+              }"
+              @update:open="onSwatchOpenUpdate(info.shade, $event)"
             >
               <button
                 type="button"
@@ -312,10 +344,16 @@ function resetEffects() {
                 :aria-label="`Shade ${info.shade}: ${info.oklch}`"
                 :aria-pressed="pinnedShade === info.shade"
                 @click="togglePin(info.shade)"
+                @mouseenter="onSwatchEnter(info.shade)"
+                @mouseleave="onSwatchLeave"
               />
 
               <template #content>
-                <div class="px-1 py-1 text-xs font-mono flex flex-col gap-0.5">
+                <div
+                  class="px-2 py-1.5 text-xs font-mono flex flex-col gap-0.5"
+                  @mouseenter="onSwatchEnter(info.shade)"
+                  @mouseleave="onSwatchLeave"
+                >
                   <div class="flex items-center justify-between gap-3">
                     <span class="font-semibold">{{ info.shade }}</span>
 
@@ -344,7 +382,7 @@ function resetEffects() {
                           :active="pinnedShade === info.shade"
                           :ui="{ leadingIcon: 'size-3' }"
                           :icon="pinnedShade === info.shade ? 'i-lucide-pin-off' : 'i-lucide-pin'"
-                          :aria-label="pinnedShade === info.shade ? 'Unpin tooltip' : 'Pin tooltip open'"
+                          :aria-label="pinnedShade === info.shade ? 'Unpin details' : 'Pin details open'"
                           @click="togglePin(info.shade)"
                         />
                       </UTooltip>
@@ -354,7 +392,7 @@ function resetEffects() {
                   <span class="text-muted">{{ info.hex }} · {{ info.rgb }}</span>
                 </div>
               </template>
-            </UTooltip>
+            </UPopover>
           </div>
         </div>
 
diff --git a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
index d3363a13b5..35194bc096 100644
--- a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
@@ -3,9 +3,15 @@ import { resolveAlias, resolveShade } from '../../utils/theme-engine'
 import type { ThemeDoc } from '../../utils/theme-engine'
 
 /** The presets dropdown (with per-preset color swatches) plus the shuffle die. */
-defineProps<{
+const props = defineProps<{
   /** Button size — the toolbar uses the default, the header picker slims down. */
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  /**
+   * The studio toolbar opts out of the modal overlay so its color-mode
+   * switch stays clickable (with keepPanels holding the menu open); other
+   * hosts keep the stock dismiss behavior.
+   */
+  keepPanels?: boolean
 }>()
 
 const { presets, activePreset, applyPreset, shuffle } = useThemeStudio()
@@ -37,15 +43,8 @@ const presetItems = computed(() => presets.map(preset => ({
   onSelect: () => applyPreset(preset)
 })))
 
-/**
- * Toolbar chrome marked data-keep-panels (the color-mode switch) must stay
- * clickable and non-dismissing while the menu is open — hence non-modal.
- */
-function keepPanels(event: Event) {
-  if ((event.target as HTMLElement | null)?.closest?.('[data-keep-panels]')) {
-    event.preventDefault()
-  }
-}
+// the boolean prop shadows the util in template scope — alias the handler
+const onKeepPanels = keepPanels
 
 /** The applied preset's name; 'Custom' once edits diverge from it. */
 const presetLabel = computed(() => {
@@ -61,8 +60,8 @@ const presetLabel = computed(() => {
     <UDropdownMenu
       v-model:open="open"
       :items="presetItems"
-      :modal="false"
-      :content="{ align: 'start', onInteractOutside: keepPanels }"
+      :modal="!props.keepPanels"
+      :content="props.keepPanels ? { align: 'start', onInteractOutside: onKeepPanels } : { align: 'start' }"
       class="flex-1 min-w-0"
       :ui="{ itemTrailing: 'self-center', content: 'w-(--reka-dropdown-menu-trigger-width)' }"
     >
diff --git a/docs/app/components/theme-studio/ThemeStudioSection.vue b/docs/app/components/theme-studio/ThemeStudioSection.vue
index c535946175..54baffede8 100644
--- a/docs/app/components/theme-studio/ThemeStudioSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSection.vue
@@ -36,7 +36,6 @@ const open = ref(props.defaultOpen)
         variant="ghost"
         size="sm"
         block
-        active-variant="subtle"
         class="justify-start flex-1"
       />
 
diff --git a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
index 7667b38117..13af689763 100644
--- a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
@@ -67,9 +67,9 @@ const display = computed(() => shade.value
     <template v-if="icon || shade" #label>
       <UIcon v-if="icon" :name="icon" class="size-3.5 text-muted" />
 
-      <span v-else class="flex items-center gap-1.5 w-full grow">
+      <span v-else class="flex items-center gap-1.5 w-full">
         <UIcon :name="mode === 'light' ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3.5 text-muted shrink-0" />
-        <span class="h-3 w-6 grow rounded-sm bg-(--slider-color) ring ring-1 ring-(--slider-contrast) me-px" />
+        <span class="h-3 w-6 grow rounded-sm bg-(--slider-color) ring ring-(--slider-contrast) me-px" />
       </span>
     </template>
 
diff --git a/docs/app/components/theme-studio/ThemeStudioViewA11y.vue b/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
index 39b64a2f2b..3535b097b9 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
@@ -31,14 +31,7 @@ const BACKGROUNDS = [
 ]
 
 /** Solid surfaces (buttons, badges) render --ui-text-inverted on the alias. */
-const SOLIDS = [
-  { token: '--ui-primary', label: 'Primary' },
-  { token: '--ui-secondary', label: 'Secondary' },
-  { token: '--ui-success', label: 'Success' },
-  { token: '--ui-info', label: 'Info' },
-  { token: '--ui-warning', label: 'Warning' },
-  { token: '--ui-error', label: 'Error' }
-]
+const SOLIDS = FOREGROUNDS.slice(5)
 
 interface Cell {
   fg: string
diff --git a/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue b/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
index e7a4320d99..37756b742d 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
@@ -272,7 +272,7 @@ const salesColumns: TableColumn<Sale>[] = [{
              two-up until xl, and the joined-border look only when four fit. -->
         <!-- shrink-0 everywhere: the panel body is a scrollable flex column,
              and a shrinking child gets crushed into its own overflow-hidden -->
-        <UPageGrid class="shrink-0 grid-cols-2 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4 gap-4 xl:gap-[var(--studio-border-width,1px)]">
+        <UPageGrid class="shrink-0 grid-cols-2 xl:grid-cols-4 gap-4 xl:gap-[var(--studio-border-width,1px)]">
           <UPageCard
             v-for="stat in stats"
             :key="stat.title"
diff --git a/docs/app/components/theme-studio/ThemeStudioViewLanding.vue b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
index eec007d192..4a3041cd2d 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
@@ -159,7 +159,7 @@ const vReveal = {
             label="v2.0 — Now with predictive alerting"
             color="neutral"
             variant="soft"
-            class="rounded-full px-3 py-1.5 gap-1.5 bg-white/5 backdrop-blur"
+            class="rounded-full px-3 py-1.5 gap-1.5 bg-inverted/5 backdrop-blur"
           >
             <template #leading>
               <UChip inset standalone :ui="{ base: 'animate-pulse ring-0' }" />
diff --git a/docs/app/components/theme-studio/ThemeStudioViewSaas.vue b/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
index 9d8c65a4b0..8f0d509e3b 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
@@ -165,14 +165,18 @@ const email = ref('')
 const heroAppear = ref(false)
 const heroAppeared = ref(false)
 
+// The zero delay pushes the class flip past first paint so the fade-in
+// transition actually runs.
+let appearTimeout: ReturnType<typeof setTimeout> | undefined
 onMounted(() => {
-  setTimeout(() => {
+  appearTimeout = setTimeout(() => {
     heroAppear.value = true
-    setTimeout(() => {
+    appearTimeout = setTimeout(() => {
       heroAppeared.value = true
     }, 1000)
   }, 0)
 })
+onUnmounted(() => clearTimeout(appearTimeout))
 
 // Rising stars behind the CTA, ported from the template's StarsBg.
 interface Star {
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 649aad7195..6f6f7b2be8 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -92,6 +92,11 @@ export function useTheme() {
   const cssVariablesData = useState<{ light?: Record<string, string>, dark?: Record<string, string> }>('nuxt-ui-css-variables', () => readLocalStorage('nuxt-ui-css-variables', {}))
   /** The studio's style axis (it owns writes); read here for currentDoc/export. */
   const stylePrefs = useState<ThemeDoc['style']>(THEME_STATE_KEYS.stylePrefs, () => readLocalStorage(THEME_STORAGE_KEYS.style, {}))
+  // The storage listener doubles as the SAME-TAB sync channel: useTheme is
+  // not a shared composable, so the preset menu's ref and the style
+  // renderer's ref only converge through vueuse's storage events. (It also
+  // half-syncs across tabs — colors/tokens don't follow — a wart, but
+  // disabling it here breaks live updates within one tab.)
   const _radius = useLocalStorage('nuxt-ui-radius', 0.25)
   const _fontSize = useLocalStorage('nuxt-ui-font-size', 16)
   const _spacing = useLocalStorage('nuxt-ui-spacing', 0.25)
@@ -129,7 +134,8 @@ export function useTheme() {
     if (heading.italic) cleanHeading.italic = true
     if (heading.underline) cleanHeading.underline = true
     if (heading.letterSpacing !== undefined && heading.letterSpacing !== 0) cleanHeading.letterSpacing = heading.letterSpacing
-    if (heading.lineHeight !== undefined && heading.lineHeight !== 1.5) cleanHeading.lineHeight = heading.lineHeight
+    // headings natively lead at ~1.25, not the body's 1.5
+    if (heading.lineHeight !== undefined && heading.lineHeight !== 1.25) cleanHeading.lineHeight = heading.lineHeight
     if (Object.keys(cleanHeading).length) clean.heading = cleanHeading
 
     fontPrefs.value = clean
@@ -606,8 +612,10 @@ export function useTheme() {
     if (settings.ui) {
       savedExtras.ui = savedExtras.ui || {}
       for (const [key, value] of Object.entries(settings.ui)) {
-        // Skip `colors` (handled above) and prototype-chain keys that would pollute appConfig.ui when assigned.
-        if (key === 'colors' || key === '__proto__' || key === 'constructor' || key === 'prototype') continue
+        // Skip `colors` (handled above), `icons` (the reload path skips it
+        // too — a partial map would blank icons app-wide) and
+        // prototype-chain keys that would pollute appConfig.ui when assigned.
+        if (key === 'colors' || key === 'icons' || key === '__proto__' || key === 'constructor' || key === 'prototype') continue
 
         savedExtras.ui[key] = defu(value as Record<string, any>, savedExtras.ui[key] || {})
       }
@@ -632,8 +640,12 @@ export function useTheme() {
     }
   }
 
-  function resetTheme() {
-    track('Theme Reset')
+  // applyDoc resets before applying — without the opt-out every preset,
+  // import, shuffle and undo/redo would count as a "Theme Reset".
+  function resetTheme(options: { track?: boolean } = {}) {
+    if (options.track !== false) {
+      track('Theme Reset')
+    }
 
     appConfig.ui.colors.primary = 'green'
     window.localStorage.removeItem('nuxt-ui-primary')
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index a947fead6e..e6a01aa232 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -22,8 +22,6 @@ export function useThemeStudio() {
     }
   }
 
-  /** The studio modal — one instance mounted in the header, openable from anywhere. */
-
   /**
    * Curve params per alias, kept so the editor stays editable across
    * reloads. useState + explicit persistence (not useLocalStorage) so
@@ -276,7 +274,7 @@ export function useThemeStudio() {
 
   /** Replace the current theme with a document: reset, then apply overrides. */
   function applyDoc(doc: ThemeDoc) {
-    theme.resetTheme()
+    theme.resetTheme({ track: false })
     style.value = deriveStyle(doc)
     if (Object.keys(style.value).length) {
       window.localStorage.setItem(THEME_STORAGE_KEYS.style, JSON.stringify(style.value))
@@ -336,6 +334,10 @@ export function useThemeStudio() {
     }
 
     applyDoc(doc)
+    // applyDoc routes neutral through the plain setter — the shuffled
+    // neutral needs the same white-literal remaps selectPalette applies,
+    // or the preview diverges from the export for every tinted ramp.
+    theme.applyThemeSettings({ cssVariables: unownedNeutralRemaps() }, { track: false })
     setActivePreset(undefined)
 
     track('Theme Studio Shuffled')
@@ -362,7 +364,6 @@ export function useThemeStudio() {
     paletteShades,
     selectPalette,
     setPaletteFromCurve,
-    clearCustomPalette,
     applyDoc,
     applyPreset,
     shuffle,
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 488132c13b..41aa2aec7f 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -30,8 +30,9 @@ watch(() => (mounted.value ? JSON.stringify(currentDoc()) : undefined), (snapsho
   captureTimeout = setTimeout(() => capture(snapshot), 350)
 })
 
-// Shift+D flips the mode without a click, so open panels survive the
-// switch (defineShortcuts already defers while an input has focus).
+// ⌘⇧L flips the mode without a click, so open panels survive the switch
+// (the Notion/Obsidian dark-mode convention; a modifier chord also sidesteps
+// WCAG 2.1.4 on character-key shortcuts).
 const colorMode = useColorMode()
 function toggleColorMode() {
   colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
@@ -41,20 +42,9 @@ defineShortcuts({
   meta_z: undo,
   meta_shift_z: redo,
   ctrl_y: redo,
-  shift_d: toggleColorMode
+  meta_shift_l: toggleColorMode
 })
 
-/**
- * Clicking toolbar chrome marked data-keep-panels (the color-mode switch)
- * must not dismiss an open panel — flipping the mode while tuning colors is
- * the studio's core loop.
- */
-function keepPanels(event: Event) {
-  if ((event.target as HTMLElement | null)?.closest?.('[data-keep-panels]')) {
-    event.preventDefault()
-  }
-}
-
 // Esc exits fullscreen — but NOT through defineShortcuts, which
 // preventDefaults every matched key and would stop Reka's dismissable
 // layers from ever seeing Escape (no popover on /theme could close). A
@@ -125,17 +115,17 @@ const shareMode = ref<'import' | 'export'>('export')
       <!-- Structured borders (like /releases and /templates): border-x rails
            run from the header's bottom border to the viewport bottom at the
            container's padding edge — no floating card. -->
-      <div class="flex flex-col w-full" :class="fullscreen ? 'h-dvh' : 'h-[calc(100dvh-var(--ui-header-height))] border-x border-default bg-default'">
+      <div class="flex flex-col w-full bg-default" :class="fullscreen ? 'h-dvh' : 'h-[calc(100dvh-var(--ui-header-height))] border-x border-default'">
         <!-- The preview: the grid scrolls inside it; the app-shell views own
              their height and scroll internally. [contain:paint] puts hard
              paint containment on the views' own scrollers — Chromium won't
              clip nested composited layers (sticky headers, filtered glows)
              by an ancestor's overflow alone. -->
         <div
-          class="flex-1 min-w-0 min-h-0 bg-default [&>*]:[contain:paint]"
+          class="flex-1 min-h-0 [&>*]:[contain:paint]"
           :class="view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden'"
         >
-          <Playground v-if="view === 'grid'" class="py-4" />
+          <Playground v-if="view === 'grid'" class="py-4 sm:py-6" />
           <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
           <ThemeStudioViewChat v-else-if="view === 'chat'" />
           <ThemeStudioViewSaas v-else-if="view === 'saas'" />
@@ -162,7 +152,7 @@ const shareMode = ref<'import' | 'export'>('export')
               toolbarPinned ? 'translate-y-0' : 'translate-y-[calc(100%+6px)] group-hover:translate-y-0 group-focus-within:translate-y-0'
             ] : 'border-t border-default'"
           >
-            <ThemeStudioPresetMenu v-model:open="openPanels.presets" class="w-56 shrink-0" />
+            <ThemeStudioPresetMenu v-model:open="openPanels.presets" keep-panels class="w-56 shrink-0" />
 
             <UPopover
               v-for="settingGroup in settingGroups"
@@ -182,7 +172,7 @@ const shareMode = ref<'import' | 'export'>('export')
               </template>
             </UPopover>
 
-            <UTooltip text="Color mode" :kbds="['shift', 'D']">
+            <UTooltip text="Color mode" :kbds="['meta', 'shift', 'L']">
               <UColorModeSwitch data-keep-panels class="shrink-0" />
             </UTooltip>
 
@@ -232,7 +222,7 @@ const shareMode = ref<'import' | 'export'>('export')
                 color="neutral"
                 variant="subtle"
                 aria-label="Reset theme"
-                @click="resetTheme"
+                @click="resetTheme()"
               />
             </UTooltip>
 
diff --git a/docs/app/plugins/theme.ts b/docs/app/plugins/theme.ts
index dc2eea883b..d13f58bad2 100644
--- a/docs/app/plugins/theme.ts
+++ b/docs/app/plugins/theme.ts
@@ -1,5 +1,6 @@
 import { defu } from 'defu'
 import { themeIcons, cssVariableDefaults } from '../utils/theme'
+import { THEME_STORAGE_KEYS, THEME_STATE_KEYS } from '../utils/theme-keys'
 import { mergeUi } from '../utils/theme-engine'
 
 export default defineNuxtPlugin({
@@ -47,8 +48,8 @@ export default defineNuxtPlugin({
           // ignore malformed localStorage
         }
       }
-      restoreNamedState('nuxt-ui-style', 'nuxt-ui-style-prefs')
-      restoreNamedState('nuxt-ui-palette-params', 'nuxt-ui-palette-params-state')
+      restoreNamedState(THEME_STORAGE_KEYS.style, THEME_STATE_KEYS.stylePrefs)
+      restoreNamedState(THEME_STORAGE_KEYS.paletteParams, THEME_STATE_KEYS.paletteParams)
 
       try {
         const extras = JSON.parse(localStorage.getItem('nuxt-ui-ai-theme') || '{}')
@@ -159,7 +160,9 @@ export default defineNuxtPlugin({
                 bapEl.innerHTML = '';
               }
             }
-          `.replace(/\s+/g, ' ')
+          `.replace(/\s+/g, ' '),
+          type: 'text/javascript',
+          tagPriority: -1
         }, {
           innerHTML: [
             `(function() {`,
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index 0c888de4ed..6a1ce4afce 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -50,7 +50,16 @@ interface ParsedCSS {
 
 function parseCSS(css: string): ParsedCSS {
   const result: ParsedCSS = { palettes: {}, light: {}, dark: {}, skipped: [] }
-  const clean = css.replace(/\/\*[\s\S]*?\*\//g, '')
+  let clean = css.replace(/\/\*[\s\S]*?\*\//g, '')
+
+  // The flat block scanner below can't see nesting, so a conditional
+  // at-rule's inner blocks would import as GLOBAL tokens (a dark-scheme
+  // @media pasted from someone's main.css silently overriding light).
+  // Lift each whole nested at-rule out into `skipped` instead.
+  clean = clean.replace(/@(?:media|supports|container|layer|scope)[^{}]*\{(?:[^{}]*\{[^{}]*\})*[^{}]*\}/g, (block) => {
+    result.skipped.push(block.trim().replace(/\s+/g, ' '))
+    return ''
+  })
 
   const blockRe = /([^{}]+)\{([^{}]*)\}/g
   let cursor = 0
@@ -210,12 +219,17 @@ function parseDeclaration(result: ParsedCSS, selector: string, prop: string, val
     return false
   }
 
+  // Only custom properties are theme tokens — a plain declaration
+  // (background, font-family) must surface in `skipped`, not ride the token
+  // channel into the re-export.
   if (selector === ':root, .light' || selector === '.light') {
+    if (!prop.startsWith('--')) return false
     // studio-internal vars never carry theme meaning
     if (!prop.startsWith('--studio-')) result.light[prop] = value
     return true
   }
   if (selector === '.dark') {
+    if (!prop.startsWith('--')) return false
     if (!prop.startsWith('--studio-')) result.dark[prop] = value
     return true
   }
@@ -225,11 +239,6 @@ function parseDeclaration(result: ParsedCSS, selector: string, prop: string, val
 
 /* ------------------------------------------------- style reconstruction -- */
 
-/**
- * Pull the style-owned variables out of the per-mode records (consuming
- * them) and work backwards to the StyleOptions that would emit them.
- * What remains in light/dark afterwards is plain token overrides.
- */
 /**
  * Reconstruct a color choice (named value, or a per-mode neutral/primary
  * ramp shade) from a pair of emitted per-mode values.
@@ -245,6 +254,11 @@ function matchColorChoice(value: { light?: string, dark?: string }, table: Recor
   return undefined
 }
 
+/**
+ * Pull the style-owned variables out of the per-mode records (consuming
+ * them) and work backwards to the StyleOptions that would emit them.
+ * What remains in light/dark afterwards is plain token overrides.
+ */
 function extractStyle(light: Record<string, string>, dark: Record<string, string>): StyleOptions {
   const style: StyleOptions = {}
 
@@ -590,10 +604,6 @@ function detectInnerShadow(components: Record<string, any>): StyleOptions['inner
   return undefined
 }
 
-/**
- * Remove the fragments the reconstructed style regenerates, leaving only
- * genuinely explicit component overrides for doc.components.
- */
 /**
  * Old exports carried border widths as class fragments (ring-2, border-b-3,
  * divide-y-2 …). Widths now live on the style axis, so those tokens are
@@ -647,6 +657,10 @@ function normalizeLegacyWidths(components: Record<string, any>) {
   }
 }
 
+/**
+ * Remove the fragments the reconstructed style regenerates, leaving only
+ * genuinely explicit component overrides for doc.components.
+ */
 function subtractStyleExpansion(components: Record<string, any>, style: StyleOptions): Record<string, any> {
   const expected = styleComponents(style)
   const remaining: Record<string, any> = {}
@@ -735,10 +749,11 @@ export function importTheme(input: { css?: string, config?: string }): ThemeImpo
       style.border = border.border
       if (border.borderWidth !== undefined) style.borderWidth = border.borderWidth
       if (border.frame) style.frame = true
+      // Only pastes that actually carry legacy ring-N width tokens get
+      // scrubbed — running unconditionally would eat genuine user classes
+      // (border-2, divide-y) out of config-only pastes.
+      normalizeLegacyWidths(components)
     }
-    // only legacy pastes carry width tokens — new exports must keep their
-    // bare default-width `ring` frame literals untouched
-    normalizeLegacyWidths(components)
   }
   const defaults = extractDefaults(components)
   if (defaults) style.defaults = defaults
diff --git a/docs/app/utils/theme-engine/oklch.ts b/docs/app/utils/theme-engine/oklch.ts
index 0e9e61587a..3cef01dbf1 100644
--- a/docs/app/utils/theme-engine/oklch.ts
+++ b/docs/app/utils/theme-engine/oklch.ts
@@ -137,7 +137,9 @@ export function parseColor(value: string): Oklch | undefined {
   if (input === 'white') return { l: 1, c: 0, h: 0 }
   if (input === 'black') return { l: 0, c: 0, h: 0 }
 
-  if (input.startsWith('#')) {
+  // Only 3/6-digit hex converts cleanly — a truncated or alpha hex would
+  // feed NaN channels into the curve fitter, which returns undefined ramps.
+  if (/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(input)) {
     return rgbToOklch(hexToRgb(input))
   }
 
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 7de36c7435..43f6be00bf 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -217,8 +217,7 @@ export const presets: ThemePreset[] = [{
       dark: {
         '--ui-bg-inverted': 'var(--ui-color-neutral-50)',
         '--ui-text-highlighted': 'var(--ui-color-neutral-50)',
-        '--ui-border-inverted': 'var(--ui-color-neutral-50)',
-        '--ui-primary': 'var(--ui-color-primary-400)'
+        '--ui-border-inverted': 'var(--ui-color-neutral-50)'
       }
     },
     // Soft pink-cast shadows (primary 700 light / 950 dark at 15%) over a
@@ -287,7 +286,6 @@ export const presets: ThemePreset[] = [{
         '--ui-bg': 'var(--ui-color-neutral-50)',
         '--ui-bg-muted': 'var(--ui-color-neutral-100)',
         '--ui-bg-elevated': 'var(--ui-color-neutral-200)',
-        '--ui-bg-accented': 'var(--ui-color-neutral-200)',
         '--ui-text-inverted': 'var(--ui-color-neutral-50)',
         '--ui-border': 'var(--ui-color-neutral-950)',
         '--ui-border-muted': 'var(--ui-color-neutral-300)',
@@ -295,11 +293,9 @@ export const presets: ThemePreset[] = [{
       },
       dark: {
         '--ui-primary': 'var(--ui-color-primary-500)',
-        '--ui-bg': 'var(--ui-color-neutral-900)',
         '--ui-bg-inverted': 'var(--ui-color-neutral-50)',
         '--ui-text-highlighted': 'var(--ui-color-neutral-50)',
         '--ui-border': 'var(--ui-color-neutral-950)',
-        '--ui-border-muted': 'var(--ui-color-neutral-700)',
         '--ui-border-accented': 'var(--ui-color-neutral-950)',
         '--ui-border-inverted': 'var(--ui-color-neutral-50)'
       }
@@ -370,19 +366,13 @@ export const presets: ThemePreset[] = [{
     tokens: {
       light: {
         '--ui-bg': 'var(--ui-color-neutral-200)',
-        '--ui-bg-muted': 'var(--ui-color-neutral-50)',
         '--ui-bg-elevated': 'var(--ui-color-neutral-50)',
         '--ui-bg-accented': 'var(--ui-color-neutral-300)',
         '--ui-border': 'var(--ui-color-neutral-300)',
-        '--ui-border-muted': 'var(--ui-color-neutral-200)',
-        '--ui-border-accented': 'var(--ui-color-neutral-400)',
-        '--ui-bg-inverted': 'var(--ui-color-neutral-900)'
+        '--ui-border-accented': 'var(--ui-color-neutral-400)'
       },
       dark: {
         '--ui-primary': 'var(--ui-color-primary-500)',
-        '--ui-bg': 'var(--ui-color-neutral-900)',
-        '--ui-bg-muted': 'var(--ui-color-neutral-800)',
-        '--ui-bg-elevated': 'var(--ui-color-neutral-800)',
         '--ui-bg-accented': 'var(--ui-color-neutral-800)'
       }
     },
@@ -454,9 +444,7 @@ export const presets: ThemePreset[] = [{
     tokens: {
       dark: {
         '--ui-bg': 'var(--ui-color-neutral-950)',
-        '--ui-bg-muted': 'var(--ui-color-neutral-900)',
-        '--ui-bg-elevated': 'var(--ui-color-neutral-800)',
-        '--ui-border': 'var(--ui-color-neutral-800)'
+        '--ui-bg-muted': 'var(--ui-color-neutral-900)'
       }
     },
     components: {
@@ -477,10 +465,11 @@ export const presets: ThemePreset[] = [{
     meta: { name: 'Bootstrap', base: 'bootstrap' },
     // The real 5.3 scales: 100–400 are tint-color() (mix with white at
     // 80/60/40/20%), 600–900 are shade-color() (mix with black), extended
-    // to 50/950 with the same math. The names deliberately shadow the
-    // tailwind ramps — inside this theme, blue IS Bootstrap blue.
+    // to 50/950 with the same math. Prefixed names: palettes named plainly
+    // 'blue'/'gray' would override the tailwind ramps of the same name
+    // across the whole app while the preset is active.
     palettes: {
-      blue: {
+      'bs-blue': {
         shades: {
           50: 'oklch(95.3% 0.022 260.723)',
           100: 'oklch(90.8% 0.045 258.763)',
@@ -492,11 +481,11 @@ export const presets: ThemePreset[] = [{
           700: 'oklch(40.2% 0.152 259.656)',
           800: 'oklch(30.7% 0.109 258.934)',
           900: 'oklch(20.4% 0.063 257.52)',
-          950: 'oklch(95.3% 0.022 260.723)'
+          950: 'oklch(14.7% 0.037 249.929)'
         }
       },
       // $gray-100…$gray-900 verbatim, with 50/950 extrapolated.
-      gray: {
+      'bs-gray': {
         shades: {
           50: 'oklch(99.1% 0 0)',
           100: 'oklch(98.2% 0.002 247.839)',
@@ -508,10 +497,10 @@ export const presets: ThemePreset[] = [{
           700: 'oklch(42.8% 0.015 248.172)',
           800: 'oklch(34.5% 0.013 248.212)',
           900: 'oklch(26.2% 0.009 248.19)',
-          950: 'oklch(99.1% 0 0)'
+          950: 'oklch(20.7% 0.008 248.192)'
         }
       },
-      green: {
+      'bs-green': {
         shades: {
           50: 'oklch(95.5% 0.013 167.173)',
           100: 'oklch(90.9% 0.027 166.725)',
@@ -523,10 +512,10 @@ export const presets: ThemePreset[] = [{
           700: 'oklch(38.6% 0.083 157.541)',
           800: 'oklch(29.7% 0.06 159.192)',
           900: 'oklch(20% 0.035 161.761)',
-          950: 'oklch(95.5% 0.013 167.173)'
+          950: 'oklch(14.4% 0.023 167.139)'
         }
       },
-      red: {
+      'bs-red': {
         shades: {
           50: 'oklch(95.4% 0.019 13.379)',
           100: 'oklch(90.7% 0.037 11.626)',
@@ -538,10 +527,10 @@ export const presets: ThemePreset[] = [{
           700: 'oklch(41% 0.134 20.765)',
           800: 'oklch(31.2% 0.097 19.17)',
           900: 'oklch(20.7% 0.055 17.828)',
-          950: 'oklch(95.4% 0.019 13.379)'
+          950: 'oklch(14.7% 0.033 12.672)'
         }
       },
-      yellow: {
+      'bs-yellow': {
         shades: {
           50: 'oklch(98.2% 0.026 92.389)',
           100: 'oklch(96.4% 0.051 92.554)',
@@ -553,10 +542,10 @@ export const presets: ThemePreset[] = [{
           700: 'oklch(58% 0.118 86.024)',
           800: 'oklch(43.5% 0.088 86.646)',
           900: 'oklch(27.9% 0.056 90.569)',
-          950: 'oklch(98.2% 0.026 92.389)'
+          950: 'oklch(18.9% 0.036 93.534)'
         }
       },
-      cyan: {
+      'bs-cyan': {
         shades: {
           50: 'oklch(97.2% 0.021 211.758)',
           100: 'oklch(94.3% 0.04 212.228)',
@@ -568,31 +557,31 @@ export const presets: ThemePreset[] = [{
           700: 'oklch(53.2% 0.094 217.564)',
           800: 'oklch(40.1% 0.07 216.209)',
           900: 'oklch(25.6% 0.043 215.657)',
-          950: 'oklch(97.2% 0.021 211.758)'
+          950: 'oklch(17.6% 0.029 211.647)'
         }
       }
     },
     // $primary/$secondary/$success/$info/$warning/$danger — secondary is
     // literally $gray-600, so the gray ramp serves both roles.
     colors: {
-      primary: 'blue',
-      secondary: 'gray',
-      success: 'green',
-      info: 'cyan',
-      warning: 'yellow',
-      error: 'red',
-      neutral: 'gray'
+      primary: 'bs-blue',
+      secondary: 'bs-gray',
+      success: 'bs-green',
+      info: 'bs-cyan',
+      warning: 'bs-yellow',
+      error: 'bs-red',
+      neutral: 'bs-gray'
     },
-    radius: 0.375,
-    // system-ui stack in the sources; Roboto is its named web fallback.
-    // $headings-font-weight: 500.
+    radius: 0.125,
+    // Bootstrap ships the platform's own face (system-ui stack); Roboto is
+    // the stack's named Android fallback and the closest loadable stand-in.
     font: { sans: 'Roboto', heading: { weight: 500 } },
     icons: 'bootstrap',
     // Light rides the gray ramp one step deeper than stock (page on gray-100,
     // surfaces stepped 200/300) with a single strong border family.
     tokens: {
       light: {
-        '--ui-success': 'var(--ui-color-success-400)',
+        '--ui-secondary': 'var(--ui-color-secondary-600)',
         '--ui-bg-muted': 'var(--ui-color-neutral-200)',
         '--ui-text': 'var(--ui-color-neutral-800)',
         '--ui-border': 'var(--ui-color-neutral-400)',
@@ -605,7 +594,8 @@ export const presets: ThemePreset[] = [{
         '--ui-bg-accented': 'var(--ui-color-neutral-300)'
       },
       // Dark mode keeps the very same brand colors (--bs-primary stays
-      // #0d6efd); $body-color-dark: $gray-300, $border-color-dark: $gray-700.
+      // #0d6efd); $body-color-dark: $gray-300. The library's own dark
+      // defaults already land on the right gray stops for bg and borders.
       dark: {
         '--ui-primary': 'var(--ui-color-primary-500)',
         '--ui-secondary': 'var(--ui-color-secondary-500)',
@@ -614,15 +604,10 @@ export const presets: ThemePreset[] = [{
         '--ui-warning': 'var(--ui-color-warning-500)',
         '--ui-error': 'var(--ui-color-error-500)',
         '--ui-bg-muted': 'var(--ui-color-neutral-700)',
-        '--ui-text': 'var(--ui-color-neutral-300)',
-        '--ui-border': 'var(--ui-color-neutral-800)',
-        '--ui-bg': 'var(--ui-color-neutral-900)',
-        '--ui-bg-elevated': 'var(--ui-color-neutral-800)',
-        '--ui-bg-accented': 'var(--ui-color-neutral-700)'
+        '--ui-text': 'var(--ui-color-neutral-300)'
       }
     },
-    // Bootstrap is famously flat: borders, not shadows; subtle cards and
-    // explicit outline inputs.
+    // Bootstrap is famously flat: borders, not shadows.
     style: { shadow: 'flat', defaults: { variants: { panels: 'subtle', inputs: 'outline' } } }
   }
 }]
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index c65e2ce014..b9b30264de 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -698,7 +698,6 @@ export function mergeUi(
   return result
 }
 
-/** Every component key a style bundle may touch — cleared before re-applying. */
 /**
  * The style axes that mean "leave it alone": no shadow (or 'none'), border
  * 'default', and nothing else set. Border 'none' is a REAL choice (strip
diff --git a/docs/app/utils/theme.ts b/docs/app/utils/theme.ts
index d6cf0b7c40..14379e00ef 100644
--- a/docs/app/utils/theme.ts
+++ b/docs/app/utils/theme.ts
@@ -14,6 +14,16 @@ export function readLocalStorage<T>(key: string, fallback: T): T {
 /** Tailwind's stock weight ladder — set steps are absences at these values. */
 export const FONT_WEIGHT_DEFAULTS = { normal: 400, medium: 500, semibold: 600, bold: 700 } as const
 
+/**
+ * interact-outside handler: clicks on studio chrome marked data-keep-panels
+ * (the color-mode switch) must not dismiss an open panel.
+ */
+export function keepPanels(event: Event) {
+  if ((event.target as HTMLElement | null)?.closest?.('[data-keep-panels]')) {
+    event.preventDefault()
+  }
+}
+
 // Picking a set replaces appConfig.ui.icons wholesale, so every set must
 // map the full key list from src/theme/icons — a missing key would blank
 // that icon across the whole app. Names are validated against the Iconify
@@ -125,7 +135,7 @@ export const themeIcons = {
     chevronUp: 'i-iconoir-nav-arrow-up',
     close: 'i-iconoir-xmark',
     copy: 'i-iconoir-copy',
-    copyCheck: 'i-iconoir-multiple-pages-plus',
+    copyCheck: 'i-iconoir-clipboard-check',
     dark: 'i-iconoir-half-moon',
     drag: 'i-iconoir-menu',
     ellipsis: 'i-iconoir-more-horiz',
@@ -135,7 +145,9 @@ export const themeIcons = {
     eyeOff: 'i-iconoir-eye-closed',
     file: 'i-iconoir-page',
     folder: 'i-iconoir-folder',
-    folderOpen: 'i-iconoir-open-book',
+    // iconoir has no open-folder glyph — repeat the closed folder rather
+    // than show a book on expanded tree nodes
+    folderOpen: 'i-iconoir-folder',
     hash: 'i-iconoir-hashtag',
     info: 'i-iconoir-info-circle',
     light: 'i-iconoir-sun-light',
diff --git a/docs/server/api/ai.post.ts b/docs/server/api/ai.post.ts
index b14f9332c4..c75d277add 100644
--- a/docs/server/api/ai.post.ts
+++ b/docs/server/api/ai.post.ts
@@ -41,7 +41,7 @@ const applyTheme = {
     type: 'object' as const,
     properties: {
       primary: { type: 'string', description: 'Primary color name (e.g., green, blue, red, indigo)' },
-      neutral: { type: 'string', description: 'Neutral color name (slate, gray, zinc, neutral, stone, taupe, mauve, mist, olive, sand, sage, ash)' },
+      neutral: { type: 'string', description: 'Neutral color name (slate, gray, zinc, neutral, stone, taupe, mauve, mist, olive)' },
       secondary: { type: 'string', description: 'Secondary color name' },
       success: { type: 'string', description: 'Success color name' },
       info: { type: 'string', description: 'Info color name' },
@@ -206,9 +206,6 @@ For Nuxt, wrap in \`defineAppConfig({ ui: { ... } })\`. For Vue, pass as \`ui({
   - **mauve** — purple-tinted gray, elegant, creative
   - **mist** — soft blue-gray, airy, light
   - **olive** — green-tinted gray, natural, earthy
-  - **sand** — warm beige-gray, desert, organic
-  - **sage** — muted green-gray, calm, botanical
-  - **ash** — deep blue-gray, cool, technical
   For example: warm/cozy themes → stone or taupe, elegant/creative → mauve, tech/minimal → zinc, nature → olive, etc. ALWAYS change the neutral when creating a complete theme — don't leave it as the default slate unless it genuinely fits.
 - Custom: define all shades 50-950 in \`customColors\` of the \`applyTheme\` tool, then reference the name
 
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index a7933f8011..814c5acd8a 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -14,7 +14,8 @@ import {
   parseColor,
   contrastRatio,
   CURVE_DEFAULTS,
-  SHADES
+  SHADES,
+  LIBRARY_TOKEN_DEFAULTS
 } from '../../docs/app/utils/theme-engine'
 import type { ThemeDoc } from '../../docs/app/utils/theme-engine'
 import colors from 'tailwindcss/colors'
@@ -263,6 +264,16 @@ describe('theme-engine', () => {
       expect(parseCssColor('rgb(255, 255, 255)')).toBe('oklch(100% 0 0)')
       expect(parseCssColor('oklch(62.3% 0.214 259.815)')).toBe('oklch(62.3% 0.214 259.815)')
       expect(parseCssColor('gibberish')).toBeUndefined()
+      // truncated/alpha hex would feed NaN channels into the curve fitter
+      expect(parseCssColor('#12')).toBeUndefined()
+      expect(parseCssColor('#1234')).toBeUndefined()
+    })
+
+    it('fitPalette survives unparseable shades', () => {
+      // a lone bad hex must fall back to stock curves, not fit NaN stops
+      const params = fitPalette({ 500: '#12' })
+      expect(params.lightness).toBeDefined()
+      expect(generatePalette(params)[500]).toMatch(/^oklch\(/)
     })
 
     it('contrastRatio handles oklch and hex inputs', () => {
@@ -279,6 +290,31 @@ describe('theme-engine', () => {
         }
       }
     })
+
+    it('preset ramps get darker from 50 to 950', () => {
+      // Catches transposed or copy-pasted stops (a near-white 950 once
+      // shipped) without demanding perfectly monotonic lightness.
+      for (const preset of presets) {
+        for (const [name, palette] of Object.entries(preset.doc.palettes || {})) {
+          const light = parseColor(palette.shades[50]!)!
+          const dark = parseColor(palette.shades[950]!)!
+          expect(dark.l, `${preset.id} ${name} 950 vs 50`).toBeLessThan(light.l - 0.3)
+        }
+      }
+    })
+
+    it('preset tokens all differ from the library defaults', () => {
+      // A token equal to the default is dead weight the export ships anyway
+      // ("export only what you changed") — presets must not carry them.
+      for (const preset of presets) {
+        for (const mode of ['light', 'dark'] as const) {
+          const defaults = LIBRARY_TOKEN_DEFAULTS[mode] as Record<string, string>
+          for (const [token, value] of Object.entries(preset.doc.tokens?.[mode] ?? {})) {
+            expect(value, `${preset.id} ${mode} ${token}`).not.toBe(defaults[token])
+          }
+        }
+      }
+    })
   })
 })
 
diff --git a/test/utils/theme-import.spec.ts b/test/utils/theme-import.spec.ts
index 7a20b0bde7..bf014e5e78 100644
--- a/test/utils/theme-import.spec.ts
+++ b/test/utils/theme-import.spec.ts
@@ -230,6 +230,47 @@ describe('importTheme', () => {
     expect(doc.components).toBeUndefined()
   })
 
+  it('keeps genuine width classes in config-only pastes', () => {
+    // The legacy ring-N scrubber must only run when legacy tokens were
+    // actually detected — not eat a user's own border-2 out of a paste.
+    const { doc } = importTheme({
+      config: 'export default defineAppConfig({ ui: { card: { slots: { root: \'border-2 border-dashed\' } } } })'
+    })
+
+    expect(doc.components?.card?.slots?.root).toBe('border-2 border-dashed')
+  })
+
+  it('round-trips a default-width custom border with frame', () => {
+    const original: ThemeDoc = { version: 1, style: { border: 'custom', borderWidth: 1, frame: true } }
+    const css = generateCSS(original)
+    const config = generateConfig(original)
+    const { doc: imported, skipped } = importTheme({ css, config })
+
+    expect(skipped).toEqual([])
+    // width 1 elides the @theme width channel, so the frame literals come
+    // back as explicit components — the re-export must still be identical.
+    expect(generateCSS(imported)).toBe(css)
+    expect(generateConfig(imported)).toBe(config)
+  })
+
+  it('skips plain declarations under token selectors instead of importing them', () => {
+    const { doc, skipped } = importTheme({
+      css: ':root, .light {\n  background: red;\n  --ui-bg: black;\n}'
+    })
+
+    expect(doc.tokens?.light?.['--ui-bg']).toBe('black')
+    expect(skipped).toEqual([':root, .light { background: red }'])
+  })
+
+  it('skips nested at-rule blocks instead of importing them as global', () => {
+    const { doc, skipped } = importTheme({
+      css: '@media (prefers-color-scheme: dark) {\n  :root {\n    --ui-radius: 2rem;\n  }\n}'
+    })
+
+    expect(doc.radius).toBeUndefined()
+    expect(skipped).toEqual(['@media (prefers-color-scheme: dark) { :root { --ui-radius: 2rem; } }'])
+  })
+
   it('keeps explicit component overrides that no style expansion explains', () => {
     const { doc } = importTheme({
       config: 'export default defineAppConfig({ ui: { button: { slots: { base: \'rounded-full\' } } } })'

From aed4e552b99314c5e8cc913818b027567588d7ae Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 11 Jul 2026 17:02:21 +0200
Subject: [PATCH 130/185] =?UTF-8?q?fix(docs):=20color-mode=20shortcut=20la?=
 =?UTF-8?q?nds=20on=20=E2=8C=98=E2=87=A7D;=20CI=20typecheck=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

macOS ships its Search-with-Google Service on ⌘⇧L, so pages never
receive that chord (verified with a capture listener — Meta and Shift
arrive, L never does). Bare Shift+D is a screen-reader landmark key.
⌘⇧D is a modifier chord pages can intercept (VS Code web proves it) and
only shadows Chrome's non-reserved bookmark-all-tabs.

The new import spec used property access on an untyped slots object —
the root vue-tsc pass in CI rejects it; compare with toEqual instead.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/pages/theme.vue        | 12 +++++++-----
 test/utils/theme-import.spec.ts |  2 +-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 41aa2aec7f..af5414ca2c 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -30,9 +30,11 @@ watch(() => (mounted.value ? JSON.stringify(currentDoc()) : undefined), (snapsho
   captureTimeout = setTimeout(() => capture(snapshot), 350)
 })
 
-// ⌘⇧L flips the mode without a click, so open panels survive the switch
-// (the Notion/Obsidian dark-mode convention; a modifier chord also sidesteps
-// WCAG 2.1.4 on character-key shortcuts).
+// ⌘⇧D flips the mode without a click, so open panels survive the switch.
+// The chord threads three needles: bare Shift+D is a screen-reader
+// landmark-navigation key (and a WCAG 2.1.4 character shortcut), macOS
+// ships its Search-with-Google Service on ⌘⇧L so pages never receive it,
+// and ⌘⇧D only shadows Chrome's obscure, non-reserved "bookmark all tabs".
 const colorMode = useColorMode()
 function toggleColorMode() {
   colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
@@ -42,7 +44,7 @@ defineShortcuts({
   meta_z: undo,
   meta_shift_z: redo,
   ctrl_y: redo,
-  meta_shift_l: toggleColorMode
+  meta_shift_d: toggleColorMode
 })
 
 // Esc exits fullscreen — but NOT through defineShortcuts, which
@@ -172,7 +174,7 @@ const shareMode = ref<'import' | 'export'>('export')
               </template>
             </UPopover>
 
-            <UTooltip text="Color mode" :kbds="['meta', 'shift', 'L']">
+            <UTooltip text="Color mode" :kbds="['meta', 'shift', 'D']">
               <UColorModeSwitch data-keep-panels class="shrink-0" />
             </UTooltip>
 
diff --git a/test/utils/theme-import.spec.ts b/test/utils/theme-import.spec.ts
index bf014e5e78..e673944ad0 100644
--- a/test/utils/theme-import.spec.ts
+++ b/test/utils/theme-import.spec.ts
@@ -237,7 +237,7 @@ describe('importTheme', () => {
       config: 'export default defineAppConfig({ ui: { card: { slots: { root: \'border-2 border-dashed\' } } } })'
     })
 
-    expect(doc.components?.card?.slots?.root).toBe('border-2 border-dashed')
+    expect(doc.components?.card?.slots).toEqual({ root: 'border-2 border-dashed' })
   })
 
   it('round-trips a default-width custom border with frame', () => {

From 76843160acc050a88819b3ca9950bba50f722d0d Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 11 Jul 2026 17:03:50 +0200
Subject: [PATCH 131/185] =?UTF-8?q?fix(docs):=20color-mode=20shortcut=20se?=
 =?UTF-8?q?ttles=20on=20=E2=8C=83=E2=87=A7D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

⌘⇧D fires Chrome's bookmark-all-tabs at the NSMenu level where pages
can't block it. Control chords have no macOS menu bindings.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/pages/theme.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index af5414ca2c..7e2de84b75 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -30,11 +30,12 @@ watch(() => (mounted.value ? JSON.stringify(currentDoc()) : undefined), (snapsho
   captureTimeout = setTimeout(() => capture(snapshot), 350)
 })
 
-// ⌘⇧D flips the mode without a click, so open panels survive the switch.
-// The chord threads three needles: bare Shift+D is a screen-reader
-// landmark-navigation key (and a WCAG 2.1.4 character shortcut), macOS
-// ships its Search-with-Google Service on ⌘⇧L so pages never receive it,
-// and ⌘⇧D only shadows Chrome's obscure, non-reserved "bookmark all tabs".
+// ⌃⇧D flips the mode without a click, so open panels survive the switch.
+// The chord threads several needles: bare Shift+D is a screen-reader
+// landmark key (and a WCAG 2.1.4 character shortcut); macOS eats ⌘⇧L
+// (Search-with-Google Service) and fires ⌘⇧D's menu binding (bookmark all
+// tabs) at the NSMenu level where pages can't block it. Control chords
+// have no macOS menu bindings, and Windows accelerators are preventable.
 const colorMode = useColorMode()
 function toggleColorMode() {
   colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
@@ -44,7 +45,7 @@ defineShortcuts({
   meta_z: undo,
   meta_shift_z: redo,
   ctrl_y: redo,
-  meta_shift_d: toggleColorMode
+  ctrl_shift_d: toggleColorMode
 })
 
 // Esc exits fullscreen — but NOT through defineShortcuts, which
@@ -174,7 +175,7 @@ const shareMode = ref<'import' | 'export'>('export')
               </template>
             </UPopover>
 
-            <UTooltip text="Color mode" :kbds="['meta', 'shift', 'D']">
+            <UTooltip text="Color mode" :kbds="['ctrl', 'shift', 'D']">
               <UColorModeSwitch data-keep-panels class="shrink-0" />
             </UTooltip>
 

From d8a729b0f1d845fa0c953eea826332e020d4332c Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 11 Jul 2026 17:10:37 +0200
Subject: [PATCH 132/185] fix(docs): custom shadow seed visible at 20%, inherit
 clears the knobs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

10% read as broken on the tinted page — shadow-lg is two stacked 10%
layers, so one layer needs ~20% to match. Leaving Custom clears the
seeded geometry/opacity/color so stale values can't pin the next visit.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioControls.vue       | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 3264a199c7..2190b7c50c 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -175,13 +175,17 @@ const shadowStyle = computed({
     if (!shadow || shadow === 'none') return 'inherit'
     return shadow === 'flat' ? 'none' : 'custom'
   },
-  // Custom starts where the library already is: geometry and weight
-  // approximating the stock shadow-lg, so entering Custom isn't a jump.
-  set: (value: any) => setStyle({
-    shadow: value === 'custom' ? 'hard' : value === 'none' ? 'flat' : 'none',
-    ...(value === 'custom' && style.value.shadowGeometry === undefined ? { shadowGeometry: { x: 0, y: 6, blur: 12, spread: 0 } } : {}),
-    ...(value === 'custom' && style.value.shadowOpacity === undefined ? { shadowOpacity: 10 } : {})
-  })
+  // Custom starts where the library already is: geometry approximating the
+  // stock shadow-lg, so entering Custom isn't a jump (20% ≈ shadow-lg's two
+  // stacked 10% layers flattened into one). Leaving Custom clears the knobs
+  // — Inherit means a clean slate, and the next Custom reseeds fresh.
+  set: (value: any) => setStyle(value === 'custom'
+    ? {
+        shadow: 'hard',
+        ...(style.value.shadowGeometry === undefined ? { shadowGeometry: { x: 0, y: 6, blur: 12, spread: 0 } } : {}),
+        ...(style.value.shadowOpacity === undefined ? { shadowOpacity: 20 } : {})
+      }
+    : { shadow: value === 'none' ? 'flat' : 'none', shadowGeometry: undefined, shadowOpacity: undefined, shadowColor: undefined, shadowShade: undefined })
 })
 
 // Nothing in the library casts an inner shadow, so None and Inherit are

From c89a698f1608cc0acd335c7cf7a690ab4b6f50ef Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 11 Jul 2026 21:47:54 +0200
Subject: [PATCH 133/185] feat(docs): playground grid rides a virtualized
 UScrollArea masonry

CSS columns out, UScrollArea lanes in: tiles virtualize with per-item
measurement, lane count follows the container width (fullscreen-aware,
not viewport breakpoints), and the per-breakpoint tile reveal folds into
the lane count. The scroll area owns its own scrolling; the tile card
drops its masonry-era break-inside/mb classes since the virtualizer
positions and gaps items itself.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/components/playground/Playground.vue | 94 +++++++++++--------
 .../components/playground/PlaygroundCard.vue  |  2 +-
 docs/app/pages/theme.vue                      |  7 +-
 3 files changed, 60 insertions(+), 43 deletions(-)

diff --git a/docs/app/components/playground/Playground.vue b/docs/app/components/playground/Playground.vue
index 03682ce7b9..0b4ad86d7f 100644
--- a/docs/app/components/playground/Playground.vue
+++ b/docs/app/components/playground/Playground.vue
@@ -28,48 +28,68 @@ import {
 } from '#components'
 
 // Live, interactive component showcase — the Theme Studio's grid view, laid
-// out as a masonry of content-sized cards à la shadcn/HeroUI. Each tile is a
-// self-contained, product-like block (header + body + footer action). Overlays
-// are only shown embedded in richer examples (command palette, dashboard
-// dropdown, select menus, auth form, chat), never as bare triggers. Tiles are
-// progressively revealed as the viewport widens to keep the columns balanced.
+// out as a virtualized masonry (UScrollArea lanes) of content-sized cards à
+// la shadcn/HeroUI. Each tile is a self-contained, product-like block
+// (header + body + footer action). Overlays are only shown embedded in
+// richer examples (command palette, dashboard dropdown, select menus, auth
+// form, chat), never as bare triggers.
 const tiles = [
-  { name: 'input', component: PlaygroundInput, class: '' },
-  { name: 'command-palette', component: PlaygroundCommandPalette, class: '' },
-  { name: 'calendar', component: PlaygroundCalendar, class: '' },
-  { name: 'buttons', component: PlaygroundButtons, class: '' },
-  { name: 'notifications', component: PlaygroundNotifications, class: '' },
-  { name: 'transactions', component: PlaygroundTransactions, class: '' },
-  { name: 'transfer-funds', component: PlaygroundTransferFunds, class: 'hidden sm:block' },
-  { name: 'invite-team', component: PlaygroundInviteTeam, class: 'hidden sm:block' },
-  { name: 'analytics', component: PlaygroundAnalytics, class: 'hidden sm:block' },
-  { name: 'pin-input', component: PlaygroundPinInput, class: 'hidden sm:block' },
-  { name: 'badges', component: PlaygroundBadges, class: 'hidden sm:block' },
-  { name: 'dashboard', component: PlaygroundDashboard, class: 'hidden sm:block' },
-  { name: 'report-bug', component: PlaygroundReportBug, class: 'hidden lg:block' },
-  { name: 'goal', component: PlaygroundGoal, class: 'hidden lg:block' },
-  { name: 'savings-targets', component: PlaygroundSavingsTargets, class: 'hidden lg:block' },
-  { name: 'typography', component: PlaygroundTypography, class: 'hidden lg:block' },
-  { name: 'shortcuts', component: PlaygroundShortcuts, class: 'hidden lg:block' },
-  { name: 'navigation', component: PlaygroundNavigation, class: 'hidden lg:block' },
-  { name: 'color-picker', component: PlaygroundColorPicker, class: 'hidden lg:block' },
-  { name: 'empty', component: PlaygroundEmpty, class: 'hidden xl:block' },
-  { name: 'announcement', component: PlaygroundAnnouncement, class: 'hidden xl:block' },
-  { name: 'tabs', component: PlaygroundTabs, class: 'hidden xl:block' },
-  { name: 'contributors', component: PlaygroundContributors, class: 'hidden xl:block' },
-  { name: 'auth-form', component: PlaygroundAuthForm, class: 'hidden xl:block' },
-  { name: 'prompt', component: PlaygroundPrompt, class: 'hidden xl:block' }
+  { name: 'input', component: PlaygroundInput },
+  { name: 'command-palette', component: PlaygroundCommandPalette },
+  { name: 'calendar', component: PlaygroundCalendar },
+  { name: 'buttons', component: PlaygroundButtons },
+  { name: 'notifications', component: PlaygroundNotifications },
+  { name: 'transactions', component: PlaygroundTransactions },
+  { name: 'transfer-funds', component: PlaygroundTransferFunds },
+  { name: 'invite-team', component: PlaygroundInviteTeam },
+  { name: 'analytics', component: PlaygroundAnalytics },
+  { name: 'pin-input', component: PlaygroundPinInput },
+  { name: 'badges', component: PlaygroundBadges },
+  { name: 'dashboard', component: PlaygroundDashboard },
+  { name: 'report-bug', component: PlaygroundReportBug },
+  { name: 'goal', component: PlaygroundGoal },
+  { name: 'savings-targets', component: PlaygroundSavingsTargets },
+  { name: 'typography', component: PlaygroundTypography },
+  { name: 'shortcuts', component: PlaygroundShortcuts },
+  { name: 'navigation', component: PlaygroundNavigation },
+  { name: 'color-picker', component: PlaygroundColorPicker },
+  { name: 'empty', component: PlaygroundEmpty },
+  { name: 'announcement', component: PlaygroundAnnouncement },
+  { name: 'tabs', component: PlaygroundTabs },
+  { name: 'contributors', component: PlaygroundContributors },
+  { name: 'auth-form', component: PlaygroundAuthForm },
+  { name: 'prompt', component: PlaygroundPrompt }
 ]
 
-const columnsClass = 'columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-4'
+// Lanes follow the CONTAINER, not the viewport — the preview pane changes
+// width with fullscreen. Tile count follows lanes (the old per-breakpoint
+// reveal) so narrow layouts aren't one endless column.
+const scrollArea = useTemplateRef('scrollArea')
+const { width } = useElementSize(computed(() => scrollArea.value?.$el))
+const lanes = computed(() => width.value >= 1200 ? 4 : width.value >= 900 ? 3 : width.value >= 600 ? 2 : 1)
+
+const REVEAL_COUNTS = [6, 12, 19, tiles.length] as const
+const visibleTiles = computed(() => tiles.slice(0, REVEAL_COUNTS[lanes.value - 1]))
 </script>
 
 <template>
-  <div class="w-full mx-auto px-4 sm:px-6">
-    <div :class="columnsClass">
-      <PlaygroundCard v-for="tile in tiles" :key="tile.name" :class="tile.class">
-        <component :is="tile.component" />
+  <UScrollArea
+    ref="scrollArea"
+    :items="visibleTiles"
+    :virtualize="{
+      lanes,
+      gap: 16,
+      estimateSize: 360,
+      paddingStart: 24,
+      paddingEnd: 24,
+      getItemKey: (index: number) => visibleTiles[index]!.name
+    }"
+    class="h-full px-4 sm:px-6"
+  >
+    <template #default="{ item }">
+      <PlaygroundCard>
+        <component :is="item.component" />
       </PlaygroundCard>
-    </div>
-  </div>
+    </template>
+  </UScrollArea>
 </template>
diff --git a/docs/app/components/playground/PlaygroundCard.vue b/docs/app/components/playground/PlaygroundCard.vue
index 60a69a6857..d973c56f74 100644
--- a/docs/app/components/playground/PlaygroundCard.vue
+++ b/docs/app/components/playground/PlaygroundCard.vue
@@ -3,7 +3,7 @@
        and style treatments apply to the grid tiles too. Tiles bring their
        own padding — the body slot contributes none. -->
   <UCard
-    class="relative isolate break-inside-avoid mb-4 rounded-xl shadow-sm overflow-hidden"
+    class="relative isolate overflow-hidden"
     :ui="{ body: 'p-0 sm:p-0' }"
   >
     <slot />
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 7e2de84b75..df8aa5d480 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -124,11 +124,8 @@ const shareMode = ref<'import' | 'export'>('export')
              paint containment on the views' own scrollers — Chromium won't
              clip nested composited layers (sticky headers, filtered glows)
              by an ancestor's overflow alone. -->
-        <div
-          class="flex-1 min-h-0 [&>*]:[contain:paint]"
-          :class="view === 'grid' ? 'overflow-y-auto' : 'overflow-hidden'"
-        >
-          <Playground v-if="view === 'grid'" class="py-4 sm:py-6" />
+        <div class="flex-1 min-h-0 overflow-hidden [&>*]:[contain:paint]">
+          <Playground v-if="view === 'grid'" />
           <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
           <ThemeStudioViewChat v-else-if="view === 'chat'" />
           <ThemeStudioViewSaas v-else-if="view === 'saas'" />

From a0334943d278f1f2fdd6cc8c80813eb876260473 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 11 Jul 2026 21:59:22 +0200
Subject: [PATCH 134/185] feat(docs): listbox-powered theme pickers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- presets: UListbox rows with descriptions and a mode-aware theme chip —
  the doc's neutral ramp as the surface (50→200 light, 900→800 dark)
  under its own icon in the doc's primary
- fonts: each family renders itself over a live specimen line
- icon sets: every row previews a strip of its own glyphs
- color grid chips: single dots become 400→600 ramp pills
- toolbar color mode: UTabs one size below the app-wide default so it
  tracks the size setting without outgrowing the buttons

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioColorMenu.vue     |   6 +-
 .../theme-studio/ThemeStudioControls.vue      | 119 +++++++++++++-----
 .../theme-studio/ThemeStudioPresetMenu.vue    | 105 +++++++++++-----
 docs/app/pages/theme.vue                      |  41 +++++-
 docs/app/utils/theme.ts                       |  16 +++
 5 files changed, 220 insertions(+), 67 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioColorMenu.vue b/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
index 3dddd7d689..b7ba487fec 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
@@ -101,11 +101,11 @@ function isSelected(color: string) {
             @click="selectPalette(alias, color)"
           >
             <template #leading>
+              <!-- a mini 400→600 ramp says more about a palette than one dot -->
               <span
-                class="inline-block size-2 rounded-full bg-(--color-light) dark:bg-(--color-dark)"
+                class="inline-block h-2 w-4 rounded-full"
                 :style="{
-                  '--color-light': `var(--color-${paletteChip(color)}-500)`,
-                  '--color-dark': `var(--color-${paletteChip(color)}-400)`
+                  background: `linear-gradient(to right, var(--color-${paletteChip(color)}-400), var(--color-${paletteChip(color)}-500), var(--color-${paletteChip(color)}-600))`
                 }"
               />
             </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 2190b7c50c..74e3cd4f5b 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -24,17 +24,7 @@ const { style, setStyle, primaryChip, neutralChip } = useThemeStudio()
 
 /* ------------------------------------------------------------ typography -- */
 
-/** Every listed family, loaded once so the pickers can preview themselves. */
-onMounted(() => {
-  if (document.getElementById('font-previews')) return
-  const families = fonts.filter(name => name !== 'Public Sans')
-    .map(name => `family=${encodeURIComponent(name)}:wght@400;700`).join('&')
-  const link = document.createElement('link')
-  link.rel = 'stylesheet'
-  link.id = 'font-previews'
-  link.href = `https://fonts.googleapis.com/css2?${families}&display=swap`
-  document.head.appendChild(link)
-})
+onMounted(() => loadFontPreviews(fonts))
 
 // One writable model per tailwind weight step — the knobs components
 // actually dereference at runtime.
@@ -130,6 +120,9 @@ const fontRows = [{
   aria: { weights: 'Heading weight', uppercase: 'Uppercase headings', spacing: 'Heading letter spacing', height: 'Heading line height' }
 }]
 
+/** Font listbox popovers close on pick — one open flag per row. */
+const fontListOpen = reactive<Record<string, boolean>>({ base: false, heading: false })
+
 /** Live specimen: a heading line in the heading treatment over a body line. */
 const headingSampleStyle = computed(() => ({
   fontFamily: `'${fontPrefs.value.heading?.font ?? font.value}', sans-serif`,
@@ -158,6 +151,14 @@ const iconPreviews = computed(() => {
   return SAMPLE_ICON_KEYS.map(key => set[key]).filter((name): name is string => !!name).slice(0, 20)
 })
 
+/** A short strip of a set's own glyphs for its listbox row. */
+function iconSetSamples(setName: string): string[] {
+  const set = (themeIcons as Record<string, Record<string, string>>)[setName] || {}
+  return ['search', 'check', 'warning', 'light', 'dark', 'star', 'folder', 'upload'].map(key => set[key]).filter((name): name is string => !!name)
+}
+
+const iconListOpen = ref(false)
+
 const semanticAliases: ColorAlias[] = ['secondary', 'success', 'info', 'warning', 'error']
 
 // Inherit leaves the library's own shadows alone, None strips them, Custom
@@ -584,19 +585,46 @@ const shadowSections = [{
               <span class="text-xs font-semibold text-muted select-none" :class="row.key === 'heading' && 'pt-1'">{{ row.label }}</span>
 
               <div class="flex items-center gap-1.5">
-                <USelect
-                  v-model="row.font.value"
-                  size="sm"
-                  color="neutral"
-                  variant="subtle"
-                  :icon="row.selectIcon"
-                  :items="row.items.value"
-                  class="flex-1 min-w-0"
-                >
-                  <template #item-label="{ item }">
-                    <span :style="item.value === 'inherit' ? undefined : { fontFamily: `'${item.value}', sans-serif` }">{{ item.label }}</span>
+                <UPopover v-model:open="fontListOpen[row.key]" :content="{ align: 'start' }" class="flex-1 min-w-0">
+                  <UButton
+                    color="neutral"
+                    variant="subtle"
+                    size="sm"
+                    block
+                    :icon="row.selectIcon"
+                    trailing-icon="i-lucide-chevron-down"
+                    :ui="{ label: 'flex-1 text-left truncate' }"
+                    :aria-label="`${row.label} font`"
+                  >
+                    <span
+                      class="truncate"
+                      :style="row.font.value === 'inherit' ? undefined : { fontFamily: `'${row.font.value}', sans-serif` }"
+                    >{{ row.items.value.find(item => item.value === row.font.value)?.label ?? row.font.value }}</span>
+                  </UButton>
+
+                  <template #content>
+                    <!-- each family renders itself over a live specimen line -->
+                    <UListbox
+                      v-model="row.font.value"
+                      :items="row.items.value"
+                      value-key="value"
+                      class="w-72 max-h-80 overflow-y-auto"
+                      @update:model-value="fontListOpen[row.key] = false"
+                    >
+                      <template #item-label="{ item }">
+                        <span :style="item.value === 'inherit' ? undefined : { fontFamily: `'${item.value}', sans-serif` }">{{ item.label }}</span>
+                      </template>
+
+                      <template #item-description="{ item }">
+                        <span
+                          v-if="item.value !== 'inherit'"
+                          class="text-xs text-muted truncate"
+                          :style="{ fontFamily: `'${item.value}', sans-serif` }"
+                        >Grumpy wizards make toxic brew</span>
+                      </template>
+                    </UListbox>
                   </template>
-                </USelect>
+                </UPopover>
 
                 <UFieldGroup size="sm">
                   <UPopover :content="{ align: 'start' }">
@@ -705,16 +733,41 @@ const shadowSections = [{
               <UIcon v-for="name in iconPreviews" :key="name" :name="name" class="size-4 text-muted" />
             </div>
 
-            <USelect
-              v-model="icon"
-              size="sm"
-              color="neutral"
-              variant="subtle"
-              :icon="icons.find(i => i.value === icon)?.icon"
-              :items="icons"
-              class="w-full capitalize"
-              :ui="{ item: 'capitalize' }"
-            />
+            <UPopover v-model:open="iconListOpen" :content="{ align: 'start' }">
+              <UButton
+                color="neutral"
+                variant="subtle"
+                size="sm"
+                block
+                :icon="icons.find(i => i.value === icon)?.icon"
+                trailing-icon="i-lucide-chevron-down"
+                :label="icons.find(i => i.value === icon)?.label"
+                :ui="{ label: 'flex-1 text-left' }"
+                aria-label="Icon set"
+              />
+
+              <template #content>
+                <!-- every set previews a strip of its own glyphs -->
+                <UListbox
+                  v-model="icon"
+                  :items="icons"
+                  value-key="value"
+                  class="w-72 max-h-80 overflow-y-auto"
+                  @update:model-value="iconListOpen = false"
+                >
+                  <template #item-description="{ item }">
+                    <span class="flex items-center gap-1.5 pt-0.5">
+                      <UIcon
+                        v-for="name in iconSetSamples(item.value)"
+                        :key="name"
+                        :name="name"
+                        class="size-3.5 text-muted"
+                      />
+                    </span>
+                  </template>
+                </UListbox>
+              </template>
+            </UPopover>
           </div>
         </ThemeStudioSection>
 
diff --git a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
index 35194bc096..563c8fb8a5 100644
--- a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { resolveAlias, resolveShade } from '../../utils/theme-engine'
-import type { ThemeDoc } from '../../utils/theme-engine'
+import { resolveAlias, resolveShade, SHADES } from '../../utils/theme-engine'
+import type { ThemeDoc, Shade } from '../../utils/theme-engine'
 
-/** The presets dropdown (with per-preset color swatches) plus the shuffle die. */
+/** The presets listbox (theme chips, fonts and ramps) plus the shuffle die. */
 const props = defineProps<{
   /** Button size — the toolbar uses the default, the header picker slims down. */
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   /**
-   * The studio toolbar opts out of the modal overlay so its color-mode
-   * switch stays clickable (with keepPanels holding the menu open); other
-   * hosts keep the stock dismiss behavior.
+   * The studio toolbar opts out of dismissing on its own chrome so the
+   * color-mode switch stays usable while the list is open; other hosts
+   * keep the stock dismiss behavior.
    */
   keepPanels?: boolean
 }>()
@@ -27,22 +27,49 @@ onMounted(() => {
   mounted.value = true
 })
 
-/** The preset's primary + neutral at 500, straight from its own document. */
-function presetSwatches(doc: ThemeDoc): string[] {
-  const primaryColor = doc.blackAsPrimary ? 'black' : resolveShade(doc, resolveAlias(doc, 'primary'), 500)
-  const neutralColor = resolveShade(doc, resolveAlias(doc, 'neutral'), 500)
-  return [primaryColor, neutralColor].filter((color): color is string => !!color)
+/**
+ * Each row leads with a mini theme chip: the doc's neutral ramp as the
+ * page, its own icon in its primary — the theme in one glance, following
+ * the current color mode (light 50→200 / dark 900→800, primary 500/400).
+ */
+function themeChip(doc: ThemeDoc) {
+  const shade = (alias: 'primary' | 'neutral', step: Shade) => resolveShade(doc, resolveAlias(doc, alias), step)
+  return {
+    '--chip-bg-light': `linear-gradient(135deg, ${shade('neutral', 50)}, ${shade('neutral', 200)})`,
+    '--chip-bg-dark': `linear-gradient(135deg, ${shade('neutral', 900)}, ${shade('neutral', 800)})`,
+    '--chip-icon-light': doc.blackAsPrimary ? 'black' : shade('primary', 500),
+    '--chip-icon-dark': doc.blackAsPrimary ? 'white' : shade('primary', 400)
+  }
+}
+
+/** The doc's working ramp — primary, or the neutral when black leads. */
+function rampStops(doc: ThemeDoc): string[] {
+  const alias = doc.blackAsPrimary ? 'neutral' : 'primary'
+  return SHADES.map(shade => resolveShade(doc, resolveAlias(doc, alias), shade)).filter((color): color is string => !!color)
 }
 
 const presetItems = computed(() => presets.map(preset => ({
+  id: preset.id,
   label: preset.name,
-  icon: preset.icon,
-  type: 'checkbox' as const,
-  checked: activePreset.value === preset.id,
-  swatches: presetSwatches(preset.doc),
-  onSelect: () => applyPreset(preset)
+  chipIcon: preset.icon,
+  themeChip: themeChip(preset.doc),
+  font: preset.doc.font?.sans ?? 'Public Sans',
+  ramp: rampStops(preset.doc)
 })))
 
+// the rows render their own font names — load the faces once
+const { fonts } = useTheme()
+onMounted(() => loadFontPreviews(fonts))
+
+const selected = computed({
+  get: () => activePreset.value,
+  set: (id: string | undefined) => {
+    const preset = presets.find(entry => entry.id === id)
+    if (preset) applyPreset(preset)
+    open.value = false
+  }
+})
+
 // the boolean prop shadows the util in template scope — alias the handler
 const onKeepPanels = keepPanels
 
@@ -57,13 +84,10 @@ const presetLabel = computed(() => {
 
 <template>
   <div class="flex gap-2">
-    <UDropdownMenu
+    <UPopover
       v-model:open="open"
-      :items="presetItems"
-      :modal="!props.keepPanels"
       :content="props.keepPanels ? { align: 'start', onInteractOutside: onKeepPanels } : { align: 'start' }"
       class="flex-1 min-w-0"
-      :ui="{ itemTrailing: 'self-center', content: 'w-(--reka-dropdown-menu-trigger-width)' }"
     >
       <UButton
         :label="presetLabel"
@@ -75,17 +99,38 @@ const presetLabel = computed(() => {
         block
       />
 
-      <template #item-trailing="{ item }">
-        <span class="inline-flex items-center gap-1 h-full">
-          <span
-            v-for="(swatch, index) in item.swatches"
-            :key="index"
-            class="size-2 rounded-full ring ring-default"
-            :style="{ backgroundColor: swatch }"
-          />
-        </span>
+      <template #content>
+        <UListbox
+          v-model="selected"
+          :items="presetItems"
+          value-key="id"
+          class="w-80"
+          :ui="{
+            item: 'gap-3'
+          }"
+        >
+          <template #item-leading="{ item }">
+            <span
+              class="flex items-center justify-center size-9 rounded-md ring ring-default shrink-0 bg-[image:var(--chip-bg-light)] dark:bg-[image:var(--chip-bg-dark)]"
+              :style="item.themeChip"
+            >
+              <UIcon :name="item.chipIcon" class="size-4 text-(--chip-icon-light) dark:text-(--chip-icon-dark)" />
+            </span>
+          </template>
+
+          <!-- the doc's font in its own face beside its working ramp -->
+          <template #item-description="{ item }">
+            <span class="flex items-center gap-2 pt-0.5">
+              <span class="text-xs text-muted truncate" :style="{ fontFamily: `'${item.font}', sans-serif` }">{{ item.font }}</span>
+
+              <span class="flex flex-1 h-1.5 rounded-full overflow-hidden ring ring-default min-w-0">
+                <span v-for="(stop, index) in item.ramp" :key="index" class="flex-1" :style="{ backgroundColor: stop }" />
+              </span>
+            </span>
+          </template>
+        </UListbox>
       </template>
-    </UDropdownMenu>
+    </UPopover>
 
     <UTooltip text="Random theme">
       <UButton
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index df8aa5d480..8b5078e225 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -41,6 +41,30 @@ function toggleColorMode() {
   colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
 }
 
+const appConfig = useAppConfig()
+const { style } = useThemeStudio()
+
+/**
+ * The mode tabs follow the app-wide default size setting like every other
+ * toolbar control — but one step down: tabs at the default size read a
+ * size too big next to the buttons.
+ */
+const SIZE_LADDER = ['xs', 'sm', 'md', 'lg', 'xl'] as const
+const modeTabsSize = computed(() => {
+  const base = style.value.defaults?.size
+  const index = SIZE_LADDER.indexOf((!base || base === 'default' ? 'md' : base) as typeof SIZE_LADDER[number])
+  return SIZE_LADDER[Math.max(0, index - 2)]
+})
+
+const modeTabItems = computed(() => [
+  { value: 'light', icon: appConfig.ui.icons.light },
+  { value: 'dark', icon: appConfig.ui.icons.dark }
+])
+const modeTab = computed({
+  get: () => (colorMode.value === 'dark' ? 'dark' : 'light'),
+  set: (value: string) => (colorMode.preference = value)
+})
+
 defineShortcuts({
   meta_z: undo,
   meta_shift_z: redo,
@@ -173,7 +197,22 @@ const shareMode = ref<'import' | 'export'>('export')
             </UPopover>
 
             <UTooltip text="Color mode" :kbds="['ctrl', 'shift', 'D']">
-              <UColorModeSwitch data-keep-panels class="shrink-0" />
+              <!-- mounted-gated: the preference is client-only and tabs
+                   would hydrate on the server's fallback -->
+              <UTabs
+                v-if="mounted"
+                v-model="modeTab"
+                data-keep-panels
+                :items="modeTabItems"
+                :content="false"
+                :size="modeTabsSize"
+                color="primary"
+                class="shrink-0"
+                :ui="{
+                  list: 'ring ring-accented ring-inset'
+                }"
+              />
+              <span v-else class="shrink-0 w-17" />
             </UTooltip>
 
             <span class="flex-1" />
diff --git a/docs/app/utils/theme.ts b/docs/app/utils/theme.ts
index 14379e00ef..f5dafd7db8 100644
--- a/docs/app/utils/theme.ts
+++ b/docs/app/utils/theme.ts
@@ -14,6 +14,22 @@ export function readLocalStorage<T>(key: string, fallback: T): T {
 /** Tailwind's stock weight ladder — set steps are absences at these values. */
 export const FONT_WEIGHT_DEFAULTS = { normal: 400, medium: 500, semibold: 600, bold: 700 } as const
 
+/**
+ * Load every listed family once (Google Fonts) so pickers can render
+ * themselves in the faces they offer. Shared by the controls and the
+ * preset menu — whichever mounts first wins.
+ */
+export function loadFontPreviews(fonts: readonly string[]) {
+  if (!import.meta.client || document.getElementById('font-previews')) return
+  const families = fonts.filter(name => name !== 'Public Sans')
+    .map(name => `family=${encodeURIComponent(name)}:wght@400;700`).join('&')
+  const link = document.createElement('link')
+  link.rel = 'stylesheet'
+  link.id = 'font-previews'
+  link.href = `https://fonts.googleapis.com/css2?${families}&display=swap`
+  document.head.appendChild(link)
+}
+
 /**
  * interact-outside handler: clicks on studio chrome marked data-keep-panels
  * (the color-mode switch) must not dismiss an open panel.

From 887d36a440945a28f3ef75385c8ca85ab03aa335 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 11 Jul 2026 22:47:52 +0200
Subject: [PATCH 135/185] fix(docs): refine theme studio components for
 improved usability

- Updated ThemeStudioColorMenu to adjust the size of the color indicator.
- Enhanced ThemeStudioControls with default values for font and heading options, and improved variant item handling.
- Modified ThemeStudioPaletteEditor to refine swatch interaction and tooltip behavior.
- Improved ThemeStudioPresetMenu to include icon samples and adjust layout for better readability.
- Adjusted ThemeStudioSliderRow for consistent styling and updated slider color settings.

These changes enhance the overall user experience and visual consistency across the theme studio components.
---
 .../theme-studio/ThemeStudioColorMenu.vue     |   2 +-
 .../theme-studio/ThemeStudioControls.vue      | 128 +++++++++++++-----
 .../theme-studio/ThemeStudioPaletteEditor.vue |   4 +
 .../theme-studio/ThemeStudioPresetMenu.vue    |  29 ++--
 .../theme-studio/ThemeStudioSliderRow.vue     |   6 +-
 docs/app/utils/theme-engine/presets.ts        |   8 +-
 6 files changed, 127 insertions(+), 50 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioColorMenu.vue b/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
index b7ba487fec..e2d9033509 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorMenu.vue
@@ -83,7 +83,7 @@ function isSelected(color: string) {
             @click="setBlackAsPrimary(true)"
           >
             <template #leading>
-              <span class="inline-block size-2 rounded-full bg-black dark:bg-white" />
+              <span class="inline-block h-2 w-4 rounded-full bg-black dark:bg-white" />
             </template>
           </UButton>
 
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 74e3cd4f5b..1e23c6cf92 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -95,6 +95,7 @@ const capitalize = (value: string) => value.charAt(0).toUpperCase() + value.slic
 const fontRows = [{
   key: 'base',
   label: 'Base',
+  defaultValue: 'Public Sans',
   selectIcon: 'i-lucide-type',
   items: computed(() => fonts.map(name => ({ label: name, value: name }))),
   font,
@@ -108,6 +109,7 @@ const fontRows = [{
 }, {
   key: 'heading',
   label: 'Headings (Prose)',
+  defaultValue: 'inherit',
   selectIcon: 'i-lucide-heading',
   items: headingFontItems,
   font: headingFont,
@@ -298,25 +300,33 @@ const borderShades = {
   dark: shadeSlider('borderShade', BORDER_SHADE_DEFAULTS, 'dark')
 }
 
+// MD is the stock default — one deduped entry storing 'default'
 const defaultSizeItems = [
-  { label: 'Default', value: 'default' },
-  { label: 'XS', value: 'xs' },
-  { label: 'SM', value: 'sm' },
-  { label: 'MD', value: 'md' },
-  { label: 'LG', value: 'lg' },
-  { label: 'XL', value: 'xl' }
+  { label: 'XS', value: 'xs', defaultTag: false },
+  { label: 'SM', value: 'sm', defaultTag: false },
+  { label: 'MD', value: 'default', defaultTag: true },
+  { label: 'LG', value: 'lg', defaultTag: false },
+  { label: 'XL', value: 'xl', defaultTag: false }
 ]
 
 // Per-group default variants, each offering only what its components
 // actually support (buttons add ghost, form fields run outline → none);
 // the app-wide `variant` (presets, shuffle) shows through as the fallback
 // until a group makes its own choice.
-const variantItems = (values: string[]) => ['default', ...values].map(value => ({ label: value.charAt(0).toUpperCase() + value.slice(1), value }))
+const variantItems = (values: string[]) => values.map(value => ({ label: value.charAt(0).toUpperCase() + value.slice(1), value }))
+
+/** Variant names UButton can render itself — the rest (none) fall back. */
+const RENDERABLE_VARIANTS = ['solid', 'outline', 'soft', 'subtle', 'ghost', 'link']
+
+/** Variant grid popovers close on pick — one open flag per group. */
+const variantGridOpen = reactive<Record<string, boolean>>({ buttons: false, panels: false, inputs: false })
 
+// `stock` is the library's own default variant — its cell wears the
+// "(Default)" tag and picking it clears the override instead of pinning.
 const variantGroupFields = [
-  { key: 'buttons' as const, label: 'Button Defaults', hasColor: true, items: variantItems(['solid', 'outline', 'soft', 'subtle', 'ghost', 'link']) },
-  { key: 'panels' as const, label: 'Card Defaults', hasColor: false, items: variantItems(['solid', 'outline', 'soft', 'subtle']) },
-  { key: 'inputs' as const, label: 'Input Defaults', hasColor: true, items: variantItems(['outline', 'soft', 'subtle', 'ghost', 'none']) }
+  { key: 'buttons' as const, label: 'Button Defaults', hasColor: true, stock: 'solid', items: variantItems(['solid', 'outline', 'soft', 'subtle', 'ghost', 'link']) },
+  { key: 'panels' as const, label: 'Card Defaults', hasColor: false, stock: 'outline', items: variantItems(['solid', 'outline', 'soft', 'subtle']) },
+  { key: 'inputs' as const, label: 'Input Defaults', hasColor: true, stock: 'outline', items: variantItems(['outline', 'soft', 'subtle', 'ghost', 'none']) }
 ]
 
 function groupVariantModel(group: VariantGroup) {
@@ -360,11 +370,17 @@ function groupVariantModel(group: VariantGroup) {
 
 const groupVariants = Object.fromEntries(variantGroupFields.map(field => [field.key, groupVariantModel(field.key)])) as Record<VariantGroup, ReturnType<typeof groupVariantModel>>
 
-const defaultColorItems = ['default', 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'].map(value => ({
-  label: value.charAt(0).toUpperCase() + value.slice(1),
-  value,
-  chip: value === 'default' ? undefined : { color: value as any }
-}))
+// Primary IS the stock default — one entry, tagged, storing 'default'
+// (an explicit 'primary' would export a no-op override).
+const defaultColorItems = [
+  { label: 'Primary', value: 'default', chip: { color: 'primary' as any }, defaultTag: true },
+  ...['secondary', 'success', 'info', 'warning', 'error', 'neutral'].map(value => ({
+    label: value.charAt(0).toUpperCase() + value.slice(1),
+    value,
+    chip: { color: value as any },
+    defaultTag: false
+  }))
+]
 
 function groupColorModel(group: VariantGroup) {
   return computed({
@@ -376,7 +392,11 @@ function groupColorModel(group: VariantGroup) {
 const groupColors = Object.fromEntries(variantGroupFields.map(field => [field.key, groupColorModel(field.key)])) as Record<VariantGroup, ReturnType<typeof groupColorModel>>
 
 const defaultSize = computed({
-  get: () => style.value.defaults?.size || 'default',
+  // legacy saved prefs may still pin 'md' explicitly — it IS the default
+  get: () => {
+    const size = style.value.defaults?.size || 'default'
+    return size === 'md' ? 'default' : size
+  },
   set: (value: any) => setStyle({ defaults: { ...style.value.defaults, size: value } })
 })
 
@@ -582,7 +602,7 @@ const shadowSections = [{
             </div>
 
             <template v-for="row in fontRows" :key="row.key">
-              <span class="text-xs font-semibold text-muted select-none" :class="row.key === 'heading' && 'pt-1'">{{ row.label }}</span>
+              <span class="text-xs font-medium text-muted select-none" :class="row.key === 'heading' && 'pt-1'">{{ row.label }}</span>
 
               <div class="flex items-center gap-1.5">
                 <UPopover v-model:open="fontListOpen[row.key]" :content="{ align: 'start' }" class="flex-1 min-w-0">
@@ -599,7 +619,7 @@ const shadowSections = [{
                     <span
                       class="truncate"
                       :style="row.font.value === 'inherit' ? undefined : { fontFamily: `'${row.font.value}', sans-serif` }"
-                    >{{ row.items.value.find(item => item.value === row.font.value)?.label ?? row.font.value }}</span>
+                    >{{ row.items.value.find(item => item.value === row.font.value)?.label ?? row.font.value }}<span v-if="row.font.value === row.defaultValue" class="text-dimmed font-normal">&nbsp;(Default)</span></span>
                   </UButton>
 
                   <template #content>
@@ -608,11 +628,12 @@ const shadowSections = [{
                       v-model="row.font.value"
                       :items="row.items.value"
                       value-key="value"
-                      class="w-72 max-h-80 overflow-y-auto"
+                      class="w-72"
+                      :ui="{ root: 'ring-0 rounded-md', content: 'max-h-80' }"
                       @update:model-value="fontListOpen[row.key] = false"
                     >
                       <template #item-label="{ item }">
-                        <span :style="item.value === 'inherit' ? undefined : { fontFamily: `'${item.value}', sans-serif` }">{{ item.label }}</span>
+                        <span :style="item.value === 'inherit' ? undefined : { fontFamily: `'${item.value}', sans-serif` }">{{ item.label }}</span><span v-if="item.value === row.defaultValue" class="text-dimmed">&nbsp;(Default)</span>
                       </template>
 
                       <template #item-description="{ item }">
@@ -752,7 +773,8 @@ const shadowSections = [{
                   v-model="icon"
                   :items="icons"
                   value-key="value"
-                  class="w-72 max-h-80 overflow-y-auto"
+                  class="w-72"
+                  :ui="{ root: 'ring-0 rounded-md', content: 'max-h-80' }"
                   @update:model-value="iconListOpen = false"
                 >
                   <template #item-description="{ item }">
@@ -806,7 +828,15 @@ const shadowSections = [{
                 icon="i-lucide-proportions"
                 :items="defaultSizeItems"
                 class="flex-1"
-              />
+              >
+                <template #default>
+                  {{ defaultSizeItems.find(item => item.value === defaultSize)?.label }}<span v-if="defaultSize === 'default'" class="text-dimmed">&nbsp;(Default)</span>
+                </template>
+
+                <template #item-label="{ item }">
+                  {{ item.label }}<span v-if="item.defaultTag" class="text-dimmed">&nbsp;(Default)</span>
+                </template>
+              </USelect>
             </div>
           </div>
         </ThemeStudioSection>
@@ -819,15 +849,39 @@ const shadowSections = [{
               <div class="flex items-center gap-2">
                 <span class="text-xs text-muted w-13 shrink-0 select-none">Variant</span>
 
-                <USelect
-                  v-model="groupVariants[field.key].value"
-                  size="sm"
-                  color="neutral"
-                  variant="subtle"
-                  icon="i-lucide-layers"
-                  :items="field.items"
-                  class="flex-1"
-                />
+                <UPopover v-model:open="variantGridOpen[field.key]" :content="{ side: 'bottom', align: 'start' }" class="flex-1">
+                  <UButton
+                    size="sm"
+                    color="neutral"
+                    variant="subtle"
+                    block
+                    icon="i-lucide-layers"
+                    trailing-icon="i-lucide-chevron-down"
+                    :ui="{ label: 'flex-1 text-left' }"
+                    :aria-label="`${field.label} variant`"
+                  >
+                    {{ field.items.find(item => item.value === (groupVariants[field.key].value === 'default' ? field.stock : groupVariants[field.key].value))?.label }}<span v-if="groupVariants[field.key].value === 'default'" class="text-dimmed font-normal">&nbsp;(Default)</span>
+                  </UButton>
+
+                  <template #content>
+                    <!-- each cell renders IN the variant it picks -->
+                    <div class="w-64 p-2 grid grid-cols-2 gap-1">
+                      <UButton
+                        v-for="item in field.items"
+                        :key="item.value"
+                        size="sm"
+                        block
+                        :color="(groupVariants[field.key].value === item.value || (groupVariants[field.key].value === 'default' && item.value === field.stock)) ? 'primary' : 'neutral'"
+                        :variant="RENDERABLE_VARIANTS.includes(item.value) ? (item.value as any) : 'subtle'"
+                        :class="[item.value === 'none' && 'opacity-60', 'min-w-0']"
+                        @click="groupVariants[field.key].value = (item.value === field.stock ? 'default' : item.value); variantGridOpen[field.key] = false"
+                      >
+                        <!-- opacity, not a color: text-dimmed would fight the variant's own text color -->
+                        <span class="truncate">{{ item.label }}<span v-if="item.value === field.stock" class="opacity-70 font-normal">&nbsp;(Default)</span></span>
+                      </UButton>
+                    </div>
+                  </template>
+                </UPopover>
               </div>
 
               <div v-if="field.hasColor" class="flex items-center gap-2">
@@ -843,12 +897,18 @@ const shadowSections = [{
                 >
                   <template #leading>
                     <UChip
-                      v-if="groupColors[field.key].value !== 'default'"
-                      :color="groupColors[field.key].value as any"
+                      :color="(groupColors[field.key].value === 'default' ? 'primary' : groupColors[field.key].value) as any"
                       inset
                       standalone
                     />
-                    <UIcon v-else name="i-lucide-palette" class="size-4 shrink-0 text-dimmed" />
+                  </template>
+
+                  <template #default>
+                    {{ defaultColorItems.find(item => item.value === groupColors[field.key].value)?.label }}<span v-if="groupColors[field.key].value === 'default'" class="text-dimmed">&nbsp;(Default)</span>
+                  </template>
+
+                  <template #item-label="{ item }">
+                    {{ item.label }}<span v-if="item.defaultTag" class="text-dimmed">&nbsp;(Default)</span>
                   </template>
                 </USelect>
               </div>
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 575a94f1cf..ff9afa3e13 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -86,6 +86,9 @@ const hoveredShade = ref<number>()
 let hoverLeaveTimeout: ReturnType<typeof setTimeout> | undefined
 
 function onSwatchEnter(shade: number) {
+  // a pin means "I'm reading this one" — other swatches don't hover-open
+  // until it's released (clicking another still migrates the pin)
+  if (pinnedShade.value !== undefined && pinnedShade.value !== shade) return
   clearTimeout(hoverLeaveTimeout)
   hoveredShade.value = shade
 }
@@ -327,6 +330,7 @@ function resetEffects() {
               :open="pinnedShade === info.shade || hoveredShade === info.shade"
               :content="{
                 side: 'right',
+                sideOffset: 0,
                 // hover-opened popovers must not steal focus; a pinned one
                 // takes it so Tab lands on the copy/pin buttons
                 onOpenAutoFocus: pinnedShade === info.shade ? undefined : (event: Event) => event.preventDefault(),
diff --git a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
index 563c8fb8a5..fd26d62461 100644
--- a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { resolveAlias, resolveShade, SHADES } from '../../utils/theme-engine'
+import { resolveAlias, resolveShade } from '../../utils/theme-engine'
 import type { ThemeDoc, Shade } from '../../utils/theme-engine'
+import { themeIcons } from '../../utils/theme'
 
 /** The presets listbox (theme chips, fonts and ramps) plus the shuffle die. */
 const props = defineProps<{
@@ -42,10 +43,12 @@ function themeChip(doc: ThemeDoc) {
   }
 }
 
-/** The doc's working ramp — primary, or the neutral when black leads. */
-function rampStops(doc: ThemeDoc): string[] {
-  const alias = doc.blackAsPrimary ? 'neutral' : 'primary'
-  return SHADES.map(shade => resolveShade(doc, resolveAlias(doc, alias), shade)).filter((color): color is string => !!color)
+/** A taste of the doc's icon set (its own, or the default lucide). */
+function iconSamples(doc: ThemeDoc): string[] {
+  const sets = themeIcons as Record<string, Record<string, string>>
+  const set = sets[doc.icons ?? 'lucide'] ?? sets.lucide!
+  // upload, search and folder vary the most between the sets
+  return ['upload', 'search', 'folder'].map(key => set[key]!)
 }
 
 const presetItems = computed(() => presets.map(preset => ({
@@ -54,7 +57,7 @@ const presetItems = computed(() => presets.map(preset => ({
   chipIcon: preset.icon,
   themeChip: themeChip(preset.doc),
   font: preset.doc.font?.sans ?? 'Public Sans',
-  ramp: rampStops(preset.doc)
+  iconSamples: iconSamples(preset.doc)
 })))
 
 // the rows render their own font names — load the faces once
@@ -106,25 +109,29 @@ const presetLabel = computed(() => {
           value-key="id"
           class="w-80"
           :ui="{
+            root: 'ring-0 rounded-md',
+            content: 'max-h-96',
             item: 'gap-3'
           }"
         >
           <template #item-leading="{ item }">
             <span
-              class="flex items-center justify-center size-9 rounded-md ring ring-default shrink-0 bg-[image:var(--chip-bg-light)] dark:bg-[image:var(--chip-bg-dark)]"
+              class="flex items-center justify-center size-10 rounded-md ring ring-default shrink-0 bg-[image:var(--chip-bg-light)] dark:bg-[image:var(--chip-bg-dark)]"
               :style="item.themeChip"
             >
               <UIcon :name="item.chipIcon" class="size-4 text-(--chip-icon-light) dark:text-(--chip-icon-dark)" />
             </span>
           </template>
 
-          <!-- the doc's font in its own face beside its working ramp -->
+          <!-- the doc's font in its own face and a taste of its icon set -->
           <template #item-description="{ item }">
             <span class="flex items-center gap-2 pt-0.5">
-              <span class="text-xs text-muted truncate" :style="{ fontFamily: `'${item.font}', sans-serif` }">{{ item.font }}</span>
+              <span class="shrink-0 text-xs text-muted truncate" :style="{ fontFamily: `'${item.font}', sans-serif` }">{{ item.font }}</span>
 
-              <span class="flex flex-1 h-1.5 rounded-full overflow-hidden ring ring-default min-w-0">
-                <span v-for="(stop, index) in item.ramp" :key="index" class="flex-1" :style="{ backgroundColor: stop }" />
+              <span class="text-dimmed select-none">·</span>
+
+              <span class="flex items-center gap-1 shrink-0">
+                <UIcon v-for="name in item.iconSamples" :key="name" :name="name" class="size-3 text-dimmed" />
               </span>
             </span>
           </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
index 13af689763..dc520e8eb2 100644
--- a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
@@ -56,11 +56,11 @@ const display = computed(() => shade.value
     size="xs"
     :style="sliderColor ? { '--slider-color': sliderColor, '--slider-contrast': contrastColor } : undefined"
     :ui="{
-      root: 'flex items-center gap-2 px-1',
+      root: 'flex items-center gap-2',
       wrapper: 'w-13 shrink-0',
       /* truncate only text labels — its overflow:hidden would clip the
          shade chip's ring once thick-border themes inflate it */
-      label: `w-full text-muted select-none${icon || shade ? '' : ' truncate'}`,
+      label: `w-full text-muted font-normal select-none${icon || shade ? '' : ' truncate'}`,
       container: 'flex-1 flex items-center gap-2 mt-0'
     }"
   >
@@ -80,7 +80,7 @@ const display = computed(() => shade.value
       :min="min"
       :max="max"
       :step="step"
-      color="neutral"
+      color="primary"
       size="xs"
       :aria-label="label ?? mode"
       :ui="sliderColor ? {
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 43f6be00bf..4c5ad18df6 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -77,6 +77,7 @@ export const presets: ThemePreset[] = [{
     },
     radius: 0.5,
     font: { sans: 'Outfit' },
+    icons: 'tabler',
     // Framed everything in near-black ink, straight-down hard shadows, soft
     // inked inputs, and both modes retuned shade-by-shade toward carbon.
     style: {
@@ -89,7 +90,7 @@ export const presets: ThemePreset[] = [{
       defaults: { variants: { buttons: 'solid', panels: 'subtle', inputs: 'subtle' } },
       tokenShades: {
         '--ui-bg': { light: 50, dark: 800 },
-        '--ui-bg-muted': { light: 300 },
+        '--ui-bg-muted': { light: 300, dark: 700 },
         '--ui-bg-elevated': { light: 300, dark: 700 },
         '--ui-bg-accented': { light: 400, dark: 600 },
         '--ui-bg-inverted': { light: 900, dark: 50 },
@@ -138,6 +139,7 @@ export const presets: ThemePreset[] = [{
       neutral: 'grove'
     },
     font: { sans: 'DM Sans' },
+    icons: 'remix',
     tokens: {
       light: {
         '--ui-bg': 'var(--ui-color-neutral-50)',
@@ -208,6 +210,7 @@ export const presets: ThemePreset[] = [{
     },
     radius: 0.375,
     font: { sans: 'Poppins' },
+    icons: 'phosphor',
     tokens: {
       light: {
         '--ui-bg': 'var(--ui-color-neutral-50)',
@@ -278,6 +281,7 @@ export const presets: ThemePreset[] = [{
     // One flat 600 across every weight step — comic lettering has a single
     // stroke width, and Comic Neue's 400 reads too thin for the look.
     font: { sans: 'Comic Neue', weights: { normal: 600, medium: 600, semibold: 600, bold: 600 } },
+    icons: 'iconoir',
     // Inked page: near-black default AND accented borders over muted panel
     // edges, deep red at 600 in light, flat 50s inversions in dark.
     tokens: {
@@ -360,6 +364,7 @@ export const presets: ThemePreset[] = [{
     },
     radius: 0.375,
     font: { sans: 'DM Sans' },
+    icons: 'heroicons',
     // Deep cream page over ivory surfaces in light, with the border family
     // stepped one deeper to hold on the tinted page; one flat 800 surface
     // family in dark, with the brand clay held at 500.
@@ -441,6 +446,7 @@ export const presets: ThemePreset[] = [{
     },
     radius: 0.5,
     font: { sans: 'DM Sans' },
+    icons: 'material',
     tokens: {
       dark: {
         '--ui-bg': 'var(--ui-color-neutral-950)',

From 87a425d5b64d8e0adb6c0c43b39303804a22b296 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 11 Jul 2026 22:58:10 +0200
Subject: [PATCH 136/185] feat(docs): enhance theme studio components with
 default values and styling updates

- Added default value support for sliders in ThemeStudioColorSection and ThemeStudioControls to improve user experience.
- Updated color properties in ThemeStudioControls to use 'primary' instead of 'neutral' for better visual consistency.
- Enhanced ThemeStudioSliderRow to display a "Default" label when the slider is at its default value, improving clarity for users.
- Adjusted theme.vue to refine the listbox styling for a more polished appearance.

These changes collectively enhance the usability and visual coherence of the theme studio components.
---
 .../theme-studio/ThemeStudioColorSection.vue  |  2 ++
 .../theme-studio/ThemeStudioControls.vue      |  6 ++++--
 .../theme-studio/ThemeStudioSliderRow.vue     | 20 +++++++++++++++----
 docs/app/pages/theme.vue                      |  2 +-
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioColorSection.vue b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
index 91241e2e09..aedeb51e86 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
@@ -103,6 +103,7 @@ const openGroups = reactive<Record<string, boolean>>({})
           v-model="slider.value"
           :mode="modeName"
           :chip="rampChip(alias)"
+          :default-value="SHADES.indexOf(sections[0]!.defaults[modeName] as typeof SHADES[number])"
         />
       </div>
 
@@ -132,6 +133,7 @@ const openGroups = reactive<Record<string, boolean>>({})
                   v-model="slider.value"
                   :mode="modeName"
                   :chip="rampChip(section.ramp)"
+                  :default-value="SHADES.indexOf(section.defaults[modeName] as typeof SHADES[number])"
                 />
               </div>
             </div>
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 1e23c6cf92..abaadde0bf 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -480,7 +480,7 @@ const shadowSections = [{
                 :items="section.options"
                 :content="false"
                 size="xs"
-                color="neutral"
+                color="primary"
                 class="w-full"
               />
 
@@ -502,6 +502,7 @@ const shadowSections = [{
                     v-model="slider.value"
                     :mode="modeName"
                     :chip="section.color.value === 'primary-shade' ? primaryChip : neutralChip"
+                    :default-value="SHADES.indexOf(SHADOW_SHADE_DEFAULTS[modeName] as typeof SHADES[number])"
                   />
                 </template>
 
@@ -540,7 +541,7 @@ const shadowSections = [{
               :items="borderOptions"
               :content="false"
               size="xs"
-              color="neutral"
+              color="primary"
               class="w-full"
             />
 
@@ -579,6 +580,7 @@ const shadowSections = [{
                   v-model="slider.value"
                   :mode="modeName"
                   :chip="borderColor === 'primary-shade' ? primaryChip : neutralChip"
+                  :default-value="SHADES.indexOf(BORDER_SHADE_DEFAULTS[modeName] as typeof SHADES[number])"
                 />
               </template>
             </div>
diff --git a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
index dc520e8eb2..0744ba835b 100644
--- a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
@@ -21,6 +21,8 @@ const props = withDefaults(defineProps<{
   chip?: string
   /** …for this color mode. */
   mode?: 'light' | 'dark'
+  /** Resting value — the readout says "Default" while the slider sits on it. */
+  defaultValue?: number
 }>(), {
   min: 0,
   max: SHADES.length - 1,
@@ -43,10 +45,20 @@ const contrastColor = computed(() => shade.value
   ? `oklch(from ${sliderColor.value} clamp(0.12, (0.66 - l) * 1000, 0.95) 0 h / 0.65)`
   : undefined)
 
+const atDefault = computed(() => props.defaultValue !== undefined && value.value === props.defaultValue)
+
 /** `0.25rem` reads as `.25rem` — the leading zero is noise at this width. */
-const display = computed(() => shade.value
-  ? String(SHADES[value.value])
-  : `${String(value.value).replace(/^(-?)0\./, '$1.')}${props.unit ?? ''}`)
+const display = computed(() => {
+  if (atDefault.value) return 'Default'
+  return shade.value
+    ? String(SHADES[value.value])
+    : `${String(value.value).replace(/^(-?)0\./, '$1.')}${props.unit ?? ''}`
+})
+
+/** The tooltip keeps naming the real value while the readout says Default. */
+const displayTitle = computed(() => atDefault.value
+  ? `${shade.value ? SHADES[value.value] : value.value} (default)`
+  : display.value)
 </script>
 
 <template>
@@ -89,6 +101,6 @@ const display = computed(() => shade.value
       } : undefined"
     />
 
-    <span class="text-xs text-dimmed font-mono w-12 text-right shrink-0 truncate" :title="display">{{ display }}</span>
+    <span class="text-xs text-dimmed font-mono w-12 text-right shrink-0 truncate" :title="displayTitle">{{ display }}</span>
   </UFormField>
 </template>
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 8b5078e225..2967441eb0 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -209,7 +209,7 @@ const shareMode = ref<'import' | 'export'>('export')
                 color="primary"
                 class="shrink-0"
                 :ui="{
-                  list: 'ring ring-accented ring-inset'
+                  list: 'ring ring-accented ring-inset rounded-md'
                 }"
               />
               <span v-else class="shrink-0 w-17" />

From da65ac0981c433658a77cb7bd77a42ae47a350e2 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 12 Jul 2026 00:26:01 +0200
Subject: [PATCH 137/185] feat(docs): enhance Playground and Theme Studio
 components with new features

- Added an "Un-contributors" section in PlaygroundContributors.vue to highlight contributors.
- Improved ThemeStudioPaletteEditor.vue with refined swatch interaction and tooltip behavior, including new escape handling for pinned swatches.
- Introduced a dice-rolling animation in ThemeStudioPresetMenu.vue, enhancing the random theme selection experience with visual feedback.

These updates collectively improve user engagement and interaction within the theme studio and playground components.
---
 .../playground/PlaygroundContributors.vue     |  31 +++++
 .../theme-studio/ThemeStudioPaletteEditor.vue |  39 +++++-
 .../theme-studio/ThemeStudioPresetMenu.vue    | 121 +++++++++++++++++-
 3 files changed, 185 insertions(+), 6 deletions(-)

diff --git a/docs/app/components/playground/PlaygroundContributors.vue b/docs/app/components/playground/PlaygroundContributors.vue
index 4e0ea80e32..a139a74c9c 100644
--- a/docs/app/components/playground/PlaygroundContributors.vue
+++ b/docs/app/components/playground/PlaygroundContributors.vue
@@ -33,5 +33,36 @@ const usernames = [
         +300
       </div>
     </div>
+
+    <USeparator />
+
+    <div class="flex items-start justify-between">
+      <p class="font-semibold text-highlighted">
+        Un-contributors
+      </p>
+      <UBadge color="neutral" variant="subtle">
+        -1
+      </UBadge>
+    </div>
+
+    <!-- easter egg: the studio's builder -->
+    <div class="flex items-center justify-between gap-3">
+      <UUser
+        name="Mike Newbon"
+        description="@mikenewbon"
+        :avatar="{ src: 'https://github.com/mikenewbon.png', alt: 'mikenewbon' }"
+        size="sm"
+      />
+
+      <UButton
+        icon="i-simple-icons-github"
+        color="neutral"
+        variant="outline"
+        size="xs"
+        to="https://github.com/mikenewbon"
+        target="_blank"
+        aria-label="Find Mike Newbon on GitHub"
+      />
+    </div>
   </div>
 </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index ff9afa3e13..0467a55e76 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -105,13 +105,40 @@ function togglePin(shade: number) {
   pinnedShade.value = pinnedShade.value === shade ? undefined : shade
 }
 
-/** Reka-side dismissals (Esc, outside click) clear pin and hover both. */
+/**
+ * Reka emits update:open(false) for trigger clicks as well as dismissals —
+ * clearing the pin here would race togglePin into re-pinning. Only hover
+ * intent clears; the pin is released by togglePin or Esc alone.
+ */
 function onSwatchOpenUpdate(shade: number, open: boolean) {
   if (open) return
-  if (pinnedShade.value === shade) pinnedShade.value = undefined
   if (hoveredShade.value === shade) hoveredShade.value = undefined
 }
 
+function onSwatchEscape(shade: number) {
+  if (pinnedShade.value === shade) pinnedShade.value = undefined
+}
+
+/**
+ * A closing hover-popover would return focus to its trigger tile — Reka
+ * treats that focusin as focus-outside on the popover that just opened and
+ * dismisses it (hover A→B closed B). Only keyboard flows (focus actually
+ * inside the closing content) keep the focus return.
+ */
+function onSwatchCloseAutoFocus(event: Event) {
+  // "inside a popper wrapper" is not enough — the whole palette editor
+  // lives in the Colors panel's wrapper. Only a swatch DETAIL popover
+  // (recognizable by its copy button) marks a keyboard flow.
+  const wrapper = document.activeElement?.closest('[data-reka-popper-content-wrapper]')
+  if (!wrapper?.querySelector('[aria-label^="Copy oklch"]')) {
+    event.preventDefault()
+  }
+}
+
+/** The strip element — every swatch popover anchors to it, not its tile. */
+const stripRef = useTemplateRef<HTMLElement>('stripRef')
+const stripEl = computed(() => stripRef.value ?? undefined)
+
 /**
  * Every axis is a fixed 1:1 window — the full physical range fits the
  * canvas, so dragging never pans or rescales under the pointer. Hue params
@@ -323,13 +350,17 @@ function resetEffects() {
             @drag-end="onDragEnd"
           />
 
-          <div class="flex rounded-b-sm overflow-hidden ring ring-default">
+          <div ref="stripRef" class="flex rounded-b-sm overflow-hidden ring ring-default">
             <UPopover
               v-for="info in swatchInfo"
               :key="info.shade"
+              arrow
               :open="pinnedShade === info.shade || hoveredShade === info.shade"
+              :reference="stripEl"
               :content="{
-                side: 'right',
+                side: 'top',
+                onEscapeKeyDown: () => onSwatchEscape(info.shade),
+                onCloseAutoFocus: onSwatchCloseAutoFocus,
                 sideOffset: 0,
                 // hover-opened popovers must not steal focus; a pinned one
                 // takes it so Tab lands on the copy/pin buttons
diff --git a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
index fd26d62461..7f0aeea4e0 100644
--- a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
@@ -76,6 +76,63 @@ const selected = computed({
 // the boolean prop shadows the util in template scope — alias the handler
 const onKeepPanels = keepPanels
 
+/**
+ * The shuffle die rolls: the icon spins once while cycling faces, then
+ * settles on a random face that sticks around until the next roll.
+ * Reduced-motion users get the plain shuffle.
+ */
+const DICE_FACES = ['i-lucide-dice-1', 'i-lucide-dice-2', 'i-lucide-dice-3', 'i-lucide-dice-4', 'i-lucide-dice-5', 'i-lucide-dice-6']
+const diceFace = ref('i-lucide-dices')
+const rolling = ref(false)
+
+// keep in sync with the dice-roll keyframes: total duration and the
+// percentage stops where the die hits an edge — each impact flips the face.
+// Tuned on the bench: 6 wall hits, constant travel, 1.3× slowdown per
+// crossing, 1.5 turns with 0.8× spin decay, 12% squash, 12% button bump.
+const ROLL_MS = 675
+const HIT_FRACTIONS = [0.064, 0.147, 0.255, 0.395, 0.578, 0.815]
+let rollTimers: Array<ReturnType<typeof setTimeout>> = []
+
+function randomFace() {
+  return DICE_FACES[Math.floor(Math.random() * DICE_FACES.length)]!
+}
+
+function clearRollTimers() {
+  rollTimers.forEach(timer => clearTimeout(timer))
+  rollTimers = []
+}
+
+async function rollDice() {
+  shuffle()
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    diceFace.value = randomFace()
+    return
+  }
+  // drop the class for a tick so a mid-roll re-click restarts the animation
+  clearRollTimers()
+  rolling.value = false
+  await nextTick()
+  rolling.value = true
+  rollTimers = HIT_FRACTIONS.map(fraction => setTimeout(() => (diceFace.value = randomFace()), ROLL_MS * fraction))
+  // animationend settles the roll; this is only a safety net for
+  // environments that never fire it
+  rollTimers.push(setTimeout(onRollEnd, ROLL_MS + 400))
+}
+
+/**
+ * The animation clock decides the end — a JS timer would race it and
+ *  snap the tumble back a few frames early.
+ */
+function onRollEnd(event?: AnimationEvent) {
+  if (event && !event.animationName.includes('dice-roll')) return
+  if (!rolling.value) return
+  clearRollTimers()
+  rolling.value = false
+  // no swap here: the face thrown on the last bounce IS the result
+}
+
+onUnmounted(clearRollTimers)
+
 /** The applied preset's name; 'Custom' once edits diverge from it. */
 const presetLabel = computed(() => {
   if (!mounted.value) return 'Presets'
@@ -141,13 +198,73 @@ const presetLabel = computed(() => {
 
     <UTooltip text="Random theme">
       <UButton
-        icon="i-lucide-dices"
+        :icon="diceFace"
         color="neutral"
         variant="subtle"
         :size="size"
         aria-label="Random theme"
-        @click="shuffle"
+        :class="rolling && 'dice-bumping'"
+        :ui="{ leadingIcon: rolling ? 'dice-rolling' : undefined }"
+        @click="rollDice"
+        @animationend="onRollEnd"
       />
     </UTooltip>
   </div>
 </template>
+
+<style scoped>
+/* Bench-tuned (dice tuner artifact): a die in a fixed box — constant
+   wall-to-wall travel, each crossing 1.3× slower than the last, spin
+   decaying 0.8× per hit, 12% squash on impact, held ~10ms. Impact stops
+   mirror HIT_FRACTIONS; the rotation ends on -540° (pips are 180°-
+   symmetric, so the settled face still reads upright). */
+@keyframes dice-roll {
+  0% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
+  6.4% { transform: translate(-8px, 6px) rotate(-73deg) scale(0.88); }
+  7.9% { transform: translate(-8px, 6px) rotate(-73deg) scale(1); }
+  14.7% { transform: translate(7.2px, -5.6px) rotate(-149deg) scale(0.88); }
+  16.2% { transform: translate(7.2px, -5.6px) rotate(-149deg) scale(1); }
+  25.5% { transform: translate(-6px, -6.8px) rotate(-228deg) scale(0.88); }
+  27% { transform: translate(-6px, -6.8px) rotate(-228deg) scale(1); }
+  39.5% { transform: translate(6.8px, 4.8px) rotate(-310deg) scale(0.88); }
+  41% { transform: translate(6.8px, 4.8px) rotate(-310deg) scale(1); }
+  57.8% { transform: translate(-7.2px, 2.8px) rotate(-396deg) scale(0.88); }
+  59.3% { transform: translate(-7.2px, 2.8px) rotate(-396deg) scale(1); }
+  81.5% { transform: translate(5.6px, -6.4px) rotate(-485deg) scale(0.88); }
+  83% { transform: translate(5.6px, -6.4px) rotate(-485deg) scale(1); }
+  100% { transform: translate(0px, 0px) rotate(-540deg) scale(1); }
+}
+
+/* the container pops with every hit, fading as the die loses energy */
+@keyframes dice-bump {
+  0% { transform: scale(1); }
+  2.9% { transform: scale(1); }
+  6.4% { transform: scale(1.12); }
+  9.9% { transform: scale(1); }
+  11.2% { transform: scale(1); }
+  14.7% { transform: scale(1.096); }
+  18.2% { transform: scale(1); }
+  22% { transform: scale(1); }
+  25.5% { transform: scale(1.077); }
+  29% { transform: scale(1); }
+  36% { transform: scale(1); }
+  39.5% { transform: scale(1.061); }
+  43% { transform: scale(1); }
+  54.3% { transform: scale(1); }
+  57.8% { transform: scale(1.049); }
+  61.3% { transform: scale(1); }
+  78% { transform: scale(1); }
+  81.5% { transform: scale(1.039); }
+  85% { transform: scale(1); }
+  100% { transform: scale(1); }
+}
+
+/* the icon span renders inside UButton — scoped rules need :deep() */
+:deep(.dice-rolling) {
+  animation: dice-roll 675ms linear forwards;
+}
+
+.dice-bumping {
+  animation: dice-bump 675ms linear forwards;
+}
+</style>

From ff6dba76bd1c7946a1215a2b418e81a63cc41e57 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 12 Jul 2026 00:27:07 +0200
Subject: [PATCH 138/185] feat(docs): update PlaygroundContributors.vue to
 enhance contributor visibility

- Added a descriptive subtitle "Making a mess." under the "Un-contributors" section to provide context and improve user understanding of the contributors' role.
- Wrapped the "Un-contributors" title and subtitle in a div for better layout management.

These changes aim to enhance the clarity and presentation of contributor information in the Playground component.
---
 .../components/playground/PlaygroundContributors.vue  | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/docs/app/components/playground/PlaygroundContributors.vue b/docs/app/components/playground/PlaygroundContributors.vue
index a139a74c9c..d7196f8b7d 100644
--- a/docs/app/components/playground/PlaygroundContributors.vue
+++ b/docs/app/components/playground/PlaygroundContributors.vue
@@ -37,9 +37,14 @@ const usernames = [
     <USeparator />
 
     <div class="flex items-start justify-between">
-      <p class="font-semibold text-highlighted">
-        Un-contributors
-      </p>
+      <div>
+        <p class="font-semibold text-highlighted">
+          Un-contributors
+        </p>
+        <p class="text-sm text-muted">
+          Making a mess.
+        </p>
+      </div>
       <UBadge color="neutral" variant="subtle">
         -1
       </UBadge>

From 2bd89a0f1272b11beaabb1a09ce3a0cb6af64386 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 12 Jul 2026 00:54:08 +0200
Subject: [PATCH 139/185] feat(docs): enhance theme studio components with
 reset functionality

- Introduced a reset feature in ThemeStudioColorSection and ThemeStudioSection, allowing users to reset sections to their preset values.
- Added dirty state tracking for each section in ThemeStudioControls, improving user feedback on unsaved changes.
- Updated ThemeStudioShareModal to clear the active preset upon import, ensuring accurate dirty state tracking.
- Created a new sections utility in theme-engine to manage section-specific logic, including dirty checks and merging functionality.

These enhancements improve the usability and interactivity of the theme studio, providing users with better control over their theme settings.
---
 .../theme-studio/ThemeStudioColorSection.vue  |   7 +-
 .../theme-studio/ThemeStudioControls.vue      |  71 +++-
 .../theme-studio/ThemeStudioSection.vue       |  20 ++
 .../theme-studio/ThemeStudioShareModal.vue    |   5 +-
 docs/app/composables/useThemeStudio.ts        |  57 ++-
 docs/app/pages/theme.vue                      |  23 +-
 docs/app/utils/theme-engine/index.ts          |   1 +
 docs/app/utils/theme-engine/sections.ts       | 324 ++++++++++++++++++
 8 files changed, 481 insertions(+), 27 deletions(-)
 create mode 100644 docs/app/utils/theme-engine/sections.ts

diff --git a/docs/app/components/theme-studio/ThemeStudioColorSection.vue b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
index aedeb51e86..2aca967030 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
@@ -13,8 +13,13 @@ const props = defineProps<{
   /** Header text — defaults to the capitalized alias. */
   label?: string
   helpTo?: string
+  /** Passed through to the section header's reset affordance. */
+  resettable?: boolean
+  dirty?: boolean
 }>()
 
+const emit = defineEmits<{ reset: [] }>()
+
 const { style, setStyle, rampChip } = useThemeStudio()
 
 const title = computed(() => props.label ?? props.alias.charAt(0).toUpperCase() + props.alias.slice(1))
@@ -60,7 +65,7 @@ const openGroups = reactive<Record<string, boolean>>({})
 </script>
 
 <template>
-  <ThemeStudioSection :label="title" :help-to="helpTo">
+  <ThemeStudioSection :label="title" :help-to="helpTo" :resettable="resettable" :dirty="dirty" @reset="emit('reset')">
     <template #actions>
       <UTooltip text="Adjust shades">
         <UButton
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index abaadde0bf..516d898931 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -20,7 +20,13 @@ const {
   icons
 } = useTheme()
 
-const { style, setStyle, primaryChip, neutralChip } = useThemeStudio()
+const { style, setStyle, primaryChip, neutralChip, sectionDirty, resetSection } = useThemeStudio()
+
+// one dirty flag per section, measured against the active preset
+const dirty = Object.fromEntries(
+  (['primary', 'neutral', 'semantic', 'font', 'icons', 'scale', 'buttons', 'panels', 'inputs', 'shadow', 'innerShadow', 'borders'] as const)
+    .map(key => [key, sectionDirty(key)])
+) as Record<string, ComputedRef<boolean>>
 
 /* ------------------------------------------------------------ typography -- */
 
@@ -430,6 +436,7 @@ const shadowColor = computed({
 // fields — one config each, one template.
 const shadowSections = [{
   label: 'Shadow',
+  dirtyKey: 'shadow' as const,
   model: shadowStyle,
   options: SHADOW_STYLE_OPTIONS,
   color: shadowColor,
@@ -439,6 +446,7 @@ const shadowSections = [{
   hard: computed(() => (style.value.shadow || 'none') === 'hard')
 }, {
   label: 'Inner shadow',
+  dirtyKey: 'innerShadow' as const,
   model: innerShadowStyle,
   options: INNER_SHADOW_OPTIONS,
   color: innerShadowColor,
@@ -454,15 +462,37 @@ const shadowSections = [{
     <template v-if="group === 'colors'">
       <!-- Sections own their padding so the separators run edge to edge. -->
       <div class="flex flex-col">
-        <ThemeStudioColorSection alias="primary" help-to="/docs/getting-started/theme/css-variables#colors" class="p-4" />
+        <ThemeStudioColorSection
+          alias="primary"
+          help-to="/docs/getting-started/theme/css-variables#colors"
+          class="p-4"
+          resettable
+          :dirty="dirty.primary!.value"
+          @reset="resetSection('primary')"
+        />
 
         <USeparator />
 
-        <ThemeStudioColorSection alias="neutral" help-to="/docs/getting-started/theme/css-variables#text" class="p-4" />
+        <ThemeStudioColorSection
+          alias="neutral"
+          help-to="/docs/getting-started/theme/css-variables#text"
+          class="p-4"
+          resettable
+          :dirty="dirty.neutral!.value"
+          @reset="resetSection('neutral')"
+        />
 
         <USeparator />
 
-        <ThemeStudioSection label="Semantic" help-to="/docs/getting-started/theme/design-system" :default-open="false" class="p-4">
+        <ThemeStudioSection
+          label="Semantic"
+          help-to="/docs/getting-started/theme/design-system"
+          :default-open="false"
+          class="p-4"
+          resettable
+          :dirty="dirty.semantic!.value"
+          @reset="resetSection('semantic')"
+        >
           <div class="flex flex-col gap-3 pt-1">
             <ThemeStudioColorSection v-for="alias in semanticAliases" :key="alias" :alias="alias" />
           </div>
@@ -473,7 +503,7 @@ const shadowSections = [{
     <template v-else-if="group === 'style'">
       <div class="flex flex-col">
         <template v-for="section in shadowSections" :key="section.label">
-          <ThemeStudioSection :label="section.label" class="p-4">
+          <ThemeStudioSection :label="section.label" class="p-4" resettable :dirty="dirty[section.dirtyKey]!.value" @reset="resetSection(section.dirtyKey)">
             <div>
               <UTabs
                 v-model="section.model.value"
@@ -534,7 +564,7 @@ const shadowSections = [{
           <USeparator />
         </template>
 
-        <ThemeStudioSection label="Borders" class="p-4">
+        <ThemeStudioSection label="Borders" class="p-4" resettable :dirty="dirty.borders!.value" @reset="resetSection('borders')">
           <div>
             <UTabs
               v-model="borderStyle"
@@ -591,7 +621,14 @@ const shadowSections = [{
 
     <template v-else-if="group === 'general'">
       <div class="flex flex-col">
-        <ThemeStudioSection label="Font" help-to="/docs/getting-started/integrations/fonts" class="p-4">
+        <ThemeStudioSection
+          label="Font"
+          help-to="/docs/getting-started/integrations/fonts"
+          class="p-4"
+          resettable
+          :dirty="dirty.font!.value"
+          @reset="resetSection('font')"
+        >
           <div class="flex flex-col gap-2">
             <!-- live specimen: the heading treatment over the base body -->
             <div class="rounded-md ring ring-default bg-elevated/50 px-3 py-2 select-none">
@@ -749,7 +786,14 @@ const shadowSections = [{
 
         <USeparator />
 
-        <ThemeStudioSection label="Icons" help-to="/docs/getting-started/integrations/icons" class="p-4">
+        <ThemeStudioSection
+          label="Icons"
+          help-to="/docs/getting-started/integrations/icons"
+          class="p-4"
+          resettable
+          :dirty="dirty.icons!.value"
+          @reset="resetSection('icons')"
+        >
           <div class="flex flex-col gap-2">
             <!-- a spread of the selected set -->
             <div class="rounded-md ring ring-default bg-elevated/50 px-3 py-2 flex flex-wrap justify-center gap-2.5">
@@ -797,7 +841,7 @@ const shadowSections = [{
 
         <USeparator />
 
-        <ThemeStudioSection label="Scale" class="p-4">
+        <ThemeStudioSection label="Scale" class="p-4" resettable :dirty="dirty.scale!.value" @reset="resetSection('scale')">
           <div class="flex flex-col gap-2">
             <ThemeStudioSliderRow
               v-model="radius"
@@ -846,7 +890,14 @@ const shadowSections = [{
         <USeparator />
 
         <template v-for="field in variantGroupFields" :key="field.key">
-          <ThemeStudioSection :label="field.label" :default-open="false" class="p-4">
+          <ThemeStudioSection
+            :label="field.label"
+            :default-open="false"
+            class="p-4"
+            resettable
+            :dirty="dirty[field.key]!.value"
+            @reset="resetSection(field.key)"
+          >
             <div class="flex flex-col gap-1.5">
               <div class="flex items-center gap-2">
                 <span class="text-xs text-muted w-13 shrink-0 select-none">Variant</span>
diff --git a/docs/app/components/theme-studio/ThemeStudioSection.vue b/docs/app/components/theme-studio/ThemeStudioSection.vue
index 54baffede8..25fabfa35e 100644
--- a/docs/app/components/theme-studio/ThemeStudioSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSection.vue
@@ -11,10 +11,18 @@ const props = withDefaults(defineProps<{
   /** Docs page the header's help icon links to */
   helpTo?: string
   defaultOpen?: boolean
+  /**
+   * Shows a reset button that's enabled while the section differs from the
+   * active preset (dirty). Emits `reset` — the host owns the semantics.
+   */
+  resettable?: boolean
+  dirty?: boolean
 }>(), {
   defaultOpen: true
 })
 
+const emit = defineEmits<{ reset: [] }>()
+
 const slots = defineSlots<{
   default: () => any
   /** Controls beside the trigger (edit/adjust toggles). */
@@ -39,6 +47,18 @@ const open = ref(props.defaultOpen)
         class="justify-start flex-1"
       />
 
+      <UTooltip v-if="resettable" :text="dirty ? 'Reset to preset' : 'Matches the preset'">
+        <UButton
+          size="sm"
+          :color="dirty ? 'primary' : 'neutral'"
+          variant="ghost"
+          icon="i-lucide-rotate-ccw"
+          :disabled="!dirty"
+          :aria-label="`Reset ${label} to preset`"
+          @click.stop="emit('reset')"
+        />
+      </UTooltip>
+
       <UButton
         v-if="helpTo"
         :to="helpTo"
diff --git a/docs/app/components/theme-studio/ThemeStudioShareModal.vue b/docs/app/components/theme-studio/ThemeStudioShareModal.vue
index 6d68e25fb8..cde54aacdf 100644
--- a/docs/app/components/theme-studio/ThemeStudioShareModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioShareModal.vue
@@ -9,7 +9,7 @@ import { importTheme, isDefaultTheme } from '../../utils/theme-engine'
 const open = defineModel<boolean>('open', { default: false })
 const mode = defineModel<'import' | 'export'>('mode', { default: 'export' })
 
-const { applyDoc } = useThemeStudio()
+const { applyDoc, clearActivePreset } = useThemeStudio()
 const { exportCSS, exportConfig, configLabel, hasCSSChanges, hasConfigChanges } = useTheme()
 const { track } = useAnalytics()
 const { copy: copyCSS, copied: copiedCSS } = useClipboard()
@@ -38,6 +38,9 @@ function runImport() {
 
   if (!empty.value) {
     applyDoc(result.doc)
+    // an imported doc replaces the whole theme — the old preset is no
+    // longer the baseline the dirty indicators should measure against
+    clearActivePreset()
     imported.value = true
     track('Theme Imported', { skipped: result.skipped.length })
   }
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index e6a01aa232..196b95b4de 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,7 +1,7 @@
 import colors from 'tailwindcss/colors'
 import { THEME_STATE_KEYS, THEME_STORAGE_KEYS } from '../utils/theme-keys'
-import { presets, docToSettings, isDefaultTheme, generatePalette, applyPaletteEffects, isDefaultEffects, parseCssColor, parseUiColorRef, styleComponents, styleTokens, DEFAULT_COLORS, SHADES, TOKEN_SHADE_TARGETS } from '../utils/theme-engine'
-import type { ThemeDoc, ThemePreset, PaletteCurveParams, PaletteEffects, StoredPaletteParams, StyleOptions, Shade, ColorAlias, TokenRamp } from '../utils/theme-engine'
+import { presets, docToSettings, isDefaultTheme, generatePalette, applyPaletteEffects, isDefaultEffects, parseCssColor, parseUiColorRef, styleComponents, styleTokens, sectionFingerprint, mergeSection, SECTION_GROUPS, DEFAULT_COLORS, SHADES, TOKEN_SHADE_TARGETS } from '../utils/theme-engine'
+import type { SectionKey, ThemeDoc, ThemePreset, PaletteCurveParams, PaletteEffects, StoredPaletteParams, StyleOptions, Shade, ColorAlias, TokenRamp } from '../utils/theme-engine'
 import { readLocalStorage } from '../utils/theme'
 
 export function useThemeStudio() {
@@ -9,7 +9,12 @@ export function useThemeStudio() {
   const appConfig = useAppConfig()
   const { track } = useAnalytics()
 
-  /** Persisted so the preset menu still names the applied preset after a reload. */
+  /**
+   * The BASELINE preset: stays set through ordinary edits (per-section
+   * dirty/reset measures against it) and is only replaced by another
+   * preset, a shuffle, an import or a full reset. Persisted so the menu
+   * still names it after a reload.
+   */
   const activePreset = useState<string | undefined>(THEME_STATE_KEYS.themePreset, () => readLocalStorage(THEME_STORAGE_KEYS.preset, undefined))
 
   function setActivePreset(id: string | undefined) {
@@ -89,7 +94,6 @@ export function useThemeStudio() {
     if (Object.keys(tokens.light).length || Object.keys(tokens.dark).length) {
       theme.applyThemeSettings({ cssVariables: tokens }, { track: false })
     }
-    setActivePreset(undefined)
 
     // Sliders stream through here at drag frequency — one event per burst.
     if (!trackedAt.value || Date.now() - trackedAt.value > 2000) {
@@ -144,17 +148,14 @@ export function useThemeStudio() {
 
     if (alias === 'primary') {
       theme.primary.value = name
-      setActivePreset(undefined)
     } else if (alias === 'neutral') {
       theme.neutral.value = name
       // Stock neutrals need the white-literal remaps too — without them the
       // preview (docs baseline: neutral-50 bg) diverges from the export
       // (library baseline: white bg) for every tinted ramp.
       theme.applyThemeSettings({ cssVariables: unownedNeutralRemaps() }, { track: false })
-      setActivePreset(undefined)
     } else {
       theme.applyThemeSettings({ [alias]: name }, { track: false })
-      setActivePreset(undefined)
       track('Theme Changed', { setting: alias, value: name })
     }
   }
@@ -207,7 +208,6 @@ export function useThemeStudio() {
       ? { ...base }
       : { ...base, effects, amount }
     setPaletteParams({ ...paletteParams.value, [alias]: entry })
-    setActivePreset(undefined)
 
     // Live drags call this at ~16Hz — one analytics event per burst is plenty.
     if (!trackedAt.value || Date.now() - trackedAt.value > 2000) {
@@ -354,9 +354,50 @@ export function useThemeStudio() {
     return name === 'neutral' ? 'old-neutral' : name
   }
 
+  /* ----------------------------------------------- section reset/delta -- */
+
+  /**
+   * Dirty and reset are measured against the ACTIVE PRESET's doc (stock
+   * when none): "what did I touch since applying the preset". Reset splices
+   * the baseline's slice into the current doc and rides the same applyDoc
+   * path history restores use.
+   */
+  const baselineDoc = computed(() => presets.find(preset => preset.id === activePreset.value)?.doc ?? { version: 1 as const })
+
+  function sectionDirty(key: SectionKey) {
+    return computed(() => sectionFingerprint(theme.currentDoc(), key) !== sectionFingerprint(baselineDoc.value, key))
+  }
+
+  function groupDirty(group: keyof typeof SECTION_GROUPS) {
+    return computed(() => SECTION_GROUPS[group].some(key =>
+      sectionFingerprint(theme.currentDoc(), key) !== sectionFingerprint(baselineDoc.value, key)
+    ))
+  }
+
+  function resetSection(key: SectionKey) {
+    // currentDoc embeds reactive slices — structuredClone chokes on Vue
+    // proxies, so round-trip to plain JSON first (history does the same)
+    const plain = JSON.parse(JSON.stringify(theme.currentDoc())) as ThemeDoc
+    // applyDoc resets everything first, which clears the persisted preset —
+    // but a section reset moves TOWARD the baseline; keep it
+    const preserved = activePreset.value
+    applyDoc(mergeSection(plain, baselineDoc.value, key))
+    setActivePreset(preserved)
+    track('Theme Section Reset', { section: key })
+  }
+
+  /** For flows that replace the whole doc outside a preset (imports). */
+  function clearActivePreset() {
+    setActivePreset(undefined)
+  }
+
   return {
     presets,
     activePreset,
+    clearActivePreset,
+    sectionDirty,
+    groupDirty,
+    resetSection,
     style,
     setStyle,
     paletteParams,
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 2967441eb0..d822a725da 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -42,7 +42,14 @@ function toggleColorMode() {
 }
 
 const appConfig = useAppConfig()
-const { style } = useThemeStudio()
+const { style, groupDirty } = useThemeStudio()
+
+/** "Changed from preset" dot per settings tab. */
+const groupDirtyFlags = {
+  colors: groupDirty('colors'),
+  general: groupDirty('general'),
+  style: groupDirty('style')
+}
 
 /**
  * The mode tabs follow the app-wide default size setting like every other
@@ -184,12 +191,14 @@ const shareMode = ref<'import' | 'export'>('export')
               v-model:open="openPanels[settingGroup.value]"
               :content="{ align: 'start', onInteractOutside: keepPanels }"
             >
-              <UButton
-                :label="settingGroup.label"
-                color="neutral"
-                variant="subtle"
-                trailing-icon="i-lucide-chevron-down"
-              />
+              <UChip :show="groupDirtyFlags[settingGroup.value].value" color="primary" size="sm">
+                <UButton
+                  :label="settingGroup.label"
+                  color="neutral"
+                  variant="subtle"
+                  trailing-icon="i-lucide-chevron-down"
+                />
+              </UChip>
 
               <template #content>
                 <ThemeStudioControls :group="settingGroup.value" class="w-80 max-h-[70vh] overflow-y-auto" />
diff --git a/docs/app/utils/theme-engine/index.ts b/docs/app/utils/theme-engine/index.ts
index 860d80b660..77436d05b1 100644
--- a/docs/app/utils/theme-engine/index.ts
+++ b/docs/app/utils/theme-engine/index.ts
@@ -6,3 +6,4 @@ export * from './presets'
 export * from './oklch'
 export * from './palette'
 export * from './styles'
+export * from './sections'
diff --git a/docs/app/utils/theme-engine/sections.ts b/docs/app/utils/theme-engine/sections.ts
new file mode 100644
index 0000000000..1178720b4d
--- /dev/null
+++ b/docs/app/utils/theme-engine/sections.ts
@@ -0,0 +1,324 @@
+import type { ThemeDoc } from './types'
+import { DEFAULT_COLORS, THEME_DEFAULTS } from './types'
+import type { StyleOptions } from './styles'
+import { styleTokens, TOKEN_SHADE_TARGETS } from './styles'
+import { parseUiColorRef } from './resolve'
+
+/**
+ * The studio's setting sections, each owning a slice of the ThemeDoc.
+ * `pickSection` extracts a section's normalized state (defaults filled, so
+ * "absent" and "explicitly stock" compare equal) and `mergeSection` splices
+ * one doc's slice into another — which is all a per-section reset is:
+ * merge the baseline's slice into the current doc and re-apply.
+ *
+ * The baseline is the ACTIVE PRESET's doc (stock when none): dirty means
+ * "you touched this after applying the preset", per the exchange that
+ * motivated it — not "differs from stock Nuxt UI" (the export already
+ * answers that).
+ */
+export type SectionKey
+  = | 'primary' | 'neutral' | 'semantic'
+    | 'font' | 'icons' | 'scale' | 'buttons' | 'panels' | 'inputs'
+    | 'shadow' | 'innerShadow' | 'borders'
+
+export const SECTION_GROUPS: Record<'colors' | 'general' | 'style', SectionKey[]> = {
+  colors: ['primary', 'neutral', 'semantic'],
+  general: ['font', 'icons', 'scale', 'buttons', 'panels', 'inputs'],
+  style: ['shadow', 'innerShadow', 'borders']
+}
+
+const SEMANTIC_ALIASES = ['secondary', 'success', 'info', 'warning', 'error'] as const
+
+/** Which color section a semantic token (or token shade) belongs to. */
+function tokenSection(token: string): 'primary' | 'semantic' | 'neutral' {
+  if (token === '--ui-primary' || token.startsWith('--ui-color-primary')) return 'primary'
+  if (SEMANTIC_ALIASES.some(alias => token === `--ui-${alias}`)) return 'semantic'
+  return 'neutral'
+}
+
+/**
+ * applyDoc promotes ramp-shaped token overrides into style.tokenShades
+ * (deriveStyle), so a live doc and the preset doc it came from express the
+ * SAME choice in different slots. Both sides are compared canonicalized:
+ * promotable tokens count as shades, never as raw tokens.
+ */
+function promotedShades(doc: ThemeDoc): Record<string, { light?: number, dark?: number }> {
+  const promoted: Record<string, { light?: number, dark?: number }> = {}
+  const parse = (value: string | undefined, ramp: string) => {
+    const ref = parseUiColorRef(value)
+    return ref?.alias === ramp ? ref.shade : undefined
+  }
+  for (const target of TOKEN_SHADE_TARGETS) {
+    if (doc.style?.tokenShades?.[target.token]) continue
+    const light = parse(doc.tokens?.light?.[target.token], target.ramp)
+    const dark = parse(doc.tokens?.dark?.[target.token], target.ramp)
+    if (light !== undefined || dark !== undefined) {
+      promoted[target.token] = { ...(light !== undefined ? { light } : {}), ...(dark !== undefined ? { dark } : {}) }
+    }
+  }
+  return promoted
+}
+
+function ownedTokens(doc: ThemeDoc, section: 'primary' | 'semantic' | 'neutral') {
+  // tokens the doc's own style treatment emits are DERIVED — they're
+  // compared through the style fields, and a live doc always carries them
+  // merged into tokens while a preset doc never does
+  const derived = styleTokens(doc.style ?? {})
+  const promoted = promotedShades(doc)
+  const pickMode = (mode: 'light' | 'dark') =>
+    Object.fromEntries(Object.entries(doc.tokens?.[mode] ?? {})
+      .filter(([token]) => !(token in derived[mode])
+        && promoted[token]?.[mode] === undefined
+        && tokenSection(token) === section))
+  return { light: pickMode('light'), dark: pickMode('dark') }
+}
+
+function ownedTokenShades(doc: ThemeDoc, section: 'primary' | 'semantic' | 'neutral') {
+  const merged = { ...promotedShades(doc), ...doc.style?.tokenShades }
+  return Object.fromEntries(Object.entries(merged).filter(([token]) => tokenSection(token) === section))
+}
+
+function alias(doc: ThemeDoc, name: keyof typeof DEFAULT_COLORS): string {
+  return doc.colors?.[name] ?? DEFAULT_COLORS[name]
+}
+
+/** The custom ramp an alias references, if the doc carries one. */
+function aliasPalette(doc: ThemeDoc, name: keyof typeof DEFAULT_COLORS) {
+  return doc.palettes?.[alias(doc, name)]
+}
+
+type VariantGroupKey = 'buttons' | 'panels' | 'inputs'
+
+function groupPick(doc: ThemeDoc, group: VariantGroupKey) {
+  const defaults = doc.style?.defaults
+  return {
+    // effective variant: the group's own choice, else the app-wide fallback
+    variant: defaults?.variants?.[group] ?? defaults?.variant ?? null,
+    color: defaults?.colors?.[group] ?? null
+  }
+}
+
+export function pickSection(doc: ThemeDoc, key: SectionKey): unknown {
+  const style: StyleOptions = doc.style ?? {}
+  switch (key) {
+    case 'primary':
+      return {
+        color: doc.blackAsPrimary ? 'black' : alias(doc, 'primary'),
+        palette: aliasPalette(doc, 'primary') ?? null,
+        tokens: ownedTokens(doc, 'primary'),
+        shades: ownedTokenShades(doc, 'primary')
+      }
+    case 'neutral':
+      return {
+        color: alias(doc, 'neutral'),
+        palette: aliasPalette(doc, 'neutral') ?? null,
+        tokens: ownedTokens(doc, 'neutral'),
+        shades: ownedTokenShades(doc, 'neutral')
+      }
+    case 'semantic':
+      return {
+        colors: Object.fromEntries(SEMANTIC_ALIASES.map(name => [name, alias(doc, name)])),
+        palettes: Object.fromEntries(SEMANTIC_ALIASES.map(name => [name, aliasPalette(doc, name) ?? null])),
+        tokens: ownedTokens(doc, 'semantic'),
+        shades: ownedTokenShades(doc, 'semantic')
+      }
+    case 'font':
+      return doc.font ?? {}
+    case 'icons':
+      return doc.icons ?? THEME_DEFAULTS.icons
+    case 'scale':
+      return {
+        radius: doc.radius ?? THEME_DEFAULTS.radius,
+        fontSize: doc.fontSize ?? THEME_DEFAULTS.fontSize,
+        spacing: doc.spacing ?? THEME_DEFAULTS.spacing,
+        size: style.defaults?.size ?? null
+      }
+    case 'buttons':
+    case 'panels':
+    case 'inputs':
+      return groupPick(doc, key)
+    case 'shadow':
+      return {
+        shadow: style.shadow ?? 'none',
+        color: style.shadowColor ?? null,
+        shade: style.shadowShade ?? null,
+        opacity: style.shadowOpacity ?? null,
+        geometry: style.shadowGeometry ?? null
+      }
+    case 'innerShadow':
+      return {
+        shadow: style.innerShadow ?? 'none',
+        color: style.innerShadowColor ?? null,
+        shade: style.innerShadowShade ?? null,
+        opacity: style.innerShadowOpacity ?? null,
+        geometry: style.innerShadowGeometry ?? null
+      }
+    case 'borders':
+      return {
+        border: style.border ?? 'default',
+        width: style.borderWidth ?? null,
+        frame: !!style.frame,
+        color: style.borderColor ?? null,
+        shade: style.borderShade ?? null
+      }
+  }
+}
+
+/** Stable stringify (sorted keys) so pick results compare structurally. */
+export function sectionFingerprint(doc: ThemeDoc, key: SectionKey): string {
+  const sort = (value: unknown): unknown => {
+    if (Array.isArray(value)) return value.map(sort)
+    if (value && typeof value === 'object') {
+      return Object.fromEntries(Object.keys(value).sort().map(k => [k, sort((value as Record<string, unknown>)[k])]))
+    }
+    return value
+  }
+  return JSON.stringify(sort(pickSection(doc, key)))
+}
+
+/* --------------------------------------------------------------- merge -- */
+
+function setOrDelete<T extends object, K extends keyof T>(target: T, key: K, value: T[K] | undefined) {
+  if (value === undefined) Reflect.deleteProperty(target, key)
+  else target[key] = value
+}
+
+function pruneEmpty(doc: ThemeDoc) {
+  for (const key of ['colors', 'palettes', 'style'] as const) {
+    if (doc[key] && !Object.keys(doc[key]!).length) Reflect.deleteProperty(doc, key)
+  }
+  if (doc.tokens) {
+    for (const mode of ['light', 'dark'] as const) {
+      if (doc.tokens[mode] && !Object.keys(doc.tokens[mode]!).length) Reflect.deleteProperty(doc.tokens, mode)
+    }
+    if (!Object.keys(doc.tokens).length) delete doc.tokens
+  }
+  if (doc.style?.defaults) {
+    for (const key of ['variants', 'colors'] as const) {
+      if (doc.style.defaults[key] && !Object.keys(doc.style.defaults[key]!).length) Reflect.deleteProperty(doc.style.defaults, key)
+    }
+    if (!Object.keys(doc.style.defaults).length) delete doc.style.defaults
+  }
+  if (doc.style?.tokenShades && !Object.keys(doc.style.tokenShades).length) delete doc.style.tokenShades
+}
+
+/** Replace one alias's color + referenced palette with the base doc's. */
+function mergeAlias(doc: ThemeDoc, base: ThemeDoc, name: keyof typeof DEFAULT_COLORS) {
+  const currentPaletteName = alias(doc, name)
+  if (doc.palettes) Reflect.deleteProperty(doc.palettes, currentPaletteName)
+
+  doc.colors ??= {}
+  setOrDelete(doc.colors, name, base.colors?.[name])
+
+  const basePalette = aliasPalette(base, name)
+  if (basePalette) {
+    doc.palettes ??= {}
+    doc.palettes[alias(base, name)] = structuredClone(basePalette)
+  }
+}
+
+/** Swap a color section's tokens/token-shades for the base doc's. */
+function mergeColorExtras(doc: ThemeDoc, base: ThemeDoc, section: 'primary' | 'semantic' | 'neutral') {
+  for (const mode of ['light', 'dark'] as const) {
+    const kept = Object.entries(doc.tokens?.[mode] ?? {}).filter(([token]) => tokenSection(token) !== section)
+    const added = Object.entries(base.tokens?.[mode] ?? {}).filter(([token]) => tokenSection(token) === section)
+    const merged = Object.fromEntries([...kept, ...added])
+    if (Object.keys(merged).length) {
+      doc.tokens ??= {}
+      doc.tokens[mode] = merged
+    } else if (doc.tokens) {
+      Reflect.deleteProperty(doc.tokens, mode)
+    }
+  }
+  const keptShades = Object.entries(doc.style?.tokenShades ?? {}).filter(([token]) => tokenSection(token) !== section)
+  const addedShades = Object.entries(base.style?.tokenShades ?? {}).filter(([token]) => tokenSection(token) === section)
+  const mergedShades = Object.fromEntries([...keptShades, ...addedShades])
+  if (Object.keys(mergedShades).length) {
+    doc.style ??= {}
+    doc.style.tokenShades = mergedShades as StyleOptions['tokenShades']
+  } else if (doc.style) {
+    delete doc.style.tokenShades
+  }
+}
+
+/**
+ * A new doc with `key`'s slice taken from `base` and everything else from
+ * `current` — apply it and the section is reset to the baseline.
+ */
+export function mergeSection(current: ThemeDoc, base: ThemeDoc, key: SectionKey): ThemeDoc {
+  const doc = structuredClone(current)
+  doc.style = doc.style ? structuredClone(doc.style) : undefined
+  const baseStyle: StyleOptions = base.style ?? {}
+
+  switch (key) {
+    case 'primary':
+      setOrDelete(doc, 'blackAsPrimary', base.blackAsPrimary || undefined)
+      mergeAlias(doc, base, 'primary')
+      mergeColorExtras(doc, base, 'primary')
+      break
+    case 'neutral':
+      mergeAlias(doc, base, 'neutral')
+      mergeColorExtras(doc, base, 'neutral')
+      break
+    case 'semantic':
+      for (const name of SEMANTIC_ALIASES) mergeAlias(doc, base, name)
+      mergeColorExtras(doc, base, 'semantic')
+      break
+    case 'font':
+      setOrDelete(doc, 'font', base.font ? structuredClone(base.font) : undefined)
+      break
+    case 'icons':
+      setOrDelete(doc, 'icons', base.icons)
+      break
+    case 'scale':
+      setOrDelete(doc, 'radius', base.radius)
+      setOrDelete(doc, 'fontSize', base.fontSize)
+      setOrDelete(doc, 'spacing', base.spacing)
+      if (doc.style?.defaults || baseStyle.defaults?.size !== undefined) {
+        doc.style ??= {}
+        doc.style.defaults = { ...doc.style.defaults }
+        setOrDelete(doc.style.defaults, 'size', baseStyle.defaults?.size)
+      }
+      break
+    case 'buttons':
+    case 'panels':
+    case 'inputs':
+      if (doc.style?.defaults || baseStyle.defaults) {
+        doc.style ??= {}
+        doc.style.defaults = { ...doc.style.defaults }
+        doc.style.defaults.variants = { ...doc.style.defaults.variants }
+        doc.style.defaults.colors = { ...doc.style.defaults.colors }
+        setOrDelete(doc.style.defaults.variants, key, baseStyle.defaults?.variants?.[key])
+        setOrDelete(doc.style.defaults.colors, key, baseStyle.defaults?.colors?.[key])
+      }
+      break
+    case 'shadow':
+      doc.style ??= {}
+      setOrDelete(doc.style, 'shadow', baseStyle.shadow)
+      setOrDelete(doc.style, 'shadowColor', baseStyle.shadowColor)
+      setOrDelete(doc.style, 'shadowShade', baseStyle.shadowShade ? structuredClone(baseStyle.shadowShade) : undefined)
+      setOrDelete(doc.style, 'shadowOpacity', baseStyle.shadowOpacity)
+      setOrDelete(doc.style, 'shadowGeometry', baseStyle.shadowGeometry ? structuredClone(baseStyle.shadowGeometry) : undefined)
+      break
+    case 'innerShadow':
+      doc.style ??= {}
+      setOrDelete(doc.style, 'innerShadow', baseStyle.innerShadow)
+      setOrDelete(doc.style, 'innerShadowColor', baseStyle.innerShadowColor)
+      setOrDelete(doc.style, 'innerShadowShade', baseStyle.innerShadowShade ? structuredClone(baseStyle.innerShadowShade) : undefined)
+      setOrDelete(doc.style, 'innerShadowOpacity', baseStyle.innerShadowOpacity)
+      setOrDelete(doc.style, 'innerShadowGeometry', baseStyle.innerShadowGeometry ? structuredClone(baseStyle.innerShadowGeometry) : undefined)
+      break
+    case 'borders':
+      doc.style ??= {}
+      setOrDelete(doc.style, 'border', baseStyle.border)
+      setOrDelete(doc.style, 'borderWidth', baseStyle.borderWidth)
+      setOrDelete(doc.style, 'frame', baseStyle.frame)
+      setOrDelete(doc.style, 'borderColor', baseStyle.borderColor)
+      setOrDelete(doc.style, 'borderShade', baseStyle.borderShade ? structuredClone(baseStyle.borderShade) : undefined)
+      break
+  }
+
+  if (doc.style === undefined) delete doc.style
+  pruneEmpty(doc)
+  return doc
+}

From a72ef8923bc59b1390e32f4216051fd4872d0695 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 12 Jul 2026 00:56:53 +0200
Subject: [PATCH 140/185] feat(docs): add reset functionality to theme.vue for
 improved theme management

- Integrated a reset feature that allows users to revert to the baseline preset or reset the theme when changes are detected.
- Enhanced user feedback with computed properties for dirty state tracking and dynamic reset labels.
- Updated the reset button to reflect the current state and improve accessibility.

These changes enhance the usability of the theme management interface, providing users with better control over their theme settings.
---
 docs/app/pages/theme.vue | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index d822a725da..6239e10184 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -42,7 +42,7 @@ function toggleColorMode() {
 }
 
 const appConfig = useAppConfig()
-const { style, groupDirty } = useThemeStudio()
+const { style, groupDirty, presets, activePreset, applyPreset } = useThemeStudio()
 
 /** "Changed from preset" dot per settings tab. */
 const groupDirtyFlags = {
@@ -51,6 +51,20 @@ const groupDirtyFlags = {
   style: groupDirty('style')
 }
 
+/**
+ * The toolbar reset matches the section resets: back to the BASELINE —
+ * the active preset when one is set, stock otherwise. Disabled while
+ * nothing diverges from it.
+ */
+const anyDirty = computed(() => Object.values(groupDirtyFlags).some(flag => flag.value))
+const baselinePreset = computed(() => presets.find(preset => preset.id === activePreset.value))
+const resetLabel = computed(() => baselinePreset.value ? `Reset to ${baselinePreset.value.name}` : 'Reset theme')
+
+function resetToBaseline() {
+  if (baselinePreset.value) applyPreset(baselinePreset.value)
+  else resetTheme()
+}
+
 /**
  * The mode tabs follow the app-wide default size setting like every other
  * toolbar control — but one step down: tabs at the default size read a
@@ -264,13 +278,14 @@ const shareMode = ref<'import' | 'export'>('export')
               </UTooltip>
             </UFieldGroup>
 
-            <UTooltip text="Reset theme">
+            <UTooltip :text="resetLabel">
               <UButton
                 icon="i-lucide-rotate-ccw"
                 color="neutral"
                 variant="subtle"
-                aria-label="Reset theme"
-                @click="resetTheme()"
+                :disabled="!anyDirty"
+                :aria-label="resetLabel"
+                @click="resetToBaseline"
               />
             </UTooltip>
 

From 4617d2c58786effb128809516e6881e32417939a Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 12 Jul 2026 02:22:17 +0200
Subject: [PATCH 141/185] feat(docs): implement enhanced reset functionality
 across theme studio components

- Added a reset feature to ThemeStudioColorSection, ThemeStudioControls, and ThemeStudioSliderRow, allowing users to revert to baseline preset values.
- Introduced computed properties for tracking dirty states, improving user feedback on unsaved changes.
- Updated slider components to include reset buttons, enhancing accessibility and user control over theme settings.
- Refactored theme management logic to utilize canonical token shades for more accurate resets.

These improvements collectively enhance the usability and interactivity of the theme studio, providing users with better control over their theme settings.
---
 .../theme-studio/ThemeStudioColorSection.vue  | 46 ++++++++++++++-----
 .../theme-studio/ThemeStudioControls.vue      | 42 +++++++++++------
 .../theme-studio/ThemeStudioSliderRow.vue     | 39 ++++++++++------
 docs/app/composables/useThemeStudio.ts        |  1 +
 docs/app/utils/theme-engine/sections.ts       | 12 ++++-
 docs/app/utils/theme-engine/styles.ts         |  8 ++--
 6 files changed, 103 insertions(+), 45 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioColorSection.vue b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
index 2aca967030..26de7ff800 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADES } from '../../utils/theme-engine'
+import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADES, canonicalTokenShades } from '../../utils/theme-engine'
 import type { ColorAlias } from '../../utils/theme-engine'
 
 /**
@@ -20,7 +20,10 @@ const props = defineProps<{
 
 const emit = defineEmits<{ reset: [] }>()
 
-const { style, setStyle, rampChip } = useThemeStudio()
+const { style, setStyle, rampChip, baselineDoc } = useThemeStudio()
+
+/** The active preset's own shade choices — what a row reset restores. */
+const baselineShades = computed(() => canonicalTokenShades(baselineDoc.value))
 
 const title = computed(() => props.label ?? props.alias.charAt(0).toUpperCase() + props.alias.slice(1))
 
@@ -28,9 +31,14 @@ const paletteEditor = ref(false)
 const shadeEditor = ref(false)
 
 // Per-token shade sliders, one light/dark pair. Only the touched mode is
-// written so an untouched mode never becomes an override.
-function tokenShadeSlider(token: string, defaults: { light: number, dark: number }, target: 'light' | 'dark') {
-  return computed({
+// written so an untouched mode never becomes an override. Dirty and reset
+// measure against the BASELINE preset's own choice for the token: reset
+// restores the preset's shade, or deletes the override entirely when the
+// preset made no choice (the token's real default may not sit on the ramp
+// at all — --ui-bg is literally `white` — so writing a "default shade"
+// would pin a lookalike override over it).
+function tokenShadeControl(token: string, defaults: { light: number, dark: number }, target: 'light' | 'dark') {
+  const model = computed({
     get: () => {
       const value = style.value.tokenShades?.[token]?.[target] ?? defaults[target]
       return SHADES.indexOf(value as typeof SHADES[number])
@@ -44,6 +52,18 @@ function tokenShadeSlider(token: string, defaults: { light: number, dark: number
       })
     }
   })
+  const baseline = computed(() => baselineShades.value[token]?.[target])
+  const dirty = computed(() => style.value.tokenShades?.[token]?.[target] !== baseline.value)
+  function reset() {
+    const entry = { ...style.value.tokenShades?.[token] }
+    if (baseline.value !== undefined) entry[target] = baseline.value
+    else Reflect.deleteProperty(entry, target)
+    const tokenShades = { ...style.value.tokenShades }
+    if (Object.keys(entry).length) tokenShades[token] = entry
+    else Reflect.deleteProperty(tokenShades, token)
+    setStyle({ tokenShades })
+  }
+  return { model, dirty, reset }
 }
 
 const sections = TOKEN_SHADE_TARGETS
@@ -51,8 +71,8 @@ const sections = TOKEN_SHADE_TARGETS
   .map(target => ({
     ...target,
     sliders: {
-      light: tokenShadeSlider(target.token, target.defaults, 'light'),
-      dark: tokenShadeSlider(target.token, target.defaults, 'dark')
+      light: tokenShadeControl(target.token, target.defaults, 'light'),
+      dark: tokenShadeControl(target.token, target.defaults, 'dark')
     }
   }))
 
@@ -105,10 +125,12 @@ const openGroups = reactive<Record<string, boolean>>({})
         <ThemeStudioSliderRow
           v-for="(slider, modeName) in sections[0]!.sliders"
           :key="modeName"
-          v-model="slider.value"
+          v-model="slider.model.value"
           :mode="modeName"
           :chip="rampChip(alias)"
-          :default-value="SHADES.indexOf(sections[0]!.defaults[modeName] as typeof SHADES[number])"
+          resettable
+          :dirty="slider.dirty.value"
+          @reset="slider.reset()"
         />
       </div>
 
@@ -135,10 +157,12 @@ const openGroups = reactive<Record<string, boolean>>({})
                 <ThemeStudioSliderRow
                   v-for="(slider, modeName) in section.sliders"
                   :key="modeName"
-                  v-model="slider.value"
+                  v-model="slider.model.value"
                   :mode="modeName"
                   :chip="rampChip(section.ramp)"
-                  :default-value="SHADES.indexOf(section.defaults[modeName] as typeof SHADES[number])"
+                  resettable
+                  :dirty="slider.dirty.value"
+                  @reset="slider.reset()"
                 />
               </div>
             </div>
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 516d898931..90b90aa212 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -20,7 +20,7 @@ const {
   icons
 } = useTheme()
 
-const { style, setStyle, primaryChip, neutralChip, sectionDirty, resetSection } = useThemeStudio()
+const { style, setStyle, primaryChip, neutralChip, sectionDirty, resetSection, baselineDoc } = useThemeStudio()
 
 // one dirty flag per section, measured against the active preset
 const dirty = Object.fromEntries(
@@ -278,8 +278,10 @@ const shadowColorItems = [
 // Slider position ↔ SHADES index, per mode. shadow/border shades write both
 // modes on first touch (explicit 'shade' mode choice); token shades write
 // ONLY the touched mode so an untouched mode never becomes an override.
-function shadeSlider(field: 'shadowShade' | 'innerShadowShade' | 'borderShade', defaults: { light: number, dark: number }, target: 'light' | 'dark') {
-  return computed({
+// Dirty/reset measure against the BASELINE preset's choice: reset restores
+// it, or deletes the entry when the preset made none.
+function shadeControl(field: 'shadowShade' | 'innerShadowShade' | 'borderShade', defaults: { light: number, dark: number }, target: 'light' | 'dark') {
+  const model = computed({
     // Per-key fallback: an imported doc can carry a single-mode shade
     // object ({ light: 400 }) — indexOf(undefined) would park the slider
     // at -1 and the chip at var(--color-…-undefined).
@@ -289,21 +291,30 @@ function shadeSlider(field: 'shadowShade' | 'innerShadowShade' | 'borderShade',
       setStyle({ [field]: { ...current, [target]: SHADES[index]! } })
     }
   })
+  const baseline = computed(() => baselineDoc.value.style?.[field]?.[target])
+  const dirty = computed(() => style.value[field]?.[target] !== baseline.value)
+  function reset() {
+    const entry: { light?: number, dark?: number } = { ...style.value[field] }
+    if (baseline.value !== undefined) entry[target] = baseline.value
+    else Reflect.deleteProperty(entry, target)
+    setStyle({ [field]: Object.keys(entry).length ? entry : undefined })
+  }
+  return { model, dirty, reset }
 }
 
 const shadowShades = {
-  light: shadeSlider('shadowShade', SHADOW_SHADE_DEFAULTS, 'light'),
-  dark: shadeSlider('shadowShade', SHADOW_SHADE_DEFAULTS, 'dark')
+  light: shadeControl('shadowShade', SHADOW_SHADE_DEFAULTS, 'light'),
+  dark: shadeControl('shadowShade', SHADOW_SHADE_DEFAULTS, 'dark')
 }
 
 const innerShadowShades = {
-  light: shadeSlider('innerShadowShade', SHADOW_SHADE_DEFAULTS, 'light'),
-  dark: shadeSlider('innerShadowShade', SHADOW_SHADE_DEFAULTS, 'dark')
+  light: shadeControl('innerShadowShade', SHADOW_SHADE_DEFAULTS, 'light'),
+  dark: shadeControl('innerShadowShade', SHADOW_SHADE_DEFAULTS, 'dark')
 }
 
 const borderShades = {
-  light: shadeSlider('borderShade', BORDER_SHADE_DEFAULTS, 'light'),
-  dark: shadeSlider('borderShade', BORDER_SHADE_DEFAULTS, 'dark')
+  light: shadeControl('borderShade', BORDER_SHADE_DEFAULTS, 'light'),
+  dark: shadeControl('borderShade', BORDER_SHADE_DEFAULTS, 'dark')
 }
 
 // MD is the stock default — one deduped entry storing 'default'
@@ -529,10 +540,12 @@ const shadowSections = [{
                   <ThemeStudioSliderRow
                     v-for="(slider, modeName) in section.shades"
                     :key="modeName"
-                    v-model="slider.value"
+                    v-model="slider.model.value"
                     :mode="modeName"
                     :chip="section.color.value === 'primary-shade' ? primaryChip : neutralChip"
-                    :default-value="SHADES.indexOf(SHADOW_SHADE_DEFAULTS[modeName] as typeof SHADES[number])"
+                    resettable
+                    :dirty="slider.dirty.value"
+                    @reset="slider.reset()"
                   />
                 </template>
 
@@ -607,10 +620,12 @@ const shadowSections = [{
                 <ThemeStudioSliderRow
                   v-for="(slider, modeName) in borderShades"
                   :key="modeName"
-                  v-model="slider.value"
+                  v-model="slider.model.value"
                   :mode="modeName"
                   :chip="borderColor === 'primary-shade' ? primaryChip : neutralChip"
-                  :default-value="SHADES.indexOf(BORDER_SHADE_DEFAULTS[modeName] as typeof SHADES[number])"
+                  resettable
+                  :dirty="slider.dirty.value"
+                  @reset="slider.reset()"
                 />
               </template>
             </div>
@@ -849,7 +864,6 @@ const shadowSections = [{
               :min="0"
               :max="0.5"
               :step="0.125"
-              unit="rem"
             />
 
             <ThemeStudioSliderRow
diff --git a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
index 0744ba835b..295a116a2f 100644
--- a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
@@ -21,8 +21,13 @@ const props = withDefaults(defineProps<{
   chip?: string
   /** …for this color mode. */
   mode?: 'light' | 'dark'
-  /** Resting value — the readout says "Default" while the slider sits on it. */
-  defaultValue?: number
+  /**
+   * Shows a per-row reset button, enabled while an override exists.
+   * Emits `reset` — the host deletes its override (true absence, not
+   * "write the default value", which would pin a lookalike override).
+   */
+  resettable?: boolean
+  dirty?: boolean
 }>(), {
   min: 0,
   max: SHADES.length - 1,
@@ -45,20 +50,12 @@ const contrastColor = computed(() => shade.value
   ? `oklch(from ${sliderColor.value} clamp(0.12, (0.66 - l) * 1000, 0.95) 0 h / 0.65)`
   : undefined)
 
-const atDefault = computed(() => props.defaultValue !== undefined && value.value === props.defaultValue)
+const emit = defineEmits<{ reset: [] }>()
 
 /** `0.25rem` reads as `.25rem` — the leading zero is noise at this width. */
-const display = computed(() => {
-  if (atDefault.value) return 'Default'
-  return shade.value
-    ? String(SHADES[value.value])
-    : `${String(value.value).replace(/^(-?)0\./, '$1.')}${props.unit ?? ''}`
-})
-
-/** The tooltip keeps naming the real value while the readout says Default. */
-const displayTitle = computed(() => atDefault.value
-  ? `${shade.value ? SHADES[value.value] : value.value} (default)`
-  : display.value)
+const display = computed(() => shade.value
+  ? String(SHADES[value.value])
+  : `${String(value.value).replace(/^(-?)0\./, '$1.')}${props.unit ?? ''}`)
 </script>
 
 <template>
@@ -101,6 +98,18 @@ const displayTitle = computed(() => atDefault.value
       } : undefined"
     />
 
-    <span class="text-xs text-dimmed font-mono w-12 text-right shrink-0 truncate" :title="displayTitle">{{ display }}</span>
+    <span class="text-xs text-dimmed font-mono w-8 text-right shrink-0 truncate" :title="display">{{ display }}</span>
+
+    <UButton
+      v-if="resettable"
+      icon="i-lucide-rotate-ccw"
+      size="xs"
+      :color="dirty ? 'primary' : 'neutral'"
+      variant="ghost"
+      :disabled="!dirty"
+      :ui="{ leadingIcon: 'size-3' }"
+      :aria-label="`Reset ${label ?? mode}`"
+      @click="emit('reset')"
+    />
   </UFormField>
 </template>
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 196b95b4de..499393d163 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -394,6 +394,7 @@ export function useThemeStudio() {
   return {
     presets,
     activePreset,
+    baselineDoc,
     clearActivePreset,
     sectionDirty,
     groupDirty,
diff --git a/docs/app/utils/theme-engine/sections.ts b/docs/app/utils/theme-engine/sections.ts
index 1178720b4d..5aed855607 100644
--- a/docs/app/utils/theme-engine/sections.ts
+++ b/docs/app/utils/theme-engine/sections.ts
@@ -42,7 +42,7 @@ function tokenSection(token: string): 'primary' | 'semantic' | 'neutral' {
  * SAME choice in different slots. Both sides are compared canonicalized:
  * promotable tokens count as shades, never as raw tokens.
  */
-function promotedShades(doc: ThemeDoc): Record<string, { light?: number, dark?: number }> {
+export function promotedShades(doc: ThemeDoc): Record<string, { light?: number, dark?: number }> {
   const promoted: Record<string, { light?: number, dark?: number }> = {}
   const parse = (value: string | undefined, ramp: string) => {
     const ref = parseUiColorRef(value)
@@ -176,6 +176,16 @@ export function sectionFingerprint(doc: ThemeDoc, key: SectionKey): string {
   return JSON.stringify(sort(pickSection(doc, key)))
 }
 
+/**
+ * A doc's effective per-token shade choices: explicit style.tokenShades
+ * plus ramp-shaped token overrides (the two representations applyDoc
+ * interconverts). The per-row shade resets restore THESE — the baseline's
+ * choice, not stock.
+ */
+export function canonicalTokenShades(doc: ThemeDoc): Record<string, { light?: number, dark?: number }> {
+  return { ...promotedShades(doc), ...doc.style?.tokenShades }
+}
+
 /* --------------------------------------------------------------- merge -- */
 
 function setOrDelete<T extends object, K extends keyof T>(target: T, key: K, value: T[K] | undefined) {
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index b9b30264de..f340ad2335 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -150,10 +150,10 @@ export type TokenRamp = 'neutral' | 'primary' | 'secondary' | 'success' | 'info'
 export type TokenGroup = 'colors' | 'background' | 'text' | 'border'
 
 export const TOKEN_GROUPS: Array<{ key: TokenGroup, label: string }> = [
-  { key: 'colors', label: 'Colors' },
-  { key: 'background', label: 'Background' },
-  { key: 'text', label: 'Text' },
-  { key: 'border', label: 'Borders' }
+  { key: 'colors', label: 'Color shades' },
+  { key: 'background', label: 'Background shades' },
+  { key: 'text', label: 'Text shades' },
+  { key: 'border', label: 'Border shades' }
 ]
 
 /**

From 9a238d000c62acd204454bbd544f461f9676c6a4 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 12 Jul 2026 03:35:46 +0200
Subject: [PATCH 142/185] refactor(docs): engine dedupe, dead-code sweep and
 white/black shade ladder

deriveStyle rides canonicalTokenShades; unused resolveToken(s)/createThemeDoc/
extends/curve/meta removed; SHADE_LADDER adds literal white/black slider ends
with honest resting defaults; shadow color select's Default merges into a
tagged Neutral shade, normalized in section fingerprints.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/composables/useTheme.ts        |  4 +-
 docs/app/composables/useThemeStudio.ts  | 64 +++++++++-------------
 docs/app/utils/theme-engine/import.ts   |  9 ++--
 docs/app/utils/theme-engine/presets.ts  | 11 +---
 docs/app/utils/theme-engine/resolve.ts  | 63 +---------------------
 docs/app/utils/theme-engine/sections.ts | 25 ++++-----
 docs/app/utils/theme-engine/styles.ts   | 50 +++++++++++-------
 docs/app/utils/theme-engine/types.ts    | 32 +++++------
 docs/app/utils/theme.ts                 |  5 ++
 test/utils/theme-engine.spec.ts         | 70 ++++++-------------------
 test/utils/theme-import.spec.ts         | 26 +++++++++
 11 files changed, 137 insertions(+), 222 deletions(-)

diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 6f6f7b2be8..7f94dda174 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -2,7 +2,7 @@ import { defu } from 'defu'
 import { THEME_TAG_IDS, THEME_STATE_KEYS, THEME_STORAGE_KEYS } from '../utils/theme-keys'
 import { useLocalStorage } from '@vueuse/core'
 import { themeIcons, cssVariableDefaults, readLocalStorage, FONT_WEIGHT_DEFAULTS } from '../utils/theme'
-import { generateCSS, generateConfig, mergeUi, isDefaultStyle, DEFAULT_COLORS, THEME_DEFAULTS, LIBRARY_TOKEN_DEFAULTS } from '../utils/theme-engine'
+import { generateCSS, generateConfig, mergeUi, isDefaultStyle, DEFAULT_COLORS, THEME_DEFAULTS, SEMANTIC_ALIASES, LIBRARY_TOKEN_DEFAULTS } from '../utils/theme-engine'
 import type { ThemeDoc, ThemePalette } from '../utils/theme-engine'
 import { omit } from '#ui/utils'
 import colors from 'tailwindcss/colors'
@@ -598,7 +598,7 @@ export function useTheme() {
     if (settings.icons && settings.icons in themeIcons) icon.value = settings.icons
     if (settings.blackAsPrimary !== undefined) setBlackAsPrimary(!!settings.blackAsPrimary)
 
-    const colorKeys = ['secondary', 'success', 'info', 'warning', 'error'] as const
+    const colorKeys = SEMANTIC_ALIASES
     const savedExtras: Record<string, any> = { ...aiThemeExtras.value }
 
     for (const color of colorKeys) {
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 499393d163..997f47b63a 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,6 +1,6 @@
 import colors from 'tailwindcss/colors'
 import { THEME_STATE_KEYS, THEME_STORAGE_KEYS } from '../utils/theme-keys'
-import { presets, docToSettings, isDefaultTheme, generatePalette, applyPaletteEffects, isDefaultEffects, parseCssColor, parseUiColorRef, styleComponents, styleTokens, sectionFingerprint, mergeSection, SECTION_GROUPS, DEFAULT_COLORS, SHADES, TOKEN_SHADE_TARGETS } from '../utils/theme-engine'
+import { presets, docToSettings, isDefaultTheme, generatePalette, applyPaletteEffects, isDefaultEffects, parseCssColor, styleComponents, styleTokens, sectionFingerprint, mergeSection, canonicalTokenShades, SECTION_GROUPS, DEFAULT_COLORS, SHADES } from '../utils/theme-engine'
 import type { SectionKey, ThemeDoc, ThemePreset, PaletteCurveParams, PaletteEffects, StoredPaletteParams, StyleOptions, Shade, ColorAlias, TokenRamp } from '../utils/theme-engine'
 import { readLocalStorage } from '../utils/theme'
 
@@ -70,6 +70,15 @@ export function useThemeStudio() {
   // matter which component fires the event.
   const trackedAt = useState<number | undefined>('nuxt-ui-style-tracked-at', () => undefined)
 
+  // Style and palette edits share one clock deliberately: a drag session
+  // is one gesture, not two metrics.
+  function trackThrottled(...args: Parameters<typeof track>) {
+    if (!trackedAt.value || Date.now() - trackedAt.value > 2000) {
+      trackedAt.value = Date.now()
+      track(...args)
+    }
+  }
+
   function setStyle(options: StyleOptions) {
     const previousStyle = style.value
     const previous = styleTokens(previousStyle)
@@ -96,15 +105,12 @@ export function useThemeStudio() {
     }
 
     // Sliders stream through here at drag frequency — one event per burst.
-    if (!trackedAt.value || Date.now() - trackedAt.value > 2000) {
-      trackedAt.value = Date.now()
-      track('Theme Style Changed', {
-        shadow: style.value.shadow || 'none',
-        border: style.value.border || 'default',
-        borderColor: style.value.borderColor || 'default',
-        shadowColor: style.value.shadowColor || 'default'
-      })
-    }
+    trackThrottled('Theme Style Changed', {
+      shadow: style.value.shadow || 'none',
+      border: style.value.border || 'default',
+      borderColor: style.value.borderColor || 'default',
+      shadowColor: style.value.shadowColor || 'default'
+    })
   }
 
   function customPaletteName(alias: string) {
@@ -210,10 +216,7 @@ export function useThemeStudio() {
     setPaletteParams({ ...paletteParams.value, [alias]: entry })
 
     // Live drags call this at ~16Hz — one analytics event per burst is plenty.
-    if (!trackedAt.value || Date.now() - trackedAt.value > 2000) {
-      trackedAt.value = Date.now()
-      track('Theme Custom Palette', { alias })
-    }
+    trackThrottled('Theme Custom Palette', { alias })
   }
 
   /**
@@ -243,32 +246,17 @@ export function useThemeStudio() {
    * instead of stale defaults. Only neutral-ramp refs map onto sliders;
    * anything else (white/black literals, non-neutral refs) stays token-only.
    */
+  /**
+   * The style axis a doc implies: its explicit style plus ramp-shaped token
+   * overrides promoted into tokenShades (canonicalTokenShades — shared with
+   * the section dirty/reset comparisons, which depend on this promotion
+   * being identical on both sides).
+   */
   function deriveStyle(doc: ThemeDoc): StyleOptions {
     const derived: StyleOptions = { ...(doc.style || {}) }
-
-    const parse = (value: string | undefined, ramp: string) => {
-      const ref = parseUiColorRef(value)
-      return ref?.alias === ramp ? ref.shade : undefined
-    }
-
-    for (const target of TOKEN_SHADE_TARGETS) {
-      if (derived.tokenShades?.[target.token]) continue
-
-      const light = parse(doc.tokens?.light?.[target.token], target.ramp)
-      const dark = parse(doc.tokens?.dark?.[target.token], target.ramp)
-      if (light !== undefined || dark !== undefined) {
-        // Only modes the doc actually overrides — backfilling the other
-        // mode would turn a non-choice into an exported override.
-        derived.tokenShades = {
-          ...derived.tokenShades,
-          [target.token]: {
-            ...(light !== undefined ? { light } : {}),
-            ...(dark !== undefined ? { dark } : {})
-          }
-        }
-      }
-    }
-
+    const shades = canonicalTokenShades(doc)
+    // guard: an empty tokenShades object would flip isDefaultStyle
+    if (Object.keys(shades).length) derived.tokenShades = shades
     return derived
   }
 
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index 6a1ce4afce..c5142a5e70 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -243,13 +243,13 @@ function parseDeclaration(result: ParsedCSS, selector: string, prop: string, val
  * Reconstruct a color choice (named value, or a per-mode neutral/primary
  * ramp shade) from a pair of emitted per-mode values.
  */
-function matchColorChoice(value: { light?: string, dark?: string }, table: Record<string, { light: string, dark: string }>): { color: string, shade?: { light: number, dark: number } } | undefined {
+function matchColorChoice(value: { light?: string, dark?: string }, table: Record<string, { light: string, dark: string }>): { color: string, shade?: { light: Shade, dark: Shade } } | undefined {
   const named = Object.keys(table).find(key => table[key]!.light === value.light && table[key]!.dark === value.dark)
   if (named) return { color: named }
   const lightRef = parseUiColorRef(value.light)
   const darkRef = parseUiColorRef(value.dark)
   if (lightRef && darkRef && lightRef.alias === darkRef.alias && (lightRef.alias === 'neutral' || lightRef.alias === 'primary')) {
-    return { color: lightRef.alias === 'primary' ? 'primary-shade' : 'shade', shade: { light: lightRef.shade, dark: darkRef.shade } }
+    return { color: lightRef.alias === 'primary' ? 'primary-shade' : 'shade', shade: { light: lightRef.shade as Shade, dark: darkRef.shade as Shade } }
   }
   return undefined
 }
@@ -557,8 +557,10 @@ function extractDefaults(components: Record<string, any>): StyleOptions['default
 }
 
 /** Border treatment lives only in the class bundles — read it back from them. */
+/** A compound entry's classes, whether written as a string or a slot map. */
+const classOf = (entry: Record<string, unknown>) => typeof entry.class === 'string' ? entry.class : Object.values(entry.class || {}).join(' ')
+
 function detectBorder(components: Record<string, any>): Pick<StyleOptions, 'border' | 'borderWidth' | 'frame'> {
-  const classOf = (entry: Record<string, unknown>) => typeof entry.class === 'string' ? entry.class : Object.values(entry.class || {}).join(' ')
   const texts = Object.values(components).flatMap(component => [
     ...Object.values((component?.slots || {}) as Record<string, string>),
     ...((component?.compoundVariants || []) as Array<Record<string, unknown>>).map(classOf)
@@ -578,7 +580,6 @@ function detectBorder(components: Record<string, any>): Pick<StyleOptions, 'bord
 
 /** Frame outlines live on solid-variant compounds referencing the accented border. */
 function detectFrame(components: Record<string, any>): boolean {
-  const classOf = (entry: Record<string, unknown>) => typeof entry.class === 'string' ? entry.class : Object.values(entry.class || {}).join(' ')
   return Object.values(components).some(component =>
     ((component?.compoundVariants || []) as Array<Record<string, unknown>>).some(entry =>
       entry.variant === 'solid' && classOf(entry).includes('ring-(--ui-border-accented)')
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 4c5ad18df6..d245c13df2 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -19,8 +19,7 @@ export const presets: ThemePreset[] = [{
   description: 'The stock theme — everything inherited.',
   icon: 'i-simple-icons-nuxt',
   doc: {
-    version: 1,
-    meta: { name: 'Nuxt UI' }
+    version: 1
   }
 }, {
   id: 'shadcn',
@@ -29,7 +28,6 @@ export const presets: ThemePreset[] = [{
   icon: 'i-simple-icons-shadcnui',
   doc: {
     version: 1,
-    meta: { name: 'Shadcn', base: 'shadcn' },
     blackAsPrimary: true,
     colors: {
       neutral: 'zinc'
@@ -51,7 +49,6 @@ export const presets: ThemePreset[] = [{
   icon: 'i-lucide-zap',
   doc: {
     version: 1,
-    meta: { name: 'Neo-brutalist', base: 'neo-brutalist' },
     // A sculpted warm neutral running lilac-tinted paper into pure carbon.
     palettes: {
       carbon: {
@@ -114,7 +111,6 @@ export const presets: ThemePreset[] = [{
   icon: 'i-lucide-citrus',
   doc: {
     version: 1,
-    meta: { name: 'Orchard', base: 'orchard' },
     // A sculpted green-tinted neutral (studio curve editor) whose light end
     // starts far below white — the whole page sits on foliage.
     palettes: {
@@ -183,7 +179,6 @@ export const presets: ThemePreset[] = [{
   icon: 'i-lucide-candy',
   doc: {
     version: 1,
-    meta: { name: 'Marshmallow', base: 'marshmallow' },
     // A sculpted pink-mauve neutral (chroma peaks mid-ramp) instead of the
     // stock mauve.
     palettes: {
@@ -254,7 +249,6 @@ export const presets: ThemePreset[] = [{
   icon: 'i-lucide-book-open',
   doc: {
     version: 1,
-    meta: { name: 'Comicbook', base: 'comicbook' },
     // A cool-violet sculpted neutral for the panel grays.
     palettes: {
       'custom-neutral': {
@@ -320,7 +314,6 @@ export const presets: ThemePreset[] = [{
   icon: 'i-simple-icons-anthropic',
   doc: {
     version: 1,
-    meta: { name: 'Anthropic', base: 'anthropic' },
     palettes: {
       // Anchored on the real brand clay — hsl(14.8 63.1% 59.6%) — at 500,
       // with the ramp's hue and chroma re-fit around it.
@@ -407,7 +400,6 @@ export const presets: ThemePreset[] = [{
   icon: 'i-simple-icons-spotify',
   doc: {
     version: 1,
-    meta: { name: 'Spotify', base: 'spotify' },
     palettes: {
       signal: {
         shades: {
@@ -468,7 +460,6 @@ export const presets: ThemePreset[] = [{
   icon: 'i-simple-icons-bootstrap',
   doc: {
     version: 1,
-    meta: { name: 'Bootstrap', base: 'bootstrap' },
     // The real 5.3 scales: 100–400 are tint-color() (mix with white at
     // 80/60/40/20%), 600–900 are shade-color() (mix with black), extended
     // to 50/950 with the same math. Prefixed names: palettes named plainly
diff --git a/docs/app/utils/theme-engine/resolve.ts b/docs/app/utils/theme-engine/resolve.ts
index d85ec9d269..6c74f36fbc 100644
--- a/docs/app/utils/theme-engine/resolve.ts
+++ b/docs/app/utils/theme-engine/resolve.ts
@@ -2,8 +2,6 @@ import colors from 'tailwindcss/colors'
 import type { ColorAlias, Shade, ThemeDoc } from './types'
 import { DEFAULT_COLORS } from './types'
 
-export type ColorMode = 'light' | 'dark'
-
 /**
  * The semantic token defaults as @nuxt/ui ships them (src/runtime/index.css).
  * Exports diff against THESE — the docs site's own baseline diverges (e.g.
@@ -60,20 +58,6 @@ export const LIBRARY_TOKEN_DEFAULTS = {
   }
 } as const
 
-export interface ResolvedToken {
-  token: string
-  /** The declared value at this level (`var(--ui-color-neutral-200)`, `white`, `#fff`…) */
-  raw: string
-  /** The final computed color when the chain resolves to one, otherwise the last known reference */
-  value: string
-  source: 'default' | 'override'
-  /**
-   * Inheritance breadcrumb, outermost first, e.g.
-   * `['--ui-border', '--ui-color-neutral-200', '--color-slate-200', 'oklch(92.9% 0.013 255.508)']`
-   */
-  chain: string[]
-}
-
 const UI_COLOR_RE = /^var\(--ui-color-([a-z]+)-(\d{2,3})\)$/
 
 /** Parse a `var(--ui-color-<alias>-<shade>)` reference, the one format the studio emits. */
@@ -90,10 +74,7 @@ export function resolveAlias(doc: ThemeDoc, alias: ColorAlias): string {
 export function resolveShade(doc: ThemeDoc, palette: string, shade: Shade): string | undefined {
   const custom = doc.palettes?.[palette]
   if (custom) {
-    const value = custom.shades[shade]
-    if (value) return value
-    if (custom.extends) return resolveShade(doc, custom.extends, shade)
-    return undefined
+    return custom.shades[shade]
   }
   const tailwind = (colors as Record<string, unknown>)[palette]
   if (tailwind && typeof tailwind === 'object') {
@@ -101,45 +82,3 @@ export function resolveShade(doc: ThemeDoc, palette: string, shade: Shade): stri
   }
   return undefined
 }
-
-export function resolveToken(doc: ThemeDoc, mode: ColorMode, token: string): ResolvedToken {
-  const defaults = LIBRARY_TOKEN_DEFAULTS[mode] as Record<string, string>
-  const override = doc.tokens?.[mode]?.[token]
-  const raw = override ?? defaults[token] ?? ''
-
-  const chain = [token]
-  let value = raw
-
-  const match = raw.match(UI_COLOR_RE)
-  if (match) {
-    const [, alias, shade] = match
-    chain.push(`--ui-color-${alias}-${shade}`)
-
-    const palette = resolveAlias(doc, alias as ColorAlias)
-    chain.push(`--color-${palette}-${shade}`)
-
-    const color = resolveShade(doc, palette, Number(shade) as Shade)
-    if (color) {
-      chain.push(color)
-      value = color
-    }
-  } else if (raw) {
-    chain.push(raw)
-  }
-
-  return {
-    token,
-    raw,
-    value,
-    source: override !== undefined ? 'override' : 'default',
-    chain
-  }
-}
-
-/** Resolve every semantic token for a mode, with provenance. */
-export function resolveTokens(doc: ThemeDoc, mode: ColorMode): Record<string, ResolvedToken> {
-  const defaults = LIBRARY_TOKEN_DEFAULTS[mode] as Record<string, string>
-  const tokens = new Set([...Object.keys(defaults), ...Object.keys(doc.tokens?.[mode] || {})])
-
-  return Object.fromEntries([...tokens].map(token => [token, resolveToken(doc, mode, token)]))
-}
diff --git a/docs/app/utils/theme-engine/sections.ts b/docs/app/utils/theme-engine/sections.ts
index 5aed855607..cd5e859378 100644
--- a/docs/app/utils/theme-engine/sections.ts
+++ b/docs/app/utils/theme-engine/sections.ts
@@ -1,5 +1,5 @@
-import type { ThemeDoc } from './types'
-import { DEFAULT_COLORS, THEME_DEFAULTS } from './types'
+import type { ThemeDoc, ShadeStop } from './types'
+import { DEFAULT_COLORS, THEME_DEFAULTS, SEMANTIC_ALIASES } from './types'
 import type { StyleOptions } from './styles'
 import { styleTokens, TOKEN_SHADE_TARGETS } from './styles'
 import { parseUiColorRef } from './resolve'
@@ -27,8 +27,6 @@ export const SECTION_GROUPS: Record<'colors' | 'general' | 'style', SectionKey[]
   style: ['shadow', 'innerShadow', 'borders']
 }
 
-const SEMANTIC_ALIASES = ['secondary', 'success', 'info', 'warning', 'error'] as const
-
 /** Which color section a semantic token (or token shade) belongs to. */
 function tokenSection(token: string): 'primary' | 'semantic' | 'neutral' {
   if (token === '--ui-primary' || token.startsWith('--ui-color-primary')) return 'primary'
@@ -42,11 +40,11 @@ function tokenSection(token: string): 'primary' | 'semantic' | 'neutral' {
  * SAME choice in different slots. Both sides are compared canonicalized:
  * promotable tokens count as shades, never as raw tokens.
  */
-export function promotedShades(doc: ThemeDoc): Record<string, { light?: number, dark?: number }> {
-  const promoted: Record<string, { light?: number, dark?: number }> = {}
+export function promotedShades(doc: ThemeDoc): Record<string, { light?: ShadeStop, dark?: ShadeStop }> {
+  const promoted: Record<string, { light?: ShadeStop, dark?: ShadeStop }> = {}
   const parse = (value: string | undefined, ramp: string) => {
     const ref = parseUiColorRef(value)
-    return ref?.alias === ramp ? ref.shade : undefined
+    return ref?.alias === ramp ? ref.shade as ShadeStop : undefined
   }
   for (const target of TOKEN_SHADE_TARGETS) {
     if (doc.style?.tokenShades?.[target.token]) continue
@@ -74,8 +72,7 @@ function ownedTokens(doc: ThemeDoc, section: 'primary' | 'semantic' | 'neutral')
 }
 
 function ownedTokenShades(doc: ThemeDoc, section: 'primary' | 'semantic' | 'neutral') {
-  const merged = { ...promotedShades(doc), ...doc.style?.tokenShades }
-  return Object.fromEntries(Object.entries(merged).filter(([token]) => tokenSection(token) === section))
+  return Object.fromEntries(Object.entries(canonicalTokenShades(doc)).filter(([token]) => tokenSection(token) === section))
 }
 
 function alias(doc: ThemeDoc, name: keyof typeof DEFAULT_COLORS): string {
@@ -137,14 +134,18 @@ export function pickSection(doc: ThemeDoc, key: SectionKey): unknown {
     case 'panels':
     case 'inputs':
       return groupPick(doc, key)
-    case 'shadow':
+    case 'shadow': {
+      // 'shade' with no explicit stops emits exactly the stock shadow
+      // colors (neutral-950 / black) — a non-choice, same as absent
+      const color = style.shadowColor === 'default' ? null : style.shadowColor ?? null
       return {
         shadow: style.shadow ?? 'none',
-        color: style.shadowColor ?? null,
+        color: color === 'shade' && !style.shadowShade ? null : color,
         shade: style.shadowShade ?? null,
         opacity: style.shadowOpacity ?? null,
         geometry: style.shadowGeometry ?? null
       }
+    }
     case 'innerShadow':
       return {
         shadow: style.innerShadow ?? 'none',
@@ -182,7 +183,7 @@ export function sectionFingerprint(doc: ThemeDoc, key: SectionKey): string {
  * interconverts). The per-row shade resets restore THESE — the baseline's
  * choice, not stock.
  */
-export function canonicalTokenShades(doc: ThemeDoc): Record<string, { light?: number, dark?: number }> {
+export function canonicalTokenShades(doc: ThemeDoc): Record<string, { light?: ShadeStop, dark?: ShadeStop }> {
   return { ...promotedShades(doc), ...doc.style?.tokenShades }
 }
 
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index f340ad2335..f275ec8087 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -25,6 +25,7 @@
  * - `borderColor`/`shadowColor` recolor via the variables; 'default' leaves
  *   each element's own ring color / the dark shadow color untouched.
  */
+import type { ShadeStop } from './types'
 
 export type ShadowStyle = 'none' | 'flat' | 'soft' | 'hard'
 /** 'bold'/'frame' are legacy values (old exports/saved state) treated as 'custom'. */
@@ -42,9 +43,9 @@ export interface StyleOptions {
   borderColor?: BorderColor
   shadowColor?: ShadowColor
   /** Ramp shade per mode — neutral for 'shade', primary for 'primary-shade' */
-  shadowShade?: { light: number, dark: number }
+  shadowShade?: { light?: ShadeStop, dark?: ShadeStop }
   /** Ramp shade per mode — neutral for 'shade', primary for 'primary-shade' */
-  borderShade?: { light: number, dark: number }
+  borderShade?: { light?: ShadeStop, dark?: ShadeStop }
   /** Ring width in px (1–4) while `border` is 'custom'; 2 when unset. */
   borderWidth?: number
   /**
@@ -86,7 +87,7 @@ export interface StyleOptions {
   /** Inner-shadow color; unset inherits the drop shadow's color. */
   innerShadowColor?: ShadowColor
   /** Ramp shade per mode — neutral for 'shade', primary for 'primary-shade' */
-  innerShadowShade?: { light: number, dark: number }
+  innerShadowShade?: { light?: ShadeStop, dark?: ShadeStop }
   /**
    * Semantic token → neutral ramp shade, per mode. Strictly a token
    * shorthand parked on the style axis until the studio grows a full
@@ -95,7 +96,7 @@ export interface StyleOptions {
    * so hydrating one mode from a preset never leaks a phantom override
    * for the other into exports.
    */
-  tokenShades?: Record<string, { light?: number, dark?: number }>
+  tokenShades?: Record<string, { light?: ShadeStop, dark?: ShadeStop }>
 }
 
 /** The whole input family shares input's variant vocabulary (they extend it via defu). */
@@ -142,7 +143,7 @@ export const SHADOW_GEOMETRY_DEFAULTS = { x: 3, y: 3, blur: 0, spread: 0 }
 export const INNER_SHADOW_GEOMETRY_DEFAULTS = { x: 0, y: 2, blur: 4, spread: 0 }
 
 /** Borders default opposite to the surface: dark ink on light, pale on dark. */
-export const BORDER_SHADE_DEFAULTS = { light: 900, dark: 200 }
+export const BORDER_SHADE_DEFAULTS: { light: ShadeStop, dark: ShadeStop } = { light: 900, dark: 200 }
 
 /** Color scale a token slider walks — neutral, or any semantic alias's ramp. */
 export type TokenRamp = 'neutral' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error'
@@ -163,30 +164,33 @@ export const TOKEN_GROUPS: Array<{ key: TokenGroup, label: string }> = [
  * the semantic aliases ride their own ramps (--ui-secondary follows the
  * secondary palette, etc. — all generated by the runtime colors plugin).
  */
-export const TOKEN_SHADE_TARGETS: Array<{ token: string, label: string, ramp: TokenRamp, group: TokenGroup, defaults: { light: number, dark: number } }> = [
+// defaults are the LIBRARY's real resting values — several are the
+// literal ladder ends (light --ui-bg is `white`, not a ramp stop)
+export const TOKEN_SHADE_TARGETS: Array<{ token: string, label: string, ramp: TokenRamp, group: TokenGroup, defaults: { light: ShadeStop, dark: ShadeStop } }> = [
   { token: '--ui-primary', label: 'Primary', ramp: 'primary', group: 'colors', defaults: { light: 500, dark: 400 } },
   { token: '--ui-secondary', label: 'Secondary', ramp: 'secondary', group: 'colors', defaults: { light: 500, dark: 400 } },
   { token: '--ui-success', label: 'Success', ramp: 'success', group: 'colors', defaults: { light: 500, dark: 400 } },
   { token: '--ui-info', label: 'Info', ramp: 'info', group: 'colors', defaults: { light: 500, dark: 400 } },
   { token: '--ui-warning', label: 'Warning', ramp: 'warning', group: 'colors', defaults: { light: 500, dark: 400 } },
   { token: '--ui-error', label: 'Error', ramp: 'error', group: 'colors', defaults: { light: 500, dark: 400 } },
-  { token: '--ui-bg', label: 'Default', ramp: 'neutral', group: 'background', defaults: { light: 50, dark: 900 } },
+  { token: '--ui-bg', label: 'Default', ramp: 'neutral', group: 'background', defaults: { light: 'white', dark: 900 } },
   { token: '--ui-bg-muted', label: 'Muted', ramp: 'neutral', group: 'background', defaults: { light: 50, dark: 800 } },
   { token: '--ui-bg-elevated', label: 'Elevated', ramp: 'neutral', group: 'background', defaults: { light: 100, dark: 800 } },
   { token: '--ui-bg-accented', label: 'Accented', ramp: 'neutral', group: 'background', defaults: { light: 200, dark: 700 } },
-  { token: '--ui-bg-inverted', label: 'Inverted', ramp: 'neutral', group: 'background', defaults: { light: 900, dark: 50 } },
+  { token: '--ui-bg-inverted', label: 'Inverted', ramp: 'neutral', group: 'background', defaults: { light: 900, dark: 'white' } },
   { token: '--ui-text-dimmed', label: 'Dimmed', ramp: 'neutral', group: 'text', defaults: { light: 400, dark: 500 } },
   { token: '--ui-text-muted', label: 'Muted', ramp: 'neutral', group: 'text', defaults: { light: 500, dark: 400 } },
   { token: '--ui-text-toned', label: 'Toned', ramp: 'neutral', group: 'text', defaults: { light: 600, dark: 300 } },
   { token: '--ui-text', label: 'Default', ramp: 'neutral', group: 'text', defaults: { light: 700, dark: 200 } },
-  { token: '--ui-text-highlighted', label: 'Highlighted', ramp: 'neutral', group: 'text', defaults: { light: 900, dark: 50 } },
-  { token: '--ui-text-inverted', label: 'Inverted', ramp: 'neutral', group: 'text', defaults: { light: 50, dark: 900 } },
+  { token: '--ui-text-highlighted', label: 'Highlighted', ramp: 'neutral', group: 'text', defaults: { light: 900, dark: 'white' } },
+  { token: '--ui-text-inverted', label: 'Inverted', ramp: 'neutral', group: 'text', defaults: { light: 'white', dark: 900 } },
   { token: '--ui-border', label: 'Default', ramp: 'neutral', group: 'border', defaults: { light: 200, dark: 800 } },
   { token: '--ui-border-muted', label: 'Muted', ramp: 'neutral', group: 'border', defaults: { light: 200, dark: 700 } },
   { token: '--ui-border-accented', label: 'Accented', ramp: 'neutral', group: 'border', defaults: { light: 300, dark: 700 } },
-  { token: '--ui-border-inverted', label: 'Inverted', ramp: 'neutral', group: 'border', defaults: { light: 900, dark: 50 } }
+  { token: '--ui-border-inverted', label: 'Inverted', ramp: 'neutral', group: 'border', defaults: { light: 900, dark: 'white' } }
 ]
-export const SHADOW_SHADE_DEFAULTS = { light: 950, dark: 800 }
+// mirrors main.css: light neutral-950, dark literal black
+export const SHADOW_SHADE_DEFAULTS: { light: ShadeStop, dark: ShadeStop } = { light: 950, dark: 'black' }
 
 interface ComponentFragment {
   slots?: Record<string, string>
@@ -207,6 +211,12 @@ const FLAT_FIELD_VARIANTS = [
 // them). Hard scales mirror the originals: base for field-size surfaces,
 // ×1.5 for panels/overlays, ×0.66 for badge-size ones.
 const SOFT_LG = 'shadow-lg shadow-(color:--ui-shadow-final-soft)'
+
+/** A ramp shade reference — or the literal when the stop is white/black. */
+function shadeRef(ramp: string, stop: ShadeStop | number): string {
+  return stop === 'white' || stop === 'black' ? stop : `var(--ui-color-${ramp}-${stop})`
+}
+
 const HARD_BASE = 'shadow-(--ui-shadow-hard)'
 const HARD_LG = 'shadow-(--ui-shadow-hard-lg)'
 const HARD_SM = 'shadow-(--ui-shadow-hard-sm)'
@@ -480,8 +490,8 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
   if (style.borderColor === 'shade' || style.borderColor === 'primary-shade') {
     const ramp = style.borderColor === 'primary-shade' ? 'primary' : 'neutral'
     const shade = { ...BORDER_SHADE_DEFAULTS, ...style.borderShade }
-    light['--ui-frame-color'] = `var(--ui-color-${ramp}-${shade.light})`
-    dark['--ui-frame-color'] = `var(--ui-color-${ramp}-${shade.dark})`
+    light['--ui-frame-color'] = shadeRef(ramp, shade.light)
+    dark['--ui-frame-color'] = shadeRef(ramp, shade.dark)
   } else if (style.borderColor && style.borderColor !== 'default') {
     const value = FRAME_COLOR_VALUES[style.borderColor]
     light['--ui-frame-color'] = value.light
@@ -490,8 +500,8 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
   for (const [token, shade] of Object.entries(style.tokenShades || {})) {
     const target = TOKEN_SHADE_TARGETS.find(target => target.token === token)
     if (target) {
-      if (shade.light !== undefined) light[token] = `var(--ui-color-${target.ramp}-${shade.light})`
-      if (shade.dark !== undefined) dark[token] = `var(--ui-color-${target.ramp}-${shade.dark})`
+      if (shade.light !== undefined) light[token] = shadeRef(target.ramp, shade.light)
+      if (shade.dark !== undefined) dark[token] = shadeRef(target.ramp, shade.dark)
     }
   }
 
@@ -526,8 +536,8 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
     // independently of the scheme it sits on; the primary ramp tints it.
     const ramp = style.shadowColor === 'primary-shade' ? 'primary' : 'neutral'
     const shade = { ...SHADOW_SHADE_DEFAULTS, ...style.shadowShade }
-    light['--ui-shadow-color'] = `var(--ui-color-${ramp}-${shade.light})`
-    dark['--ui-shadow-color'] = `var(--ui-color-${ramp}-${shade.dark})`
+    light['--ui-shadow-color'] = shadeRef(ramp, shade.light)
+    dark['--ui-shadow-color'] = shadeRef(ramp, shade.dark)
   } else if (style.shadowColor && style.shadowColor !== 'default') {
     const value = SHADOW_COLOR_VALUES[style.shadowColor]
     light['--ui-shadow-color'] = value.light
@@ -537,8 +547,8 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
   if (style.innerShadowColor === 'shade' || style.innerShadowColor === 'primary-shade') {
     const ramp = style.innerShadowColor === 'primary-shade' ? 'primary' : 'neutral'
     const shade = { ...SHADOW_SHADE_DEFAULTS, ...style.innerShadowShade }
-    light['--ui-inner-shadow-color'] = `var(--ui-color-${ramp}-${shade.light})`
-    dark['--ui-inner-shadow-color'] = `var(--ui-color-${ramp}-${shade.dark})`
+    light['--ui-inner-shadow-color'] = shadeRef(ramp, shade.light)
+    dark['--ui-inner-shadow-color'] = shadeRef(ramp, shade.dark)
   } else if (style.innerShadowColor && style.innerShadowColor !== 'default') {
     const value = SHADOW_COLOR_VALUES[style.innerShadowColor]
     light['--ui-inner-shadow-color'] = value.light
diff --git a/docs/app/utils/theme-engine/types.ts b/docs/app/utils/theme-engine/types.ts
index a642695bf6..f7336d9c78 100644
--- a/docs/app/utils/theme-engine/types.ts
+++ b/docs/app/utils/theme-engine/types.ts
@@ -4,18 +4,20 @@ export const SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as
 
 export type Shade = typeof SHADES[number]
 
+/**
+ * The shade sliders' full travel: the ramp plus literal white/black ends.
+ * The ends matter because several stock defaults are literals the ramp
+ * can't express (--ui-bg is `white`, the stock dark shadow is `black`) —
+ * without them the sliders could only pin lookalike ramp overrides.
+ */
+export const SHADE_LADDER = ['white', ...SHADES, 'black'] as const
+
+export type ShadeStop = typeof SHADE_LADDER[number]
+
 export type ColorAlias = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
 
 export interface ThemePalette {
-  /** Tailwind palette this one is based on, when only some shades differ */
-  extends?: string
   shades: Partial<Record<Shade, string>>
-  /**
-   * Generator params the shades were materialized from (see palette.ts),
-   * kept so the palette stays editable in the studio. Purely metadata:
-   * exports and application always use the materialized `shades`.
-   */
-  curve?: import('./palette').PaletteCurveParams
 }
 
 /**
@@ -25,13 +27,6 @@ export interface ThemePalette {
  */
 export interface ThemeDoc {
   version: 1
-  meta?: {
-    name?: string
-    /** Preset id this document was forked from */
-    base?: string
-    /** Seed used by shuffle, kept for reproducible rolls */
-    seed?: number
-  }
   /** L0 — custom palettes, injected as `--color-{name}-{shade}` */
   palettes?: Record<string, ThemePalette>
   /** L1 — alias → palette name (tailwind or a key of `palettes`) */
@@ -93,6 +88,9 @@ export const DEFAULT_COLORS: Record<ColorAlias, string> = {
   neutral: 'slate'
 }
 
+/** Every color alias that isn't primary or neutral. */
+export const SEMANTIC_ALIASES = ['secondary', 'success', 'info', 'warning', 'error'] as const
+
 export const THEME_DEFAULTS = {
   radius: 0.25,
   fontSize: 16,
@@ -101,10 +99,6 @@ export const THEME_DEFAULTS = {
   icons: 'lucide'
 } as const
 
-export function createThemeDoc(): ThemeDoc {
-  return { version: 1 }
-}
-
 /** A document with no overrides means "stock Nuxt UI". */
 export function isDefaultTheme(doc: ThemeDoc): boolean {
   return !doc.palettes && !doc.colors && !doc.blackAsPrimary && !doc.tokens
diff --git a/docs/app/utils/theme.ts b/docs/app/utils/theme.ts
index f5dafd7db8..3880d9e0d5 100644
--- a/docs/app/utils/theme.ts
+++ b/docs/app/utils/theme.ts
@@ -11,6 +11,11 @@ export function readLocalStorage<T>(key: string, fallback: T): T {
   }
 }
 
+/** Uppercase the first letter — labels from config values. */
+export function capitalize(value: string) {
+  return value.charAt(0).toUpperCase() + value.slice(1)
+}
+
 /** Tailwind's stock weight ladder — set steps are absences at these values. */
 export const FONT_WEIGHT_DEFAULTS = { normal: 400, medium: 500, semibold: 600, bold: 700 } as const
 
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 814c5acd8a..f24a15ae82 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -1,12 +1,9 @@
 import { describe, it, expect } from 'vitest'
 import {
-  createThemeDoc,
   isDefaultTheme,
   generateCSS,
   generateConfig,
   docToSettings,
-  resolveToken,
-  resolveTokens,
   presets,
   generatePalette,
   fitPalette,
@@ -15,15 +12,17 @@ import {
   contrastRatio,
   CURVE_DEFAULTS,
   SHADES,
-  LIBRARY_TOKEN_DEFAULTS
+  LIBRARY_TOKEN_DEFAULTS,
+  parseUiColorRef,
+  resolveAlias,
+  resolveShade
 } from '../../docs/app/utils/theme-engine'
 import type { ThemeDoc } from '../../docs/app/utils/theme-engine'
-import colors from 'tailwindcss/colors'
 
 describe('theme-engine', () => {
   describe('isDefaultTheme', () => {
     it('treats an empty doc as default', () => {
-      expect(isDefaultTheme(createThemeDoc())).toBe(true)
+      expect(isDefaultTheme({ version: 1 as const })).toBe(true)
     })
 
     it('treats any override as non-default', () => {
@@ -35,7 +34,7 @@ describe('theme-engine', () => {
 
   describe('generateCSS', () => {
     it('emits only the imports for a default doc', () => {
-      expect(generateCSS(createThemeDoc())).toBe('@import "tailwindcss";\n@import "@nuxt/ui";')
+      expect(generateCSS({ version: 1 as const })).toBe('@import "tailwindcss";\n@import "@nuxt/ui";')
     })
 
     it('emits only what the doc overrides', () => {
@@ -94,7 +93,7 @@ describe('theme-engine', () => {
 
   describe('generateConfig', () => {
     it('emits an empty app config for a default doc', () => {
-      expect(generateConfig(createThemeDoc())).toBe('export default defineAppConfig({})')
+      expect(generateConfig({ version: 1 as const })).toBe('export default defineAppConfig({})')
     })
 
     it('only includes color aliases that differ from the defaults', () => {
@@ -150,48 +149,6 @@ describe('theme-engine', () => {
     })
   })
 
-  describe('resolveToken', () => {
-    it('resolves a default token through the alias chain with provenance', () => {
-      const resolved = resolveToken(createThemeDoc(), 'light', '--ui-border')
-
-      expect(resolved.source).toBe('default')
-      expect(resolved.chain).toEqual(['--ui-border', '--ui-color-neutral-200', '--color-slate-200', colors.slate[200]])
-      expect(resolved.value).toBe(colors.slate[200])
-    })
-
-    it('follows alias remaps into custom palettes', () => {
-      const doc: ThemeDoc = {
-        version: 1,
-        colors: { neutral: 'ink' },
-        palettes: { ink: { shades: { 200: 'oklch(90.1% 0 0)' } } }
-      }
-
-      const resolved = resolveToken(doc, 'light', '--ui-border')
-
-      expect(resolved.chain).toEqual(['--ui-border', '--ui-color-neutral-200', '--color-ink-200', 'oklch(90.1% 0 0)'])
-      expect(resolved.value).toBe('oklch(90.1% 0 0)')
-    })
-
-    it('marks token overrides and resolves their new target', () => {
-      const doc: ThemeDoc = {
-        version: 1,
-        tokens: { dark: { '--ui-bg': 'var(--ui-color-neutral-950)' } }
-      }
-
-      const resolved = resolveToken(doc, 'dark', '--ui-bg')
-
-      expect(resolved.source).toBe('override')
-      expect(resolved.chain).toEqual(['--ui-bg', '--ui-color-neutral-950', '--color-slate-950', colors.slate[950]])
-    })
-
-    it('keeps literals as-is', () => {
-      const resolved = resolveToken(createThemeDoc(), 'light', '--ui-bg')
-
-      expect(resolved.value).toBe('white')
-      expect(resolved.chain).toEqual(['--ui-bg', 'white'])
-    })
-  })
-
   describe('presets', () => {
     it.each(presets.map(preset => [preset.id, preset] as const))('%s generates valid exports', (_id, preset) => {
       const css = generateCSS(preset.doc)
@@ -208,9 +165,12 @@ describe('theme-engine', () => {
     it('every token override in presets resolves to a color', () => {
       for (const preset of presets) {
         for (const mode of ['light', 'dark'] as const) {
-          const resolved = resolveTokens(preset.doc, mode)
-          for (const token of Object.keys(preset.doc.tokens?.[mode] || {})) {
-            expect(resolved[token]!.value, `${preset.id} ${mode} ${token}`).toMatch(/^#|^oklch\(|^white$|^black$/)
+          for (const [token, value] of Object.entries(preset.doc.tokens?.[mode] || {})) {
+            const ref = parseUiColorRef(value)
+            const resolved = ref
+              ? resolveShade(preset.doc, resolveAlias(preset.doc, ref.alias as any), ref.shade as any)
+              : value
+            expect(resolved, `${preset.id} ${mode} ${token}`).toMatch(/^#|^oklch\(|^white$|^black$/)
           }
         }
       }
@@ -531,8 +491,8 @@ describe('style colors', () => {
       light: { '--ui-shadow-color': 'var(--ui-color-neutral-700)' },
       dark: { '--ui-shadow-color': 'var(--ui-color-neutral-300)' }
     })
-    // defaults apply when shades are unset
-    expect(styleTokens({ shadowColor: 'shade' }).dark['--ui-shadow-color']).toBe('var(--ui-color-neutral-800)')
+    // defaults apply when shades are unset — dark rests on stock literal black
+    expect(styleTokens({ shadowColor: 'shade' }).dark['--ui-shadow-color']).toBe('black')
   })
 
   it('styleTokens maps token shades per mode, only for modes present', async () => {
diff --git a/test/utils/theme-import.spec.ts b/test/utils/theme-import.spec.ts
index e673944ad0..839b431be4 100644
--- a/test/utils/theme-import.spec.ts
+++ b/test/utils/theme-import.spec.ts
@@ -66,6 +66,32 @@ describe('importTheme', () => {
     })
   })
 
+  it('round-trips white/black ladder stops in shades and token shades', () => {
+    const original: ThemeDoc = {
+      version: 1,
+      style: {
+        shadow: 'hard',
+        shadowColor: 'shade',
+        // literal ladder ends mixed with a ramp stop (NOT the stock
+        // 950/black pair, which the importer rightly reads as no-choice)
+        shadowShade: { light: 900, dark: 'black' },
+        tokenShades: { '--ui-bg': { light: 'white' } }
+      }
+    }
+    const css = generateCSS(original)
+    expect(css).toContain('--ui-shadow-color: black')
+    expect(css).toContain('--ui-bg: white')
+
+    const { doc: imported, skipped } = importTheme({ css, config: generateConfig(original) })
+    expect(skipped).toEqual([])
+    // the literals survive semantically (representation may re-slot between
+    // the style axis and plain tokens) and the round-trip reaches a fixed point
+    expect(effectiveVars(imported)).toEqual(effectiveVars(original))
+    const second = importTheme({ css: generateCSS(imported), config: generateConfig(imported) })
+    expect(second.skipped).toEqual([])
+    expect(generateCSS(second.doc)).toBe(generateCSS(imported))
+  })
+
   it('round-trips an inner-shadow style', () => {
     const original: ThemeDoc = {
       version: 1,

From b7dc498943a6f22eb30c9a55a0140b5e4ccf30e6 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 12 Jul 2026 03:35:55 +0200
Subject: [PATCH 143/185] refactor(docs): shared pickers and a three-way split
 for theme studio controls

ThemeStudioControls becomes a dispatcher over Colors/General/Style files;
the tagged-(Default) select and popover-listbox picker extract into
ThemeStudioDefaultSelect and ThemeStudioListPicker; sections self-serve
dirty/reset via a section-key prop; border and inner-shadow defaults get
honest names (Per element / Inherit shadow).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioColorSection.vue  |  21 +-
 .../theme-studio/ThemeStudioControls.vue      | 984 +-----------------
 .../ThemeStudioControlsColors.vue             |  40 +
 .../ThemeStudioControlsGeneral.vue            | 548 ++++++++++
 .../theme-studio/ThemeStudioControlsStyle.vue | 345 ++++++
 .../theme-studio/ThemeStudioDefaultSelect.vue |  54 +
 .../theme-studio/ThemeStudioListPicker.vue    |  61 ++
 .../theme-studio/ThemeStudioPresetMenu.vue    |  14 +-
 .../theme-studio/ThemeStudioSection.vue       |  17 +-
 .../theme-studio/ThemeStudioSliderRow.vue     |  13 +-
 docs/app/pages/theme.vue                      |   4 +
 11 files changed, 1095 insertions(+), 1006 deletions(-)
 create mode 100644 docs/app/components/theme-studio/ThemeStudioControlsColors.vue
 create mode 100644 docs/app/components/theme-studio/ThemeStudioControlsGeneral.vue
 create mode 100644 docs/app/components/theme-studio/ThemeStudioControlsStyle.vue
 create mode 100644 docs/app/components/theme-studio/ThemeStudioDefaultSelect.vue
 create mode 100644 docs/app/components/theme-studio/ThemeStudioListPicker.vue

diff --git a/docs/app/components/theme-studio/ThemeStudioColorSection.vue b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
index 26de7ff800..2b8a1e13db 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADES, canonicalTokenShades } from '../../utils/theme-engine'
-import type { ColorAlias } from '../../utils/theme-engine'
+import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADE_LADDER, canonicalTokenShades } from '../../utils/theme-engine'
+import type { ColorAlias, SectionKey, ShadeStop } from '../../utils/theme-engine'
 
 /**
  * One color alias in the Colors panel: a section header carrying the edit
@@ -14,18 +14,15 @@ const props = defineProps<{
   label?: string
   helpTo?: string
   /** Passed through to the section header's reset affordance. */
-  resettable?: boolean
-  dirty?: boolean
+  sectionKey?: SectionKey
 }>()
 
-const emit = defineEmits<{ reset: [] }>()
-
 const { style, setStyle, rampChip, baselineDoc } = useThemeStudio()
 
 /** The active preset's own shade choices — what a row reset restores. */
 const baselineShades = computed(() => canonicalTokenShades(baselineDoc.value))
 
-const title = computed(() => props.label ?? props.alias.charAt(0).toUpperCase() + props.alias.slice(1))
+const title = computed(() => props.label ?? capitalize(props.alias))
 
 const paletteEditor = ref(false)
 const shadeEditor = ref(false)
@@ -37,17 +34,17 @@ const shadeEditor = ref(false)
 // preset made no choice (the token's real default may not sit on the ramp
 // at all — --ui-bg is literally `white` — so writing a "default shade"
 // would pin a lookalike override over it).
-function tokenShadeControl(token: string, defaults: { light: number, dark: number }, target: 'light' | 'dark') {
+function tokenShadeControl(token: string, defaults: { light: ShadeStop, dark: ShadeStop }, target: 'light' | 'dark') {
   const model = computed({
     get: () => {
       const value = style.value.tokenShades?.[token]?.[target] ?? defaults[target]
-      return SHADES.indexOf(value as typeof SHADES[number])
+      return SHADE_LADDER.indexOf(value as typeof SHADE_LADDER[number])
     },
     set: (index: number) => {
       setStyle({
         tokenShades: {
           ...style.value.tokenShades,
-          [token]: { ...style.value.tokenShades?.[token], [target]: SHADES[index]! }
+          [token]: { ...style.value.tokenShades?.[token], [target]: SHADE_LADDER[index]! }
         }
       })
     }
@@ -55,7 +52,7 @@ function tokenShadeControl(token: string, defaults: { light: number, dark: numbe
   const baseline = computed(() => baselineShades.value[token]?.[target])
   const dirty = computed(() => style.value.tokenShades?.[token]?.[target] !== baseline.value)
   function reset() {
-    const entry = { ...style.value.tokenShades?.[token] }
+    const entry: { light?: ShadeStop, dark?: ShadeStop } = { ...style.value.tokenShades?.[token] }
     if (baseline.value !== undefined) entry[target] = baseline.value
     else Reflect.deleteProperty(entry, target)
     const tokenShades = { ...style.value.tokenShades }
@@ -85,7 +82,7 @@ const openGroups = reactive<Record<string, boolean>>({})
 </script>
 
 <template>
-  <ThemeStudioSection :label="title" :help-to="helpTo" :resettable="resettable" :dirty="dirty" @reset="emit('reset')">
+  <ThemeStudioSection :label="title" :help-to="helpTo" :section-key="sectionKey">
     <template #actions>
       <UTooltip text="Adjust shades">
         <UButton
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 90b90aa212..848f986a98 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -1,990 +1,18 @@
 <script setup lang="ts">
-import { SHADES, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, BORDER_WIDTH_DEFAULT, SHADOW_GEOMETRY_DEFAULTS, INNER_SHADOW_GEOMETRY_DEFAULTS } from '../../utils/theme-engine'
-import { themeIcons, FONT_WEIGHT_DEFAULTS } from '../../utils/theme'
-import type { VariantGroup, ColorAlias } from '../../utils/theme-engine'
+import { ThemeStudioControlsColors, ThemeStudioControlsGeneral, ThemeStudioControlsStyle } from '#components'
 
 /** Which settings group this instance renders — one popover per group. */
 defineProps<{
   group: 'colors' | 'general' | 'style'
 }>()
 
-const {
-  radius,
-  fontSize,
-  spacing,
-  fonts,
-  font,
-  fontPrefs,
-  setFontPrefs,
-  icon,
-  icons
-} = useTheme()
-
-const { style, setStyle, primaryChip, neutralChip, sectionDirty, resetSection, baselineDoc } = useThemeStudio()
-
-// one dirty flag per section, measured against the active preset
-const dirty = Object.fromEntries(
-  (['primary', 'neutral', 'semantic', 'font', 'icons', 'scale', 'buttons', 'panels', 'inputs', 'shadow', 'innerShadow', 'borders'] as const)
-    .map(key => [key, sectionDirty(key)])
-) as Record<string, ComputedRef<boolean>>
-
-/* ------------------------------------------------------------ typography -- */
-
-onMounted(() => loadFontPreviews(fonts))
-
-// One writable model per tailwind weight step — the knobs components
-// actually dereference at runtime.
-function weightStepModel(step: keyof typeof FONT_WEIGHT_DEFAULTS) {
-  return computed({
-    get: () => fontPrefs.value.weights?.[step] ?? FONT_WEIGHT_DEFAULTS[step],
-    set: (value: number) => setFontPrefs({ ...fontPrefs.value, weights: { ...fontPrefs.value.weights, [step]: value } })
-  })
-}
-
-const WEIGHT_STEPS = ['normal', 'medium', 'semibold', 'bold'] as const
-const weightSteps = Object.fromEntries(WEIGHT_STEPS.map(step => [step, weightStepModel(step)])) as Record<typeof WEIGHT_STEPS[number], ReturnType<typeof weightStepModel>>
-const weightsDirty = computed(() => !!fontPrefs.value.weights)
-
-const INHERIT_FONT = { label: 'Inherit base', value: 'inherit' }
-const headingFontItems = computed(() => [INHERIT_FONT, ...fonts.map(name => ({ label: name, value: name }))])
-
-function setHeading(patch: Record<string, unknown>) {
-  setFontPrefs({ ...fontPrefs.value, heading: { ...fontPrefs.value.heading, ...patch } })
-}
-
-const headingFont = computed({
-  get: () => fontPrefs.value.heading?.font ?? 'inherit',
-  set: (value: string) => setHeading({ font: value === 'inherit' ? undefined : value })
-})
-
-const headingWeight = computed({
-  get: () => fontPrefs.value.heading?.weight ?? 700,
-  set: (value: number) => setHeading({ weight: value })
-})
-
-const headingUppercase = computed({
-  get: () => !!fontPrefs.value.heading?.uppercase,
-  set: (value: boolean) => setHeading({ uppercase: value })
-})
-
-const baseUppercase = computed({
-  get: () => !!fontPrefs.value.uppercase,
-  set: (value: boolean) => setFontPrefs({ ...fontPrefs.value, uppercase: value })
-})
-
-const baseLetterSpacing = computed({
-  get: () => fontPrefs.value.letterSpacing ?? 0,
-  set: (value: number) => setFontPrefs({ ...fontPrefs.value, letterSpacing: value })
-})
-
-const baseLineHeight = computed({
-  get: () => fontPrefs.value.lineHeight ?? 1.5,
-  set: (value: number) => setFontPrefs({ ...fontPrefs.value, lineHeight: value })
-})
-
-const headingLetterSpacing = computed({
-  get: () => fontPrefs.value.heading?.letterSpacing ?? 0,
-  set: (value: number) => setHeading({ letterSpacing: value })
-})
-
-// Headings natively lead at ~1.25 (the specimen agrees) — 1.5 here would
-// show a value the page isn't actually rendering.
-const headingLineHeight = computed({
-  get: () => fontPrefs.value.heading?.lineHeight ?? 1.25,
-  set: (value: number) => setHeading({ lineHeight: value })
-})
-
-// The Base and Headings rows are the same toolbar over different models —
-// one config each, one template. Base tunes the four tailwind weight steps;
-// headings have a single weight.
-const capitalize = (value: string) => value.charAt(0).toUpperCase() + value.slice(1)
-const fontRows = [{
-  key: 'base',
-  label: 'Base',
-  defaultValue: 'Public Sans',
-  selectIcon: 'i-lucide-type',
-  items: computed(() => fonts.map(name => ({ label: name, value: name }))),
-  font,
-  weights: WEIGHT_STEPS.map(step => ({ label: capitalize(step), model: weightSteps[step]!, min: 100, max: 900 })),
-  weightsActive: weightsDirty,
-  uppercase: baseUppercase,
-  letterSpacing: baseLetterSpacing,
-  lineHeight: baseLineHeight,
-  lineHeightDefault: 1.5,
-  aria: { weights: 'Font weights', uppercase: 'Uppercase text', spacing: 'Letter spacing', height: 'Line height' }
-}, {
-  key: 'heading',
-  label: 'Headings (Prose)',
-  defaultValue: 'inherit',
-  selectIcon: 'i-lucide-heading',
-  items: headingFontItems,
-  font: headingFont,
-  weights: [{ label: 'Weight', model: headingWeight, min: 100, max: 900 }],
-  weightsActive: computed(() => fontPrefs.value.heading?.weight !== undefined),
-  uppercase: headingUppercase,
-  letterSpacing: headingLetterSpacing,
-  lineHeight: headingLineHeight,
-  lineHeightDefault: 1.25,
-  aria: { weights: 'Heading weight', uppercase: 'Uppercase headings', spacing: 'Heading letter spacing', height: 'Heading line height' }
-}]
-
-/** Font listbox popovers close on pick — one open flag per row. */
-const fontListOpen = reactive<Record<string, boolean>>({ base: false, heading: false })
-
-/** Live specimen: a heading line in the heading treatment over a body line. */
-const headingSampleStyle = computed(() => ({
-  fontFamily: `'${fontPrefs.value.heading?.font ?? font.value}', sans-serif`,
-  fontWeight: fontPrefs.value.heading?.weight ?? 700,
-  textTransform: (fontPrefs.value.heading?.uppercase || fontPrefs.value.uppercase) ? 'uppercase' as const : undefined,
-  fontStyle: (fontPrefs.value.heading?.italic || fontPrefs.value.italic) ? 'italic' as const : undefined,
-  textDecoration: fontPrefs.value.heading?.underline ? 'underline' as const : undefined,
-  letterSpacing: `${fontPrefs.value.heading?.letterSpacing ?? fontPrefs.value.letterSpacing ?? 0}em`,
-  lineHeight: fontPrefs.value.heading?.lineHeight ?? 1.25
-}))
-const bodySampleStyle = computed(() => ({
-  fontFamily: `'${font.value}', sans-serif`,
-  fontWeight: fontPrefs.value.weights?.normal ?? 400,
-  textTransform: fontPrefs.value.uppercase ? 'uppercase' as const : undefined,
-  fontStyle: fontPrefs.value.italic ? 'italic' as const : undefined,
-  letterSpacing: `${fontPrefs.value.letterSpacing ?? 0}em`,
-  lineHeight: fontPrefs.value.lineHeight ?? 1.5
-}))
-
-/* ---------------------------------------------------------------- icons -- */
-
-/** A representative spread from the selected set for the preview grid. */
-const SAMPLE_ICON_KEYS = ['search', 'check', 'close', 'warning', 'error', 'info', 'tip', 'light', 'dark', 'external', 'plus', 'minus', 'loading', 'copy', 'file', 'folder', 'eye', 'star', 'upload', 'menu', 'ellipsis', 'reload', 'arrowRight', 'chevronDown']
-const iconPreviews = computed(() => {
-  const set = (themeIcons as Record<string, Record<string, string>>)[icon.value] || {}
-  return SAMPLE_ICON_KEYS.map(key => set[key]).filter((name): name is string => !!name).slice(0, 20)
-})
-
-/** A short strip of a set's own glyphs for its listbox row. */
-function iconSetSamples(setName: string): string[] {
-  const set = (themeIcons as Record<string, Record<string, string>>)[setName] || {}
-  return ['search', 'check', 'warning', 'light', 'dark', 'star', 'folder', 'upload'].map(key => set[key]).filter((name): name is string => !!name)
-}
-
-const iconListOpen = ref(false)
-
-const semanticAliases: ColorAlias[] = ['secondary', 'success', 'info', 'warning', 'error']
-
-// Inherit leaves the library's own shadows alone, None strips them, Custom
-// is the studio treatment. The engine still understands 'soft' (presets,
-// imports) — it simply reads as Custom here.
-const SHADOW_STYLE_OPTIONS = [
-  { label: 'Inherit', value: 'inherit' },
-  { label: 'None', value: 'none' },
-  { label: 'Custom', value: 'custom' }
-]
-
-const shadowStyle = computed({
-  get: () => {
-    const shadow = style.value.shadow
-    if (!shadow || shadow === 'none') return 'inherit'
-    return shadow === 'flat' ? 'none' : 'custom'
-  },
-  // Custom starts where the library already is: geometry approximating the
-  // stock shadow-lg, so entering Custom isn't a jump (20% ≈ shadow-lg's two
-  // stacked 10% layers flattened into one). Leaving Custom clears the knobs
-  // — Inherit means a clean slate, and the next Custom reseeds fresh.
-  set: (value: any) => setStyle(value === 'custom'
-    ? {
-        shadow: 'hard',
-        ...(style.value.shadowGeometry === undefined ? { shadowGeometry: { x: 0, y: 6, blur: 12, spread: 0 } } : {}),
-        ...(style.value.shadowOpacity === undefined ? { shadowOpacity: 20 } : {})
-      }
-    : { shadow: value === 'none' ? 'flat' : 'none', shadowGeometry: undefined, shadowOpacity: undefined, shadowColor: undefined, shadowShade: undefined })
-})
-
-// Nothing in the library casts an inner shadow, so None and Inherit are
-// the same thing — two options suffice.
-const INNER_SHADOW_OPTIONS = [
-  { label: 'None', value: 'none' },
-  { label: 'Custom', value: 'custom' }
-]
-
-const innerShadowStyle = computed({
-  get: () => (!style.value.innerShadow || style.value.innerShadow === 'none') ? 'none' : 'custom',
-  set: (value: any) => setStyle({ innerShadow: value === 'custom' ? 'hard' : 'none' })
-})
-
-const shadowOpacity = computed({
-  get: () => style.value.shadowOpacity ?? (style.value.shadow === 'hard' ? 100 : 25),
-  set: (value: number) => setStyle({ shadowOpacity: value })
-})
-
-const innerShadowOpacity = computed({
-  get: () => style.value.innerShadowOpacity ?? 15,
-  set: (value: number) => setStyle({ innerShadowOpacity: value })
-})
-
-const innerShadowColor = computed({
-  get: () => style.value.innerShadowColor || 'default',
-  set: (value: any) => setStyle({ innerShadowColor: value })
-})
-
-const borderOptions = [
-  { label: 'Inherit', value: 'default' },
-  { label: 'None', value: 'none' },
-  { label: 'Custom', value: 'custom' }
-]
-
-// Legacy saved prefs may still hold bold/frame — both read as custom.
-const borderStyle = computed({
-  get: () => {
-    const value = style.value.border || 'default'
-    return value === 'bold' || value === 'frame' ? 'custom' : value
-  },
-  set: (value: any) => setStyle({ border: value })
-})
-
-const borderWidth = computed({
-  get: () => style.value.borderWidth ?? BORDER_WIDTH_DEFAULT,
-  set: (value: number) => setStyle({ borderWidth: value })
-})
-
-// Outline solid/soft surfaces too — the neobrutalist frame look.
-const frameSolids = computed({
-  get: () => !!style.value.frame || style.value.border === 'frame',
-  // Migrate the legacy border: 'frame' encoding on write — otherwise the
-  // getter keeps reading true and the switch can never turn off.
-  set: (value: boolean) => setStyle({
-    frame: value,
-    border: style.value.border === 'frame' ? 'custom' : style.value.border
-  })
-})
-
-const borderColorItems = [
-  { label: 'Default', value: 'default' },
-  { label: 'Inverted', value: 'inverted' },
-  { label: 'Black', value: 'black' },
-  { label: 'White', value: 'white' },
-  { label: 'Primary', value: 'primary' },
-  { label: 'Neutral', value: 'neutral' },
-  { label: 'Neutral shade', value: 'shade' },
-  { label: 'Primary shade', value: 'primary-shade' }
-]
-
-const shadowColorItems = [
-  { label: 'Default', value: 'default' },
-  { label: 'Black', value: 'black' },
-  { label: 'Inverted', value: 'inverted' },
-  { label: 'Primary', value: 'primary' },
-  { label: 'Neutral shade', value: 'shade' },
-  { label: 'Primary shade', value: 'primary-shade' }
-]
-
-// Slider position ↔ SHADES index, per mode. shadow/border shades write both
-// modes on first touch (explicit 'shade' mode choice); token shades write
-// ONLY the touched mode so an untouched mode never becomes an override.
-// Dirty/reset measure against the BASELINE preset's choice: reset restores
-// it, or deletes the entry when the preset made none.
-function shadeControl(field: 'shadowShade' | 'innerShadowShade' | 'borderShade', defaults: { light: number, dark: number }, target: 'light' | 'dark') {
-  const model = computed({
-    // Per-key fallback: an imported doc can carry a single-mode shade
-    // object ({ light: 400 }) — indexOf(undefined) would park the slider
-    // at -1 and the chip at var(--color-…-undefined).
-    get: () => SHADES.indexOf((style.value[field]?.[target] ?? defaults[target]) as typeof SHADES[number]),
-    set: (index: number) => {
-      const current = { ...defaults, ...style.value[field] }
-      setStyle({ [field]: { ...current, [target]: SHADES[index]! } })
-    }
-  })
-  const baseline = computed(() => baselineDoc.value.style?.[field]?.[target])
-  const dirty = computed(() => style.value[field]?.[target] !== baseline.value)
-  function reset() {
-    const entry: { light?: number, dark?: number } = { ...style.value[field] }
-    if (baseline.value !== undefined) entry[target] = baseline.value
-    else Reflect.deleteProperty(entry, target)
-    setStyle({ [field]: Object.keys(entry).length ? entry : undefined })
-  }
-  return { model, dirty, reset }
-}
-
-const shadowShades = {
-  light: shadeControl('shadowShade', SHADOW_SHADE_DEFAULTS, 'light'),
-  dark: shadeControl('shadowShade', SHADOW_SHADE_DEFAULTS, 'dark')
-}
-
-const innerShadowShades = {
-  light: shadeControl('innerShadowShade', SHADOW_SHADE_DEFAULTS, 'light'),
-  dark: shadeControl('innerShadowShade', SHADOW_SHADE_DEFAULTS, 'dark')
-}
-
-const borderShades = {
-  light: shadeControl('borderShade', BORDER_SHADE_DEFAULTS, 'light'),
-  dark: shadeControl('borderShade', BORDER_SHADE_DEFAULTS, 'dark')
-}
-
-// MD is the stock default — one deduped entry storing 'default'
-const defaultSizeItems = [
-  { label: 'XS', value: 'xs', defaultTag: false },
-  { label: 'SM', value: 'sm', defaultTag: false },
-  { label: 'MD', value: 'default', defaultTag: true },
-  { label: 'LG', value: 'lg', defaultTag: false },
-  { label: 'XL', value: 'xl', defaultTag: false }
-]
-
-// Per-group default variants, each offering only what its components
-// actually support (buttons add ghost, form fields run outline → none);
-// the app-wide `variant` (presets, shuffle) shows through as the fallback
-// until a group makes its own choice.
-const variantItems = (values: string[]) => values.map(value => ({ label: value.charAt(0).toUpperCase() + value.slice(1), value }))
-
-/** Variant names UButton can render itself — the rest (none) fall back. */
-const RENDERABLE_VARIANTS = ['solid', 'outline', 'soft', 'subtle', 'ghost', 'link']
-
-/** Variant grid popovers close on pick — one open flag per group. */
-const variantGridOpen = reactive<Record<string, boolean>>({ buttons: false, panels: false, inputs: false })
-
-// `stock` is the library's own default variant — its cell wears the
-// "(Default)" tag and picking it clears the override instead of pinning.
-const variantGroupFields = [
-  { key: 'buttons' as const, label: 'Button Defaults', hasColor: true, stock: 'solid', items: variantItems(['solid', 'outline', 'soft', 'subtle', 'ghost', 'link']) },
-  { key: 'panels' as const, label: 'Card Defaults', hasColor: false, stock: 'outline', items: variantItems(['solid', 'outline', 'soft', 'subtle']) },
-  { key: 'inputs' as const, label: 'Input Defaults', hasColor: true, stock: 'outline', items: variantItems(['outline', 'soft', 'subtle', 'ghost', 'none']) }
-]
-
-function groupVariantModel(group: VariantGroup) {
-  const supported = variantGroupFields.find(field => field.key === group)!.items.map(item => item.value)
-  return computed({
-    get: () => {
-      const own = style.value.defaults?.variants?.[group]
-      if (own && own !== 'default') return own
-      // An app-wide value this group can't express (e.g. solid inputs)
-      // truthfully reads as Default — the engine skips it there too.
-      const appWide = style.value.defaults?.variant
-      return appWide && supported.includes(appWide) ? appWide : 'default'
-    },
-    set: (value: any) => {
-      const defaults = style.value.defaults || {}
-
-      // Picking Default under an app-wide variant must actually win: the
-      // engine skips 'default' entries, so the app-wide value explodes
-      // into the OTHER groups (where they support it) and disappears.
-      if (value === 'default' && defaults.variant) {
-        const variants: Record<string, any> = {}
-        for (const field of variantGroupFields) {
-          if (field.key === group) continue
-          const existing = defaults.variants?.[field.key]
-          if (existing && existing !== 'default') {
-            variants[field.key] = existing
-          } else if (field.items.some(item => item.value === defaults.variant)) {
-            variants[field.key] = defaults.variant
-          }
-        }
-        const next = { ...defaults, variants }
-        delete next.variant
-        setStyle({ defaults: next })
-        return
-      }
-
-      setStyle({ defaults: { ...defaults, variants: { ...defaults.variants, [group]: value } } })
-    }
-  })
-}
-
-const groupVariants = Object.fromEntries(variantGroupFields.map(field => [field.key, groupVariantModel(field.key)])) as Record<VariantGroup, ReturnType<typeof groupVariantModel>>
-
-// Primary IS the stock default — one entry, tagged, storing 'default'
-// (an explicit 'primary' would export a no-op override).
-const defaultColorItems = [
-  { label: 'Primary', value: 'default', chip: { color: 'primary' as any }, defaultTag: true },
-  ...['secondary', 'success', 'info', 'warning', 'error', 'neutral'].map(value => ({
-    label: value.charAt(0).toUpperCase() + value.slice(1),
-    value,
-    chip: { color: value as any },
-    defaultTag: false
-  }))
-]
-
-function groupColorModel(group: VariantGroup) {
-  return computed({
-    get: () => style.value.defaults?.colors?.[group] || 'default',
-    set: (value: any) => setStyle({ defaults: { ...style.value.defaults, colors: { ...style.value.defaults?.colors, [group]: value } } })
-  })
-}
-
-const groupColors = Object.fromEntries(variantGroupFields.map(field => [field.key, groupColorModel(field.key)])) as Record<VariantGroup, ReturnType<typeof groupColorModel>>
-
-const defaultSize = computed({
-  // legacy saved prefs may still pin 'md' explicitly — it IS the default
-  get: () => {
-    const size = style.value.defaults?.size || 'default'
-    return size === 'md' ? 'default' : size
-  },
-  set: (value: any) => setStyle({ defaults: { ...style.value.defaults, size: value } })
-})
-
-// Hard-shadow geometry sliders (px)
-const geometryFields = [
-  { key: 'x', label: 'Offset X', min: -12, max: 12 },
-  { key: 'y', label: 'Offset Y', min: -12, max: 12 },
-  { key: 'blur', label: 'Blur', min: 0, max: 24 },
-  { key: 'spread', label: 'Spread', min: 0, max: 8 }
-] as const
-
-function geometrySliders(field: 'shadowGeometry' | 'innerShadowGeometry', defaults: typeof SHADOW_GEOMETRY_DEFAULTS) {
-  const slider = (key: 'x' | 'y' | 'blur' | 'spread') => computed({
-    get: () => ({ ...defaults, ...style.value[field] })[key],
-    set: (value: number) => setStyle({ [field]: { ...defaults, ...style.value[field], [key]: value } })
-  })
-  return Object.fromEntries(geometryFields.map(({ key }) => [key, slider(key)])) as Record<'x' | 'y' | 'blur' | 'spread', ReturnType<typeof slider>>
+const groups = {
+  colors: ThemeStudioControlsColors,
+  general: ThemeStudioControlsGeneral,
+  style: ThemeStudioControlsStyle
 }
-
-const borderColor = computed({
-  get: () => style.value.borderColor || 'default',
-  set: (value: any) => setStyle({ borderColor: value })
-})
-
-const shadowColor = computed({
-  get: () => style.value.shadowColor || 'default',
-  set: (value: any) => setStyle({ shadowColor: value })
-})
-
-// The two shadow sections are the same panel pointed at different style
-// fields — one config each, one template.
-const shadowSections = [{
-  label: 'Shadow',
-  dirtyKey: 'shadow' as const,
-  model: shadowStyle,
-  options: SHADOW_STYLE_OPTIONS,
-  color: shadowColor,
-  shades: shadowShades,
-  opacity: shadowOpacity,
-  geometry: geometrySliders('shadowGeometry', SHADOW_GEOMETRY_DEFAULTS),
-  hard: computed(() => (style.value.shadow || 'none') === 'hard')
-}, {
-  label: 'Inner shadow',
-  dirtyKey: 'innerShadow' as const,
-  model: innerShadowStyle,
-  options: INNER_SHADOW_OPTIONS,
-  color: innerShadowColor,
-  shades: innerShadowShades,
-  opacity: innerShadowOpacity,
-  geometry: geometrySliders('innerShadowGeometry', INNER_SHADOW_GEOMETRY_DEFAULTS),
-  hard: computed(() => style.value.innerShadow === 'hard')
-}]
 </script>
 
 <template>
-  <div>
-    <template v-if="group === 'colors'">
-      <!-- Sections own their padding so the separators run edge to edge. -->
-      <div class="flex flex-col">
-        <ThemeStudioColorSection
-          alias="primary"
-          help-to="/docs/getting-started/theme/css-variables#colors"
-          class="p-4"
-          resettable
-          :dirty="dirty.primary!.value"
-          @reset="resetSection('primary')"
-        />
-
-        <USeparator />
-
-        <ThemeStudioColorSection
-          alias="neutral"
-          help-to="/docs/getting-started/theme/css-variables#text"
-          class="p-4"
-          resettable
-          :dirty="dirty.neutral!.value"
-          @reset="resetSection('neutral')"
-        />
-
-        <USeparator />
-
-        <ThemeStudioSection
-          label="Semantic"
-          help-to="/docs/getting-started/theme/design-system"
-          :default-open="false"
-          class="p-4"
-          resettable
-          :dirty="dirty.semantic!.value"
-          @reset="resetSection('semantic')"
-        >
-          <div class="flex flex-col gap-3 pt-1">
-            <ThemeStudioColorSection v-for="alias in semanticAliases" :key="alias" :alias="alias" />
-          </div>
-        </ThemeStudioSection>
-      </div>
-    </template>
-
-    <template v-else-if="group === 'style'">
-      <div class="flex flex-col">
-        <template v-for="section in shadowSections" :key="section.label">
-          <ThemeStudioSection :label="section.label" class="p-4" resettable :dirty="dirty[section.dirtyKey]!.value" @reset="resetSection(section.dirtyKey)">
-            <div>
-              <UTabs
-                v-model="section.model.value"
-                :items="section.options"
-                :content="false"
-                size="xs"
-                color="primary"
-                class="w-full"
-              />
-
-              <div v-if="section.model.value === 'custom'" class="mt-1.5 flex flex-col gap-2">
-                <USelect
-                  v-model="section.color.value"
-                  size="sm"
-                  color="neutral"
-                  variant="subtle"
-                  icon="i-lucide-paint-bucket"
-                  :items="shadowColorItems"
-                  class="w-full"
-                />
-
-                <template v-if="section.color.value === 'shade' || section.color.value === 'primary-shade'">
-                  <ThemeStudioSliderRow
-                    v-for="(slider, modeName) in section.shades"
-                    :key="modeName"
-                    v-model="slider.model.value"
-                    :mode="modeName"
-                    :chip="section.color.value === 'primary-shade' ? primaryChip : neutralChip"
-                    resettable
-                    :dirty="slider.dirty.value"
-                    @reset="slider.reset()"
-                  />
-                </template>
-
-                <ThemeStudioSliderRow
-                  v-model="section.opacity.value"
-                  label="Opacity"
-                  :min="5"
-                  :max="100"
-                  :step="5"
-                  unit="%"
-                />
-
-                <template v-if="section.hard.value">
-                  <ThemeStudioSliderRow
-                    v-for="field in geometryFields"
-                    :key="field.key"
-                    v-model="section.geometry[field.key].value"
-                    :label="field.label"
-                    :min="field.min"
-                    :max="field.max"
-                    :step="1"
-                    unit="px"
-                  />
-                </template>
-              </div>
-            </div>
-          </ThemeStudioSection>
-
-          <USeparator />
-        </template>
-
-        <ThemeStudioSection label="Borders" class="p-4" resettable :dirty="dirty.borders!.value" @reset="resetSection('borders')">
-          <div>
-            <UTabs
-              v-model="borderStyle"
-              :items="borderOptions"
-              :content="false"
-              size="xs"
-              color="primary"
-              class="w-full"
-            />
-
-            <div v-if="borderStyle === 'custom'" class="mt-1.5 flex flex-col gap-2">
-              <ThemeStudioSliderRow
-                v-model="borderWidth"
-                label="Width"
-                :min="1"
-                :max="4"
-                :step="1"
-                unit="px"
-              />
-
-              <div class="flex items-center gap-2">
-                <span class="text-xs text-muted w-13 shrink-0 select-none">Frame</span>
-
-                <UTooltip text="Outline solid surfaces too — the neobrutalist look">
-                  <USwitch v-model="frameSolids" size="sm" aria-label="Frame solid surfaces" />
-                </UTooltip>
-              </div>
-
-              <USelect
-                v-model="borderColor"
-                size="sm"
-                color="neutral"
-                variant="subtle"
-                icon="i-lucide-paint-bucket"
-                :items="borderColorItems"
-                class="w-full"
-              />
-
-              <template v-if="borderColor === 'shade' || borderColor === 'primary-shade'">
-                <ThemeStudioSliderRow
-                  v-for="(slider, modeName) in borderShades"
-                  :key="modeName"
-                  v-model="slider.model.value"
-                  :mode="modeName"
-                  :chip="borderColor === 'primary-shade' ? primaryChip : neutralChip"
-                  resettable
-                  :dirty="slider.dirty.value"
-                  @reset="slider.reset()"
-                />
-              </template>
-            </div>
-          </div>
-        </ThemeStudioSection>
-      </div>
-    </template>
-
-    <template v-else-if="group === 'general'">
-      <div class="flex flex-col">
-        <ThemeStudioSection
-          label="Font"
-          help-to="/docs/getting-started/integrations/fonts"
-          class="p-4"
-          resettable
-          :dirty="dirty.font!.value"
-          @reset="resetSection('font')"
-        >
-          <div class="flex flex-col gap-2">
-            <!-- live specimen: the heading treatment over the base body -->
-            <div class="rounded-md ring ring-default bg-elevated/50 px-3 py-2 select-none">
-              <p class="text-sm text-highlighted truncate" :style="headingSampleStyle">
-                Grumpy wizards make toxic brew
-              </p>
-              <p class="text-xs text-muted truncate" :style="bodySampleStyle">
-                The quick brown fox jumps over the lazy dog 0123456789
-              </p>
-            </div>
-
-            <template v-for="row in fontRows" :key="row.key">
-              <span class="text-xs font-medium text-muted select-none" :class="row.key === 'heading' && 'pt-1'">{{ row.label }}</span>
-
-              <div class="flex items-center gap-1.5">
-                <UPopover v-model:open="fontListOpen[row.key]" :content="{ align: 'start' }" class="flex-1 min-w-0">
-                  <UButton
-                    color="neutral"
-                    variant="subtle"
-                    size="sm"
-                    block
-                    :icon="row.selectIcon"
-                    trailing-icon="i-lucide-chevron-down"
-                    :ui="{ label: 'flex-1 text-left truncate' }"
-                    :aria-label="`${row.label} font`"
-                  >
-                    <span
-                      class="truncate"
-                      :style="row.font.value === 'inherit' ? undefined : { fontFamily: `'${row.font.value}', sans-serif` }"
-                    >{{ row.items.value.find(item => item.value === row.font.value)?.label ?? row.font.value }}<span v-if="row.font.value === row.defaultValue" class="text-dimmed font-normal">&nbsp;(Default)</span></span>
-                  </UButton>
-
-                  <template #content>
-                    <!-- each family renders itself over a live specimen line -->
-                    <UListbox
-                      v-model="row.font.value"
-                      :items="row.items.value"
-                      value-key="value"
-                      class="w-72"
-                      :ui="{ root: 'ring-0 rounded-md', content: 'max-h-80' }"
-                      @update:model-value="fontListOpen[row.key] = false"
-                    >
-                      <template #item-label="{ item }">
-                        <span :style="item.value === 'inherit' ? undefined : { fontFamily: `'${item.value}', sans-serif` }">{{ item.label }}</span><span v-if="item.value === row.defaultValue" class="text-dimmed">&nbsp;(Default)</span>
-                      </template>
-
-                      <template #item-description="{ item }">
-                        <span
-                          v-if="item.value !== 'inherit'"
-                          class="text-xs text-muted truncate"
-                          :style="{ fontFamily: `'${item.value}', sans-serif` }"
-                        >Grumpy wizards make toxic brew</span>
-                      </template>
-                    </UListbox>
-                  </template>
-                </UPopover>
-
-                <UFieldGroup size="sm">
-                  <UPopover :content="{ align: 'start' }">
-                    <UTooltip :text="row.weights.length > 1 ? 'Weights' : 'Weight'">
-                      <UButton
-                        icon="i-lucide-bold"
-                        color="neutral"
-                        variant="subtle"
-                        :active="row.weightsActive.value"
-                        active-color="primary"
-                        active-variant="subtle"
-                        :aria-label="row.aria.weights"
-                      />
-                    </UTooltip>
-
-                    <template #content>
-                      <div class="w-64 p-3 flex flex-col gap-1.5">
-                        <ThemeStudioSliderRow
-                          v-for="weight in row.weights"
-                          :key="weight.label"
-                          v-model="weight.model.value"
-                          :label="weight.label"
-                          :min="weight.min"
-                          :max="weight.max"
-                          :step="25"
-                        />
-                      </div>
-                    </template>
-                  </UPopover>
-
-                  <UTooltip text="Uppercase">
-                    <UButton
-                      icon="i-lucide-case-upper"
-                      color="neutral"
-                      variant="subtle"
-                      :active="row.uppercase.value"
-                      active-color="primary"
-                      active-variant="subtle"
-                      :aria-label="row.aria.uppercase"
-                      @click="row.uppercase.value = !row.uppercase.value"
-                    />
-                  </UTooltip>
-
-                  <UPopover :content="{ align: 'start' }">
-                    <UTooltip text="Letter spacing">
-                      <UButton
-                        icon="i-lucide-move-horizontal"
-                        color="neutral"
-                        variant="subtle"
-                        :active="row.letterSpacing.value !== 0"
-                        active-color="primary"
-                        active-variant="subtle"
-                        :aria-label="row.aria.spacing"
-                      />
-                    </UTooltip>
-
-                    <template #content>
-                      <ThemeStudioSliderRow
-                        v-model="row.letterSpacing.value"
-                        label="Spacing"
-                        :min="-0.05"
-                        :max="0.25"
-                        :step="0.005"
-                        unit="em"
-                        class="w-64 p-3"
-                      />
-                    </template>
-                  </UPopover>
-
-                  <UPopover :content="{ align: 'start' }">
-                    <UTooltip text="Line height">
-                      <UButton
-                        icon="i-lucide-move-vertical"
-                        color="neutral"
-                        variant="subtle"
-                        :active="row.lineHeight.value !== row.lineHeightDefault"
-                        active-color="primary"
-                        active-variant="subtle"
-                        :aria-label="row.aria.height"
-                      />
-                    </UTooltip>
-
-                    <template #content>
-                      <ThemeStudioSliderRow
-                        v-model="row.lineHeight.value"
-                        label="Height"
-                        :min="1"
-                        :max="2"
-                        :step="0.05"
-                        class="w-64 p-3"
-                      />
-                    </template>
-                  </UPopover>
-                </UFieldGroup>
-              </div>
-            </template>
-          </div>
-        </ThemeStudioSection>
-
-        <USeparator />
-
-        <ThemeStudioSection
-          label="Icons"
-          help-to="/docs/getting-started/integrations/icons"
-          class="p-4"
-          resettable
-          :dirty="dirty.icons!.value"
-          @reset="resetSection('icons')"
-        >
-          <div class="flex flex-col gap-2">
-            <!-- a spread of the selected set -->
-            <div class="rounded-md ring ring-default bg-elevated/50 px-3 py-2 flex flex-wrap justify-center gap-2.5">
-              <UIcon v-for="name in iconPreviews" :key="name" :name="name" class="size-4 text-muted" />
-            </div>
-
-            <UPopover v-model:open="iconListOpen" :content="{ align: 'start' }">
-              <UButton
-                color="neutral"
-                variant="subtle"
-                size="sm"
-                block
-                :icon="icons.find(i => i.value === icon)?.icon"
-                trailing-icon="i-lucide-chevron-down"
-                :label="icons.find(i => i.value === icon)?.label"
-                :ui="{ label: 'flex-1 text-left' }"
-                aria-label="Icon set"
-              />
-
-              <template #content>
-                <!-- every set previews a strip of its own glyphs -->
-                <UListbox
-                  v-model="icon"
-                  :items="icons"
-                  value-key="value"
-                  class="w-72"
-                  :ui="{ root: 'ring-0 rounded-md', content: 'max-h-80' }"
-                  @update:model-value="iconListOpen = false"
-                >
-                  <template #item-description="{ item }">
-                    <span class="flex items-center gap-1.5 pt-0.5">
-                      <UIcon
-                        v-for="name in iconSetSamples(item.value)"
-                        :key="name"
-                        :name="name"
-                        class="size-3.5 text-muted"
-                      />
-                    </span>
-                  </template>
-                </UListbox>
-              </template>
-            </UPopover>
-          </div>
-        </ThemeStudioSection>
-
-        <USeparator />
-
-        <ThemeStudioSection label="Scale" class="p-4" resettable :dirty="dirty.scale!.value" @reset="resetSection('scale')">
-          <div class="flex flex-col gap-2">
-            <ThemeStudioSliderRow
-              v-model="radius"
-              label="Radius"
-              :min="0"
-              :max="0.5"
-              :step="0.125"
-            />
-
-            <ThemeStudioSliderRow
-              v-model="fontSize"
-              label="Text"
-              :min="14"
-              :max="18"
-              :step="0.5"
-              unit="px"
-            />
-
-            <ThemeStudioSliderRow v-model="spacing" label="Spacing" :min="0.15" :max="0.35" :step="0.025" />
-
-            <div class="flex items-center gap-2">
-              <span class="text-xs text-muted w-13 shrink-0 select-none">Size</span>
-
-              <USelect
-                v-model="defaultSize"
-                size="sm"
-                color="neutral"
-                variant="subtle"
-                icon="i-lucide-proportions"
-                :items="defaultSizeItems"
-                class="flex-1"
-              >
-                <template #default>
-                  {{ defaultSizeItems.find(item => item.value === defaultSize)?.label }}<span v-if="defaultSize === 'default'" class="text-dimmed">&nbsp;(Default)</span>
-                </template>
-
-                <template #item-label="{ item }">
-                  {{ item.label }}<span v-if="item.defaultTag" class="text-dimmed">&nbsp;(Default)</span>
-                </template>
-              </USelect>
-            </div>
-          </div>
-        </ThemeStudioSection>
-
-        <USeparator />
-
-        <template v-for="field in variantGroupFields" :key="field.key">
-          <ThemeStudioSection
-            :label="field.label"
-            :default-open="false"
-            class="p-4"
-            resettable
-            :dirty="dirty[field.key]!.value"
-            @reset="resetSection(field.key)"
-          >
-            <div class="flex flex-col gap-1.5">
-              <div class="flex items-center gap-2">
-                <span class="text-xs text-muted w-13 shrink-0 select-none">Variant</span>
-
-                <UPopover v-model:open="variantGridOpen[field.key]" :content="{ side: 'bottom', align: 'start' }" class="flex-1">
-                  <UButton
-                    size="sm"
-                    color="neutral"
-                    variant="subtle"
-                    block
-                    icon="i-lucide-layers"
-                    trailing-icon="i-lucide-chevron-down"
-                    :ui="{ label: 'flex-1 text-left' }"
-                    :aria-label="`${field.label} variant`"
-                  >
-                    {{ field.items.find(item => item.value === (groupVariants[field.key].value === 'default' ? field.stock : groupVariants[field.key].value))?.label }}<span v-if="groupVariants[field.key].value === 'default'" class="text-dimmed font-normal">&nbsp;(Default)</span>
-                  </UButton>
-
-                  <template #content>
-                    <!-- each cell renders IN the variant it picks -->
-                    <div class="w-64 p-2 grid grid-cols-2 gap-1">
-                      <UButton
-                        v-for="item in field.items"
-                        :key="item.value"
-                        size="sm"
-                        block
-                        :color="(groupVariants[field.key].value === item.value || (groupVariants[field.key].value === 'default' && item.value === field.stock)) ? 'primary' : 'neutral'"
-                        :variant="RENDERABLE_VARIANTS.includes(item.value) ? (item.value as any) : 'subtle'"
-                        :class="[item.value === 'none' && 'opacity-60', 'min-w-0']"
-                        @click="groupVariants[field.key].value = (item.value === field.stock ? 'default' : item.value); variantGridOpen[field.key] = false"
-                      >
-                        <!-- opacity, not a color: text-dimmed would fight the variant's own text color -->
-                        <span class="truncate">{{ item.label }}<span v-if="item.value === field.stock" class="opacity-70 font-normal">&nbsp;(Default)</span></span>
-                      </UButton>
-                    </div>
-                  </template>
-                </UPopover>
-              </div>
-
-              <div v-if="field.hasColor" class="flex items-center gap-2">
-                <span class="text-xs text-muted w-13 shrink-0 select-none">Color</span>
-
-                <USelect
-                  v-model="groupColors[field.key].value"
-                  size="sm"
-                  color="neutral"
-                  variant="subtle"
-                  :items="defaultColorItems"
-                  class="flex-1"
-                >
-                  <template #leading>
-                    <UChip
-                      :color="(groupColors[field.key].value === 'default' ? 'primary' : groupColors[field.key].value) as any"
-                      inset
-                      standalone
-                    />
-                  </template>
-
-                  <template #default>
-                    {{ defaultColorItems.find(item => item.value === groupColors[field.key].value)?.label }}<span v-if="groupColors[field.key].value === 'default'" class="text-dimmed">&nbsp;(Default)</span>
-                  </template>
-
-                  <template #item-label="{ item }">
-                    {{ item.label }}<span v-if="item.defaultTag" class="text-dimmed">&nbsp;(Default)</span>
-                  </template>
-                </USelect>
-              </div>
-            </div>
-          </ThemeStudioSection>
-
-          <USeparator v-if="field.key !== 'inputs'" />
-        </template>
-      </div>
-    </template>
-  </div>
+  <component :is="groups[group]" />
 </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioControlsColors.vue b/docs/app/components/theme-studio/ThemeStudioControlsColors.vue
new file mode 100644
index 0000000000..d879621d5c
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioControlsColors.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { ColorAlias } from '../../utils/theme-engine'
+
+const semanticAliases: ColorAlias[] = ['secondary', 'success', 'info', 'warning', 'error']
+</script>
+
+<template>
+  <!-- Sections own their padding so the separators run edge to edge. -->
+  <div class="flex flex-col">
+    <ThemeStudioColorSection
+      alias="primary"
+      help-to="/docs/getting-started/theme/css-variables#colors"
+      class="p-4"
+      section-key="primary"
+    />
+
+    <USeparator />
+
+    <ThemeStudioColorSection
+      alias="neutral"
+      help-to="/docs/getting-started/theme/css-variables#text"
+      class="p-4"
+      section-key="neutral"
+    />
+
+    <USeparator />
+
+    <ThemeStudioSection
+      label="Semantic"
+      help-to="/docs/getting-started/theme/design-system"
+      :default-open="false"
+      class="p-4"
+      section-key="semantic"
+    >
+      <div class="flex flex-col gap-3 pt-1">
+        <ThemeStudioColorSection v-for="alias in semanticAliases" :key="alias" :alias="alias" />
+      </div>
+    </ThemeStudioSection>
+  </div>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioControlsGeneral.vue b/docs/app/components/theme-studio/ThemeStudioControlsGeneral.vue
new file mode 100644
index 0000000000..64b4760905
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioControlsGeneral.vue
@@ -0,0 +1,548 @@
+<script setup lang="ts">
+import { themeIcons, FONT_WEIGHT_DEFAULTS } from '../../utils/theme'
+import type { VariantGroup } from '../../utils/theme-engine'
+
+const {
+  radius,
+  fontSize,
+  spacing,
+  fonts,
+  font,
+  fontPrefs,
+  setFontPrefs,
+  icon,
+  icons
+} = useTheme()
+
+const { style, setStyle } = useThemeStudio()
+
+/* ------------------------------------------------------------ typography -- */
+
+onMounted(() => loadFontPreviews(fonts))
+
+// One writable model per tailwind weight step — the knobs components
+// actually dereference at runtime.
+function weightStepModel(step: keyof typeof FONT_WEIGHT_DEFAULTS) {
+  return computed({
+    get: () => fontPrefs.value.weights?.[step] ?? FONT_WEIGHT_DEFAULTS[step],
+    set: (value: number) => setFontPrefs({ ...fontPrefs.value, weights: { ...fontPrefs.value.weights, [step]: value } })
+  })
+}
+
+const WEIGHT_STEPS = ['normal', 'medium', 'semibold', 'bold'] as const
+const weightSteps = Object.fromEntries(WEIGHT_STEPS.map(step => [step, weightStepModel(step)])) as Record<typeof WEIGHT_STEPS[number], ReturnType<typeof weightStepModel>>
+const weightsActive = computed(() => !!fontPrefs.value.weights)
+
+const INHERIT_FONT = { label: 'Inherit base', value: 'inherit' }
+const headingFontItems = computed(() => [INHERIT_FONT, ...fonts.map(name => ({ label: name, value: name }))])
+
+function setHeading(patch: Record<string, unknown>) {
+  setFontPrefs({ ...fontPrefs.value, heading: { ...fontPrefs.value.heading, ...patch } })
+}
+
+const headingFont = computed({
+  get: () => fontPrefs.value.heading?.font ?? 'inherit',
+  set: (value: string) => setHeading({ font: value === 'inherit' ? undefined : value })
+})
+
+const headingWeight = computed({
+  get: () => fontPrefs.value.heading?.weight ?? 700,
+  set: (value: number) => setHeading({ weight: value })
+})
+
+const headingUppercase = computed({
+  get: () => !!fontPrefs.value.heading?.uppercase,
+  set: (value: boolean) => setHeading({ uppercase: value })
+})
+
+const baseUppercase = computed({
+  get: () => !!fontPrefs.value.uppercase,
+  set: (value: boolean) => setFontPrefs({ ...fontPrefs.value, uppercase: value })
+})
+
+const baseLetterSpacing = computed({
+  get: () => fontPrefs.value.letterSpacing ?? 0,
+  set: (value: number) => setFontPrefs({ ...fontPrefs.value, letterSpacing: value })
+})
+
+const baseLineHeight = computed({
+  get: () => fontPrefs.value.lineHeight ?? 1.5,
+  set: (value: number) => setFontPrefs({ ...fontPrefs.value, lineHeight: value })
+})
+
+const headingLetterSpacing = computed({
+  get: () => fontPrefs.value.heading?.letterSpacing ?? 0,
+  set: (value: number) => setHeading({ letterSpacing: value })
+})
+
+// Headings natively lead at ~1.25 (the specimen agrees) — 1.5 here would
+// show a value the page isn't actually rendering.
+const headingLineHeight = computed({
+  get: () => fontPrefs.value.heading?.lineHeight ?? 1.25,
+  set: (value: number) => setHeading({ lineHeight: value })
+})
+
+// The Base and Headings rows are the same toolbar over different models —
+// one config each, one template. Base tunes the four tailwind weight steps;
+// headings have a single weight.
+const fontRows = [{
+  key: 'base',
+  label: 'Base',
+  defaultValue: 'Public Sans',
+  selectIcon: 'i-lucide-type',
+  items: computed(() => fonts.map(name => ({ label: name, value: name }))),
+  font,
+  weights: WEIGHT_STEPS.map(step => ({ label: capitalize(step), model: weightSteps[step]!, min: 100, max: 900 })),
+  weightsActive,
+  uppercase: baseUppercase,
+  letterSpacing: baseLetterSpacing,
+  lineHeight: baseLineHeight,
+  lineHeightDefault: 1.5,
+  aria: { weights: 'Font weights', uppercase: 'Uppercase text', spacing: 'Letter spacing', height: 'Line height' }
+}, {
+  key: 'heading',
+  label: 'Headings (Prose)',
+  defaultValue: 'inherit',
+  selectIcon: 'i-lucide-heading',
+  items: headingFontItems,
+  font: headingFont,
+  weights: [{ label: 'Weight', model: headingWeight, min: 100, max: 900 }],
+  weightsActive: computed(() => fontPrefs.value.heading?.weight !== undefined),
+  uppercase: headingUppercase,
+  letterSpacing: headingLetterSpacing,
+  lineHeight: headingLineHeight,
+  lineHeightDefault: 1.25,
+  aria: { weights: 'Heading weight', uppercase: 'Uppercase headings', spacing: 'Heading letter spacing', height: 'Heading line height' }
+}]
+
+/** Live specimen: a heading line in the heading treatment over a body line. */
+const headingSampleStyle = computed(() => ({
+  fontFamily: `'${fontPrefs.value.heading?.font ?? font.value}', sans-serif`,
+  fontWeight: fontPrefs.value.heading?.weight ?? 700,
+  textTransform: (fontPrefs.value.heading?.uppercase || fontPrefs.value.uppercase) ? 'uppercase' as const : undefined,
+  fontStyle: (fontPrefs.value.heading?.italic || fontPrefs.value.italic) ? 'italic' as const : undefined,
+  textDecoration: fontPrefs.value.heading?.underline ? 'underline' as const : undefined,
+  letterSpacing: `${fontPrefs.value.heading?.letterSpacing ?? fontPrefs.value.letterSpacing ?? 0}em`,
+  lineHeight: fontPrefs.value.heading?.lineHeight ?? 1.25
+}))
+const bodySampleStyle = computed(() => ({
+  fontFamily: `'${font.value}', sans-serif`,
+  fontWeight: fontPrefs.value.weights?.normal ?? 400,
+  textTransform: fontPrefs.value.uppercase ? 'uppercase' as const : undefined,
+  fontStyle: fontPrefs.value.italic ? 'italic' as const : undefined,
+  letterSpacing: `${fontPrefs.value.letterSpacing ?? 0}em`,
+  lineHeight: fontPrefs.value.lineHeight ?? 1.5
+}))
+
+/* ---------------------------------------------------------------- icons -- */
+
+/** A representative spread from the selected set for the preview grid. */
+const SAMPLE_ICON_KEYS = ['search', 'check', 'close', 'warning', 'error', 'info', 'tip', 'light', 'dark', 'external', 'plus', 'minus', 'loading', 'copy', 'file', 'folder', 'eye', 'star', 'upload', 'menu', 'ellipsis', 'reload', 'arrowRight', 'chevronDown']
+const iconPreviews = computed(() => {
+  const set = (themeIcons as Record<string, Record<string, string>>)[icon.value] || {}
+  return SAMPLE_ICON_KEYS.map(key => set[key]).filter((name): name is string => !!name).slice(0, 20)
+})
+
+/** A short strip of a set's own glyphs for its listbox row. */
+function iconSetSamples(setName: string): string[] {
+  const set = (themeIcons as Record<string, Record<string, string>>)[setName] || {}
+  return ['search', 'check', 'warning', 'light', 'dark', 'star', 'folder', 'upload'].map(key => set[key]).filter((name): name is string => !!name)
+}
+
+/* ------------------------------------------------------------- defaults -- */
+
+// MD is the stock default — one deduped entry storing 'default'
+const defaultSizeItems = [
+  { label: 'XS', value: 'xs' },
+  { label: 'SM', value: 'sm' },
+  { label: 'MD', value: 'default', defaultTag: true },
+  { label: 'LG', value: 'lg' },
+  { label: 'XL', value: 'xl' }
+]
+
+// Per-group default variants, each offering only what its components
+// actually support (buttons add ghost, form fields run outline → none);
+// the app-wide `variant` (presets, shuffle) shows through as the fallback
+// until a group makes its own choice.
+const variantItems = (values: string[]) => values.map(value => ({ label: capitalize(value), value }))
+
+/** Variant names UButton can render itself — the rest (none) fall back. */
+const RENDERABLE_VARIANTS = ['solid', 'outline', 'soft', 'subtle', 'ghost', 'link']
+
+/** Variant grid popovers close on pick — one open flag per group. */
+const variantGridOpen = reactive<Record<string, boolean>>({ buttons: false, panels: false, inputs: false })
+
+// `stock` is the library's own default variant — its cell wears the
+// "(Default)" tag and picking it clears the override instead of pinning.
+const variantGroupFields = [
+  { key: 'buttons' as const, label: 'Button Defaults', hasColor: true, stock: 'solid', items: variantItems(['solid', 'outline', 'soft', 'subtle', 'ghost', 'link']) },
+  { key: 'panels' as const, label: 'Card Defaults', hasColor: false, stock: 'outline', items: variantItems(['solid', 'outline', 'soft', 'subtle']) },
+  { key: 'inputs' as const, label: 'Input Defaults', hasColor: true, stock: 'outline', items: variantItems(['outline', 'soft', 'subtle', 'ghost', 'none']) }
+]
+
+function groupVariantModel(group: VariantGroup) {
+  const supported = variantGroupFields.find(field => field.key === group)!.items.map(item => item.value)
+  return computed({
+    get: () => {
+      const own = style.value.defaults?.variants?.[group]
+      if (own && own !== 'default') return own
+      // An app-wide value this group can't express (e.g. solid inputs)
+      // truthfully reads as Default — the engine skips it there too.
+      const appWide = style.value.defaults?.variant
+      return appWide && supported.includes(appWide) ? appWide : 'default'
+    },
+    set: (value: any) => {
+      const defaults = style.value.defaults || {}
+
+      // Picking Default under an app-wide variant must actually win: the
+      // engine skips 'default' entries, so the app-wide value explodes
+      // into the OTHER groups (where they support it) and disappears.
+      if (value === 'default' && defaults.variant) {
+        const variants: Record<string, any> = {}
+        for (const field of variantGroupFields) {
+          if (field.key === group) continue
+          const existing = defaults.variants?.[field.key]
+          if (existing && existing !== 'default') {
+            variants[field.key] = existing
+          } else if (field.items.some(item => item.value === defaults.variant)) {
+            variants[field.key] = defaults.variant
+          }
+        }
+        const next = { ...defaults, variants }
+        delete next.variant
+        setStyle({ defaults: next })
+        return
+      }
+
+      setStyle({ defaults: { ...defaults, variants: { ...defaults.variants, [group]: value } } })
+    }
+  })
+}
+
+const groupVariants = Object.fromEntries(variantGroupFields.map(field => [field.key, groupVariantModel(field.key)])) as Record<VariantGroup, ReturnType<typeof groupVariantModel>>
+
+// Primary IS the stock default — one entry, tagged, storing 'default'
+// (an explicit 'primary' would export a no-op override).
+const defaultColorItems = [
+  { label: 'Primary', value: 'default', chip: { color: 'primary' as any }, defaultTag: true },
+  ...['secondary', 'success', 'info', 'warning', 'error', 'neutral'].map(value => ({
+    label: capitalize(value),
+    value,
+    chip: { color: value as any }
+  }))
+]
+
+function groupColorModel(group: VariantGroup) {
+  return computed({
+    get: () => style.value.defaults?.colors?.[group] || 'default',
+    set: (value: any) => setStyle({ defaults: { ...style.value.defaults, colors: { ...style.value.defaults?.colors, [group]: value } } })
+  })
+}
+
+const groupColors = Object.fromEntries(variantGroupFields.map(field => [field.key, groupColorModel(field.key)])) as Record<VariantGroup, ReturnType<typeof groupColorModel>>
+
+const defaultSize = computed({
+  // legacy saved prefs may still pin 'md' explicitly — it IS the default
+  get: () => {
+    const size = style.value.defaults?.size || 'default'
+    return size === 'md' ? 'default' : size
+  },
+  set: (value: any) => setStyle({ defaults: { ...style.value.defaults, size: value } })
+})
+</script>
+
+<template>
+  <!-- Sections own their padding so the separators run edge to edge. -->
+  <div class="flex flex-col">
+    <ThemeStudioSection
+      label="Font"
+      help-to="/docs/getting-started/integrations/fonts"
+      class="p-4"
+      section-key="font"
+    >
+      <div class="flex flex-col gap-2">
+        <!-- live specimen: the heading treatment over the base body -->
+        <div class="rounded-md ring ring-default bg-elevated/50 px-3 py-2 select-none">
+          <p class="text-sm text-highlighted truncate" :style="headingSampleStyle">
+            Grumpy wizards make toxic brew
+          </p>
+          <p class="text-xs text-muted truncate" :style="bodySampleStyle">
+            The quick brown fox jumps over the lazy dog 0123456789
+          </p>
+        </div>
+
+        <template v-for="row in fontRows" :key="row.key">
+          <span class="text-xs font-medium text-muted select-none" :class="row.key === 'heading' && 'pt-1'">{{ row.label }}</span>
+
+          <div class="flex items-center gap-1.5">
+            <!-- each family renders itself over a live specimen line -->
+            <ThemeStudioListPicker
+              v-model="row.font.value"
+              :items="row.items.value"
+              :icon="row.selectIcon"
+              :aria-label="`${row.label} font`"
+              class="flex-1 min-w-0"
+            >
+              <template #trigger>
+                <span
+                  class="truncate"
+                  :style="row.font.value === 'inherit' ? undefined : { fontFamily: `'${row.font.value}', sans-serif` }"
+                >{{ row.items.value.find(item => item.value === row.font.value)?.label ?? row.font.value }}<span v-if="row.font.value === row.defaultValue" class="text-dimmed font-normal">&nbsp;(Default)</span></span>
+              </template>
+
+              <template #item-label="{ item }">
+                <span :style="item.value === 'inherit' ? undefined : { fontFamily: `'${item.value}', sans-serif` }">{{ item.label }}</span><span v-if="item.value === row.defaultValue" class="text-dimmed">&nbsp;(Default)</span>
+              </template>
+
+              <template #item-description="{ item }">
+                <span
+                  v-if="item.value !== 'inherit'"
+                  class="text-xs text-muted truncate"
+                  :style="{ fontFamily: `'${item.value}', sans-serif` }"
+                >Grumpy wizards make toxic brew</span>
+              </template>
+            </ThemeStudioListPicker>
+
+            <UFieldGroup size="sm">
+              <UPopover :content="{ align: 'start' }">
+                <UTooltip :text="row.weights.length > 1 ? 'Weights' : 'Weight'">
+                  <UButton
+                    icon="i-lucide-bold"
+                    color="neutral"
+                    variant="subtle"
+                    :active="row.weightsActive.value"
+                    active-color="primary"
+                    active-variant="subtle"
+                    :aria-label="row.aria.weights"
+                  />
+                </UTooltip>
+
+                <template #content>
+                  <div class="w-64 p-3 flex flex-col gap-1.5">
+                    <ThemeStudioSliderRow
+                      v-for="weight in row.weights"
+                      :key="weight.label"
+                      v-model="weight.model.value"
+                      :label="weight.label"
+                      :min="weight.min"
+                      :max="weight.max"
+                      :step="25"
+                    />
+                  </div>
+                </template>
+              </UPopover>
+
+              <UTooltip text="Uppercase">
+                <UButton
+                  icon="i-lucide-case-upper"
+                  color="neutral"
+                  variant="subtle"
+                  :active="row.uppercase.value"
+                  active-color="primary"
+                  active-variant="subtle"
+                  :aria-label="row.aria.uppercase"
+                  @click="row.uppercase.value = !row.uppercase.value"
+                />
+              </UTooltip>
+
+              <UPopover :content="{ align: 'start' }">
+                <UTooltip text="Letter spacing">
+                  <UButton
+                    icon="i-lucide-move-horizontal"
+                    color="neutral"
+                    variant="subtle"
+                    :active="row.letterSpacing.value !== 0"
+                    active-color="primary"
+                    active-variant="subtle"
+                    :aria-label="row.aria.spacing"
+                  />
+                </UTooltip>
+
+                <template #content>
+                  <ThemeStudioSliderRow
+                    v-model="row.letterSpacing.value"
+                    label="Spacing"
+                    :min="-0.05"
+                    :max="0.25"
+                    :step="0.005"
+                    unit="em"
+                    class="w-64 p-3"
+                  />
+                </template>
+              </UPopover>
+
+              <UPopover :content="{ align: 'start' }">
+                <UTooltip text="Line height">
+                  <UButton
+                    icon="i-lucide-move-vertical"
+                    color="neutral"
+                    variant="subtle"
+                    :active="row.lineHeight.value !== row.lineHeightDefault"
+                    active-color="primary"
+                    active-variant="subtle"
+                    :aria-label="row.aria.height"
+                  />
+                </UTooltip>
+
+                <template #content>
+                  <ThemeStudioSliderRow
+                    v-model="row.lineHeight.value"
+                    label="Height"
+                    :min="1"
+                    :max="2"
+                    :step="0.05"
+                    class="w-64 p-3"
+                  />
+                </template>
+              </UPopover>
+            </UFieldGroup>
+          </div>
+        </template>
+      </div>
+    </ThemeStudioSection>
+
+    <USeparator />
+
+    <ThemeStudioSection
+      label="Icons"
+      help-to="/docs/getting-started/integrations/icons"
+      class="p-4"
+      section-key="icons"
+    >
+      <div class="flex flex-col gap-2">
+        <!-- a spread of the selected set -->
+        <div class="rounded-md ring ring-default bg-elevated/50 px-3 py-2 flex flex-wrap justify-center gap-2.5">
+          <UIcon v-for="name in iconPreviews" :key="name" :name="name" class="size-4 text-muted" />
+        </div>
+
+        <!-- every set previews a strip of its own glyphs -->
+        <ThemeStudioListPicker
+          v-model="icon"
+          :items="icons"
+          :icon="icons.find(i => i.value === icon)?.icon"
+          aria-label="Icon set"
+        >
+          <template #item-description="{ item }">
+            <span class="flex items-center gap-1.5 pt-0.5">
+              <UIcon
+                v-for="name in iconSetSamples(item.value)"
+                :key="name"
+                :name="name"
+                class="size-3.5 text-muted"
+              />
+            </span>
+          </template>
+        </ThemeStudioListPicker>
+      </div>
+    </ThemeStudioSection>
+
+    <USeparator />
+
+    <ThemeStudioSection label="Scale" class="p-4" section-key="scale">
+      <div class="flex flex-col gap-2">
+        <ThemeStudioSliderRow
+          v-model="radius"
+          label="Radius"
+          :min="0"
+          :max="0.5"
+          :step="0.125"
+        />
+
+        <ThemeStudioSliderRow
+          v-model="fontSize"
+          label="Text"
+          :min="14"
+          :max="18"
+          :step="0.5"
+          unit="px"
+        />
+
+        <ThemeStudioSliderRow v-model="spacing" label="Spacing" :min="0.15" :max="0.35" :step="0.025" />
+
+        <div class="flex items-center gap-2">
+          <span class="text-xs text-muted w-13 shrink-0 select-none">Size</span>
+
+          <ThemeStudioDefaultSelect
+            v-model="defaultSize"
+            :items="defaultSizeItems"
+            icon="i-lucide-proportions"
+            class="flex-1"
+            aria-label="Default size"
+          />
+        </div>
+      </div>
+    </ThemeStudioSection>
+
+    <USeparator />
+
+    <template v-for="field in variantGroupFields" :key="field.key">
+      <ThemeStudioSection
+        :label="field.label"
+        :default-open="false"
+        class="p-4"
+        :section-key="field.key"
+      >
+        <div class="flex flex-col gap-1.5">
+          <div class="flex items-center gap-2">
+            <span class="text-xs text-muted w-13 shrink-0 select-none">Variant</span>
+
+            <UPopover v-model:open="variantGridOpen[field.key]" :content="{ side: 'bottom', align: 'start' }" class="flex-1">
+              <UButton
+                size="sm"
+                color="neutral"
+                variant="subtle"
+                block
+                icon="i-lucide-layers"
+                trailing-icon="i-lucide-chevron-down"
+                :ui="{ label: 'flex-1 text-left' }"
+                :aria-label="`${field.label} variant`"
+              >
+                {{ field.items.find(item => item.value === (groupVariants[field.key].value === 'default' ? field.stock : groupVariants[field.key].value))?.label }}<span v-if="groupVariants[field.key].value === 'default'" class="text-dimmed font-normal">&nbsp;(Default)</span>
+              </UButton>
+
+              <template #content>
+                <!-- each cell renders IN the variant it picks -->
+                <div class="w-64 p-2 grid grid-cols-2 gap-1">
+                  <UButton
+                    v-for="item in field.items"
+                    :key="item.value"
+                    size="sm"
+                    block
+                    :color="(groupVariants[field.key].value === item.value || (groupVariants[field.key].value === 'default' && item.value === field.stock)) ? 'primary' : 'neutral'"
+                    :variant="RENDERABLE_VARIANTS.includes(item.value) ? (item.value as any) : 'subtle'"
+                    :class="[item.value === 'none' && 'opacity-60', 'min-w-0']"
+                    @click="groupVariants[field.key].value = (item.value === field.stock ? 'default' : item.value); variantGridOpen[field.key] = false"
+                  >
+                    <!-- opacity, not a color: text-dimmed would fight the variant's own text color -->
+                    <span class="truncate">{{ item.label }}<span v-if="item.value === field.stock" class="opacity-70 font-normal">&nbsp;(Default)</span></span>
+                  </UButton>
+                </div>
+              </template>
+            </UPopover>
+          </div>
+
+          <div v-if="field.hasColor" class="flex items-center gap-2">
+            <span class="text-xs text-muted w-13 shrink-0 select-none">Color</span>
+
+            <ThemeStudioDefaultSelect
+              v-model="groupColors[field.key].value"
+              :items="defaultColorItems"
+              class="flex-1"
+              :aria-label="`${field.label} color`"
+            >
+              <template #leading>
+                <UChip
+                  :color="(groupColors[field.key].value === 'default' ? 'primary' : groupColors[field.key].value) as any"
+                  inset
+                  standalone
+                />
+              </template>
+            </ThemeStudioDefaultSelect>
+          </div>
+        </div>
+      </ThemeStudioSection>
+
+      <USeparator v-if="field.key !== 'inputs'" />
+    </template>
+  </div>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioControlsStyle.vue b/docs/app/components/theme-studio/ThemeStudioControlsStyle.vue
new file mode 100644
index 0000000000..7fa04afd75
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioControlsStyle.vue
@@ -0,0 +1,345 @@
+<script setup lang="ts">
+import { SHADE_LADDER, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, BORDER_WIDTH_DEFAULT, SHADOW_GEOMETRY_DEFAULTS, INNER_SHADOW_GEOMETRY_DEFAULTS } from '../../utils/theme-engine'
+import type { ShadeStop } from '../../utils/theme-engine'
+
+const { style, setStyle, primaryChip, neutralChip, baselineDoc } = useThemeStudio()
+
+// Inherit leaves the library's own shadows alone, None strips them, Custom
+// is the studio treatment. The engine still understands 'soft' (presets,
+// imports) — it simply reads as Custom here.
+const SHADOW_STYLE_OPTIONS = [
+  { label: 'Inherit', value: 'inherit' },
+  { label: 'None', value: 'none' },
+  { label: 'Custom', value: 'custom' }
+]
+
+const shadowStyle = computed({
+  get: () => {
+    const shadow = style.value.shadow
+    if (!shadow || shadow === 'none') return 'inherit'
+    return shadow === 'flat' ? 'none' : 'custom'
+  },
+  // Custom starts where the library already is: geometry approximating the
+  // stock shadow-lg, so entering Custom isn't a jump (20% ≈ shadow-lg's two
+  // stacked 10% layers flattened into one). Leaving Custom clears the knobs
+  // — Inherit means a clean slate, and the next Custom reseeds fresh.
+  set: (value: any) => setStyle(value === 'custom'
+    ? {
+        shadow: 'hard',
+        ...(style.value.shadowGeometry === undefined ? { shadowGeometry: { x: 0, y: 6, blur: 12, spread: 0 } } : {}),
+        ...(style.value.shadowOpacity === undefined ? { shadowOpacity: 20 } : {})
+      }
+    : { shadow: value === 'none' ? 'flat' : 'none', shadowGeometry: undefined, shadowOpacity: undefined, shadowColor: undefined, shadowShade: undefined })
+})
+
+// Nothing in the library casts an inner shadow, so None and Inherit are
+// the same thing — two options suffice.
+const INNER_SHADOW_OPTIONS = [
+  { label: 'None', value: 'none' },
+  { label: 'Custom', value: 'custom' }
+]
+
+const innerShadowStyle = computed({
+  get: () => (!style.value.innerShadow || style.value.innerShadow === 'none') ? 'none' : 'custom',
+  set: (value: any) => setStyle({ innerShadow: value === 'custom' ? 'hard' : 'none' })
+})
+
+const shadowOpacity = computed({
+  get: () => style.value.shadowOpacity ?? (style.value.shadow === 'hard' ? 100 : 25),
+  set: (value: number) => setStyle({ shadowOpacity: value })
+})
+
+const innerShadowOpacity = computed({
+  get: () => style.value.innerShadowOpacity ?? 15,
+  set: (value: number) => setStyle({ innerShadowOpacity: value })
+})
+
+const innerShadowColor = computed({
+  get: () => style.value.innerShadowColor || 'default',
+  set: (value: any) => setStyle({ innerShadowColor: value })
+})
+
+const borderOptions = [
+  { label: 'Inherit', value: 'default' },
+  { label: 'None', value: 'none' },
+  { label: 'Custom', value: 'custom' }
+]
+
+// Legacy saved prefs may still hold bold/frame — both read as custom.
+const borderStyle = computed({
+  get: () => {
+    const value = style.value.border || 'default'
+    return value === 'bold' || value === 'frame' ? 'custom' : value
+  },
+  set: (value: any) => setStyle({ border: value })
+})
+
+const borderWidth = computed({
+  get: () => style.value.borderWidth ?? BORDER_WIDTH_DEFAULT,
+  set: (value: number) => setStyle({ borderWidth: value })
+})
+
+// Outline solid/soft surfaces too — the neobrutalist frame look.
+const frameSolids = computed({
+  get: () => !!style.value.frame || style.value.border === 'frame',
+  // Migrate the legacy border: 'frame' encoding on write — otherwise the
+  // getter keeps reading true and the switch can never turn off.
+  set: (value: boolean) => setStyle({
+    frame: value,
+    border: style.value.border === 'frame' ? 'custom' : style.value.border
+  })
+})
+
+// Default recolors nothing — every ring keeps its own per-element color —
+// so it reads "Per element" rather than pretending to be a paint choice.
+const borderColorItems = [
+  { label: 'Per element', value: 'default', defaultTag: true },
+  { label: 'Inverted', value: 'inverted' },
+  { label: 'Black', value: 'black' },
+  { label: 'White', value: 'white' },
+  { label: 'Primary', value: 'primary' },
+  { label: 'Neutral', value: 'neutral' },
+  { label: 'Neutral shade', value: 'shade' },
+  { label: 'Primary shade', value: 'primary-shade' }
+]
+
+// The drop shadow's stock color IS the neutral shade at its resting stops
+// (neutral-950 light / literal black dark), so Default merges into a
+// tagged 'Neutral shade' — the ladder's black end made this expressible.
+const shadowColorItems = [
+  { label: 'Neutral shade', value: 'shade', defaultTag: true },
+  { label: 'Black', value: 'black' },
+  { label: 'Inverted', value: 'inverted' },
+  { label: 'Primary', value: 'primary' },
+  { label: 'Primary shade', value: 'primary-shade' }
+]
+
+// The inner shadow's default is a live link — inherit whatever
+// --ui-shadow-color currently resolves to — not a pinnable shade.
+const innerShadowColorItems = [
+  { label: 'Inherit shadow', value: 'default', defaultTag: true },
+  { label: 'Black', value: 'black' },
+  { label: 'Inverted', value: 'inverted' },
+  { label: 'Primary', value: 'primary' },
+  { label: 'Neutral shade', value: 'shade' },
+  { label: 'Primary shade', value: 'primary-shade' }
+]
+
+// Slider position ↔ SHADES index, per mode. shadow/border shades write both
+// modes on first touch (explicit 'shade' mode choice); token shades write
+// ONLY the touched mode so an untouched mode never becomes an override.
+// Dirty/reset measure against the BASELINE preset's choice: reset restores
+// it, or deletes the entry when the preset made none.
+function shadeControl(field: 'shadowShade' | 'innerShadowShade' | 'borderShade', defaults: { light: ShadeStop, dark: ShadeStop }, target: 'light' | 'dark') {
+  const model = computed({
+    // Per-key fallback: an imported doc can carry a single-mode shade
+    // object ({ light: 400 }) — indexOf(undefined) would park the slider
+    // at -1 and the chip at var(--color-…-undefined).
+    get: () => SHADE_LADDER.indexOf((style.value[field]?.[target] ?? defaults[target]) as typeof SHADE_LADDER[number]),
+    set: (index: number) => {
+      const current = { ...defaults, ...style.value[field] }
+      setStyle({ [field]: { ...current, [target]: SHADE_LADDER[index]! } })
+    }
+  })
+  const baseline = computed(() => baselineDoc.value.style?.[field]?.[target])
+  const dirty = computed(() => style.value[field]?.[target] !== baseline.value)
+  function reset() {
+    const entry: { light?: ShadeStop, dark?: ShadeStop } = { ...style.value[field] }
+    if (baseline.value !== undefined) entry[target] = baseline.value
+    else Reflect.deleteProperty(entry, target)
+    setStyle({ [field]: Object.keys(entry).length ? entry : undefined })
+  }
+  return { model, dirty, reset }
+}
+
+const shadowShades = {
+  light: shadeControl('shadowShade', SHADOW_SHADE_DEFAULTS, 'light'),
+  dark: shadeControl('shadowShade', SHADOW_SHADE_DEFAULTS, 'dark')
+}
+
+const innerShadowShades = {
+  light: shadeControl('innerShadowShade', SHADOW_SHADE_DEFAULTS, 'light'),
+  dark: shadeControl('innerShadowShade', SHADOW_SHADE_DEFAULTS, 'dark')
+}
+
+const borderShades = {
+  light: shadeControl('borderShade', BORDER_SHADE_DEFAULTS, 'light'),
+  dark: shadeControl('borderShade', BORDER_SHADE_DEFAULTS, 'dark')
+}
+
+// Hard-shadow geometry sliders (px)
+const geometryFields = [
+  { key: 'x', label: 'Offset X', min: -12, max: 12 },
+  { key: 'y', label: 'Offset Y', min: -12, max: 12 },
+  { key: 'blur', label: 'Blur', min: 0, max: 24 },
+  { key: 'spread', label: 'Spread', min: 0, max: 8 }
+] as const
+
+function geometrySliders(field: 'shadowGeometry' | 'innerShadowGeometry', defaults: typeof SHADOW_GEOMETRY_DEFAULTS) {
+  const slider = (key: 'x' | 'y' | 'blur' | 'spread') => computed({
+    get: () => ({ ...defaults, ...style.value[field] })[key],
+    set: (value: number) => setStyle({ [field]: { ...defaults, ...style.value[field], [key]: value } })
+  })
+  return Object.fromEntries(geometryFields.map(({ key }) => [key, slider(key)])) as Record<'x' | 'y' | 'blur' | 'spread', ReturnType<typeof slider>>
+}
+
+const borderColor = computed({
+  get: () => style.value.borderColor || 'default',
+  set: (value: any) => setStyle({ borderColor: value })
+})
+
+const shadowColor = computed({
+  // absent (and legacy 'default') read as the resting neutral shade
+  get: () => {
+    const color = style.value.shadowColor
+    return !color || color === 'default' ? 'shade' : color
+  },
+  set: (value: any) => setStyle({ shadowColor: value })
+})
+
+// The two shadow sections are the same panel pointed at different style
+// fields — one config each, one template.
+const shadowSections = [{
+  label: 'Shadow',
+  dirtyKey: 'shadow' as const,
+  colorItems: shadowColorItems,
+  model: shadowStyle,
+  options: SHADOW_STYLE_OPTIONS,
+  color: shadowColor,
+  shades: shadowShades,
+  opacity: shadowOpacity,
+  geometry: geometrySliders('shadowGeometry', SHADOW_GEOMETRY_DEFAULTS),
+  hard: computed(() => (style.value.shadow || 'none') === 'hard')
+}, {
+  label: 'Inner shadow',
+  dirtyKey: 'innerShadow' as const,
+  colorItems: innerShadowColorItems,
+  model: innerShadowStyle,
+  options: INNER_SHADOW_OPTIONS,
+  color: innerShadowColor,
+  shades: innerShadowShades,
+  opacity: innerShadowOpacity,
+  geometry: geometrySliders('innerShadowGeometry', INNER_SHADOW_GEOMETRY_DEFAULTS),
+  hard: computed(() => style.value.innerShadow === 'hard')
+}]
+</script>
+
+<template>
+  <!-- Sections own their padding so the separators run edge to edge. -->
+  <div class="flex flex-col">
+    <template v-for="section in shadowSections" :key="section.label">
+      <ThemeStudioSection :label="section.label" class="p-4" :section-key="section.dirtyKey">
+        <div>
+          <UTabs
+            v-model="section.model.value"
+            :items="section.options"
+            :content="false"
+            size="xs"
+            color="primary"
+            class="w-full"
+          />
+
+          <div v-if="section.model.value === 'custom'" class="mt-1.5 flex flex-col gap-2">
+            <ThemeStudioDefaultSelect
+              v-model="section.color.value"
+              :items="section.colorItems"
+              icon="i-lucide-paint-bucket"
+              class="w-full"
+              :aria-label="`${section.label} color`"
+            />
+
+            <template v-if="section.color.value === 'shade' || section.color.value === 'primary-shade'">
+              <ThemeStudioSliderRow
+                v-for="(slider, modeName) in section.shades"
+                :key="modeName"
+                v-model="slider.model.value"
+                :mode="modeName"
+                :chip="section.color.value === 'primary-shade' ? primaryChip : neutralChip"
+                resettable
+                :dirty="slider.dirty.value"
+                @reset="slider.reset()"
+              />
+            </template>
+
+            <ThemeStudioSliderRow
+              v-model="section.opacity.value"
+              label="Opacity"
+              :min="5"
+              :max="100"
+              :step="5"
+              unit="%"
+            />
+
+            <template v-if="section.hard.value">
+              <ThemeStudioSliderRow
+                v-for="field in geometryFields"
+                :key="field.key"
+                v-model="section.geometry[field.key].value"
+                :label="field.label"
+                :min="field.min"
+                :max="field.max"
+                :step="1"
+                unit="px"
+              />
+            </template>
+          </div>
+        </div>
+      </ThemeStudioSection>
+
+      <USeparator />
+    </template>
+
+    <ThemeStudioSection label="Borders" class="p-4" section-key="borders">
+      <div>
+        <UTabs
+          v-model="borderStyle"
+          :items="borderOptions"
+          :content="false"
+          size="xs"
+          color="primary"
+          class="w-full"
+        />
+
+        <div v-if="borderStyle === 'custom'" class="mt-1.5 flex flex-col gap-2">
+          <ThemeStudioSliderRow
+            v-model="borderWidth"
+            label="Width"
+            :min="1"
+            :max="4"
+            :step="1"
+            unit="px"
+          />
+
+          <div class="flex items-center gap-2">
+            <span class="text-xs text-muted w-13 shrink-0 select-none">Frame</span>
+
+            <UTooltip text="Outline solid surfaces too — the neobrutalist look">
+              <USwitch v-model="frameSolids" size="sm" aria-label="Frame solid surfaces" />
+            </UTooltip>
+          </div>
+
+          <ThemeStudioDefaultSelect
+            v-model="borderColor"
+            :items="borderColorItems"
+            icon="i-lucide-paint-bucket"
+            class="w-full"
+            aria-label="Border color"
+          />
+
+          <template v-if="borderColor === 'shade' || borderColor === 'primary-shade'">
+            <ThemeStudioSliderRow
+              v-for="(slider, modeName) in borderShades"
+              :key="modeName"
+              v-model="slider.model.value"
+              :mode="modeName"
+              :chip="borderColor === 'primary-shade' ? primaryChip : neutralChip"
+              resettable
+              :dirty="slider.dirty.value"
+              @reset="slider.reset()"
+            />
+          </template>
+        </div>
+      </div>
+    </ThemeStudioSection>
+  </div>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioDefaultSelect.vue b/docs/app/components/theme-studio/ThemeStudioDefaultSelect.vue
new file mode 100644
index 0000000000..cc1c611028
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioDefaultSelect.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { ChipProps } from '@nuxt/ui'
+
+/**
+ * A USelect whose stock choice is deduped into a single tagged entry —
+ * the item carrying `defaultTag` renders a muted "(Default)" suffix in
+ * both the trigger and the list.
+ */
+export interface DefaultSelectItem {
+  label: string
+  value: string
+  defaultTag?: boolean
+  chip?: ChipProps
+}
+
+const props = defineProps<{
+  items: DefaultSelectItem[]
+  icon?: string
+  ariaLabel?: string
+}>()
+
+const model = defineModel<string>({ required: true })
+
+const selected = computed(() => props.items.find(item => item.value === model.value))
+
+/** The slot scope types items as the broad SelectItem union — narrow it. */
+function asItem(item: unknown) {
+  return item as DefaultSelectItem
+}
+</script>
+
+<template>
+  <USelect
+    v-model="model"
+    size="sm"
+    color="neutral"
+    variant="subtle"
+    :icon="icon"
+    :items="items"
+    :aria-label="ariaLabel"
+  >
+    <template v-if="$slots.leading" #leading>
+      <slot name="leading" />
+    </template>
+
+    <template #default>
+      {{ selected?.label }}<span v-if="selected?.defaultTag" class="text-dimmed">&nbsp;(Default)</span>
+    </template>
+
+    <template #item-label="{ item }">
+      {{ asItem(item).label }}<span v-if="asItem(item).defaultTag" class="text-dimmed">&nbsp;(Default)</span>
+    </template>
+  </USelect>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioListPicker.vue b/docs/app/components/theme-studio/ThemeStudioListPicker.vue
new file mode 100644
index 0000000000..15fb5a4414
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioListPicker.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+/**
+ * A popover + listbox picker: subtle trigger button, rich rows (slots can
+ * restyle labels or add description strips), closes on pick. The listbox
+ * root drops its own ring — it would double the popover's chrome.
+ */
+export interface ListPickerItem {
+  label: string
+  value: string
+  [key: string]: unknown
+}
+
+const props = defineProps<{
+  items: ListPickerItem[]
+  icon?: string
+  ariaLabel?: string
+}>()
+
+const model = defineModel<string>({ required: true })
+
+const open = ref(false)
+const selected = computed(() => props.items.find(item => item.value === model.value))
+</script>
+
+<template>
+  <UPopover v-model:open="open" :content="{ align: 'start' }">
+    <UButton
+      color="neutral"
+      variant="subtle"
+      size="sm"
+      block
+      :icon="icon"
+      trailing-icon="i-lucide-chevron-down"
+      :ui="{ label: 'flex-1 text-left truncate' }"
+      :aria-label="ariaLabel"
+    >
+      <slot name="trigger" :selected="selected">
+        {{ selected?.label }}
+      </slot>
+    </UButton>
+
+    <template #content>
+      <UListbox
+        v-model="model"
+        :items="items"
+        value-key="value"
+        class="w-72"
+        :ui="{ root: 'ring-0 rounded-md', content: 'max-h-80' }"
+        @update:model-value="open = false"
+      >
+        <template v-if="$slots['item-label']" #item-label="scope">
+          <slot name="item-label" v-bind="scope" />
+        </template>
+
+        <template v-if="$slots['item-description']" #item-description="scope">
+          <slot name="item-description" v-bind="scope" />
+        </template>
+      </UListbox>
+    </template>
+  </UPopover>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
index 7f0aeea4e0..85cc15504a 100644
--- a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
@@ -24,9 +24,6 @@ const { hasCSSChanges, hasConfigChanges } = useTheme()
 // The persisted preset (and any persisted edits) are client-only — resolve
 // the label after mount so hydration matches the server's fallback.
 const mounted = ref(false)
-onMounted(() => {
-  mounted.value = true
-})
 
 /**
  * Each row leads with a mini theme chip: the doc's neutral ramp as the
@@ -62,7 +59,10 @@ const presetItems = computed(() => presets.map(preset => ({
 
 // the rows render their own font names — load the faces once
 const { fonts } = useTheme()
-onMounted(() => loadFontPreviews(fonts))
+onMounted(() => {
+  mounted.value = true
+  loadFontPreviews(fonts)
+})
 
 const selected = computed({
   get: () => activePreset.value,
@@ -133,7 +133,11 @@ function onRollEnd(event?: AnimationEvent) {
 
 onUnmounted(clearRollTimers)
 
-/** The applied preset's name; 'Custom' once edits diverge from it. */
+/**
+ * The baseline preset's name — edits deliberately don't clear it (the
+ * dirty dots carry divergence); 'Custom' only when no preset is set but
+ * the theme differs from stock.
+ */
 const presetLabel = computed(() => {
   if (!mounted.value) return 'Presets'
   const active = presets.find(preset => preset.id === activePreset.value)
diff --git a/docs/app/components/theme-studio/ThemeStudioSection.vue b/docs/app/components/theme-studio/ThemeStudioSection.vue
index 25fabfa35e..e9df4d17a3 100644
--- a/docs/app/components/theme-studio/ThemeStudioSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSection.vue
@@ -6,22 +6,25 @@
  * never toggle the fold; actions force it open instead, so what they
  * reveal is visible.
  */
+import type { SectionKey } from '../../utils/theme-engine'
+
 const props = withDefaults(defineProps<{
   label: string
   /** Docs page the header's help icon links to */
   helpTo?: string
   defaultOpen?: boolean
   /**
-   * Shows a reset button that's enabled while the section differs from the
-   * active preset (dirty). Emits `reset` — the host owns the semantics.
+   * Names the ThemeDoc section this fold owns — the header then carries a
+   * reset button enabled while the section diverges from the baseline
+   * preset, wired straight to the studio's sectionDirty/resetSection.
    */
-  resettable?: boolean
-  dirty?: boolean
+  sectionKey?: SectionKey
 }>(), {
   defaultOpen: true
 })
 
-const emit = defineEmits<{ reset: [] }>()
+const { sectionDirty, resetSection } = useThemeStudio()
+const dirty = computed(() => (props.sectionKey ? sectionDirty(props.sectionKey).value : false))
 
 const slots = defineSlots<{
   default: () => any
@@ -47,7 +50,7 @@ const open = ref(props.defaultOpen)
         class="justify-start flex-1"
       />
 
-      <UTooltip v-if="resettable" :text="dirty ? 'Reset to preset' : 'Matches the preset'">
+      <UTooltip v-if="sectionKey" :text="dirty ? 'Reset to preset' : 'Matches the preset'">
         <UButton
           size="sm"
           :color="dirty ? 'primary' : 'neutral'"
@@ -55,7 +58,7 @@ const open = ref(props.defaultOpen)
           icon="i-lucide-rotate-ccw"
           :disabled="!dirty"
           :aria-label="`Reset ${label} to preset`"
-          @click.stop="emit('reset')"
+          @click.stop="resetSection(sectionKey!)"
         />
       </UTooltip>
 
diff --git a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
index 295a116a2f..489307c6c9 100644
--- a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SHADES } from '../../utils/theme-engine'
+import { SHADE_LADDER } from '../../utils/theme-engine'
 
 /**
  * The studio's control row — a horizontal UFormField: tiny label (or icon),
@@ -30,7 +30,7 @@ const props = withDefaults(defineProps<{
   dirty?: boolean
 }>(), {
   min: 0,
-  max: SHADES.length - 1,
+  max: SHADE_LADDER.length - 1,
   step: 1
 })
 
@@ -38,7 +38,12 @@ const props = withDefaults(defineProps<{
 const value = defineModel<number>({ required: true })
 
 const shade = computed(() => !!props.chip && !!props.mode)
-const sliderColor = computed(() => shade.value ? `var(--color-${props.chip}-${SHADES[value.value]})` : undefined)
+const stop = computed(() => SHADE_LADDER[value.value])
+const sliderColor = computed(() => {
+  if (!shade.value) return undefined
+  // the ladder's ends are literals no ramp variable can express
+  return stop.value === 'white' || stop.value === 'black' ? stop.value : `var(--color-${props.chip}-${stop.value})`
+})
 
 /**
  * A border that always contrasts with the fill, derived FROM the fill:
@@ -54,7 +59,7 @@ const emit = defineEmits<{ reset: [] }>()
 
 /** `0.25rem` reads as `.25rem` — the leading zero is noise at this width. */
 const display = computed(() => shade.value
-  ? String(SHADES[value.value])
+  ? String(stop.value)
   : `${String(value.value).replace(/^(-?)0\./, '$1.')}${props.unit ?? ''}`)
 </script>
 
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 6239e10184..02f54d9053 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -175,6 +175,10 @@ const shareMode = ref<'import' | 'export'>('export')
           <ThemeStudioViewChat v-else-if="view === 'chat'" />
           <ThemeStudioViewSaas v-else-if="view === 'saas'" />
           <ThemeStudioViewLanding v-else-if="view === 'landing'" />
+          <ThemeStudioViewDocs v-else-if="view === 'docs'" />
+          <ThemeStudioViewPortfolio v-else-if="view === 'portfolio'" />
+          <ThemeStudioViewChangelog v-else-if="view === 'changelog'" />
+          <ThemeStudioViewEditor v-else-if="view === 'editor'" />
           <ThemeStudioViewA11y v-else-if="view === 'a11y'" />
         </div>
 

From ce574fc43d24eb8d89d34c86273f422c66621163 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 12 Jul 2026 03:36:02 +0200
Subject: [PATCH 144/185] feat(docs): portfolio, changelog, docs and editor
 previews with a listbox view switcher

Four new single-file template replicas, dashboard grows Inbox/Customers/
Settings sub-pages, the header view switcher trades UTabs for a described
listbox, and the playground easter egg retires.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/components/header/Header.vue         |  32 +-
 .../playground/PlaygroundContributors.vue     |  36 -
 .../theme-studio/ThemeStudioViewChangelog.vue | 274 +++++++
 .../theme-studio/ThemeStudioViewDashboard.vue | 717 ++++++++++++++++--
 .../theme-studio/ThemeStudioViewDocs.vue      | 319 ++++++++
 .../theme-studio/ThemeStudioViewEditor.vue    | 301 ++++++++
 .../theme-studio/ThemeStudioViewPortfolio.vue | 373 +++++++++
 docs/app/composables/useThemeStudioView.ts    |  20 +-
 8 files changed, 1944 insertions(+), 128 deletions(-)
 create mode 100644 docs/app/components/theme-studio/ThemeStudioViewChangelog.vue
 create mode 100644 docs/app/components/theme-studio/ThemeStudioViewDocs.vue
 create mode 100644 docs/app/components/theme-studio/ThemeStudioViewEditor.vue
 create mode 100644 docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue

diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index 071964e4a2..4e9eb2409d 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -18,6 +18,7 @@ function toggleChat() {
 const isStudio = computed(() => route.path === '/theme')
 
 const { view, views } = useThemeStudioView()
+const viewListOpen = ref(false)
 
 // The popover body is a vertical menu so Resources can nest as a
 // collapsed group — horizontal popover child lists only render one level.
@@ -90,13 +91,30 @@ const studioMenuLinks = [{
       :ui="{ viewportWrapper: 'w-[12rem]', content: 'w-[12rem]' }"
     >
       <template #list-leading>
-        <UTabs
-          v-model="view"
-          :items="views"
-          :content="false"
-          size="sm"
-          color="primary"
-        />
+        <!-- ten previews outgrew tabs — a rich listbox names and describes
+             each one (blurbs from /templates) -->
+        <UPopover v-model:open="viewListOpen" :content="{ align: 'center' }">
+          <UButton
+            :icon="views.find(tab => tab.value === view)?.icon"
+            :label="views.find(tab => tab.value === view)?.label"
+            trailing-icon="i-lucide-chevron-down"
+            color="neutral"
+            variant="subtle"
+            size="sm"
+            aria-label="Preview page"
+          />
+
+          <template #content>
+            <UListbox
+              v-model="view"
+              :items="views"
+              value-key="value"
+              class="w-80"
+              :ui="{ root: 'ring-0 rounded-md', content: 'max-h-96' }"
+              @update:model-value="viewListOpen = false"
+            />
+          </template>
+        </UPopover>
       </template>
 
       <template #pages-content>
diff --git a/docs/app/components/playground/PlaygroundContributors.vue b/docs/app/components/playground/PlaygroundContributors.vue
index d7196f8b7d..4e0ea80e32 100644
--- a/docs/app/components/playground/PlaygroundContributors.vue
+++ b/docs/app/components/playground/PlaygroundContributors.vue
@@ -33,41 +33,5 @@ const usernames = [
         +300
       </div>
     </div>
-
-    <USeparator />
-
-    <div class="flex items-start justify-between">
-      <div>
-        <p class="font-semibold text-highlighted">
-          Un-contributors
-        </p>
-        <p class="text-sm text-muted">
-          Making a mess.
-        </p>
-      </div>
-      <UBadge color="neutral" variant="subtle">
-        -1
-      </UBadge>
-    </div>
-
-    <!-- easter egg: the studio's builder -->
-    <div class="flex items-center justify-between gap-3">
-      <UUser
-        name="Mike Newbon"
-        description="@mikenewbon"
-        :avatar="{ src: 'https://github.com/mikenewbon.png', alt: 'mikenewbon' }"
-        size="sm"
-      />
-
-      <UButton
-        icon="i-simple-icons-github"
-        color="neutral"
-        variant="outline"
-        size="xs"
-        to="https://github.com/mikenewbon"
-        target="_blank"
-        aria-label="Find Mike Newbon on GitHub"
-      />
-    </div>
   </div>
 </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewChangelog.vue b/docs/app/components/theme-studio/ThemeStudioViewChangelog.vue
new file mode 100644
index 0000000000..a9c52a410e
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioViewChangelog.vue
@@ -0,0 +1,274 @@
+<script setup lang="ts">
+// Replicates the official Nuxt UI Changelog template (nuxt-ui-templates/changelog)
+// in a single self-contained preview: app.vue's split layout with the sticky
+// intro panel + SkyBg on the left, and pages/index.vue's UChangelogVersions
+// feed on the right. Release notes are inlined since the template fetches them
+// from GitHub and renders them with Comark, neither of which is available here.
+
+const introLinks = [{
+  label: 'Documentation',
+  icon: 'i-lucide-book-open',
+  variant: 'ghost' as const,
+  size: 'md' as const
+}, {
+  label: 'GitHub',
+  icon: 'i-simple-icons-github',
+  variant: 'ghost' as const,
+  size: 'md' as const
+}]
+
+// Invented releases standing in for the template's GitHub release notes.
+interface Release {
+  tag: string
+  title: string
+  date: string
+  intro: string
+  sections: {
+    title: string
+    items: { text: string, code?: string }[]
+  }[]
+  contributors: string[]
+}
+
+const versions: Release[] = [{
+  tag: 'v4.2.0',
+  title: 'v4.2.0',
+  date: '2026-06-18T10:00:00Z',
+  intro: 'This release focuses on data display: a brand new component, smarter tables and a batch of theme refinements across the board.',
+  sections: [{
+    title: 'Features',
+    items: [
+      { code: 'ChangelogVersions', text: 'new component to compose release notes with sticky version indicators' },
+      { code: 'Table', text: 'add column pinning and row expansion' },
+      { code: 'ColorPicker', text: 'support custom swatch sizes' },
+      { code: 'Slider', text: 'expose a slot to render content next to the value' }
+    ]
+  }, {
+    title: 'Bug fixes',
+    items: [
+      { code: 'Modal', text: 'prevent overlay flicker when nesting inside a drawer' },
+      { code: 'Carousel', text: 'respect reduced motion preferences during autoplay' }
+    ]
+  }],
+  contributors: ['benjamincanac', 'romhml', 'sandros94', 'hywax']
+}, {
+  tag: 'v4.1.0',
+  title: 'v4.1.0',
+  date: '2026-05-06T09:30:00Z',
+  intro: 'A quality-of-life release: better forms, better keyboard navigation and a handful of long-requested props.',
+  sections: [{
+    title: 'Features',
+    items: [
+      { code: 'Form', text: 'nested field support with dot notation paths' },
+      { code: 'CommandPalette', text: 'new prop to render items lazily in large lists' },
+      { code: 'Calendar', text: 'allow custom day cells through a slot' }
+    ]
+  }, {
+    title: 'Bug fixes',
+    items: [
+      { code: 'ContentSearch', text: 'keep focus within the panel when tabbing from the search input' },
+      { code: 'Input', text: 'fix RTL alignment of trailing icons' },
+      { code: 'Toast', text: 'avoid duplicate announcements of titles by screen readers' }
+    ]
+  }],
+  contributors: ['benjamincanac', 'noook', 'genu']
+}, {
+  tag: 'v4.0.1',
+  title: 'v4.0.1',
+  date: '2026-04-02T16:15:00Z',
+  intro: 'A small patch following the v4 launch, addressing the most reported issues from the first week.',
+  sections: [{
+    title: 'Bug fixes',
+    items: [
+      { text: 'Restore auto-import of prose components in docs projects' },
+      { code: 'Skeleton', text: 'fix hydration mismatch when used with SSR color mode' },
+      { code: 'Button', text: 'correct padding of the compact size' }
+    ]
+  }],
+  contributors: ['benjamincanac', 'danielroe']
+}, {
+  tag: 'v4.0.0',
+  title: 'v4.0.0',
+  date: '2026-03-24T14:00:00Z',
+  intro: 'Nuxt UI v4 unifies Nuxt UI and Nuxt UI Pro into a single free and open source library: 110+ components, Tailwind CSS v4, and a brand new theming system built on design tokens.',
+  sections: [{
+    title: 'Highlights',
+    items: [
+      { text: 'All Pro components are now free and open source: dashboard, page sections, chat and more' },
+      { text: 'Semantic color aliases with light and dark values generated from your palette' },
+      { code: 'ui', text: 'prop enables per-slot overrides on the rewritten Tailwind Variants theming' },
+      { text: 'First-class Vue support without Nuxt through the dedicated Vite plugin' }
+    ]
+  }, {
+    title: 'Breaking changes',
+    items: [
+      { code: 'Notification', text: 'renamed to Toast with a unified API' },
+      { text: 'Dropped Tailwind CSS v3 support, the config file is replaced by CSS-first configuration' }
+    ]
+  }],
+  contributors: ['benjamincanac', 'romhml', 'atinux', 'smarroufin', 'noook']
+}]
+
+// Inline replica of the template's SkyBg component: twinkling primary stars
+// scattered across the sticky intro panel.
+interface Star {
+  x: number
+  y: number
+  size: number
+  delay: number
+}
+
+const stars = ref<Star[]>([])
+
+onMounted(() => {
+  stars.value = Array.from({ length: 50 }, () => ({
+    x: Math.floor(Math.random() * 100),
+    y: Math.floor(Math.random() * 100),
+    size: Math.random() * 2 + 1,
+    delay: Math.random() * 5
+  }))
+})
+</script>
+
+<template>
+  <!-- The pane is the scroll container; the intro panel sticks to it on xl. -->
+  <div class="h-full overflow-y-auto bg-default">
+    <div class="min-h-full xl:grid xl:grid-cols-2">
+      <UPageSection
+        title="Changelog"
+        description="Display GitHub release notes as a beautiful changelog for any repository with this Nuxt UI template."
+        orientation="vertical"
+        :links="introLinks"
+        :ui="{
+          root: 'border-b border-default xl:border-b-0 xl:sticky xl:top-0 xl:h-svh overflow-hidden',
+          container: 'h-full items-center justify-center',
+          wrapper: 'flex flex-col',
+          headline: 'mb-6',
+          title: 'text-left text-4xl',
+          description: 'text-left max-w-lg',
+          links: 'gap-1 justify-start -ms-2.5'
+        }"
+      >
+        <template #top>
+          <!-- Template's SkyBg: twinkling primary stars. -->
+          <div class="absolute inset-0 pointer-events-none z-[-1] overflow-hidden">
+            <div
+              v-for="(star, index) in stars"
+              :key="index"
+              class="star absolute rounded-full bg-primary"
+              :style="{
+                'left': `${star.x}%`,
+                'top': `${star.y}%`,
+                'width': `${star.size}px`,
+                'height': `${star.size}px`,
+                'transform': 'translate(-50%, -50%)',
+                '--twinkle-delay': `${star.delay}s`
+              }"
+            />
+          </div>
+
+          <div class="absolute -right-1/2 z-[-1] rounded-full bg-primary blur-[300px] size-60 sm:size-100 transform -translate-y-1/2 top-1/2" />
+        </template>
+
+        <template #headline>
+          <!-- Stand-in for the template's AppLogo wordmark. -->
+          <div class="flex items-center gap-1.5 text-highlighted">
+            <UIcon name="i-simple-icons-nuxt" class="size-6 text-primary shrink-0" />
+            <span class="text-xl font-bold">Nuxt UI</span>
+          </div>
+        </template>
+
+        <template #default />
+      </UPageSection>
+
+      <section class="relative px-4 sm:px-6 xl:px-0 xl:-ms-30 xl:flex-1">
+        <UButton
+          icon="i-lucide-sun-moon"
+          aria-label="Color mode"
+          color="neutral"
+          variant="ghost"
+          class="absolute top-4 right-4 z-10"
+        />
+
+        <UChangelogVersions
+          as="main"
+          :indicator-motion="false"
+          :ui="{
+            root: 'py-16 sm:py-24 lg:py-32',
+            indicator: 'inset-y-0'
+          }"
+        >
+          <UChangelogVersion
+            v-for="version in versions"
+            :key="version.tag"
+            :title="version.title"
+            :date="version.date"
+            :ui="{
+              root: 'flex items-start',
+              container: 'max-w-xl min-w-0',
+              header: 'border-b border-default pb-4',
+              title: 'text-3xl',
+              date: 'text-xs/9 text-highlighted font-mono',
+              indicator: 'sticky top-0 pt-16 -mt-16 sm:pt-24 sm:-mt-24 lg:pt-32 lg:-mt-32'
+            }"
+          >
+            <template #body>
+              <!-- The template renders release markdown with Comark; this
+              preview inlines the notes as plain prose markup instead. -->
+              <div class="text-base text-muted space-y-6">
+                <p>{{ version.intro }}</p>
+
+                <div v-for="section in version.sections" :key="section.title" class="space-y-3">
+                  <h3 class="text-lg font-semibold text-highlighted">
+                    {{ section.title }}
+                  </h3>
+
+                  <ul class="list-disc ps-5 space-y-1.5 marker:text-dimmed">
+                    <li v-for="(item, index) in section.items" :key="index" class="wrap-break-word">
+                      <template v-if="item.code">
+                        <code class="px-1.5 py-0.5 font-mono text-sm font-medium rounded-md bg-elevated text-highlighted border border-default">{{ item.code }}</code>{{ ' ' }}
+                      </template>{{ item.text }}
+                    </li>
+                  </ul>
+                </div>
+
+                <div class="space-y-3">
+                  <h3 class="text-lg font-semibold text-highlighted">
+                    Contributors
+                  </h3>
+
+                  <UAvatarGroup size="md" :max="5">
+                    <UAvatar
+                      v-for="contributor in version.contributors"
+                      :key="contributor"
+                      :src="`https://github.com/${contributor}.png`"
+                      :alt="contributor"
+                    />
+                  </UAvatarGroup>
+                </div>
+              </div>
+            </template>
+          </UChangelogVersion>
+        </UChangelogVersions>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.star {
+  animation: changelog-twinkle 2s ease-in-out infinite;
+  animation-delay: var(--twinkle-delay);
+  will-change: opacity;
+}
+
+@keyframes changelog-twinkle {
+  0%, 100% {
+    opacity: 0.2;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue b/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
index 37756b742d..908ca7906f 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
@@ -2,7 +2,15 @@
 import { h, resolveComponent } from 'vue'
 import type { DropdownMenuItem, NavigationMenuItem, TableColumn } from '@nuxt/ui'
 
+const UAvatar = resolveComponent('UAvatar')
 const UBadge = resolveComponent('UBadge')
+const UButton = resolveComponent('UButton')
+const UCheckbox = resolveComponent('UCheckbox')
+const UDropdownMenu = resolveComponent('UDropdownMenu')
+
+type Page = 'home' | 'inbox' | 'customers' | 'settings'
+const page = ref<Page>('home')
+const settingsSection = ref<'general' | 'notifications'>('general')
 
 const teams = [
   { label: 'Nuxt', avatar: { src: 'https://github.com/nuxt.png', alt: 'Nuxt' } },
@@ -19,35 +27,50 @@ const teamItems = computed<DropdownMenuItem[][]>(() => [
   ]
 ])
 
-const links: NavigationMenuItem[][] = [[{
+const links = computed<NavigationMenuItem[][]>(() => [[{
   label: 'Home',
   icon: 'i-lucide-house',
-  active: true
+  active: page.value === 'home',
+  onSelect: () => { page.value = 'home' }
 }, {
   label: 'Inbox',
   icon: 'i-lucide-inbox',
-  badge: '4'
+  badge: String(unreadCount),
+  active: page.value === 'inbox',
+  onSelect: () => { page.value = 'inbox' }
 }, {
   label: 'Customers',
-  icon: 'i-lucide-users'
+  icon: 'i-lucide-users',
+  active: page.value === 'customers',
+  onSelect: () => { page.value = 'customers' }
 }, {
   label: 'Settings',
   icon: 'i-lucide-settings',
   defaultOpen: true,
   type: 'trigger',
-  children: [
-    { label: 'General' },
-    { label: 'Members' },
-    { label: 'Notifications' },
-    { label: 'Security' }
-  ]
+  active: page.value === 'settings',
+  children: [{
+    label: 'General',
+    active: page.value === 'settings' && settingsSection.value === 'general',
+    onSelect: () => {
+      page.value = 'settings'
+      settingsSection.value = 'general'
+    }
+  }, {
+    label: 'Notifications',
+    active: page.value === 'settings' && settingsSection.value === 'notifications',
+    onSelect: () => {
+      page.value = 'settings'
+      settingsSection.value = 'notifications'
+    }
+  }]
 }], [{
   label: 'Feedback',
   icon: 'i-lucide-message-circle'
 }, {
   label: 'Help & Support',
   icon: 'i-lucide-info'
-}]]
+}]])
 
 const user = {
   name: 'Benjamin Canac',
@@ -149,6 +172,263 @@ const salesColumns: TableColumn<Sale>[] = [{
     }).format(Number.parseFloat(row.getValue('amount')))
   }
 }]
+
+// Inbox — mirrors app/pages/inbox.vue + InboxList/InboxMail from the template,
+// with dates pre-formatted as strings instead of pulling in date-fns.
+type Mail = {
+  id: number
+  unread?: boolean
+  from: { name: string, email: string, avatar: { src: string, alt: string } }
+  subject: string
+  date: string
+  datetime: string
+  body: string
+}
+
+const mails: Mail[] = [{
+  id: 1,
+  unread: true,
+  from: { name: 'Alex Smith', email: 'alex.smith@example.com', avatar: { src: 'https://github.com/nuxt.png', alt: 'Alex Smith' } },
+  subject: 'Meeting Schedule: Project Update',
+  date: '14:32',
+  datetime: '10 Jul 14:32',
+  body: 'Hi there,\n\nJust a quick reminder that we have a meeting scheduled for tomorrow at 10 AM to discuss the latest project updates. Please come prepared with your progress reports.\n\nBest regards,\nAlex'
+}, {
+  id: 2,
+  unread: true,
+  from: { name: 'Jordan Brown', email: 'jordan.brown@example.com', avatar: { src: 'https://github.com/nuxtlabs.png', alt: 'Jordan Brown' } },
+  subject: 'Urgent: Server Maintenance Tonight',
+  date: '11:05',
+  datetime: '10 Jul 11:05',
+  body: 'Attention team,\n\nWe will be conducting server maintenance tonight from 11 PM to 2 AM. During this period, all services will be temporarily unavailable. We apologize for the inconvenience.\n\nIT Department'
+}, {
+  id: 3,
+  from: { name: 'Taylor Green', email: 'taylor.green@example.com', avatar: { src: 'https://github.com/nuxt-hub.png', alt: 'Taylor Green' } },
+  subject: 'Feedback Request: New Design Mockups',
+  date: '09 Jul',
+  datetime: '09 Jul 16:20',
+  body: 'Hello,\n\nWe value your opinion! Could you please take a moment to review the attached design mockups for the upcoming dashboard refresh? Your feedback would be greatly appreciated.\n\nThank you,\nTaylor'
+}, {
+  id: 4,
+  unread: true,
+  from: { name: 'Morgan White', email: 'morgan.white@example.com', avatar: { src: 'https://github.com/vitejs.png', alt: 'Morgan White' } },
+  subject: 'Invitation: Annual Company Retreat',
+  date: '08 Jul',
+  datetime: '08 Jul 10:12',
+  body: 'Dear colleague,\n\nYou are cordially invited to our annual company retreat on August 15th. It will be a great opportunity to unwind and connect with your peers outside the office.\n\nRSVP by July 25th.\n\nHR Team'
+}, {
+  id: 5,
+  from: { name: 'Casey Gray', email: 'casey.gray@example.com', avatar: { src: 'https://github.com/vuejs.png', alt: 'Casey Gray' } },
+  subject: 'Reminder: Submit Your Timesheets',
+  date: '07 Jul',
+  datetime: '07 Jul 08:45',
+  body: 'Hi all,\n\nThis is a friendly reminder to submit your timesheets by the end of the day Friday. Timely submission helps us process payroll without delays.\n\nThanks,\nCasey'
+}]
+
+const unreadCount = mails.filter(mail => mail.unread).length
+
+const mailTabItems = [{ label: 'All', value: 'all' }, { label: 'Unread', value: 'unread' }]
+const selectedMailTab = ref('all')
+
+const filteredMails = computed(() => {
+  return selectedMailTab.value === 'unread' ? mails.filter(mail => !!mail.unread) : mails
+})
+
+const selectedMail = ref<Mail | null>(mails[0]!)
+
+// Reset selected mail if it's not in the filtered mails
+watch(filteredMails, () => {
+  if (!filteredMails.value.find(mail => mail.id === selectedMail.value?.id)) {
+    selectedMail.value = filteredMails.value[0] ?? null
+  }
+})
+
+const mailDropdownItems: DropdownMenuItem[][] = [[
+  { label: 'Mark as unread', icon: 'i-lucide-check-circle' },
+  { label: 'Mark as important', icon: 'i-lucide-triangle-alert' }
+], [
+  { label: 'Star thread', icon: 'i-lucide-star' }
+]]
+
+const reply = ref('')
+
+// Customers — mirrors app/pages/customers.vue from the template.
+type Customer = {
+  id: number
+  name: string
+  username: string
+  email: string
+  location: string
+  status: 'subscribed' | 'unsubscribed' | 'bounced'
+  avatar: { src: string, alt: string }
+}
+
+const customers: Customer[] = [
+  { id: 1, name: 'Alex Smith', username: 'alexsmith', email: 'alex.smith@example.com', location: 'New York, USA', status: 'subscribed', avatar: { src: 'https://github.com/nuxt.png', alt: 'Alex Smith' } },
+  { id: 2, name: 'Jordan Brown', username: 'jordanbrown', email: 'jordan.brown@example.com', location: 'London, UK', status: 'unsubscribed', avatar: { src: 'https://github.com/nuxtlabs.png', alt: 'Jordan Brown' } },
+  { id: 3, name: 'Taylor Green', username: 'taylorgreen', email: 'taylor.green@example.com', location: 'Paris, France', status: 'bounced', avatar: { src: 'https://github.com/nuxt-hub.png', alt: 'Taylor Green' } },
+  { id: 4, name: 'Morgan White', username: 'morganwhite', email: 'morgan.white@example.com', location: 'Berlin, Germany', status: 'subscribed', avatar: { src: 'https://github.com/vitejs.png', alt: 'Morgan White' } },
+  { id: 5, name: 'Casey Gray', username: 'caseygray', email: 'casey.gray@example.com', location: 'Tokyo, Japan', status: 'subscribed', avatar: { src: 'https://github.com/vuejs.png', alt: 'Casey Gray' } },
+  { id: 6, name: 'Riley Davis', username: 'rileydavis', email: 'riley.davis@example.com', location: 'Sydney, Australia', status: 'subscribed', avatar: { src: 'https://github.com/unjs.png', alt: 'Riley Davis' } },
+  { id: 7, name: 'Jamie Johnson', username: 'jamiejohnson', email: 'jamie.johnson@example.com', location: 'Toronto, Canada', status: 'unsubscribed', avatar: { src: 'https://github.com/nitrojs.png', alt: 'Jamie Johnson' } },
+  { id: 8, name: 'Kelly Wilson', username: 'kellywilson', email: 'kelly.wilson@example.com', location: 'Madrid, Spain', status: 'subscribed', avatar: { src: 'https://github.com/vueuse.png', alt: 'Kelly Wilson' } }
+]
+
+const customerRowSelection = ref({ 1: true })
+const customerEmailFilter = ref('')
+const customerStatusFilter = ref('all')
+
+const displayedCustomers = computed(() => {
+  return customers.filter((customer) => {
+    if (customerStatusFilter.value !== 'all' && customer.status !== customerStatusFilter.value) {
+      return false
+    }
+    return customer.email.toLowerCase().includes(customerEmailFilter.value.toLowerCase())
+  })
+})
+
+const customerStatusItems = [
+  { label: 'All', value: 'all' },
+  { label: 'Subscribed', value: 'subscribed' },
+  { label: 'Unsubscribed', value: 'unsubscribed' },
+  { label: 'Bounced', value: 'bounced' }
+]
+
+const customerRowItems: DropdownMenuItem[] = [
+  { type: 'label', label: 'Actions' },
+  { label: 'Copy customer ID', icon: 'i-lucide-copy' },
+  { type: 'separator' },
+  { label: 'View customer details', icon: 'i-lucide-list' },
+  { type: 'separator' },
+  { label: 'Delete customer', icon: 'i-lucide-trash', color: 'error' }
+]
+
+const customerColumns: TableColumn<Customer>[] = [{
+  id: 'select',
+  header: ({ table }) => h(UCheckbox, {
+    'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
+    'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
+    'ariaLabel': 'Select all'
+  }),
+  cell: ({ row }) => h(UCheckbox, {
+    'modelValue': row.getIsSelected(),
+    'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
+    'ariaLabel': 'Select row'
+  })
+}, {
+  accessorKey: 'id',
+  header: 'ID'
+}, {
+  accessorKey: 'name',
+  header: 'Name',
+  cell: ({ row }) => {
+    return h('div', { class: 'flex items-center gap-3' }, [
+      h(UAvatar, { ...row.original.avatar, size: 'lg' }),
+      h('div', undefined, [
+        h('p', { class: 'font-medium text-highlighted' }, row.original.name),
+        h('p', undefined, `@${row.original.username}`)
+      ])
+    ])
+  }
+}, {
+  accessorKey: 'email',
+  header: 'Email'
+}, {
+  accessorKey: 'location',
+  header: 'Location'
+}, {
+  accessorKey: 'status',
+  header: 'Status',
+  cell: ({ row }) => {
+    const color = ({
+      subscribed: 'success' as const,
+      unsubscribed: 'error' as const,
+      bounced: 'warning' as const
+    })[row.original.status]
+
+    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.original.status)
+  }
+}, {
+  id: 'actions',
+  cell: () => {
+    return h('div', { class: 'text-right' }, h(
+      UDropdownMenu,
+      { content: { align: 'end' }, items: customerRowItems },
+      () => h(UButton, { icon: 'i-lucide-ellipsis-vertical', color: 'neutral', variant: 'ghost', class: 'ml-auto' })
+    ))
+  }
+}]
+
+// Settings — mirrors app/pages/settings.vue + settings/index.vue + settings/notifications.vue,
+// trimmed to two sections without zod/UForm validation.
+const settingsLinks = computed<NavigationMenuItem[][]>(() => [[{
+  label: 'General',
+  icon: 'i-lucide-user',
+  active: settingsSection.value === 'general',
+  onSelect: () => { settingsSection.value = 'general' }
+}, {
+  label: 'Notifications',
+  icon: 'i-lucide-bell',
+  active: settingsSection.value === 'notifications',
+  onSelect: () => { settingsSection.value = 'notifications' }
+}]])
+
+const profile = reactive({
+  name: 'Benjamin Canac',
+  email: 'ben@nuxtlabs.com',
+  username: 'benjamincanac',
+  bio: ''
+})
+
+const profileFields = [
+  { name: 'name', label: 'Name', description: 'Will appear on receipts, invoices, and other communication.' },
+  { name: 'email', label: 'Email', description: 'Used to sign in, for email receipts and product updates.' },
+  { name: 'username', label: 'Username', description: 'Your unique username for logging in and your profile URL.' }
+] as const
+
+const notificationsState = reactive<{ [key: string]: boolean }>({
+  email: true,
+  desktop: false,
+  weekly_digest: false,
+  product_updates: true
+})
+
+const notificationSections = [{
+  title: 'Notification channels',
+  description: 'Where can we notify you?',
+  fields: [
+    { name: 'email', label: 'Email', description: 'Receive a daily email digest.' },
+    { name: 'desktop', label: 'Desktop', description: 'Receive desktop notifications.' }
+  ]
+}, {
+  title: 'Account updates',
+  description: 'Receive updates about Nuxt UI.',
+  fields: [
+    { name: 'weekly_digest', label: 'Weekly digest', description: 'Receive a weekly digest of news.' },
+    { name: 'product_updates', label: 'Product updates', description: 'Receive a monthly email with all new features and updates.' }
+  ]
+}]
+
+const customerPage = ref(1)
+
+watch([customerEmailFilter, customerStatusFilter], () => {
+  customerPage.value = 1
+})
+
+const paginatedCustomers = computed(() => {
+  return displayedCustomers.value.slice((customerPage.value - 1) * 5, customerPage.value * 5)
+})
+
+const selectedCustomersCount = computed(() => {
+  return Object.values(customerRowSelection.value).filter(Boolean).length
+})
+
+const pageTitles: Record<Page, string> = {
+  home: 'Home',
+  inbox: 'Inbox',
+  customers: 'Customers',
+  settings: 'Settings'
+}
 </script>
 
 <template>
@@ -230,9 +510,157 @@ const salesColumns: TableColumn<Sale>[] = [{
       </template>
     </UDashboardSidebar>
 
-    <UDashboardPanel :ui="{ root: 'min-h-0' }">
+    <!-- Inbox replicates the template's split list / mail panes, so it swaps the whole panel. -->
+    <template v-if="page === 'inbox'">
+      <UDashboardPanel
+        id="theme-studio-inbox-list"
+        resizable
+        :default-size="35"
+        :min-size="25"
+        :max-size="45"
+        :ui="{ root: 'min-h-0' }"
+      >
+        <UDashboardNavbar title="Inbox">
+          <template #leading>
+            <UDashboardSidebarCollapse />
+          </template>
+          <template #trailing>
+            <UBadge :label="String(filteredMails.length)" variant="subtle" />
+          </template>
+
+          <template #right>
+            <UTabs
+              v-model="selectedMailTab"
+              :items="mailTabItems"
+              :content="false"
+              size="xs"
+            />
+          </template>
+        </UDashboardNavbar>
+
+        <div class="overflow-y-auto divide-y divide-default">
+          <div v-for="mail in filteredMails" :key="mail.id">
+            <div
+              class="p-4 sm:px-6 text-sm cursor-pointer border-l-2 transition-colors"
+              :class="[
+                mail.unread ? 'text-highlighted' : 'text-toned',
+                selectedMail && selectedMail.id === mail.id
+                  ? 'border-primary bg-primary/10'
+                  : 'border-bg hover:border-primary hover:bg-primary/5'
+              ]"
+              @click="selectedMail = mail"
+            >
+              <div class="flex items-center justify-between" :class="[mail.unread && 'font-semibold']">
+                <div class="flex items-center gap-3">
+                  {{ mail.from.name }}
+
+                  <UChip v-if="mail.unread" />
+                </div>
+
+                <span>{{ mail.date }}</span>
+              </div>
+              <p class="truncate" :class="[mail.unread && 'font-semibold']">
+                {{ mail.subject }}
+              </p>
+              <p class="text-dimmed line-clamp-1">
+                {{ mail.body }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </UDashboardPanel>
+
+      <UDashboardPanel v-if="selectedMail" id="theme-studio-inbox-mail" :ui="{ root: 'min-h-0' }">
+        <UDashboardNavbar :title="selectedMail.subject" :toggle="false">
+          <template #leading>
+            <UButton
+              icon="i-lucide-x"
+              color="neutral"
+              variant="ghost"
+              class="-ms-1.5"
+              @click="selectedMail = null"
+            />
+          </template>
+
+          <template #right>
+            <UTooltip text="Archive">
+              <UButton icon="i-lucide-inbox" color="neutral" variant="ghost" />
+            </UTooltip>
+
+            <UTooltip text="Reply">
+              <UButton icon="i-lucide-reply" color="neutral" variant="ghost" />
+            </UTooltip>
+
+            <UDropdownMenu :items="mailDropdownItems">
+              <UButton icon="i-lucide-ellipsis-vertical" color="neutral" variant="ghost" />
+            </UDropdownMenu>
+          </template>
+        </UDashboardNavbar>
+
+        <div class="flex flex-col sm:flex-row justify-between gap-1 p-4 sm:px-6 border-b border-default">
+          <div class="flex items-start gap-4 sm:my-1.5">
+            <UAvatar v-bind="selectedMail.from.avatar" size="3xl" />
+
+            <div class="min-w-0">
+              <p class="font-semibold text-highlighted">
+                {{ selectedMail.from.name }}
+              </p>
+              <p class="text-muted">
+                {{ selectedMail.from.email }}
+              </p>
+            </div>
+          </div>
+
+          <p class="max-sm:pl-16 text-muted text-sm sm:mt-2">
+            {{ selectedMail.datetime }}
+          </p>
+        </div>
+
+        <div class="flex-1 p-4 sm:p-6 overflow-y-auto">
+          <p class="whitespace-pre-wrap">
+            {{ selectedMail.body }}
+          </p>
+        </div>
+
+        <div class="pb-4 px-4 sm:px-6 shrink-0">
+          <UCard variant="subtle" class="mt-auto" :ui="{ header: 'flex items-center gap-1.5 text-dimmed' }">
+            <template #header>
+              <UIcon name="i-lucide-reply" class="size-5" />
+
+              <span class="text-sm truncate">
+                Reply to {{ selectedMail.from.name }} ({{ selectedMail.from.email }})
+              </span>
+            </template>
+
+            <form @submit.prevent>
+              <UTextarea
+                v-model="reply"
+                color="neutral"
+                variant="none"
+                autoresize
+                placeholder="Write your reply..."
+                :rows="4"
+                class="w-full"
+                :ui="{ base: 'p-0 resize-none' }"
+              />
+
+              <div class="flex items-center justify-between">
+                <UButton color="neutral" variant="ghost" icon="i-lucide-paperclip" aria-label="Attach file" />
+
+                <UButton type="submit" color="neutral" label="Send" icon="i-lucide-send" />
+              </div>
+            </form>
+          </UCard>
+        </div>
+      </UDashboardPanel>
+      <div v-else class="flex-1 hidden lg:flex items-center justify-center">
+        <UIcon name="i-lucide-inbox" class="size-32 text-dimmed" />
+      </div>
+    </template>
+
+    <UDashboardPanel v-else :ui="{ root: 'min-h-0' }">
       <template #header>
-        <UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
+        <UDashboardNavbar :title="pageTitles[page]" :ui="{ right: 'gap-3' }">
           <template #leading>
             <UDashboardSidebarCollapse />
           </template>
@@ -246,13 +674,18 @@ const salesColumns: TableColumn<Sale>[] = [{
               </UButton>
             </UTooltip>
 
-            <UDropdownMenu :items="newItems">
+            <UButton
+              v-if="page === 'customers'"
+              label="New customer"
+              icon="i-lucide-plus"
+            />
+            <UDropdownMenu v-else :items="newItems">
               <UButton icon="i-lucide-plus" class="rounded-full" aria-label="New" />
             </UDropdownMenu>
           </template>
         </UDashboardNavbar>
 
-        <UDashboardToolbar>
+        <UDashboardToolbar v-if="page === 'home'">
           <template #left>
             <UButton
               color="neutral"
@@ -265,6 +698,10 @@ const salesColumns: TableColumn<Sale>[] = [{
             <USelect v-model="period" :items="periodItems" class="w-28" />
           </template>
         </UDashboardToolbar>
+
+        <UDashboardToolbar v-else-if="page === 'settings'">
+          <UNavigationMenu :items="settingsLinks" highlight class="-mx-1 flex-1" />
+        </UDashboardToolbar>
       </template>
 
       <template #body>
@@ -272,77 +709,201 @@ const salesColumns: TableColumn<Sale>[] = [{
              two-up until xl, and the joined-border look only when four fit. -->
         <!-- shrink-0 everywhere: the panel body is a scrollable flex column,
              and a shrinking child gets crushed into its own overflow-hidden -->
-        <UPageGrid class="shrink-0 grid-cols-2 xl:grid-cols-4 gap-4 xl:gap-[var(--studio-border-width,1px)]">
-          <UPageCard
-            v-for="stat in stats"
-            :key="stat.title"
-            :icon="stat.icon"
-            :title="stat.title"
+        <template v-if="page === 'home'">
+          <UPageGrid class="shrink-0 grid-cols-2 xl:grid-cols-4 gap-4 xl:gap-[var(--studio-border-width,1px)]">
+            <UPageCard
+              v-for="stat in stats"
+              :key="stat.title"
+              :icon="stat.icon"
+              :title="stat.title"
+              :ui="{
+                container: 'gap-y-1.5',
+                wrapper: 'items-start',
+                leading: 'p-2.5 rounded-full bg-primary/10 ring ring-inset ring-primary/25 flex-col',
+                title: 'font-normal text-muted text-xs uppercase'
+              }"
+              class="xl:rounded-none xl:first:rounded-l-lg xl:last:rounded-r-lg hover:z-1"
+            >
+              <div class="flex items-center gap-2 flex-wrap min-w-0">
+                <span class="text-2xl font-semibold text-highlighted">
+                  {{ stat.value }}
+                </span>
+
+                <UBadge :color="stat.variation > 0 ? 'success' : 'error'" class="text-xs">
+                  {{ stat.variation > 0 ? '+' : '' }}{{ stat.variation }}%
+                </UBadge>
+              </div>
+            </UPageCard>
+          </UPageGrid>
+
+          <UCard class="shrink-0" :ui="{ body: 'px-0! pt-0! pb-3!' }">
+            <template #header>
+              <div>
+                <p class="text-xs text-muted uppercase mb-1.5">
+                  Revenue
+                </p>
+                <p class="text-3xl text-highlighted font-semibold">
+                  {{ revenueTotal }}
+                </p>
+              </div>
+            </template>
+
+            <svg
+              viewBox="0 0 400 120"
+              preserveAspectRatio="none"
+              class="w-full h-40 text-primary"
+              aria-hidden="true"
+            >
+              <polygon :points="chartArea" fill="currentColor" class="opacity-10" />
+              <polyline
+                :points="chartPoints"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                vector-effect="non-scaling-stroke"
+              />
+            </svg>
+
+            <div class="flex items-center justify-between px-4 sm:px-6 pt-2 text-xs text-dimmed">
+              <span v-for="tick in chartTicks" :key="tick">{{ tick }}</span>
+            </div>
+          </UCard>
+
+          <UTable
+            :data="sales"
+            :columns="salesColumns"
+            class="shrink-0"
             :ui="{
-              container: 'gap-y-1.5',
-              wrapper: 'items-start',
-              leading: 'p-2.5 rounded-full bg-primary/10 ring ring-inset ring-primary/25 flex-col',
-              title: 'font-normal text-muted text-xs uppercase'
+              base: 'table-fixed border-separate border-spacing-0',
+              thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
+              tbody: '[&>tr]:last:[&>td]:border-b-0',
+              th: 'first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l-[length:var(--studio-border-width,1px)] last:border-r-[length:var(--studio-border-width,1px)]',
+              td: 'border-b border-default'
             }"
-            class="xl:rounded-none xl:first:rounded-l-lg xl:last:rounded-r-lg hover:z-1"
-          >
-            <div class="flex items-center gap-2 flex-wrap min-w-0">
-              <span class="text-2xl font-semibold text-highlighted">
-                {{ stat.value }}
-              </span>
+          />
+        </template>
+
+        <template v-else-if="page === 'customers'">
+          <div class="flex flex-wrap items-center justify-between gap-1.5 shrink-0">
+            <UInput
+              v-model="customerEmailFilter"
+              class="max-w-sm"
+              icon="i-lucide-search"
+              placeholder="Filter emails..."
+            />
+
+            <div class="flex flex-wrap items-center gap-1.5">
+              <UButton
+                v-if="selectedCustomersCount"
+                label="Delete"
+                color="error"
+                variant="subtle"
+                icon="i-lucide-trash"
+              >
+                <template #trailing>
+                  <UKbd>{{ selectedCustomersCount }}</UKbd>
+                </template>
+              </UButton>
 
-              <UBadge :color="stat.variation > 0 ? 'success' : 'error'" class="text-xs">
-                {{ stat.variation > 0 ? '+' : '' }}{{ stat.variation }}%
-              </UBadge>
+              <USelect
+                v-model="customerStatusFilter"
+                :items="customerStatusItems"
+                :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+                placeholder="Filter status"
+                class="min-w-28"
+              />
             </div>
-          </UPageCard>
-        </UPageGrid>
-
-        <UCard class="shrink-0" :ui="{ body: 'px-0! pt-0! pb-3!' }">
-          <template #header>
-            <div>
-              <p class="text-xs text-muted uppercase mb-1.5">
-                Revenue
-              </p>
-              <p class="text-3xl text-highlighted font-semibold">
-                {{ revenueTotal }}
-              </p>
+          </div>
+
+          <UTable
+            v-model:row-selection="customerRowSelection"
+            :data="paginatedCustomers"
+            :columns="customerColumns"
+            class="shrink-0"
+            :ui="{
+              base: 'table-fixed border-separate border-spacing-0',
+              thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
+              tbody: '[&>tr]:last:[&>td]:border-b-0',
+              th: 'py-2 first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l-[length:var(--studio-border-width,1px)] last:border-r-[length:var(--studio-border-width,1px)]',
+              td: 'border-b border-default'
+            }"
+          />
+
+          <div class="flex items-center justify-between gap-3 border-t border-default pt-4 mt-auto shrink-0">
+            <div class="text-sm text-muted">
+              {{ selectedCustomersCount }} of {{ displayedCustomers.length }} row(s) selected.
             </div>
-          </template>
 
-          <svg
-            viewBox="0 0 400 120"
-            preserveAspectRatio="none"
-            class="w-full h-40 text-primary"
-            aria-hidden="true"
-          >
-            <polygon :points="chartArea" fill="currentColor" class="opacity-10" />
-            <polyline
-              :points="chartPoints"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-              vector-effect="non-scaling-stroke"
+            <UPagination
+              v-model:page="customerPage"
+              :items-per-page="5"
+              :total="displayedCustomers.length"
             />
-          </svg>
-
-          <div class="flex items-center justify-between px-4 sm:px-6 pt-2 text-xs text-dimmed">
-            <span v-for="tick in chartTicks" :key="tick">{{ tick }}</span>
           </div>
-        </UCard>
-
-        <UTable
-          :data="sales"
-          :columns="salesColumns"
-          class="shrink-0"
-          :ui="{
-            base: 'table-fixed border-separate border-spacing-0',
-            thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
-            tbody: '[&>tr]:last:[&>td]:border-b-0',
-            th: 'first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l-[length:var(--studio-border-width,1px)] last:border-r-[length:var(--studio-border-width,1px)]',
-            td: 'border-b border-default'
-          }"
-        />
+        </template>
+
+        <div v-else-if="page === 'settings'" class="flex flex-col gap-4 sm:gap-6 w-full lg:max-w-2xl mx-auto shrink-0">
+          <template v-if="settingsSection === 'general'">
+            <UPageCard
+              title="Profile"
+              description="These informations will be displayed publicly."
+              variant="naked"
+              orientation="horizontal"
+            >
+              <UButton label="Save changes" color="neutral" class="w-fit lg:ms-auto" />
+            </UPageCard>
+
+            <UPageCard variant="subtle">
+              <template v-for="(field, index) in profileFields" :key="field.name">
+                <USeparator v-if="index > 0" />
+
+                <UFormField
+                  :name="field.name"
+                  :label="field.label"
+                  :description="field.description"
+                  required
+                  class="flex max-sm:flex-col justify-between items-start gap-4"
+                >
+                  <UInput v-model="profile[field.name]" autocomplete="off" />
+                </UFormField>
+              </template>
+              <USeparator />
+              <UFormField
+                name="bio"
+                label="Bio"
+                description="Brief description for your profile."
+                class="flex max-sm:flex-col justify-between items-start gap-4"
+                :ui="{ container: 'w-full' }"
+              >
+                <UTextarea v-model="profile.bio" :rows="4" autoresize class="w-full" />
+              </UFormField>
+            </UPageCard>
+          </template>
+
+          <template v-else>
+            <div v-for="(section, index) in notificationSections" :key="index">
+              <UPageCard
+                :title="section.title"
+                :description="section.description"
+                variant="naked"
+                class="mb-4"
+              />
+
+              <UPageCard variant="subtle" :ui="{ container: 'divide-y divide-default' }">
+                <UFormField
+                  v-for="field in section.fields"
+                  :key="field.name"
+                  :name="field.name"
+                  :label="field.label"
+                  :description="field.description"
+                  class="flex items-center justify-between not-last:pb-4 gap-2"
+                >
+                  <USwitch v-model="notificationsState[field.name]" />
+                </UFormField>
+              </UPageCard>
+            </div>
+          </template>
+        </div>
       </template>
     </UDashboardPanel>
   </UDashboardGroup>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewDocs.vue b/docs/app/components/theme-studio/ThemeStudioViewDocs.vue
new file mode 100644
index 0000000000..a7d8aa8eaf
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioViewDocs.vue
@@ -0,0 +1,319 @@
+<script setup lang="ts">
+import type { DropdownMenuItem, NavigationMenuItem, PageLink } from '@nuxt/ui'
+
+// Left aside: the template renders UContentNavigation from @nuxt/content —
+// content-coupled, so the same tree is faked with a vertical UNavigationMenu.
+const navLinks: NavigationMenuItem[] = [{
+  label: 'Getting Started',
+  type: 'trigger',
+  defaultOpen: true,
+  children: [
+    { label: 'Introduction', icon: 'i-lucide-house' },
+    { label: 'Installation', icon: 'i-lucide-download' },
+    { label: 'Usage', icon: 'i-lucide-sliders', active: true }
+  ]
+}, {
+  label: 'Essentials',
+  type: 'trigger',
+  defaultOpen: true,
+  children: [
+    { label: 'Markdown Syntax', icon: 'i-lucide-heading' },
+    { label: 'Code Blocks', icon: 'i-lucide-code' },
+    { label: 'Prose Components', icon: 'i-lucide-component' },
+    { label: 'Images & Embeds', icon: 'i-lucide-image' }
+  ]
+}, {
+  label: 'AI',
+  type: 'trigger',
+  defaultOpen: true,
+  children: [
+    { label: 'MCP Server', icon: 'i-lucide-bot' },
+    { label: 'LLMs.txt', icon: 'i-lucide-file-text' }
+  ]
+}]
+
+// PageHeaderLinks dropdown, minus the real clipboard / external navigations.
+const copyItems: DropdownMenuItem[] = [
+  { label: 'Copy Markdown link', icon: 'i-lucide-link' },
+  { label: 'View as Markdown', icon: 'i-simple-icons:markdown' },
+  { label: 'Open in ChatGPT', icon: 'i-simple-icons:openai' },
+  { label: 'Open in Claude', icon: 'i-simple-icons:anthropic' }
+]
+
+// Right column: UContentToc is content-coupled and router-driven, so the
+// same sticky layout is hand-rolled with faked active states.
+const tocLinks = [
+  { label: 'Writing content', active: true },
+  {
+    label: 'App Configuration',
+    children: [
+      { label: 'Header' },
+      { label: 'Footer' },
+      { label: 'Table of contents' }
+    ]
+  }
+]
+
+const communityLinks: PageLink[] = [
+  { label: 'Edit this page', icon: 'i-lucide-external-link' },
+  { label: 'Star on GitHub', icon: 'i-lucide-star' },
+  { label: 'Releases', icon: 'i-lucide-rocket' }
+]
+
+const frontmatterFields = [
+  { key: 'title', type: 'string', description: 'Page title, shown in the header and navigation' },
+  { key: 'description', type: 'string', description: 'Page description, shown below the title' },
+  { key: 'navigation.icon', type: 'string', description: 'Icon displayed next to the link in the aside' }
+]
+
+const appConfigCode = `export default defineAppConfig({
+  header: {
+    title: 'Docs',
+    to: '/',
+    // Show or hide the search bar
+    search: true,
+    // Show or hide the color mode button
+    colorMode: true,
+    links: [{
+      'icon': 'i-simple-icons-github',
+      'to': 'https://github.com/nuxt-ui-templates/docs',
+      'target': '_blank',
+      'aria-label': 'GitHub'
+    }]
+  }
+})`
+</script>
+
+<template>
+  <!-- The pane is the scroll container, so the header and asides stick to it. -->
+  <div class="h-full overflow-y-auto bg-default">
+    <UHeader :toggle="false" class="rounded-t-[inherit]" :ui="{ center: 'flex-1' }">
+      <template #left>
+        <div class="flex items-center gap-1.5">
+          <UIcon name="i-lucide-book-open" class="size-6 text-primary shrink-0" />
+          <span class="text-xl font-bold text-highlighted">Docs</span>
+        </div>
+      </template>
+
+      <!-- UContentSearchButton opens the content search modal: fake the expanded look. -->
+      <UButton
+        icon="i-lucide-search"
+        label="Search documentation..."
+        color="neutral"
+        variant="outline"
+        class="w-full"
+        :ui="{ base: 'text-dimmed hover:text-default font-normal', leadingIcon: 'size-4' }"
+      >
+        <template #trailing>
+          <div class="ms-auto hidden lg:flex items-center gap-0.5">
+            <UKbd value="meta" />
+            <UKbd value="K" />
+          </div>
+        </template>
+      </UButton>
+
+      <template #right>
+        <UButton icon="i-lucide-sun-moon" aria-label="Color mode" color="neutral" variant="ghost" />
+        <UButton icon="i-simple-icons-github" aria-label="GitHub" color="neutral" variant="ghost" />
+      </template>
+    </UHeader>
+
+    <UContainer>
+      <UPage>
+        <template #left>
+          <UPageAside>
+            <UNavigationMenu
+              :items="navLinks"
+              orientation="vertical"
+              highlight
+              :ui="{ linkTrailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+            />
+          </UPageAside>
+        </template>
+
+        <UPage>
+          <UPageHeader
+            headline="Getting Started"
+            title="Usage"
+            description="Learn how to write and customize your documentation."
+          >
+            <template #links>
+              <UFieldGroup>
+                <UButton
+                  label="Copy page"
+                  icon="i-lucide-copy"
+                  color="neutral"
+                  variant="outline"
+                  :ui="{ leadingIcon: 'text-neutral size-3.5' }"
+                />
+                <UDropdownMenu
+                  :items="copyItems"
+                  :content="{ align: 'end', side: 'bottom', sideOffset: 8 }"
+                  :ui="{ content: 'w-48' }"
+                >
+                  <UButton
+                    icon="i-lucide-chevron-down"
+                    size="sm"
+                    color="neutral"
+                    variant="outline"
+                    aria-label="Open copy actions menu"
+                  />
+                </UDropdownMenu>
+              </UFieldGroup>
+            </template>
+          </UPageHeader>
+
+          <UPageBody>
+            <ProseP>
+              This is only a basic example of what you can achieve with
+              <span class="text-primary font-medium border-b border-transparent hover:border-primary cursor-pointer">Nuxt UI</span>,
+              you can tweak it to match your needs. The template uses several Nuxt modules underneath like
+              <ProseCode>@nuxt/content</ProseCode> for the content and <ProseCode>nuxt-og-image</ProseCode>
+              for social previews.
+            </ProseP>
+
+            <ProseTip>
+              Learn more on how to take the most out of Nuxt UI!
+            </ProseTip>
+
+            <ProseH2>
+              Writing content
+            </ProseH2>
+
+            <ProseP>
+              You can just start writing <ProseCode>.md</ProseCode> or <ProseCode>.yml</ProseCode> files in the
+              <ProseCode>content/</ProseCode> directory to have your pages updated. The navigation will be
+              automatically generated in the left aside and in the mobile menu. You will also be able to go
+              through your content with full-text search.
+            </ProseP>
+
+            <ProseP>
+              Each page supports a few frontmatter fields to customize how it appears:
+            </ProseP>
+
+            <ProseTable>
+              <ProseThead>
+                <ProseTr>
+                  <ProseTh>Key</ProseTh>
+                  <ProseTh>Type</ProseTh>
+                  <ProseTh>Description</ProseTh>
+                </ProseTr>
+              </ProseThead>
+              <ProseTbody>
+                <ProseTr v-for="field in frontmatterFields" :key="field.key">
+                  <ProseTd>
+                    <ProseCode>{{ field.key }}</ProseCode>
+                  </ProseTd>
+                  <ProseTd>
+                    <ProseCode>{{ field.type }}</ProseCode>
+                  </ProseTd>
+                  <ProseTd>{{ field.description }}</ProseTd>
+                </ProseTr>
+              </ProseTbody>
+            </ProseTable>
+
+            <ProseH2>
+              App Configuration
+            </ProseH2>
+
+            <ProseP>
+              In addition to <ProseCode>@nuxt/ui</ProseCode> configuration through the
+              <ProseCode>app.config.ts</ProseCode>, this template lets you customize the
+              <ProseCode>Header</ProseCode>, <ProseCode>Footer</ProseCode> and the
+              <ProseCode>Table of contents</ProseCode> components.
+            </ProseP>
+
+            <ProseH3>
+              Header
+            </ProseH3>
+
+            <ProsePre filename="app.config.ts" icon="i-lucide-settings" :code="appConfigCode">
+              {{ appConfigCode }}
+            </ProsePre>
+
+            <ProseH3>
+              Footer
+            </ProseH3>
+
+            <ProseP>
+              The footer follows the same pattern: update the bottom left credits, toggle the color mode
+              button and customize the social links, all from a single object in your app config.
+            </ProseP>
+
+            <USeparator />
+
+            <!-- UContentSurround is content-coupled: same prev/next look with a UPageCard pair. -->
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
+              <UPageCard
+                icon="i-lucide-arrow-left"
+                title="Installation"
+                description="Get started with the documentation template in a few steps."
+                variant="outline"
+                :ui="{ leadingIcon: 'text-muted group-hover:text-primary transition-colors' }"
+              />
+              <UPageCard
+                icon="i-lucide-arrow-right"
+                title="Markdown Syntax"
+                description="Headings, lists, links and everything Markdown supports."
+                variant="outline"
+                class="text-right"
+                :ui="{ wrapper: 'items-end', leadingIcon: 'text-muted group-hover:text-primary transition-colors' }"
+              />
+            </div>
+          </UPageBody>
+
+          <template #right>
+            <div class="hidden lg:flex flex-col gap-6 sticky top-(--ui-header-height) py-8">
+              <div>
+                <p class="text-sm font-semibold text-highlighted mb-1.5">
+                  Table of Contents
+                </p>
+
+                <ul class="min-w-0">
+                  <li v-for="link in tocLinks" :key="link.label" class="min-w-0">
+                    <button
+                      type="button"
+                      class="w-full text-start text-sm py-1 truncate transition-colors"
+                      :class="link.active ? 'text-primary' : 'text-muted hover:text-default'"
+                    >
+                      {{ link.label }}
+                    </button>
+
+                    <ul v-if="link.children" class="ms-3 min-w-0">
+                      <li v-for="child in link.children" :key="child.label" class="min-w-0">
+                        <button
+                          type="button"
+                          class="w-full text-start text-sm py-1 truncate text-muted hover:text-default transition-colors"
+                        >
+                          {{ child.label }}
+                        </button>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </div>
+
+              <USeparator type="dashed" />
+
+              <UPageLinks title="Community" :links="communityLinks" />
+            </div>
+          </template>
+        </UPage>
+      </UPage>
+    </UContainer>
+
+    <UFooter>
+      <template #left>
+        <p class="text-sm text-muted">
+          Built with Nuxt UI • © 2026
+        </p>
+      </template>
+
+      <template #right>
+        <UButton icon="i-simple-icons-discord" aria-label="Discord" color="neutral" variant="ghost" />
+        <UButton icon="i-simple-icons-x" aria-label="X" color="neutral" variant="ghost" />
+        <UButton icon="i-simple-icons-github" aria-label="GitHub" color="neutral" variant="ghost" />
+      </template>
+    </UFooter>
+  </div>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewEditor.vue b/docs/app/components/theme-studio/ThemeStudioViewEditor.vue
new file mode 100644
index 0000000000..d3ac780a1c
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioViewEditor.vue
@@ -0,0 +1,301 @@
+<script setup lang="ts">
+import type { DropdownMenuItem, EditorSuggestionMenuItem, EditorToolbarItem } from '@nuxt/ui'
+import type { Editor, JSONContent } from '@tiptap/vue-3'
+import { upperFirst } from 'scule'
+import { mapEditorItems } from '@nuxt/ui/utils/editor'
+
+/**
+ * Self-contained replica of the official Nuxt UI Editor template
+ * (github.com/nuxt-ui-templates/editor): header chrome with a fixed
+ * toolbar, a bubble toolbar on selection, slash commands and a drag
+ * handle over a markdown document. Collaboration, AI completions,
+ * image upload, tables and task lists are omitted — they need server
+ * routes or extensions the docs app doesn't ship.
+ */
+
+const content = ref(`# Nuxt Editor Template
+
+A Notion-like WYSIWYG editor built with [Vue](https://vuejs.org/) & [Nuxt](https://nuxt.com/) — and themed live by this studio.
+
+> Select some text to reveal the bubble toolbar, or type \`/\` on an empty line for quick commands.
+
+---
+
+## Rich Text Editing
+
+Full formatting support with **bold**, *italic*, <u>underline</u>, ~~strikethrough~~, and \`inline code\`.
+
+### Lists
+
+1. Numbered lists for sequential items
+2. With automatic numbering
+
+- Bullet lists work too
+  - With nested items
+  - At multiple levels
+
+### Code Blocks
+
+\`\`\`vue
+<template>
+  <UEditor v-slot="{ editor }" v-model="value" content-type="markdown">
+    <UEditorToolbar :editor="editor" :items="items" />
+  </UEditor>
+</template>
+\`\`\`
+
+## Features
+
+### Bubble & Fixed Toolbars
+
+Select text to see the bubble toolbar with formatting options. The fixed toolbar at the top provides quick access to common actions.
+
+### Drag Handle
+
+Use the drag handle on the left side of any block to reorder, duplicate, delete, or convert between block types.
+
+### Slash Commands
+
+Type \`/\` anywhere to access quick insertion commands for headings, lists, code blocks and more.
+
+---
+
+Every heading, quote and code block above is styled by the semantic tokens you are editing right now.
+`)
+
+const headingItems = [1, 2, 3, 4].map(level => ({
+  kind: 'heading' as const,
+  level,
+  label: `Heading ${level}`,
+  icon: `i-lucide-heading-${level}`
+}))
+
+const blockItems = [{
+  kind: 'bulletList' as const,
+  label: 'Bullet List',
+  icon: 'i-lucide-list'
+}, {
+  kind: 'orderedList' as const,
+  label: 'Ordered List',
+  icon: 'i-lucide-list-ordered'
+}, {
+  kind: 'blockquote' as const,
+  label: 'Blockquote',
+  icon: 'i-lucide-text-quote'
+}, {
+  kind: 'codeBlock' as const,
+  label: 'Code Block',
+  icon: 'i-lucide-square-code'
+}]
+
+const markItems = [{
+  kind: 'mark' as const,
+  mark: 'bold' as const,
+  icon: 'i-lucide-bold',
+  tooltip: { text: 'Bold' }
+}, {
+  kind: 'mark' as const,
+  mark: 'italic' as const,
+  icon: 'i-lucide-italic',
+  tooltip: { text: 'Italic' }
+}, {
+  kind: 'mark' as const,
+  mark: 'underline' as const,
+  icon: 'i-lucide-underline',
+  tooltip: { text: 'Underline' }
+}, {
+  kind: 'mark' as const,
+  mark: 'strike' as const,
+  icon: 'i-lucide-strikethrough',
+  tooltip: { text: 'Strikethrough' }
+}, {
+  kind: 'mark' as const,
+  mark: 'code' as const,
+  icon: 'i-lucide-code',
+  tooltip: { text: 'Code' }
+}]
+
+const toolbarItems: EditorToolbarItem[][] = [[{
+  kind: 'undo',
+  icon: 'i-lucide-undo',
+  tooltip: { text: 'Undo' }
+}, {
+  kind: 'redo',
+  icon: 'i-lucide-redo',
+  tooltip: { text: 'Redo' }
+}], [{
+  icon: 'i-lucide-heading',
+  tooltip: { text: 'Headings' },
+  content: { align: 'start' },
+  items: headingItems
+}, ...blockItems.map(({ label, ...item }) => ({ ...item, tooltip: { text: label } }))], markItems]
+
+const bubbleToolbarItems: EditorToolbarItem[][] = [[{
+  label: 'Turn into',
+  trailingIcon: 'i-lucide-chevron-down',
+  activeColor: 'neutral',
+  activeVariant: 'ghost',
+  tooltip: { text: 'Turn into' },
+  content: { align: 'start' },
+  ui: { label: 'text-xs' },
+  items: [{
+    type: 'label',
+    label: 'Turn into'
+  }, {
+    kind: 'paragraph',
+    label: 'Paragraph',
+    icon: 'i-lucide-type'
+  }, ...headingItems, ...blockItems]
+}], markItems]
+
+const suggestionItems: EditorSuggestionMenuItem[][] = [[{
+  type: 'label',
+  label: 'Style'
+}, {
+  kind: 'paragraph',
+  label: 'Paragraph',
+  icon: 'i-lucide-type'
+}, ...headingItems, ...blockItems], [{
+  type: 'label',
+  label: 'Insert'
+}, {
+  kind: 'horizontalRule',
+  label: 'Horizontal Rule',
+  icon: 'i-lucide-separator-horizontal'
+}]]
+
+const selectedNode = ref<{ node: JSONContent, pos: number }>()
+
+function dragHandleItems(editor: Editor): DropdownMenuItem[][] {
+  if (!selectedNode.value?.node?.type) {
+    return []
+  }
+
+  const pos = selectedNode.value.pos
+
+  return mapEditorItems(editor, [[{
+    type: 'label',
+    label: upperFirst(selectedNode.value.node.type)
+  }, {
+    label: 'Turn into',
+    icon: 'i-lucide-repeat-2',
+    children: [{ kind: 'paragraph', label: 'Paragraph', icon: 'i-lucide-type' }, ...headingItems, ...blockItems]
+  }], [{
+    kind: 'duplicate',
+    pos,
+    label: 'Duplicate',
+    icon: 'i-lucide-copy'
+  }, {
+    kind: 'moveUp',
+    pos,
+    label: 'Move up',
+    icon: 'i-lucide-arrow-up'
+  }, {
+    kind: 'moveDown',
+    pos,
+    label: 'Move down',
+    icon: 'i-lucide-arrow-down'
+  }], [{
+    kind: 'delete',
+    pos,
+    label: 'Delete',
+    icon: 'i-lucide-trash'
+  }]]) as DropdownMenuItem[][]
+}
+</script>
+
+<template>
+  <div class="h-full overflow-y-auto bg-default">
+    <ClientOnly>
+      <UEditor
+        v-slot="{ editor, handlers }"
+        v-model="content"
+        content-type="markdown"
+        placeholder="Write, type '/' for commands..."
+        class="min-h-full"
+        :ui="{ base: 'p-4 sm:p-10', content: 'max-w-3xl mx-auto' }"
+      >
+        <header class="sticky top-0 z-10 h-14 flex items-center gap-2 border-b border-default bg-default/75 backdrop-blur px-4">
+          <div class="flex items-center gap-1.5 shrink-0">
+            <UIcon name="i-lucide-notebook-pen" class="size-5 text-primary" />
+            <span class="text-base font-bold text-highlighted hidden sm:inline">Editor</span>
+          </div>
+
+          <div class="flex-1 min-w-0 flex justify-end overflow-x-auto py-1">
+            <UEditorToolbar :editor="editor" :items="toolbarItems" />
+          </div>
+
+          <USeparator orientation="vertical" class="h-7 shrink-0" />
+
+          <div class="flex items-center gap-2 shrink-0">
+            <UAvatarGroup size="2xs">
+              <UAvatar alt="Anna Cooper" chip />
+              <UAvatar alt="Ben Rogers" chip />
+            </UAvatarGroup>
+
+            <UButton
+              label="Share"
+              icon="i-lucide-users"
+              color="neutral"
+              variant="outline"
+              size="sm"
+              class="hidden sm:inline-flex"
+            />
+          </div>
+        </header>
+
+        <UEditorToolbar
+          :editor="editor"
+          :items="bubbleToolbarItems"
+          layout="bubble"
+          :should-show="({ view, state }) => view.hasFocus() && !state.selection.empty"
+        />
+
+        <UEditorSuggestionMenu :editor="editor" :items="suggestionItems" />
+
+        <UEditorDragHandle v-slot="{ ui, onClick }" :editor="editor" @node-change="selectedNode = $event">
+          <UButton
+            icon="i-lucide-plus"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :class="ui.handle()"
+            @click="(e) => {
+              e.stopPropagation()
+              const selected = onClick()
+              handlers.suggestion?.execute(editor, { pos: selected?.pos }).run()
+            }"
+          />
+
+          <UDropdownMenu
+            v-slot="{ open }"
+            :modal="false"
+            :items="dragHandleItems(editor)"
+            :content="{ side: 'left' }"
+            :ui="{ content: 'w-48', label: 'text-xs' }"
+            @update:open="editor.chain().setMeta('lockDragHandle', $event).run()"
+          >
+            <UButton
+              color="neutral"
+              variant="ghost"
+              active-variant="soft"
+              size="sm"
+              icon="i-lucide-grip-vertical"
+              :active="open"
+              :class="ui.handle()"
+            />
+          </UDropdownMenu>
+        </UEditorDragHandle>
+      </UEditor>
+
+      <template #fallback>
+        <div class="p-4 sm:p-10 max-w-3xl mx-auto space-y-4">
+          <USkeleton class="h-8 w-2/3" />
+          <USkeleton class="h-4 w-full" />
+          <USkeleton class="h-4 w-5/6" />
+          <USkeleton class="h-4 w-3/4" />
+        </div>
+      </template>
+    </ClientOnly>
+  </div>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue b/docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue
new file mode 100644
index 0000000000..8829324db4
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue
@@ -0,0 +1,373 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+// Replicates the Nuxt UI Portfolio template home page: floating pill nav,
+// avatar hero with polaroid marquee, about + work experience columns,
+// blog list, testimonial carousel, FAQ tabs and footer.
+const navItems: NavigationMenuItem[] = [
+  { label: 'Home', icon: 'i-lucide-home', active: true },
+  { label: 'Projects', icon: 'i-lucide-folder' },
+  { label: 'Blog', icon: 'i-lucide-file-text' },
+  { label: 'Speaking', icon: 'i-lucide-mic' },
+  { label: 'About', icon: 'i-lucide-user' }
+]
+
+const socialLinks = [
+  { 'icon': 'i-simple-icons-discord', 'aria-label': 'Discord' },
+  { 'icon': 'i-simple-icons-x', 'aria-label': 'X' },
+  { 'icon': 'i-simple-icons-github', 'aria-label': 'GitHub' }
+]
+
+// The template scrolls travel photos in a marquee; we stand in gradient
+// polaroids since the studio previews stay image-free.
+const heroImages = [
+  { icon: 'i-lucide-mountain', label: 'Alps, 2024' },
+  { icon: 'i-lucide-coffee', label: 'Café sketching' },
+  { icon: 'i-lucide-bike', label: 'Canal ride' },
+  { icon: 'i-lucide-camera', label: 'Street photos' },
+  { icon: 'i-lucide-laptop', label: 'Studio desk' },
+  { icon: 'i-lucide-trees', label: 'Veluwe hike' },
+  { icon: 'i-lucide-palette', label: 'Color studies' },
+  { icon: 'i-lucide-ferris-wheel', label: 'Rotterdam fair' },
+  { icon: 'i-lucide-waves', label: 'North Sea' }
+]
+
+const about = {
+  title: 'About Me',
+  description: 'I\'m an English designer and front-end developer based in Amsterdam. I work across design systems, UX and the front-end that ships them - staying involved on both sides keeps the design and the implementation from drifting out of sync.'
+}
+
+const experience = [{
+  date: '2025 - Present',
+  position: 'Public Contributor at',
+  company: { name: 'Nuxt', logo: 'i-simple-icons-nuxtdotjs' }
+}, {
+  date: '2024 - Present',
+  position: 'Founder of',
+  company: { name: 'Lovd', logo: 'material-symbols:bookmark-heart' }
+}, {
+  date: '2019 - 2021',
+  position: 'Web Developer at',
+  company: { name: 'Blender', logo: 'i-simple-icons-blender' }
+}]
+
+const posts = [{
+  title: 'From Mockup to Market: My End-to-End Product Design Process',
+  description: 'A walkthrough of the iterative loop I run on every project, from the first research call to the final engineering handoff.',
+  date: 'Apr 23, 2025'
+}, {
+  title: 'The Psychology of Color in UI Design',
+  description: 'How deliberate color decisions steer attention, set tone and quietly shape the way people move through a product.',
+  date: 'Mar 15, 2025'
+}, {
+  title: 'How I Built My Design System from Scratch',
+  description: 'Auditing years of accumulated UI, distilling it into tokens and components, and the mistakes I would skip next time.',
+  date: 'Mar 5, 2025'
+}]
+
+const testimonials = [{
+  quote: 'Mike reshaped how our product feels end to end. He balances polished visuals with ruthless simplicity, and the redesign cut our support tickets by 40% while lifting conversion on every key flow.',
+  author: { name: 'Sarah Chen', description: 'Product Director at Bloom Finance' }
+}, {
+  quote: 'Bringing Mike in was the best call we made. He challenged our assumptions, ran real user research, and because he writes the front-end himself the handoff to engineering was completely painless.',
+  author: { name: 'Michael Rodriguez', description: 'Co-founder of Wavelength Music' }
+}, {
+  quote: 'Mike has a rare talent for turning dense sustainability data into interfaces people actually enjoy. EcoTrack changed how our users engage with their impact, and he got there with equal parts craft and rigor.',
+  author: { name: 'Dr. Aisha Johnson', description: 'Chief Innovation Officer at GreenTech Solutions' }
+}]
+
+const faqCategories = [{
+  label: 'Services & Process',
+  questions: [{
+    label: 'What services do you offer?',
+    content: 'Design systems, UX/UI design and front-end development - designed in Figma, built in Vue and Nuxt. I also cover the surrounding craft: branding, print, photography, video and animation.'
+  }, {
+    label: 'What is your design process like?',
+    content: 'Collaborative and iterative: discovery and research, ideation and prototyping, user testing, visual design, then close pairing with engineers during implementation. The shape flexes to fit each project.'
+  }, {
+    label: 'Do you work with startups?',
+    content: 'Absolutely. I enjoy shaping a product vision from the ground up and can adapt my process to a fast-moving startup cadence.'
+  }]
+}, {
+  label: 'Pricing & Timelines',
+  questions: [{
+    label: 'How much does a project typically cost?',
+    content: 'It depends on scope and complexity. Full design-and-build engagements usually start around €5,000, with most landing between €8,000 and €25,000. My consulting day rate is €700.'
+  }, {
+    label: 'What are your payment terms?',
+    content: 'A 40% deposit reserves the project slot, with the remaining 60% due on delivery. I accept bank transfer and Stripe.'
+  }, {
+    label: 'How long does a typical project take?',
+    content: 'Smaller projects run three to four weeks; larger builds range from two to four months. You get a detailed estimate after discovery.'
+  }]
+}, {
+  label: 'About Me',
+  questions: [{
+    label: 'What do you enjoy most about your work?',
+    content: 'Watching someone use a thing I built and find it genuinely effortless. Bridging user needs and technical constraints is the puzzle that keeps me here.'
+  }, {
+    label: 'What are your hobbies outside of work?',
+    content: 'Cycling the Dutch coast, film photography, hunting down good coffee in Amsterdam and contributing to open-source design tooling.'
+  }]
+}]
+
+// Template's Motion blur-in on the hero, replayed as staggered CSS transitions.
+const heroAppear = ref(false)
+let appearTimeout: ReturnType<typeof setTimeout> | undefined
+onMounted(() => {
+  appearTimeout = setTimeout(() => {
+    heroAppear.value = true
+  }, 0)
+})
+onUnmounted(() => clearTimeout(appearTimeout))
+</script>
+
+<template>
+  <!-- A mini portfolio: the pane is the scroll container, so the pill nav sticks to it. -->
+  <div class="h-full overflow-y-auto bg-default">
+    <!-- Template's AppHeader: a floating centered pill navigation. -->
+    <div class="sticky top-2 sm:top-4 z-10 flex justify-center pointer-events-none">
+      <UNavigationMenu
+        :items="navItems"
+        variant="link"
+        color="neutral"
+        class="pointer-events-auto bg-muted/80 backdrop-blur-sm rounded-full px-2 sm:px-4 border border-muted/50 shadow-lg shadow-neutral-950/5"
+        :ui="{
+          link: 'px-2 py-1',
+          linkLeadingIcon: 'hidden'
+        }"
+      >
+        <template #list-trailing>
+          <UButton
+            icon="i-lucide-sun-moon"
+            aria-label="Color mode"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+          />
+        </template>
+      </UNavigationMenu>
+    </div>
+
+    <UContainer class="max-w-4xl sm:border-x border-default -mt-12 pt-10">
+      <UPageHero
+        title="Hey, I'm Mike Newbon Design Engineer"
+        description="Based in Amsterdam, I craft intuitive digital products, where design meets fun-ctionality. Like this theme editor!"
+        :ui="{
+          container: 'py-18 sm:py-24 lg:py-32',
+          headline: 'flex items-center justify-center',
+          title: 'text-shadow-md max-w-lg mx-auto text-pretty text-3xl sm:text-4xl lg:text-5xl',
+          description: 'mt-2 text-md mx-auto max-w-2xl text-pretty sm:text-md text-muted',
+          links: 'mt-4 flex-col justify-center items-center'
+        }"
+      >
+        <template #headline>
+          <UAvatar
+            alt="Mike Newbon"
+            size="3xl"
+            src="https://github.com/mikenewbon.png"
+            class="size-18 ring ring-default ring-offset-3 ring-offset-bg transition-all duration-600"
+            :class="heroAppear ? 'opacity-100 blur-none scale-100' : 'opacity-0 blur-lg scale-110'"
+          />
+        </template>
+
+        <template #links>
+          <div class="flex items-center gap-2">
+            <UButton icon="i-lucide-github" label="View Github" color="neutral" to="https://github.com/mikenewbon/" target="_blank" />
+            <UButton color="success" variant="ghost" class="gap-2" label="Always online">
+              <template #leading>
+                <span class="relative flex size-2">
+                  <span class="absolute inline-flex size-full rounded-full opacity-75 bg-success animate-ping" />
+                  <span class="relative inline-flex size-2 scale-90 rounded-full bg-success" />
+                </span>
+              </template>
+            </UButton>
+          </div>
+
+          <div class="gap-x-4 inline-flex mt-4">
+            <UButton
+              v-for="(link, index) of socialLinks"
+              :key="index"
+              v-bind="{ size: 'md', color: 'neutral', variant: 'ghost', ...link }"
+            />
+          </div>
+        </template>
+
+        <UMarquee pause-on-hover class="py-2 -mx-8 sm:-mx-12 lg:-mx-16 [--duration:40s]">
+          <div
+            v-for="(img, index) in heroImages"
+            :key="index"
+            class="w-[234px] aspect-square shrink-0 rounded-lg overflow-hidden relative bg-elevated flex flex-col items-center justify-center gap-3"
+            :class="index % 2 === 0 ? '-rotate-2' : 'rotate-2'"
+          >
+            <div
+              class="absolute inset-0"
+              :style="{ background: `radial-gradient(ellipse at ${index % 2 === 0 ? '30% 20%' : '70% 80%'}, color-mix(in srgb, var(--ui-primary) ${12 + (index % 3) * 6}%, transparent), transparent 70%)` }"
+            />
+            <UIcon :name="img.icon" class="size-10 text-dimmed relative" />
+            <span class="text-xs text-muted font-medium relative">{{ img.label }}</span>
+          </div>
+        </UMarquee>
+      </UPageHero>
+
+      <!-- About + work experience share a two-column section on the template home. -->
+      <UPageSection :ui="{ container: 'pt-0! lg:grid lg:grid-cols-2 lg:gap-8' }">
+        <UPageSection
+          :title="about.title"
+          :description="about.description"
+          :ui="{
+            container: 'p-0!',
+            title: 'text-left text-xl sm:text-xl lg:text-2xl font-medium',
+            description: 'text-left mt-3 text-sm sm:text-md lg:text-sm text-muted'
+          }"
+        />
+
+        <UPageSection
+          title="Work Experience"
+          :ui="{
+            container: 'p-0! gap-4 sm:gap-4',
+            title: 'text-left text-xl sm:text-xl lg:text-2xl font-medium',
+            description: 'mt-2'
+          }"
+        >
+          <template #description>
+            <div class="flex flex-col gap-2">
+              <div
+                v-for="(item, index) in experience"
+                :key="index"
+                class="text-muted flex items-center text-nowrap gap-2"
+              >
+                <p class="text-sm">
+                  {{ item.date }}
+                </p>
+                <USeparator />
+                <span class="flex items-center gap-1">
+                  <span class="text-sm">{{ item.position }}</span>
+                  <span class="inline-flex items-center gap-1 text-highlighted">
+                    <span class="font-medium">{{ item.company.name }}</span>
+                    <UIcon :name="item.company.logo" />
+                  </span>
+                </span>
+              </div>
+            </div>
+          </template>
+        </UPageSection>
+      </UPageSection>
+
+      <UPageSection
+        title="Latest Articles"
+        description="Some of my recent thoughts"
+        :ui="{
+          container: 'px-0 pt-0! sm:gap-6 lg:gap-8',
+          title: 'text-left text-xl sm:text-xl lg:text-2xl font-medium',
+          description: 'text-left mt-2 text-sm sm:text-md lg:text-sm text-muted'
+        }"
+      >
+        <UBlogPosts orientation="vertical" class="gap-4 lg:gap-y-4">
+          <UBlogPost
+            v-for="(post, index) in posts"
+            :key="index"
+            orientation="horizontal"
+            variant="naked"
+            v-bind="post"
+            to="#"
+            :ui="{
+              root: 'group relative lg:items-start lg:flex ring-0 hover:ring-0',
+              body: 'px-0!',
+              header: 'hidden'
+            }"
+          >
+            <template #footer>
+              <UButton size="xs" variant="link" class="px-0 gap-0" label="Read Article">
+                <template #trailing>
+                  <UIcon
+                    name="i-lucide-arrow-right"
+                    class="size-4 text-primary transition-all opacity-0 group-hover:translate-x-1 group-hover:opacity-100"
+                  />
+                </template>
+              </UButton>
+            </template>
+          </UBlogPost>
+        </UBlogPosts>
+      </UPageSection>
+
+      <UPageSection :ui="{ container: 'px-0 pt-0!' }">
+        <UCarousel
+          v-slot="{ item }"
+          :items="testimonials"
+          :autoplay="{ delay: 4000 }"
+          loop
+          dots
+          :ui="{ viewport: '-mx-4 sm:-mx-12 lg:-mx-16 bg-elevated/50 max-w-(--ui-container)' }"
+        >
+          <UPageCTA
+            :description="item.quote"
+            variant="naked"
+            class="rounded-none"
+            :ui="{
+              container: 'sm:py-12 lg:py-12 sm:gap-8',
+              description: 'text-base! text-balance before:content-[open-quote] before:text-5xl lg:before:text-7xl before:inline-block before:text-dimmed before:absolute before:-ml-6 lg:before:-ml-10 before:-mt-2 lg:before:-mt-4 after:content-[close-quote] after:text-5xl lg:after:text-7xl after:inline-block after:text-dimmed after:absolute after:mt-1 lg:after:mt-0 after:ml-1 lg:after:ml-2'
+            }"
+          >
+            <UUser
+              v-bind="item.author"
+              :avatar="{ alt: item.author.name }"
+              size="xl"
+              class="justify-center"
+            />
+          </UPageCTA>
+        </UCarousel>
+      </UPageSection>
+
+      <UPageSection
+        title="Frequently Asked Questions"
+        description="Answers to common questions about my process and services."
+        :ui="{
+          container: 'px-0 pt-0! gap-4 sm:gap-4',
+          title: 'text-left text-xl sm:text-xl lg:text-2xl font-medium',
+          description: 'text-left mt-2 text-sm sm:text-md lg:text-sm text-muted'
+        }"
+      >
+        <UTabs
+          :items="faqCategories"
+          orientation="horizontal"
+          :ui="{
+            root: 'flex items-center gap-4 w-full',
+            list: 'relative flex bg-transparent dark:bg-transparent gap-2 px-0',
+            indicator: 'absolute top-[4px] duration-200 ease-out focus:outline-none rounded-lg bg-elevated/60',
+            trigger: 'px-3 py-2 rounded-lg hover:bg-muted/50 data-[state=active]:text-highlighted data-[state=inactive]:text-muted',
+            label: 'truncate'
+          }"
+        >
+          <template #content="{ item }">
+            <UAccordion
+              trailing-icon="i-lucide-plus"
+              :items="item.questions"
+              :unmount-on-hide="false"
+              :ui="{
+                item: 'border-none',
+                trigger: 'mb-2 border-0 group px-4 transform-gpu rounded-lg bg-elevated/60 will-change-transform hover:bg-muted/50 text-base',
+                body: 'px-4',
+                trailingIcon: 'group-data-[state=closed]:rotate-0 group-data-[state=open]:rotate-135 text-base text-muted'
+              }"
+            />
+          </template>
+        </UTabs>
+      </UPageSection>
+
+      <UFooter class="z-10 bg-default" :ui="{ left: 'text-muted text-xs' }">
+        <template #left>
+          Built with Nuxt UI • © 2026
+        </template>
+
+        <template #right>
+          <UButton
+            v-for="(link, index) of socialLinks"
+            :key="index"
+            v-bind="{ size: 'xs', color: 'neutral', variant: 'ghost', ...link }"
+          />
+        </template>
+      </UFooter>
+    </UContainer>
+  </div>
+</template>
diff --git a/docs/app/composables/useThemeStudioView.ts b/docs/app/composables/useThemeStudioView.ts
index ddf9084867..e029182402 100644
--- a/docs/app/composables/useThemeStudioView.ts
+++ b/docs/app/composables/useThemeStudioView.ts
@@ -1,18 +1,24 @@
-export type ThemeStudioView = 'grid' | 'dashboard' | 'chat' | 'saas' | 'landing' | 'a11y'
+export type ThemeStudioView = 'grid' | 'dashboard' | 'chat' | 'saas' | 'landing' | 'docs' | 'portfolio' | 'changelog' | 'editor' | 'a11y'
 
 export interface ThemeStudioViewTab {
   label: string
   icon: string
   value: ThemeStudioView
+  /** One-liner for the rich switcher — template blurbs from /templates. */
+  description: string
 }
 
 export const THEME_STUDIO_VIEWS: ThemeStudioViewTab[] = [
-  { label: 'Grid', icon: 'i-lucide-layout-grid', value: 'grid' },
-  { label: 'Dashboard', icon: 'i-lucide-layout-dashboard', value: 'dashboard' },
-  { label: 'Chat', icon: 'i-lucide-message-circle', value: 'chat' },
-  { label: 'SaaS', icon: 'i-lucide-rocket', value: 'saas' },
-  { label: 'Landing', icon: 'i-lucide-panels-top-left', value: 'landing' },
-  { label: 'A11y', icon: 'i-lucide-accessibility', value: 'a11y' }
+  { label: 'Grid', icon: 'i-lucide-layout-grid', value: 'grid', description: 'Every themed component at a glance — the component wall.' },
+  { label: 'Dashboard', icon: 'i-lucide-layout-dashboard', value: 'dashboard', description: 'Multi-column admin interface with inbox, customers and settings.' },
+  { label: 'Chat', icon: 'i-lucide-message-circle', value: 'chat', description: 'An AI chatbot with sidebar history and streaming replies.' },
+  { label: 'SaaS', icon: 'i-lucide-rocket', value: 'saas', description: 'A SaaS home with hero, pricing and feature sections.' },
+  { label: 'Landing', icon: 'i-lucide-panels-top-left', value: 'landing', description: 'A modern marketing landing page.' },
+  { label: 'Docs', icon: 'i-lucide-book-open', value: 'docs', description: 'A documentation site: navigation, prose, code and TOC.' },
+  { label: 'Portfolio', icon: 'i-lucide-user-round', value: 'portfolio', description: 'A personal portfolio with work, blog and testimonials.' },
+  { label: 'Changelog', icon: 'i-lucide-newspaper', value: 'changelog', description: 'Release notes with sticky intro and version timeline.' },
+  { label: 'Editor', icon: 'i-lucide-file-pen-line', value: 'editor', description: 'A rich text editor with toolbar, slash menu and drag handles.' },
+  { label: 'A11y', icon: 'i-lucide-accessibility', value: 'a11y', description: 'Contrast matrix for every token pair in the theme.' }
 ]
 
 /**

From fda15c60f73eb2344e8dffaf7fed2e187057c8d6 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 12 Jul 2026 12:01:45 +0200
Subject: [PATCH 145/185] feat(docs): update ThemeStudioSection and
 ThemeStudioViewPortfolio with new features and content

- Added a help button to ThemeStudioSection for improved user guidance.
- Updated experience and testimonial sections in ThemeStudioViewPortfolio with new content and refined descriptions.
- Enhanced FAQ content for clarity and engagement, reflecting a more conversational tone.

These changes aim to improve user experience and provide clearer information within the theme studio components.
---
 .../theme-studio/ThemeStudioSection.vue       | 22 ++++----
 .../theme-studio/ThemeStudioViewPortfolio.vue | 50 ++++++++++---------
 2 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioSection.vue b/docs/app/components/theme-studio/ThemeStudioSection.vue
index e9df4d17a3..2b6e89556f 100644
--- a/docs/app/components/theme-studio/ThemeStudioSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSection.vue
@@ -50,6 +50,17 @@ const open = ref(props.defaultOpen)
         class="justify-start flex-1"
       />
 
+      <UButton
+        v-if="helpTo"
+        :to="helpTo"
+        size="sm"
+        color="neutral"
+        variant="ghost"
+        icon="i-lucide-help-circle"
+        aria-label="About this setting"
+        @click.stop
+      />
+
       <UTooltip v-if="sectionKey" :text="dirty ? 'Reset to preset' : 'Matches the preset'">
         <UButton
           size="sm"
@@ -62,17 +73,6 @@ const open = ref(props.defaultOpen)
         />
       </UTooltip>
 
-      <UButton
-        v-if="helpTo"
-        :to="helpTo"
-        size="sm"
-        color="neutral"
-        variant="ghost"
-        icon="i-lucide-help-circle"
-        aria-label="About this setting"
-        @click.stop
-      />
-
       <div v-if="!!slots.actions" class="flex items-center gap-1" @click.stop="open = true">
         <slot name="actions" />
       </div>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue b/docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue
index 8829324db4..2f3bddace0 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue
@@ -39,8 +39,8 @@ const about = {
 
 const experience = [{
   date: '2025 - Present',
-  position: 'Public Contributor at',
-  company: { name: 'Nuxt', logo: 'i-simple-icons-nuxtdotjs' }
+  position: 'Public Contributor for',
+  company: { name: 'Nuxt UI', logo: 'i-simple-icons-nuxtdotjs' }
 }, {
   date: '2024 - Present',
   position: 'Founder of',
@@ -52,62 +52,64 @@ const experience = [{
 }]
 
 const posts = [{
-  title: 'From Mockup to Market: My End-to-End Product Design Process',
-  description: 'A walkthrough of the iterative loop I run on every project, from the first research call to the final engineering handoff.',
+  title: 'Twelve Identical Greys: A Field Guide to Choosing Your Neutral',
+  description: 'They are not identical and I will die on this hill. Slate is cool, stone is warm, zinc is for when you can\'t commit - a practical taxonomy.',
   date: 'Apr 23, 2025'
 }, {
-  title: 'The Psychology of Color in UI Design',
-  description: 'How deliberate color decisions steer attention, set tone and quietly shape the way people move through a product.',
+  title: 'I Nudged a Border Radius by 0.125rem and Felt Something',
+  description: 'A meditation on the space between rounded-md and rounded-lg, and why nobody else at the review could see the difference. They saw it. They\'re being polite.',
   date: 'Mar 15, 2025'
 }, {
-  title: 'How I Built My Design System from Scratch',
-  description: 'Auditing years of accumulated UI, distilling it into tokens and components, and the mistakes I would skip next time.',
+  title: 'My Design System Now Has Its Own Design System',
+  description: 'The tokens have tokens. The naming convention has a naming convention. At some point I will ship a button - a retrospective.',
   date: 'Mar 5, 2025'
 }]
 
+// Obviously-fake reviews: the testimonial carousel demos better with famous
+// dead Dutch masters than with invented product directors.
 const testimonials = [{
-  quote: 'Mike reshaped how our product feels end to end. He balances polished visuals with ruthless simplicity, and the redesign cut our support tickets by 40% while lifting conversion on every key flow.',
-  author: { name: 'Sarah Chen', description: 'Product Director at Bloom Finance' }
+  quote: 'At last, a man who treats the grid as a moral position. I did notice his palette editor permits more than three colors — I have chosen to forgive this.',
+  author: { name: 'Piet Mondrian', description: 'Painter & grid enthusiast, 1872–1944' }
 }, {
-  quote: 'Bringing Mike in was the best call we made. He challenged our assumptions, ran real user research, and because he writes the front-end himself the handoff to engineering was completely painless.',
-  author: { name: 'Michael Rodriguez', description: 'Co-founder of Wavelength Music' }
+  quote: 'I asked for a simple staircase component. The popovers opened into popovers, which opened into further popovers. Honestly, I have never felt more at home.',
+  author: { name: 'M.C. Escher', description: 'Staircase guy, 1898–1972' }
 }, {
-  quote: 'Mike has a rare talent for turning dense sustainability data into interfaces people actually enjoy. EcoTrack changed how our users engage with their impact, and he got there with equal parts craft and rigor.',
-  author: { name: 'Dr. Aisha Johnson', description: 'Chief Innovation Officer at GreenTech Solutions' }
+  quote: 'I set the primary color to chrome yellow and wept at the shades it produced. Five stars. Would have commissioned him, but our schedules never aligned.',
+  author: { name: 'Vincent van Gogh', description: 'Colorist, freelance, 1853–1890' }
 }]
 
 const faqCategories = [{
   label: 'Services & Process',
   questions: [{
     label: 'What services do you offer?',
-    content: 'Design systems, UX/UI design and front-end development - designed in Figma, built in Vue and Nuxt. I also cover the surrounding craft: branding, print, photography, video and animation.'
+    content: 'Design systems, UX/UI design and front-end development - designed in Figma, built in Nuxt. I also cover the surrounding craft: branding, print, photography, video and animation.'
   }, {
     label: 'What is your design process like?',
-    content: 'Collaborative and iterative: discovery and research, ideation and prototyping, user testing, visual design, then close pairing with engineers during implementation. The shape flexes to fit each project.'
+    content: 'Iterative: sketch, build, squint at it in dark mode, nudge a slider by 0.125rem, declare it the final tweak. Repeat until shipped, or until someone gently takes the slider away.'
   }, {
     label: 'Do you work with startups?',
-    content: 'Absolutely. I enjoy shaping a product vision from the ground up and can adapt my process to a fast-moving startup cadence.'
+    content: 'Absolutely - I run one. The daily standup is me and a wall of post-it notes, and the post-its are consistently flaking.'
   }]
 }, {
   label: 'Pricing & Timelines',
   questions: [{
     label: 'How much does a project typically cost?',
-    content: 'It depends on scope and complexity. Full design-and-build engagements usually start around €5,000, with most landing between €8,000 and €25,000. My consulting day rate is €700.'
+    content: 'This theme editor is free and takes payment in GitHub stars. For anything else: it depends - an answer that has never once been wrong.'
   }, {
     label: 'What are your payment terms?',
-    content: 'A 40% deposit reserves the project slot, with the remaining 60% due on delivery. I accept bank transfer and Stripe.'
+    content: 'Stroopwafels, baked beans, or sincere compliments about my border-radius choices. Bank transfer is also, grudgingly, accepted.'
   }, {
     label: 'How long does a typical project take?',
-    content: 'Smaller projects run three to four weeks; larger builds range from two to four months. You get a detailed estimate after discovery.'
+    content: 'Somewhere between one focused afternoon and "I rebuilt the design system twice, it\'s better now, please don\'t ask." Discovery narrows this down considerably.'
   }]
 }, {
   label: 'About Me',
   questions: [{
     label: 'What do you enjoy most about your work?',
-    content: 'Watching someone use a thing I built and find it genuinely effortless. Bridging user needs and technical constraints is the puzzle that keeps me here.'
+    content: 'Watching someone use a thing I built and say "oh, I found a bug". Bridging user needs and technical constraints is the puzzle that keeps me here while the users scare me away.'
   }, {
     label: 'What are your hobbies outside of work?',
-    content: 'Cycling the Dutch coast, film photography, hunting down good coffee in Amsterdam and contributing to open-source design tooling.'
+    content: 'Arts and crafts, film photography, hunting down good curry in Amsterdam and contributing to open-source UI tooling.'
   }]
 }]
 
@@ -156,8 +158,8 @@ onUnmounted(() => clearTimeout(appearTimeout))
         :ui="{
           container: 'py-18 sm:py-24 lg:py-32',
           headline: 'flex items-center justify-center',
-          title: 'text-shadow-md max-w-lg mx-auto text-pretty text-3xl sm:text-4xl lg:text-5xl',
-          description: 'mt-2 text-md mx-auto max-w-2xl text-pretty sm:text-md text-muted',
+          title: 'text-shadow-md max-w-lg mx-auto text-balance text-3xl sm:text-4xl lg:text-5xl',
+          description: 'mt-2 text-md mx-auto max-w-2xl text-balance sm:text-md text-muted',
           links: 'mt-4 flex-col justify-center items-center'
         }"
       >

From 876e371e22fd64f6bd2be83fe922c1932eb5255b Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 12 Jul 2026 12:27:28 +0200
Subject: [PATCH 146/185] fix(docs): refine header and theme studio components
 for improved clarity and styling

---
 docs/app/components/header/Header.vue                 |  6 ++----
 .../components/theme-studio/ThemeStudioShareModal.vue |  2 ++
 .../theme-studio/ThemeStudioViewPortfolio.vue         | 11 ++++++++---
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index 4e9eb2409d..283d71ed24 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -91,8 +91,6 @@ const studioMenuLinks = [{
       :ui="{ viewportWrapper: 'w-[12rem]', content: 'w-[12rem]' }"
     >
       <template #list-leading>
-        <!-- ten previews outgrew tabs — a rich listbox names and describes
-             each one (blurbs from /templates) -->
         <UPopover v-model:open="viewListOpen" :content="{ align: 'center' }">
           <UButton
             :icon="views.find(tab => tab.value === view)?.icon"
@@ -100,7 +98,7 @@ const studioMenuLinks = [{
             trailing-icon="i-lucide-chevron-down"
             color="neutral"
             variant="subtle"
-            size="sm"
+
             aria-label="Preview page"
           />
 
@@ -120,7 +118,7 @@ const studioMenuLinks = [{
       <template #pages-content>
         <UNavigationMenu
           orientation="vertical"
-          size="sm"
+
           :items="studioMenuLinks"
           class="p-2"
         />
diff --git a/docs/app/components/theme-studio/ThemeStudioShareModal.vue b/docs/app/components/theme-studio/ThemeStudioShareModal.vue
index cde54aacdf..6e811cd2f6 100644
--- a/docs/app/components/theme-studio/ThemeStudioShareModal.vue
+++ b/docs/app/components/theme-studio/ThemeStudioShareModal.vue
@@ -95,6 +95,7 @@ function runImport() {
               :rows="10"
               placeholder="@import &quot;tailwindcss&quot;;&#10;@import &quot;@nuxt/ui&quot;;&#10;…"
               class="w-full font-mono"
+              variant="subtle"
               :ui="{ base: 'text-xs' }"
             />
 
@@ -102,6 +103,7 @@ function runImport() {
               v-else
               v-model="config"
               :rows="10"
+              variant="subtle"
               placeholder="export default defineAppConfig({&#10;  ui: { … }&#10;})"
               class="w-full font-mono"
               :ui="{ base: 'text-xs' }"
diff --git a/docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue b/docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue
index 2f3bddace0..98000d7c5f 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue
@@ -34,7 +34,8 @@ const heroImages = [
 
 const about = {
   title: 'About Me',
-  description: 'I\'m an English designer and front-end developer based in Amsterdam. I work across design systems, UX and the front-end that ships them - staying involved on both sides keeps the design and the implementation from drifting out of sync.'
+  // \n renders as a real break via whitespace-pre-line on the description slot
+  description: 'I\'m an English designer and developer based in Amsterdam. I sit right between design and engineering, which means both teams assume I\'m the other team\'s problem.'
 }
 
 const experience = [{
@@ -49,6 +50,10 @@ const experience = [{
   date: '2019 - 2021',
   position: 'Web Developer at',
   company: { name: 'Blender', logo: 'i-simple-icons-blender' }
+}, {
+  date: '1995 - Present',
+  position: 'Human person on',
+  company: { name: 'Earth', logo: 'i-lucide-globe' }
 }]
 
 const posts = [{
@@ -220,7 +225,7 @@ onUnmounted(() => clearTimeout(appearTimeout))
           :ui="{
             container: 'p-0!',
             title: 'text-left text-xl sm:text-xl lg:text-2xl font-medium',
-            description: 'text-left mt-3 text-sm sm:text-md lg:text-sm text-muted'
+            description: 'text-left mt-3 text-sm sm:text-md lg:text-sm text-muted whitespace-pre-line'
           }"
         />
 
@@ -246,7 +251,7 @@ onUnmounted(() => clearTimeout(appearTimeout))
                 <span class="flex items-center gap-1">
                   <span class="text-sm">{{ item.position }}</span>
                   <span class="inline-flex items-center gap-1 text-highlighted">
-                    <span class="font-medium">{{ item.company.name }}</span>
+                    <span class="font-medium text-sm">{{ item.company.name }}</span>
                     <UIcon :name="item.company.logo" />
                   </span>
                 </span>

From 69d0ea23291833fc89f57dfde8302e22ceb97c03 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Wed, 15 Jul 2026 00:30:48 +0200
Subject: [PATCH 147/185] feat(docs): introduce ThemeStudioFontPicker and
 Google Fonts integration

- Added ThemeStudioFontPicker component for enhanced font selection, featuring a search box for the full Google Fonts catalog.
- Implemented useGoogleFonts composable to manage font data fetching and searching.
- Updated ThemeStudioControlsGeneral to utilize the new font picker and streamline font selection logic.
- Created an API endpoint to serve a curated Google Fonts catalog, ensuring efficient font loading and categorization.

These changes enhance the font selection experience within the theme studio, providing users with a more dynamic and responsive interface.
---
 .../ThemeStudioControlsGeneral.vue            |  35 +----
 .../theme-studio/ThemeStudioFontPicker.vue    | 126 ++++++++++++++++++
 docs/app/composables/useGoogleFonts.ts        |  45 +++++++
 docs/app/utils/theme.ts                       |  22 +--
 docs/server/api/fonts.json.get.ts             |  20 +++
 5 files changed, 212 insertions(+), 36 deletions(-)
 create mode 100644 docs/app/components/theme-studio/ThemeStudioFontPicker.vue
 create mode 100644 docs/app/composables/useGoogleFonts.ts
 create mode 100644 docs/server/api/fonts.json.get.ts

diff --git a/docs/app/components/theme-studio/ThemeStudioControlsGeneral.vue b/docs/app/components/theme-studio/ThemeStudioControlsGeneral.vue
index 64b4760905..fbbc7ff74b 100644
--- a/docs/app/components/theme-studio/ThemeStudioControlsGeneral.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControlsGeneral.vue
@@ -33,9 +33,6 @@ const WEIGHT_STEPS = ['normal', 'medium', 'semibold', 'bold'] as const
 const weightSteps = Object.fromEntries(WEIGHT_STEPS.map(step => [step, weightStepModel(step)])) as Record<typeof WEIGHT_STEPS[number], ReturnType<typeof weightStepModel>>
 const weightsActive = computed(() => !!fontPrefs.value.weights)
 
-const INHERIT_FONT = { label: 'Inherit base', value: 'inherit' }
-const headingFontItems = computed(() => [INHERIT_FONT, ...fonts.map(name => ({ label: name, value: name }))])
-
 function setHeading(patch: Record<string, unknown>) {
   setFontPrefs({ ...fontPrefs.value, heading: { ...fontPrefs.value.heading, ...patch } })
 }
@@ -90,7 +87,6 @@ const fontRows = [{
   label: 'Base',
   defaultValue: 'Public Sans',
   selectIcon: 'i-lucide-type',
-  items: computed(() => fonts.map(name => ({ label: name, value: name }))),
   font,
   weights: WEIGHT_STEPS.map(step => ({ label: capitalize(step), model: weightSteps[step]!, min: 100, max: 900 })),
   weightsActive,
@@ -104,7 +100,6 @@ const fontRows = [{
   label: 'Headings (Prose)',
   defaultValue: 'inherit',
   selectIcon: 'i-lucide-heading',
-  items: headingFontItems,
   font: headingFont,
   weights: [{ label: 'Weight', model: headingWeight, min: 100, max: 900 }],
   weightsActive: computed(() => fontPrefs.value.heading?.weight !== undefined),
@@ -275,33 +270,17 @@ const defaultSize = computed({
           <span class="text-xs font-medium text-muted select-none" :class="row.key === 'heading' && 'pt-1'">{{ row.label }}</span>
 
           <div class="flex items-center gap-1.5">
-            <!-- each family renders itself over a live specimen line -->
-            <ThemeStudioListPicker
+            <!-- each family renders itself over a live specimen line;
+                 searching reaches the full Google Fonts catalog -->
+            <ThemeStudioFontPicker
               v-model="row.font.value"
-              :items="row.items.value"
+              :curated="fonts"
+              :default-value="row.defaultValue"
+              :inherit="row.key === 'heading'"
               :icon="row.selectIcon"
               :aria-label="`${row.label} font`"
               class="flex-1 min-w-0"
-            >
-              <template #trigger>
-                <span
-                  class="truncate"
-                  :style="row.font.value === 'inherit' ? undefined : { fontFamily: `'${row.font.value}', sans-serif` }"
-                >{{ row.items.value.find(item => item.value === row.font.value)?.label ?? row.font.value }}<span v-if="row.font.value === row.defaultValue" class="text-dimmed font-normal">&nbsp;(Default)</span></span>
-              </template>
-
-              <template #item-label="{ item }">
-                <span :style="item.value === 'inherit' ? undefined : { fontFamily: `'${item.value}', sans-serif` }">{{ item.label }}</span><span v-if="item.value === row.defaultValue" class="text-dimmed">&nbsp;(Default)</span>
-              </template>
-
-              <template #item-description="{ item }">
-                <span
-                  v-if="item.value !== 'inherit'"
-                  class="text-xs text-muted truncate"
-                  :style="{ fontFamily: `'${item.value}', sans-serif` }"
-                >Grumpy wizards make toxic brew</span>
-              </template>
-            </ThemeStudioListPicker>
+            />
 
             <UFieldGroup size="sm">
               <UPopover :content="{ align: 'start' }">
diff --git a/docs/app/components/theme-studio/ThemeStudioFontPicker.vue b/docs/app/components/theme-studio/ThemeStudioFontPicker.vue
new file mode 100644
index 0000000000..4ebb5066cd
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioFontPicker.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+/**
+ * The font family picker: the curated families up front, with a search box
+ * over the full Google Fonts catalog (fetched lazily on first open). Rows
+ * render themselves in their own face — each result batch loads its preview
+ * faces, debounced so keystrokes don't fan out into stylesheet requests.
+ */
+import { watchDebounced } from '@vueuse/core'
+
+const props = defineProps<{
+  /** The curated families offered before the user searches. */
+  curated: readonly string[]
+  /** The value that wears the (Default) tag. */
+  defaultValue: string
+  /** Prepend an "Inherit base" option (the headings row). */
+  inherit?: boolean
+  icon?: string
+  ariaLabel?: string
+}>()
+
+const model = defineModel<string>({ required: true })
+
+const { status, load, search } = useGoogleFonts()
+
+const open = ref(false)
+const query = ref('')
+
+// A stale query would flash old results on reopen; the catalog fetch only
+// starts once someone actually reaches for the picker.
+watch(open, (value) => {
+  if (value) {
+    query.value = ''
+    load()
+  }
+})
+
+const results = computed(() => open.value ? search(query.value) : [])
+
+interface FontItem {
+  label: string
+  value: string
+  category?: string
+}
+
+const items = computed<FontItem[]>(() => {
+  if (query.value.trim()) {
+    return results.value.map(font => ({ label: font.name, value: font.name, category: font.category }))
+  }
+  const curated: FontItem[] = props.curated.map(name => ({ label: name, value: name }))
+  // A searched pick isn't in the curated list — pin it on top so the
+  // selection stays visible (and deselectable) on reopen.
+  if (model.value !== 'inherit' && !props.curated.includes(model.value)) {
+    curated.unshift({ label: model.value, value: model.value })
+  }
+  return props.inherit ? [{ label: 'Inherit base', value: 'inherit' }, ...curated] : curated
+})
+
+watchDebounced(results, value => loadFontPreviews(value.map(font => font.name)), { debounce: 250 })
+
+const emptyLabel = computed(() => {
+  if (status.value === 'loading') return 'Loading the Google Fonts catalog…'
+  if (status.value === 'error') return 'Couldn’t load the Google Fonts catalog'
+  return 'No fonts match your search'
+})
+</script>
+
+<template>
+  <UPopover v-model:open="open" :content="{ align: 'start' }">
+    <UButton
+      color="neutral"
+      variant="subtle"
+      size="sm"
+      block
+      :icon="icon"
+      trailing-icon="i-lucide-chevron-down"
+      :ui="{ label: 'flex-1 text-left truncate' }"
+      :aria-label="ariaLabel"
+    >
+      <span
+        class="truncate"
+        :style="model === 'inherit' ? undefined : { fontFamily: `'${model}', sans-serif` }"
+      >{{ model === 'inherit' ? 'Inherit base' : model }}<span v-if="model === defaultValue" class="text-dimmed font-normal">&nbsp;(Default)</span></span>
+    </UButton>
+
+    <template #content>
+      <div class="w-72 flex flex-col">
+        <UInput
+          v-model="query"
+          icon="i-lucide-search"
+          placeholder="Search Google Fonts…"
+          variant="none"
+          autofocus
+          class="border-b border-default"
+          aria-label="Search Google Fonts"
+        />
+
+        <UListbox
+          v-if="items.length"
+          v-model="model"
+          :items="items"
+          value-key="value"
+          :ui="{ root: 'ring-0 rounded-md', content: 'max-h-80' }"
+          @update:model-value="open = false"
+        >
+          <template #item-label="{ item }">
+            <span :style="item.value === 'inherit' ? undefined : { fontFamily: `'${item.value}', sans-serif` }">{{ item.label }}</span><span v-if="item.value === defaultValue" class="text-dimmed">&nbsp;(Default)</span>
+          </template>
+
+          <template #item-description="{ item }">
+            <span v-if="item.value !== 'inherit'" class="flex items-center gap-2 min-w-0">
+              <span
+                class="text-xs text-muted truncate"
+                :style="{ fontFamily: `'${item.value}', sans-serif` }"
+              >Grumpy wizards make toxic brew</span>
+              <span v-if="item.category" class="text-xs text-dimmed shrink-0 ms-auto">{{ item.category }}</span>
+            </span>
+          </template>
+        </UListbox>
+
+        <p v-else class="px-3 py-6 text-xs text-muted text-center select-none">
+          {{ emptyLabel }}
+        </p>
+      </div>
+    </template>
+  </UPopover>
+</template>
diff --git a/docs/app/composables/useGoogleFonts.ts b/docs/app/composables/useGoogleFonts.ts
new file mode 100644
index 0000000000..c05ce962ec
--- /dev/null
+++ b/docs/app/composables/useGoogleFonts.ts
@@ -0,0 +1,45 @@
+export interface GoogleFont {
+  name: string
+  category: string
+}
+
+/**
+ * The full Google Fonts catalog (family + category, popularity-ordered),
+ * served by /api/fonts.json — the metadata endpoint itself has no CORS
+ * headers. Fetched lazily the first time a font picker opens and shared
+ * through useState so every picker searches the same copy.
+ */
+export function useGoogleFonts() {
+  const catalog = useState<GoogleFont[]>('google-fonts-catalog', () => [])
+  const status = useState<'idle' | 'loading' | 'ready' | 'error'>('google-fonts-status', () => 'idle')
+
+  async function load() {
+    if (status.value === 'ready' || status.value === 'loading') return
+    status.value = 'loading'
+    try {
+      catalog.value = await $fetch<GoogleFont[]>('/api/fonts.json')
+      status.value = 'ready'
+    } catch {
+      status.value = 'error'
+    }
+  }
+
+  /** Popularity-ordered matches, prefix matches ahead of substring hits. */
+  function search(query: string, limit = 30): GoogleFont[] {
+    const q = query.trim().toLowerCase()
+    if (!q) return []
+    const starts: GoogleFont[] = []
+    const contains: GoogleFont[] = []
+    for (const font of catalog.value) {
+      const name = font.name.toLowerCase()
+      if (name.startsWith(q)) {
+        if (starts.push(font) >= limit) break
+      } else if (contains.length < limit && name.includes(q)) {
+        contains.push(font)
+      }
+    }
+    return [...starts, ...contains].slice(0, limit)
+  }
+
+  return { catalog, status, load, search }
+}
diff --git a/docs/app/utils/theme.ts b/docs/app/utils/theme.ts
index 3880d9e0d5..a74a69130f 100644
--- a/docs/app/utils/theme.ts
+++ b/docs/app/utils/theme.ts
@@ -19,19 +19,25 @@ export function capitalize(value: string) {
 /** Tailwind's stock weight ladder — set steps are absences at these values. */
 export const FONT_WEIGHT_DEFAULTS = { normal: 400, medium: 500, semibold: 600, bold: 700 } as const
 
+// Families whose preview faces are already requested — Public Sans is
+// bundled. Module-level so the controls, the preset menu and every search
+// batch share one ledger and no family is fetched twice.
+const loadedFontPreviews = new Set<string>(['Public Sans'])
+
 /**
- * Load every listed family once (Google Fonts) so pickers can render
- * themselves in the faces they offer. Shared by the controls and the
- * preset menu — whichever mounts first wins.
+ * Load the listed families (Google Fonts, 400/700 only) so pickers can
+ * render themselves in the faces they offer. Incremental: each call adds
+ * one stylesheet covering only the families not yet requested — the font
+ * search feeds result batches through here as the user types.
  */
 export function loadFontPreviews(fonts: readonly string[]) {
-  if (!import.meta.client || document.getElementById('font-previews')) return
-  const families = fonts.filter(name => name !== 'Public Sans')
-    .map(name => `family=${encodeURIComponent(name)}:wght@400;700`).join('&')
+  if (!import.meta.client) return
+  const families = fonts.filter(name => !loadedFontPreviews.has(name))
+  if (!families.length) return
+  families.forEach(name => loadedFontPreviews.add(name))
   const link = document.createElement('link')
   link.rel = 'stylesheet'
-  link.id = 'font-previews'
-  link.href = `https://fonts.googleapis.com/css2?${families}&display=swap`
+  link.href = `https://fonts.googleapis.com/css2?${families.map(name => `family=${encodeURIComponent(name)}:wght@400;700`).join('&')}&display=swap`
   document.head.appendChild(link)
 }
 
diff --git a/docs/server/api/fonts.json.get.ts b/docs/server/api/fonts.json.get.ts
new file mode 100644
index 0000000000..0d175f0cbd
--- /dev/null
+++ b/docs/server/api/fonts.json.get.ts
@@ -0,0 +1,20 @@
+type GoogleFont = {
+  name: string
+  category: string
+}
+
+/**
+ * The Google Fonts catalog, slimmed to what the theme studio's font picker
+ * needs (family name + category, popularity-ordered). Proxied because the
+ * metadata endpoint sends no CORS headers, and cached — the catalog moves
+ * a few families a month at most.
+ */
+export default defineCachedEventHandler(async (): Promise<GoogleFont[]> => {
+  const text = await $fetch<string>('https://fonts.google.com/metadata/fonts', { responseType: 'text' })
+  // Google JSON endpoints traditionally lead with an anti-hijacking prefix
+  const data = JSON.parse(text.replace(/^\)\]\}'/, ''))
+
+  return (data.familyMetadataList as Array<{ family: string, category: string, popularity?: number }>)
+    .sort((a, b) => (a.popularity ?? Number.MAX_SAFE_INTEGER) - (b.popularity ?? Number.MAX_SAFE_INTEGER))
+    .map(font => ({ name: font.family, category: font.category }))
+}, { name: 'google-fonts', maxAge: 60 * 60 * 24, swr: true })

From 0c492db312a542fcc528441c487c711c5279c31a Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Wed, 15 Jul 2026 00:48:41 +0200
Subject: [PATCH 148/185] feat(docs): enhance header and theme studio views
 with image previews

- Updated Header.vue to implement a 2-column card grid for displaying template screenshots alongside labels and descriptions, improving visual clarity.
- Modified useThemeStudioView.ts to include image paths for various theme studio views, enabling image previews in the header component.

These changes aim to enrich the user experience by providing visual context for each theme studio view, making navigation more intuitive.
---
 docs/app/components/header/Header.vue      | 33 ++++++++++++++++++++--
 docs/app/composables/useThemeStudioView.ts | 20 +++++++------
 2 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index 283d71ed24..56ed226434 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -103,14 +103,41 @@ const studioMenuLinks = [{
           />
 
           <template #content>
+            <!-- a 2-column card grid: each view is its /templates screenshot
+                 over label + blurb; the studio-only views (grid, a11y) get an
+                 icon tile, and the selected card wears a primary ring. -->
             <UListbox
               v-model="view"
               :items="views"
               value-key="value"
-              class="w-80"
-              :ui="{ root: 'ring-0 rounded-md', content: 'max-h-96' }"
+              class="w-96"
+              :ui="{
+                root: 'ring-0 rounded-md',
+                content: 'max-h-[70vh]',
+                group: 'p-1.5 grid grid-cols-2 gap-1',
+                item: 'flex-col rounded-md ring-inset data-[state=checked]:bg-elevated/50',
+                itemDescription: 'whitespace-normal line-clamp-2 text-xs',
+                itemTrailing: 'hidden',
+                itemWrapper: 'p-1'
+              }"
               @update:model-value="viewListOpen = false"
-            />
+            >
+              <template #item-leading="{ item }">
+                <UColorModeImage
+                  v-if="item.image"
+                  :light="`${item.image}-light.png`"
+                  :dark="`${item.image}-dark.png`"
+                  :alt="`${item.label} preview`"
+                  width="654"
+                  height="368"
+                  loading="lazy"
+                  class="w-full aspect-video rounded-sm ring ring-default"
+                />
+                <span v-else class="w-full aspect-video rounded-sm ring ring-default bg-elevated/50 flex items-center justify-center">
+                  <UIcon :name="item.icon" class="size-6 text-muted" />
+                </span>
+              </template>
+            </UListbox>
           </template>
         </UPopover>
       </template>
diff --git a/docs/app/composables/useThemeStudioView.ts b/docs/app/composables/useThemeStudioView.ts
index e029182402..01c9cb6e20 100644
--- a/docs/app/composables/useThemeStudioView.ts
+++ b/docs/app/composables/useThemeStudioView.ts
@@ -6,18 +6,22 @@ export interface ThemeStudioViewTab {
   value: ThemeStudioView
   /** One-liner for the rich switcher — template blurbs from /templates. */
   description: string
+  /** /templates screenshot base path (`-light.png`/`-dark.png` appended); grid and a11y are studio-only and have none. */
+  image?: string
 }
 
+const templateImage = (name: string) => `/assets/templates/nuxt/${name}`
+
 export const THEME_STUDIO_VIEWS: ThemeStudioViewTab[] = [
   { label: 'Grid', icon: 'i-lucide-layout-grid', value: 'grid', description: 'Every themed component at a glance — the component wall.' },
-  { label: 'Dashboard', icon: 'i-lucide-layout-dashboard', value: 'dashboard', description: 'Multi-column admin interface with inbox, customers and settings.' },
-  { label: 'Chat', icon: 'i-lucide-message-circle', value: 'chat', description: 'An AI chatbot with sidebar history and streaming replies.' },
-  { label: 'SaaS', icon: 'i-lucide-rocket', value: 'saas', description: 'A SaaS home with hero, pricing and feature sections.' },
-  { label: 'Landing', icon: 'i-lucide-panels-top-left', value: 'landing', description: 'A modern marketing landing page.' },
-  { label: 'Docs', icon: 'i-lucide-book-open', value: 'docs', description: 'A documentation site: navigation, prose, code and TOC.' },
-  { label: 'Portfolio', icon: 'i-lucide-user-round', value: 'portfolio', description: 'A personal portfolio with work, blog and testimonials.' },
-  { label: 'Changelog', icon: 'i-lucide-newspaper', value: 'changelog', description: 'Release notes with sticky intro and version timeline.' },
-  { label: 'Editor', icon: 'i-lucide-file-pen-line', value: 'editor', description: 'A rich text editor with toolbar, slash menu and drag handles.' },
+  { label: 'Dashboard', icon: 'i-lucide-layout-dashboard', value: 'dashboard', description: 'Multi-column admin interface with inbox, customers and settings.', image: templateImage('dashboard') },
+  { label: 'Chat', icon: 'i-lucide-message-circle', value: 'chat', description: 'An AI chatbot with sidebar history and streaming replies.', image: templateImage('chat') },
+  { label: 'SaaS', icon: 'i-lucide-rocket', value: 'saas', description: 'A SaaS home with hero, pricing and feature sections.', image: templateImage('saas') },
+  { label: 'Landing', icon: 'i-lucide-panels-top-left', value: 'landing', description: 'A modern marketing landing page.', image: templateImage('landing') },
+  { label: 'Docs', icon: 'i-lucide-book-open', value: 'docs', description: 'A documentation site: navigation, prose, code and TOC.', image: templateImage('docs') },
+  { label: 'Portfolio', icon: 'i-lucide-user-round', value: 'portfolio', description: 'A personal portfolio with work, blog and testimonials.', image: templateImage('portfolio') },
+  { label: 'Changelog', icon: 'i-lucide-newspaper', value: 'changelog', description: 'Release notes with sticky intro and version timeline.', image: templateImage('changelog') },
+  { label: 'Editor', icon: 'i-lucide-file-pen-line', value: 'editor', description: 'A rich text editor with toolbar, slash menu and drag handles.', image: templateImage('editor') },
   { label: 'A11y', icon: 'i-lucide-accessibility', value: 'a11y', description: 'Contrast matrix for every token pair in the theme.' }
 ]
 

From 35f42c688634134d16a46cc87e9299395078b0f2 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Wed, 15 Jul 2026 22:48:23 +0200
Subject: [PATCH 149/185] feat(docs): refactor theme studio header and
 introduce new components

- Removed the previous view selection logic from Header.vue and replaced it with the new ThemeStudioViewSwitcher component, enhancing modularity.
- Created ThemeStudioViewGrid and ThemeStudioViewSwitcher components to streamline the display of theme studio views and improve user interaction.
- Updated theme.vue to integrate the new view switcher, simplifying the header's functionality and improving the overall user experience.

These changes aim to enhance the organization and usability of the theme studio interface, providing a more intuitive navigation experience.
---
 docs/app/components/header/Header.vue         | 51 +-----------------
 .../theme-studio/ThemeStudioViewGrid.vue      | 49 +++++++++++++++++
 .../theme-studio/ThemeStudioViewSwitcher.vue  | 53 +++++++++++++++++++
 docs/app/pages/theme.vue                      | 16 +++---
 4 files changed, 109 insertions(+), 60 deletions(-)
 create mode 100644 docs/app/components/theme-studio/ThemeStudioViewGrid.vue
 create mode 100644 docs/app/components/theme-studio/ThemeStudioViewSwitcher.vue

diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index 56ed226434..744e4fdad6 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -17,7 +17,6 @@ function toggleChat() {
  */
 const isStudio = computed(() => route.path === '/theme')
 
-const { view, views } = useThemeStudioView()
 const viewListOpen = ref(false)
 
 // The popover body is a vertical menu so Resources can nest as a
@@ -91,55 +90,7 @@ const studioMenuLinks = [{
       :ui="{ viewportWrapper: 'w-[12rem]', content: 'w-[12rem]' }"
     >
       <template #list-leading>
-        <UPopover v-model:open="viewListOpen" :content="{ align: 'center' }">
-          <UButton
-            :icon="views.find(tab => tab.value === view)?.icon"
-            :label="views.find(tab => tab.value === view)?.label"
-            trailing-icon="i-lucide-chevron-down"
-            color="neutral"
-            variant="subtle"
-
-            aria-label="Preview page"
-          />
-
-          <template #content>
-            <!-- a 2-column card grid: each view is its /templates screenshot
-                 over label + blurb; the studio-only views (grid, a11y) get an
-                 icon tile, and the selected card wears a primary ring. -->
-            <UListbox
-              v-model="view"
-              :items="views"
-              value-key="value"
-              class="w-96"
-              :ui="{
-                root: 'ring-0 rounded-md',
-                content: 'max-h-[70vh]',
-                group: 'p-1.5 grid grid-cols-2 gap-1',
-                item: 'flex-col rounded-md ring-inset data-[state=checked]:bg-elevated/50',
-                itemDescription: 'whitespace-normal line-clamp-2 text-xs',
-                itemTrailing: 'hidden',
-                itemWrapper: 'p-1'
-              }"
-              @update:model-value="viewListOpen = false"
-            >
-              <template #item-leading="{ item }">
-                <UColorModeImage
-                  v-if="item.image"
-                  :light="`${item.image}-light.png`"
-                  :dark="`${item.image}-dark.png`"
-                  :alt="`${item.label} preview`"
-                  width="654"
-                  height="368"
-                  loading="lazy"
-                  class="w-full aspect-video rounded-sm ring ring-default"
-                />
-                <span v-else class="w-full aspect-video rounded-sm ring ring-default bg-elevated/50 flex items-center justify-center">
-                  <UIcon :name="item.icon" class="size-6 text-muted" />
-                </span>
-              </template>
-            </UListbox>
-          </template>
-        </UPopover>
+        <ThemeStudioViewSwitcher v-model:open="viewListOpen" />
       </template>
 
       <template #pages-content>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewGrid.vue b/docs/app/components/theme-studio/ThemeStudioViewGrid.vue
new file mode 100644
index 0000000000..d3c1c0f3c0
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioViewGrid.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { ThemeStudioViewTab } from '~/composables/useThemeStudioView'
+
+defineProps<{
+  items: ThemeStudioViewTab[]
+}>()
+
+const emit = defineEmits<{ select: [] }>()
+
+const { view } = useThemeStudioView()
+</script>
+
+<template>
+  <!-- a 2-column card grid: each view is its /templates screenshot over
+       label + blurb; the studio-only views (grid, a11y) get an icon tile.
+       Scrolling belongs to the switcher wrapping the grids, so both
+       sections move together. -->
+  <UListbox
+    v-model="view"
+    :items="items"
+    value-key="value"
+    :ui="{
+      root: 'ring-0 rounded-none overflow-visible',
+      content: 'max-h-none overflow-visible',
+      group: 'p-0 grid grid-cols-2 gap-1',
+      item: 'flex-col rounded-lg ring-inset data-[state=checked]:bg-elevated/50',
+      itemDescription: 'whitespace-normal line-clamp-2 text-xs',
+      itemTrailing: 'hidden',
+      itemWrapper: 'p-1'
+    }"
+    @update:model-value="emit('select')"
+  >
+    <template #item-leading="{ item }">
+      <UColorModeImage
+        v-if="item.image"
+        :light="`${item.image}-light.png`"
+        :dark="`${item.image}-dark.png`"
+        :alt="`${item.label} preview`"
+        width="654"
+        height="368"
+        loading="lazy"
+        class="w-full aspect-video rounded-sm ring ring-default"
+      />
+      <span v-else class="w-full aspect-video rounded-sm ring ring-default bg-elevated/50 flex items-center justify-center">
+        <UIcon :name="item.icon" class="size-6 text-muted" />
+      </span>
+    </template>
+  </UListbox>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewSwitcher.vue b/docs/app/components/theme-studio/ThemeStudioViewSwitcher.vue
new file mode 100644
index 0000000000..f3ab0879c3
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioViewSwitcher.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { PopoverProps } from '@nuxt/ui'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<{
+  content?: PopoverProps['content']
+}>(), {
+  content: () => ({ align: 'center' })
+})
+
+const open = defineModel<boolean>('open', { default: false })
+
+const { view, views } = useThemeStudioView()
+
+const activeView = computed(() => views.find(tab => tab.value === view.value))
+
+// The studio-only views (no /templates screenshot) lead; the template
+// pages follow under their own heading.
+const studioViews = views.filter(tab => !tab.image)
+const templateViews = views.filter(tab => tab.image)
+</script>
+
+<template>
+  <UPopover v-model:open="open" :content="props.content">
+    <UButton
+      :icon="activeView?.icon"
+      :label="activeView?.label"
+      trailing-icon="i-lucide-chevron-down"
+      color="neutral"
+      variant="subtle"
+      aria-label="Preview page"
+      v-bind="$attrs"
+    />
+
+    <template #content>
+      <div class="w-96 max-h-[70vh] overflow-y-auto p-1.5 overflow-x-hidden">
+        <ThemeStudioViewGrid :items="studioViews" aria-label="Studio views" @select="open = false" />
+        <USeparator class="mt-2 -mx-1.5 w-[calc(100%+1rem)]" />
+        <div class="flex items-center justify-between gap-2 px-2 pt-2.5 pb-1.5">
+          <span class="text-xs font-semibold text-highlighted">Template pages</span>
+
+          <ULink to="/templates" class="inline-flex items-center gap-0.5 text-xs text-muted hover:text-default">
+            View all templates
+            <UIcon name="i-lucide-arrow-right" class="size-3" />
+          </ULink>
+        </div>
+
+        <ThemeStudioViewGrid :items="templateViews" aria-label="Template pages" @select="open = false" />
+      </div>
+    </template>
+  </UPopover>
+</template>
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 02f54d9053..04e9d8fc3b 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -4,7 +4,7 @@ const { currentDoc, resetTheme } = useTheme()
 
 // View and fullscreen are app-level state: the site header hosts the view
 // switcher while on /theme and hides itself in fullscreen.
-const { view, fullscreen, views } = useThemeStudioView()
+const { view, fullscreen } = useThemeStudioView()
 const { past, future, align, capture, undo, redo } = useThemeStudioHistory()
 
 useSeoMeta({
@@ -245,16 +245,12 @@ const shareMode = ref<'import' | 'export'>('export')
             <span class="flex-1" />
 
             <!-- The header center hosts the view switcher on desktop; the
-               toolbar keeps a select for mobile and for fullscreen, where
-               the header is hidden. -->
-            <USelect
-              v-model="view"
+               toolbar keeps one for mobile and for fullscreen, where the
+               header is hidden. -->
+            <ThemeStudioViewSwitcher
               v-model:open="openPanels.view"
-              :items="views"
-              :icon="views.find(tab => tab.value === view)?.icon"
-              color="neutral"
-              variant="subtle"
-              class="w-36 shrink-0"
+              :content="{ align: 'end' }"
+              class="shrink-0"
               :class="!fullscreen && 'lg:hidden'"
             />
 

From ba18c5b05701154dec4cc8afbf8820b39cb665e5 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Wed, 15 Jul 2026 22:55:22 +0200
Subject: [PATCH 150/185] feat(docs): enhance theme management with style token
 integration

- Updated useTheme composable to incorporate style tokens for better handling of theme styles, ensuring that only divergent values are retained.
- Refactored CSS generation logic in generateCSS to merge style expansions with explicit token overrides, improving the output structure and reducing redundancy.
- Removed redundant style preference handling from the theme export process, streamlining the code and enhancing performance.

These changes aim to improve the flexibility and efficiency of theme management within the application, providing a more robust styling system.
---
 docs/app/composables/useTheme.ts      | 27 ++++++++++++++----------
 docs/app/utils/theme-engine/export.ts | 30 ++++++++++++---------------
 2 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 7f94dda174..6782897838 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -2,7 +2,7 @@ import { defu } from 'defu'
 import { THEME_TAG_IDS, THEME_STATE_KEYS, THEME_STORAGE_KEYS } from '../utils/theme-keys'
 import { useLocalStorage } from '@vueuse/core'
 import { themeIcons, cssVariableDefaults, readLocalStorage, FONT_WEIGHT_DEFAULTS } from '../utils/theme'
-import { generateCSS, generateConfig, mergeUi, isDefaultStyle, DEFAULT_COLORS, THEME_DEFAULTS, SEMANTIC_ALIASES, LIBRARY_TOKEN_DEFAULTS } from '../utils/theme-engine'
+import { generateCSS, generateConfig, mergeUi, isDefaultStyle, styleTokens, DEFAULT_COLORS, THEME_DEFAULTS, SEMANTIC_ALIASES, LIBRARY_TOKEN_DEFAULTS } from '../utils/theme-engine'
 import type { ThemeDoc, ThemePalette } from '../utils/theme-engine'
 import { omit } from '#ui/utils'
 import colors from 'tailwindcss/colors'
@@ -439,11 +439,24 @@ export function useTheme() {
       doc.palettes = Object.fromEntries(paletteEntries.map(([name, shades]) => [name, { shades: shades as ThemePalette['shades'] }]))
     }
 
+    // The studio's style prefs, read from the shared reactive state (the
+    // studio owns writes) so callers watching currentDoc() re-run on style
+    // edits — a raw localStorage read here would be invisible to reactivity.
+    const style = stylePrefs.value
+    if (!isDefaultStyle(style)) {
+      doc.style = style
+    }
+
     // Diff against the LIBRARY defaults, not the docs baseline — the export
     // must reproduce the preview on top of a stock @nuxt/ui install.
     // Studio-only vars (hand-rolled preview markup) stay out of exports.
-    const light = Object.fromEntries(Object.entries(cssVariablesData.value.light || {}).filter(([key, val]) => !key.startsWith('--studio-') && val !== LIBRARY_TOKEN_DEFAULTS.light[key as keyof typeof LIBRARY_TOKEN_DEFAULTS.light]))
-    const dark = Object.fromEntries(Object.entries(cssVariablesData.value.dark || {}).filter(([key, val]) => !key.startsWith('--studio-') && val !== LIBRARY_TOKEN_DEFAULTS.dark[key as keyof typeof LIBRARY_TOKEN_DEFAULTS.dark]))
+    // The style treatment's variables live in this channel too (the studio
+    // applies them there for the live preview) — but doc.style already
+    // accounts for them, so tokens only keep values that DIVERGE from the
+    // style expansion.
+    const styleVars = doc.style ? styleTokens(doc.style) : { light: {}, dark: {} }
+    const light = Object.fromEntries(Object.entries(cssVariablesData.value.light || {}).filter(([key, val]) => !key.startsWith('--studio-') && val !== LIBRARY_TOKEN_DEFAULTS.light[key as keyof typeof LIBRARY_TOKEN_DEFAULTS.light] && val !== (styleVars.light as Record<string, string>)[key]))
+    const dark = Object.fromEntries(Object.entries(cssVariablesData.value.dark || {}).filter(([key, val]) => !key.startsWith('--studio-') && val !== LIBRARY_TOKEN_DEFAULTS.dark[key as keyof typeof LIBRARY_TOKEN_DEFAULTS.dark] && val !== (styleVars.dark as Record<string, string>)[key]))
     if (Object.keys(light).length || Object.keys(dark).length) {
       doc.tokens = {
         ...(Object.keys(light).length ? { light } : {}),
@@ -456,14 +469,6 @@ export function useTheme() {
       doc.components = extras.ui
     }
 
-    // The studio's style prefs, read from the shared reactive state (the
-    // studio owns writes) so callers watching currentDoc() re-run on style
-    // edits — a raw localStorage read here would be invisible to reactivity.
-    const style = stylePrefs.value
-    if (!isDefaultStyle(style)) {
-      doc.style = style
-    }
-
     return doc
   }
 
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index ac776159cc..55a4f9217b 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -145,26 +145,22 @@ export function generateCSS(doc: ThemeDoc): string {
     style.light['--ui-shadow-final-inner'] = 'color-mix(in oklab, var(--ui-inner-shadow-color, var(--ui-shadow-color)) var(--ui-inner-shadow-opacity, 15%), transparent)'
   }
 
-  if (Object.keys(style.light).length) {
-    lines.push('', ':root, .light {', ...Object.entries(style.light).map(([key, val]) => `  ${key}: ${val};`), '}')
-  }
-  if (Object.keys(style.dark).length) {
-    lines.push('', '.dark {', ...Object.entries(style.dark).map(([key, val]) => `  ${key}: ${val};`), '}')
-  }
-
-  const lightOverrides = Object.entries(doc.tokens?.light || {})
-  if (lightOverrides.length) {
-    lines.push('', ':root, .light {', ...lightOverrides.map(([key, val]) => `  ${key}: ${val};`), '}')
+  // One block per mode: the style expansion and the doc's explicit token
+  // overrides merge, explicit values last so they win — a doc whose tokens
+  // duplicate the style expansion (older exports round-tripped through
+  // import) collapses instead of printing every variable twice.
+  const light = { ...style.light, ...doc.tokens?.light }
+  if (Object.keys(light).length) {
+    lines.push('', ':root, .light {', ...Object.entries(light).map(([key, val]) => `  ${key}: ${val};`), '}')
   }
 
-  const darkLines: string[] = []
-  if (doc.blackAsPrimary) {
-    darkLines.push('  --ui-primary: white;')
+  const dark = {
+    ...style.dark,
+    ...(doc.blackAsPrimary ? { '--ui-primary': 'white' } : {}),
+    ...doc.tokens?.dark
   }
-  darkLines.push(...Object.entries(doc.tokens?.dark || {}).map(([key, val]) => `  ${key}: ${val};`))
-
-  if (darkLines.length) {
-    lines.push('', '.dark {', ...darkLines, '}')
+  if (Object.keys(dark).length) {
+    lines.push('', '.dark {', ...Object.entries(dark).map(([key, val]) => `  ${key}: ${val};`), '}')
   }
 
   return lines.join('\n')

From 6adf871ae311a0f2f58283ac7e32c7347716806e Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Thu, 16 Jul 2026 23:09:59 +0200
Subject: [PATCH 151/185] refactor(docs): simplify header and theme management
 logic

- Removed the previous studio menu structure from Header.vue, replacing it with a direct integration of the ThemeStudioViewSwitcher component for improved modularity.
- Updated theme.vue to enhance the reset functionality, introducing a two-stage reset process and refining the conditions for enabling the reset button.

These changes aim to streamline the header's functionality and improve the user experience in theme management.
---
 docs/app/components/header/Header.vue | 72 +--------------------------
 docs/app/pages/theme.vue              | 25 +++++++---
 2 files changed, 19 insertions(+), 78 deletions(-)

diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index 744e4fdad6..4a3b6b8b79 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -11,56 +11,10 @@ function toggleChat() {
   open.value = !open.value
 }
 
-/**
- * On /theme the header center becomes the studio's view switcher, with the
- * regular pages folded into a single Menu popover.
- */
+// On /theme the header center becomes the studio's view switcher.
 const isStudio = computed(() => route.path === '/theme')
 
 const viewListOpen = ref(false)
-
-// The popover body is a vertical menu so Resources can nest as a
-// collapsed group — horizontal popover child lists only render one level.
-const studioMenu = [{ label: 'Menu', slot: 'pages' as const }]
-
-const studioMenuLinks = [{
-  label: 'Docs',
-  icon: 'i-lucide-book-open',
-  to: '/docs'
-}, {
-  label: 'Templates',
-  icon: 'i-lucide-panels-top-left',
-  to: '/templates'
-}, {
-  label: 'Figma',
-  icon: 'i-simple-icons-figma',
-  to: '/figma'
-}, {
-  label: 'Releases',
-  icon: 'i-lucide-rocket',
-  to: '/releases'
-}, {
-  label: 'Resources',
-  icon: 'i-lucide-library',
-  children: [{
-    label: 'Showcase',
-    icon: 'i-lucide-presentation',
-    to: '/showcase'
-  }, {
-    label: 'Community',
-    icon: 'i-lucide-globe',
-    to: '/community'
-  }, {
-    label: 'Playground',
-    icon: 'i-lucide-square-terminal',
-    to: '/play',
-    target: '_blank'
-  }, {
-    label: 'Blog',
-    icon: 'i-lucide-newspaper',
-    to: '/blog'
-  }]
-}]
 </script>
 
 <!-- eslint-disable vue/no-template-shadow -->
@@ -79,29 +33,7 @@ const studioMenuLinks = [{
       <VersionMenu />
     </template>
 
-    <!-- The popover is sized explicitly: with a single trigger the
-         default viewport wrapper tracks the root's width, not the
-         content's. -->
-    <UNavigationMenu
-      v-if="isStudio"
-      :items="studioMenu"
-      variant="link"
-      content-orientation="vertical"
-      :ui="{ viewportWrapper: 'w-[12rem]', content: 'w-[12rem]' }"
-    >
-      <template #list-leading>
-        <ThemeStudioViewSwitcher v-model:open="viewListOpen" />
-      </template>
-
-      <template #pages-content>
-        <UNavigationMenu
-          orientation="vertical"
-
-          :items="studioMenuLinks"
-          class="p-2"
-        />
-      </template>
-    </UNavigationMenu>
+    <ThemeStudioViewSwitcher v-if="isStudio" v-model:open="viewListOpen" />
     <UNavigationMenu v-else :items="desktopLinks" variant="link" content-orientation="vertical" />
 
     <template #right>
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 04e9d8fc3b..cdf6de8b81 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -52,16 +52,25 @@ const groupDirtyFlags = {
 }
 
 /**
- * The toolbar reset matches the section resets: back to the BASELINE —
- * the active preset when one is set, stock otherwise. Disabled while
- * nothing diverges from it.
+ * The toolbar reset is two-stage: edits on top of a preset reset back to
+ * the preset (matching the section resets' baseline), and a second press —
+ * already clean at the preset — clears the preset back to stock Nuxt UI.
+ * Disabled only once nothing diverges from stock.
  */
-const anyDirty = computed(() => Object.values(groupDirtyFlags).some(flag => flag.value))
-const baselinePreset = computed(() => presets.find(preset => preset.id === activePreset.value))
-const resetLabel = computed(() => baselinePreset.value ? `Reset to ${baselinePreset.value.name}` : 'Reset theme')
+// Gated on `mounted`: the persisted theme is client-only, and a state that
+// diverges from the SSR render would leave stale hydration-adopted
+// attributes (a disabled= that never lifts) on the button.
+const anyDirty = computed(() => mounted.value && Object.values(groupDirtyFlags).some(flag => flag.value))
+const baselinePreset = computed(() => mounted.value ? presets.find(preset => preset.id === activePreset.value) : undefined)
+const resetsToPreset = computed(() => Boolean(baselinePreset.value) && anyDirty.value)
+const canReset = computed(() => anyDirty.value || Boolean(baselinePreset.value))
+const resetLabel = computed(() => {
+  if (resetsToPreset.value) return `Reset to ${baselinePreset.value!.name}`
+  return baselinePreset.value ? 'Reset to Nuxt UI theme' : 'Reset theme'
+})
 
 function resetToBaseline() {
-  if (baselinePreset.value) applyPreset(baselinePreset.value)
+  if (resetsToPreset.value) applyPreset(baselinePreset.value!)
   else resetTheme()
 }
 
@@ -283,7 +292,7 @@ const shareMode = ref<'import' | 'export'>('export')
                 icon="i-lucide-rotate-ccw"
                 color="neutral"
                 variant="subtle"
-                :disabled="!anyDirty"
+                :disabled="!canReset"
                 :aria-label="resetLabel"
                 @click="resetToBaseline"
               />

From 25c28085307f41eb92a950435d035b73f579002a Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Fri, 17 Jul 2026 18:22:45 +0200
Subject: [PATCH 152/185] feat(theme-engine): enhance CSS generation for light
 and dark themes

- Introduced logic to restate library dark defaults for tokens overridden in light only, ensuring proper rendering in dark mode.
- Updated the import process to remove dark defaults that match light overrides, preventing unnecessary token growth during round-trips.
- Added tests to verify the correct behavior of CSS generation and token handling for light and dark themes.

These changes improve the consistency and efficiency of theme management, particularly in handling token overrides across different modes.
---
 docs/app/utils/theme-engine/export.ts | 22 ++++++++++++++---
 docs/app/utils/theme-engine/import.ts | 11 ++++++++-
 test/utils/theme-engine.spec.ts       | 35 +++++++++++++++++++++++++++
 3 files changed, 63 insertions(+), 5 deletions(-)

diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index 55a4f9217b..b14bfbbb4f 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -2,6 +2,7 @@ import { themeIcons } from '../theme'
 import type { ThemeDoc } from './types'
 import { DEFAULT_COLORS, THEME_DEFAULTS } from './types'
 import { styleComponents, styleTokens, mergeUi, BORDER_WIDTH_DEFAULT } from './styles'
+import { LIBRARY_TOKEN_DEFAULTS } from './resolve'
 
 /**
  * Generate the minimal `main.css`. The document only holds overrides, so
@@ -150,15 +151,28 @@ export function generateCSS(doc: ThemeDoc): string {
   // duplicate the style expansion (older exports round-tripped through
   // import) collapses instead of printing every variable twice.
   const light = { ...style.light, ...doc.tokens?.light }
-  if (Object.keys(light).length) {
-    lines.push('', ':root, .light {', ...Object.entries(light).map(([key, val]) => `  ${key}: ${val};`), '}')
-  }
 
-  const dark = {
+  const dark: Record<string, string> = {
     ...style.dark,
     ...(doc.blackAsPrimary ? { '--ui-primary': 'white' } : {}),
     ...doc.tokens?.dark
   }
+  // The `:root, .light` block matches `<html class="dark">` too (`:root` is
+  // unconditional) and lands after the library's `.dark` block, so a token
+  // overridden for light only would win the source-order tie in dark mode.
+  // Restate the library's dark value so the `.dark` block below wins it back.
+  for (const [key, value] of Object.entries(light)) {
+    if (key in dark) continue
+    const fallback = (LIBRARY_TOKEN_DEFAULTS.dark as Record<string, string>)[key]
+    if (fallback && fallback !== value) {
+      dark[key] = fallback
+    }
+  }
+
+  if (Object.keys(light).length) {
+    lines.push('', ':root, .light {', ...Object.entries(light).map(([key, val]) => `  ${key}: ${val};`), '}')
+  }
+
   if (Object.keys(dark).length) {
     lines.push('', '.dark {', ...Object.entries(dark).map(([key, val]) => `  ${key}: ${val};`), '}')
   }
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index c5142a5e70..e9c53785ba 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -13,7 +13,7 @@ import {
   SIZE_SUPPORT,
   COLOR_SUPPORT
 } from './styles'
-import { parseUiColorRef } from './resolve'
+import { parseUiColorRef, LIBRARY_TOKEN_DEFAULTS } from './resolve'
 import { themeIcons } from '../theme'
 
 /**
@@ -791,6 +791,15 @@ export function importTheme(input: { css?: string, config?: string }): ThemeImpo
       // its .dark counterpart is generated, not a token choice
       if (css.dark['--ui-primary'] === 'white') delete css.dark['--ui-primary']
     }
+    // The export restates the library's dark default under `.dark` for any
+    // token overridden in light only (the `:root, .light` block would win
+    // the source-order tie in dark mode otherwise). Generated, not a choice
+    // — drop it so the round-trip doesn't grow explicit tokens.
+    for (const [key, value] of Object.entries(css.dark)) {
+      if (key in css.light && value === (LIBRARY_TOKEN_DEFAULTS.dark as Record<string, string>)[key]) {
+        Reflect.deleteProperty(css.dark, key)
+      }
+    }
     if (Object.keys(css.light).length || Object.keys(css.dark).length) {
       doc.tokens = {
         ...(Object.keys(css.light).length ? { light: css.light } : {}),
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index f24a15ae82..aa2542982d 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -73,6 +73,41 @@ describe('theme-engine', () => {
       ].join('\n'))
     })
 
+    it('restates library dark defaults for tokens overridden in light only', () => {
+      // `:root, .light` matches html.dark too and lands after the library's
+      // `.dark` block — without a dark restatement the light value wins the
+      // source-order tie and dark mode renders light.
+      const css = generateCSS({
+        version: 1,
+        tokens: {
+          light: {
+            '--ui-bg': 'var(--ui-color-neutral-50)',
+            '--ui-text-inverted': 'var(--ui-color-neutral-50)'
+          }
+        }
+      })
+
+      expect(css).toContain([
+        '.dark {',
+        '  --ui-bg: var(--ui-color-neutral-900);',
+        '  --ui-text-inverted: var(--ui-color-neutral-900);',
+        '}'
+      ].join('\n'))
+    })
+
+    it('does not restate a dark default the doc already overrides', () => {
+      const css = generateCSS({
+        version: 1,
+        tokens: {
+          light: { '--ui-bg': 'var(--ui-color-neutral-50)' },
+          dark: { '--ui-bg': 'var(--ui-color-neutral-950)' }
+        }
+      })
+
+      expect(css).toContain('.dark {\n  --ui-bg: var(--ui-color-neutral-950);\n}')
+      expect(css).not.toContain('neutral-900')
+    })
+
     it('does not emit values matching the defaults', () => {
       const css = generateCSS({ version: 1, radius: 0.25, font: { sans: 'Public Sans' } })
 

From 405bd599647f9b508d66e5f394106227aca16333 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 20 Jul 2026 12:41:55 +0200
Subject: [PATCH 153/185] fix(theme-studio): refine slider step behavior and
 tooltip functionality

- Adjusted the step value for saturation and hueShift effects to 1 for finer control.
- Enhanced the tooltip text to reflect the state of modifiers more accurately, indicating when no modifiers are active.
- Implemented keyboard navigation for numeric readouts, allowing users to adjust values using arrow keys and commit changes with Enter.

These updates improve user interaction and precision in the Theme Studio component.
---
 .../theme-studio/ThemeStudioPaletteEditor.vue | 13 +++--
 .../theme-studio/ThemeStudioSliderRow.vue     | 51 ++++++++++++++++++-
 2 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 0467a55e76..88740dbe30 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -308,8 +308,8 @@ const modifiersOpen = ref(false)
 const effectRows = [
   { key: 'lightness', label: 'Lightness', min: -30, max: 30, step: 1, unit: '%' },
   { key: 'contrast', label: 'Contrast', min: -50, max: 50, step: 1, unit: '%' },
-  { key: 'saturation', label: 'Saturation', min: -100, max: 200, step: 5, unit: '%' },
-  { key: 'hueShift', label: 'Hue', min: -180, max: 180, step: 5, unit: '°' }
+  { key: 'saturation', label: 'Saturation', min: -100, max: 200, step: 1, unit: '%' },
+  { key: 'hueShift', label: 'Hue', min: -180, max: 180, step: 1, unit: '°' }
 ] as const
 
 /** Re-derive the displayed curves from the base — a user edit, live-applied. */
@@ -446,10 +446,13 @@ function resetEffects() {
               class="justify-start"
             />
 
-            <UTooltip text="Reset modifiers">
+            <!-- Modifiers live outside the doc (presets land with them
+                 zeroed), so resetting to defaults IS resetting to the
+                 preset — only the dirty styling mirrors the section resets. -->
+            <UTooltip :text="effectsDirty ? 'Reset modifiers' : 'No modifiers active'">
               <UButton
                 icon="i-lucide-rotate-ccw"
-                color="neutral"
+                :color="effectsDirty ? 'primary' : 'neutral'"
                 variant="ghost"
                 size="sm"
                 :disabled="!effectsDirty"
@@ -467,7 +470,7 @@ function resetEffects() {
                 icon="i-lucide-eye"
                 :min="0"
                 :max="200"
-                :step="5"
+                :step="1"
                 unit="%"
                 @update:model-value="applyEffects()"
               />
diff --git a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
index 489307c6c9..743d84a254 100644
--- a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
@@ -61,6 +61,39 @@ const emit = defineEmits<{ reset: [] }>()
 const display = computed(() => shade.value
   ? String(stop.value)
   : `${String(value.value).replace(/^(-?)0\./, '$1.')}${props.unit ?? ''}`)
+
+/** Decimal places the step carries — keyboard nudges stay on its grid. */
+const stepDecimals = computed(() => (String(props.step).split('.')[1] || '').length)
+
+function snap(raw: number): number {
+  const stepped = props.min + Math.round((raw - props.min) / props.step) * props.step
+  return Number(Math.min(props.max, Math.max(props.min, stepped)).toFixed(stepDecimals.value))
+}
+
+/**
+ * The numeric readout doubles as an input: type a value, or nudge with
+ * ArrowUp/ArrowDown (Shift for ×10 steps) without reaching for the slider.
+ */
+function onReadoutKeydown(event: KeyboardEvent) {
+  if (event.key === 'Enter') {
+    (event.target as HTMLInputElement).blur()
+    return
+  }
+  if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return
+  event.preventDefault()
+  const steps = (event.key === 'ArrowUp' ? 1 : -1) * (event.shiftKey ? 10 : 1)
+  value.value = snap(value.value + steps * props.step)
+}
+
+function commitReadout(event: Event) {
+  const input = event.target as HTMLInputElement
+  const parsed = Number.parseFloat(input.value)
+  if (!Number.isNaN(parsed)) {
+    value.value = snap(parsed)
+  }
+  // A rejected or same-value commit doesn't re-render — restate the text.
+  input.value = display.value
+}
 </script>
 
 <template>
@@ -103,7 +136,23 @@ const display = computed(() => shade.value
       } : undefined"
     />
 
-    <span class="text-xs text-dimmed font-mono w-8 text-right shrink-0 truncate" :title="display">{{ display }}</span>
+    <!-- No v-model: partial keystrokes must not live-apply — the value
+         commits on change/Enter, arrows nudge through the keydown handler. -->
+    <UInput
+      v-if="!shade"
+      :model-value="display"
+      type="text"
+      inputmode="decimal"
+      autocomplete="off"
+      variant="none"
+      size="xs"
+      class="w-8 shrink-0"
+      :ui="{ base: 'p-0 text-xs text-right font-mono text-dimmed focus:text-default' }"
+      :aria-label="`${label ?? 'Value'} (arrow keys to adjust, Shift for ×10)`"
+      @keydown="onReadoutKeydown"
+      @change="commitReadout"
+    />
+    <span v-else class="text-xs text-dimmed font-mono w-8 text-right shrink-0 truncate" :title="display">{{ display }}</span>
 
     <UButton
       v-if="resettable"

From 6127af18ae4f3ea58ba504d646fa0335629addbc Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 20 Jul 2026 12:58:08 +0200
Subject: [PATCH 154/185] fix(theme-studio): improve slider value clamping and
 keyboard interaction

- Replaced the snap function with a clamp function to ensure precise value handling within defined limits, enhancing the slider's behavior.
- Updated keyboard navigation to utilize the new clamping logic for better user experience when adjusting values with arrow keys and committing changes.

These changes refine the interaction model for the Theme Studio component, ensuring more accurate value adjustments.
---
 .../theme-studio/ThemeStudioSliderRow.vue       | 17 +++++++++--------
 docs/app/pages/theme.vue                        |  7 +++++--
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
index 743d84a254..ac825b6218 100644
--- a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
@@ -62,12 +62,13 @@ const display = computed(() => shade.value
   ? String(stop.value)
   : `${String(value.value).replace(/^(-?)0\./, '$1.')}${props.unit ?? ''}`)
 
-/** Decimal places the step carries — keyboard nudges stay on its grid. */
-const stepDecimals = computed(() => (String(props.step).split('.')[1] || '').length)
-
-function snap(raw: number): number {
-  const stepped = props.min + Math.round((raw - props.min) / props.step) * props.step
-  return Number(Math.min(props.max, Math.max(props.min, stepped)).toFixed(stepDecimals.value))
+/**
+ * Typed values keep their precision — a value between step stops is a
+ * deliberate choice, so only the range clamps it (which also caps runaway
+ * numbers). The toFixed sweeps float noise from step arithmetic.
+ */
+function clamp(raw: number): number {
+  return Number(Math.min(props.max, Math.max(props.min, raw)).toFixed(4))
 }
 
 /**
@@ -82,14 +83,14 @@ function onReadoutKeydown(event: KeyboardEvent) {
   if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return
   event.preventDefault()
   const steps = (event.key === 'ArrowUp' ? 1 : -1) * (event.shiftKey ? 10 : 1)
-  value.value = snap(value.value + steps * props.step)
+  value.value = clamp(value.value + steps * props.step)
 }
 
 function commitReadout(event: Event) {
   const input = event.target as HTMLInputElement
   const parsed = Number.parseFloat(input.value)
   if (!Number.isNaN(parsed)) {
-    value.value = snap(parsed)
+    value.value = clamp(parsed)
   }
   // A rejected or same-value commit doesn't re-render — restate the text.
   input.value = display.value
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index cdf6de8b81..b4039273f3 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -99,7 +99,10 @@ defineShortcuts({
   meta_z: undo,
   meta_shift_z: redo,
   ctrl_y: redo,
-  ctrl_shift_d: toggleColorMode
+  ctrl_shift_d: toggleColorMode,
+  // Enters fullscreen and toggles back out; Esc also exits (below). Auto-
+  // suppressed while an input is focused, so it never eats a typed 'f'.
+  f: () => (fullscreen.value = !fullscreen.value)
 })
 
 // Esc exits fullscreen — but NOT through defineShortcuts, which
@@ -320,7 +323,7 @@ const shareMode = ref<'import' | 'export'>('export')
               </UFieldGroup>
             </div>
 
-            <UTooltip :text="fullscreen ? 'Exit fullscreen' : 'Fullscreen preview'" :kbds="fullscreen ? ['Esc'] : undefined">
+            <UTooltip :text="fullscreen ? 'Exit fullscreen' : 'Fullscreen preview'" :kbds="fullscreen ? ['Esc'] : ['F']">
               <UButton
                 :icon="fullscreen ? 'i-lucide-minimize' : 'i-lucide-maximize'"
                 color="neutral"

From d7968cda9cf1cf8f62ae7892182ff5ccba9fffb5 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 20 Jul 2026 16:50:07 +0200
Subject: [PATCH 155/185] feat(docs/theme): pack-aware icons across the studio,
 plus fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Route the theme studio's own icons through the applied icon pack so the
whole studio skins to the selected theme instead of staying Lucide —
toolbar controls, header (Ask-AI/GitHub/theme picker), preset menu, dice,
view switcher, the ⌘K search links, every preview template, and the
component wall.

- Add per-pack icon maps kept OUT of the exported theme config:
  studioIcons (chrome), studioExtraIcons (functional demo glyphs,
  Lucide-default + pixel overrides), studioViewIcons (view switcher),
  resolved through reactive (toReactive) composables.
- Add a pixelarticons ("Pixel") set and point the Comic preset at it.
- Remount the preview on icon-pack change (:key) so the demos, which
  resolve icons into plain data at setup, re-resolve on a live swap.

Also on this branch:
- Tabs: the pill list now follows the shadow treatment (was flat); strip
  the stock trigger SSR shadow via the library's own modifier chain.
- Persist custom palettes + modifiers reliably across reload (self-heal
  re-derives them from the editor curves after the plugin restore).
- Two-stage reset button, custom slider values, F fullscreen shortcut.
- Fix dark-mode export: restate library dark defaults for light-only
  token overrides so `:root, .light` can't win the source-order tie.
- Source Serif 4 headings for the Anthropic preset.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/app/components/VersionMenu.vue           |   2 +-
 docs/app/components/header/Header.vue         |   7 +-
 .../playground/PlaygroundAnalytics.vue        |   3 +-
 .../playground/PlaygroundAnnouncement.vue     |   3 +-
 .../playground/PlaygroundAuthForm.vue         |   5 +-
 .../playground/PlaygroundBadges.vue           |   9 +-
 .../playground/PlaygroundButtons.vue          |  13 +-
 .../playground/PlaygroundCommandPalette.vue   |   7 +-
 .../playground/PlaygroundDashboard.vue        |  12 +-
 .../components/playground/PlaygroundInput.vue |   7 +-
 .../playground/PlaygroundInviteTeam.vue       |   3 +-
 .../playground/PlaygroundNavigation.vue       |  13 +-
 .../playground/PlaygroundPrompt.vue           |  31 +--
 .../playground/PlaygroundReportBug.vue        |   3 +-
 .../components/playground/PlaygroundTabs.vue  |   6 +-
 .../playground/PlaygroundTransactions.vue     |   8 +-
 .../theme-studio/ThemeStudioPicker.vue        |   5 +-
 .../theme-studio/ThemeStudioPresetMenu.vue    |  16 +-
 .../theme-studio/ThemeStudioViewChangelog.vue |   6 +-
 .../theme-studio/ThemeStudioViewChat.vue      |  21 +-
 .../theme-studio/ThemeStudioViewDashboard.vue |  89 +++----
 .../theme-studio/ThemeStudioViewDocs.vue      |  37 +--
 .../theme-studio/ThemeStudioViewEditor.vue    |  27 ++-
 .../theme-studio/ThemeStudioViewGrid.vue      |   3 +-
 .../theme-studio/ThemeStudioViewLanding.vue   |  11 +-
 .../theme-studio/ThemeStudioViewPortfolio.vue |  29 ++-
 .../theme-studio/ThemeStudioViewSaas.vue      |  39 +--
 .../theme-studio/ThemeStudioViewSwitcher.vue  |   6 +-
 docs/app/composables/useSearch.ts             |  15 +-
 docs/app/composables/useStudioIcons.ts        |  29 +++
 docs/app/composables/useTheme.ts              |   4 +
 docs/app/composables/useThemeStudio.ts        |  38 +++
 docs/app/composables/useThemeStudioView.ts    |  38 ++-
 docs/app/pages/theme.vue                      |  28 ++-
 docs/app/utils/theme-engine/presets.ts        |   4 +-
 docs/app/utils/theme-engine/styles.ts         |  22 +-
 docs/app/utils/theme.ts                       | 222 ++++++++++++++++++
 37 files changed, 626 insertions(+), 195 deletions(-)
 create mode 100644 docs/app/composables/useStudioIcons.ts

diff --git a/docs/app/components/VersionMenu.vue b/docs/app/components/VersionMenu.vue
index 916093e42a..1ebeac9c5e 100644
--- a/docs/app/components/VersionMenu.vue
+++ b/docs/app/components/VersionMenu.vue
@@ -38,7 +38,7 @@ const items = computed(() => {
       variant="subtle"
       :trailing-icon="appConfig.ui.icons.chevronDown"
       size="xs"
-      class="-mb-[6px] font-semibold rounded-full truncate"
+      class="-mb-[6px] font-semibold rounded-xl truncate"
       :class="[open && 'bg-primary/15']"
       :ui="{
         trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index 4a3b6b8b79..7a9d3df651 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -3,6 +3,9 @@ const route = useRoute()
 const { desktopLinks } = useHeader()
 const { open } = useChat()
 const { track } = useAnalytics()
+// The Ask-AI button skins to the applied icon pack, like the rest of the
+// studio chrome (the theme applies site-wide, so this stays consistent).
+const studioIcons = useStudioIcons()
 
 function toggleChat() {
   if (!open.value) {
@@ -45,7 +48,7 @@ const viewListOpen = ref(false)
         <UButton
           color="neutral"
           variant="ghost"
-          icon="i-lucide-bot-message-square"
+          :icon="studioIcons.assistant"
           aria-label="Ask AI for help"
           @click="toggleChat"
         />
@@ -59,7 +62,7 @@ const viewListOpen = ref(false)
           variant="ghost"
           to="https://github.com/nuxt/ui"
           target="_blank"
-          icon="i-simple-icons-github"
+          :icon="studioIcons.github"
           aria-label="GitHub"
         />
       </UTooltip>
diff --git a/docs/app/components/playground/PlaygroundAnalytics.vue b/docs/app/components/playground/PlaygroundAnalytics.vue
index 210e25989a..63e9ce431e 100644
--- a/docs/app/components/playground/PlaygroundAnalytics.vue
+++ b/docs/app/components/playground/PlaygroundAnalytics.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const extra = useStudioExtraIcons()
 const bars = [40, 65, 52, 80, 60, 95, 72]
 const days = ['M', 'T', 'W', 'T', 'F', 'S', 'S']
 </script>
@@ -14,7 +15,7 @@ const days = ['M', 'T', 'W', 'T', 'F', 'S', 'S']
           418.2K
         </p>
       </div>
-      <UBadge color="success" variant="subtle" size="sm" icon="i-lucide-trending-up">
+      <UBadge color="success" variant="subtle" size="sm" :icon="extra.trendingUp">
         +10%
       </UBadge>
     </div>
diff --git a/docs/app/components/playground/PlaygroundAnnouncement.vue b/docs/app/components/playground/PlaygroundAnnouncement.vue
index 8274541069..9b1262bb3f 100644
--- a/docs/app/components/playground/PlaygroundAnnouncement.vue
+++ b/docs/app/components/playground/PlaygroundAnnouncement.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const appConfig = useAppConfig()
 const toast = useToast()
 </script>
 
@@ -24,7 +25,7 @@ const toast = useToast()
         label="Learn more"
         color="neutral"
         variant="subtle"
-        trailing-icon="i-lucide-arrow-right"
+        :trailing-icon="appConfig.ui.icons.arrowRight"
         @click="toast.add({ title: 'Observability Plus' })"
       />
     </div>
diff --git a/docs/app/components/playground/PlaygroundAuthForm.vue b/docs/app/components/playground/PlaygroundAuthForm.vue
index 81f0f9f1c7..71767613a7 100644
--- a/docs/app/components/playground/PlaygroundAuthForm.vue
+++ b/docs/app/components/playground/PlaygroundAuthForm.vue
@@ -3,6 +3,7 @@ import * as z from 'zod'
 import type { FormSubmitEvent, AuthFormField } from '@nuxt/ui'
 
 const toast = useToast()
+const extra = useStudioExtraIcons()
 
 const fields: AuthFormField[] = [{
   name: 'email',
@@ -30,7 +31,7 @@ const providers = [{
   }
 }, {
   label: 'GitHub',
-  icon: 'i-simple-icons-github',
+  icon: extra.github,
   onClick: () => {
     toast.add({ title: 'GitHub', description: 'Login with GitHub' })
   }
@@ -54,7 +55,7 @@ function onSubmit(payload: FormSubmitEvent<Schema>) {
       :schema="schema"
       title="Login"
       description="Enter your credentials to access your account."
-      icon="i-lucide-user"
+      :icon="extra.user"
       :fields="fields"
       :providers="providers"
       @submit="onSubmit"
diff --git a/docs/app/components/playground/PlaygroundBadges.vue b/docs/app/components/playground/PlaygroundBadges.vue
index 49e7959d58..d650755a60 100644
--- a/docs/app/components/playground/PlaygroundBadges.vue
+++ b/docs/app/components/playground/PlaygroundBadges.vue
@@ -1,3 +1,8 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+const extra = useStudioExtraIcons()
+</script>
+
 <template>
   <div class="flex flex-col gap-3 p-4">
     <div class="flex flex-wrap gap-2">
@@ -9,10 +14,10 @@
     </div>
 
     <div class="flex flex-wrap items-center gap-2">
-      <UBadge color="success" variant="soft" icon="i-lucide-circle-check">
+      <UBadge color="success" variant="soft" :icon="appConfig.ui.icons.success">
         Shipped
       </UBadge>
-      <UBadge color="warning" variant="soft" icon="i-lucide-clock">
+      <UBadge color="warning" variant="soft" :icon="extra.clock">
         Pending
       </UBadge>
       <UBadge color="neutral" variant="soft" size="lg">
diff --git a/docs/app/components/playground/PlaygroundButtons.vue b/docs/app/components/playground/PlaygroundButtons.vue
index bd18617641..068b5321a6 100644
--- a/docs/app/components/playground/PlaygroundButtons.vue
+++ b/docs/app/components/playground/PlaygroundButtons.vue
@@ -1,3 +1,8 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+const extra = useStudioExtraIcons()
+</script>
+
 <template>
   <div class="flex flex-col gap-3 p-4">
     <div class="flex flex-wrap gap-2">
@@ -11,13 +16,13 @@
     <div class="flex flex-wrap gap-2">
       <UButton label="Get started" icon="i-lucide-rocket" color="primary" />
       <UButton label="Loading" loading variant="outline" />
-      <UButton icon="i-lucide-heart" color="error" variant="soft" square aria-label="Like" />
-      <UButton icon="i-lucide-settings" color="neutral" variant="ghost" square aria-label="Settings" />
+      <UButton :icon="extra.heart" color="error" variant="soft" square aria-label="Like" />
+      <UButton :icon="extra.settings" color="neutral" variant="ghost" square aria-label="Settings" />
     </div>
 
     <UFieldGroup>
-      <UButton label="Copy" icon="i-lucide-copy" color="neutral" variant="subtle" />
-      <UButton icon="i-lucide-chevron-down" color="neutral" variant="subtle" square aria-label="More" />
+      <UButton label="Copy" :icon="appConfig.ui.icons.copy" color="neutral" variant="subtle" />
+      <UButton :icon="appConfig.ui.icons.chevronDown" color="neutral" variant="subtle" square aria-label="More" />
     </UFieldGroup>
   </div>
 </template>
diff --git a/docs/app/components/playground/PlaygroundCommandPalette.vue b/docs/app/components/playground/PlaygroundCommandPalette.vue
index 6cec931c7c..3febf35edd 100644
--- a/docs/app/components/playground/PlaygroundCommandPalette.vue
+++ b/docs/app/components/playground/PlaygroundCommandPalette.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const extra = useStudioExtraIcons()
 import type { CommandPaletteGroup, CommandPaletteItem } from '@nuxt/ui'
 
 const toast = useToast()
@@ -31,7 +32,7 @@ const groups = ref<CommandPaletteGroup<CommandPaletteItem>[]>([
       {
         label: 'Add new file',
         suffix: 'Create a new file in the current workspace.',
-        icon: 'i-lucide-file-plus',
+        icon: extra.filePlus,
         kbds: ['meta', 'N'],
         onSelect() {
           toast.add({ title: 'Add new file' })
@@ -40,7 +41,7 @@ const groups = ref<CommandPaletteGroup<CommandPaletteItem>[]>([
       {
         label: 'Add new folder',
         suffix: 'Create a new folder in the current workspace.',
-        icon: 'i-lucide-folder-plus',
+        icon: extra.folderPlus,
         kbds: ['meta', 'F'],
         onSelect() {
           toast.add({ title: 'Add new folder' })
@@ -49,7 +50,7 @@ const groups = ref<CommandPaletteGroup<CommandPaletteItem>[]>([
       {
         label: 'Add label',
         suffix: 'Add a label to the current item.',
-        icon: 'i-lucide-tag',
+        icon: extra.tag,
         kbds: ['meta', 'L'],
         onSelect() {
           toast.add({ title: 'Add label' })
diff --git a/docs/app/components/playground/PlaygroundDashboard.vue b/docs/app/components/playground/PlaygroundDashboard.vue
index 91a43c7fbd..156ca0b613 100644
--- a/docs/app/components/playground/PlaygroundDashboard.vue
+++ b/docs/app/components/playground/PlaygroundDashboard.vue
@@ -2,15 +2,17 @@
 import type { DropdownMenuItem } from '@nuxt/ui'
 
 const toast = useToast()
+const appConfig = useAppConfig()
+const extra = useStudioExtraIcons()
 
 const items: DropdownMenuItem[][] = [
   [
-    { label: 'View report', icon: 'i-lucide-eye', onSelect: () => toast.add({ title: 'View report' }) },
+    { label: 'View report', icon: appConfig.ui.icons.eye, onSelect: () => toast.add({ title: 'View report' }) },
     { label: 'Export as CSV', icon: 'i-lucide-download', onSelect: () => toast.add({ title: 'Exporting…' }) },
-    { label: 'Refresh', icon: 'i-lucide-refresh-cw', onSelect: () => toast.add({ title: 'Refreshed' }) }
+    { label: 'Refresh', icon: appConfig.ui.icons.reload, onSelect: () => toast.add({ title: 'Refreshed' }) }
   ],
   [
-    { label: 'Delete', icon: 'i-lucide-trash', color: 'error', onSelect: () => toast.add({ title: 'Deleted', color: 'error' }) }
+    { label: 'Delete', icon: extra.trash, color: 'error', onSelect: () => toast.add({ title: 'Deleted', color: 'error' }) }
   ]
 ]
 
@@ -30,13 +32,13 @@ const progress = ref(75)
       </div>
 
       <div class="flex items-center gap-2">
-        <UBadge color="success" variant="subtle" size="sm" icon="i-lucide-trending-up">
+        <UBadge color="success" variant="subtle" size="sm" :icon="extra.trendingUp">
           +12.5%
         </UBadge>
 
         <UDropdownMenu :items="items" :ui="{ content: 'w-44' }">
           <UButton
-            icon="i-lucide-ellipsis-vertical"
+            :icon="appConfig.ui.icons.ellipsis"
             color="neutral"
             variant="ghost"
             size="sm"
diff --git a/docs/app/components/playground/PlaygroundInput.vue b/docs/app/components/playground/PlaygroundInput.vue
index 5470765382..ccaecbe806 100644
--- a/docs/app/components/playground/PlaygroundInput.vue
+++ b/docs/app/components/playground/PlaygroundInput.vue
@@ -1,15 +1,18 @@
 <script setup lang="ts">
+const appConfig = useAppConfig()
+const extra = useStudioExtraIcons()
+
 const email = ref('')
 </script>
 
 <template>
   <div class="flex flex-col gap-4 p-4">
     <UFormField label="Your email" description="We won't share your email." required>
-      <UInput v-model="email" type="email" placeholder="john@example.com" icon="i-lucide-mail" class="w-full" />
+      <UInput v-model="email" type="email" placeholder="john@example.com" :icon="extra.mail" class="w-full" />
     </UFormField>
 
     <UFormField label="Search" hint="⌘K">
-      <UInput placeholder="Search documentation…" icon="i-lucide-search" class="w-full">
+      <UInput placeholder="Search documentation…" :icon="appConfig.ui.icons.search" class="w-full">
         <template #trailing>
           <UKbd value="meta" />
           <UKbd value="K" />
diff --git a/docs/app/components/playground/PlaygroundInviteTeam.vue b/docs/app/components/playground/PlaygroundInviteTeam.vue
index 2dac25c04c..3422cf9e9e 100644
--- a/docs/app/components/playground/PlaygroundInviteTeam.vue
+++ b/docs/app/components/playground/PlaygroundInviteTeam.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const appConfig = useAppConfig()
 const toast = useToast()
 
 const roles = [
@@ -38,7 +39,7 @@ const link = 'https://app.nuxt.com/invite/x8f2k'
       <UInput :model-value="link" readonly class="w-full">
         <template #trailing>
           <UButton
-            icon="i-lucide-copy"
+            :icon="appConfig.ui.icons.copy"
             color="neutral"
             variant="link"
             size="xs"
diff --git a/docs/app/components/playground/PlaygroundNavigation.vue b/docs/app/components/playground/PlaygroundNavigation.vue
index eb6e2cc252..ee4db9fed6 100644
--- a/docs/app/components/playground/PlaygroundNavigation.vue
+++ b/docs/app/components/playground/PlaygroundNavigation.vue
@@ -1,16 +1,19 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui'
 
+const appConfig = useAppConfig()
+const extra = useStudioExtraIcons()
+
 const items: NavigationMenuItem[][] = [
   [
     { label: 'Dashboard', icon: 'i-lucide-layout-dashboard', active: true },
-    { label: 'Inbox', icon: 'i-lucide-inbox', badge: '4' },
-    { label: 'Projects', icon: 'i-lucide-folder' },
-    { label: 'Calendar', icon: 'i-lucide-calendar' }
+    { label: 'Inbox', icon: extra.inbox, badge: '4' },
+    { label: 'Projects', icon: appConfig.ui.icons.folder },
+    { label: 'Calendar', icon: extra.calendar }
   ],
   [
-    { label: 'Settings', icon: 'i-lucide-settings' },
-    { label: 'Help', icon: 'i-lucide-circle-help' }
+    { label: 'Settings', icon: extra.settings },
+    { label: 'Help', icon: appConfig.ui.icons.info }
   ]
 ]
 </script>
diff --git a/docs/app/components/playground/PlaygroundPrompt.vue b/docs/app/components/playground/PlaygroundPrompt.vue
index 4baf5d29c3..c9c902fd82 100644
--- a/docs/app/components/playground/PlaygroundPrompt.vue
+++ b/docs/app/components/playground/PlaygroundPrompt.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { DropdownMenuItem } from '@nuxt/ui'
 
+const appConfig = useAppConfig()
+const extra = useStudioExtraIcons()
+
 const toast = useToast()
 
 const input = ref('')
@@ -10,13 +13,13 @@ const webSearch = ref(true)
 
 const items = computed<DropdownMenuItem[][]>(() => [
   [
-    { label: 'Add files or photos', icon: 'i-lucide-paperclip', kbds: ['meta', 'U'] },
+    { label: 'Add files or photos', icon: extra.paperclip, kbds: ['meta', 'U'] },
     {
       label: 'Add to project',
-      icon: 'i-lucide-folder',
+      icon: appConfig.ui.icons.folder,
       children: [
-        { label: 'New project', icon: 'i-lucide-plus' },
-        { label: 'Nuxt UI', icon: 'i-lucide-folder' }
+        { label: 'New project', icon: appConfig.ui.icons.plus },
+        { label: 'Nuxt UI', icon: appConfig.ui.icons.folder }
       ]
     }
   ],
@@ -25,9 +28,9 @@ const items = computed<DropdownMenuItem[][]>(() => [
       label: 'Skills',
       icon: 'i-lucide-shapes',
       children: [
-        { label: 'Canvas design', icon: 'i-lucide-palette' },
+        { label: 'Canvas design', icon: extra.palette },
         { label: 'Slides', icon: 'i-lucide-presentation' },
-        { label: 'PDF', icon: 'i-lucide-file-text' }
+        { label: 'PDF', icon: appConfig.ui.icons.file }
       ]
     },
     {
@@ -35,8 +38,8 @@ const items = computed<DropdownMenuItem[][]>(() => [
       icon: 'i-lucide-blocks',
       children: [
         [
-          { label: 'Add connector', icon: 'i-lucide-plus' },
-          { label: 'Manage connectors', icon: 'i-lucide-briefcase' }
+          { label: 'Add connector', icon: appConfig.ui.icons.plus },
+          { label: 'Manage connectors', icon: extra.briefcase }
         ],
         [
           {
@@ -61,7 +64,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
           }
         ],
         [
-          { label: 'Tool access', icon: 'i-lucide-search' }
+          { label: 'Tool access', icon: appConfig.ui.icons.search }
         ]
       ]
     },
@@ -72,7 +75,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
     { label: 'Research', icon: 'i-lucide-activity' },
     {
       label: 'Web search',
-      icon: 'i-lucide-globe',
+      icon: extra.globe,
       type: 'checkbox',
       checked: webSearch.value,
       onUpdateChecked(checked: boolean) {
@@ -106,7 +109,7 @@ function onSubmit() {
         <div class="flex items-center gap-1">
           <UDropdownMenu :items="items" :content="{ align: 'start', side: 'top' }" :ui="{ content: 'w-60' }">
             <UButton
-              icon="i-lucide-plus"
+              :icon="appConfig.ui.icons.plus"
               color="neutral"
               variant="ghost"
               size="sm"
@@ -119,14 +122,14 @@ function onSubmit() {
             </template>
           </UDropdownMenu>
 
-          <UButton color="neutral" variant="ghost" size="sm" trailing-icon="i-lucide-chevron-down">
+          <UButton color="neutral" variant="ghost" size="sm" :trailing-icon="appConfig.ui.icons.chevronDown">
             Opus 4.8 <span class="text-dimmed">High</span>
           </UButton>
         </div>
 
         <div class="flex items-center gap-1">
           <UButton
-            icon="i-lucide-mic"
+            :icon="extra.mic"
             color="neutral"
             variant="ghost"
             size="sm"
@@ -142,7 +145,7 @@ function onSubmit() {
             aria-label="Voice mode"
           />
           <UButton
-            icon="i-lucide-arrow-up"
+            :icon="appConfig.ui.icons.arrowUp"
             color="primary"
             size="sm"
             square
diff --git a/docs/app/components/playground/PlaygroundReportBug.vue b/docs/app/components/playground/PlaygroundReportBug.vue
index 4fd3037009..42c13d3743 100644
--- a/docs/app/components/playground/PlaygroundReportBug.vue
+++ b/docs/app/components/playground/PlaygroundReportBug.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const toast = useToast()
+const extra = useStudioExtraIcons()
 
 const severities = [
   { label: 'Low', value: 'low' },
@@ -50,7 +51,7 @@ const steps = ref('')
     </div>
 
     <div class="flex items-center justify-between border-t border-default p-3">
-      <UButton label="Attach file" icon="i-lucide-paperclip" color="neutral" variant="ghost" />
+      <UButton label="Attach file" :icon="extra.paperclip" color="neutral" variant="ghost" />
       <UButton label="Submit bug" @click="toast.add({ title: 'Bug reported' })" />
     </div>
   </div>
diff --git a/docs/app/components/playground/PlaygroundTabs.vue b/docs/app/components/playground/PlaygroundTabs.vue
index 1080d5c0b4..9c1b3f7297 100644
--- a/docs/app/components/playground/PlaygroundTabs.vue
+++ b/docs/app/components/playground/PlaygroundTabs.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
+const extra = useStudioExtraIcons()
+
 const items = [
   {
     label: 'Account',
-    icon: 'i-lucide-user',
+    icon: extra.user,
     slot: 'account'
   },
   {
     label: 'Password',
-    icon: 'i-lucide-lock',
+    icon: extra.lock,
     slot: 'password'
   }
 ]
diff --git a/docs/app/components/playground/PlaygroundTransactions.vue b/docs/app/components/playground/PlaygroundTransactions.vue
index 203633dbc4..5cbf87a954 100644
--- a/docs/app/components/playground/PlaygroundTransactions.vue
+++ b/docs/app/components/playground/PlaygroundTransactions.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
+const extra = useStudioExtraIcons()
+
 const transactions = [
   { name: 'Stripe Payout', category: 'Income', icon: 'i-lucide-arrow-down-left', amount: 2400.00 },
-  { name: 'Blue Bottle Coffee', category: 'Food & Drink', icon: 'i-lucide-coffee', amount: -8.50 },
-  { name: 'Whole Foods Market', category: 'Groceries', icon: 'i-lucide-shopping-cart', amount: -64.20 },
-  { name: 'Netflix', category: 'Entertainment', icon: 'i-lucide-clapperboard', amount: -19.99 }
+  { name: 'Blue Bottle Coffee', category: 'Food & Drink', icon: extra.coffee, amount: -8.50 },
+  { name: 'Whole Foods Market', category: 'Groceries', icon: extra.cart, amount: -64.20 },
+  { name: 'Netflix', category: 'Entertainment', icon: extra.movie, amount: -19.99 }
 ]
 
 function format(amount: number) {
diff --git a/docs/app/components/theme-studio/ThemeStudioPicker.vue b/docs/app/components/theme-studio/ThemeStudioPicker.vue
index 01f7f0a7a4..bd1fb9abb1 100644
--- a/docs/app/components/theme-studio/ThemeStudioPicker.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPicker.vue
@@ -5,6 +5,7 @@
  */
 const route = useRoute()
 const { track } = useAnalytics()
+const studioIcons = useStudioIcons()
 
 const open = ref(false)
 
@@ -24,7 +25,7 @@ const aliases = [
   <UPopover v-model:open="open" :ui="{ content: 'w-64 p-3 flex flex-col gap-3' }">
     <UTooltip text="Theme">
       <UButton
-        icon="i-lucide-swatch-book"
+        :icon="studioIcons.themes"
         color="neutral"
         active-color="primary"
         :active="route.path === '/theme'"
@@ -56,7 +57,7 @@ const aliases = [
 
         <UButton
           label="Open Theme Studio"
-          icon="i-lucide-swatch-book"
+          :icon="studioIcons.themes"
           trailing-icon="i-lucide-arrow-right"
           color="neutral"
           variant="subtle"
diff --git a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
index 85cc15504a..71737aa018 100644
--- a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
@@ -16,6 +16,9 @@ const props = defineProps<{
 }>()
 
 const { presets, activePreset, applyPreset, shuffle } = useThemeStudio()
+const { icon: iconSet } = useTheme()
+const appConfig = useAppConfig()
+const studioIcons = useStudioIcons()
 
 /** Exposed so hosts (the fullscreen toolbar) can pin themselves while open. */
 const open = defineModel<boolean>('open', { default: false })
@@ -82,9 +85,15 @@ const onKeepPanels = keepPanels
  * Reduced-motion users get the plain shuffle.
  */
 const DICE_FACES = ['i-lucide-dice-1', 'i-lucide-dice-2', 'i-lucide-dice-3', 'i-lucide-dice-4', 'i-lucide-dice-5', 'i-lucide-dice-6']
-const diceFace = ref('i-lucide-dices')
+const diceFace = ref(studioIcons.dice)
 const rolling = ref(false)
 
+// Rest on the active pack's die; only Lucide ships the numbered faces the
+// roll cycles through, so other packs just spin their single die/shuffle.
+watch(() => studioIcons.dice, (die) => {
+  if (!rolling.value) diceFace.value = die
+})
+
 // keep in sync with the dice-roll keyframes: total duration and the
 // percentage stops where the die hits an edge — each impact flips the face.
 // Tuned on the bench: 6 wall hits, constant travel, 1.3× slowdown per
@@ -94,6 +103,7 @@ const HIT_FRACTIONS = [0.064, 0.147, 0.255, 0.395, 0.578, 0.815]
 let rollTimers: Array<ReturnType<typeof setTimeout>> = []
 
 function randomFace() {
+  if (iconSet.value !== 'lucide') return studioIcons.dice
   return DICE_FACES[Math.floor(Math.random() * DICE_FACES.length)]!
 }
 
@@ -155,8 +165,8 @@ const presetLabel = computed(() => {
     >
       <UButton
         :label="presetLabel"
-        icon="i-lucide-swatch-book"
-        trailing-icon="i-lucide-chevron-down"
+        :icon="studioIcons.themes"
+        :trailing-icon="appConfig.ui.icons.chevronDown"
         color="neutral"
         variant="subtle"
         :size="size"
diff --git a/docs/app/components/theme-studio/ThemeStudioViewChangelog.vue b/docs/app/components/theme-studio/ThemeStudioViewChangelog.vue
index a9c52a410e..82955462b9 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewChangelog.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewChangelog.vue
@@ -5,14 +5,16 @@
 // feed on the right. Release notes are inlined since the template fetches them
 // from GitHub and renders them with Comark, neither of which is available here.
 
+const extra = useStudioExtraIcons()
+
 const introLinks = [{
   label: 'Documentation',
-  icon: 'i-lucide-book-open',
+  icon: extra.bookOpen,
   variant: 'ghost' as const,
   size: 'md' as const
 }, {
   label: 'GitHub',
-  icon: 'i-simple-icons-github',
+  icon: extra.github,
   variant: 'ghost' as const,
   size: 'md' as const
 }]
diff --git a/docs/app/components/theme-studio/ThemeStudioViewChat.vue b/docs/app/components/theme-studio/ThemeStudioViewChat.vue
index 421416bdd6..9289dc3264 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewChat.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewChat.vue
@@ -2,11 +2,14 @@
 import type { UIMessage } from 'ai'
 import type { NavigationMenuItem } from '@nuxt/ui'
 
+const appConfig = useAppConfig()
+const extra = useStudioExtraIcons()
+
 const input = ref('')
 
 const menuItems: NavigationMenuItem[] = [
-  { label: 'New chat', icon: 'i-lucide-circle-plus' },
-  { label: 'Search', icon: 'i-lucide-search' }
+  { label: 'New chat', icon: appConfig.ui.icons.plus },
+  { label: 'Search', icon: appConfig.ui.icons.search }
 ]
 
 const historyItems: NavigationMenuItem[] = [
@@ -49,7 +52,7 @@ const messages: UIMessage[] = [{
   <div class="h-full flex bg-default overflow-hidden">
     <aside class="hidden md:flex w-56 shrink-0 flex-col gap-2 border-e border-default bg-elevated/25 p-3 min-h-0">
       <div class="flex items-center gap-1.5 px-1.5 py-1">
-        <UIcon name="i-lucide-message-circle" class="size-5 text-primary shrink-0" />
+        <UIcon :name="extra.messageCircle" class="size-5 text-primary shrink-0" />
         <span class="text-lg font-bold text-highlighted">Chat</span>
       </div>
 
@@ -62,7 +65,7 @@ const messages: UIMessage[] = [{
       <UButton
         label="Anna Cooper"
         :avatar="{ alt: 'Anna Cooper' }"
-        trailing-icon="i-lucide-chevrons-up-down"
+        :trailing-icon="extra.sort"
         color="neutral"
         variant="ghost"
         class="w-full"
@@ -79,14 +82,14 @@ const messages: UIMessage[] = [{
         <div class="flex items-center gap-1">
           <UButton
             label="Private"
-            icon="i-lucide-lock"
-            trailing-icon="i-lucide-chevron-down"
+            :icon="extra.lock"
+            :trailing-icon="appConfig.ui.icons.chevronDown"
             color="neutral"
             variant="ghost"
             size="sm"
           />
           <UButton
-            icon="i-lucide-share"
+            :icon="extra.share"
             color="neutral"
             variant="ghost"
             size="sm"
@@ -111,7 +114,7 @@ const messages: UIMessage[] = [{
           <template #footer>
             <div class="flex items-center gap-1">
               <UButton
-                icon="i-lucide-paperclip"
+                :icon="extra.paperclip"
                 color="neutral"
                 variant="ghost"
                 size="sm"
@@ -120,7 +123,7 @@ const messages: UIMessage[] = [{
               />
               <UButton
                 label="gpt-4o"
-                trailing-icon="i-lucide-chevron-down"
+                :trailing-icon="appConfig.ui.icons.chevronDown"
                 color="neutral"
                 variant="ghost"
                 size="sm"
diff --git a/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue b/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
index 908ca7906f..f6e22428c8 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewDashboard.vue
@@ -8,6 +8,9 @@ const UButton = resolveComponent('UButton')
 const UCheckbox = resolveComponent('UCheckbox')
 const UDropdownMenu = resolveComponent('UDropdownMenu')
 
+const appConfig = useAppConfig()
+const extra = useStudioExtraIcons()
+
 type Page = 'home' | 'inbox' | 'customers' | 'settings'
 const page = ref<Page>('home')
 const settingsSection = ref<'general' | 'notifications'>('general')
@@ -22,30 +25,30 @@ const selectedTeam = ref(teams[0]!)
 const teamItems = computed<DropdownMenuItem[][]>(() => [
   teams.map(team => ({ ...team, onSelect: () => { selectedTeam.value = team } })),
   [
-    { label: 'Create team', icon: 'i-lucide-circle-plus' },
-    { label: 'Manage teams', icon: 'i-lucide-cog' }
+    { label: 'Create team', icon: appConfig.ui.icons.plus },
+    { label: 'Manage teams', icon: extra.settings }
   ]
 ])
 
 const links = computed<NavigationMenuItem[][]>(() => [[{
   label: 'Home',
-  icon: 'i-lucide-house',
+  icon: extra.home,
   active: page.value === 'home',
   onSelect: () => { page.value = 'home' }
 }, {
   label: 'Inbox',
-  icon: 'i-lucide-inbox',
+  icon: extra.inbox,
   badge: String(unreadCount),
   active: page.value === 'inbox',
   onSelect: () => { page.value = 'inbox' }
 }, {
   label: 'Customers',
-  icon: 'i-lucide-users',
+  icon: extra.users,
   active: page.value === 'customers',
   onSelect: () => { page.value = 'customers' }
 }, {
   label: 'Settings',
-  icon: 'i-lucide-settings',
+  icon: extra.settings,
   defaultOpen: true,
   type: 'trigger',
   active: page.value === 'settings',
@@ -66,10 +69,10 @@ const links = computed<NavigationMenuItem[][]>(() => [[{
   }]
 }], [{
   label: 'Feedback',
-  icon: 'i-lucide-message-circle'
+  icon: extra.messageCircle
 }, {
   label: 'Help & Support',
-  icon: 'i-lucide-info'
+  icon: appConfig.ui.icons.info
 }]])
 
 const user = {
@@ -82,26 +85,26 @@ const userItems: DropdownMenuItem[][] = [[{
   label: user.name,
   avatar: user.avatar
 }], [
-  { label: 'Profile', icon: 'i-lucide-user' },
-  { label: 'Billing', icon: 'i-lucide-credit-card' },
-  { label: 'Settings', icon: 'i-lucide-settings' }
+  { label: 'Profile', icon: extra.user },
+  { label: 'Billing', icon: extra.creditCard },
+  { label: 'Settings', icon: extra.settings }
 ], [
-  { label: 'Log out', icon: 'i-lucide-log-out' }
+  { label: 'Log out', icon: extra.logout }
 ]]
 
 const newItems: DropdownMenuItem[][] = [[
-  { label: 'New mail', icon: 'i-lucide-send' },
-  { label: 'New customer', icon: 'i-lucide-user-plus' }
+  { label: 'New mail', icon: extra.send },
+  { label: 'New customer', icon: extra.userPlus }
 ]]
 
 const periodItems = ['Daily', 'Weekly', 'Monthly']
 const period = ref('Daily')
 
 const stats = [
-  { title: 'Customers', icon: 'i-lucide-users', value: '892', variation: 14 },
-  { title: 'Conversions', icon: 'i-lucide-chart-pie', value: '1,436', variation: 8 },
-  { title: 'Revenue', icon: 'i-lucide-circle-dollar-sign', value: '$312,540', variation: 23 },
-  { title: 'Orders', icon: 'i-lucide-shopping-cart', value: '254', variation: -5 }
+  { title: 'Customers', icon: extra.users, value: '892', variation: 14 },
+  { title: 'Conversions', icon: extra.chart, value: '1,436', variation: 8 },
+  { title: 'Revenue', icon: extra.dollar, value: '$312,540', variation: 23 },
+  { title: 'Orders', icon: extra.cart, value: '254', variation: -5 }
 ]
 
 const revenue = [6200, 7400, 6800, 9100, 8600, 10400, 9800, 11900, 11200, 13000, 12400, 14100, 13600, 15200]
@@ -244,10 +247,10 @@ watch(filteredMails, () => {
 })
 
 const mailDropdownItems: DropdownMenuItem[][] = [[
-  { label: 'Mark as unread', icon: 'i-lucide-check-circle' },
-  { label: 'Mark as important', icon: 'i-lucide-triangle-alert' }
+  { label: 'Mark as unread', icon: appConfig.ui.icons.success },
+  { label: 'Mark as important', icon: appConfig.ui.icons.warning }
 ], [
-  { label: 'Star thread', icon: 'i-lucide-star' }
+  { label: 'Star thread', icon: appConfig.ui.icons.star }
 ]]
 
 const reply = ref('')
@@ -296,11 +299,11 @@ const customerStatusItems = [
 
 const customerRowItems: DropdownMenuItem[] = [
   { type: 'label', label: 'Actions' },
-  { label: 'Copy customer ID', icon: 'i-lucide-copy' },
+  { label: 'Copy customer ID', icon: appConfig.ui.icons.copy },
   { type: 'separator' },
-  { label: 'View customer details', icon: 'i-lucide-list' },
+  { label: 'View customer details', icon: extra.list },
   { type: 'separator' },
-  { label: 'Delete customer', icon: 'i-lucide-trash', color: 'error' }
+  { label: 'Delete customer', icon: extra.trash, color: 'error' }
 ]
 
 const customerColumns: TableColumn<Customer>[] = [{
@@ -354,7 +357,7 @@ const customerColumns: TableColumn<Customer>[] = [{
     return h('div', { class: 'text-right' }, h(
       UDropdownMenu,
       { content: { align: 'end' }, items: customerRowItems },
-      () => h(UButton, { icon: 'i-lucide-ellipsis-vertical', color: 'neutral', variant: 'ghost', class: 'ml-auto' })
+      () => h(UButton, { icon: appConfig.ui.icons.ellipsis, color: 'neutral', variant: 'ghost', class: 'ml-auto' })
     ))
   }
 }]
@@ -363,12 +366,12 @@ const customerColumns: TableColumn<Customer>[] = [{
 // trimmed to two sections without zod/UForm validation.
 const settingsLinks = computed<NavigationMenuItem[][]>(() => [[{
   label: 'General',
-  icon: 'i-lucide-user',
+  icon: extra.user,
   active: settingsSection.value === 'general',
   onSelect: () => { settingsSection.value = 'general' }
 }, {
   label: 'Notifications',
-  icon: 'i-lucide-bell',
+  icon: extra.bell,
   active: settingsSection.value === 'notifications',
   onSelect: () => { settingsSection.value = 'notifications' }
 }]])
@@ -454,7 +457,7 @@ const pageTitles: Record<Page, string> = {
             v-bind="{
               ...selectedTeam,
               label: collapsed ? undefined : selectedTeam.label,
-              trailingIcon: collapsed ? undefined : 'i-lucide-chevrons-up-down'
+              trailingIcon: collapsed ? undefined : extra.sort
             }"
             color="neutral"
             variant="ghost"
@@ -497,7 +500,7 @@ const pageTitles: Record<Page, string> = {
             v-bind="{
               ...user,
               label: collapsed ? undefined : user.name,
-              trailingIcon: collapsed ? undefined : 'i-lucide-chevrons-up-down'
+              trailingIcon: collapsed ? undefined : extra.sort
             }"
             color="neutral"
             variant="ghost"
@@ -574,7 +577,7 @@ const pageTitles: Record<Page, string> = {
         <UDashboardNavbar :title="selectedMail.subject" :toggle="false">
           <template #leading>
             <UButton
-              icon="i-lucide-x"
+              :icon="appConfig.ui.icons.close"
               color="neutral"
               variant="ghost"
               class="-ms-1.5"
@@ -584,15 +587,15 @@ const pageTitles: Record<Page, string> = {
 
           <template #right>
             <UTooltip text="Archive">
-              <UButton icon="i-lucide-inbox" color="neutral" variant="ghost" />
+              <UButton :icon="extra.inbox" color="neutral" variant="ghost" />
             </UTooltip>
 
             <UTooltip text="Reply">
-              <UButton icon="i-lucide-reply" color="neutral" variant="ghost" />
+              <UButton :icon="extra.reply" color="neutral" variant="ghost" />
             </UTooltip>
 
             <UDropdownMenu :items="mailDropdownItems">
-              <UButton icon="i-lucide-ellipsis-vertical" color="neutral" variant="ghost" />
+              <UButton :icon="appConfig.ui.icons.ellipsis" color="neutral" variant="ghost" />
             </UDropdownMenu>
           </template>
         </UDashboardNavbar>
@@ -625,7 +628,7 @@ const pageTitles: Record<Page, string> = {
         <div class="pb-4 px-4 sm:px-6 shrink-0">
           <UCard variant="subtle" class="mt-auto" :ui="{ header: 'flex items-center gap-1.5 text-dimmed' }">
             <template #header>
-              <UIcon name="i-lucide-reply" class="size-5" />
+              <UIcon :name="extra.reply" class="size-5" />
 
               <span class="text-sm truncate">
                 Reply to {{ selectedMail.from.name }} ({{ selectedMail.from.email }})
@@ -645,16 +648,16 @@ const pageTitles: Record<Page, string> = {
               />
 
               <div class="flex items-center justify-between">
-                <UButton color="neutral" variant="ghost" icon="i-lucide-paperclip" aria-label="Attach file" />
+                <UButton color="neutral" variant="ghost" :icon="extra.paperclip" aria-label="Attach file" />
 
-                <UButton type="submit" color="neutral" label="Send" icon="i-lucide-send" />
+                <UButton type="submit" color="neutral" label="Send" :icon="extra.send" />
               </div>
             </form>
           </UCard>
         </div>
       </UDashboardPanel>
       <div v-else class="flex-1 hidden lg:flex items-center justify-center">
-        <UIcon name="i-lucide-inbox" class="size-32 text-dimmed" />
+        <UIcon :name="extra.inbox" class="size-32 text-dimmed" />
       </div>
     </template>
 
@@ -669,7 +672,7 @@ const pageTitles: Record<Page, string> = {
             <UTooltip text="Notifications" :shortcuts="['N']">
               <UButton color="neutral" variant="ghost" square aria-label="Notifications">
                 <UChip color="error" inset>
-                  <UIcon name="i-lucide-bell" class="size-5 shrink-0" />
+                  <UIcon :name="extra.bell" class="size-5 shrink-0" />
                 </UChip>
               </UButton>
             </UTooltip>
@@ -677,10 +680,10 @@ const pageTitles: Record<Page, string> = {
             <UButton
               v-if="page === 'customers'"
               label="New customer"
-              icon="i-lucide-plus"
+              :icon="appConfig.ui.icons.plus"
             />
             <UDropdownMenu v-else :items="newItems">
-              <UButton icon="i-lucide-plus" class="rounded-full" aria-label="New" />
+              <UButton :icon="appConfig.ui.icons.plus" class="rounded-full" aria-label="New" />
             </UDropdownMenu>
           </template>
         </UDashboardNavbar>
@@ -690,7 +693,7 @@ const pageTitles: Record<Page, string> = {
             <UButton
               color="neutral"
               variant="ghost"
-              icon="i-lucide-calendar"
+              :icon="extra.calendar"
               label="Jun 22 - Jul 6, 2026"
               class="-ms-1"
             />
@@ -788,7 +791,7 @@ const pageTitles: Record<Page, string> = {
             <UInput
               v-model="customerEmailFilter"
               class="max-w-sm"
-              icon="i-lucide-search"
+              :icon="appConfig.ui.icons.search"
               placeholder="Filter emails..."
             />
 
@@ -798,7 +801,7 @@ const pageTitles: Record<Page, string> = {
                 label="Delete"
                 color="error"
                 variant="subtle"
-                icon="i-lucide-trash"
+                :icon="extra.trash"
               >
                 <template #trailing>
                   <UKbd>{{ selectedCustomersCount }}</UKbd>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewDocs.vue b/docs/app/components/theme-studio/ThemeStudioViewDocs.vue
index a7d8aa8eaf..cd64d3e798 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewDocs.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewDocs.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { DropdownMenuItem, NavigationMenuItem, PageLink } from '@nuxt/ui'
 
+const appConfig = useAppConfig()
+const extra = useStudioExtraIcons()
+
 // Left aside: the template renders UContentNavigation from @nuxt/content —
 // content-coupled, so the same tree is faked with a vertical UNavigationMenu.
 const navLinks: NavigationMenuItem[] = [{
@@ -8,19 +11,19 @@ const navLinks: NavigationMenuItem[] = [{
   type: 'trigger',
   defaultOpen: true,
   children: [
-    { label: 'Introduction', icon: 'i-lucide-house' },
+    { label: 'Introduction', icon: extra.home },
     { label: 'Installation', icon: 'i-lucide-download' },
-    { label: 'Usage', icon: 'i-lucide-sliders', active: true }
+    { label: 'Usage', icon: extra.settings, active: true }
   ]
 }, {
   label: 'Essentials',
   type: 'trigger',
   defaultOpen: true,
   children: [
-    { label: 'Markdown Syntax', icon: 'i-lucide-heading' },
+    { label: 'Markdown Syntax', icon: extra.heading },
     { label: 'Code Blocks', icon: 'i-lucide-code' },
     { label: 'Prose Components', icon: 'i-lucide-component' },
-    { label: 'Images & Embeds', icon: 'i-lucide-image' }
+    { label: 'Images & Embeds', icon: extra.image }
   ]
 }, {
   label: 'AI',
@@ -28,13 +31,13 @@ const navLinks: NavigationMenuItem[] = [{
   defaultOpen: true,
   children: [
     { label: 'MCP Server', icon: 'i-lucide-bot' },
-    { label: 'LLMs.txt', icon: 'i-lucide-file-text' }
+    { label: 'LLMs.txt', icon: appConfig.ui.icons.file }
   ]
 }]
 
 // PageHeaderLinks dropdown, minus the real clipboard / external navigations.
 const copyItems: DropdownMenuItem[] = [
-  { label: 'Copy Markdown link', icon: 'i-lucide-link' },
+  { label: 'Copy Markdown link', icon: extra.link },
   { label: 'View as Markdown', icon: 'i-simple-icons:markdown' },
   { label: 'Open in ChatGPT', icon: 'i-simple-icons:openai' },
   { label: 'Open in Claude', icon: 'i-simple-icons:anthropic' }
@@ -55,8 +58,8 @@ const tocLinks = [
 ]
 
 const communityLinks: PageLink[] = [
-  { label: 'Edit this page', icon: 'i-lucide-external-link' },
-  { label: 'Star on GitHub', icon: 'i-lucide-star' },
+  { label: 'Edit this page', icon: appConfig.ui.icons.external },
+  { label: 'Star on GitHub', icon: appConfig.ui.icons.star },
   { label: 'Releases', icon: 'i-lucide-rocket' }
 ]
 
@@ -90,14 +93,14 @@ const appConfigCode = `export default defineAppConfig({
     <UHeader :toggle="false" class="rounded-t-[inherit]" :ui="{ center: 'flex-1' }">
       <template #left>
         <div class="flex items-center gap-1.5">
-          <UIcon name="i-lucide-book-open" class="size-6 text-primary shrink-0" />
+          <UIcon :name="extra.bookOpen" class="size-6 text-primary shrink-0" />
           <span class="text-xl font-bold text-highlighted">Docs</span>
         </div>
       </template>
 
       <!-- UContentSearchButton opens the content search modal: fake the expanded look. -->
       <UButton
-        icon="i-lucide-search"
+        :icon="appConfig.ui.icons.search"
         label="Search documentation..."
         color="neutral"
         variant="outline"
@@ -114,7 +117,7 @@ const appConfigCode = `export default defineAppConfig({
 
       <template #right>
         <UButton icon="i-lucide-sun-moon" aria-label="Color mode" color="neutral" variant="ghost" />
-        <UButton icon="i-simple-icons-github" aria-label="GitHub" color="neutral" variant="ghost" />
+        <UButton :icon="extra.github" aria-label="GitHub" color="neutral" variant="ghost" />
       </template>
     </UHeader>
 
@@ -141,7 +144,7 @@ const appConfigCode = `export default defineAppConfig({
               <UFieldGroup>
                 <UButton
                   label="Copy page"
-                  icon="i-lucide-copy"
+                  :icon="appConfig.ui.icons.copy"
                   color="neutral"
                   variant="outline"
                   :ui="{ leadingIcon: 'text-neutral size-3.5' }"
@@ -152,7 +155,7 @@ const appConfigCode = `export default defineAppConfig({
                   :ui="{ content: 'w-48' }"
                 >
                   <UButton
-                    icon="i-lucide-chevron-down"
+                    :icon="appConfig.ui.icons.chevronDown"
                     size="sm"
                     color="neutral"
                     variant="outline"
@@ -227,7 +230,7 @@ const appConfigCode = `export default defineAppConfig({
               Header
             </ProseH3>
 
-            <ProsePre filename="app.config.ts" icon="i-lucide-settings" :code="appConfigCode">
+            <ProsePre filename="app.config.ts" :icon="extra.settings" :code="appConfigCode">
               {{ appConfigCode }}
             </ProsePre>
 
@@ -245,14 +248,14 @@ const appConfigCode = `export default defineAppConfig({
             <!-- UContentSurround is content-coupled: same prev/next look with a UPageCard pair. -->
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
               <UPageCard
-                icon="i-lucide-arrow-left"
+                :icon="appConfig.ui.icons.arrowLeft"
                 title="Installation"
                 description="Get started with the documentation template in a few steps."
                 variant="outline"
                 :ui="{ leadingIcon: 'text-muted group-hover:text-primary transition-colors' }"
               />
               <UPageCard
-                icon="i-lucide-arrow-right"
+                :icon="appConfig.ui.icons.arrowRight"
                 title="Markdown Syntax"
                 description="Headings, lists, links and everything Markdown supports."
                 variant="outline"
@@ -312,7 +315,7 @@ const appConfigCode = `export default defineAppConfig({
       <template #right>
         <UButton icon="i-simple-icons-discord" aria-label="Discord" color="neutral" variant="ghost" />
         <UButton icon="i-simple-icons-x" aria-label="X" color="neutral" variant="ghost" />
-        <UButton icon="i-simple-icons-github" aria-label="GitHub" color="neutral" variant="ghost" />
+        <UButton :icon="extra.github" aria-label="GitHub" color="neutral" variant="ghost" />
       </template>
     </UFooter>
   </div>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewEditor.vue b/docs/app/components/theme-studio/ThemeStudioViewEditor.vue
index d3ac780a1c..fa261d7798 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewEditor.vue
@@ -4,6 +4,9 @@ import type { Editor, JSONContent } from '@tiptap/vue-3'
 import { upperFirst } from 'scule'
 import { mapEditorItems } from '@nuxt/ui/utils/editor'
 
+const appConfig = useAppConfig()
+const extra = useStudioExtraIcons()
+
 /**
  * Self-contained replica of the official Nuxt UI Editor template
  * (github.com/nuxt-ui-templates/editor): header chrome with a fixed
@@ -73,7 +76,7 @@ const headingItems = [1, 2, 3, 4].map(level => ({
 const blockItems = [{
   kind: 'bulletList' as const,
   label: 'Bullet List',
-  icon: 'i-lucide-list'
+  icon: extra.list
 }, {
   kind: 'orderedList' as const,
   label: 'Ordered List',
@@ -117,14 +120,14 @@ const markItems = [{
 
 const toolbarItems: EditorToolbarItem[][] = [[{
   kind: 'undo',
-  icon: 'i-lucide-undo',
+  icon: extra.undo,
   tooltip: { text: 'Undo' }
 }, {
   kind: 'redo',
-  icon: 'i-lucide-redo',
+  icon: extra.redo,
   tooltip: { text: 'Redo' }
 }], [{
-  icon: 'i-lucide-heading',
+  icon: extra.heading,
   tooltip: { text: 'Headings' },
   content: { align: 'start' },
   items: headingItems
@@ -132,7 +135,7 @@ const toolbarItems: EditorToolbarItem[][] = [[{
 
 const bubbleToolbarItems: EditorToolbarItem[][] = [[{
   label: 'Turn into',
-  trailingIcon: 'i-lucide-chevron-down',
+  trailingIcon: appConfig.ui.icons.chevronDown,
   activeColor: 'neutral',
   activeVariant: 'ghost',
   tooltip: { text: 'Turn into' },
@@ -184,22 +187,22 @@ function dragHandleItems(editor: Editor): DropdownMenuItem[][] {
     kind: 'duplicate',
     pos,
     label: 'Duplicate',
-    icon: 'i-lucide-copy'
+    icon: appConfig.ui.icons.copy
   }, {
     kind: 'moveUp',
     pos,
     label: 'Move up',
-    icon: 'i-lucide-arrow-up'
+    icon: appConfig.ui.icons.arrowUp
   }, {
     kind: 'moveDown',
     pos,
     label: 'Move down',
-    icon: 'i-lucide-arrow-down'
+    icon: appConfig.ui.icons.arrowDown
   }], [{
     kind: 'delete',
     pos,
     label: 'Delete',
-    icon: 'i-lucide-trash'
+    icon: extra.trash
   }]]) as DropdownMenuItem[][]
 }
 </script>
@@ -235,7 +238,7 @@ function dragHandleItems(editor: Editor): DropdownMenuItem[][] {
 
             <UButton
               label="Share"
-              icon="i-lucide-users"
+              :icon="extra.users"
               color="neutral"
               variant="outline"
               size="sm"
@@ -255,7 +258,7 @@ function dragHandleItems(editor: Editor): DropdownMenuItem[][] {
 
         <UEditorDragHandle v-slot="{ ui, onClick }" :editor="editor" @node-change="selectedNode = $event">
           <UButton
-            icon="i-lucide-plus"
+            :icon="appConfig.ui.icons.plus"
             color="neutral"
             variant="ghost"
             size="sm"
@@ -280,7 +283,7 @@ function dragHandleItems(editor: Editor): DropdownMenuItem[][] {
               variant="ghost"
               active-variant="soft"
               size="sm"
-              icon="i-lucide-grip-vertical"
+              :icon="appConfig.ui.icons.drag"
               :active="open"
               :class="ui.handle()"
             />
diff --git a/docs/app/components/theme-studio/ThemeStudioViewGrid.vue b/docs/app/components/theme-studio/ThemeStudioViewGrid.vue
index d3c1c0f3c0..18b0fac755 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewGrid.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewGrid.vue
@@ -8,6 +8,7 @@ defineProps<{
 const emit = defineEmits<{ select: [] }>()
 
 const { view } = useThemeStudioView()
+const viewIcons = useStudioViewIcons()
 </script>
 
 <template>
@@ -42,7 +43,7 @@ const { view } = useThemeStudioView()
         class="w-full aspect-video rounded-sm ring ring-default"
       />
       <span v-else class="w-full aspect-video rounded-sm ring ring-default bg-elevated/50 flex items-center justify-center">
-        <UIcon :name="item.icon" class="size-6 text-muted" />
+        <UIcon :name="viewIcons[item.value]" class="size-6 text-muted" />
       </span>
     </template>
   </UListbox>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewLanding.vue b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
index 4a3041cd2d..3f7e6dd9ce 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewLanding.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui'
 
+const appConfig = useAppConfig()
+const extra = useStudioExtraIcons()
+
 /** Shared rhythm for the centered content sections. */
 const sectionUi = {
   root: 'py-24 sm:py-32',
@@ -52,14 +55,14 @@ const terminalLines: TerminalSegment[][] = [
 
 const logos = [
   'i-simple-icons-vercel',
-  'i-simple-icons-github',
+  extra.github,
   'i-simple-icons-linear',
   'i-simple-icons-supabase',
   'i-simple-icons-stripe'
 ]
 
 const features = [{
-  icon: 'i-lucide-zap',
+  icon: extra.zap,
   title: 'Predictive Alerts',
   description: 'ML models trained on your baselines detect anomalies 4 minutes before they hit your SLOs.'
 }, {
@@ -75,7 +78,7 @@ const features = [{
   title: 'Deploy Tracking',
   description: 'Every deploy is automatically correlated with performance changes. Know which commit caused the regression.'
 }, {
-  icon: 'i-lucide-filter',
+  icon: extra.filter,
   title: 'Smart Sampling',
   description: 'AI-driven sampling retains interesting traces and drops noise. Cut storage costs 10× without losing signal.'
 }, {
@@ -322,7 +325,7 @@ const vReveal = {
 
           <UButton
             label="npx telemetry init"
-            :trailing-icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+            :trailing-icon="copied ? appConfig.ui.icons.copyCheck : appConfig.ui.icons.copy"
             color="neutral"
             variant="subtle"
             size="xl"
diff --git a/docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue b/docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue
index 98000d7c5f..583017851d 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue
@@ -1,33 +1,36 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui'
 
+const appConfig = useAppConfig()
+const extra = useStudioExtraIcons()
+
 // Replicates the Nuxt UI Portfolio template home page: floating pill nav,
 // avatar hero with polaroid marquee, about + work experience columns,
 // blog list, testimonial carousel, FAQ tabs and footer.
 const navItems: NavigationMenuItem[] = [
-  { label: 'Home', icon: 'i-lucide-home', active: true },
-  { label: 'Projects', icon: 'i-lucide-folder' },
-  { label: 'Blog', icon: 'i-lucide-file-text' },
-  { label: 'Speaking', icon: 'i-lucide-mic' },
-  { label: 'About', icon: 'i-lucide-user' }
+  { label: 'Home', icon: extra.home, active: true },
+  { label: 'Projects', icon: appConfig.ui.icons.folder },
+  { label: 'Blog', icon: appConfig.ui.icons.file },
+  { label: 'Speaking', icon: extra.mic },
+  { label: 'About', icon: extra.user }
 ]
 
 const socialLinks = [
   { 'icon': 'i-simple-icons-discord', 'aria-label': 'Discord' },
   { 'icon': 'i-simple-icons-x', 'aria-label': 'X' },
-  { 'icon': 'i-simple-icons-github', 'aria-label': 'GitHub' }
+  { 'icon': extra.github, 'aria-label': 'GitHub' }
 ]
 
 // The template scrolls travel photos in a marquee; we stand in gradient
 // polaroids since the studio previews stay image-free.
 const heroImages = [
   { icon: 'i-lucide-mountain', label: 'Alps, 2024' },
-  { icon: 'i-lucide-coffee', label: 'Café sketching' },
+  { icon: extra.coffee, label: 'Café sketching' },
   { icon: 'i-lucide-bike', label: 'Canal ride' },
-  { icon: 'i-lucide-camera', label: 'Street photos' },
+  { icon: extra.camera, label: 'Street photos' },
   { icon: 'i-lucide-laptop', label: 'Studio desk' },
   { icon: 'i-lucide-trees', label: 'Veluwe hike' },
-  { icon: 'i-lucide-palette', label: 'Color studies' },
+  { icon: extra.palette, label: 'Color studies' },
   { icon: 'i-lucide-ferris-wheel', label: 'Rotterdam fair' },
   { icon: 'i-lucide-waves', label: 'North Sea' }
 ]
@@ -53,7 +56,7 @@ const experience = [{
 }, {
   date: '1995 - Present',
   position: 'Human person on',
-  company: { name: 'Earth', logo: 'i-lucide-globe' }
+  company: { name: 'Earth', logo: extra.globe }
 }]
 
 const posts = [{
@@ -180,7 +183,7 @@ onUnmounted(() => clearTimeout(appearTimeout))
 
         <template #links>
           <div class="flex items-center gap-2">
-            <UButton icon="i-lucide-github" label="View Github" color="neutral" to="https://github.com/mikenewbon/" target="_blank" />
+            <UButton :icon="extra.github" label="View Github" color="neutral" to="https://github.com/mikenewbon/" target="_blank" />
             <UButton color="success" variant="ghost" class="gap-2" label="Always online">
               <template #leading>
                 <span class="relative flex size-2">
@@ -288,7 +291,7 @@ onUnmounted(() => clearTimeout(appearTimeout))
               <UButton size="xs" variant="link" class="px-0 gap-0" label="Read Article">
                 <template #trailing>
                   <UIcon
-                    name="i-lucide-arrow-right"
+                    :name="appConfig.ui.icons.arrowRight"
                     class="size-4 text-primary transition-all opacity-0 group-hover:translate-x-1 group-hover:opacity-100"
                   />
                 </template>
@@ -348,7 +351,7 @@ onUnmounted(() => clearTimeout(appearTimeout))
         >
           <template #content="{ item }">
             <UAccordion
-              trailing-icon="i-lucide-plus"
+              :trailing-icon="appConfig.ui.icons.plus"
               :items="item.questions"
               :unmount-on-hide="false"
               :ui="{
diff --git a/docs/app/components/theme-studio/ThemeStudioViewSaas.vue b/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
index 8f0d509e3b..039e2c0373 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewSaas.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui'
 
+const appConfig = useAppConfig()
+const extra = useStudioExtraIcons()
+
 const navItems: NavigationMenuItem[] = [
   { label: 'Docs', active: true },
   { label: 'Pricing' },
@@ -10,11 +13,11 @@ const navItems: NavigationMenuItem[] = [
 
 const heroLinks = [{
   label: 'Get started',
-  trailingIcon: 'i-lucide-arrow-right',
+  trailingIcon: appConfig.ui.icons.arrowRight,
   size: 'xl' as const
 }, {
   label: 'Use this template',
-  icon: 'i-lucide-github',
+  icon: extra.github,
   size: 'xl' as const,
   color: 'neutral' as const,
   variant: 'subtle' as const
@@ -27,11 +30,11 @@ const sections = [{
   features: [{
     title: '100+ UI components',
     description: 'From buttons to modals, data tables to forms - all styled with Tailwind CSS and accessible out of the box.',
-    icon: 'i-lucide-package'
+    icon: extra.package
   }, {
     title: 'Authentication ready',
     description: 'Pre-built login, signup and password reset flows. Just connect your backend and start onboarding users.',
-    icon: 'i-lucide-shield'
+    icon: extra.shield
   }, {
     title: 'TypeScript first',
     description: 'Full TypeScript support with auto-completion, type safety and IntelliSense for every component.',
@@ -44,22 +47,22 @@ const sections = [{
   features: [{
     title: 'Edge performance',
     description: 'Optimized for Core Web Vitals with automatic code splitting, lazy loading and SSR/SSG support.',
-    icon: 'i-lucide-zap'
+    icon: extra.zap
   }, {
     title: 'Dark mode ready',
     description: 'Automatic theme switching with smooth transitions. Respects system preferences and remembers user choice.',
-    icon: 'i-lucide-moon'
+    icon: appConfig.ui.icons.dark
   }, {
     title: 'Global ready',
     description: 'Built-in i18n support for 50+ languages with RTL/LTR layouts and font optimization.',
-    icon: 'i-lucide-globe'
+    icon: extra.globe
   }]
 }]
 
 const features = [{
   title: 'Beautiful design system',
   description: 'Semantic color aliases, comprehensive design tokens and Tailwind Variants for consistent styling.',
-  icon: 'i-lucide-palette'
+  icon: extra.palette
 }, {
   title: 'Accessible by default',
   description: 'Built on Reka UI for robust accessibility. WCAG compliant components that work for everyone.',
@@ -67,19 +70,19 @@ const features = [{
 }, {
   title: 'Developer experience',
   description: 'Auto-imports, hot module replacement and comprehensive documentation. Build faster with less friction.',
-  icon: 'i-lucide-terminal'
+  icon: extra.terminal
 }, {
   title: 'SEO optimized',
   description: 'Server-side rendering, automatic meta tags, sitemap generation and Open Graph images out of the box.',
-  icon: 'i-lucide-search'
+  icon: appConfig.ui.icons.search
 }, {
   title: 'Production ready',
   description: 'Error handling, loading states, form validation and security best practices built into every component.',
-  icon: 'i-lucide-circle-check'
+  icon: appConfig.ui.icons.success
 }, {
   title: 'Infinitely customizable',
   description: 'Override any style with the ui prop, customize globally with AppConfig, or use Tailwind classes directly.',
-  icon: 'i-lucide-settings'
+  icon: extra.settings
 }]
 
 const plans = [{
@@ -126,10 +129,10 @@ const testimonials = [{
 
 const ctaLinks = [{
   label: 'Start building',
-  trailingIcon: 'i-lucide-arrow-right'
+  trailingIcon: appConfig.ui.icons.arrowRight
 }, {
   label: 'View on GitHub',
-  icon: 'i-lucide-github',
+  icon: extra.github,
   variant: 'subtle' as const
 }]
 
@@ -216,7 +219,7 @@ const starLayers = [
       <template #right>
         <UButton icon="i-lucide-sun-moon" aria-label="Color mode" color="neutral" variant="ghost" />
         <UButton label="Sign in" color="neutral" variant="outline" class="hidden lg:inline-flex" />
-        <UButton label="Sign up" color="neutral" trailing-icon="i-lucide-arrow-right" />
+        <UButton label="Sign up" color="neutral" :trailing-icon="appConfig.ui.icons.arrowRight" />
       </template>
     </UHeader>
 
@@ -269,7 +272,7 @@ const starLayers = [
       </template>
 
       <template #headline>
-        <UBadge variant="subtle" icon="i-lucide-sparkles">
+        <UBadge variant="subtle" :icon="extra.sparkles">
           Nuxt UI v4 is out
         </UBadge>
       </template>
@@ -283,7 +286,7 @@ const starLayers = [
         <div class="relative aspect-video w-full rounded-xl overflow-hidden bg-elevated flex items-center justify-center">
           <div class="absolute inset-0" style="background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--ui-primary) 15%, transparent), transparent 70%)" />
           <UButton
-            icon="i-lucide-play"
+            :icon="extra.play"
             size="xl"
             color="neutral"
             variant="outline"
@@ -460,7 +463,7 @@ const starLayers = [
       </template>
 
       <template #right>
-        <UButton icon="i-lucide-github" aria-label="GitHub" color="neutral" variant="ghost" />
+        <UButton :icon="extra.github" aria-label="GitHub" color="neutral" variant="ghost" />
         <UButton icon="i-lucide-twitter" aria-label="X" color="neutral" variant="ghost" />
       </template>
     </UFooter>
diff --git a/docs/app/components/theme-studio/ThemeStudioViewSwitcher.vue b/docs/app/components/theme-studio/ThemeStudioViewSwitcher.vue
index f3ab0879c3..da21a7451c 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewSwitcher.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewSwitcher.vue
@@ -12,6 +12,8 @@ const props = withDefaults(defineProps<{
 const open = defineModel<boolean>('open', { default: false })
 
 const { view, views } = useThemeStudioView()
+const viewIcons = useStudioViewIcons()
+const appConfig = useAppConfig()
 
 const activeView = computed(() => views.find(tab => tab.value === view.value))
 
@@ -24,9 +26,9 @@ const templateViews = views.filter(tab => tab.image)
 <template>
   <UPopover v-model:open="open" :content="props.content">
     <UButton
-      :icon="activeView?.icon"
+      :icon="viewIcons[view]"
       :label="activeView?.label"
-      trailing-icon="i-lucide-chevron-down"
+      :trailing-icon="appConfig.ui.icons.chevronDown"
       color="neutral"
       variant="subtle"
       aria-label="Preview page"
diff --git a/docs/app/composables/useSearch.ts b/docs/app/composables/useSearch.ts
index 7d6c90fd67..9459f8ef46 100644
--- a/docs/app/composables/useSearch.ts
+++ b/docs/app/composables/useSearch.ts
@@ -3,6 +3,11 @@ export function useSearch() {
   const { frameworks } = useFrameworks()
   const { track } = useAnalytics()
   const { open, messages } = useChat()
+  // The ⌘K link glyphs follow the applied pack where an equivalent exists;
+  // the docs-nav-specific ones (square-play/-code/-function, panels, etc.)
+  // have no pack glyph and stay Lucide.
+  const studioIcons = useStudioIcons()
+  const extra = useStudioExtraIcons()
 
   const searchTerm = ref('')
 
@@ -22,7 +27,7 @@ export function useSearch() {
 
   const links = computed(() => [{
     label: 'Ask AI',
-    icon: 'i-lucide-bot-message-square',
+    icon: studioIcons.assistant,
     kbds: ['meta', 'i'],
     ui: {
       itemLeadingIcon: 'group-data-highlighted:not-group-data-disabled:text-primary'
@@ -65,7 +70,7 @@ export function useSearch() {
   }, {
     label: 'Community',
     description: 'Explore community projects and resources.',
-    icon: 'i-lucide-globe',
+    icon: extra.globe,
     to: '/community'
   }, {
     label: 'Playground',
@@ -87,7 +92,7 @@ export function useSearch() {
   }, {
     label: 'Team',
     description: 'Meet the team behind the project.',
-    icon: 'i-lucide-users',
+    icon: extra.users,
     to: '/team'
   }, {
     label: 'Releases',
@@ -97,7 +102,7 @@ export function useSearch() {
   }, {
     label: 'GitHub',
     description: 'Check out the repository on GitHub.',
-    icon: 'i-simple-icons-github',
+    icon: extra.github,
     to: 'https://github.com/nuxt/ui/releases',
     target: '_blank'
   }])
@@ -119,7 +124,7 @@ export function useSearch() {
     },
     items: [{
       label: 'Ask AI',
-      icon: 'i-lucide-bot-message-square',
+      icon: studioIcons.assistant,
       ui: {
         itemLeadingIcon: 'group-data-highlighted:not-group-data-disabled:text-primary'
       },
diff --git a/docs/app/composables/useStudioIcons.ts b/docs/app/composables/useStudioIcons.ts
new file mode 100644
index 0000000000..51c37e7a52
--- /dev/null
+++ b/docs/app/composables/useStudioIcons.ts
@@ -0,0 +1,29 @@
+import { toReactive } from '@vueuse/core'
+import { studioIcons, STUDIO_EXTRA_DEFAULTS, studioExtraOverrides } from '../utils/theme'
+
+/**
+ * The studio-chrome glyphs (toolbar controls, Ask-AI, theme picker) for the
+ * ACTIVE icon pack, so the studio's own UI skins to the applied theme. Falls
+ * back to Lucide for any unrecognized pack name. Returned as a reactive object
+ * (not a ref) — like useStudioExtraIcons — so `studioIcons.undo` resolves
+ * directly in both script and templates.
+ */
+export function useStudioIcons() {
+  const { icon } = useTheme()
+  return toReactive(computed(() => studioIcons[icon.value as keyof typeof studioIcons] ?? studioIcons.lucide))
+}
+
+/**
+ * The extended functional glyphs the preview demos use (dashboard nav, account
+ * menus, etc.) resolved for the active pack — each pack's override merged over
+ * the Lucide defaults, so an unset pack/key falls back to Lucide. Returned as a
+ * reactive object (not a ref) so `extra.home` resolves directly in both script
+ * arrays and templates, exactly like `appConfig.ui.icons.*`.
+ */
+export function useStudioExtraIcons() {
+  const { icon } = useTheme()
+  return toReactive(computed(() => ({
+    ...STUDIO_EXTRA_DEFAULTS,
+    ...(studioExtraOverrides[icon.value as keyof typeof studioExtraOverrides] ?? {})
+  })))
+}
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 6782897838..98e49a9224 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -243,6 +243,10 @@ export function useTheme() {
     label: 'Phosphor',
     icon: 'i-ph-phosphor-logo',
     value: 'phosphor'
+  }, {
+    label: 'Pixelart',
+    icon: 'i-pixelarticons-pixelarticons',
+    value: 'pixelarticons'
   }, {
     label: 'Remix',
     icon: 'i-ri-remixicon-line',
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 997f47b63a..34f341f395 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -66,6 +66,44 @@ export function useThemeStudio() {
     }
   }
 
+  // Self-heal custom palettes. A custom ramp lives in three stores that
+  // restore independently on reload: the editor curves (paletteParams), the
+  // derived ramp (custom-colors) and the alias mapping. The derived stores
+  // ride useState, which hydrates from an empty SSR payload — so a lost
+  // restore race can leave the preview on a stale/absent ramp while the
+  // editor still shows the curves (and their modifiers). The curves are the
+  // source of truth: re-derive each persisted palette once on load, after the
+  // plugin restore, so the preview is rebuilt from them and always matches
+  // the editor. Re-deriving is idempotent, so healing a correct load is a
+  // harmless no-op write — cheaper than trusting a possibly-stale render.
+  const palettesHealed = useState('nuxt-ui-palettes-healed', () => false)
+  if (import.meta.client && !palettesHealed.value) {
+    palettesHealed.value = true
+    onNuxtReady(() => {
+      for (const [alias, reactiveEntry] of Object.entries(paletteParams.value)) {
+        if (!reactiveEntry || !('lightness' in reactiveEntry)) continue
+        // Deep-unwrap the reactive useState proxy to a plain object — the curve
+        // params flow into applyPaletteEffects, which structuredClones them,
+        // and a reactive proxy can't be cloned. Curves are pure numbers, so a
+        // JSON round-trip is a lossless plain copy.
+        const entry = JSON.parse(JSON.stringify(reactiveEntry)) as StoredPaletteParams
+        // The modifier lens bakes into the ramp here exactly as it did at edit
+        // time, so restoring the curves restores the modifiers' effect too.
+        const ramp = generatePalette(applyPaletteEffects(
+          { lightness: entry.lightness, chroma: entry.chroma, hue: entry.hue },
+          entry.effects,
+          entry.amount
+        ))
+        const name = customPaletteName(alias)
+        theme.applyThemeSettings({
+          customColors: { [name]: ramp },
+          [alias]: name,
+          ...(alias === 'neutral' ? { cssVariables: unownedNeutralRemaps() } : {})
+        }, { track: false })
+      }
+    })
+  }
+
   // Shared across composable instances so the analytics throttle holds no
   // matter which component fires the event.
   const trackedAt = useState<number | undefined>('nuxt-ui-style-tracked-at', () => undefined)
diff --git a/docs/app/composables/useThemeStudioView.ts b/docs/app/composables/useThemeStudioView.ts
index 01c9cb6e20..98cf98de22 100644
--- a/docs/app/composables/useThemeStudioView.ts
+++ b/docs/app/composables/useThemeStudioView.ts
@@ -1,3 +1,5 @@
+import type { ThemeIcons } from '../utils/theme'
+
 export type ThemeStudioView = 'grid' | 'dashboard' | 'chat' | 'saas' | 'landing' | 'docs' | 'portfolio' | 'changelog' | 'editor' | 'a11y'
 
 export interface ThemeStudioViewTab {
@@ -14,7 +16,7 @@ const templateImage = (name: string) => `/assets/templates/nuxt/${name}`
 
 export const THEME_STUDIO_VIEWS: ThemeStudioViewTab[] = [
   { label: 'Grid', icon: 'i-lucide-layout-grid', value: 'grid', description: 'Every themed component at a glance — the component wall.' },
-  { label: 'Dashboard', icon: 'i-lucide-layout-dashboard', value: 'dashboard', description: 'Multi-column admin interface with inbox, customers and settings.', image: templateImage('dashboard') },
+  { label: 'Dashboard', icon: 'i-lucide-layout-dashboard', value: 'dashboard', description: 'Multi-column admin interface with multiple views.', image: templateImage('dashboard') },
   { label: 'Chat', icon: 'i-lucide-message-circle', value: 'chat', description: 'An AI chatbot with sidebar history and streaming replies.', image: templateImage('chat') },
   { label: 'SaaS', icon: 'i-lucide-rocket', value: 'saas', description: 'A SaaS home with hero, pricing and feature sections.', image: templateImage('saas') },
   { label: 'Landing', icon: 'i-lucide-panels-top-left', value: 'landing', description: 'A modern marketing landing page.', image: templateImage('landing') },
@@ -25,6 +27,29 @@ export const THEME_STUDIO_VIEWS: ThemeStudioViewTab[] = [
   { label: 'A11y', icon: 'i-lucide-accessibility', value: 'a11y', description: 'Contrast matrix for every token pair in the theme.' }
 ]
 
+/**
+ * Per-pack overrides for the view-switcher glyphs, so the switcher skins to
+ * the applied theme like the rest of the studio chrome. A view falls back to
+ * its Lucide default (THEME_STUDIO_VIEWS) wherever the active pack has no
+ * entry. Only pixelarticons is curated today; other packs keep Lucide until
+ * filled in. Pixel has no rocket/panels/newspaper/accessibility glyphs, so
+ * SaaS→zap, Landing→layout, Changelog→article and A11y→human stand in.
+ */
+const studioViewIcons: Partial<Record<ThemeIcons, Partial<Record<ThemeStudioView, string>>>> = {
+  pixelarticons: {
+    grid: 'i-pixelarticons-dashboard',
+    dashboard: 'i-pixelarticons-dashboard',
+    chat: 'i-pixelarticons-message',
+    saas: 'i-pixelarticons-zap',
+    landing: 'i-pixelarticons-layout',
+    docs: 'i-pixelarticons-book-open',
+    portfolio: 'i-pixelarticons-user',
+    changelog: 'i-pixelarticons-article',
+    editor: 'i-pixelarticons-edit-box',
+    a11y: 'i-pixelarticons-human'
+  }
+}
+
 /**
  * The studio's preview state lives at app level: while on /theme the site
  * header hosts the view switcher and fullscreen gates the chrome, so both
@@ -36,3 +61,14 @@ export function useThemeStudioView() {
 
   return { view, fullscreen, views: THEME_STUDIO_VIEWS }
 }
+
+/** The view glyphs resolved for the active icon pack (override ?? Lucide). */
+export function useStudioViewIcons() {
+  const { icon } = useTheme()
+  return computed(() => {
+    const overrides = studioViewIcons[icon.value as ThemeIcons] ?? {}
+    return Object.fromEntries(
+      THEME_STUDIO_VIEWS.map(tab => [tab.value, overrides[tab.value] ?? tab.icon])
+    ) as Record<ThemeStudioView, string>
+  })
+}
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index b4039273f3..403e8eaf4d 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
 const { track } = useAnalytics()
-const { currentDoc, resetTheme } = useTheme()
+const { currentDoc, resetTheme, icon: iconSet } = useTheme()
+
+// The studio toolbar skins to the applied pack: undo/redo/reset/export/
+// fullscreen come from the pack's studio glyphs, while import and the group
+// picker's chevron reuse the standard `upload`/`chevronDown` semantic keys
+// (read off appConfig.ui.icons, already the active pack's resolved map).
+const studioIcons = useStudioIcons()
 
 // View and fullscreen are app-level state: the site header hosts the view
 // switcher while on /theme and hides itself in fullscreen.
@@ -181,7 +187,11 @@ const shareMode = ref<'import' | 'export'>('export')
              paint containment on the views' own scrollers — Chromium won't
              clip nested composited layers (sticky headers, filtered glows)
              by an ancestor's overflow alone. -->
-        <div class="flex-1 min-h-0 overflow-hidden [&>*]:[contain:paint]">
+        <!-- Keyed on the icon pack: the demo views resolve icons into plain
+             data arrays at setup, so they can't react to a live pack swap in
+             place — remounting on the (infrequent) swap re-resolves them,
+             which is far cheaper than making every demo's data computed. -->
+        <div :key="iconSet" class="flex-1 min-h-0 overflow-hidden [&>*]:[contain:paint]">
           <Playground v-if="view === 'grid'" />
           <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
           <ThemeStudioViewChat v-else-if="view === 'chat'" />
@@ -226,7 +236,7 @@ const shareMode = ref<'import' | 'export'>('export')
                   :label="settingGroup.label"
                   color="neutral"
                   variant="subtle"
-                  trailing-icon="i-lucide-chevron-down"
+                  :trailing-icon="appConfig.ui.icons.chevronDown"
                 />
               </UChip>
 
@@ -269,7 +279,7 @@ const shareMode = ref<'import' | 'export'>('export')
             <UFieldGroup class="shrink-0">
               <UTooltip text="Undo" :kbds="['meta', 'Z']">
                 <UButton
-                  icon="i-lucide-undo-2"
+                  :icon="studioIcons.undo"
                   color="neutral"
                   variant="subtle"
                   :disabled="!past.length"
@@ -280,7 +290,7 @@ const shareMode = ref<'import' | 'export'>('export')
 
               <UTooltip text="Redo" :kbds="['meta', 'shift', 'Z']">
                 <UButton
-                  icon="i-lucide-redo-2"
+                  :icon="studioIcons.redo"
                   color="neutral"
                   variant="subtle"
                   :disabled="!future.length"
@@ -292,7 +302,7 @@ const shareMode = ref<'import' | 'export'>('export')
 
             <UTooltip :text="resetLabel">
               <UButton
-                icon="i-lucide-rotate-ccw"
+                :icon="studioIcons.reset"
                 color="neutral"
                 variant="subtle"
                 :disabled="!canReset"
@@ -305,7 +315,7 @@ const shareMode = ref<'import' | 'export'>('export')
               <UFieldGroup>
                 <UTooltip text="Import theme">
                   <UButton
-                    icon="i-lucide-upload"
+                    :icon="appConfig.ui.icons.upload"
                     color="neutral"
                     variant="subtle"
                     aria-label="Import theme"
@@ -315,7 +325,7 @@ const shareMode = ref<'import' | 'export'>('export')
 
                 <UButton
                   label="Export"
-                  icon="i-lucide-download"
+                  :icon="studioIcons.export"
                   color="neutral"
                   variant="subtle"
                   @click="shareMode = 'export'; shareOpen = true"
@@ -325,7 +335,7 @@ const shareMode = ref<'import' | 'export'>('export')
 
             <UTooltip :text="fullscreen ? 'Exit fullscreen' : 'Fullscreen preview'" :kbds="fullscreen ? ['Esc'] : ['F']">
               <UButton
-                :icon="fullscreen ? 'i-lucide-minimize' : 'i-lucide-maximize'"
+                :icon="fullscreen ? studioIcons.exitFullscreen : studioIcons.fullscreen"
                 color="neutral"
                 variant="subtle"
                 :aria-label="fullscreen ? 'Exit fullscreen preview' : 'Fullscreen preview'"
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index d245c13df2..3c600f277c 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -275,7 +275,7 @@ export const presets: ThemePreset[] = [{
     // One flat 600 across every weight step — comic lettering has a single
     // stroke width, and Comic Neue's 400 reads too thin for the look.
     font: { sans: 'Comic Neue', weights: { normal: 600, medium: 600, semibold: 600, bold: 600 } },
-    icons: 'iconoir',
+    icons: 'pixelarticons',
     // Inked page: near-black default AND accented borders over muted panel
     // edges, deep red at 600 in light, flat 50s inversions in dark.
     tokens: {
@@ -356,7 +356,7 @@ export const presets: ThemePreset[] = [{
       neutral: 'parchment'
     },
     radius: 0.375,
-    font: { sans: 'DM Sans' },
+    font: { sans: 'DM Sans', heading: { font: 'Source Serif 4', weight: 400 } },
     icons: 'heroicons',
     // Deep cream page over ivory surfaces in light, with the border family
     // stepped one deeper to hold on the tinted page; one flat 800 surface
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index f275ec8087..c6f4ad2b39 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -221,6 +221,12 @@ const HARD_BASE = 'shadow-(--ui-shadow-hard)'
 const HARD_LG = 'shadow-(--ui-shadow-hard-lg)'
 const HARD_SM = 'shadow-(--ui-shadow-hard-sm)'
 
+// The pill tabs' stock trigger shadow is the pre-hydration active-tab fallback
+// (shown before reka mounts its indicator), emitted through the library's
+// `ssr()` helper with this exact modifier chain. A bare `before:shadow-none`
+// won't tailwind-merge against it — the override must carry the same chain.
+const TABS_SSR_SHADOW_NONE = 'in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-none'
+
 const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
   none: {},
   // Strip the stock shadows the library ships on overlay surfaces — the
@@ -236,7 +242,10 @@ const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
     toast: { slots: { root: 'shadow-none' } },
     drawer: { slots: { content: 'shadow-none' } },
     modal: { compoundVariants: [{ fullscreen: false, class: { content: 'shadow-none' } }] },
-    slideover: { slots: { content: 'sm:shadow-none' } }
+    slideover: { slots: { content: 'sm:shadow-none' } },
+    // The pill tabs ship a stock shadow-xs on the indicator and trigger
+    // pseudo — strip both so None reads flat like every other surface.
+    tabs: { compoundVariants: [{ variant: 'pill', class: { list: 'shadow-none', indicator: 'shadow-none', trigger: TABS_SSR_SHADOW_NONE } }] }
   },
   soft: {
     // shadow-(color:--ui-shadow-final-soft) recolors the preset shadows through the
@@ -272,7 +281,11 @@ const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
     // classes would lose the tailwind-merge, so this must be a compound.
     modal: { compoundVariants: [{ fullscreen: false, class: { content: SOFT_LG } }] },
     // slideover is edge-to-edge on mobile; only its sm+ panel casts a shadow.
-    slideover: { slots: { content: 'sm:shadow-lg shadow-(color:--ui-shadow-final-soft)' } }
+    slideover: { slots: { content: 'sm:shadow-lg shadow-(color:--ui-shadow-final-soft)' } },
+    // The whole pill bar is the raised surface — the list casts the shadow
+    // like a control; the indicator/trigger stock shadows drop so it doesn't
+    // double up inside.
+    tabs: { compoundVariants: [{ variant: 'pill', class: { list: 'shadow-sm shadow-(color:--ui-shadow-final-soft)', indicator: 'shadow-none', trigger: TABS_SSR_SHADOW_NONE } }] }
   },
   hard: {
     button: {
@@ -304,7 +317,10 @@ const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
     toast: { slots: { root: HARD_LG } },
     drawer: { slots: { content: HARD_LG } },
     modal: { compoundVariants: [{ fullscreen: false, class: { content: HARD_LG } }] },
-    slideover: { slots: { content: 'sm:shadow-(--ui-shadow-hard-lg)' } }
+    slideover: { slots: { content: 'sm:shadow-(--ui-shadow-hard-lg)' } },
+    // The whole pill bar takes the hard drop like a control; the
+    // indicator/trigger stock shadows drop so only the bar casts.
+    tabs: { compoundVariants: [{ variant: 'pill', class: { list: HARD_BASE, indicator: 'shadow-none', trigger: TABS_SSR_SHADOW_NONE } }] }
   }
 }
 
diff --git a/docs/app/utils/theme.ts b/docs/app/utils/theme.ts
index a74a69130f..7faa8333ac 100644
--- a/docs/app/utils/theme.ts
+++ b/docs/app/utils/theme.ts
@@ -375,11 +375,233 @@ export const themeIcons = {
     tip: 'i-tabler-bulb',
     upload: 'i-tabler-upload',
     warning: 'i-tabler-alert-triangle'
+  },
+  // 8-bit pixel-art set for the Comic preset. Pixelarticons is a functional
+  // UI pack (unlike streamline-pixel, which has no arrows/chevrons), but it
+  // still lacks a few glyphs — noted inline where a substitute stands in.
+  pixelarticons: {
+    arrowDown: 'i-pixelarticons-arrow-down',
+    arrowLeft: 'i-pixelarticons-arrow-left',
+    arrowRight: 'i-pixelarticons-arrow-right',
+    arrowUp: 'i-pixelarticons-arrow-up',
+    caution: 'i-pixelarticons-square-alert',
+    check: 'i-pixelarticons-check',
+    // No double-chevron glyph — single directional chevrons keep prev/next
+    // (pagination first/last, calendar year nav) pointing the right way.
+    chevronDoubleLeft: 'i-pixelarticons-chevron-left',
+    chevronDoubleRight: 'i-pixelarticons-chevron-right',
+    chevronDown: 'i-pixelarticons-chevron-down',
+    chevronLeft: 'i-pixelarticons-chevron-left',
+    chevronRight: 'i-pixelarticons-chevron-right',
+    chevronUp: 'i-pixelarticons-chevron-up',
+    close: 'i-pixelarticons-close',
+    copy: 'i-pixelarticons-clipboard',
+    copyCheck: 'i-pixelarticons-clipboard-note',
+    dark: 'i-pixelarticons-moon',
+    // No grip/drag handle — vertical dots read as a draggable affordance.
+    drag: 'i-pixelarticons-more-vertical',
+    ellipsis: 'i-pixelarticons-more-horizontal',
+    error: 'i-pixelarticons-letter-x-circle',
+    external: 'i-pixelarticons-external-link',
+    eye: 'i-pixelarticons-eye',
+    eyeOff: 'i-pixelarticons-eye-off',
+    file: 'i-pixelarticons-file',
+    // No open-folder glyph — repeat the closed folder (as iconoir does).
+    folder: 'i-pixelarticons-folder',
+    folderOpen: 'i-pixelarticons-folder',
+    hash: 'i-pixelarticons-hash',
+    info: 'i-pixelarticons-info-box',
+    light: 'i-pixelarticons-sun',
+    loading: 'i-pixelarticons-loader',
+    menu: 'i-pixelarticons-menu',
+    minus: 'i-pixelarticons-minus',
+    panelClose: 'i-pixelarticons-chevron-left',
+    panelOpen: 'i-pixelarticons-chevron-right',
+    plus: 'i-pixelarticons-plus',
+    reload: 'i-pixelarticons-reload',
+    search: 'i-pixelarticons-search',
+    // No dedicated stop glyph — a filled square is the universal stop mark.
+    stop: 'i-pixelarticons-square',
+    star: 'i-pixelarticons-star',
+    success: 'i-pixelarticons-check',
+    system: 'i-pixelarticons-monitor',
+    tip: 'i-pixelarticons-lightbulb',
+    upload: 'i-pixelarticons-upload',
+    warning: 'i-pixelarticons-warning-diamond'
   }
 }
 
 export type ThemeIcons = keyof typeof themeIcons
 
+/**
+ * Glyphs for the studio's own chrome (toolbar controls, the header Ask-AI
+ * button, the theme-picker/preset button), per icon pack, so the chrome skins
+ * to match the applied theme. Kept OUT of `themeIcons` on purpose: these are
+ * studio-only and must never ride the export's icon config. `reset` is its own
+ * circular-arrow glyph rather than reusing the `reload` semantic key — in
+ * several packs `reload` is a back-arrow that would collide with `undo`.
+ * Import and the group-picker chevron reuse the standard `upload`/`chevronDown`
+ * keys (present in every pack), so they aren't repeated here.
+ */
+export const studioIcons: Record<ThemeIcons, {
+  undo: string
+  redo: string
+  reset: string
+  export: string
+  fullscreen: string
+  exitFullscreen: string
+  /** Header "Ask AI" button. */
+  assistant: string
+  /** Theme-picker + preset-menu button. */
+  themes: string
+  /**
+   * Header GitHub link. Packs without a native brand glyph fall back to
+   * simple-icons, which every install already ships for the logo set.
+   */
+  github: string
+  /** Preset-menu randomize die. Packs without a die use their shuffle glyph. */
+  dice: string
+}> = {
+  lucide: { undo: 'i-lucide-undo-2', redo: 'i-lucide-redo-2', reset: 'i-lucide-rotate-ccw', export: 'i-lucide-download', fullscreen: 'i-lucide-maximize', exitFullscreen: 'i-lucide-minimize', assistant: 'i-lucide-bot-message-square', themes: 'i-lucide-swatch-book', github: 'i-lucide-github', dice: 'i-lucide-dices' },
+  bootstrap: { undo: 'i-bi-arrow-90deg-left', redo: 'i-bi-arrow-90deg-right', reset: 'i-bi-arrow-counterclockwise', export: 'i-bi-download', fullscreen: 'i-bi-fullscreen', exitFullscreen: 'i-bi-fullscreen-exit', assistant: 'i-bi-robot', themes: 'i-bi-palette', github: 'i-bi-github', dice: 'i-bi-dice-5' },
+  heroicons: { undo: 'i-heroicons-arrow-uturn-left', redo: 'i-heroicons-arrow-uturn-right', reset: 'i-heroicons-arrow-path', export: 'i-heroicons-arrow-down-tray', fullscreen: 'i-heroicons-arrows-pointing-out', exitFullscreen: 'i-heroicons-arrows-pointing-in', assistant: 'i-heroicons-sparkles', themes: 'i-heroicons-swatch', github: 'i-simple-icons-github', dice: 'i-heroicons-arrows-right-left' },
+  iconoir: { undo: 'i-iconoir-undo', redo: 'i-iconoir-redo', reset: 'i-iconoir-refresh-double', export: 'i-iconoir-download', fullscreen: 'i-iconoir-expand', exitFullscreen: 'i-iconoir-collapse', assistant: 'i-iconoir-magic-wand', themes: 'i-iconoir-palette', github: 'i-iconoir-github', dice: 'i-iconoir-shuffle' },
+  material: { undo: 'i-material-symbols-undo', redo: 'i-material-symbols-redo', reset: 'i-material-symbols-refresh', export: 'i-material-symbols-download', fullscreen: 'i-material-symbols-fullscreen', exitFullscreen: 'i-material-symbols-fullscreen-exit', assistant: 'i-material-symbols-robot', themes: 'i-material-symbols-palette', github: 'i-simple-icons-github', dice: 'i-material-symbols-shuffle' },
+  phosphor: { undo: 'i-ph-arrow-arc-left', redo: 'i-ph-arrow-arc-right', reset: 'i-ph-arrow-counter-clockwise', export: 'i-ph-download', fullscreen: 'i-ph-arrows-out', exitFullscreen: 'i-ph-arrows-in', assistant: 'i-ph-robot', themes: 'i-ph-palette', github: 'i-ph-github-logo', dice: 'i-ph-shuffle' },
+  remix: { undo: 'i-ri-arrow-go-back-line', redo: 'i-ri-arrow-go-forward-line', reset: 'i-ri-restart-line', export: 'i-ri-download-line', fullscreen: 'i-ri-fullscreen-line', exitFullscreen: 'i-ri-fullscreen-exit-line', assistant: 'i-ri-robot-2-line', themes: 'i-ri-palette-line', github: 'i-ri-github-fill', dice: 'i-ri-dice-line' },
+  tabler: { undo: 'i-tabler-arrow-back-up', redo: 'i-tabler-arrow-forward-up', reset: 'i-tabler-refresh', export: 'i-tabler-download', fullscreen: 'i-tabler-maximize', exitFullscreen: 'i-tabler-minimize', assistant: 'i-tabler-robot', themes: 'i-tabler-palette', github: 'i-tabler-brand-github', dice: 'i-tabler-dice' },
+  // Pixel pack has no `themes`/`palette` glyph, so `colors-swatch` stands in
+  // for the swatch-book.
+  pixelarticons: { undo: 'i-pixelarticons-undo', redo: 'i-pixelarticons-redo', reset: 'i-pixelarticons-reload', export: 'i-pixelarticons-download', fullscreen: 'i-pixelarticons-viewport-wide', exitFullscreen: 'i-pixelarticons-viewport-narrow', assistant: 'i-pixelarticons-robot', themes: 'i-pixelarticons-colors-swatch', github: 'i-pixelarticons-github', dice: 'i-pixelarticons-dice' }
+}
+
+/**
+ * Functional icons the preview demos use beyond the 43 semantic keys (dashboard
+ * nav, account menus, etc.). These are NOT part of any theme — they only skin
+ * the studio's demo content to the applied pack, so they stay out of themeIcons
+ * (and exports). The Lucide names ARE the defaults each demo already hardcodes;
+ * `studioExtraOverrides` supplies a pack's glyph where it differs, falling back
+ * to the Lucide default for any pack/key with no entry.
+ */
+export const STUDIO_EXTRA_DEFAULTS = {
+  bell: 'i-lucide-bell',
+  calendar: 'i-lucide-calendar',
+  settings: 'i-lucide-settings',
+  home: 'i-lucide-house',
+  inbox: 'i-lucide-inbox',
+  logout: 'i-lucide-log-out',
+  trash: 'i-lucide-trash',
+  user: 'i-lucide-user',
+  users: 'i-lucide-users',
+  userPlus: 'i-lucide-user-plus',
+  send: 'i-lucide-send',
+  reply: 'i-lucide-reply',
+  paperclip: 'i-lucide-paperclip',
+  messageCircle: 'i-lucide-message-circle',
+  creditCard: 'i-lucide-credit-card',
+  dollar: 'i-lucide-circle-dollar-sign',
+  cart: 'i-lucide-shopping-cart',
+  chart: 'i-lucide-chart-pie',
+  list: 'i-lucide-list',
+  sort: 'i-lucide-chevrons-up-down',
+  mail: 'i-lucide-mail',
+  heart: 'i-lucide-heart',
+  github: 'i-lucide-github',
+  trendingUp: 'i-lucide-trending-up',
+  trendingDown: 'i-lucide-trending-down',
+  tag: 'i-lucide-tag',
+  filePlus: 'i-lucide-file-plus',
+  folderPlus: 'i-lucide-folder-plus',
+  movie: 'i-lucide-clapperboard',
+  clock: 'i-lucide-clock',
+  coffee: 'i-lucide-coffee',
+  globe: 'i-lucide-globe',
+  share: 'i-lucide-share',
+  link: 'i-lucide-link',
+  lock: 'i-lucide-lock',
+  filter: 'i-lucide-filter',
+  image: 'i-lucide-image',
+  camera: 'i-lucide-camera',
+  play: 'i-lucide-play',
+  terminal: 'i-lucide-terminal',
+  shield: 'i-lucide-shield',
+  sparkles: 'i-lucide-sparkles',
+  zap: 'i-lucide-zap',
+  package: 'i-lucide-package',
+  pin: 'i-lucide-pin',
+  palette: 'i-lucide-palette',
+  paintBucket: 'i-lucide-paint-bucket',
+  mic: 'i-lucide-mic',
+  heading: 'i-lucide-heading',
+  briefcase: 'i-lucide-briefcase',
+  bookOpen: 'i-lucide-book-open',
+  pencil: 'i-lucide-pencil',
+  undo: 'i-lucide-undo',
+  redo: 'i-lucide-redo'
+} as const
+
+export const studioExtraOverrides: Partial<Record<ThemeIcons, Partial<Record<keyof typeof STUDIO_EXTRA_DEFAULTS, string>>>> = {
+  // Pixel has no settings/cog (sliders stands in), no pie chart (generic
+  // chart) and no up-down chevron (sort). Everything else is a native match.
+  pixelarticons: {
+    bell: 'i-pixelarticons-bell',
+    calendar: 'i-pixelarticons-calendar',
+    settings: 'i-pixelarticons-sliders',
+    home: 'i-pixelarticons-home',
+    inbox: 'i-pixelarticons-inbox',
+    logout: 'i-pixelarticons-logout',
+    trash: 'i-pixelarticons-trash',
+    user: 'i-pixelarticons-user',
+    users: 'i-pixelarticons-users',
+    userPlus: 'i-pixelarticons-user-plus',
+    send: 'i-pixelarticons-send',
+    reply: 'i-pixelarticons-reply',
+    paperclip: 'i-pixelarticons-paperclip',
+    messageCircle: 'i-pixelarticons-message',
+    creditCard: 'i-pixelarticons-credit-card',
+    dollar: 'i-pixelarticons-dollar',
+    cart: 'i-pixelarticons-shopping-cart',
+    chart: 'i-pixelarticons-chart',
+    list: 'i-pixelarticons-list',
+    sort: 'i-pixelarticons-sort',
+    mail: 'i-pixelarticons-mail',
+    heart: 'i-pixelarticons-heart',
+    github: 'i-pixelarticons-github',
+    trendingUp: 'i-pixelarticons-trending-up',
+    trendingDown: 'i-pixelarticons-trending-down',
+    tag: 'i-pixelarticons-label',
+    filePlus: 'i-pixelarticons-file-plus',
+    folderPlus: 'i-pixelarticons-folder-plus',
+    movie: 'i-pixelarticons-movie',
+    clock: 'i-pixelarticons-clock',
+    coffee: 'i-pixelarticons-coffee',
+    globe: 'i-pixelarticons-globe',
+    share: 'i-pixelarticons-share',
+    link: 'i-pixelarticons-link',
+    lock: 'i-pixelarticons-lock',
+    filter: 'i-pixelarticons-filter',
+    image: 'i-pixelarticons-image',
+    camera: 'i-pixelarticons-camera',
+    play: 'i-pixelarticons-play',
+    terminal: 'i-pixelarticons-terminal',
+    shield: 'i-pixelarticons-shield',
+    sparkles: 'i-pixelarticons-sparkles',
+    zap: 'i-pixelarticons-zap',
+    package: 'i-pixelarticons-package',
+    pin: 'i-pixelarticons-pin',
+    // Pixel has no palette glyph — colors-swatch stands in.
+    palette: 'i-pixelarticons-colors-swatch',
+    paintBucket: 'i-pixelarticons-paint-bucket',
+    mic: 'i-pixelarticons-mic',
+    heading: 'i-pixelarticons-heading',
+    briefcase: 'i-pixelarticons-briefcase',
+    bookOpen: 'i-pixelarticons-book-open',
+    pencil: 'i-pixelarticons-pencil',
+    undo: 'i-pixelarticons-undo',
+    redo: 'i-pixelarticons-redo'
+  }
+}
+
 // The docs' own render baseline. It intentionally diverges from the library
 // defaults in one place: light `--ui-bg` follows the neutral ramp (set in
 // main.css) so tinted neutrals reach the page background. Export diffing

From 02a2c026e28c572ad42cf6db9e8655d7eb7f125a Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 20 Jul 2026 21:21:37 +0200
Subject: [PATCH 156/185] =?UTF-8?q?feat(theme-studio):=20add=20fine=20shad?=
 =?UTF-8?q?e=20stops=20(150=E2=80=93850)=20to=20palette=20editor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add an opt-in 19-stop ramp (the eight 100-step midpoints alongside
Tailwind's standard 11) selectable per custom palette via a dropdown in
the gradient square, and expose the midpoints to the token shade sliders.

Value-based stop positioning keeps the standard 11 byte-identical whether
fine or not. Midpoint tokens reference --color-custom-<ramp>-<mid>
directly (defined by @theme static) since the runtime plugin only emits
--ui-color-* for the standard stops — referencing those for a midpoint
dangled and rendered transparent.

Guard the transitions between modes: narrowing 19→11, clearing, or
switching to a stock ramp snaps any orphaned midpoint token back to the
nearest standard stop; seeding infers fine stops from a source palette's
midpoint keys so an imported fine ramp keeps them on edit.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioColorSection.vue  | 19 +++--
 .../theme-studio/ThemeStudioCurveEditor.vue   | 18 +++--
 .../theme-studio/ThemeStudioPaletteEditor.vue | 69 +++++++++++++++----
 .../theme-studio/ThemeStudioSliderRow.vue     | 17 +++--
 docs/app/composables/useThemeStudio.ts        | 56 ++++++++++++---
 docs/app/utils/theme-engine/import.ts         |  4 +-
 docs/app/utils/theme-engine/palette.ts        | 22 ++++--
 docs/app/utils/theme-engine/styles.ts         | 17 ++++-
 docs/app/utils/theme-engine/types.ts          | 15 +++-
 test/utils/theme-engine.spec.ts               | 21 ++++++
 10 files changed, 209 insertions(+), 49 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioColorSection.vue b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
index 2b8a1e13db..97ebb6c2e5 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADE_LADDER, canonicalTokenShades } from '../../utils/theme-engine'
+import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADE_LADDER, SHADE_LADDER_FINE, canonicalTokenShades } from '../../utils/theme-engine'
 import type { ColorAlias, SectionKey, ShadeStop } from '../../utils/theme-engine'
 
 /**
@@ -17,11 +17,18 @@ const props = defineProps<{
   sectionKey?: SectionKey
 }>()
 
-const { style, setStyle, rampChip, baselineDoc } = useThemeStudio()
+const { style, setStyle, rampChip, baselineDoc, isCustomPalette, paletteParams } = useThemeStudio()
 
 /** The active preset's own shade choices — what a row reset restores. */
 const baselineShades = computed(() => canonicalTokenShades(baselineDoc.value))
 
+// When this alias is a fine-stops custom palette, its tokens can pick the
+// 100-step midpoints too — the sliders (and their model mapping) span the
+// wider ladder. Stock ramps have no midpoints, so they stay on the standard 11.
+const shadeLadder = computed<readonly ShadeStop[]>(() => (isCustomPalette(props.alias) && paletteParams.value[props.alias]?.fineStops
+  ? SHADE_LADDER_FINE
+  : SHADE_LADDER))
+
 const title = computed(() => props.label ?? capitalize(props.alias))
 
 const paletteEditor = ref(false)
@@ -38,13 +45,15 @@ function tokenShadeControl(token: string, defaults: { light: ShadeStop, dark: Sh
   const model = computed({
     get: () => {
       const value = style.value.tokenShades?.[token]?.[target] ?? defaults[target]
-      return SHADE_LADDER.indexOf(value as typeof SHADE_LADDER[number])
+      // A midpoint set while fine, then narrowed back, no longer sits on the
+      // ladder (indexOf -1) — clamp to 0 so the slider stays grabbable.
+      return Math.max(0, shadeLadder.value.indexOf(value as ShadeStop))
     },
     set: (index: number) => {
       setStyle({
         tokenShades: {
           ...style.value.tokenShades,
-          [token]: { ...style.value.tokenShades?.[token], [target]: SHADE_LADDER[index]! }
+          [token]: { ...style.value.tokenShades?.[token], [target]: shadeLadder.value[index]! }
         }
       })
     }
@@ -125,6 +134,7 @@ const openGroups = reactive<Record<string, boolean>>({})
           v-model="slider.model.value"
           :mode="modeName"
           :chip="rampChip(alias)"
+          :ladder="shadeLadder"
           resettable
           :dirty="slider.dirty.value"
           @reset="slider.reset()"
@@ -157,6 +167,7 @@ const openGroups = reactive<Record<string, boolean>>({})
                   v-model="slider.model.value"
                   :mode="modeName"
                   :chip="rampChip(section.ramp)"
+                  :ladder="shadeLadder"
                   resettable
                   :dirty="slider.dirty.value"
                   @reset="slider.reset()"
diff --git a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
index 3c739495b5..3ee7b801f1 100644
--- a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
@@ -1,13 +1,19 @@
 <script setup lang="ts">
-import { sampleCurve, SHADES } from '../../utils/theme-engine'
+import { sampleCurve, SHADES, shadeX } from '../../utils/theme-engine'
 import type { ChannelCurve } from '../../utils/theme-engine'
 
 const props = defineProps<{
   /** Display window for the channel value axis */
   yMin: number
   yMax: number
-  /** Fill colors for the 11 stop dots along the curve */
+  /** Fill colors for the stop dots along the curve, one per stop. */
   stopColors?: string[]
+  /**
+   * Curve x-position (0–1) for each stop, aligned with `stopColors`. Omit for
+   * the standard 11 stops (evenly ranked); a fine ramp passes 19 with the
+   * midpoints at their true positions (150 → 0.15, not an even 19th).
+   */
+  stopXs?: number[]
   /**
    * 2D color field behind the plot: one entry per column (ramp position),
    * each an array of colors sampled top (yMax) to bottom (yMin). SVG can't
@@ -74,10 +80,10 @@ const fieldRects = computed(() => {
   })
 })
 
-const stops = computed(() => SHADES.map((shade, index) => {
-  const x = index / (SHADES.length - 1)
+const stopXs = computed(() => props.stopXs ?? SHADES.map(shadeX))
+const stops = computed(() => stopXs.value.map((x, index) => {
   return {
-    shade,
+    key: index,
     cx: toX(x),
     cy: toY(sampleCurve(x, curve.value)),
     fill: props.stopColors?.[index] || 'currentColor'
@@ -244,7 +250,7 @@ function onPointerUp(event: PointerEvent) {
     <!-- shade stops on the curve -->
     <circle
       v-for="stop in stops"
-      :key="stop.shade"
+      :key="stop.key"
       :cx="stop.cx"
       :cy="stop.cy"
       r="2.25"
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 88740dbe30..cd49a4c90e 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useThrottleFn, watchIgnorable } from '@vueuse/core'
-import { SHADES, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, PALETTE_EFFECT_DEFAULTS, generatePalette, fitPalette, applyPaletteEffects, isDefaultEffects, sampleCurve, clampToGamut, formatOklch, parseColor, oklchToRgb, rgbToHex } from '../../utils/theme-engine'
+import { SHADES, SHADES_FINE, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, PALETTE_EFFECT_DEFAULTS, generatePalette, fitPalette, applyPaletteEffects, isDefaultEffects, sampleCurve, shadeX, clampToGamut, formatOklch, parseColor, oklchToRgb, rgbToHex } from '../../utils/theme-engine'
 import type { PaletteCurveParams, PaletteEffects, StoredPaletteParams, ColorAlias } from '../../utils/theme-engine'
 
 const props = defineProps<{
@@ -34,6 +34,21 @@ const stored = paletteParams.value[props.alias]
 const effects = reactive<PaletteEffects>({ ...PALETTE_EFFECT_DEFAULTS, ...(stored?.effects ?? {}) })
 const effectAmount = ref(stored?.amount ?? 100)
 
+// Opt-in to the 100-step midpoints (150…850). Off keeps the standard 11
+// Tailwind stops; on generates 19 and exposes them to the shade sliders.
+const fineStops = ref(stored?.fineStops ?? false)
+const stopSet = computed(() => (fineStops.value ? SHADES_FINE : SHADES))
+
+/** The stop-count dropdown — numeric so USelect never has to bind a falsy value. */
+const stopItems = [
+  { label: '11 shades', value: SHADES.length },
+  { label: '19 shades', value: SHADES_FINE.length }
+]
+const stopCount = computed({
+  get: () => (fineStops.value ? SHADES_FINE.length : SHADES.length),
+  set: value => (fineStops.value = value === SHADES_FINE.length)
+})
+
 /** Base curves the modifiers transform from, so they never compound. */
 let seedBase: PaletteCurveParams
   = stored && 'lightness' in stored ? pickCurves(stored) : defaults()
@@ -45,11 +60,12 @@ const params = reactive<PaletteCurveParams>(applyPaletteEffects(seedBase, effect
 
 const active = computed(() => isCustomPalette(props.alias))
 
-const shades = computed(() => generatePalette(params))
-const stopColors = computed(() => SHADES.map(shade => shades.value[shade]))
+const shades = computed(() => generatePalette(params, fineStops.value))
+const stopColors = computed(() => stopSet.value.map(shade => shades.value[shade]))
+const stopXs = computed(() => stopSet.value.map(shadeX))
 
 /** Every swatch with its hex/rgb equivalents for the tooltip. */
-const swatchInfo = computed(() => SHADES.map((shade) => {
+const swatchInfo = computed(() => stopSet.value.map((shade) => {
   const oklch = shades.value[shade]!
   const parsed = parseColor(oklch)
   const rgb = parsed ? oklchToRgb(parsed) : undefined
@@ -209,9 +225,13 @@ const throttledApply = useThrottleFn(() => {
   if (!effectsDirty.value) {
     seedBase = structuredClone(toRaw(params))
   }
-  setPaletteFromCurve(props.alias, structuredClone(seedBase), { ...effects }, effectAmount.value)
+  setPaletteFromCurve(props.alias, structuredClone(seedBase), { ...effects }, effectAmount.value, fineStops.value)
 }, 60, true, true)
 
+// Toggling the stop set isn't a curve edit, so drive an apply directly to
+// regenerate the ramp (and persist the choice) at the new granularity.
+watch(fineStops, () => throttledApply())
+
 // Programmatic writes into `params` (seeding, external sync) must not
 // live-apply — only user edits do. watchIgnorable scopes the suppression
 // to the seed's own writes instead of a whole tick.
@@ -225,6 +245,8 @@ function seed(values: PaletteCurveParams) {
   seedBase = structuredClone(next)
   Object.assign(effects, PALETTE_EFFECT_DEFAULTS)
   effectAmount.value = 100
+  // A fresh fit is 11-stop; seedFromCurrent re-detects midpoints after.
+  fineStops.value = false
   ignoreUpdates(() => {
     Object.assign(params, next)
   })
@@ -268,6 +290,9 @@ function seedFromCurrent() {
   const source = paletteShades(name)
   if (source) {
     seed(fitPalette(source))
+    // A ramp that already carries midpoints (an imported fine palette) keeps
+    // them, so opening the editor doesn't silently narrow it back to 11.
+    if (source[150] !== undefined) fineStops.value = true
   }
 }
 
@@ -283,6 +308,7 @@ watch(() => paletteParams.value[props.alias], (value) => {
   normalizeHue(seedBase)
   Object.assign(effects, PALETTE_EFFECT_DEFAULTS, value.effects ?? {})
   effectAmount.value = value.amount ?? 100
+  fineStops.value = value.fineStops ?? false
   ignoreUpdates(() => {
     Object.assign(params, applyPaletteEffects(seedBase, effects, effectAmount.value))
   })
@@ -340,15 +366,30 @@ function resetEffects() {
         />
 
         <div>
-          <ThemeStudioCurveEditor
-            v-model="params[tab]"
-            :y-min="windows[tab].min"
-            :y-max="windows[tab].max"
-            :stop-colors="stopColors"
-            :field="field"
-            @drag-start="onDragStart"
-            @drag-end="onDragEnd"
-          />
+          <div class="relative">
+            <ThemeStudioCurveEditor
+              v-model="params[tab]"
+              :y-min="windows[tab].min"
+              :y-max="windows[tab].max"
+              :stop-colors="stopColors"
+              :stop-xs="stopXs"
+              :field="field"
+              @drag-start="onDragStart"
+              @drag-end="onDragEnd"
+            />
+
+            <!-- Stop-count picker, tucked into the gradient's bottom-left. -->
+            <UTooltip text="Shade stops">
+              <USelect
+                v-model="stopCount"
+                :items="stopItems"
+                size="xs"
+                variant="soft"
+                class="absolute bottom-1.5 left-1.5 z-10 w-24 bg-default/70 backdrop-blur-sm"
+                :ui="{ base: 'ring ring-default' }"
+              />
+            </UTooltip>
+          </div>
 
           <div ref="stripRef" class="flex rounded-b-sm overflow-hidden ring ring-default">
             <UPopover
diff --git a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
index ac825b6218..3c1310f78c 100644
--- a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { SHADE_LADDER } from '../../utils/theme-engine'
+import type { ShadeStop } from '../../utils/theme-engine'
 
 /**
  * The studio's control row — a horizontal UFormField: tiny label (or icon),
@@ -28,17 +29,21 @@ const props = withDefaults(defineProps<{
    */
   resettable?: boolean
   dirty?: boolean
+  /** Shade-row ladder — the fine ramp swaps in the wider 21-stop ladder. */
+  ladder?: readonly ShadeStop[]
 }>(), {
   min: 0,
-  max: SHADE_LADDER.length - 1,
-  step: 1
+  step: 1,
+  ladder: () => SHADE_LADDER
 })
 
-/** Plain rows: the value itself. Shade rows: an index into SHADES. */
+/** Plain rows: the value itself. Shade rows: an index into the ladder. */
 const value = defineModel<number>({ required: true })
 
 const shade = computed(() => !!props.chip && !!props.mode)
-const stop = computed(() => SHADE_LADDER[value.value])
+// Shade rows span the ladder; plain rows use the caller's max (default 0).
+const sliderMax = computed(() => (shade.value ? props.ladder.length - 1 : props.max ?? SHADE_LADDER.length - 1))
+const stop = computed(() => props.ladder[value.value])
 const sliderColor = computed(() => {
   if (!shade.value) return undefined
   // the ladder's ends are literals no ramp variable can express
@@ -68,7 +73,7 @@ const display = computed(() => shade.value
  * numbers). The toFixed sweeps float noise from step arithmetic.
  */
 function clamp(raw: number): number {
-  return Number(Math.min(props.max, Math.max(props.min, raw)).toFixed(4))
+  return Number(Math.min(sliderMax.value, Math.max(props.min, raw)).toFixed(4))
 }
 
 /**
@@ -126,7 +131,7 @@ function commitReadout(event: Event) {
     <USlider
       v-model="value"
       :min="min"
-      :max="max"
+      :max="sliderMax"
       :step="step"
       color="primary"
       size="xs"
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 34f341f395..ac0d2b13f0 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,7 +1,7 @@
 import colors from 'tailwindcss/colors'
 import { THEME_STATE_KEYS, THEME_STORAGE_KEYS } from '../utils/theme-keys'
-import { presets, docToSettings, isDefaultTheme, generatePalette, applyPaletteEffects, isDefaultEffects, parseCssColor, styleComponents, styleTokens, sectionFingerprint, mergeSection, canonicalTokenShades, SECTION_GROUPS, DEFAULT_COLORS, SHADES } from '../utils/theme-engine'
-import type { SectionKey, ThemeDoc, ThemePreset, PaletteCurveParams, PaletteEffects, StoredPaletteParams, StyleOptions, Shade, ColorAlias, TokenRamp } from '../utils/theme-engine'
+import { presets, docToSettings, isDefaultTheme, generatePalette, applyPaletteEffects, isDefaultEffects, parseCssColor, styleComponents, styleTokens, sectionFingerprint, mergeSection, canonicalTokenShades, TOKEN_SHADE_TARGETS, SECTION_GROUPS, DEFAULT_COLORS, SHADES } from '../utils/theme-engine'
+import type { SectionKey, ThemeDoc, ThemePreset, PaletteCurveParams, PaletteEffects, StoredPaletteParams, StyleOptions, Shade, ShadeStop, ColorAlias, TokenRamp } from '../utils/theme-engine'
 import { readLocalStorage } from '../utils/theme'
 
 export function useThemeStudio() {
@@ -93,7 +93,7 @@ export function useThemeStudio() {
           { lightness: entry.lightness, chroma: entry.chroma, hue: entry.hue },
           entry.effects,
           entry.amount
-        ))
+        ), entry.fineStops)
         const name = customPaletteName(alias)
         theme.applyThemeSettings({
           customColors: { [name]: ramp },
@@ -235,24 +235,61 @@ export function useThemeStudio() {
     }
   }
 
+  /**
+   * A token shade pinned to a midpoint (150…850) only resolves while its ramp
+   * is a fine-stops custom palette — that's the only thing defining
+   * `--color-custom-<ramp>-<mid>`. When a ramp narrows to 11 stops, or is
+   * cleared / switched to a stock colour, that variable disappears, so snap any
+   * now-orphaned midpoint token back to the nearest standard stop rather than
+   * leaving a dangling reference (which renders transparent).
+   */
+  function sanitizeTokenShades() {
+    const shades = style.value.tokenShades
+    if (!shades) return
+    let changed = false
+    const next: NonNullable<StyleOptions['tokenShades']> = {}
+    for (const [token, modes] of Object.entries(shades)) {
+      const ramp = TOKEN_SHADE_TARGETS.find(target => target.token === token)?.ramp
+      const rampFine = !!ramp && isCustomPalette(ramp) && !!paletteParams.value[ramp]?.fineStops
+      const fixed: { light?: ShadeStop, dark?: ShadeStop } = {}
+      for (const mode of ['light', 'dark'] as const) {
+        const value = modes[mode]
+        if (value === undefined) continue
+        if (!rampFine && typeof value === 'number' && value % 100 === 50 && value > 100 && value < 900) {
+          fixed[mode] = (Math.round(value / 100) * 100) as ShadeStop
+          changed = true
+        } else {
+          fixed[mode] = value
+        }
+      }
+      if (Object.keys(fixed).length) next[token] = fixed
+    }
+    if (changed) setStyle({ tokenShades: next })
+  }
+
   /**
    * Generate a ramp and point the alias at it. The base curves and the
    * modifier lens persist separately, so a reload restores the editor's
    * sliders instead of silently baking them into the curves.
    */
-  function setPaletteFromCurve(alias: ColorAlias, base: PaletteCurveParams, effects?: PaletteEffects, amount = 100) {
+  function setPaletteFromCurve(alias: ColorAlias, base: PaletteCurveParams, effects?: PaletteEffects, amount = 100, fine = false) {
     const name = customPaletteName(alias)
 
     theme.applyThemeSettings({
-      customColors: { [name]: generatePalette(applyPaletteEffects(base, effects, amount)) },
+      customColors: { [name]: generatePalette(applyPaletteEffects(base, effects, amount), fine) },
       [alias]: name,
       ...(alias === 'neutral' ? { cssVariables: unownedNeutralRemaps() } : {})
     }, { track: false })
-    const entry: StoredPaletteParams = isDefaultEffects(effects, amount)
-      ? { ...base }
-      : { ...base, effects, amount }
+    const entry: StoredPaletteParams = {
+      ...base,
+      ...(isDefaultEffects(effects, amount) ? {} : { effects, amount }),
+      ...(fine ? { fineStops: true } : {})
+    }
     setPaletteParams({ ...paletteParams.value, [alias]: entry })
 
+    // Narrowing to 11 stops orphans any midpoint token pinned to this ramp.
+    if (!fine) sanitizeTokenShades()
+
     // Live drags call this at ~16Hz — one analytics event per burst is plenty.
     trackThrottled('Theme Custom Palette', { alias })
   }
@@ -276,6 +313,9 @@ export function useThemeStudio() {
 
     const { [alias]: _, ...rest } = paletteParams.value
     setPaletteParams(rest)
+
+    // A stock ramp has no midpoints — snap any token that was pinned to one.
+    sanitizeTokenShades()
   }
 
   /**
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index e9c53785ba..8a8ea158dd 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -1,5 +1,5 @@
 import type { ThemeDoc, Shade } from './types'
-import { SHADES, DEFAULT_COLORS } from './types'
+import { SHADES_FINE, DEFAULT_COLORS } from './types'
 import type { StyleOptions, DefaultVariant, DefaultSize, DefaultColor, VariantGroup } from './styles'
 import {
   styleComponents,
@@ -27,7 +27,7 @@ export interface ThemeImportResult {
   skipped: string[]
 }
 
-const SHADE_SET = new Set<number>(SHADES)
+const SHADE_SET = new Set<number>(SHADES_FINE)
 
 /* ---------------------------------------------------------------- CSS -- */
 
diff --git a/docs/app/utils/theme-engine/palette.ts b/docs/app/utils/theme-engine/palette.ts
index 98d05857fd..da11b33e2e 100644
--- a/docs/app/utils/theme-engine/palette.ts
+++ b/docs/app/utils/theme-engine/palette.ts
@@ -1,5 +1,5 @@
 import type { Shade } from './types'
-import { SHADES } from './types'
+import { SHADES, SHADES_FINE } from './types'
 import { clampToGamut, formatOklch, parseColor } from './oklch'
 import type { Oklch } from './oklch'
 
@@ -66,7 +66,7 @@ export interface PaletteEffects {
 export const PALETTE_EFFECT_DEFAULTS: PaletteEffects = { lightness: 0, contrast: 0, saturation: 0, hueShift: 0 }
 
 /** A persisted palette: the base curves plus the modifier lens over them. */
-export type StoredPaletteParams = PaletteCurveParams & { effects?: PaletteEffects, amount?: number }
+export type StoredPaletteParams = PaletteCurveParams & { effects?: PaletteEffects, amount?: number, fineStops?: boolean }
 
 export function isDefaultEffects(effects?: PaletteEffects, amount = 100): boolean {
   if (amount !== 100) return false
@@ -160,11 +160,23 @@ export function sampleCurve(x: number, curve: ChannelCurve): number {
   return cubicBezier(t, curve.y0, curve.p1y, curve.p2y, curve.y1)
 }
 
-export function generatePalette(params: PaletteCurveParams): Record<Shade, string> {
+/**
+ * A shade's fixed position along the curve (x: 0 = shade 50 … 1 = shade 950),
+ * keyed by VALUE not array index — so the standard 11 stops keep their exact
+ * position (and colour) whether or not the fine midpoints are generated, and
+ * a midpoint like 150 lands halfway between 100 (0.1) and 200 (0.2).
+ */
+export function shadeX(shade: Shade): number {
+  if (shade === 50) return 0
+  if (shade === 950) return 1
+  return shade / 1000
+}
+
+export function generatePalette(params: PaletteCurveParams, fine = false): Record<Shade, string> {
   const result = {} as Record<Shade, string>
 
-  for (const [index, shade] of SHADES.entries()) {
-    const x = index / (SHADES.length - 1)
+  for (const shade of fine ? SHADES_FINE : SHADES) {
+    const x = shadeX(shade)
 
     // Clamp here, not in the serializer: sculpted curves can demand
     // impossible chroma, and the swatches/contrast math assume sRGB.
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index c6f4ad2b39..9f4ae52686 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -212,9 +212,22 @@ const FLAT_FIELD_VARIANTS = [
 // ×1.5 for panels/overlays, ×0.66 for badge-size ones.
 const SOFT_LG = 'shadow-lg shadow-(color:--ui-shadow-final-soft)'
 
-/** A ramp shade reference — or the literal when the stop is white/black. */
+/**
+ * A ramp shade reference — or the literal when the stop is white/black.
+ * Standard stops go through the `--ui-color-<ramp>-<stop>` indirection so a
+ * token follows whatever colour the ramp is assigned. The 100-step midpoints
+ * (150…850) have NO such indirection — the runtime colours plugin only
+ * generates the 11 standard stops — so they reference the custom ramp's
+ * `--color-*` directly. That's sound because a midpoint can only exist on a
+ * fine-stops custom palette (named `custom-<ramp>`), whose `@theme static`
+ * block defines those variables in both the preview and the export.
+ */
 function shadeRef(ramp: string, stop: ShadeStop | number): string {
-  return stop === 'white' || stop === 'black' ? stop : `var(--ui-color-${ramp}-${stop})`
+  if (stop === 'white' || stop === 'black') return stop
+  if (typeof stop === 'number' && stop % 100 === 50 && stop > 100 && stop < 900) {
+    return `var(--color-custom-${ramp}-${stop})`
+  }
+  return `var(--ui-color-${ramp}-${stop})`
 }
 
 const HARD_BASE = 'shadow-(--ui-shadow-hard)'
diff --git a/docs/app/utils/theme-engine/types.ts b/docs/app/utils/theme-engine/types.ts
index f7336d9c78..45b25a5f7d 100644
--- a/docs/app/utils/theme-engine/types.ts
+++ b/docs/app/utils/theme-engine/types.ts
@@ -2,17 +2,28 @@ import { isDefaultStyle } from './styles'
 
 export const SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
 
-export type Shade = typeof SHADES[number]
+/**
+ * The optional "fine" ramp: the standard stops plus the 100-step midpoints
+ * (150…850). A palette opts in via its `fineStops` flag; generation and the
+ * shade sliders then span these 19 stops. `Shade` is the union of the fine
+ * set, so every fine stop is a valid shade — the standard 11 are a subset,
+ * and a non-fine palette simply never emits the extras.
+ */
+export const SHADES_FINE = [50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950] as const
+
+export type Shade = typeof SHADES_FINE[number]
 
 /**
  * The shade sliders' full travel: the ramp plus literal white/black ends.
  * The ends matter because several stock defaults are literals the ramp
  * can't express (--ui-bg is `white`, the stock dark shadow is `black`) —
  * without them the sliders could only pin lookalike ramp overrides.
+ * `SHADE_LADDER_FINE` is the same with the midpoints, for fine-stops ramps.
  */
 export const SHADE_LADDER = ['white', ...SHADES, 'black'] as const
+export const SHADE_LADDER_FINE = ['white', ...SHADES_FINE, 'black'] as const
 
-export type ShadeStop = typeof SHADE_LADDER[number]
+export type ShadeStop = typeof SHADE_LADDER_FINE[number]
 
 export type ColorAlias = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
 
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index aa2542982d..3048f5ec10 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -12,6 +12,7 @@ import {
   contrastRatio,
   CURVE_DEFAULTS,
   SHADES,
+  SHADES_FINE,
   LIBRARY_TOKEN_DEFAULTS,
   parseUiColorRef,
   resolveAlias,
@@ -224,6 +225,26 @@ describe('theme-engine', () => {
       }
     })
 
+    it('fine stops add the midpoints without shifting the standard stops', () => {
+      const standard = generatePalette(CURVE_DEFAULTS)
+      const fine = generatePalette(CURVE_DEFAULTS, true)
+
+      // 19 stops incl. every 100-step midpoint, all canonical
+      expect(Object.keys(fine).map(Number).sort((a, b) => a - b)).toEqual(SHADES_FINE as unknown as number[])
+      for (const shade of SHADES_FINE) {
+        expect(fine[shade], `${shade}`).toMatch(CANONICAL_OKLCH)
+      }
+      // The standard stops are byte-identical — enabling fine stops must not
+      // change any existing colour (positions are keyed by value, not index).
+      for (const shade of SHADES) {
+        expect(fine[shade], `${shade}`).toBe(standard[shade])
+      }
+      // A midpoint sits between its neighbours in lightness (curve is monotonic).
+      const l = (s: number) => parseColor(fine[s as never])!.l
+      expect(l(150)).toBeLessThan(l(100))
+      expect(l(150)).toBeGreaterThan(l(200))
+    })
+
     it('fitPalette accepts hex and oklch inputs equivalently', () => {
       const cocoaHex = {
         50: '#FAF6F2', 100: '#F2E9E1', 200: '#E3D2C2', 300: '#CFB49D',

From 04342fbeef8a81b355531c8e39e01356f52e2e23 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 20 Jul 2026 21:46:42 +0200
Subject: [PATCH 157/185] refactor(theme-studio): update stop terminology and
 enhance layout

- Changed stop labels from 'shades' to 'stops' in the palette editor for clarity.
- Refactored the layout of the ThemeStudioCurveEditor and stop-count picker to improve usability and prevent overlap with other UI elements.
- Adjusted the stop-count picker to be more responsive and integrated into the design flow.

These changes aim to enhance the user experience in the Theme Studio by providing clearer terminology and a more intuitive interface.
---
 .../theme-studio/ThemeStudioPaletteEditor.vue | 53 +++++++++----------
 docs/app/utils/theme-engine/presets.ts        | 39 +++++++-------
 2 files changed, 45 insertions(+), 47 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index cd49a4c90e..0a0d5b42b0 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -41,8 +41,8 @@ const stopSet = computed(() => (fineStops.value ? SHADES_FINE : SHADES))
 
 /** The stop-count dropdown — numeric so USelect never has to bind a falsy value. */
 const stopItems = [
-  { label: '11 shades', value: SHADES.length },
-  { label: '19 shades', value: SHADES_FINE.length }
+  { label: '11 stops', value: SHADES.length },
+  { label: '19 stops', value: SHADES_FINE.length }
 ]
 const stopCount = computed({
   get: () => (fineStops.value ? SHADES_FINE.length : SHADES.length),
@@ -366,30 +366,16 @@ function resetEffects() {
         />
 
         <div>
-          <div class="relative">
-            <ThemeStudioCurveEditor
-              v-model="params[tab]"
-              :y-min="windows[tab].min"
-              :y-max="windows[tab].max"
-              :stop-colors="stopColors"
-              :stop-xs="stopXs"
-              :field="field"
-              @drag-start="onDragStart"
-              @drag-end="onDragEnd"
-            />
-
-            <!-- Stop-count picker, tucked into the gradient's bottom-left. -->
-            <UTooltip text="Shade stops">
-              <USelect
-                v-model="stopCount"
-                :items="stopItems"
-                size="xs"
-                variant="soft"
-                class="absolute bottom-1.5 left-1.5 z-10 w-24 bg-default/70 backdrop-blur-sm"
-                :ui="{ base: 'ring ring-default' }"
-              />
-            </UTooltip>
-          </div>
+          <ThemeStudioCurveEditor
+            v-model="params[tab]"
+            :y-min="windows[tab].min"
+            :y-max="windows[tab].max"
+            :stop-colors="stopColors"
+            :stop-xs="stopXs"
+            :field="field"
+            @drag-start="onDragStart"
+            @drag-end="onDragEnd"
+          />
 
           <div ref="stripRef" class="flex rounded-b-sm overflow-hidden ring ring-default">
             <UPopover
@@ -484,9 +470,22 @@ function resetEffects() {
               variant="ghost"
               size="sm"
               block
-              class="justify-start"
+              class="flex-1 justify-start"
             />
+            <!-- Stop-count picker rides the Modifiers row so it never
+                 overlaps the curve handles or swatches above. Its own click
+                 must not toggle the fold. -->
+            <UTooltip text="Shade stops">
+              <USelect
+                v-model="stopCount"
+                :items="stopItems"
+                size="sm"
+                variant="ghost"
+                class="shrink-0"
 
+                @click.stop
+              />
+            </UTooltip>
             <!-- Modifiers live outside the doc (presets land with them
                  zeroed), so resetting to defaults IS resetting to the
                  preset — only the dirty styling mirrors the section resets. -->
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 3c600f277c..a101366295 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -243,27 +243,28 @@ export const presets: ThemePreset[] = [{
     }
   }
 }, {
-  id: 'comicbook',
-  name: 'Comicbook',
-  description: 'Comic-book red and blue with inked panel outlines.',
-  icon: 'i-lucide-book-open',
+  id: '8bit',
+  name: '8-bit',
+  description: 'Arcade red with pixel type and hard inked edges.',
+  icon: 'i-mdi-space-invaders',
   doc: {
     version: 1,
-    // A cool-violet sculpted neutral for the panel grays.
+    // A teal-washed neutral: the light end never reaches white, so the whole
+    // page sits on a dim LCD panel instead of paper.
     palettes: {
       'custom-neutral': {
         shades: {
-          50: 'oklch(97.3% 0.013 286.067)',
-          100: 'oklch(91.3% 0.023 286.073)',
-          200: 'oklch(84% 0.028 286.076)',
-          300: 'oklch(72.5% 0.032 286.073)',
-          400: 'oklch(60.1% 0.034 286.058)',
-          500: 'oklch(50.6% 0.033 285.932)',
-          600: 'oklch(42.3% 0.028 285.808)',
-          700: 'oklch(34.8% 0.021 285.795)',
-          800: 'oklch(27.6% 0.015 285.794)',
-          900: 'oklch(20.8% 0.01 285.798)',
-          950: 'oklch(14.1% 0.005 285.805)'
+          50: 'oklch(89.7% 0.031 183.464)',
+          100: 'oklch(89.1% 0.038 184.16)',
+          200: 'oklch(87.1% 0.046 184.932)',
+          300: 'oklch(78.8% 0.056 185.807)',
+          400: 'oklch(64.9% 0.068 186.838)',
+          500: 'oklch(53.7% 0.066 188.136)',
+          600: 'oklch(44.3% 0.053 190.06)',
+          700: 'oklch(36.1% 0.04 193.492)',
+          800: 'oklch(28.5% 0.027 194.529)',
+          900: 'oklch(21.5% 0.015 194.814)',
+          950: 'oklch(14.8% 0.004 194.9)'
         }
       }
     },
@@ -271,10 +272,8 @@ export const presets: ThemePreset[] = [{
       primary: 'red',
       neutral: 'custom-neutral'
     },
-    radius: 0.125,
-    // One flat 600 across every weight step — comic lettering has a single
-    // stroke width, and Comic Neue's 400 reads too thin for the look.
-    font: { sans: 'Comic Neue', weights: { normal: 600, medium: 600, semibold: 600, bold: 600 } },
+    radius: 0,
+    font: { sans: 'Pixelify Sans', weights: { normal: 400, medium: 500, semibold: 600, bold: 700 } },
     icons: 'pixelarticons',
     // Inked page: near-black default AND accented borders over muted panel
     // edges, deep red at 600 in light, flat 50s inversions in dark.

From 0d2bce30f12603153d9d7a424f684b1e269fafa7 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Tue, 21 Jul 2026 02:30:30 +0200
Subject: [PATCH 158/185] refactor(theme-studio): optimize swatch handling and
 performance

- Replaced the swatchInfo computed property with a more efficient swatches property to reduce computational overhead during drag events.
- Introduced a single activeShade computed property to manage the active swatch state, improving performance by minimizing re-renders.
- Enhanced the activeSwatch computed property to handle detailed color parsing only when necessary, deferring costly operations.
- Updated the rendering logic to utilize a single popover for swatch details, significantly improving responsiveness and reducing the number of rendered components.

These changes aim to enhance the performance and user experience of the Theme Studio by streamlining swatch interactions and reducing unnecessary computations.
---
 .../theme-studio/ThemeStudioPaletteEditor.vue | 216 ++++++++++--------
 docs/app/composables/useThemeStudio.ts        |  12 +-
 2 files changed, 137 insertions(+), 91 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 0a0d5b42b0..a294851818 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -64,18 +64,12 @@ const shades = computed(() => generatePalette(params, fineStops.value))
 const stopColors = computed(() => stopSet.value.map(shade => shades.value[shade]))
 const stopXs = computed(() => stopSet.value.map(shadeX))
 
-/** Every swatch with its hex/rgb equivalents for the tooltip. */
-const swatchInfo = computed(() => stopSet.value.map((shade) => {
-  const oklch = shades.value[shade]!
-  const parsed = parseColor(oklch)
-  const rgb = parsed ? oklchToRgb(parsed) : undefined
-  return {
-    shade,
-    oklch,
-    hex: rgb ? rgbToHex(rgb) : '',
-    rgb: rgb ? `rgb(${rgb.map(channel => Math.round(channel * 255)).join(', ')})` : ''
-  }
-}))
+/**
+ * The strip tiles — just shade + live color. Kept deliberately light (no
+ * hex/rgb parse) because it recomputes on every drag frame across all 19
+ * stops; the costly parse is deferred to the single open swatch below.
+ */
+const swatches = computed(() => stopSet.value.map(shade => ({ shade, oklch: shades.value[shade]! })))
 
 const { copy: copyShade } = useClipboard()
 const copiedShade = ref<number>()
@@ -101,6 +95,36 @@ const pinnedShade = ref<number>()
 const hoveredShade = ref<number>()
 let hoverLeaveTimeout: ReturnType<typeof setTimeout> | undefined
 
+// One popover serves the whole strip (all tiles anchor to it anyway), driven
+// by whichever swatch is active — a pin wins over a hover. Rendering a single
+// Reka popover instead of one per stop is the bulk of the 19-stop speedup.
+const activeShade = computed(() => pinnedShade.value ?? hoveredShade.value)
+
+/**
+ * Full detail for the ONE open swatch — the oklch→rgb→hex parse runs here,
+ * not across all 19 tiles every frame. Undefined when nothing is open.
+ */
+const activeSwatch = computed(() => {
+  const shade = activeShade.value
+  if (shade === undefined) return undefined
+  const oklch = (shades.value as Record<number, string>)[shade]
+  if (!oklch) return undefined
+  const parsed = parseColor(oklch)
+  const rgb = parsed ? oklchToRgb(parsed) : undefined
+  return {
+    shade,
+    oklch,
+    hex: rgb ? rgbToHex(rgb) : '',
+    rgb: rgb ? `rgb(${rgb.map(channel => Math.round(channel * 255)).join(', ')})` : ''
+  }
+})
+
+// The single popover stays mounted and toggles via `:open` (cheap — one Reka
+// instance, not 19). This always-defined mirror lets the slot template read
+// details without tripping undefined-narrowing in Vue's slot scope; its
+// placeholder is never shown because the popover is closed when inactive.
+const swatchDetail = computed(() => activeSwatch.value ?? { shade: -1, oklch: '', hex: '', rgb: '' })
+
 function onSwatchEnter(shade: number) {
   // a pin means "I'm reading this one" — other swatches don't hover-open
   // until it's released (clicking another still migrates the pin)
@@ -184,9 +208,20 @@ const FIELD_COLUMNS = 24
 const FIELD_ROWS = 12
 const CHANNEL_KEYS = { lightness: 'l', chroma: 'c', hue: 'h' } as const
 
+// The field's 288 gamut-mapped cells are the editor's single biggest chunk of
+// per-frame work. It's a background aid, so feed it a throttled snapshot of
+// the curves: it repaints a few times a second while dragging and settles
+// exactly on release, while the curve line and stops track the pointer live.
+const fieldCurves = ref<PaletteCurveParams>(structuredClone(toRaw(params)))
+const syncFieldCurves = useThrottleFn(() => {
+  fieldCurves.value = structuredClone(toRaw(params))
+}, 110, true, true)
+watch(params, () => syncFieldCurves(), { deep: true })
+
 const field = computed(() => {
   const channel = tab.value
   const { min, max } = windows[channel]
+  const curves = fieldCurves.value
 
   // Fence-post: column i is sampled AT ramp position i/(n-1) — the editor
   // draws each column centered on that plot x, endpoints under the
@@ -194,9 +229,9 @@ const field = computed(() => {
   return Array.from({ length: FIELD_COLUMNS }, (_, columnIndex) => {
     const x = columnIndex / (FIELD_COLUMNS - 1)
     const base = {
-      l: sampleCurve(x, params.lightness),
-      c: Math.max(0, sampleCurve(x, params.chroma)),
-      h: sampleCurve(x, params.hue)
+      l: sampleCurve(x, curves.lightness),
+      c: Math.max(0, sampleCurve(x, curves.chroma)),
+      h: sampleCurve(x, curves.hue)
     }
 
     return Array.from({ length: FIELD_ROWS }, (_, rowIndex) => {
@@ -377,85 +412,88 @@ function resetEffects() {
             @drag-end="onDragEnd"
           />
 
+          <!-- Plain tiles recolor live every frame (cheap); a single popover,
+               anchored to the strip and driven by the active swatch, carries
+               the details — 1 Reka instance instead of 19. -->
           <div ref="stripRef" class="flex rounded-b-sm overflow-hidden ring ring-default">
-            <UPopover
-              v-for="info in swatchInfo"
+            <button
+              v-for="info in swatches"
               :key="info.shade"
-              arrow
-              :open="pinnedShade === info.shade || hoveredShade === info.shade"
-              :reference="stripEl"
-              :content="{
-                side: 'top',
-                onEscapeKeyDown: () => onSwatchEscape(info.shade),
-                onCloseAutoFocus: onSwatchCloseAutoFocus,
-                sideOffset: 0,
-                // hover-opened popovers must not steal focus; a pinned one
-                // takes it so Tab lands on the copy/pin buttons
-                onOpenAutoFocus: pinnedShade === info.shade ? undefined : (event: Event) => event.preventDefault(),
-                // pinning means pinned: clicks elsewhere (curve drags,
-                // sliders) must not dismiss — only Esc, unpin or another pin
-                onInteractOutside: pinnedShade === info.shade ? (event: Event) => event.preventDefault() : undefined,
-                onFocusOutside: pinnedShade === info.shade ? (event: Event) => event.preventDefault() : undefined
-              }"
-              @update:open="onSwatchOpenUpdate(info.shade, $event)"
-            >
-              <button
-                type="button"
-                class="aspect-square flex-1"
-                :style="{ backgroundColor: info.oklch }"
-                :aria-label="`Shade ${info.shade}: ${info.oklch}`"
-                :aria-pressed="pinnedShade === info.shade"
-                @click="togglePin(info.shade)"
-                @mouseenter="onSwatchEnter(info.shade)"
-                @mouseleave="onSwatchLeave"
-              />
+              type="button"
+              class="aspect-square flex-1"
+              :style="{ backgroundColor: info.oklch }"
+              :aria-label="`Shade ${info.shade}: ${info.oklch}`"
+              :aria-pressed="pinnedShade === info.shade"
+              @click="togglePin(info.shade)"
+              @mouseenter="onSwatchEnter(info.shade)"
+              @mouseleave="onSwatchLeave"
+            />
+          </div>
 
-              <template #content>
-                <div
-                  class="px-2 py-1.5 text-xs font-mono flex flex-col gap-0.5"
-                  @mouseenter="onSwatchEnter(info.shade)"
-                  @mouseleave="onSwatchLeave"
-                >
-                  <div class="flex items-center justify-between gap-3">
-                    <span class="font-semibold">{{ info.shade }}</span>
-
-                    <div class="flex items-center">
-                      <UTooltip text="Copy Oklch">
-                        <UButton
-                          size="xs"
-                          color="neutral"
-                          square
-                          variant="ghost"
-                          :ui="{ leadingIcon: 'size-3' }"
-                          :icon="copiedShade === info.shade ? 'i-lucide-copy-check' : 'i-lucide-copy'"
-                          :aria-label="`Copy ${info.oklch}`"
-                          @click="copySwatch(info)"
-                        />
-                      </UTooltip>
-
-                      <UTooltip :text="pinnedShade === info.shade ? 'Unpin' : 'Pin open'">
-                        <UButton
-                          size="xs"
-                          color="neutral"
-                          square
-                          variant="ghost"
-                          active-color="primary"
-                          active-variant="ghost"
-                          :active="pinnedShade === info.shade"
-                          :ui="{ leadingIcon: 'size-3' }"
-                          :icon="pinnedShade === info.shade ? 'i-lucide-pin-off' : 'i-lucide-pin'"
-                          :aria-label="pinnedShade === info.shade ? 'Unpin details' : 'Pin details open'"
-                          @click="togglePin(info.shade)"
-                        />
-                      </UTooltip>
-                    </div>
+          <UPopover
+            arrow
+            :open="!!activeSwatch"
+            :reference="stripEl"
+            :content="{
+              side: 'top',
+              onEscapeKeyDown: () => onSwatchEscape(swatchDetail.shade),
+              onCloseAutoFocus: onSwatchCloseAutoFocus,
+              sideOffset: 0,
+              // hover-opened popovers must not steal focus; a pinned one
+              // takes it so Tab lands on the copy/pin buttons
+              onOpenAutoFocus: pinnedShade === swatchDetail.shade ? undefined : (event: Event) => event.preventDefault(),
+              // pinning means pinned: clicks elsewhere (curve drags,
+              // sliders) must not dismiss — only Esc, unpin or another pin
+              onInteractOutside: pinnedShade === swatchDetail.shade ? (event: Event) => event.preventDefault() : undefined,
+              onFocusOutside: pinnedShade === swatchDetail.shade ? (event: Event) => event.preventDefault() : undefined
+            }"
+            @update:open="onSwatchOpenUpdate(swatchDetail.shade, $event)"
+          >
+            <template #content>
+              <div
+                class="px-2 py-1.5 text-xs font-mono flex flex-col gap-0.5"
+                @mouseenter="onSwatchEnter(swatchDetail.shade)"
+                @mouseleave="onSwatchLeave"
+              >
+                <div class="flex items-center justify-between gap-3">
+                  <span class="font-semibold">{{ swatchDetail.shade }}</span>
+
+                  <div class="flex items-center">
+                    <UTooltip text="Copy Oklch">
+                      <UButton
+                        size="xs"
+                        color="neutral"
+                        square
+                        variant="ghost"
+                        :ui="{ leadingIcon: 'size-3' }"
+                        :icon="copiedShade === swatchDetail.shade ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+                        :aria-label="`Copy ${swatchDetail.oklch}`"
+                        @click="copySwatch(swatchDetail)"
+                      />
+                    </UTooltip>
+
+                    <UTooltip :text="pinnedShade === swatchDetail.shade ? 'Unpin' : 'Pin open'">
+                      <UButton
+                        size="xs"
+                        color="neutral"
+                        square
+                        variant="ghost"
+                        active-color="primary"
+                        active-variant="ghost"
+                        :active="pinnedShade === swatchDetail.shade"
+                        :ui="{ leadingIcon: 'size-3' }"
+                        :icon="pinnedShade === swatchDetail.shade ? 'i-lucide-pin-off' : 'i-lucide-pin'"
+                        :aria-label="pinnedShade === swatchDetail.shade ? 'Unpin details' : 'Pin details open'"
+                        @click="togglePin(swatchDetail.shade)"
+                      />
+                    </UTooltip>
                   </div>
-                  <span>{{ info.oklch }}</span>
-                  <span class="text-muted">{{ info.hex }} · {{ info.rgb }}</span>
                 </div>
-              </template>
-            </UPopover>
-          </div>
+                <span>{{ swatchDetail.oklch }}</span>
+                <span class="text-muted">{{ swatchDetail.hex }} · {{ swatchDetail.rgb }}</span>
+              </div>
+            </template>
+          </UPopover>
         </div>
 
         <!-- Layered modifiers, each recomputed from the fitted base. The
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index ac0d2b13f0..fa2cfc4d36 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -274,11 +274,19 @@ export function useThemeStudio() {
    */
   function setPaletteFromCurve(alias: ColorAlias, base: PaletteCurveParams, effects?: PaletteEffects, amount = 100, fine = false) {
     const name = customPaletteName(alias)
+    // The alias only needs pointing once. Live drags call this at ~16Hz; re-
+    // sending it every tick makes applyThemeSettings re-persist the AI-extras
+    // channel (a JSON.stringify + localStorage write) on every frame. Send it
+    // only when it actually changes.
+    const aliasAlreadySet = (appConfig.ui.colors as Record<string, string>)[alias] === name
 
     theme.applyThemeSettings({
       customColors: { [name]: generatePalette(applyPaletteEffects(base, effects, amount), fine) },
-      [alias]: name,
-      ...(alias === 'neutral' ? { cssVariables: unownedNeutralRemaps() } : {})
+      ...(aliasAlreadySet ? {} : { [alias]: name }),
+      // The remaps are var() references, not ramp colours, and are kept in
+      // sync with the shade sliders elsewhere — so they only need (re)sending
+      // when this call first points the alias at the ramp, not every tick.
+      ...(alias === 'neutral' && !aliasAlreadySet ? { cssVariables: unownedNeutralRemaps() } : {})
     }, { track: false })
     const entry: StoredPaletteParams = {
       ...base,

From d7c359e79e717daeb88414f15936b33ada154ecc Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 25 Jul 2026 02:15:33 +0200
Subject: [PATCH 159/185] feat(theme-studio): pinned brand colours, curve
 accuracy, drag performance
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pins:
- Lock stops to an exact OKLCH; the ramp bends through them via a localized
  RBF correction, so you can pin a brand colour and edit around it. Editable
  hex/rgb/oklch readouts, multi-pin, markers on the strip and curve.
- The curve editor draws the pin-corrected curve so the line rides through
  pinned stops and shows their pull on neighbours; every dot sits on the value
  its colour actually resolves to.

Performance (live curve drags):
- CSSOM fast path during a drag — write ramp vars straight to :root, skipping
  the stylesheet reparse, reactive re-inject and per-frame localStorage write;
  the reactive path reconciles once on release.
- content-visibility on off-screen grid tiles so a theme change only restyles
  what's visible (~60% fewer elements on the component wall).
- Colour field rendered on a canvas (small bitmap scaled with bilinear
  smoothing) instead of 24 SVG gradients behind a Gaussian blur — that filter
  was re-rasterised on every restyle (~7ms per apply).

Fixes:
- Undo/redo restores the palette editor's curves/pins (composite snapshot;
  proxy-safe clone) instead of leaving stale curves that clobber on the next edit.
- The editor now follows a preset's custom palette (e.g. 8-bit, Marshmallow
  neutrals) rather than resetting to blank grey defaults.
- No white flash between presets (reset skips the imperative <style> clear when
  a re-apply follows in the same tick).
- Dragging a curve endpoint carries its handle; stop picker moved to the
  Modifiers row.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/app/assets/css/main.css                  |   8 +-
 docs/app/components/playground/Playground.vue |   3 +-
 .../theme-studio/ThemeStudioColorSection.vue  |   4 +-
 .../theme-studio/ThemeStudioCurveEditor.vue   | 314 +++++++++-------
 .../theme-studio/ThemeStudioPaletteEditor.vue | 340 ++++++++++++++----
 docs/app/composables/useTheme.ts              |  10 +-
 docs/app/composables/useThemeStudio.ts        |  17 +-
 docs/app/composables/useThemeStudioHistory.ts |  79 ++--
 docs/app/pages/theme.vue                      |  17 +-
 docs/app/utils/theme-engine/palette.ts        | 126 ++++++-
 test/utils/theme-palette.spec.ts              |  32 ++
 11 files changed, 690 insertions(+), 260 deletions(-)

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index e92b1b732f..fe45b5989b 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -62,11 +62,6 @@ html.dark .shiki span {
   mask-image: var(--shiki-icon-url);
 }
 
-/* Smooth color changes while dragging theme studio curves — matched to the 60ms apply throttle */
-html.theme-studio-dragging body *:not([data-curve-editor] *) {
-  transition: background-color 60ms linear, color 60ms linear, border-color 60ms linear;
-}
-
 /* Studio baselines. :where() keeps them at zero specificity: being
    unlayered they still beat the library's @layer theme defaults, but any
    user override from the theme studio (plain .light/.dark rules injected
@@ -102,6 +97,7 @@ html.theme-studio-dragging body *:not([data-curve-editor] *) {
   --ui-shadow-final-inner: color-mix(in oklab, var(--ui-inner-shadow-color, var(--ui-shadow-color)) var(--ui-inner-shadow-opacity, 15%), transparent);
   --ui-inner-shadow: var(--ui-inner-shadow-offset-x) var(--ui-inner-shadow-offset-y) var(--ui-inner-shadow-blur) var(--ui-inner-shadow-spread) var(--ui-shadow-final-inner);
 }
+
 :where(.dark) {
   --ui-shadow-color: black;
-}
+}
\ No newline at end of file
diff --git a/docs/app/components/playground/Playground.vue b/docs/app/components/playground/Playground.vue
index 0b4ad86d7f..c0dc0e86d8 100644
--- a/docs/app/components/playground/Playground.vue
+++ b/docs/app/components/playground/Playground.vue
@@ -82,9 +82,10 @@ const visibleTiles = computed(() => tiles.slice(0, REVEAL_COUNTS[lanes.value - 1
       estimateSize: 360,
       paddingStart: 24,
       paddingEnd: 24,
+      overscan: 0,
       getItemKey: (index: number) => visibleTiles[index]!.name
     }"
-    class="h-full px-4 sm:px-6"
+    class="playground-grid h-full px-4 sm:px-6"
   >
     <template #default="{ item }">
       <PlaygroundCard>
diff --git a/docs/app/components/theme-studio/ThemeStudioColorSection.vue b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
index 97ebb6c2e5..152a5a995e 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
@@ -95,7 +95,7 @@ const openGroups = reactive<Record<string, boolean>>({})
     <template #actions>
       <UTooltip text="Adjust shades">
         <UButton
-          icon="i-lucide-sliders-horizontal"
+          icon="i-lucide-settings-2"
           color="neutral"
           variant="ghost"
           size="xs"
@@ -108,7 +108,7 @@ const openGroups = reactive<Record<string, boolean>>({})
       </UTooltip>
       <UTooltip text="Edit palette">
         <UButton
-          icon="i-lucide-pencil"
+          icon="i-lucide-tangent"
           color="neutral"
           variant="ghost"
           size="xs"
diff --git a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
index 3ee7b801f1..6e98b5c90f 100644
--- a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { sampleCurve, SHADES, shadeX } from '../../utils/theme-engine'
+import { sampleCurve, SHADES, shadeX, parseColor, oklchToRgb } from '../../utils/theme-engine'
 import type { ChannelCurve } from '../../utils/theme-engine'
 
 const props = defineProps<{
@@ -14,11 +14,24 @@ const props = defineProps<{
    * midpoints at their true positions (150 → 0.15, not an even 19th).
    */
   stopXs?: number[]
+  /** Which stops are pinned to an exact colour, aligned with `stopXs`. */
+  stopPinned?: boolean[]
   /**
-   * 2D color field behind the plot: one entry per column (ramp position),
-   * each an array of colors sampled top (yMax) to bottom (yMin). SVG can't
-   * do two-axis gradients, but a vertical gradient per column tiles into
-   * one — showing exactly what dragging the curve at that x would produce.
+   * The actual channel value each stop resolves to (pin-corrected), aligned
+   * with `stopXs`, so every dot sits on the colour it really produces.
+   */
+  stopValues?: number[]
+  /**
+   * The pin-corrected curve as a dense `{ x, v }` polyline. When present it's
+   * the line the editor draws — bending through pinned stops and showing the
+   * pull on their neighbours — in place of the raw bézier.
+   */
+  actualCurve?: { x: number, v: number }[]
+  /**
+   * 2D colour field behind the plot: one entry per column (ramp position),
+   * each an array of oklch colours sampled top (yMax) to bottom (yMin). Drawn
+   * as a small bitmap scaled up on the canvas, so it shows exactly what
+   * dragging the curve at each (x, value) point would produce.
    */
   field?: string[][]
 }>()
@@ -34,9 +47,6 @@ const W = 200
 const H = 180
 const PAD = 10
 
-/** Unique per instance — primary and neutral editors can be open at once. */
-const gradientId = useId()
-
 function toX(x: number) {
   return PAD + x * (W - 2 * PAD)
 }
@@ -59,34 +69,85 @@ function fromY(py: number) {
 }
 
 const path = computed(() => {
+  // With pins active the parent passes the corrected curve; draw that so the
+  // line rides through the pinned stops. Otherwise it's exactly the bézier.
+  if (props.actualCurve?.length) {
+    return props.actualCurve.map((p, i) => `${i ? 'L' : 'M'} ${toX(p.x).toFixed(2)} ${toY(p.v).toFixed(2)}`).join(' ')
+  }
   const c = curve.value
   return `M ${toX(0)} ${toY(c.y0)} C ${toX(c.p1x)} ${toY(c.p1y)}, ${toX(c.p2x)} ${toY(c.p2y)}, ${toX(1)} ${toY(c.y1)}`
 })
 
 /**
- * Fence-post layout: column i is sampled at ramp x = i/(n-1) and drawn
- * centered on that plot position, so the endpoint colors sit directly
- * under the endpoint controls. The outer columns extend to the canvas
- * edges (overhanging off-canvas so the blur has solid color to sample).
+ * Paint the colour field: parse the oklch grid into a `columns × rows` bitmap
+ * once, then let the canvas scale it up with bilinear smoothing — which does
+ * the vertical gradient AND the horizontal smoothing the SVG needed a blur
+ * filter for. The backing store is small and fixed (the field is soft anyway);
+ * the element stretches to fill via CSS. Drawing is ~0.1ms and, unlike the old
+ * SVG filter, never re-rasterises during unrelated page restyles.
  */
-const fieldRects = computed(() => {
-  if (!props.field?.length) return []
-  const n = props.field.length
-  const base = (W - 2 * PAD) / (n - 1)
-  return props.field.map((_, index) => {
-    const start = index === 0 ? -8 : PAD + (index - 0.5) * base
-    const end = index === n - 1 ? W + 8 : PAD + (index + 0.5) * base
-    return { x: start, width: end - start + 0.5 }
-  })
-})
+const fieldCanvas = useTemplateRef<HTMLCanvasElement>('fieldCanvas')
+// The small source bitmap, reused across redraws (the grid size is fixed).
+let sourceCanvas: HTMLCanvasElement | undefined
+
+function drawField() {
+  const canvas = fieldCanvas.value
+  const columns = props.field
+  if (!canvas || !columns?.length) return
+  const nCol = columns.length
+  const nRow = columns[0]!.length
+  if (!nRow) return
+
+  // Fixed, modest backing store — the field is a soft gradient, so a low-res
+  // bitmap stretched by CSS is indistinguishable and keeps redraws cheap.
+  if (canvas.width !== W * 3) {
+    canvas.width = W * 3
+    canvas.height = H * 3
+  }
+
+  const grid = new ImageData(nCol, nRow)
+  for (let col = 0; col < nCol; col++) {
+    const column = columns[col]!
+    for (let row = 0; row < nRow; row++) {
+      const parsed = parseColor(column[row]!)
+      const [r, g, b] = parsed ? oklchToRgb(parsed) : [0, 0, 0]
+      const i = (row * nCol + col) * 4
+      grid.data[i] = Math.round(r * 255)
+      grid.data[i + 1] = Math.round(g * 255)
+      grid.data[i + 2] = Math.round(b * 255)
+      grid.data[i + 3] = 255
+    }
+  }
+
+  if (!sourceCanvas) sourceCanvas = document.createElement('canvas')
+  sourceCanvas.width = nCol
+  sourceCanvas.height = nRow
+  sourceCanvas.getContext('2d')!.putImageData(grid, 0, 0)
+
+  const ctx = canvas.getContext('2d')!
+  ctx.imageSmoothingEnabled = true
+  ctx.imageSmoothingQuality = 'high'
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+  ctx.drawImage(sourceCanvas, 0, 0, nCol, nRow, 0, 0, canvas.width, canvas.height)
+}
+
+// Watch both sources explicitly (not via read-tracking, which the early return
+// on a not-yet-mounted canvas would miss): draw once the canvas exists and
+// redraw on every field change — a drag, a tab switch, or a preset reseed.
+watch([() => props.field, fieldCanvas], drawField, { immediate: true, flush: 'post' })
 
 const stopXs = computed(() => props.stopXs ?? SHADES.map(shadeX))
 const stops = computed(() => stopXs.value.map((x, index) => {
+  // Sit each dot on the value its colour actually resolves to (pin-corrected),
+  // so they ride the drawn line; fall back to the bézier sample when the parent
+  // sends no corrected values (no pins).
+  const value = props.stopValues?.[index] ?? sampleCurve(x, curve.value)
   return {
     key: index,
     cx: toX(x),
-    cy: toY(sampleCurve(x, curve.value)),
-    fill: props.stopColors?.[index] || 'currentColor'
+    cy: toY(value),
+    fill: props.stopColors?.[index] || 'currentColor',
+    pinned: props.stopPinned?.[index] ?? false
   }
 }))
 
@@ -141,10 +202,18 @@ function onPointerMove(event: PointerEvent) {
   // Reaching further is the window's job — hue auto-pans at the edges.
   const clamped = Math.min(props.yMax, Math.max(props.yMin, value))
 
+  // Dragging an endpoint carries its own control handle by the same vertical
+  // delta, so the tangent that leaves the endpoint is preserved instead of the
+  // handle staying put and kinking the curve. The handle stays window-clamped
+  // (as a direct handle drag would), so near an edge the offset compresses.
   if (dragging.value === 'y0') {
-    curve.value = { ...curve.value, y0: clamped }
+    const delta = clamped - curve.value.y0
+    const p1y = Math.min(props.yMax, Math.max(props.yMin, curve.value.p1y + delta))
+    curve.value = { ...curve.value, y0: clamped, p1y }
   } else if (dragging.value === 'y1') {
-    curve.value = { ...curve.value, y1: clamped }
+    const delta = clamped - curve.value.y1
+    const p2y = Math.min(props.yMax, Math.max(props.yMin, curve.value.p2y + delta))
+    curve.value = { ...curve.value, y1: clamped, p2y }
   } else if (dragging.value === 'p1') {
     curve.value = { ...curve.value, p1x: fromX(point.x), p1y: clamped }
   } else {
@@ -167,119 +236,92 @@ function onPointerUp(event: PointerEvent) {
 </script>
 
 <template>
-  <svg
-    ref="svgRef"
-    data-curve-editor
-    :viewBox="`0 0 ${W} ${H}`"
-    class="w-full rounded-t-sm ring ring-default bg-elevated/30 touch-none select-none cursor-crosshair"
-    @pointerdown="onPointerDown"
-    @pointermove="onPointerMove"
-    @pointerup="onPointerUp"
-    @pointercancel="onPointerUp"
-  >
-    <!-- the channel's reachable colors behind the plot: the curve sits on
-         the exact color each (position, value) point would produce. The
-         field bleeds to the canvas edges, but its value mapping stays
-         pinned to the padded plot (userSpaceOnUse + pad spread), so the
-         curve/color correspondence is exact. -->
-    <template v-if="field?.length">
-      <defs>
-        <linearGradient
-          v-for="(column, columnIndex) in field"
-          :id="`${gradientId}-${columnIndex}`"
-          :key="columnIndex"
-          gradientUnits="userSpaceOnUse"
-          :x1="0"
-          :y1="PAD"
-          :x2="0"
-          :y2="H - PAD"
-          spreadMethod="pad"
-        >
-          <stop
-            v-for="(color, rowIndex) in column"
-            :key="rowIndex"
-            :offset="`${(rowIndex / (column.length - 1)) * 100}%`"
-            :stop-color="color"
-          />
-        </linearGradient>
-
-        <!-- horizontal-only blur smooths the column steps (the vertical
-             axis is already a true gradient); the edge columns overhang
-             the canvas so the blur has solid color to sample there -->
-        <filter :id="`${gradientId}-smooth`" x="-5%" y="-5%" width="110%" height="110%">
-          <feGaussianBlur stdDeviation="3 0" />
-        </filter>
-      </defs>
-
-      <g opacity="0.75" :filter="`url(#${gradientId}-smooth)`">
-        <rect
-          v-for="(rect, columnIndex) in fieldRects"
-          :key="`column-${columnIndex}`"
-          :x="rect.x"
-          :y="0"
-          :width="rect.width"
-          :height="H"
-          :fill="`url(#${gradientId}-${columnIndex})`"
-        />
-      </g>
-    </template>
-
-    <!-- handle connectors -->
-    <line
-      :x1="toX(0)"
-      :y1="toHandleY(curve.y0)"
-      :x2="toX(curve.p1x)"
-      :y2="toHandleY(curve.p1y)"
-      class="stroke-(--ui-text-dimmed)"
-      stroke-width="0.75"
-      stroke-dasharray="2 2"
-    />
-    <line
-      :x1="toX(1)"
-      :y1="toHandleY(curve.y1)"
-      :x2="toX(curve.p2x)"
-      :y2="toHandleY(curve.p2y)"
-      class="stroke-(--ui-text-dimmed)"
-      stroke-width="0.75"
-      stroke-dasharray="2 2"
+  <div class="relative w-full rounded-t-sm ring ring-default bg-elevated/30 overflow-hidden">
+    <!-- The reachable-colours field behind the plot: a small colour grid drawn
+         on a canvas and scaled up with bilinear smoothing. It replaces 24 SVG
+         gradients behind a Gaussian blur — that filter was re-rasterised on
+         every page restyle (~7ms per apply during a drag); a canvas is a bitmap
+         leaf that stays out of style recalc entirely. -->
+    <canvas
+      ref="fieldCanvas"
+      class="absolute inset-0 size-full opacity-75 pointer-events-none"
     />
+    <svg
+      ref="svgRef"
+      data-curve-editor
+      :viewBox="`0 0 ${W} ${H}`"
+      class="relative block w-full touch-none select-none cursor-crosshair"
+      @pointerdown="onPointerDown"
+      @pointermove="onPointerMove"
+      @pointerup="onPointerUp"
+      @pointercancel="onPointerUp"
+    >
+      <!-- handle connectors -->
+      <line
+        :x1="toX(0)"
+        :y1="toHandleY(curve.y0)"
+        :x2="toX(curve.p1x)"
+        :y2="toHandleY(curve.p1y)"
+        class="stroke-(--ui-text-dimmed)"
+        stroke-width="0.75"
+        stroke-dasharray="2 2"
+      />
+      <line
+        :x1="toX(1)"
+        :y1="toHandleY(curve.y1)"
+        :x2="toX(curve.p2x)"
+        :y2="toHandleY(curve.p2y)"
+        class="stroke-(--ui-text-dimmed)"
+        stroke-width="0.75"
+        stroke-dasharray="2 2"
+      />
 
-    <!-- curve -->
-    <path :d="path" fill="none" class="stroke-(--ui-primary)" stroke-width="1.5" />
-
-    <!-- shade stops on the curve -->
-    <circle
-      v-for="stop in stops"
-      :key="stop.key"
-      :cx="stop.cx"
-      :cy="stop.cy"
-      r="2.25"
-      :fill="stop.fill"
-      class="stroke-(--ui-bg)"
-      stroke-width="0.5"
-    />
+      <!-- curve -->
+      <path :d="path" fill="none" class="stroke-(--ui-primary)" stroke-width="1.5" />
+
+      <!-- shade stops on the curve; a pinned stop wears a larger primary ring -->
+      <template v-for="stop in stops" :key="stop.key">
+        <circle
+          v-if="stop.pinned"
+          :cx="stop.cx"
+          :cy="stop.cy"
+          r="4"
+          fill="none"
+          class="stroke-(--ui-primary)"
+          stroke-width="1.25"
+        />
+        <circle
+          :cx="stop.cx"
+          :cy="stop.cy"
+          :r="stop.pinned ? 2.5 : 2.25"
+          :fill="stop.fill"
+          class="stroke-(--ui-bg)"
+          stroke-width="0.5"
+        />
+      </template>
 
-    <!-- handles -->
-    <circle :cx="toX(curve.p1x)" :cy="toHandleY(curve.p1y)" r="4" class="fill-(--ui-bg) stroke-(--ui-text-muted)" stroke-width="1.25" />
-    <circle :cx="toX(curve.p2x)" :cy="toHandleY(curve.p2y)" r="4" class="fill-(--ui-bg) stroke-(--ui-text-muted)" stroke-width="1.25" />
+      <!-- handles -->
+      <circle :cx="toX(curve.p1x)" :cy="toHandleY(curve.p1y)" r="4" class="fill-(--ui-bg) stroke-(--ui-text-muted)" stroke-width="1.25" />
+      <circle :cx="toX(curve.p2x)" :cy="toHandleY(curve.p2y)" r="4" class="fill-(--ui-bg) stroke-(--ui-text-muted)" stroke-width="1.25" />
 
-    <!-- endpoints, filled with the ramp's 50 and 950 so the drag targets show
+      <!-- endpoints, filled with the ramp's 50 and 950 so the drag targets show
          what they steer -->
-    <circle
-      :cx="toX(0)"
-      :cy="toHandleY(curve.y0)"
-      r="4.5"
-      :fill="stopColors?.[0] || 'currentColor'"
-      class="stroke-(--ui-text-highlighted)"
-      stroke-width="1.5"
-    />
-    <circle
-      :cx="toX(1)"
-      :cy="toHandleY(curve.y1)"
-      r="4.5"
-      :fill="stopColors?.[stopColors.length - 1] || 'currentColor'"
-      class="stroke-(--ui-text-highlighted)"
-      stroke-width="1.5"
-    />
-  </svg>
+      <circle
+        :cx="toX(0)"
+        :cy="toHandleY(curve.y0)"
+        r="4.5"
+        :fill="stopColors?.[0] || 'currentColor'"
+        class="stroke-(--ui-text-highlighted)"
+        stroke-width="1.5"
+      />
+      <circle
+        :cx="toX(1)"
+        :cy="toHandleY(curve.y1)"
+        r="4.5"
+        :fill="stopColors?.[stopColors.length - 1] || 'currentColor'"
+        class="stroke-(--ui-text-highlighted)"
+        stroke-width="1.5"
+      />
+    </svg>
+  </div>
 </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index a294851818..55fd0774eb 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useThrottleFn, watchIgnorable } from '@vueuse/core'
-import { SHADES, SHADES_FINE, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, PALETTE_EFFECT_DEFAULTS, generatePalette, fitPalette, applyPaletteEffects, isDefaultEffects, sampleCurve, shadeX, clampToGamut, formatOklch, parseColor, oklchToRgb, rgbToHex } from '../../utils/theme-engine'
-import type { PaletteCurveParams, PaletteEffects, StoredPaletteParams, ColorAlias } from '../../utils/theme-engine'
+import { SHADES, SHADES_FINE, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, PALETTE_EFFECT_DEFAULTS, generatePalette, buildRampSampler, fitPalette, applyPaletteEffects, isDefaultEffects, sampleCurve, shadeX, clampToGamut, formatOklch, parseColor, oklchToRgb, rgbToHex } from '../../utils/theme-engine'
+import type { PaletteCurveParams, PaletteEffects, StoredPaletteParams, PalettePin, Shade, ColorAlias } from '../../utils/theme-engine'
 
 const props = defineProps<{
   alias: ColorAlias
@@ -49,6 +49,31 @@ const stopCount = computed({
   set: value => (fineStops.value = value === SHADES_FINE.length)
 })
 
+// Stops locked to an exact colour — the curves bend to pass through them.
+// Keyed edits go through setPin/removePin so the array stays a plain, cloneable
+// value (it's persisted and fed to generatePalette on every apply).
+const pins = ref<PalettePin[]>(stored?.pins ? structuredClone(toRaw(stored.pins)) : [])
+const pinnedShades = computed(() => new Set(pins.value.map(pin => pin.shade)))
+
+function setPin(shade: number, oklch: string) {
+  const parsed = parseColor(oklch)
+  if (!parsed) return false
+  const next = pins.value.filter(pin => pin.shade !== shade)
+  next.push({ shade: shade as Shade, l: parsed.l, c: parsed.c, h: parsed.h })
+  pins.value = next
+  return true
+}
+
+function removePin(shade: number) {
+  pins.value = pins.value.filter(pin => pin.shade !== shade)
+}
+
+/** Toggle a lock; pinning grabs whatever colour the stop currently shows. */
+function togglePinExact(shade: number) {
+  if (pinnedShades.value.has(shade as Shade)) removePin(shade)
+  else setPin(shade, shades.value[shade as Shade] ?? '')
+}
+
 /** Base curves the modifiers transform from, so they never compound. */
 let seedBase: PaletteCurveParams
   = stored && 'lightness' in stored ? pickCurves(stored) : defaults()
@@ -60,9 +85,31 @@ const params = reactive<PaletteCurveParams>(applyPaletteEffects(seedBase, effect
 
 const active = computed(() => isCustomPalette(props.alias))
 
-const shades = computed(() => generatePalette(params, fineStops.value))
+const shades = computed(() => generatePalette(params, fineStops.value, pins.value))
 const stopColors = computed(() => stopSet.value.map(shade => shades.value[shade]))
 const stopXs = computed(() => stopSet.value.map(shadeX))
+const stopPinned = computed(() => stopSet.value.map(shade => pinnedShades.value.has(shade)))
+// The active channel's pin-corrected value at each stop and as a dense
+// polyline: the curve editor draws the polyline (so the line bends THROUGH
+// pinned stops and shows their pull on neighbours) and sits every dot on it.
+// The sampler is built with the REACTIVE params (not a toRaw snapshot) so
+// sampling inside these computeds tracks curve edits — a handle drag redraws.
+const CHANNEL_KEY = { lightness: 'l', chroma: 'c', hue: 'h' } as const
+const stopValues = computed(() => {
+  const key = CHANNEL_KEY[tab.value]
+  const sample = buildRampSampler(params, pins.value)
+  return stopSet.value.map(shade => sample(shadeX(shade))[key])
+})
+const actualCurve = computed(() => {
+  // No pins → no correction, so let the editor draw the exact bézier.
+  if (!pins.value.length) return undefined
+  const key = CHANNEL_KEY[tab.value]
+  const sample = buildRampSampler(params, pins.value)
+  return Array.from({ length: 48 }, (_, i) => {
+    const x = i / 47
+    return { x, v: sample(x)[key] }
+  })
+})
 
 /**
  * The strip tiles — just shade + live color. Kept deliberately light (no
@@ -86,19 +133,21 @@ function copySwatch(info: { shade: number, oklch: string }) {
 onUnmounted(() => clearTimeout(copiedTimeout))
 
 /**
- * Swatch details live in a popover, not a tooltip: the copy/pin buttons
- * inside must be keyboard-reachable, and popover content can take focus.
- * Hover previews it (hand-rolled, with a grace gap so the pointer can cross
- * onto the content); click or Enter pins it open — one pin at a time.
+ * Swatch details live in a popover, not a tooltip: the copy button and the
+ * editable colour inputs inside must be keyboard-reachable, and popover
+ * content can take focus. Hover previews it (hand-rolled, with a grace gap so
+ * the pointer can cross onto the content); clicking a swatch STICKS it open so
+ * you can type into the inputs. Sticking-open is separate from pinning: a stuck
+ * popover is just "kept visible", while a pin locks the stop's exact colour.
  */
-const pinnedShade = ref<number>()
+const stuckShade = ref<number>()
 const hoveredShade = ref<number>()
 let hoverLeaveTimeout: ReturnType<typeof setTimeout> | undefined
 
 // One popover serves the whole strip (all tiles anchor to it anyway), driven
-// by whichever swatch is active — a pin wins over a hover. Rendering a single
-// Reka popover instead of one per stop is the bulk of the 19-stop speedup.
-const activeShade = computed(() => pinnedShade.value ?? hoveredShade.value)
+// by whichever swatch is active — a stuck one wins over a hover. Rendering a
+// single Reka popover instead of one per stop is the bulk of the 19-stop speedup.
+const activeShade = computed(() => stuckShade.value ?? hoveredShade.value)
 
 /**
  * Full detail for the ONE open swatch — the oklch→rgb→hex parse runs here,
@@ -115,7 +164,8 @@ const activeSwatch = computed(() => {
     shade,
     oklch,
     hex: rgb ? rgbToHex(rgb) : '',
-    rgb: rgb ? `rgb(${rgb.map(channel => Math.round(channel * 255)).join(', ')})` : ''
+    rgb: rgb ? `rgb(${rgb.map(channel => Math.round(channel * 255)).join(', ')})` : '',
+    pinned: pinnedShades.value.has(shade as Shade)
   }
 })
 
@@ -123,12 +173,12 @@ const activeSwatch = computed(() => {
 // instance, not 19). This always-defined mirror lets the slot template read
 // details without tripping undefined-narrowing in Vue's slot scope; its
 // placeholder is never shown because the popover is closed when inactive.
-const swatchDetail = computed(() => activeSwatch.value ?? { shade: -1, oklch: '', hex: '', rgb: '' })
+const swatchDetail = computed(() => activeSwatch.value ?? { shade: -1, oklch: '', hex: '', rgb: '', pinned: false })
 
 function onSwatchEnter(shade: number) {
-  // a pin means "I'm reading this one" — other swatches don't hover-open
-  // until it's released (clicking another still migrates the pin)
-  if (pinnedShade.value !== undefined && pinnedShade.value !== shade) return
+  // a stuck swatch means "I'm reading/editing this one" — other swatches don't
+  // hover-open until it's released (clicking another still migrates the stick)
+  if (stuckShade.value !== undefined && stuckShade.value !== shade) return
   clearTimeout(hoverLeaveTimeout)
   hoveredShade.value = shade
 }
@@ -140,15 +190,38 @@ function onSwatchLeave() {
 
 onUnmounted(() => clearTimeout(hoverLeaveTimeout))
 
-/** One pin at a time — pinning a swatch unpins any other. */
-function togglePin(shade: number) {
-  pinnedShade.value = pinnedShade.value === shade ? undefined : shade
+/** Click a swatch to keep its popover open (for editing); click again to release. */
+function toggleStuck(shade: number) {
+  stuckShade.value = stuckShade.value === shade ? undefined : shade
+}
+
+/**
+ * Commit an edited readout: parse whatever format was typed (hex/rgb/oklch),
+ * pin the stop to it, and keep the popover stuck open so further edits land.
+ * A rejected value leaves the pin untouched — the input restates the old text.
+ */
+function commitSwatchColor(shade: number, value: string): boolean {
+  const ok = setPin(shade as Shade, value)
+  if (ok) stuckShade.value = shade
+  return ok
+}
+
+/**
+ * Commit an edited colour input. A parseable value (any format) pins the stop;
+ * a rejected one leaves the pin untouched and the field restates its own
+ * canonical text so the box never shows an unparseable string.
+ */
+function onColorCommit(shade: number, field: 'oklch' | 'hex' | 'rgb', event: Event) {
+  const input = event.target as HTMLInputElement
+  if (!commitSwatchColor(shade, input.value)) {
+    input.value = swatchDetail.value[field]
+  }
 }
 
 /**
  * Reka emits update:open(false) for trigger clicks as well as dismissals —
- * clearing the pin here would race togglePin into re-pinning. Only hover
- * intent clears; the pin is released by togglePin or Esc alone.
+ * clearing the stick here would race toggleStuck into re-sticking. Only hover
+ * intent clears; the stick is released by toggleStuck or Esc alone.
  */
 function onSwatchOpenUpdate(shade: number, open: boolean) {
   if (open) return
@@ -156,7 +229,7 @@ function onSwatchOpenUpdate(shade: number, open: boolean) {
 }
 
 function onSwatchEscape(shade: number) {
-  if (pinnedShade.value === shade) pinnedShade.value = undefined
+  if (stuckShade.value === shade) stuckShade.value = undefined
 }
 
 /**
@@ -253,6 +326,38 @@ function normalizeHue(values: PaletteCurveParams) {
   }
 }
 
+// The reactive apply: regenerate the ramp, inject it (rebuilding the custom-
+// colours <style>), and persist. This reparses the whole stylesheet and churns
+// Vue state + localStorage — fine once, but ~16×/sec during a drag it's the
+// dominant cost, so a live drag routes through the CSSOM fast path below and
+// only lands here on the first edit and on release.
+const isDragging = ref(false)
+const customName = computed(() => `custom-${props.alias}`)
+
+function applyReactive() {
+  setPaletteFromCurve(props.alias, structuredClone(seedBase), { ...effects }, effectAmount.value, fineStops.value, structuredClone(toRaw(pins.value)))
+  clearCssomPreview()
+}
+
+// Fast path: write the ramp's vars straight onto :root. Inline custom
+// properties outrank the <style>'s `:root {}` rule, so the preview updates
+// with only the unavoidable restyle — no stylesheet reparse, no reactive
+// re-inject, no localStorage write. Only valid once the alias already resolves
+// through --color-custom-* (an active ramp); the first edit takes the reactive
+// path to create it. Reconciled + cleared by applyReactive on release.
+function previewViaCssom() {
+  if (!import.meta.client) return
+  const root = document.documentElement.style
+  const ramp = shades.value
+  for (const shade of stopSet.value) root.setProperty(`--color-${customName.value}-${shade}`, ramp[shade]!)
+}
+
+function clearCssomPreview() {
+  if (!import.meta.client) return
+  const root = document.documentElement.style
+  for (const shade of SHADES_FINE) root.removeProperty(`--color-${customName.value}-${shade}`)
+}
+
 // Throttled (not debounced) so the theme streams live while dragging a
 // curve — the trailing call catches the release position. With a neutral
 // lens the base simply tracks the edited curves.
@@ -260,29 +365,47 @@ const throttledApply = useThrottleFn(() => {
   if (!effectsDirty.value) {
     seedBase = structuredClone(toRaw(params))
   }
-  setPaletteFromCurve(props.alias, structuredClone(seedBase), { ...effects }, effectAmount.value, fineStops.value)
+  if (isDragging.value && active.value) {
+    previewViaCssom()
+  } else {
+    applyReactive()
+  }
 }, 60, true, true)
 
-// Toggling the stop set isn't a curve edit, so drive an apply directly to
-// regenerate the ramp (and persist the choice) at the new granularity.
-watch(fineStops, () => throttledApply())
+// Narrowing to 11 stops drops midpoint pins that no longer have a tile (they'd
+// otherwise keep bending the ramp invisibly; their x still lies between
+// standard stops, so it just relaxes back to the curve there). This is a real
+// user toggle, and only reassigns pins when it actually removes one — the
+// combined watcher below covers the fineStops change and the resulting apply.
+watch(fineStops, (fine, previous) => {
+  if (fine || !previous) return
+  const kept = pins.value.filter(pin => SHADES.includes(pin.shade as typeof SHADES[number]))
+  if (kept.length !== pins.value.length) pins.value = kept
+})
 
-// Programmatic writes into `params` (seeding, external sync) must not
-// live-apply — only user edits do. watchIgnorable scopes the suppression
-// to the seed's own writes instead of a whole tick.
-const { ignoreUpdates } = watchIgnorable(params, () => {
+// params, pins and fineStops all reshape the ramp, so any of them changing
+// re-applies. Programmatic writes (seeding, external sync — e.g. an undo/redo
+// restore) wrap ALL of these in ignoreUpdates so restoring state never fires a
+// spurious apply that regenerates and clobbers it; only genuine user edits
+// reach throttledApply.
+const { ignoreUpdates } = watchIgnorable([() => params, pins, fineStops], () => {
   throttledApply()
-})
+}, { deep: true })
 
 function seed(values: PaletteCurveParams) {
   const next = structuredClone(toRaw(values))
   normalizeHue(next)
   seedBase = structuredClone(next)
-  Object.assign(effects, PALETTE_EFFECT_DEFAULTS)
-  effectAmount.value = 100
-  // A fresh fit is 11-stop; seedFromCurrent re-detects midpoints after.
-  fineStops.value = false
+  // All apply-triggering writes go through ignoreUpdates together: a seed is
+  // never a user edit, so it must not re-apply (which would, e.g., turn a stock
+  // ramp custom the instant the editor opens, or clobber an undo/redo restore).
   ignoreUpdates(() => {
+    Object.assign(effects, PALETTE_EFFECT_DEFAULTS)
+    effectAmount.value = 100
+    // A fresh fit is 11-stop; seedFromCurrent re-detects midpoints after.
+    fineStops.value = false
+    // Fresh curves own no pins — a reseed starts from the raw ramp.
+    pins.value = []
     Object.assign(params, next)
   })
 }
@@ -300,6 +423,7 @@ function onDragStart() {
     Object.assign(effects, PALETTE_EFFECT_DEFAULTS)
     effectAmount.value = 100
   }
+  isDragging.value = true
   clearTimeout(dragEndTimeout)
   document.documentElement.classList.add('theme-studio-dragging')
 }
@@ -308,12 +432,24 @@ function onDragEnd() {
   dragEndTimeout = setTimeout(() => {
     document.documentElement.classList.remove('theme-studio-dragging')
   }, 200)
+  isDragging.value = false
+  // Land the drag on the reactive path once: persist and hand the vars back to
+  // the <style> (a pending trailing throttle can't be relied on to fire after
+  // release). applyReactive clears the inline preview so there's no double
+  // definition left behind.
+  if (!effectsDirty.value) {
+    seedBase = structuredClone(toRaw(params))
+  }
+  if (active.value) applyReactive()
 }
 
 onUnmounted(() => {
   clearTimeout(dragEndTimeout)
   if (import.meta.client) {
     document.documentElement.classList.remove('theme-studio-dragging')
+    // The fold can unmount mid-drag — don't strand inline preview vars that
+    // would then shadow the reactive <style> for this ramp.
+    clearCssomPreview()
   }
 })
 
@@ -327,7 +463,8 @@ function seedFromCurrent() {
     seed(fitPalette(source))
     // A ramp that already carries midpoints (an imported fine palette) keeps
     // them, so opening the editor doesn't silently narrow it back to 11.
-    if (source[150] !== undefined) fineStops.value = true
+    // Ignored like the rest of the seed — following a palette must not apply.
+    if (source[150] !== undefined) ignoreUpdates(() => (fineStops.value = true))
   }
 }
 
@@ -341,22 +478,30 @@ watch(() => paletteParams.value[props.alias], (value) => {
 
   seedBase = pickCurves(value)
   normalizeHue(seedBase)
-  Object.assign(effects, PALETTE_EFFECT_DEFAULTS, value.effects ?? {})
-  effectAmount.value = value.amount ?? 100
-  fineStops.value = value.fineStops ?? false
+  // One ignoreUpdates around every apply-triggering write: reflecting an
+  // external change (undo/redo restore, AI edit) must not echo back into an
+  // apply that re-persists and clobbers the very state being restored.
   ignoreUpdates(() => {
+    Object.assign(effects, PALETTE_EFFECT_DEFAULTS, value.effects ?? {})
+    effectAmount.value = value.amount ?? 100
+    pins.value = value.pins ? structuredClone(toRaw(value.pins)) : []
+    fineStops.value = value.fineStops ?? false
     Object.assign(params, applyPaletteEffects(seedBase, effects, effectAmount.value))
   })
 })
 
-// While inactive, follow the selected palette so opening the editor starts
-// from the curves of the color already on screen. Pin/hover tooltip state
-// resets with it: the swatch strip unmounts with the fold, so a stale pin
-// would pop a tooltip for a palette the user never pinned.
+// Follow the selected palette so opening the editor starts from the curves of
+// the colour already on screen. We fit from the applied shades unless the
+// editor already OWNS curves for this alias (a ramp it built, in paletteParams)
+// — a preset's custom ramp is active but has no stored curves, so it must still
+// be fitted rather than showing the blank defaults. Stuck/hover popover state
+// resets too: the swatch strip unmounts with the fold, so a stale stick would
+// pop a popover for a palette the user never opened.
 watch([() => (appConfig.ui.colors as Record<string, string>)[props.alias], open], ([, isOpen]) => {
-  pinnedShade.value = undefined
+  stuckShade.value = undefined
   hoveredShade.value = undefined
-  if (isOpen && !active.value) {
+  const owned = paletteParams.value[props.alias]
+  if (isOpen && !(owned && 'lightness' in owned)) {
     seedFromCurrent()
   }
 })
@@ -407,6 +552,9 @@ function resetEffects() {
             :y-max="windows[tab].max"
             :stop-colors="stopColors"
             :stop-xs="stopXs"
+            :stop-pinned="stopPinned"
+            :stop-values="stopValues"
+            :actual-curve="actualCurve"
             :field="field"
             @drag-start="onDragStart"
             @drag-end="onDragEnd"
@@ -414,20 +562,27 @@ function resetEffects() {
 
           <!-- Plain tiles recolor live every frame (cheap); a single popover,
                anchored to the strip and driven by the active swatch, carries
-               the details — 1 Reka instance instead of 19. -->
+               the details — 1 Reka instance instead of 19. A pin badge (blended
+               so it shows on any colour) marks stops locked to an exact value. -->
           <div ref="stripRef" class="flex rounded-b-sm overflow-hidden ring ring-default">
             <button
               v-for="info in swatches"
               :key="info.shade"
               type="button"
-              class="aspect-square flex-1"
+              class="relative aspect-square flex-1"
               :style="{ backgroundColor: info.oklch }"
               :aria-label="`Shade ${info.shade}: ${info.oklch}`"
-              :aria-pressed="pinnedShade === info.shade"
-              @click="togglePin(info.shade)"
+              :aria-pressed="stuckShade === info.shade"
+              @click="toggleStuck(info.shade)"
               @mouseenter="onSwatchEnter(info.shade)"
               @mouseleave="onSwatchLeave"
-            />
+            >
+              <UIcon
+                v-if="pinnedShades.has(info.shade)"
+                name="i-lucide-pin"
+                class="absolute inset-0 m-auto size-2.5 text-white mix-blend-difference pointer-events-none"
+              />
+            </button>
           </div>
 
           <UPopover
@@ -435,31 +590,34 @@ function resetEffects() {
             :open="!!activeSwatch"
             :reference="stripEl"
             :content="{
-              side: 'top',
+              side: 'right',
               onEscapeKeyDown: () => onSwatchEscape(swatchDetail.shade),
               onCloseAutoFocus: onSwatchCloseAutoFocus,
               sideOffset: 0,
-              // hover-opened popovers must not steal focus; a pinned one
-              // takes it so Tab lands on the copy/pin buttons
-              onOpenAutoFocus: pinnedShade === swatchDetail.shade ? undefined : (event: Event) => event.preventDefault(),
-              // pinning means pinned: clicks elsewhere (curve drags,
-              // sliders) must not dismiss — only Esc, unpin or another pin
-              onInteractOutside: pinnedShade === swatchDetail.shade ? (event: Event) => event.preventDefault() : undefined,
-              onFocusOutside: pinnedShade === swatchDetail.shade ? (event: Event) => event.preventDefault() : undefined
+              // hover-opened popovers must not steal focus; a stuck one takes
+              // it so Tab lands on the copy button and colour inputs
+              onOpenAutoFocus: stuckShade === swatchDetail.shade ? undefined : (event: Event) => event.preventDefault(),
+              // stuck means kept-open: clicks elsewhere (curve drags, sliders)
+              // must not dismiss — only Esc, unstick or another stick
+              onInteractOutside: stuckShade === swatchDetail.shade ? (event: Event) => event.preventDefault() : undefined,
+              onFocusOutside: stuckShade === swatchDetail.shade ? (event: Event) => event.preventDefault() : undefined
             }"
             @update:open="onSwatchOpenUpdate(swatchDetail.shade, $event)"
           >
             <template #content>
               <div
-                class="px-2 py-1.5 text-xs font-mono flex flex-col gap-0.5"
+                class="p-2 text-xs font-mono flex flex-col gap-1.5 w-60"
                 @mouseenter="onSwatchEnter(swatchDetail.shade)"
                 @mouseleave="onSwatchLeave"
               >
-                <div class="flex items-center justify-between gap-3">
-                  <span class="font-semibold">{{ swatchDetail.shade }}</span>
+                <div class="flex items-center justify-between gap-3 ps-2">
+                  <span class="font-semibold flex items-center gap-1.5">
+                    {{ swatchDetail.shade }}
+                    <span v-if="swatchDetail.pinned" class="text-[10px] font-normal text-primary">pinned</span>
+                  </span>
 
                   <div class="flex items-center">
-                    <UTooltip text="Copy Oklch">
+                    <UTooltip text="Copy oklch">
                       <UButton
                         size="xs"
                         color="neutral"
@@ -467,12 +625,12 @@ function resetEffects() {
                         variant="ghost"
                         :ui="{ leadingIcon: 'size-3' }"
                         :icon="copiedShade === swatchDetail.shade ? 'i-lucide-copy-check' : 'i-lucide-copy'"
-                        :aria-label="`Copy ${swatchDetail.oklch}`"
+                        :aria-label="`Copy oklch ${swatchDetail.oklch}`"
                         @click="copySwatch(swatchDetail)"
                       />
                     </UTooltip>
 
-                    <UTooltip :text="pinnedShade === swatchDetail.shade ? 'Unpin' : 'Pin open'">
+                    <UTooltip :text="swatchDetail.pinned ? 'Unpin colour' : 'Pin this colour exactly'">
                       <UButton
                         size="xs"
                         color="neutral"
@@ -480,17 +638,59 @@ function resetEffects() {
                         variant="ghost"
                         active-color="primary"
                         active-variant="ghost"
-                        :active="pinnedShade === swatchDetail.shade"
+                        :active="swatchDetail.pinned"
                         :ui="{ leadingIcon: 'size-3' }"
-                        :icon="pinnedShade === swatchDetail.shade ? 'i-lucide-pin-off' : 'i-lucide-pin'"
-                        :aria-label="pinnedShade === swatchDetail.shade ? 'Unpin details' : 'Pin details open'"
-                        @click="togglePin(swatchDetail.shade)"
+                        :icon="swatchDetail.pinned ? 'i-lucide-pin-off' : 'i-lucide-pin'"
+                        :aria-label="swatchDetail.pinned ? 'Unpin this colour' : 'Pin this colour exactly'"
+                        @click="togglePinExact(swatchDetail.shade)"
                       />
                     </UTooltip>
                   </div>
                 </div>
-                <span>{{ swatchDetail.oklch }}</span>
-                <span class="text-muted">{{ swatchDetail.hex }} · {{ swatchDetail.rgb }}</span>
+
+                <!-- Paste any format (hex / rgb / oklch) into any field: it
+                     parses, pins the stop to that colour, and the ramp bends to
+                     pass through it. All three fields restate on commit. -->
+                <UInput
+                  :model-value="swatchDetail.oklch"
+                  size="xs"
+                  variant="ghost"
+                  autocomplete="off"
+                  spellcheck="false"
+                  aria-label="OKLCH value"
+                  :ui="{ base: 'font-mono' }"
+                  @focus="stuckShade = swatchDetail.shade"
+                  @change="onColorCommit(swatchDetail.shade, 'oklch', $event)"
+                  @keydown.enter="($event.target as HTMLInputElement).blur()"
+                />
+                <div class="flex gap-1.5">
+                  <UInput
+                    :model-value="swatchDetail.hex"
+                    size="xs"
+                    variant="ghost"
+                    autocomplete="off"
+                    spellcheck="false"
+                    aria-label="Hex value"
+                    class="w-18"
+                    :ui="{ base: 'font-mono' }"
+                    @focus="stuckShade = swatchDetail.shade"
+                    @change="onColorCommit(swatchDetail.shade, 'hex', $event)"
+                    @keydown.enter="($event.target as HTMLInputElement).blur()"
+                  />
+                  <UInput
+                    :model-value="swatchDetail.rgb"
+                    size="xs"
+                    variant="ghost"
+                    autocomplete="off"
+                    spellcheck="false"
+                    aria-label="RGB value"
+                    class="flex-1"
+                    :ui="{ base: 'font-mono' }"
+                    @focus="stuckShade = swatchDetail.shade"
+                    @change="onColorCommit(swatchDetail.shade, 'rgb', $event)"
+                    @keydown.enter="($event.target as HTMLInputElement).blur()"
+                  />
+                </div>
               </div>
             </template>
           </UPopover>
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 98e49a9224..8e6211d92b 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -651,7 +651,7 @@ export function useTheme() {
 
   // applyDoc resets before applying — without the opt-out every preset,
   // import, shuffle and undo/redo would count as a "Theme Reset".
-  function resetTheme(options: { track?: boolean } = {}) {
+  function resetTheme(options: { track?: boolean, immediate?: boolean } = {}) {
     if (options.track !== false) {
       track('Theme Reset')
     }
@@ -705,7 +705,13 @@ export function useTheme() {
     // palette editor showing (and re-persisting) supposedly-reset curves.
     useState<Record<string, any>>(THEME_STATE_KEYS.paletteParams).value = {}
 
-    if (import.meta.client) {
+    // Clearing the live <style> tags imperatively makes a bare reset take
+    // effect on the same frame. But when a reset is immediately followed by a
+    // re-apply (applyDoc: preset swap, undo/redo), that cleared frame paints as
+    // the default theme first — a white flash. Those callers pass immediate:
+    // false so the reactive customColors/cssVariables state ({} → new value in
+    // one tick) swaps the tags atomically with no intermediate paint.
+    if (import.meta.client && options.immediate !== false) {
       document.getElementById(THEME_TAG_IDS.cssVariables)?.replaceChildren()
       document.getElementById(THEME_TAG_IDS.customColors)?.replaceChildren()
     }
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index fa2cfc4d36..e5ab9d3a77 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,7 +1,7 @@
 import colors from 'tailwindcss/colors'
 import { THEME_STATE_KEYS, THEME_STORAGE_KEYS } from '../utils/theme-keys'
 import { presets, docToSettings, isDefaultTheme, generatePalette, applyPaletteEffects, isDefaultEffects, parseCssColor, styleComponents, styleTokens, sectionFingerprint, mergeSection, canonicalTokenShades, TOKEN_SHADE_TARGETS, SECTION_GROUPS, DEFAULT_COLORS, SHADES } from '../utils/theme-engine'
-import type { SectionKey, ThemeDoc, ThemePreset, PaletteCurveParams, PaletteEffects, StoredPaletteParams, StyleOptions, Shade, ShadeStop, ColorAlias, TokenRamp } from '../utils/theme-engine'
+import type { SectionKey, ThemeDoc, ThemePreset, PaletteCurveParams, PaletteEffects, StoredPaletteParams, PalettePin, StyleOptions, Shade, ShadeStop, ColorAlias, TokenRamp } from '../utils/theme-engine'
 import { readLocalStorage } from '../utils/theme'
 
 export function useThemeStudio() {
@@ -93,7 +93,7 @@ export function useThemeStudio() {
           { lightness: entry.lightness, chroma: entry.chroma, hue: entry.hue },
           entry.effects,
           entry.amount
-        ), entry.fineStops)
+        ), entry.fineStops, entry.pins)
         const name = customPaletteName(alias)
         theme.applyThemeSettings({
           customColors: { [name]: ramp },
@@ -272,7 +272,7 @@ export function useThemeStudio() {
    * modifier lens persist separately, so a reload restores the editor's
    * sliders instead of silently baking them into the curves.
    */
-  function setPaletteFromCurve(alias: ColorAlias, base: PaletteCurveParams, effects?: PaletteEffects, amount = 100, fine = false) {
+  function setPaletteFromCurve(alias: ColorAlias, base: PaletteCurveParams, effects?: PaletteEffects, amount = 100, fine = false, pins: PalettePin[] = []) {
     const name = customPaletteName(alias)
     // The alias only needs pointing once. Live drags call this at ~16Hz; re-
     // sending it every tick makes applyThemeSettings re-persist the AI-extras
@@ -281,7 +281,7 @@ export function useThemeStudio() {
     const aliasAlreadySet = (appConfig.ui.colors as Record<string, string>)[alias] === name
 
     theme.applyThemeSettings({
-      customColors: { [name]: generatePalette(applyPaletteEffects(base, effects, amount), fine) },
+      customColors: { [name]: generatePalette(applyPaletteEffects(base, effects, amount), fine, pins) },
       ...(aliasAlreadySet ? {} : { [alias]: name }),
       // The remaps are var() references, not ramp colours, and are kept in
       // sync with the shade sliders elsewhere — so they only need (re)sending
@@ -291,7 +291,8 @@ export function useThemeStudio() {
     const entry: StoredPaletteParams = {
       ...base,
       ...(isDefaultEffects(effects, amount) ? {} : { effects, amount }),
-      ...(fine ? { fineStops: true } : {})
+      ...(fine ? { fineStops: true } : {}),
+      ...(pins.length ? { pins } : {})
     }
     setPaletteParams({ ...paletteParams.value, [alias]: entry })
 
@@ -348,7 +349,10 @@ export function useThemeStudio() {
 
   /** Replace the current theme with a document: reset, then apply overrides. */
   function applyDoc(doc: ThemeDoc) {
-    theme.resetTheme({ track: false })
+    // immediate: false — this reset is followed by the doc's own styles in the
+    // same call, so let the reactive tags swap atomically rather than clearing
+    // to the default theme for a frame (a white flash between presets).
+    theme.resetTheme({ track: false, immediate: false })
     style.value = deriveStyle(doc)
     if (Object.keys(style.value).length) {
       window.localStorage.setItem(THEME_STORAGE_KEYS.style, JSON.stringify(style.value))
@@ -476,6 +480,7 @@ export function useThemeStudio() {
     style,
     setStyle,
     paletteParams,
+    setPaletteParams,
     isCustomPalette,
     paletteShades,
     selectPalette,
diff --git a/docs/app/composables/useThemeStudioHistory.ts b/docs/app/composables/useThemeStudioHistory.ts
index b47fc98f94..1c7da9803f 100644
--- a/docs/app/composables/useThemeStudioHistory.ts
+++ b/docs/app/composables/useThemeStudioHistory.ts
@@ -1,4 +1,17 @@
-import type { ThemeDoc } from '../utils/theme-engine'
+import type { ThemeDoc, StoredPaletteParams } from '../utils/theme-engine'
+
+/**
+ * One undo/redo step. The exported `doc` carries colours, style and the
+ * RESOLVED palette shades — but not the curves and pins behind them, which
+ * live in the studio's `paletteParams`. We snapshot both: restoring the doc
+ * alone would fix the visible colours yet strand the palette editor on stale
+ * (or refitted-to-default) curves, and the next edit would regenerate from
+ * those and clobber the ramp.
+ */
+interface HistoryEntry {
+  doc: ThemeDoc
+  pp: Partial<Record<string, StoredPaletteParams>>
+}
 
 /**
  * Undo/redo over whole theme documents — the same serialize/restore pair
@@ -8,13 +21,23 @@ import type { ThemeDoc } from '../utils/theme-engine'
  * Session-only by design.
  */
 export function useThemeStudioHistory() {
-  const { applyDoc } = useThemeStudio()
+  const { applyDoc, paletteParams, setPaletteParams } = useThemeStudio()
+  const { currentDoc } = useTheme()
 
-  const past = useState<ThemeDoc[]>('theme-studio-history-past', () => [])
-  const future = useState<ThemeDoc[]>('theme-studio-history-future', () => [])
+  const past = useState<HistoryEntry[]>('theme-studio-history-past', () => [])
+  const future = useState<HistoryEntry[]>('theme-studio-history-future', () => [])
   const lastSnapshot = useState('theme-studio-history-snapshot', () => '')
   const pendingRestore = useState('theme-studio-history-pending', () => false)
 
+  /**
+   * The full restorable studio state as a stable string — the exported doc
+   * plus the editor's curve/pin params. Reads reactive sources, so the page's
+   * capture watcher re-runs on any change to either.
+   */
+  function snapshot() {
+    return JSON.stringify({ doc: currentDoc(), pp: paletteParams.value })
+  }
+
   /**
    * Realign the baseline without recording (page mount). If the theme
    * changed while no watcher was mounted (preset from the header picker on
@@ -22,61 +45,69 @@ export function useThemeStudioHistory() {
    * exists — undo/redo against them would clobber the off-page change, so
    * they reset.
    */
-  function align(snapshot: string) {
-    if (lastSnapshot.value && snapshot !== lastSnapshot.value) {
+  function align(snap: string) {
+    if (lastSnapshot.value && snap !== lastSnapshot.value) {
       past.value = []
       future.value = []
     }
     pendingRestore.value = false
-    lastSnapshot.value = snapshot
+    lastSnapshot.value = snap
   }
 
   /** Record a settled snapshot (call after the page's debounce). */
-  function capture(snapshot: string) {
+  function capture(snap: string) {
     if (pendingRestore.value) {
       // the first settle after our own undo/redo restore — realign without
       // recording, however long the flush took
       pendingRestore.value = false
-      lastSnapshot.value = snapshot
+      lastSnapshot.value = snap
       return
     }
-    if (snapshot === lastSnapshot.value) return
+    if (snap === lastSnapshot.value) return
     // No baseline yet (capture before the page's mount align) — adopt
     // rather than record: JSON.parse('') would throw.
     if (!lastSnapshot.value) {
-      lastSnapshot.value = snapshot
+      lastSnapshot.value = snap
       return
     }
     past.value.push(JSON.parse(lastSnapshot.value))
     if (past.value.length > 50) past.value.shift()
     future.value = []
-    lastSnapshot.value = snapshot
+    lastSnapshot.value = snap
   }
 
-  function restore(doc: ThemeDoc) {
+  function restore(entry: HistoryEntry) {
     pendingRestore.value = true
     // The baseline moves NOW, not at the debounced settle — a second
-    // undo/redo inside the debounce window must push this doc, not the
+    // undo/redo inside the debounce window must push this entry, not the
     // pre-restore state (which would drop a step and duplicate another).
-    lastSnapshot.value = JSON.stringify(doc)
-    applyDoc(doc)
-    // the settle still realigns from currentDoc() itself — the applied doc
+    lastSnapshot.value = JSON.stringify(entry)
+    applyDoc(entry.doc)
+    // Restore the editor curves/pins AFTER applyDoc — applyDoc resets and
+    // re-applies the visible colours (and clears paletteParams), so this must
+    // run last to realign the editor's source of truth to the restored ramp.
+    // JSON round-trip, NOT structuredClone: entry.pp is a reactive-proxy value
+    // off the history useState, and structuredClone throws DataCloneError on a
+    // Vue Proxy — which would abort restore right before this line, leaving the
+    // ramp applied but the editor stranded on stale curves.
+    setPaletteParams(entry.pp ? JSON.parse(JSON.stringify(entry.pp)) : {})
+    // the settle still realigns from snapshot() itself — the applied doc
     // may re-serialize differently than it round-trips
   }
 
   function undo() {
-    const doc = past.value.pop()
-    if (!doc) return
+    const entry = past.value.pop()
+    if (!entry) return
     future.value.push(JSON.parse(lastSnapshot.value))
-    restore(doc)
+    restore(entry)
   }
 
   function redo() {
-    const doc = future.value.pop()
-    if (!doc) return
+    const entry = future.value.pop()
+    if (!entry) return
     past.value.push(JSON.parse(lastSnapshot.value))
-    restore(doc)
+    restore(entry)
   }
 
-  return { past, future, align, capture, undo, redo }
+  return { past, future, snapshot, align, capture, undo, redo }
 }
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 403e8eaf4d..e3ca7d8b4e 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const { track } = useAnalytics()
-const { currentDoc, resetTheme, icon: iconSet } = useTheme()
+const { resetTheme, icon: iconSet } = useTheme()
 
 // The studio toolbar skins to the applied pack: undo/redo/reset/export/
 // fullscreen come from the pack's studio glyphs, while import and the group
@@ -11,7 +11,7 @@ const studioIcons = useStudioIcons()
 // View and fullscreen are app-level state: the site header hosts the view
 // switcher while on /theme and hides itself in fullscreen.
 const { view, fullscreen } = useThemeStudioView()
-const { past, future, align, capture, undo, redo } = useThemeStudioHistory()
+const { past, future, snapshot, align, capture, undo, redo } = useThemeStudioHistory()
 
 useSeoMeta({
   title: 'Theme Studio',
@@ -24,16 +24,17 @@ const mounted = ref(false)
 onMounted(() => {
   mounted.value = true
   track('Theme Studio Opened')
-  align(JSON.stringify(currentDoc()))
+  align(snapshot())
 })
 
 // A debounced capture folds slider-drag bursts (and a reset) into single
-// history steps.
+// history steps. The snapshot spans the doc AND the editor's curve/pin params,
+// so undo restores the palette editor's state, not just the visible colours.
 let captureTimeout: ReturnType<typeof setTimeout> | undefined
-watch(() => (mounted.value ? JSON.stringify(currentDoc()) : undefined), (snapshot) => {
-  if (!snapshot) return
+watch(() => (mounted.value ? snapshot() : undefined), (snap) => {
+  if (!snap) return
   clearTimeout(captureTimeout)
-  captureTimeout = setTimeout(() => capture(snapshot), 350)
+  captureTimeout = setTimeout(() => capture(snap), 350)
 })
 
 // ⌃⇧D flips the mode without a click, so open panels survive the switch.
@@ -135,7 +136,7 @@ onUnmounted(() => {
   window.removeEventListener('keydown', onEscape)
   fullscreen.value = false
   clearTimeout(captureTimeout)
-  capture(JSON.stringify(currentDoc()))
+  capture(snapshot())
 })
 
 const settingGroups = [
diff --git a/docs/app/utils/theme-engine/palette.ts b/docs/app/utils/theme-engine/palette.ts
index da11b33e2e..516d91b189 100644
--- a/docs/app/utils/theme-engine/palette.ts
+++ b/docs/app/utils/theme-engine/palette.ts
@@ -65,8 +65,92 @@ export interface PaletteEffects {
 
 export const PALETTE_EFFECT_DEFAULTS: PaletteEffects = { lightness: 0, contrast: 0, saturation: 0, hueShift: 0 }
 
+/**
+ * A stop locked to an exact OKLCH the curves must pass through — "pin this
+ * brand colour, edit around it". Stored as the absolute target; the ramp is
+ * bent to hit it (see `pinField`), so it survives curve drags and modifiers.
+ */
+export interface PalettePin {
+  shade: Shade
+  l: number
+  c: number
+  h: number
+}
+
 /** A persisted palette: the base curves plus the modifier lens over them. */
-export type StoredPaletteParams = PaletteCurveParams & { effects?: PaletteEffects, amount?: number, fineStops?: boolean }
+export type StoredPaletteParams = PaletteCurveParams & { effects?: PaletteEffects, amount?: number, fineStops?: boolean, pins?: PalettePin[] }
+
+// Width (in ramp x, 0–1) of each pin's influence. A pinned stop is hit
+// exactly; neighbours bend smoothly toward it and the effect decays to ~0 by
+// ~2σ away, so distant stops keep following the base curve. Narrow enough to
+// feel local, wide enough that the ramp stays smooth (no kink at the pin).
+const PIN_KERNEL_SIGMA = 0.2
+
+function pinKernel(distance: number): number {
+  const t = distance / PIN_KERNEL_SIGMA
+  return Math.exp(-t * t)
+}
+
+/**
+ * Solve `A·x = b` for a small dense symmetric system (Gauss–Jordan with
+ * partial pivoting). Pins are ≤19, so this is trivially fast; a near-singular
+ * pivot (coincident stops) collapses that weight to 0 rather than exploding.
+ */
+function solveLinear(a: number[][], b: number[]): number[] {
+  const n = b.length
+  const m = a.map((row, i) => [...row, b[i]!])
+  for (let col = 0; col < n; col++) {
+    let pivot = col
+    for (let row = col + 1; row < n; row++) {
+      if (Math.abs(m[row]![col]!) > Math.abs(m[pivot]![col]!)) pivot = row
+    }
+    ;[m[col], m[pivot]] = [m[pivot]!, m[col]!]
+    const diag = m[col]![col]!
+    if (Math.abs(diag) < 1e-12) continue
+    for (let row = 0; row < n; row++) {
+      if (row === col) continue
+      const factor = m[row]![col]! / diag
+      for (let k = col; k <= n; k++) m[row]![k]! -= factor * m[col]![k]!
+    }
+  }
+  return m.map((row, i) => (Math.abs(row[i]!) < 1e-12 ? 0 : row[n]! / row[i]!))
+}
+
+/**
+ * Build the additive correction field that locks the pins. Each channel's
+ * correction is a radial-basis interpolation of the pin deltas (target minus
+ * the base curve at the pin), so at a pinned x it equals the delta exactly —
+ * `base + correction` renders the target — and decays smoothly elsewhere.
+ * Hue deltas take the short way round the circle.
+ */
+function pinField(pins: PalettePin[], base: (x: number) => { l: number, c: number, h: number }) {
+  const xs = pins.map(pin => shadeX(pin.shade))
+  const matrix = xs.map(xi => xs.map(xj => pinKernel(Math.abs(xi - xj))))
+  const deltaL: number[] = []
+  const deltaC: number[] = []
+  const deltaH: number[] = []
+  pins.forEach((pin, i) => {
+    const b = base(xs[i]!)
+    deltaL.push(pin.l - b.l)
+    deltaC.push(pin.c - b.c)
+    deltaH.push(((((pin.h - b.h) % 360) + 540) % 360) - 180)
+  })
+  const wl = solveLinear(matrix, deltaL)
+  const wc = solveLinear(matrix, deltaC)
+  const wh = solveLinear(matrix, deltaH)
+  return (x: number) => {
+    let dl = 0
+    let dc = 0
+    let dh = 0
+    for (let j = 0; j < xs.length; j++) {
+      const k = pinKernel(Math.abs(x - xs[j]!))
+      dl += wl[j]! * k
+      dc += wc[j]! * k
+      dh += wh[j]! * k
+    }
+    return { dl, dc, dh }
+  }
+}
 
 export function isDefaultEffects(effects?: PaletteEffects, amount = 100): boolean {
   if (amount !== 100) return false
@@ -172,11 +256,43 @@ export function shadeX(shade: Shade): number {
   return shade / 1000
 }
 
-export function generatePalette(params: PaletteCurveParams, fine = false): Record<Shade, string> {
+/**
+ * A reusable sampler for the pin-corrected ramp: solves the pin field once,
+ * then returns the raw channel values at any x — hue unwrapped, no gamut clamp
+ * — so a curve drawn through them stays continuous and bends through pinned
+ * stops (which `generatePalette` then clamps per stop for the actual colours).
+ */
+export function buildRampSampler(params: PaletteCurveParams, pins: PalettePin[] = []): (x: number) => { l: number, c: number, h: number } {
+  const base = (x: number) => ({
+    l: sampleCurve(x, params.lightness),
+    c: sampleCurve(x, params.chroma),
+    h: sampleCurve(x, params.hue)
+  })
+  const correct = pins.length ? pinField(pins, base) : undefined
+  return (x: number) => {
+    const b = base(x)
+    if (!correct) return b
+    const d = correct(x)
+    return { l: b.l + d.dl, c: b.c + d.dc, h: b.h + d.dh }
+  }
+}
+
+export function generatePalette(params: PaletteCurveParams, fine = false, pins: PalettePin[] = []): Record<Shade, string> {
   const result = {} as Record<Shade, string>
 
+  const base = (x: number) => ({
+    l: sampleCurve(x, params.lightness),
+    c: sampleCurve(x, params.chroma),
+    h: sampleCurve(x, params.hue)
+  })
+  // The pin correction is added to the raw curve sample (pre-clamp), so a
+  // pinned stop lands on its target exactly whenever that target is in gamut.
+  const correct = pins.length ? pinField(pins, base) : undefined
+
   for (const shade of fine ? SHADES_FINE : SHADES) {
     const x = shadeX(shade)
+    const b = base(x)
+    const d = correct ? correct(x) : { dl: 0, dc: 0, dh: 0 }
 
     // Clamp here, not in the serializer: sculpted curves can demand
     // impossible chroma, and the swatches/contrast math assume sRGB.
@@ -186,9 +302,9 @@ export function generatePalette(params: PaletteCurveParams, fine = false): Recor
     // wraps into [0, 360): a negative or 4-digit hue would fail the
     // sanitizer's canonical-oklch check and silently DROP the shade.
     result[shade] = formatOklch(clampToGamut({
-      l: Math.min(1, Math.max(0, sampleCurve(x, params.lightness))),
-      c: Math.max(0, sampleCurve(x, params.chroma)),
-      h: ((sampleCurve(x, params.hue) % 360) + 360) % 360
+      l: Math.min(1, Math.max(0, b.l + d.dl)),
+      c: Math.max(0, b.c + d.dc),
+      h: ((((b.h + d.dh) % 360) + 360) % 360)
     }))
   }
 
diff --git a/test/utils/theme-palette.spec.ts b/test/utils/theme-palette.spec.ts
index 3776e58479..2c2c47f290 100644
--- a/test/utils/theme-palette.spec.ts
+++ b/test/utils/theme-palette.spec.ts
@@ -6,6 +6,7 @@ import {
   parseColor,
   inGamut,
   clampToGamut,
+  formatOklch,
   contrastRatio,
   parseCssColor,
   generatePalette,
@@ -121,6 +122,37 @@ describe('generatePalette', () => {
     const palette = generatePalette(NEUTRAL_CURVE_DEFAULTS)
     expect(parseColor(palette[950])!.l).toBeLessThan(0.16)
   })
+
+  it('no pins leaves the ramp byte-identical', () => {
+    const bare = generatePalette(CURVE_DEFAULTS)
+    const empty = generatePalette(CURVE_DEFAULTS, false, [])
+    for (const shade of SHADES) expect(empty[shade]).toBe(bare[shade])
+  })
+
+  it('renders a pinned stop as its exact (gamut-clamped) target', () => {
+    const target = parseColor('oklch(75.42% 0.1077 118.763)')!
+    const palette = generatePalette(CURVE_DEFAULTS, false, [{ shade: 500, ...target }])
+    expect(palette[500]).toBe(formatOklch(clampToGamut(target)))
+  })
+
+  it('keeps a pin local — the far end barely moves', () => {
+    const target = parseColor('oklch(75.42% 0.1077 118.763)')!
+    const bare = generatePalette(CURVE_DEFAULTS)
+    const pinned = generatePalette(CURVE_DEFAULTS, false, [{ shade: 500, ...target }])
+    // 50 is ~0.5 in x away from the pin — the Gaussian has decayed to nearly nothing.
+    expect(parseColor(pinned[50])!.l).toBeCloseTo(parseColor(bare[50])!.l, 2)
+  })
+
+  it('hits every stop of a multi-pin set exactly', () => {
+    const a = parseColor('oklch(75.42% 0.1077 118.763)')!
+    const b = parseColor('oklch(45% 0.09 250)')!
+    const palette = generatePalette(CURVE_DEFAULTS, false, [
+      { shade: 300, ...a },
+      { shade: 700, ...b }
+    ])
+    expect(palette[300]).toBe(formatOklch(clampToGamut(a)))
+    expect(palette[700]).toBe(formatOklch(clampToGamut(b)))
+  })
 })
 
 describe('fitPalette (work backwards from real palettes)', () => {

From ed71bb62376b50164b99689d8a4cfec211d8dc88 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 25 Jul 2026 03:34:22 +0200
Subject: [PATCH 160/185] fix(theme-studio): persist multi-pins and keep
 endpoints on the curve
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pin persistence was silently failing for every pin after the first: setPin
rebuilds the array from a deeply-reactive ref, so kept elements came back as
Vue proxies that toRaw() doesn't unwrap, and structuredClone threw
DataCloneError inside applyReactive — aborting the apply before it saved. A
plainPins() helper rebuilds each pin from its scalar fields so persistence
can't throw.

The curve editor's endpoint handles were drawn at the raw bézier control, so
a pin near the edge (or on it) pulled the corrected line away while the handle
stayed put — visibly detached. Endpoints now sit on the corrected curve; a
pinned endpoint is locked (the pin owns it) and dragging an unpinned one backs
out the RBF pull so it still tracks the pointer.

Also folds in the PR review batch:
- pin RBF: spacing-adaptive sigma + hue chain-unwrap (no white collapse / long
  hue arc), with regression tests
- self-heal no longer re-fires the primary setter every load
- resetSection preserves curves for untouched custom palettes
- external-sync guard compares pins and stop density, not just curves
- paletteShades samples fine stops; reactive per-seed hue window
- contrastRatio returns null instead of fabricating black
- midpoint tokens promote through parseUiColorRef
- SSR FOUC scripts and import/export parser hardened
- font name re-validated at the <style> sink

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioCurveEditor.vue   | 54 +++++++++++++---
 .../theme-studio/ThemeStudioPaletteEditor.vue | 63 +++++++++++++++----
 .../theme-studio/ThemeStudioSection.vue       | 22 ++++---
 .../theme-studio/ThemeStudioViewA11y.vue      | 15 +++--
 docs/app/composables/useTheme.ts              |  9 ++-
 docs/app/composables/useThemeStudio.ts        | 36 +++++++++--
 docs/app/plugins/theme.ts                     | 60 ++++++++++++------
 docs/app/utils/theme-engine/export.ts         | 25 ++++++--
 docs/app/utils/theme-engine/import.ts         | 33 ++++++++--
 docs/app/utils/theme-engine/oklch.ts          | 15 +++--
 docs/app/utils/theme-engine/palette.ts        | 54 ++++++++++++----
 docs/app/utils/theme-engine/resolve.ts        | 16 ++++-
 test/utils/theme-palette.spec.ts              | 44 +++++++++++++
 13 files changed, 356 insertions(+), 90 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
index 6e98b5c90f..187a7e6ab3 100644
--- a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
@@ -136,6 +136,19 @@ function drawField() {
 // redraw on every field change — a drag, a tab switch, or a preset reseed.
 watch([() => props.field, fieldCanvas], drawField, { immediate: true, flush: 'post' })
 
+// The raw bézier control (y0/y1) is NOT where the curve actually ends once pins
+// are in play: a pin near the edge (e.g. 900) pulls the corrected line away from
+// the raw endpoint, and a pin ON the endpoint overrides it outright. Always sit
+// the endpoint handle on the corrected value (stopValues) so it rides the drawn
+// line instead of floating off it. With no pins the corrected value equals the
+// bézier endpoint, so nothing moves. A pinned endpoint is additionally locked
+// from dragging (the pin owns it — edit it through the swatch popover).
+const lastStop = computed(() => (props.stopValues?.length ?? 1) - 1)
+const startPinned = computed(() => props.stopPinned?.[0] ?? false)
+const endPinned = computed(() => props.stopPinned?.[lastStop.value] ?? false)
+const startY = computed(() => props.stopValues?.[0] ?? curve.value.y0)
+const endY = computed(() => props.stopValues?.[lastStop.value] ?? curve.value.y1)
+
 const stopXs = computed(() => props.stopXs ?? SHADES.map(shadeX))
 const stops = computed(() => stopXs.value.map((x, index) => {
   // Sit each dot on the value its colour actually resolves to (pin-corrected),
@@ -172,8 +185,11 @@ function onPointerDown(event: PointerEvent) {
   const targets = [
     { id: 'p1' as const, x: toX(c.p1x), y: toHandleY(c.p1y) },
     { id: 'p2' as const, x: toX(c.p2x), y: toHandleY(c.p2y) },
-    { id: 'y0' as const, x: toX(0), y: toHandleY(c.y0) },
-    { id: 'y1' as const, x: toX(1), y: toHandleY(c.y1) }
+    // A pinned endpoint is locked to its pin — don't offer it as a drag target,
+    // or the endpoint-carries-its-handle delta would fight the pin correction.
+    // Grab the others at their DRAWN (corrected) spot, not the raw control.
+    ...(startPinned.value ? [] : [{ id: 'y0' as const, x: toX(0), y: toHandleY(startY.value) }]),
+    ...(endPinned.value ? [] : [{ id: 'y1' as const, x: toX(1), y: toHandleY(endY.value) }])
   ]
 
   let best: { id: typeof dragging.value, distance: number } = { id: null, distance: 14 }
@@ -206,14 +222,21 @@ function onPointerMove(event: PointerEvent) {
   // delta, so the tangent that leaves the endpoint is preserved instead of the
   // handle staying put and kinking the curve. The handle stays window-clamped
   // (as a direct handle drag would), so near an edge the offset compresses.
+  //
+  // The handle is drawn on the CORRECTED curve, but we steer the RAW control
+  // (y0/y1): back out the pin pull at the edge (corrected − raw) so the visible
+  // endpoint tracks the pointer instead of lagging by the correction. With no
+  // pin reaching the edge the offset is zero and this is the plain drag.
   if (dragging.value === 'y0') {
-    const delta = clamped - curve.value.y0
+    const raw = Math.min(props.yMax, Math.max(props.yMin, clamped - (startY.value - curve.value.y0)))
+    const delta = raw - curve.value.y0
     const p1y = Math.min(props.yMax, Math.max(props.yMin, curve.value.p1y + delta))
-    curve.value = { ...curve.value, y0: clamped, p1y }
+    curve.value = { ...curve.value, y0: raw, p1y }
   } else if (dragging.value === 'y1') {
-    const delta = clamped - curve.value.y1
+    const raw = Math.min(props.yMax, Math.max(props.yMin, clamped - (endY.value - curve.value.y1)))
+    const delta = raw - curve.value.y1
     const p2y = Math.min(props.yMax, Math.max(props.yMin, curve.value.p2y + delta))
-    curve.value = { ...curve.value, y1: clamped, p2y }
+    curve.value = { ...curve.value, y1: raw, p2y }
   } else if (dragging.value === 'p1') {
     curve.value = { ...curve.value, p1x: fromX(point.x), p1y: clamped }
   } else {
@@ -233,6 +256,17 @@ function onPointerUp(event: PointerEvent) {
     emit('dragEnd')
   }
 }
+
+// The collapsible unmounts its content on close (default), so closing the fold
+// mid-drag tears down this SVG without a pointerup. Emit the close-out so the
+// parent still runs onDragEnd — otherwise its isDragging, the page-wide
+// dragging class and the inline preview vars all stay stranded.
+onUnmounted(() => {
+  if (dragging.value) {
+    dragging.value = null
+    emit('dragEnd')
+  }
+})
 </script>
 
 <template>
@@ -259,7 +293,7 @@ function onPointerUp(event: PointerEvent) {
       <!-- handle connectors -->
       <line
         :x1="toX(0)"
-        :y1="toHandleY(curve.y0)"
+        :y1="toHandleY(startY)"
         :x2="toX(curve.p1x)"
         :y2="toHandleY(curve.p1y)"
         class="stroke-(--ui-text-dimmed)"
@@ -268,7 +302,7 @@ function onPointerUp(event: PointerEvent) {
       />
       <line
         :x1="toX(1)"
-        :y1="toHandleY(curve.y1)"
+        :y1="toHandleY(endY)"
         :x2="toX(curve.p2x)"
         :y2="toHandleY(curve.p2y)"
         class="stroke-(--ui-text-dimmed)"
@@ -308,7 +342,7 @@ function onPointerUp(event: PointerEvent) {
          what they steer -->
       <circle
         :cx="toX(0)"
-        :cy="toHandleY(curve.y0)"
+        :cy="toHandleY(startY)"
         r="4.5"
         :fill="stopColors?.[0] || 'currentColor'"
         class="stroke-(--ui-text-highlighted)"
@@ -316,7 +350,7 @@ function onPointerUp(event: PointerEvent) {
       />
       <circle
         :cx="toX(1)"
-        :cy="toHandleY(curve.y1)"
+        :cy="toHandleY(endY)"
         r="4.5"
         :fill="stopColors?.[stopColors.length - 1] || 'currentColor'"
         class="stroke-(--ui-text-highlighted)"
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 55fd0774eb..19c4560b5e 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -28,6 +28,17 @@ function pickCurves(value: StoredPaletteParams): PaletteCurveParams {
   return structuredClone({ lightness: toRaw(value.lightness), chroma: toRaw(value.chroma), hue: toRaw(value.hue) })
 }
 
+/**
+ * A plain, clone-safe copy of a pin list. `pins` is a deeply-reactive ref, so
+ * reading an element (via filter/index) hands back a Vue Proxy that `toRaw`
+ * does NOT unwrap — only the outer array. structuredClone then throws
+ * DataCloneError on the proxied element. Rebuilding each pin from its scalar
+ * fields sidesteps the proxy entirely, so the result always persists.
+ */
+function plainPins(pins: readonly PalettePin[]): PalettePin[] {
+  return pins.map(pin => ({ shade: pin.shade, l: pin.l, c: pin.c, h: pin.h }))
+}
+
 // The modifier lens, restored alongside the base so a reload lands exactly
 // where the session left off instead of silently baking the sliders in.
 const stored = paletteParams.value[props.alias]
@@ -52,7 +63,7 @@ const stopCount = computed({
 // Stops locked to an exact colour — the curves bend to pass through them.
 // Keyed edits go through setPin/removePin so the array stays a plain, cloneable
 // value (it's persisted and fed to generatePalette on every apply).
-const pins = ref<PalettePin[]>(stored?.pins ? structuredClone(toRaw(stored.pins)) : [])
+const pins = ref<PalettePin[]>(stored?.pins ? plainPins(stored.pins) : [])
 const pinnedShades = computed(() => new Set(pins.value.map(pin => pin.shade)))
 
 function setPin(shade: number, oklch: string) {
@@ -261,15 +272,22 @@ const stripEl = computed(() => stripRef.value ?? undefined)
  * stretches once, at seed, to include them, or the drag clamp would snap a
  * merely-grabbed handle back into range and shift the color uninvited.
  */
-const seedHues = [params.hue.y0, params.hue.y1, params.hue.p1y, params.hue.p2y]
-const windows = {
-  lightness: { min: 0, max: 1 },
-  chroma: { min: 0, max: 0.35 },
-  hue: {
-    min: Math.min(0, Math.floor(Math.min(...seedHues) / 10) * 10),
-    max: Math.max(360, Math.ceil(Math.max(...seedHues) / 10) * 10)
+function hueWindow(hue: PaletteCurveParams['hue']) {
+  const points = [hue.y0, hue.y1, hue.p1y, hue.p2y]
+  return {
+    min: Math.min(0, Math.floor(Math.min(...points) / 10) * 10),
+    max: Math.max(360, Math.ceil(Math.max(...points) / 10) * 10)
   }
 }
+// The hue window must stretch to fit each freshly-seeded curve (a later palette
+// can cross the seam elsewhere), so it's a ref reseeded alongside params — but
+// only on seed, never mid-drag, or a grabbed handle would rescale under the
+// pointer. Lightness/chroma are fixed physical ranges.
+const windows = ref({
+  lightness: { min: 0, max: 1 },
+  chroma: { min: 0, max: 0.35 },
+  hue: hueWindow(params.hue)
+})
 
 /**
  * The color field behind the active tab's curve: columns follow the ramp,
@@ -293,7 +311,7 @@ watch(params, () => syncFieldCurves(), { deep: true })
 
 const field = computed(() => {
   const channel = tab.value
-  const { min, max } = windows[channel]
+  const { min, max } = windows.value[channel]
   const curves = fieldCurves.value
 
   // Fence-post: column i is sampled AT ramp position i/(n-1) — the editor
@@ -335,7 +353,7 @@ const isDragging = ref(false)
 const customName = computed(() => `custom-${props.alias}`)
 
 function applyReactive() {
-  setPaletteFromCurve(props.alias, structuredClone(seedBase), { ...effects }, effectAmount.value, fineStops.value, structuredClone(toRaw(pins.value)))
+  setPaletteFromCurve(props.alias, structuredClone(seedBase), { ...effects }, effectAmount.value, fineStops.value, plainPins(pins.value))
   clearCssomPreview()
 }
 
@@ -381,6 +399,10 @@ watch(fineStops, (fine, previous) => {
   if (fine || !previous) return
   const kept = pins.value.filter(pin => SHADES.includes(pin.shade as typeof SHADES[number]))
   if (kept.length !== pins.value.length) pins.value = kept
+  // A stuck/hovered midpoint tile is gone once we narrow — drop the popover
+  // state so it can't dangle over a stop that no longer renders.
+  if (stuckShade.value !== undefined && !SHADES.includes(stuckShade.value as typeof SHADES[number])) stuckShade.value = undefined
+  if (hoveredShade.value !== undefined && !SHADES.includes(hoveredShade.value as typeof SHADES[number])) hoveredShade.value = undefined
 })
 
 // params, pins and fineStops all reshape the ramp, so any of them changing
@@ -408,6 +430,9 @@ function seed(values: PaletteCurveParams) {
     pins.value = []
     Object.assign(params, next)
   })
+  // Restretch the hue window to this seed (may cross the seam differently than
+  // the palette the editor first opened on).
+  windows.value.hue = hueWindow(next.hue)
 }
 
 // While dragging, a global class turns on short color transitions so the
@@ -440,7 +465,12 @@ function onDragEnd() {
   if (!effectsDirty.value) {
     seedBase = structuredClone(toRaw(params))
   }
+  // applyReactive reconciles AND clears the inline preview vars, but only the
+  // active ramp takes that path — an inactive alias (edited before its first
+  // apply) still set preview vars during the drag, so clear them directly or
+  // they shadow the reactive <style> for this ramp.
   if (active.value) applyReactive()
+  else clearCssomPreview()
 }
 
 onUnmounted(() => {
@@ -473,8 +503,15 @@ function seedFromCurrent() {
 // throttled applies (the callback runs queued, after any sync flag reset).
 watch(() => paletteParams.value[props.alias], (value) => {
   if (!value || !('lightness' in value)) return
+  // Echo guard: skip only when curves AND pins AND stop density all already
+  // match. Comparing curves alone would swallow an external change that moved
+  // just a pin or toggled fine stops (undo/redo of a pin-only edit), leaving
+  // the editor showing stale pins over correct curves.
   const effective = applyPaletteEffects(pickCurves(value), value.effects, value.amount)
-  if (JSON.stringify(effective) === JSON.stringify(toRaw(params))) return
+  const curvesMatch = JSON.stringify(effective) === JSON.stringify(toRaw(params))
+  const pinsMatch = JSON.stringify(value.pins ?? []) === JSON.stringify(toRaw(pins.value))
+  const fineMatch = (value.fineStops ?? false) === fineStops.value
+  if (curvesMatch && pinsMatch && fineMatch) return
 
   seedBase = pickCurves(value)
   normalizeHue(seedBase)
@@ -484,10 +521,12 @@ watch(() => paletteParams.value[props.alias], (value) => {
   ignoreUpdates(() => {
     Object.assign(effects, PALETTE_EFFECT_DEFAULTS, value.effects ?? {})
     effectAmount.value = value.amount ?? 100
-    pins.value = value.pins ? structuredClone(toRaw(value.pins)) : []
+    pins.value = value.pins ? plainPins(value.pins) : []
     fineStops.value = value.fineStops ?? false
     Object.assign(params, applyPaletteEffects(seedBase, effects, effectAmount.value))
   })
+  // A restored curve can cross the hue seam elsewhere — refit the window too.
+  windows.value.hue = hueWindow(toRaw(params).hue)
 })
 
 // Follow the selected palette so opening the editor starts from the curves of
diff --git a/docs/app/components/theme-studio/ThemeStudioSection.vue b/docs/app/components/theme-studio/ThemeStudioSection.vue
index 2b6e89556f..789335bf8f 100644
--- a/docs/app/components/theme-studio/ThemeStudioSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSection.vue
@@ -50,16 +50,18 @@ const open = ref(props.defaultOpen)
         class="justify-start flex-1"
       />
 
-      <UButton
-        v-if="helpTo"
-        :to="helpTo"
-        size="sm"
-        color="neutral"
-        variant="ghost"
-        icon="i-lucide-help-circle"
-        aria-label="About this setting"
-        @click.stop
-      />
+      <UTooltip text="Docs">
+        <UButton
+          v-if="helpTo"
+          :to="helpTo"
+          size="sm"
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-help-circle"
+          aria-label="Documentation for this setting"
+          @click.stop
+        />
+      </UTooltip>
 
       <UTooltip v-if="sectionKey" :text="dirty ? 'Reset to preset' : 'Matches the preset'">
         <UButton
diff --git a/docs/app/components/theme-studio/ThemeStudioViewA11y.vue b/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
index 3535b097b9..d18056e7b6 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
@@ -36,7 +36,7 @@ const SOLIDS = FOREGROUNDS.slice(5)
 interface Cell {
   fg: string
   bg: string
-  ratio: number
+  ratio: number | null
 }
 
 const matrix = ref<Cell[][]>([])
@@ -97,12 +97,19 @@ watch([() => colorMode.value, () => ({ ...appConfig.ui.colors }), cssVariablesDa
 onMounted(compute)
 onUnmounted(() => cancelAnimationFrame(pending))
 
-function level(ratio: number): { label: string, color: 'success' | 'warning' | 'error' } {
+function level(ratio: number | null): { label: string, color: 'success' | 'warning' | 'error' | 'neutral' } {
+  // Unparseable color — signal unknown rather than a fabricated pass/fail.
+  if (ratio === null) return { label: 'Unknown', color: 'neutral' }
   if (ratio >= 7) return { label: 'AAA', color: 'success' }
   if (ratio >= 4.5) return { label: 'AA', color: 'success' }
   if (ratio >= 3) return { label: 'AA18', color: 'warning' }
   return { label: 'Fail', color: 'error' }
 }
+
+/** Ratio display: numeric to 1 decimal, or an em dash when unmeasurable. */
+function formatRatio(ratio: number | null): string {
+  return ratio === null ? '—' : ratio.toFixed(1)
+}
 </script>
 
 <template>
@@ -141,7 +148,7 @@ function level(ratio: number): { label: string, color: 'success' | 'warning' | '
                     <span class="font-semibold" :style="{ color: matrix[row][col].fg }">Aa</span>
                     <span class="flex items-center gap-1.5">
                       <span class="tabular-nums font-mono opacity-80" :style="{ color: matrix[row][col].fg }">
-                        {{ matrix[row][col].ratio.toFixed(1) }}
+                        {{ formatRatio(matrix[row][col].ratio) }}
                       </span>
                       <UBadge :label="level(matrix[row][col].ratio).label" :color="level(matrix[row][col].ratio).color" variant="subtle" size="sm" />
                     </span>
@@ -171,7 +178,7 @@ function level(ratio: number): { label: string, color: 'success' | 'warning' | '
             <span class="text-xs font-semibold" :style="{ color: cell.fg }">{{ SOLIDS[index]!.label }}</span>
             <span class="flex items-center gap-1.5">
               <span class="text-xs tabular-nums font-mono opacity-80" :style="{ color: cell.fg }">
-                {{ cell.ratio.toFixed(1) }}
+                {{ formatRatio(cell.ratio) }}
               </span>
               <UBadge :label="level(cell.ratio).label" :color="level(cell.ratio).color" variant="solid" size="sm" />
             </span>
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 8e6211d92b..185e887964 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -301,7 +301,12 @@ export function useTheme() {
   const spacingStyle = computed(() => _spacing.value !== 0.25 ? `:root { --spacing: ${_spacing.value}rem; }` : ':root {}')
   const blackAsPrimaryStyle = computed(() => _blackAsPrimary.value ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
   const fontStyle = computed(() => {
-    const parts = [`:root { --font-sans: '${_font.value}', sans-serif; }`]
+    // _font/heading.font hydrate straight from localStorage (useLocalStorage,
+    // no read-time validation) and land in this <style> innerHTML — re-assert
+    // SAFE_NAME at the sink so a tampered name can't break out of the quoted
+    // string, exactly as the SSR FOUC scripts do.
+    const safeFont = SAFE_NAME.test(_font.value) ? _font.value : 'Public Sans'
+    const parts = [`:root { --font-sans: '${safeFont}', sans-serif; }`]
     const prefs = fontPrefs.value
     const weights = prefs.weights || {}
     const weightVars = (Object.keys(weights) as Array<keyof typeof weights>)
@@ -321,7 +326,7 @@ export function useTheme() {
     const heading = prefs.heading
     if (heading && Object.keys(heading).length) {
       const rules: string[] = []
-      if (heading.font) rules.push(`font-family: '${heading.font}', sans-serif;`)
+      if (heading.font && SAFE_NAME.test(heading.font)) rules.push(`font-family: '${heading.font}', sans-serif;`)
       if (heading.weight !== undefined) rules.push(`font-weight: ${heading.weight};`)
       if (heading.uppercase) rules.push('text-transform: uppercase;')
       if (heading.italic) rules.push('font-style: italic;')
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index e5ab9d3a77..71eedbd10d 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,6 +1,6 @@
 import colors from 'tailwindcss/colors'
 import { THEME_STATE_KEYS, THEME_STORAGE_KEYS } from '../utils/theme-keys'
-import { presets, docToSettings, isDefaultTheme, generatePalette, applyPaletteEffects, isDefaultEffects, parseCssColor, styleComponents, styleTokens, sectionFingerprint, mergeSection, canonicalTokenShades, TOKEN_SHADE_TARGETS, SECTION_GROUPS, DEFAULT_COLORS, SHADES } from '../utils/theme-engine'
+import { presets, docToSettings, isDefaultTheme, generatePalette, applyPaletteEffects, isDefaultEffects, parseCssColor, styleComponents, styleTokens, sectionFingerprint, mergeSection, canonicalTokenShades, TOKEN_SHADE_TARGETS, SECTION_GROUPS, DEFAULT_COLORS, SHADES_FINE } from '../utils/theme-engine'
 import type { SectionKey, ThemeDoc, ThemePreset, PaletteCurveParams, PaletteEffects, StoredPaletteParams, PalettePin, StyleOptions, Shade, ShadeStop, ColorAlias, TokenRamp } from '../utils/theme-engine'
 import { readLocalStorage } from '../utils/theme'
 
@@ -95,10 +95,17 @@ export function useThemeStudio() {
           entry.amount
         ), entry.fineStops, entry.pins)
         const name = customPaletteName(alias)
+        // The alias mapping and neutral remaps usually survive the reload
+        // intact — only the derived ramp (customColors) loses its restore
+        // race. Re-sending an alias that's already correct routes through the
+        // primary/neutral computed setters, which reset black-as-primary,
+        // rewrite localStorage and fire a spurious "Theme Changed" event every
+        // single load. Heal the ramp always; touch the alias only if it drifted.
+        const aliasAlreadySet = (appConfig.ui.colors as Record<string, string>)[alias] === name
         theme.applyThemeSettings({
           customColors: { [name]: ramp },
-          [alias]: name,
-          ...(alias === 'neutral' ? { cssVariables: unownedNeutralRemaps() } : {})
+          ...(aliasAlreadySet ? {} : { [alias]: name }),
+          ...(alias === 'neutral' && !aliasAlreadySet ? { cssVariables: unownedNeutralRemaps() } : {})
         }, { track: false })
       }
     })
@@ -159,17 +166,23 @@ export function useThemeStudio() {
     return (appConfig.ui.colors as Record<string, string>)[alias] === customPaletteName(alias)
   }
 
-  /** All 11 shades of a named palette as oklch — tailwind's JS values first, CSS variables as fallback. */
+  /**
+   * Every defined shade of a named palette as oklch — tailwind's JS values
+   * first, CSS variables as fallback. Sampled across the fine stop set so an
+   * imported ramp that carries midpoints (150–850) is read whole; a standard
+   * 11-stop ramp simply has no midpoint vars and those drop out. The editor
+   * uses the midpoints' presence to re-detect fine stops on seed.
+   */
   function paletteShades(name: string): Partial<Record<Shade, string>> | undefined {
     const tailwind = (colors as Record<string, any>)[name]
     if (tailwind && typeof tailwind === 'object') {
-      return Object.fromEntries(SHADES.map(shade => [shade, parseCssColor(tailwind[shade])]).filter(([, color]) => color))
+      return Object.fromEntries(SHADES_FINE.map(shade => [shade, parseCssColor(tailwind[shade])]).filter(([, color]) => color))
     }
 
     if (import.meta.client) {
       const styles = getComputedStyle(document.documentElement)
       const cssName = name === 'neutral' ? 'old-neutral' : name
-      const entries = SHADES
+      const entries = SHADES_FINE
         .map(shade => [shade, parseCssColor(styles.getPropertyValue(`--color-${cssName}-${shade}`))] as const)
         .filter(([, color]) => color)
       if (entries.length >= 2) {
@@ -459,7 +472,18 @@ export function useThemeStudio() {
     // applyDoc resets everything first, which clears the persisted preset —
     // but a section reset moves TOWARD the baseline; keep it
     const preserved = activePreset.value
+    // applyDoc → resetTheme also wipes the editor curves (paletteParams), but a
+    // section reset only touches its own slice: resetting typography must not
+    // discard the curves behind an untouched custom colour ramp (the baked
+    // shades survive in the doc, so the curves have to as well, or the editor
+    // silently refits an approximation). Snapshot now, then restore the curves
+    // for every alias whose custom ramp outlived the reset (a reset colour
+    // section drops back to a stock name, so isCustomPalette filters it out).
+    const preservedPp = JSON.parse(JSON.stringify(paletteParams.value)) as typeof paletteParams.value
     applyDoc(mergeSection(plain, baselineDoc.value, key))
+    setPaletteParams(Object.fromEntries(
+      Object.entries(preservedPp).filter(([alias]) => isCustomPalette(alias))
+    ))
     setActivePreset(preserved)
     track('Theme Section Reset', { section: key })
   }
diff --git a/docs/app/plugins/theme.ts b/docs/app/plugins/theme.ts
index d13f58bad2..3fe8e961c9 100644
--- a/docs/app/plugins/theme.ts
+++ b/docs/app/plugins/theme.ts
@@ -128,9 +128,13 @@ export default defineNuxtPlugin({
           tagPriority: -1
         }, {
           innerHTML: `
-            if (localStorage.getItem('nuxt-ui-radius')) {
-              var el = document.querySelector('style#nuxt-ui-radius');
-              if (el) { el.innerHTML = ':root { --ui-radius: ' + localStorage.getItem('nuxt-ui-radius') + 'rem; }'; }
+            var rRaw = localStorage.getItem('nuxt-ui-radius');
+            if (rRaw) {
+              var rNum = parseFloat(rRaw);
+              if (isFinite(rNum) && rNum >= 0) {
+                var el = document.querySelector('style#nuxt-ui-radius');
+                if (el) { el.textContent = ':root { --ui-radius: ' + rNum + 'rem; }'; }
+              }
             }
           `.replace(/\s+/g, ' '),
           type: 'text/javascript',
@@ -139,13 +143,21 @@ export default defineNuxtPlugin({
           innerHTML: `
             var fsRaw = localStorage.getItem('nuxt-ui-font-size');
             if (fsRaw && fsRaw !== '16') {
-              var fsEl = document.querySelector('style#nuxt-ui-font-size');
-              if (fsEl) { fsEl.innerHTML = 'html { font-size: ' + fsRaw + 'px; }'; }
+              var fsNum = parseFloat(fsRaw);
+              if (isFinite(fsNum)) {
+                fsNum = Math.min(20, Math.max(12, fsNum));
+                var fsEl = document.querySelector('style#nuxt-ui-font-size');
+                if (fsEl) { fsEl.textContent = 'html { font-size: ' + fsNum + 'px; }'; }
+              }
             }
             var spRaw = localStorage.getItem('nuxt-ui-spacing');
             if (spRaw && spRaw !== '0.25') {
-              var spEl = document.querySelector('style#nuxt-ui-spacing');
-              if (spEl) { spEl.innerHTML = ':root { --spacing: ' + spRaw + 'rem; }'; }
+              var spNum = parseFloat(spRaw);
+              if (isFinite(spNum)) {
+                spNum = Math.min(0.5, Math.max(0.125, spNum));
+                var spEl = document.querySelector('style#nuxt-ui-spacing');
+                if (spEl) { spEl.textContent = ':root { --spacing: ' + spNum + 'rem; }'; }
+              }
             }
           `.replace(/\s+/g, ' '),
           type: 'text/javascript',
@@ -166,37 +178,47 @@ export default defineNuxtPlugin({
         }, {
           innerHTML: [
             `(function() {`,
-            `var font = localStorage.getItem('nuxt-ui-font') || 'Public Sans';`,
+            `var SAFE = /^[\\w -]{1,50}$/;`,
+            `function num(v, lo, hi) { var n = parseFloat(v); return isFinite(n) ? Math.min(hi, Math.max(lo, n)) : undefined; }`,
+            `var fontRaw = localStorage.getItem('nuxt-ui-font') || 'Public Sans';`,
+            `var font = SAFE.test(fontRaw) ? fontRaw : 'Public Sans';`,
             `var prefs = {};`,
             `try { prefs = JSON.parse(localStorage.getItem('nuxt-ui-font-prefs') || '{}'); } catch(e) {}`,
             `var css = ':root { --font-sans: \\'' + font + '\\', sans-serif; }';`,
             `var w = prefs.weights || {};`,
-            `var wVars = Object.keys(w).map(function(s) { return '--font-weight-' + s + ': ' + w[s] + ';'; }).join(' ');`,
+            `var wVars = Object.keys(w).map(function(s) { var n = num(w[s], 100, 900); return (SAFE.test(s) && n !== undefined) ? '--font-weight-' + s + ': ' + n + ';' : ''; }).filter(Boolean).join(' ');`,
             `if (wVars) { css += ' :root { ' + wVars + ' }'; }`,
             `var bodyRules = '';`,
-            `if (w.normal) { bodyRules += 'font-weight: ' + w.normal + '; '; }`,
+            `var wn = num(w.normal, 100, 900);`,
+            `if (wn !== undefined) { bodyRules += 'font-weight: ' + wn + '; '; }`,
             `if (prefs.uppercase) { bodyRules += 'text-transform: uppercase; '; }`,
             `if (prefs.italic) { bodyRules += 'font-style: italic; '; }`,
-            `if (prefs.letterSpacing) { bodyRules += 'letter-spacing: ' + prefs.letterSpacing + 'em; '; }`,
-            `if (prefs.lineHeight) { bodyRules += 'line-height: ' + prefs.lineHeight + '; '; }`,
+            `var ls = num(prefs.letterSpacing, -0.2, 1);`,
+            `if (ls !== undefined && ls !== 0) { bodyRules += 'letter-spacing: ' + ls + 'em; '; }`,
+            `var lh = num(prefs.lineHeight, 0.8, 3);`,
+            `if (lh !== undefined) { bodyRules += 'line-height: ' + lh + '; '; }`,
             `if (bodyRules) { css += ' body { ' + bodyRules + '}'; }`,
             `var h = prefs.heading || {};`,
-            `if (h.font || h.weight || h.uppercase || h.italic || h.underline || h.letterSpacing || h.lineHeight) {`,
+            `var hFont = (h.font && SAFE.test(h.font)) ? h.font : undefined;`,
+            `var hWeight = num(h.weight, 100, 900);`,
+            `var hLs = num(h.letterSpacing, -0.2, 1);`,
+            `var hLh = num(h.lineHeight, 0.8, 3);`,
+            `if (hFont || hWeight !== undefined || h.uppercase || h.italic || h.underline || (hLs !== undefined && hLs !== 0) || hLh !== undefined) {`,
             `var rules = '';`,
-            `if (h.font) { rules += 'font-family: \\'' + h.font + '\\', sans-serif; '; }`,
-            `if (h.weight) { rules += 'font-weight: ' + h.weight + '; '; }`,
+            `if (hFont) { rules += 'font-family: \\'' + hFont + '\\', sans-serif; '; }`,
+            `if (hWeight !== undefined) { rules += 'font-weight: ' + hWeight + '; '; }`,
             `if (h.uppercase) { rules += 'text-transform: uppercase; '; }`,
             `if (h.italic) { rules += 'font-style: italic; '; }`,
             `if (h.underline) { rules += 'text-decoration: underline; '; }`,
-            `if (h.letterSpacing) { rules += 'letter-spacing: ' + h.letterSpacing + 'em; '; }`,
-            `if (h.lineHeight) { rules += 'line-height: ' + h.lineHeight + '; '; }`,
+            `if (hLs !== undefined && hLs !== 0) { rules += 'letter-spacing: ' + hLs + 'em; '; }`,
+            `if (hLh !== undefined) { rules += 'line-height: ' + hLh + '; '; }`,
             `css += ' h1, h2, h3, h4, h5, h6 { ' + rules + '}';`,
             `}`,
             `if (localStorage.getItem('nuxt-ui-font') || Object.keys(prefs).length) {`,
             `var fontEl = document.querySelector('style#nuxt-ui-font');`,
-            `if (fontEl) { fontEl.innerHTML = css; }`,
+            `if (fontEl) { fontEl.textContent = css; }`,
             `}`,
-            `[font, h.font].forEach(function(name) {`,
+            `[font, hFont].forEach(function(name) {`,
             `if (!name || name === 'Public Sans') return;`,
             `var id = 'font-' + name.toLowerCase().replace(/\\s+/g, '-');`,
             `if (document.getElementById(id)) return;`,
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index b14bfbbb4f..fd0a1d8ccd 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -180,6 +180,23 @@ export function generateCSS(doc: ThemeDoc): string {
   return lines.join('\n')
 }
 
+/**
+ * Serialize a plain object to JS/TS object-literal source: unquote only keys
+ * that are valid identifiers (so dashed keys like `ui-radius` stay quoted and
+ * valid), and prefer single-quoted strings — but keep double quotes on any
+ * string containing an apostrophe, so a value like `Cooper's` isn't corrupted.
+ */
+function toObjectSource(value: Record<string, any>): string {
+  return JSON.stringify(value, null, 2)
+    // Only identifier-safe keys may drop their quotes.
+    .replace(/"([a-z_$][\w$]*)":/gi, '$1:')
+    // Convert the remaining double-quoted strings (values, dashed keys) to
+    // single quotes, but leave any that contain a single quote untouched —
+    // double quotes are valid JS and don't need escaping there.
+    .replace(/"((?:[^"\\]|\\.)*)"/g, (match, body: string) =>
+      body.includes('\'') ? match : `'${body}'`)
+}
+
 /** The `app.config.ts` / `vite.config.ts` side of the export. */
 export function generateConfig(doc: ThemeDoc, framework: string = 'nuxt'): string {
   const config: Record<string, any> = {}
@@ -204,15 +221,11 @@ export function generateConfig(doc: ThemeDoc, framework: string = 'nuxt'): strin
     Object.assign(config.ui, componentOverrides)
   }
 
-  const configString = JSON.stringify(config, null, 2)
-    .replace(/"([^"]+)":/g, '$1:')
-    .replace(/"/g, '\'')
+  const configString = toObjectSource(config)
 
   if (framework === 'vue') {
     const pluginConfig = config.ui
-      ? JSON.stringify({ ui: config.ui }, null, 2)
-          .replace(/"([^"]+)":/g, '$1:')
-          .replace(/"/g, '\'')
+      ? toObjectSource({ ui: config.ui })
       : '{}'
     return [
       'import { defineConfig } from \'vite\'',
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index 8a8ea158dd..05fb25cb1c 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -437,7 +437,16 @@ function parseObjectLiteral(source: string, start: number): { value: any, end: n
         ws()
         if (source[i] !== ':') throw new Error(`Expected ':' at ${i}`)
         i++
-        obj[key] = parseValue()
+        // Define rather than assign: a pasted key named `__proto__`,
+        // `constructor`, or `prototype` must land as an own data property,
+        // not walk the setter and mutate the prototype (same intent as the
+        // apply-path guards elsewhere).
+        Object.defineProperty(obj, key, {
+          value: parseValue(),
+          writable: true,
+          enumerable: true,
+          configurable: true
+        })
         ws()
       }
       i++
@@ -473,7 +482,12 @@ function parseObjectLiteral(source: string, start: number): { value: any, end: n
     i++
     let out = ''
     while (i < source.length && source[i] !== quote) {
-      if (source[i] === '\\') i++
+      if (source[i] === '\\') {
+        i++
+        // A backslash at EOF has nothing to escape — stop before appending
+        // the out-of-range `source[i]` (which stringifies to "undefined").
+        if (i >= source.length) break
+      }
       out += source[i]
       i++
     }
@@ -568,7 +582,13 @@ function detectBorder(components: Record<string, any>): Pick<StyleOptions, 'bord
 
   const widths = texts.flatMap(text => [...text.matchAll(/(?:^|\s)(?:sm:)?ring-(\d)(?:\s|$)/g)].map(match => Number(match[1])))
   if (!widths.length) return {}
-  const width = widths[0]!
+  // A mixed-width paste (ring-1 here, ring-3 there) has no single correct
+  // answer, and picking the first by object-iteration order makes the result
+  // arbitrary. Pick the most common width — the dominant treatment — and
+  // break ties toward the larger width, so the choice is deterministic.
+  const counts = new Map<number, number>()
+  for (const value of widths) counts.set(value, (counts.get(value) ?? 0) + 1)
+  const width = [...counts.entries()].sort((a, b) => b[1] - a[1] || b[0] - a[0])[0]![0]
   if (width === 0) return { border: 'none' }
 
   return {
@@ -612,7 +632,12 @@ function detectInnerShadow(components: Record<string, any>): StyleOptions['inner
  * to the default-width form so subtraction still recognizes them.
  */
 function normalizeLegacyWidths(components: Record<string, any>) {
-  const WIDTH_TOKEN = /^(?:sm:)?(?:ring|divide-y|border(?:-[tbesxy])?)(?:-[0-4])?$|^lg:not-last:border-e(?:-[0-4])?$/
+  // Only width-bearing legacy fragments are noise (ring-2, border-b-3,
+  // divide-y-2 …); the width digit is REQUIRED. A bare presence token
+  // (`border`, `ring`, `divide-y`, `lg:not-last:border-e`) is a real class —
+  // the new style axis never regenerates it — so scrubbing it would corrupt a
+  // genuine divider/border rather than just strip a migrated width.
+  const WIDTH_TOKEN = /^(?:sm:)?(?:ring|divide-y|border(?:-[tbesxy])?)-[0-4]$|^lg:not-last:border-e-[0-4]$/
   const scrub = (classes: unknown): string | undefined => {
     if (typeof classes !== 'string') return undefined
     const tokens = classes.split(/\s+/).flatMap((token) => {
diff --git a/docs/app/utils/theme-engine/oklch.ts b/docs/app/utils/theme-engine/oklch.ts
index 3cef01dbf1..3c37f830de 100644
--- a/docs/app/utils/theme-engine/oklch.ts
+++ b/docs/app/utils/theme-engine/oklch.ts
@@ -168,10 +168,17 @@ function luminance(color: Oklch): number {
   return 0.2126 * r + 0.7152 * g + 0.0722 * b
 }
 
-/** WCAG 2.x contrast ratio between two CSS colors (hex or oklch), 1–21. */
-export function contrastRatio(colorA: string, colorB: string): number {
-  const la = luminance(parseColor(colorA) || { l: 0, c: 0, h: 0 })
-  const lb = luminance(parseColor(colorB) || { l: 0, c: 0, h: 0 })
+/**
+ * WCAG 2.x contrast ratio between two CSS colors (hex or oklch), 1–21.
+ * Returns `null` when either input is unparseable, so callers can signal an
+ * unknown/unmeasurable result rather than a fabricated ratio.
+ */
+export function contrastRatio(colorA: string, colorB: string): number | null {
+  const a = parseColor(colorA)
+  const b = parseColor(colorB)
+  if (!a || !b) return null
+  const la = luminance(a)
+  const lb = luminance(b)
   const [lighter, darker] = la > lb ? [la, lb] : [lb, la]
   return (lighter + 0.05) / (darker + 0.05)
 }
diff --git a/docs/app/utils/theme-engine/palette.ts b/docs/app/utils/theme-engine/palette.ts
index 516d91b189..81d8b6eb37 100644
--- a/docs/app/utils/theme-engine/palette.ts
+++ b/docs/app/utils/theme-engine/palette.ts
@@ -80,14 +80,19 @@ export interface PalettePin {
 /** A persisted palette: the base curves plus the modifier lens over them. */
 export type StoredPaletteParams = PaletteCurveParams & { effects?: PaletteEffects, amount?: number, fineStops?: boolean, pins?: PalettePin[] }
 
-// Width (in ramp x, 0–1) of each pin's influence. A pinned stop is hit
-// exactly; neighbours bend smoothly toward it and the effect decays to ~0 by
-// ~2σ away, so distant stops keep following the base curve. Narrow enough to
-// feel local, wide enough that the ramp stays smooth (no kink at the pin).
-const PIN_KERNEL_SIGMA = 0.2
-
-function pinKernel(distance: number): number {
-  const t = distance / PIN_KERNEL_SIGMA
+// Width (in ramp x, 0–1) of each pin's influence. A pinned stop is hit exactly;
+// neighbours bend smoothly toward it and the effect decays to ~0 by ~2σ away.
+// SIGMA_MAX is the widest, smoothest kernel (single or well-separated pins).
+// But a kernel much wider than the gap between two pins makes the exact-
+// interpolation solve ill-conditioned: the weights blow up and the correction
+// overshoots — with pins a fine stop apart it swings whole neighbouring stops
+// to white. So the kernel is narrowed to the closest pin spacing (floored so it
+// never degenerates to a spike), keeping the solve well-conditioned and local.
+const PIN_KERNEL_SIGMA_MAX = 0.2
+const PIN_KERNEL_SIGMA_MIN = 0.04
+
+function pinKernel(distance: number, sigma: number): number {
+  const t = distance / sigma
   return Math.exp(-t * t)
 }
 
@@ -125,7 +130,34 @@ function solveLinear(a: number[][], b: number[]): number[] {
  */
 function pinField(pins: PalettePin[], base: (x: number) => { l: number, c: number, h: number }) {
   const xs = pins.map(pin => shadeX(pin.shade))
-  const matrix = xs.map(xi => xs.map(xj => pinKernel(Math.abs(xi - xj))))
+
+  // Kernel width: the closest pin pair, clamped. Infinity (a single pin) → MAX.
+  let minSpacing = Infinity
+  for (let i = 0; i < xs.length; i++) {
+    for (let j = i + 1; j < xs.length; j++) {
+      minSpacing = Math.min(minSpacing, Math.abs(xs[i]! - xs[j]!))
+    }
+  }
+  const sigma = Math.min(PIN_KERNEL_SIGMA_MAX, Math.max(PIN_KERNEL_SIGMA_MIN, minSpacing))
+
+  const matrix = xs.map(xi => xs.map(xj => pinKernel(Math.abs(xi - xj), sigma)))
+
+  // Hue is cyclic. Unwrapping each target independently to the base's nearest
+  // arc flips direction for pins near the base's antipode, sending the ramp the
+  // long way round. Instead chain-unwrap the targets in x order (each within
+  // ±180° of the previous), anchored to the base hue at the first pin, so a run
+  // of pins takes the short way *between themselves*.
+  const order = xs.map((_, i) => i).sort((i, j) => xs[i]! - xs[j]!)
+  const hueTarget: number[] = Array.from({ length: pins.length })
+  let prevHue = base(xs[order[0]!]!).h
+  for (const i of order) {
+    let h = pins[i]!.h
+    while (h - prevHue > 180) h -= 360
+    while (h - prevHue < -180) h += 360
+    hueTarget[i] = h
+    prevHue = h
+  }
+
   const deltaL: number[] = []
   const deltaC: number[] = []
   const deltaH: number[] = []
@@ -133,7 +165,7 @@ function pinField(pins: PalettePin[], base: (x: number) => { l: number, c: numbe
     const b = base(xs[i]!)
     deltaL.push(pin.l - b.l)
     deltaC.push(pin.c - b.c)
-    deltaH.push(((((pin.h - b.h) % 360) + 540) % 360) - 180)
+    deltaH.push(hueTarget[i]! - b.h)
   })
   const wl = solveLinear(matrix, deltaL)
   const wc = solveLinear(matrix, deltaC)
@@ -143,7 +175,7 @@ function pinField(pins: PalettePin[], base: (x: number) => { l: number, c: numbe
     let dc = 0
     let dh = 0
     for (let j = 0; j < xs.length; j++) {
-      const k = pinKernel(Math.abs(x - xs[j]!))
+      const k = pinKernel(Math.abs(x - xs[j]!), sigma)
       dl += wl[j]! * k
       dc += wc[j]! * k
       dh += wh[j]! * k
diff --git a/docs/app/utils/theme-engine/resolve.ts b/docs/app/utils/theme-engine/resolve.ts
index 6c74f36fbc..270289d57a 100644
--- a/docs/app/utils/theme-engine/resolve.ts
+++ b/docs/app/utils/theme-engine/resolve.ts
@@ -58,9 +58,21 @@ export const LIBRARY_TOKEN_DEFAULTS = {
   }
 } as const
 
-const UI_COLOR_RE = /^var\(--ui-color-([a-z]+)-(\d{2,3})\)$/
+// Standard stops ride the `--ui-color-<alias>-<shade>` indirection; the
+// 100-step midpoints (150…850) have none — the runtime colours plugin only
+// generates the 11 standard stops — so shadeRef emits them against the custom
+// ramp's `--color-custom-<alias>-<mid>` variable instead. Both forms name the
+// same ramp in the same capture position, so a single alternation parses both
+// and midpoints promote back to governed shades exactly like standard stops.
+const UI_COLOR_RE = /^var\(--(?:ui-color|color-custom)-([a-z]+)-(\d{2,3})\)$/
 
-/** Parse a `var(--ui-color-<alias>-<shade>)` reference, the one format the studio emits. */
+/**
+ * Parse a shade reference the studio emits — both the standard-stop
+ * `var(--ui-color-<alias>-<shade>)` form and the midpoint
+ * `var(--color-custom-<alias>-<mid>)` form — to `{ alias, shade }`. The alias
+ * is the ramp name in either case; callers apply their own ownership check
+ * against it, so a ref on a foreign ramp is parsed but not adopted.
+ */
 export function parseUiColorRef(value?: string): { alias: string, shade: number } | undefined {
   const match = value?.match(UI_COLOR_RE)
   return match ? { alias: match[1]!, shade: Number(match[2]) } : undefined
diff --git a/test/utils/theme-palette.spec.ts b/test/utils/theme-palette.spec.ts
index 2c2c47f290..2431857250 100644
--- a/test/utils/theme-palette.spec.ts
+++ b/test/utils/theme-palette.spec.ts
@@ -153,6 +153,50 @@ describe('generatePalette', () => {
     expect(palette[300]).toBe(formatOklch(clampToGamut(a)))
     expect(palette[700]).toBe(formatOklch(clampToGamut(b)))
   })
+
+  it('keeps clustered opposing pins from overshooting neighbours', () => {
+    // Two adjacent fine stops pulled in opposite directions used to blow the
+    // Gaussian weights up so the unpinned neighbours swung ~0.10 L. The
+    // spacing-adaptive sigma must keep each pin's influence local.
+    const bare = generatePalette(CURVE_DEFAULTS, true)
+    const l500 = parseColor(bare[500])!.l
+    const l550 = parseColor(bare[550])!.l
+    const pinned = generatePalette(CURVE_DEFAULTS, true, [
+      { shade: 500, l: l500 + 0.03, c: 0.05, h: 150 },
+      { shade: 550, l: l550 - 0.03, c: 0.05, h: 150 }
+    ])
+    // Neighbours a stop away should barely budge (was ~0.10 before the fix).
+    expect(Math.abs(parseColor(pinned[350])!.l - parseColor(bare[350])!.l)).toBeLessThan(0.02)
+    expect(Math.abs(parseColor(pinned[650])!.l - parseColor(bare[650])!.l)).toBeLessThan(0.02)
+  })
+
+  it('never collapses a clustered pin set to white', () => {
+    // Five alternating ±0.02 pins across 450–650 used to drive 13 of 19 stops
+    // to oklch(100% 0 0). No stop may reach full white.
+    const bare = generatePalette(CURVE_DEFAULTS, true)
+    const pins = [450, 500, 550, 600, 650].map((shade, i) => ({
+      shade: shade as Shade,
+      l: parseColor(bare[shade as Shade])!.l + (i % 2 ? -0.02 : 0.02),
+      c: 0.05,
+      h: 150
+    }))
+    const palette = generatePalette(CURVE_DEFAULTS, true, pins)
+    for (const value of Object.values(palette)) {
+      expect(value, `blown to white: ${value}`).not.toMatch(/oklch\(100(\.0+)?%/)
+    }
+  })
+
+  it('takes the short hue arc between pins on the far side of the wheel', () => {
+    // Base hue 250 with pins at hue 60 and 80 must not sweep ~340° the long
+    // way round; the unwrapped targets keep the interpolation monotonic.
+    const flatHue = { ...CURVE_DEFAULTS, hue: { y0: 250, y1: 250, p1x: 0.33, p1y: 250, p2x: 0.66, p2y: 250 } }
+    const palette = generatePalette(flatHue, false, [
+      { shade: 200, l: 0.8, c: 0.1, h: 60 },
+      { shade: 800, l: 0.4, c: 0.1, h: 80 }
+    ])
+    expect(parseColor(palette[200])!.h).toBeCloseTo(60, 0)
+    expect(parseColor(palette[800])!.h).toBeCloseTo(80, 0)
+  })
 })
 
 describe('fitPalette (work backwards from real palettes)', () => {

From f88a9c139dcf4efe366acb831f39b85d3061c708 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 25 Jul 2026 03:41:17 +0200
Subject: [PATCH 161/185] fix(theme-studio): stop stock ramps crashing the
 palette editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

paletteShades sampled the fine stop set against tailwind's JS colors, but a
stock ramp has no midpoints (150…850) — those lookups are undefined, and
parseColor threw on .trim() before the filter could drop them. The throw blew
up seedFromCurrent's watcher, so opening the editor on a default (stock) colour
failed and later applies stopped landing. Skip absent shades, and make
parseColor treat any non-string as unparseable rather than throwing.

Also fixes the contrastRatio test now that it returns number | null.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/app/composables/useThemeStudio.ts | 10 +++++++++-
 docs/app/utils/theme-engine/oklch.ts   |  4 ++++
 test/utils/theme-palette.spec.ts       | 11 ++++++++++-
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 71eedbd10d..afeb745ed5 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -176,7 +176,15 @@ export function useThemeStudio() {
   function paletteShades(name: string): Partial<Record<Shade, string>> | undefined {
     const tailwind = (colors as Record<string, any>)[name]
     if (tailwind && typeof tailwind === 'object') {
-      return Object.fromEntries(SHADES_FINE.map(shade => [shade, parseCssColor(tailwind[shade])]).filter(([, color]) => color))
+      // A stock tailwind ramp has only the 11 standard stops — its midpoints
+      // (150…850) are undefined, and parseCssColor would throw on those. Skip
+      // absent shades so a fine-set sweep degrades cleanly to the 11 present.
+      return Object.fromEntries(
+        SHADES_FINE
+          .filter(shade => tailwind[shade] != null)
+          .map(shade => [shade, parseCssColor(tailwind[shade])])
+          .filter(([, color]) => color)
+      )
     }
 
     if (import.meta.client) {
diff --git a/docs/app/utils/theme-engine/oklch.ts b/docs/app/utils/theme-engine/oklch.ts
index 3c37f830de..730da4e9e2 100644
--- a/docs/app/utils/theme-engine/oklch.ts
+++ b/docs/app/utils/theme-engine/oklch.ts
@@ -131,6 +131,10 @@ export function formatOklch(color: Oklch): string {
  * meets: hex, `oklch(…)` (tailwind v4's format) and `rgb(…)`.
  */
 export function parseColor(value: string): Oklch | undefined {
+  // Callers pass raw ramp lookups (a missing tailwind midpoint, an unset CSS
+  // var) that can be undefined — treat any non-string as simply unparseable
+  // rather than throwing on .trim().
+  if (typeof value !== 'string') return undefined
   const input = value.trim()
 
   // the two keywords the theme system actually uses (library token defaults)
diff --git a/test/utils/theme-palette.spec.ts b/test/utils/theme-palette.spec.ts
index 2431857250..8988736cb3 100644
--- a/test/utils/theme-palette.spec.ts
+++ b/test/utils/theme-palette.spec.ts
@@ -64,7 +64,16 @@ describe('oklch', () => {
     expect(contrastRatio('#000000', '#ffffff')).toBeCloseTo(21, 1)
     expect(contrastRatio('#ffffff', '#ffffff')).toBeCloseTo(1, 2)
     // symmetric
-    expect(contrastRatio('#1DB954', '#ffffff')).toBeCloseTo(contrastRatio('#ffffff', '#1DB954'), 5)
+    expect(contrastRatio('#1DB954', '#ffffff')).toBeCloseTo(contrastRatio('#ffffff', '#1DB954')!, 5)
+  })
+
+  it('treats unparseable input as undefined instead of throwing', () => {
+    // Ramp lookups feed raw values in — a missing tailwind midpoint or unset
+    // CSS var is undefined, and must degrade to undefined, never throw.
+    expect(() => parseColor(undefined as unknown as string)).not.toThrow()
+    expect(parseColor(undefined as unknown as string)).toBeUndefined()
+    expect(parseColor('not a color')).toBeUndefined()
+    expect(parseCssColor(undefined as unknown as string)).toBeUndefined()
   })
 })
 

From 217d9e485ef854527db019373785fa416bb4d7d4 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 25 Jul 2026 03:52:28 +0200
Subject: [PATCH 162/185] refactor(theme-studio): improve swatch detail
 handling and animation

- Introduced a lastDetail ref to hold the last active swatch details after it goes inactive, preventing placeholder flashes during popover animations.
---
 .../theme-studio/ThemeStudioPaletteEditor.vue       | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 19c4560b5e..9999052638 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -180,11 +180,14 @@ const activeSwatch = computed(() => {
   }
 })
 
-// The single popover stays mounted and toggles via `:open` (cheap — one Reka
-// instance, not 19). This always-defined mirror lets the slot template read
-// details without tripping undefined-narrowing in Vue's slot scope; its
-// placeholder is never shown because the popover is closed when inactive.
-const swatchDetail = computed(() => activeSwatch.value ?? { shade: -1, oklch: '', hex: '', rgb: '', pinned: false })
+// Always-defined mirror for the slot template (avoids undefined-narrowing).
+// Holds the last real detail after the swatch goes inactive so the content
+// doesn't flash the placeholder while the popover animates closed.
+const lastDetail = ref({ shade: -1, oklch: '', hex: '', rgb: '', pinned: false })
+watch(activeSwatch, (value) => {
+  if (value) lastDetail.value = value
+})
+const swatchDetail = computed(() => activeSwatch.value ?? lastDetail.value)
 
 function onSwatchEnter(shade: number) {
   // a stuck swatch means "I'm reading/editing this one" — other swatches don't

From 91eb6594ebf465118d5076f19656600699647bc6 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 25 Jul 2026 04:42:56 +0200
Subject: [PATCH 163/185] feat(theme-studio): 25 and 10 shade intervals in the
 palette editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The stop density was a boolean (11 or 19 stops), so the ramp couldn't be
subdivided further. It's now the interval between stops — 100, 50, 25 or
10, giving 11, 19, 37 or 91 stops — carried per palette as `stopStep`.
`fineStops` is still read so palettes saved before this keep their 19.

Everything that special-cased the 150–850 midpoints now works off the
ramp's own stop set instead: the CSS variable indirection, the orphaned
token-shade snapping and the shade slider ladders. The swatch strip keeps
the height it has at 11 stops so a denser ramp only narrows the tiles, and
the pin badge takes the contrasting neutral end rather than a blend mode,
which vanished on mid-tone stops.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../theme-studio/ThemeStudioColorSection.vue  |  16 +-
 .../theme-studio/ThemeStudioCurveEditor.vue   |  12 +-
 .../theme-studio/ThemeStudioPaletteEditor.vue | 151 +++++++++++-------
 docs/app/composables/useThemeStudio.ts        |  59 +++----
 docs/app/utils/theme-engine/import.ts         |   4 +-
 docs/app/utils/theme-engine/palette.ts        |  37 ++++-
 docs/app/utils/theme-engine/resolve.ts        |  12 +-
 docs/app/utils/theme-engine/styles.ts         |  15 +-
 docs/app/utils/theme-engine/types.ts          |  52 ++++--
 9 files changed, 225 insertions(+), 133 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioColorSection.vue b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
index 152a5a995e..8737eecb88 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADE_LADDER, SHADE_LADDER_FINE, canonicalTokenShades } from '../../utils/theme-engine'
+import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADE_LADDER, SHADE_LADDERS, storedStopStep, canonicalTokenShades } from '../../utils/theme-engine'
 import type { ColorAlias, SectionKey, ShadeStop } from '../../utils/theme-engine'
 
 /**
@@ -22,11 +22,11 @@ const { style, setStyle, rampChip, baselineDoc, isCustomPalette, paletteParams }
 /** The active preset's own shade choices — what a row reset restores. */
 const baselineShades = computed(() => canonicalTokenShades(baselineDoc.value))
 
-// When this alias is a fine-stops custom palette, its tokens can pick the
-// 100-step midpoints too — the sliders (and their model mapping) span the
-// wider ladder. Stock ramps have no midpoints, so they stay on the standard 11.
-const shadeLadder = computed<readonly ShadeStop[]>(() => (isCustomPalette(props.alias) && paletteParams.value[props.alias]?.fineStops
-  ? SHADE_LADDER_FINE
+// A custom palette's tokens can pick every stop its density emits — the
+// sliders (and their model mapping) span that ladder, up to 91 stops. Stock
+// ramps only define the standard 11, so they stay on the short ladder.
+const shadeLadder = computed<readonly ShadeStop[]>(() => (isCustomPalette(props.alias)
+  ? SHADE_LADDERS[storedStopStep(paletteParams.value[props.alias])]
   : SHADE_LADDER))
 
 const title = computed(() => props.label ?? capitalize(props.alias))
@@ -45,8 +45,8 @@ function tokenShadeControl(token: string, defaults: { light: ShadeStop, dark: Sh
   const model = computed({
     get: () => {
       const value = style.value.tokenShades?.[token]?.[target] ?? defaults[target]
-      // A midpoint set while fine, then narrowed back, no longer sits on the
-      // ladder (indexOf -1) — clamp to 0 so the slider stays grabbable.
+      // A stop chosen at a finer density, then coarsened away, no longer sits
+      // on the ladder (indexOf -1) — clamp to 0 so the slider stays grabbable.
       return Math.max(0, shadeLadder.value.indexOf(value as ShadeStop))
     },
     set: (index: number) => {
diff --git a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
index 187a7e6ab3..3f47db6ee6 100644
--- a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
@@ -10,8 +10,8 @@ const props = defineProps<{
   stopColors?: string[]
   /**
    * Curve x-position (0–1) for each stop, aligned with `stopColors`. Omit for
-   * the standard 11 stops (evenly ranked); a fine ramp passes 19 with the
-   * midpoints at their true positions (150 → 0.15, not an even 19th).
+   * the standard 11 stops (evenly ranked); a denser ramp passes its stops at
+   * their true positions (150 → 0.15, not an even 19th).
    */
   stopXs?: number[]
   /** Which stops are pinned to an exact colour, aligned with `stopXs`. */
@@ -164,6 +164,10 @@ const stops = computed(() => stopXs.value.map((x, index) => {
   }
 }))
 
+// Dots track the stop spacing, or a dense ramp draws them as one fat band.
+// Capped at the radius the standard 11 stops have always used.
+const stopRadius = computed(() => Math.min(2.25, Math.max(0.9, (W - 2 * PAD) / (stops.value.length * 2.4))))
+
 const svgRef = ref<SVGSVGElement>()
 const dragging = ref<'y0' | 'y1' | 'p1' | 'p2' | null>(null)
 
@@ -319,7 +323,7 @@ onUnmounted(() => {
           v-if="stop.pinned"
           :cx="stop.cx"
           :cy="stop.cy"
-          r="4"
+          :r="stopRadius + 1.75"
           fill="none"
           class="stroke-(--ui-primary)"
           stroke-width="1.25"
@@ -327,7 +331,7 @@ onUnmounted(() => {
         <circle
           :cx="stop.cx"
           :cy="stop.cy"
-          :r="stop.pinned ? 2.5 : 2.25"
+          :r="stop.pinned ? stopRadius + 0.25 : stopRadius"
           :fill="stop.fill"
           class="stroke-(--ui-bg)"
           stroke-width="0.5"
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 9999052638..41deab9dba 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useThrottleFn, watchIgnorable } from '@vueuse/core'
-import { SHADES, SHADES_FINE, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, PALETTE_EFFECT_DEFAULTS, generatePalette, buildRampSampler, fitPalette, applyPaletteEffects, isDefaultEffects, sampleCurve, shadeX, clampToGamut, formatOklch, parseColor, oklchToRgb, rgbToHex } from '../../utils/theme-engine'
-import type { PaletteCurveParams, PaletteEffects, StoredPaletteParams, PalettePin, Shade, ColorAlias } from '../../utils/theme-engine'
+import { SHADES_ALL, SHADE_STEPS, SHADE_SETS, CURVE_DEFAULTS, NEUTRAL_CURVE_DEFAULTS, PALETTE_EFFECT_DEFAULTS, generatePalette, buildRampSampler, fitPalette, applyPaletteEffects, isDefaultEffects, sampleCurve, shadeX, storedStopStep, detectStopStep, clampToGamut, formatOklch, parseColor, oklchToRgb, rgbToHex } from '../../utils/theme-engine'
+import type { PaletteCurveParams, PaletteEffects, StoredPaletteParams, PalettePin, Shade, ShadeStep, ColorAlias } from '../../utils/theme-engine'
 
 const props = defineProps<{
   alias: ColorAlias
@@ -45,26 +45,41 @@ const stored = paletteParams.value[props.alias]
 const effects = reactive<PaletteEffects>({ ...PALETTE_EFFECT_DEFAULTS, ...(stored?.effects ?? {}) })
 const effectAmount = ref(stored?.amount ?? 100)
 
-// Opt-in to the 100-step midpoints (150…850). Off keeps the standard 11
-// Tailwind stops; on generates 19 and exposes them to the shade sliders.
-const fineStops = ref(stored?.fineStops ?? false)
-const stopSet = computed(() => (fineStops.value ? SHADES_FINE : SHADES))
+// Stop density: 100 is the standard 11 Tailwind stops, finer steps subdivide
+// them into 19, 37 or 91 and expose every one to the shade sliders.
+const stopStep = ref<ShadeStep>(storedStopStep(stored))
+const stopSet = computed(() => SHADE_SETS[stopStep.value])
 
-/** The stop-count dropdown — numeric so USelect never has to bind a falsy value. */
-const stopItems = [
-  { label: '11 stops', value: SHADES.length },
-  { label: '19 stops', value: SHADES_FINE.length }
-]
-const stopCount = computed({
-  get: () => (fineStops.value ? SHADES_FINE.length : SHADES.length),
-  set: value => (fineStops.value = value === SHADES_FINE.length)
-})
+/** The density dropdown — the step itself, so it reads like the shade names. */
+const stopItems = SHADE_STEPS.map(step => ({ label: `${step}`, value: step }))
 
 // Stops locked to an exact colour — the curves bend to pass through them.
 // Keyed edits go through setPin/removePin so the array stays a plain, cloneable
 // value (it's persisted and fed to generatePalette on every apply).
 const pins = ref<PalettePin[]>(stored?.pins ? plainPins(stored.pins) : [])
-const pinnedShades = computed(() => new Set(pins.value.map(pin => pin.shade)))
+// Keyed by shade, valued by the pin's lightness: `has` still answers "pinned?"
+// while the strip's badge reads the lightness to pick a contrasting colour.
+const pinnedShades = computed(() => new Map(pins.value.map(pin => [pin.shade, pin.l])))
+
+// OKLCH L above which a stop reads as light and takes the dark badge (sRGB
+// mid-gray sits at ~0.6). Whole class strings, since tailwind's scanner only
+// sees literals — never build these by concatenation.
+const LIGHT_STOP_L = 0.62
+const PIN_BADGE_CLASS = {
+  text: { onLight: 'text-(--ui-color-neutral-950)', onDark: 'text-(--ui-color-neutral-50)' },
+  bg: { onLight: 'bg-(--ui-color-neutral-950)', onDark: 'bg-(--ui-color-neutral-50)' }
+} as const
+
+/**
+ * The badge colour for a pinned stop — the neutral end that contrasts with the
+ * stop's own colour. A blend mode can't do this: `difference` against white
+ * lands back on the stop's colour at mid lightness (badge vanishes) and inverts
+ * the hue on saturated stops.
+ */
+function pinBadgeClass(shade: number, property: 'text' | 'bg') {
+  const lightness = pinnedShades.value.get(shade as Shade) ?? 0
+  return PIN_BADGE_CLASS[property][lightness > LIGHT_STOP_L ? 'onLight' : 'onDark']
+}
 
 function setPin(shade: number, oklch: string) {
   const parsed = parseColor(oklch)
@@ -96,7 +111,7 @@ const params = reactive<PaletteCurveParams>(applyPaletteEffects(seedBase, effect
 
 const active = computed(() => isCustomPalette(props.alias))
 
-const shades = computed(() => generatePalette(params, fineStops.value, pins.value))
+const shades = computed(() => generatePalette(params, stopStep.value, pins.value))
 const stopColors = computed(() => stopSet.value.map(shade => shades.value[shade]))
 const stopXs = computed(() => stopSet.value.map(shadeX))
 const stopPinned = computed(() => stopSet.value.map(shade => pinnedShades.value.has(shade)))
@@ -124,8 +139,8 @@ const actualCurve = computed(() => {
 
 /**
  * The strip tiles — just shade + live color. Kept deliberately light (no
- * hex/rgb parse) because it recomputes on every drag frame across all 19
- * stops; the costly parse is deferred to the single open swatch below.
+ * hex/rgb parse) because it recomputes on every drag frame across every
+ * stop (up to 91); the costly parse is deferred to the single open swatch.
  */
 const swatches = computed(() => stopSet.value.map(shade => ({ shade, oklch: shades.value[shade]! })))
 
@@ -356,7 +371,7 @@ const isDragging = ref(false)
 const customName = computed(() => `custom-${props.alias}`)
 
 function applyReactive() {
-  setPaletteFromCurve(props.alias, structuredClone(seedBase), { ...effects }, effectAmount.value, fineStops.value, plainPins(pins.value))
+  setPaletteFromCurve(props.alias, structuredClone(seedBase), { ...effects }, effectAmount.value, stopStep.value, plainPins(pins.value))
   clearCssomPreview()
 }
 
@@ -373,10 +388,12 @@ function previewViaCssom() {
   for (const shade of stopSet.value) root.setProperty(`--color-${customName.value}-${shade}`, ramp[shade]!)
 }
 
+// Sweeps every stop any density can emit, not just the current set — the
+// density may have changed since the preview was written.
 function clearCssomPreview() {
   if (!import.meta.client) return
   const root = document.documentElement.style
-  for (const shade of SHADES_FINE) root.removeProperty(`--color-${customName.value}-${shade}`)
+  for (const shade of SHADES_ALL) root.removeProperty(`--color-${customName.value}-${shade}`)
 }
 
 // Throttled (not debounced) so the theme streams live while dragging a
@@ -393,27 +410,28 @@ const throttledApply = useThrottleFn(() => {
   }
 }, 60, true, true)
 
-// Narrowing to 11 stops drops midpoint pins that no longer have a tile (they'd
-// otherwise keep bending the ramp invisibly; their x still lies between
-// standard stops, so it just relaxes back to the curve there). This is a real
-// user toggle, and only reassigns pins when it actually removes one — the
-// combined watcher below covers the fineStops change and the resulting apply.
-watch(fineStops, (fine, previous) => {
-  if (fine || !previous) return
-  const kept = pins.value.filter(pin => SHADES.includes(pin.shade as typeof SHADES[number]))
+// A density change re-tiles the strip, so pins on stops the new set doesn't
+// emit lose their tile — drop them rather than let them keep bending the ramp
+// invisibly (their x still lies between stops, so it relaxes back to the curve
+// there). Note the 25 and 10 sets are siblings, not nested: moving between them
+// drops pins either way. Only reassigns when it actually removes one — the
+// combined watcher below covers the density change and the resulting apply.
+watch(stopStep, (step) => {
+  const stops = SHADE_SETS[step] as readonly number[]
+  const kept = pins.value.filter(pin => stops.includes(pin.shade))
   if (kept.length !== pins.value.length) pins.value = kept
-  // A stuck/hovered midpoint tile is gone once we narrow — drop the popover
-  // state so it can't dangle over a stop that no longer renders.
-  if (stuckShade.value !== undefined && !SHADES.includes(stuckShade.value as typeof SHADES[number])) stuckShade.value = undefined
-  if (hoveredShade.value !== undefined && !SHADES.includes(hoveredShade.value as typeof SHADES[number])) hoveredShade.value = undefined
+  // A stuck/hovered tile can be gone too — drop the popover state so it can't
+  // dangle over a stop that no longer renders.
+  if (stuckShade.value !== undefined && !stops.includes(stuckShade.value)) stuckShade.value = undefined
+  if (hoveredShade.value !== undefined && !stops.includes(hoveredShade.value)) hoveredShade.value = undefined
 })
 
-// params, pins and fineStops all reshape the ramp, so any of them changing
+// params, pins and the density all reshape the ramp, so any of them changing
 // re-applies. Programmatic writes (seeding, external sync — e.g. an undo/redo
 // restore) wrap ALL of these in ignoreUpdates so restoring state never fires a
 // spurious apply that regenerates and clobbers it; only genuine user edits
 // reach throttledApply.
-const { ignoreUpdates } = watchIgnorable([() => params, pins, fineStops], () => {
+const { ignoreUpdates } = watchIgnorable([() => params, pins, stopStep], () => {
   throttledApply()
 }, { deep: true })
 
@@ -427,8 +445,8 @@ function seed(values: PaletteCurveParams) {
   ignoreUpdates(() => {
     Object.assign(effects, PALETTE_EFFECT_DEFAULTS)
     effectAmount.value = 100
-    // A fresh fit is 11-stop; seedFromCurrent re-detects midpoints after.
-    fineStops.value = false
+    // A fresh fit is 11-stop; seedFromCurrent re-detects the density after.
+    stopStep.value = 100
     // Fresh curves own no pins — a reseed starts from the raw ramp.
     pins.value = []
     Object.assign(params, next)
@@ -494,10 +512,11 @@ function seedFromCurrent() {
   const source = paletteShades(name)
   if (source) {
     seed(fitPalette(source))
-    // A ramp that already carries midpoints (an imported fine palette) keeps
-    // them, so opening the editor doesn't silently narrow it back to 11.
-    // Ignored like the rest of the seed — following a palette must not apply.
-    if (source[150] !== undefined) ignoreUpdates(() => (fineStops.value = true))
+    // A ramp that already carries a finer density keeps it, so opening the
+    // editor doesn't silently narrow it back to 11. Ignored like the rest of
+    // the seed — following a palette must not apply.
+    const step = detectStopStep(source)
+    if (step !== 100) ignoreUpdates(() => (stopStep.value = step))
   }
 }
 
@@ -508,13 +527,13 @@ watch(() => paletteParams.value[props.alias], (value) => {
   if (!value || !('lightness' in value)) return
   // Echo guard: skip only when curves AND pins AND stop density all already
   // match. Comparing curves alone would swallow an external change that moved
-  // just a pin or toggled fine stops (undo/redo of a pin-only edit), leaving
+  // just a pin or changed the density (undo/redo of a pin-only edit), leaving
   // the editor showing stale pins over correct curves.
   const effective = applyPaletteEffects(pickCurves(value), value.effects, value.amount)
   const curvesMatch = JSON.stringify(effective) === JSON.stringify(toRaw(params))
   const pinsMatch = JSON.stringify(value.pins ?? []) === JSON.stringify(toRaw(pins.value))
-  const fineMatch = (value.fineStops ?? false) === fineStops.value
-  if (curvesMatch && pinsMatch && fineMatch) return
+  const stepMatch = storedStopStep(value) === stopStep.value
+  if (curvesMatch && pinsMatch && stepMatch) return
 
   seedBase = pickCurves(value)
   normalizeHue(seedBase)
@@ -525,7 +544,7 @@ watch(() => paletteParams.value[props.alias], (value) => {
     Object.assign(effects, PALETTE_EFFECT_DEFAULTS, value.effects ?? {})
     effectAmount.value = value.amount ?? 100
     pins.value = value.pins ? plainPins(value.pins) : []
-    fineStops.value = value.fineStops ?? false
+    stopStep.value = storedStopStep(value)
     Object.assign(params, applyPaletteEffects(seedBase, effects, effectAmount.value))
   })
   // A restored curve can cross the hue seam elsewhere — refit the window too.
@@ -604,14 +623,17 @@ function resetEffects() {
 
           <!-- Plain tiles recolor live every frame (cheap); a single popover,
                anchored to the strip and driven by the active swatch, carries
-               the details — 1 Reka instance instead of 19. A pin badge (blended
-               so it shows on any colour) marks stops locked to an exact value. -->
-          <div ref="stripRef" class="flex rounded-b-sm overflow-hidden ring ring-default">
+               the details — 1 Reka instance instead of one per stop. A pin
+               badge, in whichever neutral end contrasts with the stop, marks
+               stops locked to an exact value. The strip keeps the height it has
+               at 11 stops (hence the 11:1 ratio rather than square tiles), so a
+               denser ramp only makes the tiles narrower. -->
+          <div ref="stripRef" class="flex aspect-11/1 rounded-b-sm overflow-hidden ring ring-default">
             <button
               v-for="info in swatches"
               :key="info.shade"
               type="button"
-              class="relative aspect-square flex-1"
+              class="relative flex-1"
               :style="{ backgroundColor: info.oklch }"
               :aria-label="`Shade ${info.shade}: ${info.oklch}`"
               :aria-pressed="stuckShade === info.shade"
@@ -619,11 +641,21 @@ function resetEffects() {
               @mouseenter="onSwatchEnter(info.shade)"
               @mouseleave="onSwatchLeave"
             >
-              <UIcon
-                v-if="pinnedShades.has(info.shade)"
-                name="i-lucide-pin"
-                class="absolute inset-0 m-auto size-2.5 text-white mix-blend-difference pointer-events-none"
-              />
+              <!-- Past 19 stops a tile is narrower than the icon, so the badge
+                   becomes a full-height hairline instead. -->
+              <template v-if="pinnedShades.has(info.shade)">
+                <UIcon
+                  v-if="stopStep >= 50"
+                  name="i-lucide-pin"
+                  class="absolute inset-0 m-auto size-2.5 pointer-events-none"
+                  :class="pinBadgeClass(info.shade, 'text')"
+                />
+                <span
+                  v-else
+                  class="absolute inset-0 mx-auto w-px pointer-events-none"
+                  :class="pinBadgeClass(info.shade, 'bg')"
+                />
+              </template>
             </button>
           </div>
 
@@ -752,17 +784,16 @@ function resetEffects() {
               block
               class="flex-1 justify-start"
             />
-            <!-- Stop-count picker rides the Modifiers row so it never
-                 overlaps the curve handles or swatches above. Its own click
-                 must not toggle the fold. -->
-            <UTooltip text="Shade stops">
+            <!-- Density picker rides the Modifiers row so it never overlaps
+                 the curve handles or swatches above. Its own click must not
+                 toggle the fold. -->
+            <UTooltip text="Shade interval">
               <USelect
-                v-model="stopCount"
+                v-model="stopStep"
                 :items="stopItems"
                 size="sm"
                 variant="ghost"
                 class="shrink-0"
-
                 @click.stop
               />
             </UTooltip>
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index afeb745ed5..ac5c33ac9b 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,7 +1,7 @@
 import colors from 'tailwindcss/colors'
 import { THEME_STATE_KEYS, THEME_STORAGE_KEYS } from '../utils/theme-keys'
-import { presets, docToSettings, isDefaultTheme, generatePalette, applyPaletteEffects, isDefaultEffects, parseCssColor, styleComponents, styleTokens, sectionFingerprint, mergeSection, canonicalTokenShades, TOKEN_SHADE_TARGETS, SECTION_GROUPS, DEFAULT_COLORS, SHADES_FINE } from '../utils/theme-engine'
-import type { SectionKey, ThemeDoc, ThemePreset, PaletteCurveParams, PaletteEffects, StoredPaletteParams, PalettePin, StyleOptions, Shade, ShadeStop, ColorAlias, TokenRamp } from '../utils/theme-engine'
+import { presets, docToSettings, isDefaultTheme, generatePalette, applyPaletteEffects, isDefaultEffects, parseCssColor, styleComponents, styleTokens, sectionFingerprint, mergeSection, canonicalTokenShades, storedStopStep, nearestShade, TOKEN_SHADE_TARGETS, SECTION_GROUPS, DEFAULT_COLORS, SHADES, SHADES_ALL, SHADE_SETS } from '../utils/theme-engine'
+import type { SectionKey, ThemeDoc, ThemePreset, PaletteCurveParams, PaletteEffects, StoredPaletteParams, PalettePin, StyleOptions, Shade, ShadeStep, ShadeStop, ColorAlias, TokenRamp } from '../utils/theme-engine'
 import { readLocalStorage } from '../utils/theme'
 
 export function useThemeStudio() {
@@ -93,7 +93,7 @@ export function useThemeStudio() {
           { lightness: entry.lightness, chroma: entry.chroma, hue: entry.hue },
           entry.effects,
           entry.amount
-        ), entry.fineStops, entry.pins)
+        ), storedStopStep(entry), entry.pins)
         const name = customPaletteName(alias)
         // The alias mapping and neutral remaps usually survive the reload
         // intact — only the derived ramp (customColors) loses its restore
@@ -168,19 +168,19 @@ export function useThemeStudio() {
 
   /**
    * Every defined shade of a named palette as oklch — tailwind's JS values
-   * first, CSS variables as fallback. Sampled across the fine stop set so an
-   * imported ramp that carries midpoints (150–850) is read whole; a standard
-   * 11-stop ramp simply has no midpoint vars and those drop out. The editor
-   * uses the midpoints' presence to re-detect fine stops on seed.
+   * first, CSS variables as fallback. Sampled across every stop any density
+   * can emit, so a ramp generated at a finer density is read whole; a standard
+   * 11-stop ramp simply has no in-between vars and those drop out. The editor
+   * reads the density back from which stops came through.
    */
   function paletteShades(name: string): Partial<Record<Shade, string>> | undefined {
     const tailwind = (colors as Record<string, any>)[name]
     if (tailwind && typeof tailwind === 'object') {
-      // A stock tailwind ramp has only the 11 standard stops — its midpoints
-      // (150…850) are undefined, and parseCssColor would throw on those. Skip
-      // absent shades so a fine-set sweep degrades cleanly to the 11 present.
+      // A stock tailwind ramp has only the 11 standard stops — the rest are
+      // undefined, and parseCssColor would throw on those. Skip absent shades
+      // so a full sweep degrades cleanly to the 11 present.
       return Object.fromEntries(
-        SHADES_FINE
+        SHADES_ALL
           .filter(shade => tailwind[shade] != null)
           .map(shade => [shade, parseCssColor(tailwind[shade])])
           .filter(([, color]) => color)
@@ -190,7 +190,7 @@ export function useThemeStudio() {
     if (import.meta.client) {
       const styles = getComputedStyle(document.documentElement)
       const cssName = name === 'neutral' ? 'old-neutral' : name
-      const entries = SHADES_FINE
+      const entries = SHADES_ALL
         .map(shade => [shade, parseCssColor(styles.getPropertyValue(`--color-${cssName}-${shade}`))] as const)
         .filter(([, color]) => color)
       if (entries.length >= 2) {
@@ -256,12 +256,17 @@ export function useThemeStudio() {
     }
   }
 
+  /** The stops a ramp actually emits — its density when custom, else the standard 11. */
+  function rampStops(ramp?: string): readonly Shade[] {
+    return ramp && isCustomPalette(ramp) ? SHADE_SETS[storedStopStep(paletteParams.value[ramp])] : SHADES
+  }
+
   /**
-   * A token shade pinned to a midpoint (150…850) only resolves while its ramp
-   * is a fine-stops custom palette — that's the only thing defining
-   * `--color-custom-<ramp>-<mid>`. When a ramp narrows to 11 stops, or is
-   * cleared / switched to a stock colour, that variable disappears, so snap any
-   * now-orphaned midpoint token back to the nearest standard stop rather than
+   * A token shade pinned to an in-between stop only resolves while its ramp is
+   * a custom palette generating that stop — that's the only thing defining
+   * `--color-custom-<ramp>-<stop>`. When a ramp changes density, or is cleared
+   * / switched to a stock colour, that variable disappears, so snap any
+   * now-orphaned token to the nearest stop the ramp does emit rather than
    * leaving a dangling reference (which renders transparent).
    */
   function sanitizeTokenShades() {
@@ -270,14 +275,13 @@ export function useThemeStudio() {
     let changed = false
     const next: NonNullable<StyleOptions['tokenShades']> = {}
     for (const [token, modes] of Object.entries(shades)) {
-      const ramp = TOKEN_SHADE_TARGETS.find(target => target.token === token)?.ramp
-      const rampFine = !!ramp && isCustomPalette(ramp) && !!paletteParams.value[ramp]?.fineStops
+      const stops = rampStops(TOKEN_SHADE_TARGETS.find(target => target.token === token)?.ramp)
       const fixed: { light?: ShadeStop, dark?: ShadeStop } = {}
       for (const mode of ['light', 'dark'] as const) {
         const value = modes[mode]
         if (value === undefined) continue
-        if (!rampFine && typeof value === 'number' && value % 100 === 50 && value > 100 && value < 900) {
-          fixed[mode] = (Math.round(value / 100) * 100) as ShadeStop
+        if (typeof value === 'number' && !stops.includes(value)) {
+          fixed[mode] = nearestShade(value, stops)
           changed = true
         } else {
           fixed[mode] = value
@@ -293,7 +297,7 @@ export function useThemeStudio() {
    * modifier lens persist separately, so a reload restores the editor's
    * sliders instead of silently baking them into the curves.
    */
-  function setPaletteFromCurve(alias: ColorAlias, base: PaletteCurveParams, effects?: PaletteEffects, amount = 100, fine = false, pins: PalettePin[] = []) {
+  function setPaletteFromCurve(alias: ColorAlias, base: PaletteCurveParams, effects?: PaletteEffects, amount = 100, step: ShadeStep = 100, pins: PalettePin[] = []) {
     const name = customPaletteName(alias)
     // The alias only needs pointing once. Live drags call this at ~16Hz; re-
     // sending it every tick makes applyThemeSettings re-persist the AI-extras
@@ -302,7 +306,7 @@ export function useThemeStudio() {
     const aliasAlreadySet = (appConfig.ui.colors as Record<string, string>)[alias] === name
 
     theme.applyThemeSettings({
-      customColors: { [name]: generatePalette(applyPaletteEffects(base, effects, amount), fine, pins) },
+      customColors: { [name]: generatePalette(applyPaletteEffects(base, effects, amount), step, pins) },
       ...(aliasAlreadySet ? {} : { [alias]: name }),
       // The remaps are var() references, not ramp colours, and are kept in
       // sync with the shade sliders elsewhere — so they only need (re)sending
@@ -312,13 +316,14 @@ export function useThemeStudio() {
     const entry: StoredPaletteParams = {
       ...base,
       ...(isDefaultEffects(effects, amount) ? {} : { effects, amount }),
-      ...(fine ? { fineStops: true } : {}),
+      ...(step !== 100 ? { stopStep: step } : {}),
       ...(pins.length ? { pins } : {})
     }
     setPaletteParams({ ...paletteParams.value, [alias]: entry })
 
-    // Narrowing to 11 stops orphans any midpoint token pinned to this ramp.
-    if (!fine) sanitizeTokenShades()
+    // A coarser density orphans any token pinned to a stop it no longer emits.
+    // Only writes when something actually moved, so the drag path is a no-op.
+    sanitizeTokenShades()
 
     // Live drags call this at ~16Hz — one analytics event per burst is plenty.
     trackThrottled('Theme Custom Palette', { alias })
@@ -344,7 +349,7 @@ export function useThemeStudio() {
     const { [alias]: _, ...rest } = paletteParams.value
     setPaletteParams(rest)
 
-    // A stock ramp has no midpoints — snap any token that was pinned to one.
+    // A stock ramp emits only the standard 11 — snap any token off the rest.
     sanitizeTokenShades()
   }
 
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index 05fb25cb1c..e351803de0 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -1,5 +1,5 @@
 import type { ThemeDoc, Shade } from './types'
-import { SHADES_FINE, DEFAULT_COLORS } from './types'
+import { SHADES_ALL, DEFAULT_COLORS } from './types'
 import type { StyleOptions, DefaultVariant, DefaultSize, DefaultColor, VariantGroup } from './styles'
 import {
   styleComponents,
@@ -27,7 +27,7 @@ export interface ThemeImportResult {
   skipped: string[]
 }
 
-const SHADE_SET = new Set<number>(SHADES_FINE)
+const SHADE_SET = new Set<number>(SHADES_ALL)
 
 /* ---------------------------------------------------------------- CSS -- */
 
diff --git a/docs/app/utils/theme-engine/palette.ts b/docs/app/utils/theme-engine/palette.ts
index 81d8b6eb37..3a250ed1e3 100644
--- a/docs/app/utils/theme-engine/palette.ts
+++ b/docs/app/utils/theme-engine/palette.ts
@@ -1,5 +1,5 @@
-import type { Shade } from './types'
-import { SHADES, SHADES_FINE } from './types'
+import type { Shade, ShadeStep } from './types'
+import { SHADES, SHADE_SETS, SHADE_STEPS } from './types'
 import { clampToGamut, formatOklch, parseColor } from './oklch'
 import type { Oklch } from './oklch'
 
@@ -77,8 +77,33 @@ export interface PalettePin {
   h: number
 }
 
-/** A persisted palette: the base curves plus the modifier lens over them. */
-export type StoredPaletteParams = PaletteCurveParams & { effects?: PaletteEffects, amount?: number, fineStops?: boolean, pins?: PalettePin[] }
+/**
+ * A persisted palette: the base curves plus the modifier lens over them.
+ * `fineStops` predates the density model — it's read (never written) so
+ * palettes saved before it keep their 19 stops.
+ */
+export type StoredPaletteParams = PaletteCurveParams & { effects?: PaletteEffects, amount?: number, stopStep?: ShadeStep, fineStops?: boolean, pins?: PalettePin[] }
+
+/** The density a persisted palette generates at. */
+export function storedStopStep(stored?: { stopStep?: ShadeStep, fineStops?: boolean }): ShadeStep {
+  return stored?.stopStep ?? (stored?.fineStops ? 50 : 100)
+}
+
+/**
+ * The density a ramp was generated at, read back from the stops it carries:
+ * the coarsest set that covers every stop present. A ramp mixing stops no
+ * single density emits (a hand-edited import) falls to the finest set, which
+ * covers the most of it.
+ */
+export function detectStopStep(shades: Partial<Record<Shade, string>>): ShadeStep {
+  const present = Object.keys(shades).map(Number) as Shade[]
+  return SHADE_STEPS.find(step => present.every(shade => SHADE_SETS[step].includes(shade))) ?? 10
+}
+
+/** The stop closest to a value — where an orphaned shade reference lands. */
+export function nearestShade(value: number, stops: readonly Shade[]): Shade {
+  return stops.reduce((best, stop) => Math.abs(stop - value) < Math.abs(best - value) ? stop : best)
+}
 
 // Width (in ramp x, 0–1) of each pin's influence. A pinned stop is hit exactly;
 // neighbours bend smoothly toward it and the effect decays to ~0 by ~2σ away.
@@ -309,7 +334,7 @@ export function buildRampSampler(params: PaletteCurveParams, pins: PalettePin[]
   }
 }
 
-export function generatePalette(params: PaletteCurveParams, fine = false, pins: PalettePin[] = []): Record<Shade, string> {
+export function generatePalette(params: PaletteCurveParams, step: ShadeStep = 100, pins: PalettePin[] = []): Record<Shade, string> {
   const result = {} as Record<Shade, string>
 
   const base = (x: number) => ({
@@ -321,7 +346,7 @@ export function generatePalette(params: PaletteCurveParams, fine = false, pins:
   // pinned stop lands on its target exactly whenever that target is in gamut.
   const correct = pins.length ? pinField(pins, base) : undefined
 
-  for (const shade of fine ? SHADES_FINE : SHADES) {
+  for (const shade of SHADE_SETS[step]) {
     const x = shadeX(shade)
     const b = base(x)
     const d = correct ? correct(x) : { dl: 0, dc: 0, dh: 0 }
diff --git a/docs/app/utils/theme-engine/resolve.ts b/docs/app/utils/theme-engine/resolve.ts
index 270289d57a..10a843ab97 100644
--- a/docs/app/utils/theme-engine/resolve.ts
+++ b/docs/app/utils/theme-engine/resolve.ts
@@ -58,12 +58,12 @@ export const LIBRARY_TOKEN_DEFAULTS = {
   }
 } as const
 
-// Standard stops ride the `--ui-color-<alias>-<shade>` indirection; the
-// 100-step midpoints (150…850) have none — the runtime colours plugin only
-// generates the 11 standard stops — so shadeRef emits them against the custom
-// ramp's `--color-custom-<alias>-<mid>` variable instead. Both forms name the
-// same ramp in the same capture position, so a single alternation parses both
-// and midpoints promote back to governed shades exactly like standard stops.
+// Standard stops ride the `--ui-color-<alias>-<shade>` indirection; the stops
+// between them have none — the runtime colours plugin only generates the 11
+// standard stops — so shadeRef emits them against the custom ramp's
+// `--color-custom-<alias>-<stop>` variable instead. Both forms name the same
+// ramp in the same capture position, so a single alternation parses both and
+// in-between stops promote back to governed shades like standard ones.
 const UI_COLOR_RE = /^var\(--(?:ui-color|color-custom)-([a-z]+)-(\d{2,3})\)$/
 
 /**
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 9f4ae52686..9853b989b9 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -26,6 +26,7 @@
  *   each element's own ring color / the dark shadow color untouched.
  */
 import type { ShadeStop } from './types'
+import { SHADES } from './types'
 
 export type ShadowStyle = 'none' | 'flat' | 'soft' | 'hard'
 /** 'bold'/'frame' are legacy values (old exports/saved state) treated as 'custom'. */
@@ -215,16 +216,16 @@ const SOFT_LG = 'shadow-lg shadow-(color:--ui-shadow-final-soft)'
 /**
  * A ramp shade reference — or the literal when the stop is white/black.
  * Standard stops go through the `--ui-color-<ramp>-<stop>` indirection so a
- * token follows whatever colour the ramp is assigned. The 100-step midpoints
- * (150…850) have NO such indirection — the runtime colours plugin only
- * generates the 11 standard stops — so they reference the custom ramp's
- * `--color-*` directly. That's sound because a midpoint can only exist on a
- * fine-stops custom palette (named `custom-<ramp>`), whose `@theme static`
- * block defines those variables in both the preview and the export.
+ * token follows whatever colour the ramp is assigned. Stops between them (any
+ * density finer than 100) have NO such indirection — the runtime colours
+ * plugin only generates the 11 standard stops — so they reference the custom
+ * ramp's `--color-*` directly. That's sound because an in-between stop can
+ * only exist on a custom palette (named `custom-<ramp>`), whose `@theme
+ * static` block defines those variables in both the preview and the export.
  */
 function shadeRef(ramp: string, stop: ShadeStop | number): string {
   if (stop === 'white' || stop === 'black') return stop
-  if (typeof stop === 'number' && stop % 100 === 50 && stop > 100 && stop < 900) {
+  if (typeof stop === 'number' && !(SHADES as readonly number[]).includes(stop)) {
     return `var(--color-custom-${ramp}-${stop})`
   }
   return `var(--ui-color-${ramp}-${stop})`
diff --git a/docs/app/utils/theme-engine/types.ts b/docs/app/utils/theme-engine/types.ts
index 45b25a5f7d..15ded681ee 100644
--- a/docs/app/utils/theme-engine/types.ts
+++ b/docs/app/utils/theme-engine/types.ts
@@ -3,27 +3,53 @@ import { isDefaultStyle } from './styles'
 export const SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
 
 /**
- * The optional "fine" ramp: the standard stops plus the 100-step midpoints
- * (150…850). A palette opts in via its `fineStops` flag; generation and the
- * shade sliders then span these 19 stops. `Shade` is the union of the fine
- * set, so every fine stop is a valid shade — the standard 11 are a subset,
- * and a non-fine palette simply never emits the extras.
+ * Every stop any density can emit: the 10-step ladder plus the odd 25-step
+ * quarters (75, 125…). `Shade` is that whole union, so each density's set is a
+ * subset of it and a stop stays a valid shade whichever density produced it.
  */
-export const SHADES_FINE = [50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950] as const
+export const SHADES_ALL = [50, 60, 70, 75, 80, 90, 100, 110, 120, 125, 130, 140, 150, 160, 170, 175, 180, 190, 200, 210, 220, 225, 230, 240, 250, 260, 270, 275, 280, 290, 300, 310, 320, 325, 330, 340, 350, 360, 370, 375, 380, 390, 400, 410, 420, 425, 430, 440, 450, 460, 470, 475, 480, 490, 500, 510, 520, 525, 530, 540, 550, 560, 570, 575, 580, 590, 600, 610, 620, 625, 630, 640, 650, 660, 670, 675, 680, 690, 700, 710, 720, 725, 730, 740, 750, 760, 770, 775, 780, 790, 800, 810, 820, 825, 830, 840, 850, 860, 870, 875, 880, 890, 900, 910, 920, 925, 930, 940, 950] as const
 
-export type Shade = typeof SHADES_FINE[number]
+export type Shade = typeof SHADES_ALL[number]
 
 /**
- * The shade sliders' full travel: the ramp plus literal white/black ends.
- * The ends matter because several stock defaults are literals the ramp
+ * Stop density, as the gap between stops. A palette carries one in its
+ * `stopStep`; generation and the shade sliders then span that set. Ordered
+ * coarse → fine, which `detectStopStep` reads back in order.
+ */
+export const SHADE_STEPS = [100, 50, 25, 10] as const
+
+export type ShadeStep = typeof SHADE_STEPS[number]
+
+/** The stops each density emits: 11, 19, 37 and 91. */
+export const SHADE_SETS: Record<ShadeStep, readonly Shade[]> = {
+  // The standard ramp is the only irregular one — 50 and 950 are half-steps
+  // at the ends. Every finer density is just the multiples of its step, which
+  // already include both ends.
+  100: SHADES,
+  50: SHADES_ALL.filter(shade => shade % 50 === 0),
+  25: SHADES_ALL.filter(shade => shade % 25 === 0),
+  10: SHADES_ALL.filter(shade => shade % 10 === 0)
+}
+
+export type ShadeStop = 'white' | Shade | 'black'
+
+/**
+ * The shade sliders' full travel: a density's stops plus literal white/black
+ * ends. The ends matter because several stock defaults are literals the ramp
  * can't express (--ui-bg is `white`, the stock dark shadow is `black`) —
  * without them the sliders could only pin lookalike ramp overrides.
- * `SHADE_LADDER_FINE` is the same with the midpoints, for fine-stops ramps.
  */
-export const SHADE_LADDER = ['white', ...SHADES, 'black'] as const
-export const SHADE_LADDER_FINE = ['white', ...SHADES_FINE, 'black'] as const
+const ladder = (step: ShadeStep): readonly ShadeStop[] => ['white', ...SHADE_SETS[step], 'black']
+
+export const SHADE_LADDERS: Record<ShadeStep, readonly ShadeStop[]> = {
+  100: ladder(100),
+  50: ladder(50),
+  25: ladder(25),
+  10: ladder(10)
+}
 
-export type ShadeStop = typeof SHADE_LADDER_FINE[number]
+/** The standard ladder — what stock ramps (and plain rows) travel. */
+export const SHADE_LADDER = SHADE_LADDERS[100]
 
 export type ColorAlias = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
 

From b98649fda41b56c0ddbeae93c9e917bd30a784e6 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 25 Jul 2026 13:13:13 +0200
Subject: [PATCH 164/185] fix(theme-studio): specs follow the stopStep API

The density model replaced `fineStops: boolean` with `stopStep: ShadeStep`
and dropped SHADES_FINE, but the specs kept calling the old signature.
Booleans coerce at runtime so the tests still passed; only vue-tsc caught
it, failing CI after lint went green.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 test/utils/theme-engine.spec.ts  | 12 ++++++------
 test/utils/theme-palette.spec.ts | 18 +++++++++---------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 3048f5ec10..f9f450908b 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -12,13 +12,13 @@ import {
   contrastRatio,
   CURVE_DEFAULTS,
   SHADES,
-  SHADES_FINE,
+  SHADE_SETS,
   LIBRARY_TOKEN_DEFAULTS,
   parseUiColorRef,
   resolveAlias,
   resolveShade
 } from '../../docs/app/utils/theme-engine'
-import type { ThemeDoc } from '../../docs/app/utils/theme-engine'
+import type { Shade, ThemeDoc } from '../../docs/app/utils/theme-engine'
 
 describe('theme-engine', () => {
   describe('isDefaultTheme', () => {
@@ -227,11 +227,11 @@ describe('theme-engine', () => {
 
     it('fine stops add the midpoints without shifting the standard stops', () => {
       const standard = generatePalette(CURVE_DEFAULTS)
-      const fine = generatePalette(CURVE_DEFAULTS, true)
+      const fine = generatePalette(CURVE_DEFAULTS, 50)
 
       // 19 stops incl. every 100-step midpoint, all canonical
-      expect(Object.keys(fine).map(Number).sort((a, b) => a - b)).toEqual(SHADES_FINE as unknown as number[])
-      for (const shade of SHADES_FINE) {
+      expect(Object.keys(fine).map(Number).sort((a, b) => a - b)).toEqual(SHADE_SETS[50] as unknown as number[])
+      for (const shade of SHADE_SETS[50]) {
         expect(fine[shade], `${shade}`).toMatch(CANONICAL_OKLCH)
       }
       // The standard stops are byte-identical — enabling fine stops must not
@@ -240,7 +240,7 @@ describe('theme-engine', () => {
         expect(fine[shade], `${shade}`).toBe(standard[shade])
       }
       // A midpoint sits between its neighbours in lightness (curve is monotonic).
-      const l = (s: number) => parseColor(fine[s as never])!.l
+      const l = (s: Shade) => parseColor(fine[s])!.l
       expect(l(150)).toBeLessThan(l(100))
       expect(l(150)).toBeGreaterThan(l(200))
     })
diff --git a/test/utils/theme-palette.spec.ts b/test/utils/theme-palette.spec.ts
index 8988736cb3..583e1d6b99 100644
--- a/test/utils/theme-palette.spec.ts
+++ b/test/utils/theme-palette.spec.ts
@@ -134,20 +134,20 @@ describe('generatePalette', () => {
 
   it('no pins leaves the ramp byte-identical', () => {
     const bare = generatePalette(CURVE_DEFAULTS)
-    const empty = generatePalette(CURVE_DEFAULTS, false, [])
+    const empty = generatePalette(CURVE_DEFAULTS, 100, [])
     for (const shade of SHADES) expect(empty[shade]).toBe(bare[shade])
   })
 
   it('renders a pinned stop as its exact (gamut-clamped) target', () => {
     const target = parseColor('oklch(75.42% 0.1077 118.763)')!
-    const palette = generatePalette(CURVE_DEFAULTS, false, [{ shade: 500, ...target }])
+    const palette = generatePalette(CURVE_DEFAULTS, 100, [{ shade: 500, ...target }])
     expect(palette[500]).toBe(formatOklch(clampToGamut(target)))
   })
 
   it('keeps a pin local — the far end barely moves', () => {
     const target = parseColor('oklch(75.42% 0.1077 118.763)')!
     const bare = generatePalette(CURVE_DEFAULTS)
-    const pinned = generatePalette(CURVE_DEFAULTS, false, [{ shade: 500, ...target }])
+    const pinned = generatePalette(CURVE_DEFAULTS, 100, [{ shade: 500, ...target }])
     // 50 is ~0.5 in x away from the pin — the Gaussian has decayed to nearly nothing.
     expect(parseColor(pinned[50])!.l).toBeCloseTo(parseColor(bare[50])!.l, 2)
   })
@@ -155,7 +155,7 @@ describe('generatePalette', () => {
   it('hits every stop of a multi-pin set exactly', () => {
     const a = parseColor('oklch(75.42% 0.1077 118.763)')!
     const b = parseColor('oklch(45% 0.09 250)')!
-    const palette = generatePalette(CURVE_DEFAULTS, false, [
+    const palette = generatePalette(CURVE_DEFAULTS, 100, [
       { shade: 300, ...a },
       { shade: 700, ...b }
     ])
@@ -167,10 +167,10 @@ describe('generatePalette', () => {
     // Two adjacent fine stops pulled in opposite directions used to blow the
     // Gaussian weights up so the unpinned neighbours swung ~0.10 L. The
     // spacing-adaptive sigma must keep each pin's influence local.
-    const bare = generatePalette(CURVE_DEFAULTS, true)
+    const bare = generatePalette(CURVE_DEFAULTS, 50)
     const l500 = parseColor(bare[500])!.l
     const l550 = parseColor(bare[550])!.l
-    const pinned = generatePalette(CURVE_DEFAULTS, true, [
+    const pinned = generatePalette(CURVE_DEFAULTS, 50, [
       { shade: 500, l: l500 + 0.03, c: 0.05, h: 150 },
       { shade: 550, l: l550 - 0.03, c: 0.05, h: 150 }
     ])
@@ -182,14 +182,14 @@ describe('generatePalette', () => {
   it('never collapses a clustered pin set to white', () => {
     // Five alternating ±0.02 pins across 450–650 used to drive 13 of 19 stops
     // to oklch(100% 0 0). No stop may reach full white.
-    const bare = generatePalette(CURVE_DEFAULTS, true)
+    const bare = generatePalette(CURVE_DEFAULTS, 50)
     const pins = [450, 500, 550, 600, 650].map((shade, i) => ({
       shade: shade as Shade,
       l: parseColor(bare[shade as Shade])!.l + (i % 2 ? -0.02 : 0.02),
       c: 0.05,
       h: 150
     }))
-    const palette = generatePalette(CURVE_DEFAULTS, true, pins)
+    const palette = generatePalette(CURVE_DEFAULTS, 50, pins)
     for (const value of Object.values(palette)) {
       expect(value, `blown to white: ${value}`).not.toMatch(/oklch\(100(\.0+)?%/)
     }
@@ -199,7 +199,7 @@ describe('generatePalette', () => {
     // Base hue 250 with pins at hue 60 and 80 must not sweep ~340° the long
     // way round; the unwrapped targets keep the interpolation monotonic.
     const flatHue = { ...CURVE_DEFAULTS, hue: { y0: 250, y1: 250, p1x: 0.33, p1y: 250, p2x: 0.66, p2y: 250 } }
-    const palette = generatePalette(flatHue, false, [
+    const palette = generatePalette(flatHue, 100, [
       { shade: 200, l: 0.8, c: 0.1, h: 60 },
       { shade: 800, l: 0.4, c: 0.1, h: 80 }
     ])

From 2a63b56a66a7eee08afa050553f974f351a5d083 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 25 Jul 2026 14:47:34 +0200
Subject: [PATCH 165/185] fix(theme-studio): apply shadow shade slider in
 custom mode; trim comments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Entering custom shadow sets `shadow: 'hard'` but leaves shadowColor unset, and
styleTokens only emitted --ui-shadow-color from shadowShade when shadowColor was
explicitly 'shade'. So moving the shade slider did nothing until the colour
dropdown was toggled. Treat an unset colour on a hard shadow as the shade
default (a pristine theme still emits nothing).

Also a conciseness pass over the comments added across the recent theme-studio
work — same intent, less prose.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioCurveEditor.vue   | 33 ++++++-----------
 .../theme-studio/ThemeStudioPaletteEditor.vue | 36 +++++++------------
 docs/app/composables/useTheme.ts              |  7 ++--
 docs/app/composables/useThemeStudio.ts        | 21 +++++------
 docs/app/utils/theme-engine/oklch.ts          |  5 ++-
 docs/app/utils/theme-engine/palette.ts        | 21 +++++------
 docs/app/utils/theme-engine/styles.ts         | 14 +++++---
 7 files changed, 54 insertions(+), 83 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
index 3f47db6ee6..0ebdd4e56e 100644
--- a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
@@ -136,13 +136,9 @@ function drawField() {
 // redraw on every field change — a drag, a tab switch, or a preset reseed.
 watch([() => props.field, fieldCanvas], drawField, { immediate: true, flush: 'post' })
 
-// The raw bézier control (y0/y1) is NOT where the curve actually ends once pins
-// are in play: a pin near the edge (e.g. 900) pulls the corrected line away from
-// the raw endpoint, and a pin ON the endpoint overrides it outright. Always sit
-// the endpoint handle on the corrected value (stopValues) so it rides the drawn
-// line instead of floating off it. With no pins the corrected value equals the
-// bézier endpoint, so nothing moves. A pinned endpoint is additionally locked
-// from dragging (the pin owns it — edit it through the swatch popover).
+// Sit the endpoint handle on the corrected value, not the raw bézier control,
+// so it rides the drawn line when a pin pulls the edge (equal when unpinned). A
+// pinned endpoint is also locked from dragging — the pin owns it.
 const lastStop = computed(() => (props.stopValues?.length ?? 1) - 1)
 const startPinned = computed(() => props.stopPinned?.[0] ?? false)
 const endPinned = computed(() => props.stopPinned?.[lastStop.value] ?? false)
@@ -189,9 +185,7 @@ function onPointerDown(event: PointerEvent) {
   const targets = [
     { id: 'p1' as const, x: toX(c.p1x), y: toHandleY(c.p1y) },
     { id: 'p2' as const, x: toX(c.p2x), y: toHandleY(c.p2y) },
-    // A pinned endpoint is locked to its pin — don't offer it as a drag target,
-    // or the endpoint-carries-its-handle delta would fight the pin correction.
-    // Grab the others at their DRAWN (corrected) spot, not the raw control.
+    // Skip a pinned endpoint (locked); grab the rest at their drawn spot.
     ...(startPinned.value ? [] : [{ id: 'y0' as const, x: toX(0), y: toHandleY(startY.value) }]),
     ...(endPinned.value ? [] : [{ id: 'y1' as const, x: toX(1), y: toHandleY(endY.value) }])
   ]
@@ -222,15 +216,10 @@ function onPointerMove(event: PointerEvent) {
   // Reaching further is the window's job — hue auto-pans at the edges.
   const clamped = Math.min(props.yMax, Math.max(props.yMin, value))
 
-  // Dragging an endpoint carries its own control handle by the same vertical
-  // delta, so the tangent that leaves the endpoint is preserved instead of the
-  // handle staying put and kinking the curve. The handle stays window-clamped
-  // (as a direct handle drag would), so near an edge the offset compresses.
-  //
-  // The handle is drawn on the CORRECTED curve, but we steer the RAW control
-  // (y0/y1): back out the pin pull at the edge (corrected − raw) so the visible
-  // endpoint tracks the pointer instead of lagging by the correction. With no
-  // pin reaching the edge the offset is zero and this is the plain drag.
+  // An endpoint drag carries its control handle by the same delta so the tangent
+  // is preserved. The handle sits on the corrected curve but we steer the raw
+  // control, so back out the pin pull (corrected − raw) to track the pointer;
+  // with no pin at the edge the offset is zero and it's a plain drag.
   if (dragging.value === 'y0') {
     const raw = Math.min(props.yMax, Math.max(props.yMin, clamped - (startY.value - curve.value.y0)))
     const delta = raw - curve.value.y0
@@ -261,10 +250,8 @@ function onPointerUp(event: PointerEvent) {
   }
 }
 
-// The collapsible unmounts its content on close (default), so closing the fold
-// mid-drag tears down this SVG without a pointerup. Emit the close-out so the
-// parent still runs onDragEnd — otherwise its isDragging, the page-wide
-// dragging class and the inline preview vars all stay stranded.
+// Closing the fold mid-drag unmounts the SVG without a pointerup — emit dragEnd
+// so the parent isn't left with isDragging and stranded preview vars.
 onUnmounted(() => {
   if (dragging.value) {
     dragging.value = null
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 41deab9dba..45ae0f7bb1 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -28,13 +28,9 @@ function pickCurves(value: StoredPaletteParams): PaletteCurveParams {
   return structuredClone({ lightness: toRaw(value.lightness), chroma: toRaw(value.chroma), hue: toRaw(value.hue) })
 }
 
-/**
- * A plain, clone-safe copy of a pin list. `pins` is a deeply-reactive ref, so
- * reading an element (via filter/index) hands back a Vue Proxy that `toRaw`
- * does NOT unwrap — only the outer array. structuredClone then throws
- * DataCloneError on the proxied element. Rebuilding each pin from its scalar
- * fields sidesteps the proxy entirely, so the result always persists.
- */
+// Clone-safe copy of the pins: reading elements off the reactive ref yields Vue
+// Proxies that toRaw doesn't unwrap, so structuredClone would throw. Rebuilding
+// from scalar fields sidesteps the proxy.
 function plainPins(pins: readonly PalettePin[]): PalettePin[] {
   return pins.map(pin => ({ shade: pin.shade, l: pin.l, c: pin.c, h: pin.h }))
 }
@@ -297,9 +293,8 @@ function hueWindow(hue: PaletteCurveParams['hue']) {
     max: Math.max(360, Math.ceil(Math.max(...points) / 10) * 10)
   }
 }
-// The hue window must stretch to fit each freshly-seeded curve (a later palette
-// can cross the seam elsewhere), so it's a ref reseeded alongside params — but
-// only on seed, never mid-drag, or a grabbed handle would rescale under the
+// Hue window stretches to fit each seed (a later palette can cross the seam
+// elsewhere) but never mid-drag, or a grabbed handle would rescale under the
 // pointer. Lightness/chroma are fixed physical ranges.
 const windows = ref({
   lightness: { min: 0, max: 1 },
@@ -451,8 +446,7 @@ function seed(values: PaletteCurveParams) {
     pins.value = []
     Object.assign(params, next)
   })
-  // Restretch the hue window to this seed (may cross the seam differently than
-  // the palette the editor first opened on).
+  // Restretch the hue window — this seed may cross the seam differently.
   windows.value.hue = hueWindow(next.hue)
 }
 
@@ -486,10 +480,8 @@ function onDragEnd() {
   if (!effectsDirty.value) {
     seedBase = structuredClone(toRaw(params))
   }
-  // applyReactive reconciles AND clears the inline preview vars, but only the
-  // active ramp takes that path — an inactive alias (edited before its first
-  // apply) still set preview vars during the drag, so clear them directly or
-  // they shadow the reactive <style> for this ramp.
+  // Only the active ramp reconciles via applyReactive; an inactive alias still
+  // set preview vars during the drag, so clear them directly.
   if (active.value) applyReactive()
   else clearCssomPreview()
 }
@@ -525,10 +517,9 @@ function seedFromCurrent() {
 // throttled applies (the callback runs queued, after any sync flag reset).
 watch(() => paletteParams.value[props.alias], (value) => {
   if (!value || !('lightness' in value)) return
-  // Echo guard: skip only when curves AND pins AND stop density all already
-  // match. Comparing curves alone would swallow an external change that moved
-  // just a pin or changed the density (undo/redo of a pin-only edit), leaving
-  // the editor showing stale pins over correct curves.
+  // Echo guard: skip only when curves, pins AND density all match — comparing
+  // curves alone would swallow a pin-only or density-only external change (e.g.
+  // undo/redo) and leave stale pins over correct curves.
   const effective = applyPaletteEffects(pickCurves(value), value.effects, value.amount)
   const curvesMatch = JSON.stringify(effective) === JSON.stringify(toRaw(params))
   const pinsMatch = JSON.stringify(value.pins ?? []) === JSON.stringify(toRaw(pins.value))
@@ -537,9 +528,8 @@ watch(() => paletteParams.value[props.alias], (value) => {
 
   seedBase = pickCurves(value)
   normalizeHue(seedBase)
-  // One ignoreUpdates around every apply-triggering write: reflecting an
-  // external change (undo/redo restore, AI edit) must not echo back into an
-  // apply that re-persists and clobbers the very state being restored.
+  // Wrap every apply-triggering write: reflecting an external change must not
+  // echo back into an apply that re-persists and clobbers what's being restored.
   ignoreUpdates(() => {
     Object.assign(effects, PALETTE_EFFECT_DEFAULTS, value.effects ?? {})
     effectAmount.value = value.amount ?? 100
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 185e887964..d993489ec8 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -301,10 +301,9 @@ export function useTheme() {
   const spacingStyle = computed(() => _spacing.value !== 0.25 ? `:root { --spacing: ${_spacing.value}rem; }` : ':root {}')
   const blackAsPrimaryStyle = computed(() => _blackAsPrimary.value ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
   const fontStyle = computed(() => {
-    // _font/heading.font hydrate straight from localStorage (useLocalStorage,
-    // no read-time validation) and land in this <style> innerHTML — re-assert
-    // SAFE_NAME at the sink so a tampered name can't break out of the quoted
-    // string, exactly as the SSR FOUC scripts do.
+    // _font/heading.font hydrate unvalidated from localStorage into this <style>
+    // innerHTML — re-assert SAFE_NAME at the sink so a tampered name can't break
+    // out of the quoted string.
     const safeFont = SAFE_NAME.test(_font.value) ? _font.value : 'Public Sans'
     const parts = [`:root { --font-sans: '${safeFont}', sans-serif; }`]
     const prefs = fontPrefs.value
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index ac5c33ac9b..fdd41ab66d 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -95,12 +95,10 @@ export function useThemeStudio() {
           entry.amount
         ), storedStopStep(entry), entry.pins)
         const name = customPaletteName(alias)
-        // The alias mapping and neutral remaps usually survive the reload
-        // intact — only the derived ramp (customColors) loses its restore
-        // race. Re-sending an alias that's already correct routes through the
-        // primary/neutral computed setters, which reset black-as-primary,
-        // rewrite localStorage and fire a spurious "Theme Changed" event every
-        // single load. Heal the ramp always; touch the alias only if it drifted.
+        // Only the derived ramp (customColors) loses its restore race. Re-sending
+        // an already-correct alias routes through the primary/neutral setters,
+        // which reset black-as-primary and fire a spurious event every load — so
+        // heal the ramp always, touch the alias only if it drifted.
         const aliasAlreadySet = (appConfig.ui.colors as Record<string, string>)[alias] === name
         theme.applyThemeSettings({
           customColors: { [name]: ramp },
@@ -485,13 +483,10 @@ export function useThemeStudio() {
     // applyDoc resets everything first, which clears the persisted preset —
     // but a section reset moves TOWARD the baseline; keep it
     const preserved = activePreset.value
-    // applyDoc → resetTheme also wipes the editor curves (paletteParams), but a
-    // section reset only touches its own slice: resetting typography must not
-    // discard the curves behind an untouched custom colour ramp (the baked
-    // shades survive in the doc, so the curves have to as well, or the editor
-    // silently refits an approximation). Snapshot now, then restore the curves
-    // for every alias whose custom ramp outlived the reset (a reset colour
-    // section drops back to a stock name, so isCustomPalette filters it out).
+    // applyDoc wipes the editor curves too, but a section reset only touches its
+    // own slice — restore curves for any alias whose custom ramp outlived it
+    // (a reset colour section drops to a stock name, so isCustomPalette filters
+    // it out) or the editor would silently refit the untouched ramp.
     const preservedPp = JSON.parse(JSON.stringify(paletteParams.value)) as typeof paletteParams.value
     applyDoc(mergeSection(plain, baselineDoc.value, key))
     setPaletteParams(Object.fromEntries(
diff --git a/docs/app/utils/theme-engine/oklch.ts b/docs/app/utils/theme-engine/oklch.ts
index 730da4e9e2..efc6ebf8dc 100644
--- a/docs/app/utils/theme-engine/oklch.ts
+++ b/docs/app/utils/theme-engine/oklch.ts
@@ -131,9 +131,8 @@ export function formatOklch(color: Oklch): string {
  * meets: hex, `oklch(…)` (tailwind v4's format) and `rgb(…)`.
  */
 export function parseColor(value: string): Oklch | undefined {
-  // Callers pass raw ramp lookups (a missing tailwind midpoint, an unset CSS
-  // var) that can be undefined — treat any non-string as simply unparseable
-  // rather than throwing on .trim().
+  // Ramp lookups can pass undefined (missing midpoint, unset var) — treat any
+  // non-string as unparseable rather than throwing on .trim().
   if (typeof value !== 'string') return undefined
   const input = value.trim()
 
diff --git a/docs/app/utils/theme-engine/palette.ts b/docs/app/utils/theme-engine/palette.ts
index 3a250ed1e3..296e16fb89 100644
--- a/docs/app/utils/theme-engine/palette.ts
+++ b/docs/app/utils/theme-engine/palette.ts
@@ -105,14 +105,10 @@ export function nearestShade(value: number, stops: readonly Shade[]): Shade {
   return stops.reduce((best, stop) => Math.abs(stop - value) < Math.abs(best - value) ? stop : best)
 }
 
-// Width (in ramp x, 0–1) of each pin's influence. A pinned stop is hit exactly;
-// neighbours bend smoothly toward it and the effect decays to ~0 by ~2σ away.
-// SIGMA_MAX is the widest, smoothest kernel (single or well-separated pins).
-// But a kernel much wider than the gap between two pins makes the exact-
-// interpolation solve ill-conditioned: the weights blow up and the correction
-// overshoots — with pins a fine stop apart it swings whole neighbouring stops
-// to white. So the kernel is narrowed to the closest pin spacing (floored so it
-// never degenerates to a spike), keeping the solve well-conditioned and local.
+// Width (ramp x) of each pin's influence. MAX is the widest, smoothest kernel
+// (single/well-separated pins); but wider than the gap between two pins the
+// exact-interpolation solve goes ill-conditioned and overshoots (clustered pins
+// blow neighbours to white), so it's narrowed to the closest spacing, floored.
 const PIN_KERNEL_SIGMA_MAX = 0.2
 const PIN_KERNEL_SIGMA_MIN = 0.04
 
@@ -167,11 +163,10 @@ function pinField(pins: PalettePin[], base: (x: number) => { l: number, c: numbe
 
   const matrix = xs.map(xi => xs.map(xj => pinKernel(Math.abs(xi - xj), sigma)))
 
-  // Hue is cyclic. Unwrapping each target independently to the base's nearest
-  // arc flips direction for pins near the base's antipode, sending the ramp the
-  // long way round. Instead chain-unwrap the targets in x order (each within
-  // ±180° of the previous), anchored to the base hue at the first pin, so a run
-  // of pins takes the short way *between themselves*.
+  // Hue is cyclic: unwrapping each target to the base's nearest arc sends pins
+  // near the antipode the long way round. Chain-unwrap in x order instead (each
+  // within ±180° of the previous, anchored to the base at the first pin) so a
+  // run of pins takes the short way between themselves.
   const order = xs.map((_, i) => i).sort((i, j) => xs[i]! - xs[j]!)
   const hueTarget: number[] = Array.from({ length: pins.length })
   let prevHue = base(xs[order[0]!]!).h
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 9853b989b9..38b746b801 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -561,15 +561,21 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
     }
   }
 
-  if (style.shadowColor === 'shade' || style.shadowColor === 'primary-shade') {
+  // An unset shadowColor is the 'shade' default, but only a hard shadow paints
+  // one — so the shade slider works in custom mode without first touching the
+  // colour dropdown, while a pristine theme emits nothing.
+  const shadowColorMode = (!style.shadowColor || style.shadowColor === 'default')
+    ? (style.shadow === 'hard' ? 'shade' : undefined)
+    : style.shadowColor
+  if (shadowColorMode === 'shade' || shadowColorMode === 'primary-shade') {
     // Per-mode ramp shade — a graded shadow that darkens or lightens
     // independently of the scheme it sits on; the primary ramp tints it.
-    const ramp = style.shadowColor === 'primary-shade' ? 'primary' : 'neutral'
+    const ramp = shadowColorMode === 'primary-shade' ? 'primary' : 'neutral'
     const shade = { ...SHADOW_SHADE_DEFAULTS, ...style.shadowShade }
     light['--ui-shadow-color'] = shadeRef(ramp, shade.light)
     dark['--ui-shadow-color'] = shadeRef(ramp, shade.dark)
-  } else if (style.shadowColor && style.shadowColor !== 'default') {
-    const value = SHADOW_COLOR_VALUES[style.shadowColor]
+  } else if (shadowColorMode) {
+    const value = SHADOW_COLOR_VALUES[shadowColorMode]
     light['--ui-shadow-color'] = value.light
     dark['--ui-shadow-color'] = value.dark
   }

From 15124262334acc27623e2560fe8cb85bbd337c83 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 25 Jul 2026 16:31:56 +0200
Subject: [PATCH 166/185] feat(theme-studio): add button and badge variant
 color specifications

---
 .../theme-studio/ThemeStudioViewA11y.vue      | 121 +++++++++++++++++-
 1 file changed, 119 insertions(+), 2 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioViewA11y.vue b/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
index d18056e7b6..0c8f83bc61 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { contrastRatio } from '../../utils/theme-engine'
+import type { ButtonProps } from '@nuxt/ui'
+import { blendColors, contrastRatio } from '../../utils/theme-engine'
 
 /**
  * WCAG contrast matrix for the CURRENT theme: every text-role token against
@@ -33,6 +34,23 @@ const BACKGROUNDS = [
 /** Solid surfaces (buttons, badges) render --ui-text-inverted on the alias. */
 const SOLIDS = FOREGROUNDS.slice(5)
 
+/**
+ * The color/variant grid buttons and badges actually paint. Tinted variants
+ * use an alpha of the alias over the page background, so the measured pair is
+ * the composited pixel — not the alias against a surface it never touches.
+ */
+const VARIANTS = ['solid', 'outline', 'soft', 'subtle', 'ghost', 'link'] as const
+
+const VARIANT_COLORS: Array<{ key: NonNullable<ButtonProps['color']>, label: string, icon: string }> = [
+  { key: 'primary', label: 'Primary', icon: 'i-lucide-rocket' },
+  { key: 'secondary', label: 'Secondary', icon: 'i-lucide-sparkles' },
+  { key: 'success', label: 'Success', icon: 'i-lucide-circle-check' },
+  { key: 'info', label: 'Info', icon: 'i-lucide-info' },
+  { key: 'warning', label: 'Warning', icon: 'i-lucide-triangle-alert' },
+  { key: 'error', label: 'Error', icon: 'i-lucide-circle-x' },
+  { key: 'neutral', label: 'Neutral', icon: 'i-lucide-settings' }
+]
+
 interface Cell {
   fg: string
   bg: string
@@ -41,6 +59,7 @@ interface Cell {
 
 const matrix = ref<Cell[][]>([])
 const solidRow = ref<Cell[]>([])
+const variantMatrix = ref<Cell[][]>([])
 
 function resolveToken(styles: CSSStyleDeclaration, token: string): string {
   return styles.getPropertyValue(token).trim()
@@ -61,6 +80,52 @@ function compute() {
     const bgColor = resolveToken(styles, solid.token)
     return { fg: inverted, bg: bgColor, ratio: contrastRatio(inverted, bgColor) }
   })
+
+  const page = resolveToken(styles, '--ui-bg')
+  // Alpha of a token over the page background — `bg-primary/10` as a pixel.
+  const tint = (token: string, alpha: number) => blendColors(resolveToken(styles, token), page, alpha) ?? ''
+
+  variantMatrix.value = VARIANT_COLORS.map(({ key }) => {
+    const specs = key === 'neutral'
+      ? neutralSpecs(styles, page, inverted)
+      : semanticSpecs(styles, `--ui-${key}`, page, inverted, tint)
+
+    return specs.map(spec => ({ ...spec, ratio: contrastRatio(spec.fg, spec.bg) }))
+  })
+}
+
+/** Per-variant fg/bg for a semantic alias, in VARIANTS order. */
+function semanticSpecs(
+  styles: CSSStyleDeclaration,
+  token: string,
+  page: string,
+  inverted: string,
+  tint: (token: string, alpha: number) => string
+): Array<Omit<Cell, 'ratio'>> {
+  const color = resolveToken(styles, token)
+  const tinted = tint(token, 0.1)
+  return [
+    { fg: inverted, bg: color },
+    { fg: color, bg: page },
+    { fg: color, bg: tinted },
+    { fg: color, bg: tinted },
+    { fg: color, bg: page },
+    { fg: color, bg: page }
+  ]
+}
+
+/** Neutral resolves to surface/text tokens rather than a semantic alias. */
+function neutralSpecs(styles: CSSStyleDeclaration, page: string, inverted: string): Array<Omit<Cell, 'ratio'>> {
+  const text = resolveToken(styles, '--ui-text')
+  const elevated = resolveToken(styles, '--ui-bg-elevated')
+  return [
+    { fg: inverted, bg: resolveToken(styles, '--ui-bg-inverted') },
+    { fg: text, bg: page },
+    { fg: text, bg: elevated },
+    { fg: text, bg: elevated },
+    { fg: text, bg: page },
+    { fg: resolveToken(styles, '--ui-text-muted'), bg: page }
+  ]
 }
 
 /**
@@ -150,7 +215,7 @@ function formatRatio(ratio: number | null): string {
                       <span class="tabular-nums font-mono opacity-80" :style="{ color: matrix[row][col].fg }">
                         {{ formatRatio(matrix[row][col].ratio) }}
                       </span>
-                      <UBadge :label="level(matrix[row][col].ratio).label" :color="level(matrix[row][col].ratio).color" variant="subtle" size="sm" />
+                      <UBadge :label="level(matrix[row][col].ratio).label" :color="level(matrix[row][col].ratio).color" variant="solid" size="sm" />
                     </span>
                   </div>
                 </td>
@@ -185,6 +250,58 @@ function formatRatio(ratio: number | null): string {
           </div>
         </div>
       </div>
+
+      <div>
+        <h2 class="text-sm font-semibold text-highlighted mb-1">
+          Button &amp; badge variants
+        </h2>
+        <p class="text-xs text-muted mb-4">
+          Every color × variant as it paints on the page background — tinted variants are measured against the
+          composited pixel, not the raw alias.
+        </p>
+
+        <div class="overflow-x-auto">
+          <table class="w-full text-xs">
+            <thead>
+              <tr>
+                <th class="text-left font-medium text-muted p-2" />
+                <th v-for="variant in VARIANTS" :key="variant" class="text-left font-medium text-muted p-2 capitalize">
+                  {{ variant }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(color, row) in VARIANT_COLORS" :key="color.key">
+                <th class="text-left font-medium text-muted p-2 whitespace-nowrap">
+                  {{ color.label }}
+                </th>
+                <td v-for="(variant, col) in VARIANTS" :key="variant" class="p-1 align-top">
+                  <UButton
+                    v-if="variantMatrix[row]?.[col]"
+                    as="span"
+                    :color="color.key"
+                    :variant="variant"
+                    :icon="color.icon"
+                    block
+                    :label="formatRatio(variantMatrix[row][col].ratio)"
+                    size="sm"
+                    :ui="{ label: 'font-mono tabular-nums' }"
+                  >
+                    <template #trailing>
+                      <UBadge
+                        :label="level(variantMatrix[row][col].ratio).label"
+                        :color="level(variantMatrix[row][col].ratio).color"
+                        variant="solid"
+                        size="sm"
+                      />
+                    </template>
+                  </UButton>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
     </div>
   </div>
 </template>

From 204e2a80c1886f6f7a552909f14cee4c8f913f22 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 25 Jul 2026 23:54:00 +0200
Subject: [PATCH 167/185] refactor(theme-studio): collapse shadows into one
 Custom config
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the parallel soft/hard shadow machinery with a single studio-driven
Custom config (offset/blur/spread + opacity + colour), scaled per Tailwind
size by geometry with uniform alpha so the opacity slider reads true.

- Inherit leaves native Tailwind shadows untouched; Custom drives a gated
  --shadow-* ramp and None strips it, so content (prose images) now follows
  the theme. Exports emit the ramp as @theme tokens for the same reach.
- soft/hard fold into 'custom' (tolerated as legacy aliases, migrated on
  load). Presets migrated; bold ones set explicit opacity.
- Components: cards/alerts move up to shadow-lg; the button keeps its
  bespoke press-effect; overlays ride the ramp.
- Controls lead with the primary sliders; colour + shade sliders fold out
  last behind a toggle. Border shades relocate from Colors→Neutral into the
  Borders section via a shared ThemeStudioTokenShades component.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/app/assets/css/main.css                  |  61 +++++++-
 .../theme-studio/ThemeStudioColorSection.vue  |  48 +------
 .../theme-studio/ThemeStudioControlsStyle.vue | 119 +++++++++++-----
 .../theme-studio/ThemeStudioTokenShades.vue   | 121 ++++++++++++++++
 docs/app/composables/useThemeStudio.ts        |  13 +-
 docs/app/plugins/theme.ts                     |  42 ++++++
 docs/app/utils/theme-engine/export.ts         |  33 ++++-
 docs/app/utils/theme-engine/import.ts         |  26 ++--
 docs/app/utils/theme-engine/oklch.ts          |  16 +++
 docs/app/utils/theme-engine/presets.ts        |  17 ++-
 docs/app/utils/theme-engine/styles.ts         | 134 ++++++------------
 test/utils/theme-engine.spec.ts               |  84 +++++++----
 test/utils/theme-import.spec.ts               |   4 +-
 13 files changed, 495 insertions(+), 223 deletions(-)
 create mode 100644 docs/app/components/theme-studio/ThemeStudioTokenShades.vue

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index fe45b5989b..76422bd676 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -13,6 +13,18 @@
   --default-border-width: var(--studio-border-width, 1px);
   --default-ring-width: var(--studio-border-width, 1px);
 
+  /* Shadow ramp stays Tailwind-native by default — Inherit leaves the library
+     shadows completely untouched. Only under :root.shadow-custom does the
+     config-driven scale (--ui-shadow-c-*, defined below) take over each slot.
+     A var() fallback IS the native value, so the override is opt-in per size. */
+  --shadow-2xs: var(--ui-shadow-c-2xs, 0 1px rgb(0 0 0 / 0.05));
+  --shadow-xs: var(--ui-shadow-c-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  --shadow-sm: var(--ui-shadow-c-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1));
+  --shadow-md: var(--ui-shadow-c-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
+  --shadow-lg: var(--ui-shadow-c-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
+  --shadow-xl: var(--ui-shadow-c-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
+  --shadow-2xl: var(--ui-shadow-c-2xl, 0 25px 50px -12px rgb(0 0 0 / 0.25));
+
   --font-sans: 'Public Sans', sans-serif;
 
   --color-green-50: #EFFDF5;
@@ -71,9 +83,11 @@ html.dark .shiki span {
   --ui-shadow-color: var(--ui-color-neutral-950);
 }
 
-/* Hard-shadow geometry defaults; the studio's sliders override these.
-   The -final- colors fold the opacity slider into the shadow color with
-   per-treatment fallbacks (hard: solid, soft: 25%). */
+/* The one shadow config the whole scale derives from: geometry (offset/blur/
+   spread), colour and opacity. The studio's sliders / presets override these —
+   a Soft preset keeps the blur, a Hard preset drops it to 0 and leans on offset.
+   The resting geometry is the crisp fallback presets rely on when they don't
+   set their own; the --shadow-* factors scale it per size. */
 :where(:root) {
   --ui-shadow-offset-x: 3px;
   --ui-shadow-offset-y: 3px;
@@ -81,6 +95,21 @@ html.dark .shiki span {
   --ui-shadow-spread: 0px;
   --ui-shadow-final-hard: color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 100%), transparent);
   --ui-shadow-final-soft: color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 25%), transparent);
+  /* The generalised ramp's alpha IS the opacity slider — uniform across sizes so
+     the slider reads true (100% is solid everywhere, for a neobrutalist theme;
+     low is subtle). Size is expressed through geometry (--ui-shadow-s-*), not by
+     fading small shadows, so a bold config stays bold on a badge as on a modal. */
+  --ui-shadow-alpha: var(--ui-shadow-opacity, 25%);
+  /* Per-size geometry scale (lg is the config's 1× reference); the offset/blur/
+     spread of the one config ride these so a tooltip's shadow is small and a
+     modal's large, from a single set of sliders. */
+  --ui-shadow-s-2xs: 0.15;
+  --ui-shadow-s-xs: 0.25;
+  --ui-shadow-s-sm: 0.4;
+  --ui-shadow-s-md: 0.65;
+  --ui-shadow-s-lg: 1;
+  --ui-shadow-s-xl: 1.5;
+  --ui-shadow-s-2xl: 2.2;
   /* Composed hard shadows, used as shadow-(--ui-shadow-hard*) so
      tailwind-merge can dedupe them against stock shadow-sm/lg classes
      (it can't parse a full shadow-[calc(...)_...] arbitrary value). */
@@ -98,6 +127,32 @@ html.dark .shiki span {
   --ui-inner-shadow: var(--ui-inner-shadow-offset-x) var(--ui-inner-shadow-offset-y) var(--ui-inner-shadow-blur) var(--ui-inner-shadow-spread) var(--ui-shadow-final-inner);
 }
 
+/* Custom shadow: one config — geometry (--ui-shadow-*), opacity (--ui-shadow-a-*)
+   and colour (--ui-shadow-color) — scaled per size (--ui-shadow-s-*) into the
+   ramp's override slots. Single-layer; blur 0 stays crisp, offset carries the
+   size ramp. Active only when the studio flags .shadow-custom on the root. */
+:root:where(.shadow-custom) {
+  --ui-shadow-c-2xs: calc(var(--ui-shadow-offset-x) * var(--ui-shadow-s-2xs)) calc(var(--ui-shadow-offset-y) * var(--ui-shadow-s-2xs)) calc(var(--ui-shadow-blur) * var(--ui-shadow-s-2xs)) calc(var(--ui-shadow-spread) * var(--ui-shadow-s-2xs)) color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-alpha), transparent);
+  --ui-shadow-c-xs: calc(var(--ui-shadow-offset-x) * var(--ui-shadow-s-xs)) calc(var(--ui-shadow-offset-y) * var(--ui-shadow-s-xs)) calc(var(--ui-shadow-blur) * var(--ui-shadow-s-xs)) calc(var(--ui-shadow-spread) * var(--ui-shadow-s-xs)) color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-alpha), transparent);
+  --ui-shadow-c-sm: calc(var(--ui-shadow-offset-x) * var(--ui-shadow-s-sm)) calc(var(--ui-shadow-offset-y) * var(--ui-shadow-s-sm)) calc(var(--ui-shadow-blur) * var(--ui-shadow-s-sm)) calc(var(--ui-shadow-spread) * var(--ui-shadow-s-sm)) color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-alpha), transparent);
+  --ui-shadow-c-md: calc(var(--ui-shadow-offset-x) * var(--ui-shadow-s-md)) calc(var(--ui-shadow-offset-y) * var(--ui-shadow-s-md)) calc(var(--ui-shadow-blur) * var(--ui-shadow-s-md)) calc(var(--ui-shadow-spread) * var(--ui-shadow-s-md)) color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-alpha), transparent);
+  --ui-shadow-c-lg: calc(var(--ui-shadow-offset-x) * var(--ui-shadow-s-lg)) calc(var(--ui-shadow-offset-y) * var(--ui-shadow-s-lg)) calc(var(--ui-shadow-blur) * var(--ui-shadow-s-lg)) calc(var(--ui-shadow-spread) * var(--ui-shadow-s-lg)) color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-alpha), transparent);
+  --ui-shadow-c-xl: calc(var(--ui-shadow-offset-x) * var(--ui-shadow-s-xl)) calc(var(--ui-shadow-offset-y) * var(--ui-shadow-s-xl)) calc(var(--ui-shadow-blur) * var(--ui-shadow-s-xl)) calc(var(--ui-shadow-spread) * var(--ui-shadow-s-xl)) color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-alpha), transparent);
+  --ui-shadow-c-2xl: calc(var(--ui-shadow-offset-x) * var(--ui-shadow-s-2xl)) calc(var(--ui-shadow-offset-y) * var(--ui-shadow-s-2xl)) calc(var(--ui-shadow-blur) * var(--ui-shadow-s-2xl)) calc(var(--ui-shadow-spread) * var(--ui-shadow-s-2xl)) color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-alpha), transparent);
+}
+
+/* None: strip every default shadow-* to nothing so raw content (screenshots)
+   goes flat like the components do under the None treatment. */
+:root:where(.shadow-none) {
+  --ui-shadow-c-2xs: 0 0 transparent;
+  --ui-shadow-c-xs: 0 0 transparent;
+  --ui-shadow-c-sm: 0 0 transparent;
+  --ui-shadow-c-md: 0 0 transparent;
+  --ui-shadow-c-lg: 0 0 transparent;
+  --ui-shadow-c-xl: 0 0 transparent;
+  --ui-shadow-c-2xl: 0 0 transparent;
+}
+
 :where(.dark) {
   --ui-shadow-color: black;
 }
\ No newline at end of file
diff --git a/docs/app/components/theme-studio/ThemeStudioColorSection.vue b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
index 8737eecb88..de9e92da79 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADE_LADDER, SHADE_LADDERS, storedStopStep, canonicalTokenShades } from '../../utils/theme-engine'
+import { TOKEN_SHADE_TARGETS, SHADE_LADDER, SHADE_LADDERS, storedStopStep, canonicalTokenShades } from '../../utils/theme-engine'
 import type { ColorAlias, SectionKey, ShadeStop } from '../../utils/theme-engine'
 
 /**
@@ -81,13 +81,6 @@ const sections = TOKEN_SHADE_TARGETS
       dark: tokenShadeControl(target.token, target.defaults, 'dark')
     }
   }))
-
-// Neutral's token groups (background, text, borders) fold individually —
-// all closed by default so the big panel opens compact.
-const tokenGroups = TOKEN_GROUPS
-  .map(group => ({ ...group, sections: sections.filter(section => section.group === group.key) }))
-  .filter(group => group.sections.length)
-const openGroups = reactive<Record<string, boolean>>({})
 </script>
 
 <template>
@@ -141,42 +134,9 @@ const openGroups = reactive<Record<string, boolean>>({})
         />
       </div>
 
-      <!-- Every neutral-ramped semantic token — the big one. -->
-      <div v-else-if="shadeEditor" class="flex flex-col gap-1 pt-2">
-        <UCollapsible v-for="tokenGroup in tokenGroups" :key="tokenGroup.key" v-model:open="openGroups[tokenGroup.key]">
-          <UButton
-            :label="tokenGroup.label"
-            :icon="openGroups[tokenGroup.key] ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            block
-            :active="openGroups[tokenGroup.key]"
-            active-variant="subtle"
-            class="justify-start"
-          />
-
-          <template #content>
-            <div class="flex flex-col gap-3 pt-2 pb-1 px-1">
-              <div v-for="section in tokenGroup.sections" :key="section.token" class="flex flex-col gap-1.5">
-                <span class="text-xs text-muted select-none">{{ section.label }}</span>
-
-                <ThemeStudioSliderRow
-                  v-for="(slider, modeName) in section.sliders"
-                  :key="modeName"
-                  v-model="slider.model.value"
-                  :mode="modeName"
-                  :chip="rampChip(section.ramp)"
-                  :ladder="shadeLadder"
-                  resettable
-                  :dirty="slider.dirty.value"
-                  @reset="slider.reset()"
-                />
-              </div>
-            </div>
-          </template>
-        </UCollapsible>
-      </div>
+      <!-- Every neutral-ramped semantic token — background and text; borders
+           moved to the Style panel's Borders section. -->
+      <ThemeStudioTokenShades v-else-if="shadeEditor" :alias="alias" :groups="['background', 'text']" />
     </div>
   </ThemeStudioSection>
 </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioControlsStyle.vue b/docs/app/components/theme-studio/ThemeStudioControlsStyle.vue
index 7fa04afd75..e536ead983 100644
--- a/docs/app/components/theme-studio/ThemeStudioControlsStyle.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControlsStyle.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SHADE_LADDER, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, BORDER_WIDTH_DEFAULT, SHADOW_GEOMETRY_DEFAULTS, INNER_SHADOW_GEOMETRY_DEFAULTS } from '../../utils/theme-engine'
+import { SHADE_LADDER, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, BORDER_WIDTH_DEFAULT, SHADOW_GEOMETRY_DEFAULTS, INNER_SHADOW_GEOMETRY_DEFAULTS, isCustomShadow } from '../../utils/theme-engine'
 import type { ShadeStop } from '../../utils/theme-engine'
 
 const { style, setStyle, primaryChip, neutralChip, baselineDoc } = useThemeStudio()
@@ -25,7 +25,7 @@ const shadowStyle = computed({
   // — Inherit means a clean slate, and the next Custom reseeds fresh.
   set: (value: any) => setStyle(value === 'custom'
     ? {
-        shadow: 'hard',
+        shadow: 'custom',
         ...(style.value.shadowGeometry === undefined ? { shadowGeometry: { x: 0, y: 6, blur: 12, spread: 0 } } : {}),
         ...(style.value.shadowOpacity === undefined ? { shadowOpacity: 20 } : {})
       }
@@ -41,11 +41,11 @@ const INNER_SHADOW_OPTIONS = [
 
 const innerShadowStyle = computed({
   get: () => (!style.value.innerShadow || style.value.innerShadow === 'none') ? 'none' : 'custom',
-  set: (value: any) => setStyle({ innerShadow: value === 'custom' ? 'hard' : 'none' })
+  set: (value: any) => setStyle({ innerShadow: value === 'custom' ? 'custom' : 'none' })
 })
 
 const shadowOpacity = computed({
-  get: () => style.value.shadowOpacity ?? (style.value.shadow === 'hard' ? 100 : 25),
+  get: () => style.value.shadowOpacity ?? 25,
   set: (value: number) => setStyle({ shadowOpacity: value })
 })
 
@@ -209,7 +209,7 @@ const shadowSections = [{
   shades: shadowShades,
   opacity: shadowOpacity,
   geometry: geometrySliders('shadowGeometry', SHADOW_GEOMETRY_DEFAULTS),
-  hard: computed(() => (style.value.shadow || 'none') === 'hard')
+  hard: computed(() => isCustomShadow(style.value.shadow))
 }, {
   label: 'Inner shadow',
   dirtyKey: 'innerShadow' as const,
@@ -220,8 +220,16 @@ const shadowSections = [{
   shades: innerShadowShades,
   opacity: innerShadowOpacity,
   geometry: geometrySliders('innerShadowGeometry', INNER_SHADOW_GEOMETRY_DEFAULTS),
-  hard: computed(() => style.value.innerShadow === 'hard')
+  hard: computed(() => isCustomShadow(style.value.innerShadow))
 }]
+
+// Per-section fold-out for the shade fine-tuning, mirroring the Colors panel's
+// "Adjust shades" affordance — the per-mode shade sliders stay out of the main
+// shadow flow until asked for. Keyed by dirtyKey so the two sections toggle
+// independently.
+const shadeEditors = reactive<Record<string, boolean>>({})
+const borderShadeEditor = ref(false)
+const isShadeColor = (color?: string) => color === 'shade' || color === 'primary-shade'
 </script>
 
 <template>
@@ -229,6 +237,22 @@ const shadowSections = [{
   <div class="flex flex-col">
     <template v-for="section in shadowSections" :key="section.label">
       <ThemeStudioSection :label="section.label" class="p-4" :section-key="section.dirtyKey">
+        <template v-if="section.model.value === 'custom'" #actions>
+          <UTooltip text="Colour & shades">
+            <UButton
+              icon="i-lucide-settings-2"
+              color="neutral"
+              variant="ghost"
+              size="xs"
+              :active="shadeEditors[section.dirtyKey]"
+              active-color="primary"
+              active-variant="subtle"
+              :aria-label="`${section.label} colour and shades`"
+              @click="shadeEditors[section.dirtyKey] = !shadeEditors[section.dirtyKey]"
+            />
+          </UTooltip>
+        </template>
+
         <div>
           <UTabs
             v-model="section.model.value"
@@ -240,27 +264,6 @@ const shadowSections = [{
           />
 
           <div v-if="section.model.value === 'custom'" class="mt-1.5 flex flex-col gap-2">
-            <ThemeStudioDefaultSelect
-              v-model="section.color.value"
-              :items="section.colorItems"
-              icon="i-lucide-paint-bucket"
-              class="w-full"
-              :aria-label="`${section.label} color`"
-            />
-
-            <template v-if="section.color.value === 'shade' || section.color.value === 'primary-shade'">
-              <ThemeStudioSliderRow
-                v-for="(slider, modeName) in section.shades"
-                :key="modeName"
-                v-model="slider.model.value"
-                :mode="modeName"
-                :chip="section.color.value === 'primary-shade' ? primaryChip : neutralChip"
-                resettable
-                :dirty="slider.dirty.value"
-                @reset="slider.reset()"
-              />
-            </template>
-
             <ThemeStudioSliderRow
               v-model="section.opacity.value"
               label="Opacity"
@@ -282,6 +285,30 @@ const shadowSections = [{
                 unit="px"
               />
             </template>
+
+            <!-- Colour and its per-mode shade sliders fold out from the header
+                 toggle and sit last, keeping the main flow to opacity/geometry. -->
+            <template v-if="shadeEditors[section.dirtyKey]">
+              <ThemeStudioDefaultSelect
+                v-model="section.color.value"
+                :items="section.colorItems"
+                icon="i-lucide-paint-bucket"
+                class="w-full"
+                :aria-label="`${section.label} color`"
+              />
+
+              <ThemeStudioSliderRow
+                v-for="(slider, modeName) in section.shades"
+                v-show="isShadeColor(section.color.value)"
+                :key="modeName"
+                v-model="slider.model.value"
+                :mode="modeName"
+                :chip="section.color.value === 'primary-shade' ? primaryChip : neutralChip"
+                resettable
+                :dirty="slider.dirty.value"
+                @reset="slider.reset()"
+              />
+            </template>
           </div>
         </div>
       </ThemeStudioSection>
@@ -290,6 +317,22 @@ const shadowSections = [{
     </template>
 
     <ThemeStudioSection label="Borders" class="p-4" section-key="borders">
+      <template v-if="borderStyle === 'custom'" #actions>
+        <UTooltip text="Colour & shades">
+          <UButton
+            icon="i-lucide-settings-2"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            :active="borderShadeEditor"
+            active-color="primary"
+            active-variant="subtle"
+            aria-label="Border colour and shades"
+            @click="borderShadeEditor = !borderShadeEditor"
+          />
+        </UTooltip>
+      </template>
+
       <div>
         <UTabs
           v-model="borderStyle"
@@ -318,17 +361,21 @@ const shadowSections = [{
             </UTooltip>
           </div>
 
-          <ThemeStudioDefaultSelect
-            v-model="borderColor"
-            :items="borderColorItems"
-            icon="i-lucide-paint-bucket"
-            class="w-full"
-            aria-label="Border color"
-          />
+          <!-- Frame colour, its shade sliders, and the neutral border tokens
+               (relocated from the Colors panel) fold out from the header toggle
+               and sit last, mirroring the shadow sections. -->
+          <template v-if="borderShadeEditor">
+            <ThemeStudioDefaultSelect
+              v-model="borderColor"
+              :items="borderColorItems"
+              icon="i-lucide-paint-bucket"
+              class="w-full"
+              aria-label="Border color"
+            />
 
-          <template v-if="borderColor === 'shade' || borderColor === 'primary-shade'">
             <ThemeStudioSliderRow
               v-for="(slider, modeName) in borderShades"
+              v-show="borderColor === 'shade' || borderColor === 'primary-shade'"
               :key="modeName"
               v-model="slider.model.value"
               :mode="modeName"
@@ -337,6 +384,8 @@ const shadowSections = [{
               :dirty="slider.dirty.value"
               @reset="slider.reset()"
             />
+
+            <ThemeStudioTokenShades :alias="'neutral'" :groups="['border']" />
           </template>
         </div>
       </div>
diff --git a/docs/app/components/theme-studio/ThemeStudioTokenShades.vue b/docs/app/components/theme-studio/ThemeStudioTokenShades.vue
new file mode 100644
index 0000000000..d6383850d3
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioTokenShades.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADE_LADDER, SHADE_LADDERS, storedStopStep, canonicalTokenShades } from '../../utils/theme-engine'
+import type { ColorAlias, TokenGroup, ShadeStop } from '../../utils/theme-engine'
+
+/**
+ * Per-mode shade sliders for the semantic tokens of one ramp, grouped and
+ * folded. Shared by the Colors panel (background/text on neutral) and the
+ * Style panel's Borders section (the border group), so a token group can live
+ * next to whichever control it belongs with.
+ */
+const props = defineProps<{
+  alias: ColorAlias
+  /** Restrict to these token groups; omit to show every group with tokens. */
+  groups?: TokenGroup[]
+}>()
+
+const { style, setStyle, rampChip, baselineDoc, isCustomPalette, paletteParams } = useThemeStudio()
+
+/** The active preset's own shade choices — what a row reset restores. */
+const baselineShades = computed(() => canonicalTokenShades(baselineDoc.value))
+
+// A custom palette's tokens can pick every stop its density emits — the
+// sliders (and their model mapping) span that ladder, up to 91 stops. Stock
+// ramps only define the standard 11, so they stay on the short ladder.
+const shadeLadder = computed<readonly ShadeStop[]>(() => (isCustomPalette(props.alias)
+  ? SHADE_LADDERS[storedStopStep(paletteParams.value[props.alias])]
+  : SHADE_LADDER))
+
+// Per-token shade sliders, one light/dark pair. Only the touched mode is
+// written so an untouched mode never becomes an override. Dirty and reset
+// measure against the BASELINE preset's own choice for the token: reset
+// restores the preset's shade, or deletes the override entirely when the
+// preset made no choice (the token's real default may not sit on the ramp
+// at all — --ui-bg is literally `white` — so writing a "default shade"
+// would pin a lookalike override over it).
+function tokenShadeControl(token: string, defaults: { light: ShadeStop, dark: ShadeStop }, target: 'light' | 'dark') {
+  const model = computed({
+    get: () => {
+      const value = style.value.tokenShades?.[token]?.[target] ?? defaults[target]
+      // A stop chosen at a finer density, then coarsened away, no longer sits
+      // on the ladder (indexOf -1) — clamp to 0 so the slider stays grabbable.
+      return Math.max(0, shadeLadder.value.indexOf(value as ShadeStop))
+    },
+    set: (index: number) => {
+      setStyle({
+        tokenShades: {
+          ...style.value.tokenShades,
+          [token]: { ...style.value.tokenShades?.[token], [target]: shadeLadder.value[index]! }
+        }
+      })
+    }
+  })
+  const baseline = computed(() => baselineShades.value[token]?.[target])
+  const dirty = computed(() => style.value.tokenShades?.[token]?.[target] !== baseline.value)
+  function reset() {
+    const entry: { light?: ShadeStop, dark?: ShadeStop } = { ...style.value.tokenShades?.[token] }
+    if (baseline.value !== undefined) entry[target] = baseline.value
+    else Reflect.deleteProperty(entry, target)
+    const tokenShades = { ...style.value.tokenShades }
+    if (Object.keys(entry).length) tokenShades[token] = entry
+    else Reflect.deleteProperty(tokenShades, token)
+    setStyle({ tokenShades })
+  }
+  return { model, dirty, reset }
+}
+
+const sections = TOKEN_SHADE_TARGETS
+  .filter(target => props.alias === 'neutral' ? target.ramp === 'neutral' : target.token === `--ui-${props.alias}`)
+  .map(target => ({
+    ...target,
+    sliders: {
+      light: tokenShadeControl(target.token, target.defaults, 'light'),
+      dark: tokenShadeControl(target.token, target.defaults, 'dark')
+    }
+  }))
+
+// Groups fold individually — all closed by default so the panel opens compact.
+const tokenGroups = TOKEN_GROUPS
+  .filter(group => !props.groups || props.groups.includes(group.key))
+  .map(group => ({ ...group, sections: sections.filter(section => section.group === group.key) }))
+  .filter(group => group.sections.length)
+const openGroups = reactive<Record<string, boolean>>({})
+</script>
+
+<template>
+  <div class="flex flex-col gap-1 pt-2">
+    <UCollapsible v-for="tokenGroup in tokenGroups" :key="tokenGroup.key" v-model:open="openGroups[tokenGroup.key]">
+      <UButton
+        :label="tokenGroup.label"
+        :icon="openGroups[tokenGroup.key] ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        block
+        :active="openGroups[tokenGroup.key]"
+        active-variant="subtle"
+        class="justify-start"
+      />
+
+      <template #content>
+        <div class="flex flex-col gap-3 pt-2 pb-1 px-1">
+          <div v-for="section in tokenGroup.sections" :key="section.token" class="flex flex-col gap-1.5">
+            <span class="text-xs text-muted select-none">{{ section.label }}</span>
+
+            <ThemeStudioSliderRow
+              v-for="(slider, modeName) in section.sliders"
+              :key="modeName"
+              v-model="slider.model.value"
+              :mode="modeName"
+              :chip="rampChip(section.ramp)"
+              :ladder="shadeLadder"
+              resettable
+              :dirty="slider.dirty.value"
+              @reset="slider.reset()"
+            />
+          </div>
+        </div>
+      </template>
+    </UCollapsible>
+  </div>
+</template>
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index fdd41ab66d..59c2035e31 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -127,6 +127,8 @@ export function useThemeStudio() {
     const previous = styleTokens(previousStyle)
     style.value = { ...style.value, ...options }
     window.localStorage.setItem(THEME_STORAGE_KEYS.style, JSON.stringify(style.value))
+    // The .shadow-custom root flag is kept in sync by a watcher in plugins/theme.ts
+    // (covers presets via applyDoc too), so no per-path toggle is needed here.
 
     // Remove only the tokens the PREVIOUS style emitted and the next one
     // doesn't — never preset/doc-owned values sharing the same names.
@@ -413,7 +415,7 @@ export function useThemeStudio() {
       font: { sans: pick(theme.fonts) },
       // Weighted so most rolls stay clean, with the occasional loud one.
       style: {
-        shadow: pick(['none', 'none', 'soft', 'hard'] as const),
+        shadow: pick(['none', 'none', 'custom', 'custom'] as const),
         border: pick(['default', 'default', 'custom', 'none'] as const)
       }
     }
@@ -423,8 +425,13 @@ export function useThemeStudio() {
     if (doc.style!.border === 'custom' && Math.random() < 0.4) {
       doc.style!.borderColor = pick(['inverted', 'primary', 'neutral'] as const)
     }
-    if (doc.style!.shadow === 'hard' && Math.random() < 0.4) {
-      doc.style!.shadowColor = pick(['black', 'inverted', 'primary'] as const)
+    if (doc.style!.shadow === 'custom') {
+      // One config shadow: roll its geometry between a crisp offset (hard) and a
+      // soft blur, plus an occasional coloured cast.
+      const crisp = Math.random() < 0.5
+      doc.style!.shadowGeometry = crisp ? { x: 3, y: 3, blur: 0, spread: 0 } : { x: 0, y: 6, blur: 12, spread: 0 }
+      doc.style!.shadowOpacity = crisp ? 100 : 25
+      if (Math.random() < 0.4) doc.style!.shadowColor = pick(['black', 'inverted', 'primary'] as const)
     }
     if (Math.random() < 0.25) {
       doc.style!.defaults = { variant: pick(['solid', 'outline', 'soft', 'subtle'] as const) }
diff --git a/docs/app/plugins/theme.ts b/docs/app/plugins/theme.ts
index 3fe8e961c9..0d7ce4619f 100644
--- a/docs/app/plugins/theme.ts
+++ b/docs/app/plugins/theme.ts
@@ -51,6 +51,37 @@ export default defineNuxtPlugin({
       restoreNamedState(THEME_STORAGE_KEYS.style, THEME_STATE_KEYS.stylePrefs)
       restoreNamedState(THEME_STORAGE_KEYS.paletteParams, THEME_STATE_KEYS.paletteParams)
 
+      // Migrate legacy persisted shadows onto the one 'custom' config. Both
+      // aliases still read as Custom everywhere, but canonicalising here means
+      // the next save writes 'custom' — and a bare 'soft' predates explicit
+      // geometry, so hand it the blurred default it used to imply.
+      const persisted = useState<any>(THEME_STATE_KEYS.stylePrefs)
+      if (persisted.value && typeof persisted.value === 'object') {
+        const next = { ...persisted.value }
+        if (next.shadow === 'soft' && next.shadowGeometry === undefined) {
+          next.shadowGeometry = { x: 0, y: 6, blur: 12, spread: 0 }
+        }
+        if (next.shadow === 'soft' || next.shadow === 'hard') next.shadow = 'custom'
+        if (next.innerShadow === 'soft' || next.innerShadow === 'hard') next.innerShadow = 'custom'
+        persisted.value = next
+      }
+
+      // Keep the .shadow-custom root flag in lockstep with the shadow treatment
+      // on EVERY path: setStyle (sliders) and applyDoc (presets, which set
+      // style.value directly and bypass setStyle) both flow through this one
+      // watcher, so gated shadows update without a reload. One persistent
+      // watcher here beats per-composable toggles scattered across call sites.
+      const stylePrefs = useState<{ shadow?: string }>(THEME_STATE_KEYS.stylePrefs)
+      watch(() => stylePrefs.value?.shadow, (shadow) => {
+        const flags = document.documentElement.classList
+        // Custom swaps the default ramp for the config-driven scale; None strips
+        // it to nothing; Inherit leaves the native Tailwind ramp. ('soft'/'hard'
+        // are legacy aliases of the one config shadow.)
+        const custom = shadow === 'custom' || shadow === 'soft' || shadow === 'hard'
+        flags.toggle('shadow-custom', custom)
+        flags.toggle('shadow-none', shadow === 'flat')
+      }, { immediate: true })
+
       try {
         const extras = JSON.parse(localStorage.getItem('nuxt-ui-ai-theme') || '{}')
         if (extras.colors) {
@@ -162,6 +193,17 @@ export default defineNuxtPlugin({
           `.replace(/\s+/g, ' '),
           type: 'text/javascript',
           tagPriority: -1
+        }, {
+          innerHTML: `
+            try {
+              var st = JSON.parse(localStorage.getItem('nuxt-ui-style') || '{}');
+              var sh = st && st.shadow;
+              if (sh === 'custom' || sh === 'soft' || sh === 'hard') document.documentElement.classList.add('shadow-custom');
+              else if (sh === 'flat') document.documentElement.classList.add('shadow-none');
+            } catch (e) {}
+          `.replace(/\s+/g, ' '),
+          type: 'text/javascript',
+          tagPriority: -1
         }, {
           innerHTML: `
             var bapEl = document.querySelector('style#nuxt-ui-black-as-primary');
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index fd0a1d8ccd..756b98dce7 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -1,7 +1,7 @@
 import { themeIcons } from '../theme'
 import type { ThemeDoc } from './types'
 import { DEFAULT_COLORS, THEME_DEFAULTS } from './types'
-import { styleComponents, styleTokens, mergeUi, BORDER_WIDTH_DEFAULT } from './styles'
+import { styleComponents, styleTokens, mergeUi, isCustomShadow, BORDER_WIDTH_DEFAULT } from './styles'
 import { LIBRARY_TOKEN_DEFAULTS } from './resolve'
 
 /**
@@ -41,6 +41,31 @@ export function generateCSS(doc: ThemeDoc): string {
     themeLines.push(`  --default-border-width: ${borderWidth}px;`)
     themeLines.push(`  --default-ring-width: ${borderWidth}px;`)
   }
+  // Redefine the whole shadow ramp as @theme tokens so the consumer's compile
+  // rewrites every bare shadow-* utility — the same reach the docs get from
+  // gating --shadow-* in main.css, but unconditional here since an export is
+  // one fixed theme (no Inherit/Custom toggle to switch between). Custom scales
+  // the single config per size (mirrors main.css's .shadow-custom block); None
+  // flattens content the way the component fragments already flatten widgets;
+  // Inherit emits nothing and leaves Tailwind's native shadows untouched.
+  // The per-size geometry scale below must stay in step with main.css. Alpha is
+  // uniform (the opacity slider read literally), so size shows through geometry.
+  const SHADOW_RAMP = [
+    { size: '2xs', s: 0.15 },
+    { size: 'xs', s: 0.25 },
+    { size: 'sm', s: 0.4 },
+    { size: 'md', s: 0.65 },
+    { size: 'lg', s: 1 },
+    { size: 'xl', s: 1.5 },
+    { size: '2xl', s: 2.2 }
+  ]
+  if (isCustomShadow(doc.style?.shadow)) {
+    for (const { size, s } of SHADOW_RAMP) {
+      themeLines.push(`  --shadow-${size}: calc(var(--ui-shadow-offset-x) * ${s}) calc(var(--ui-shadow-offset-y) * ${s}) calc(var(--ui-shadow-blur) * ${s}) calc(var(--ui-shadow-spread) * ${s}) color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 25%), transparent);`)
+    }
+  } else if (doc.style?.shadow === 'flat') {
+    for (const { size } of SHADOW_RAMP) themeLines.push(`  --shadow-${size}: 0 0 transparent;`)
+  }
   if (themeLines.length) {
     lines.push('', '@theme {', ...themeLines, '}')
   }
@@ -114,8 +139,8 @@ export function generateCSS(doc: ThemeDoc): string {
     style.light['--ui-shadow-color'] = 'var(--ui-color-neutral-950)'
     style.dark['--ui-shadow-color'] = 'black'
   }
-  if (doc.style?.shadow === 'hard') {
-    // The hard-shadow classes reference the geometry variables — a
+  if (isCustomShadow(doc.style?.shadow)) {
+    // The custom-shadow classes reference the geometry variables — a
     // standalone export must define them even at default values.
     if (!style.light['--ui-shadow-offset-x']) {
       style.light['--ui-shadow-offset-x'] = '3px'
@@ -134,7 +159,7 @@ export function generateCSS(doc: ThemeDoc): string {
     style.light['--ui-shadow-final-soft'] = 'color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 25%), transparent)'
   }
   if (doc.style?.innerShadow && doc.style.innerShadow !== 'none') {
-    if (doc.style.innerShadow === 'hard') {
+    if (isCustomShadow(doc.style.innerShadow)) {
       if (!style.light['--ui-inner-shadow-offset-x']) {
         style.light['--ui-inner-shadow-offset-x'] = '0px'
         style.light['--ui-inner-shadow-offset-y'] = '2px'
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index e351803de0..065954b458 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -133,6 +133,12 @@ function parseDeclaration(result: ParsedCSS, selector: string, prop: string, val
       // always exported alongside --default-border-width with the same value
       return true
     }
+    if (/^--shadow-(?:2xs|xs|sm|md|lg|xl|2xl)$/.test(prop)) {
+      // Derived shadow ramp — regenerated from the shadow style on export
+      // (scaled config, or transparent under None), so it carries no
+      // independent data to import; the treatment is read from the classes.
+      return true
+    }
     return false
   }
 
@@ -294,7 +300,7 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
   const frameColor = take('--ui-frame-color')
 
   if (geometry.x.light !== undefined) {
-    style.shadow = 'hard'
+    style.shadow = 'custom'
     const parsed = {
       x: Number.parseFloat(geometry.x.light),
       y: Number.parseFloat(geometry.y.light ?? '3'),
@@ -306,10 +312,10 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
       style.shadowGeometry = parsed
     }
   } else if (finals.hard.light !== undefined || finals.soft.light !== undefined) {
-    style.shadow = 'soft'
+    style.shadow = 'custom'
   }
 
-  if (style.shadow !== 'hard') {
+  if (style.shadow !== 'custom') {
     // dark-only geometry can't seed a hard shadow — keep it as tokens
     putBack('--ui-shadow-offset-x', geometry.x)
     putBack('--ui-shadow-offset-y', geometry.y)
@@ -337,7 +343,7 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
   take('--ui-inner-shadow')
 
   if (innerGeometry.x.light !== undefined) {
-    style.innerShadow = 'hard'
+    style.innerShadow = 'custom'
     const parsed = {
       x: Number.parseFloat(innerGeometry.x.light),
       y: Number.parseFloat(innerGeometry.y.light ?? '2'),
@@ -348,10 +354,10 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
       style.innerShadowGeometry = parsed
     }
   } else if (innerFinal.light !== undefined) {
-    style.innerShadow = 'soft'
+    style.innerShadow = 'custom'
   }
 
-  if (style.innerShadow !== 'hard') {
+  if (style.innerShadow !== 'custom') {
     putBack('--ui-inner-shadow-offset-x', innerGeometry.x)
     putBack('--ui-inner-shadow-offset-y', innerGeometry.y)
     putBack('--ui-inner-shadow-blur', innerGeometry.blur)
@@ -610,8 +616,8 @@ function detectFrame(components: Record<string, any>): boolean {
 /** Shadow fallback when only a config was pasted (CSS normally decides). */
 function detectShadow(components: Record<string, any>): StyleOptions['shadow'] {
   const slots = Object.values(components).flatMap(component => Object.values(component?.slots || {})) as string[]
-  if (slots.some(classes => classes.includes('--ui-shadow-hard') || classes.includes('var(--ui-shadow-offset-x)'))) return 'hard'
-  if (slots.some(classes => classes.includes('--ui-shadow-final-soft'))) return 'soft'
+  if (slots.some(classes => classes.includes('--ui-shadow-hard') || classes.includes('var(--ui-shadow-offset-x)'))) return 'custom'
+  if (slots.some(classes => classes.includes('--ui-shadow-final-soft'))) return 'custom'
   // the flat treatment is bare shadow-none on the overlay surfaces
   if (components.popover?.slots?.content?.includes('shadow-none') && components.toast?.slots?.root?.includes('shadow-none')) return 'flat'
   return undefined
@@ -620,8 +626,8 @@ function detectShadow(components: Record<string, any>): StyleOptions['shadow'] {
 /** Inner-shadow fallback when only a config was pasted. */
 function detectInnerShadow(components: Record<string, any>): StyleOptions['innerShadow'] {
   const slots = Object.values(components).flatMap(component => Object.values(component?.slots || {})) as string[]
-  if (slots.some(classes => classes.includes('(--ui-inner-shadow)'))) return 'hard'
-  if (slots.some(classes => classes.includes('--ui-shadow-final-inner'))) return 'soft'
+  if (slots.some(classes => classes.includes('(--ui-inner-shadow)'))) return 'custom'
+  if (slots.some(classes => classes.includes('--ui-shadow-final-inner'))) return 'custom'
   return undefined
 }
 
diff --git a/docs/app/utils/theme-engine/oklch.ts b/docs/app/utils/theme-engine/oklch.ts
index efc6ebf8dc..0cfa5eb837 100644
--- a/docs/app/utils/theme-engine/oklch.ts
+++ b/docs/app/utils/theme-engine/oklch.ts
@@ -165,6 +165,22 @@ export function parseCssColor(value: string): string | undefined {
   return color ? formatOklch(color) : undefined
 }
 
+/**
+ * Composite `color` at `alpha` over `backdrop` — what the browser actually
+ * paints for `bg-primary/10`. Blending happens in gamma-encoded sRGB, not
+ * linear, so the result matches the rendered pixel. Returns a hex string, or
+ * undefined when either input is unparseable.
+ */
+export function blendColors(color: string, backdrop: string, alpha: number): string | undefined {
+  const fg = parseColor(color)
+  const bg = parseColor(backdrop)
+  if (!fg || !bg) return undefined
+
+  const top = oklchToRgb(clampToGamut(fg))
+  const under = oklchToRgb(clampToGamut(bg))
+  return rgbToHex(top.map((channel, i) => channel * alpha + under[i]! * (1 - alpha)) as [number, number, number])
+}
+
 /** WCAG 2.x relative luminance — linear RGB is exactly what the formula wants. */
 function luminance(color: Oklch): number {
   const [r, g, b] = oklchToLinearRgb(clampToGamut(color)).map(channel => Math.min(1, Math.max(0, channel))) as [number, number, number]
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index a101366295..c2be8b3900 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -78,8 +78,9 @@ export const presets: ThemePreset[] = [{
     // Framed everything in near-black ink, straight-down hard shadows, soft
     // inked inputs, and both modes retuned shade-by-shade toward carbon.
     style: {
-      shadow: 'hard',
+      shadow: 'custom',
       shadowGeometry: { x: 0, y: 3, blur: 0, spread: 0 },
+      shadowOpacity: 100,
       border: 'custom',
       frame: true,
       borderColor: 'shade',
@@ -150,12 +151,12 @@ export const presets: ThemePreset[] = [{
     // the pressed-clay look), app-wide subtle variants, and per-mode shades
     // for the surface stack plus the success/error alias tokens.
     style: {
-      shadow: 'hard',
+      shadow: 'custom',
       shadowColor: 'shade',
       shadowShade: { light: 200, dark: 950 },
       shadowOpacity: 55,
       shadowGeometry: { x: 0, y: 3, blur: 0, spread: 0 },
-      innerShadow: 'hard',
+      innerShadow: 'custom',
       innerShadowGeometry: { x: 0, y: -3, blur: 0, spread: 0 },
       innerShadowOpacity: 50,
       innerShadowColor: 'shade',
@@ -221,9 +222,10 @@ export const presets: ThemePreset[] = [{
     // Soft pink-cast shadows (primary 700 light / 950 dark at 15%) over a
     // top-lit blurred inset in its own lighter shade (500 light / 900 dark).
     style: {
-      shadow: 'soft',
+      shadow: 'custom',
+      shadowGeometry: { x: 0, y: 6, blur: 12, spread: 0 },
       shadowOpacity: 15,
-      innerShadow: 'hard',
+      innerShadow: 'custom',
       innerShadowGeometry: {
         x: 0,
         y: -4,
@@ -298,8 +300,9 @@ export const presets: ThemePreset[] = [{
       }
     },
     style: {
-      shadow: 'hard',
+      shadow: 'custom',
       shadowColor: 'black',
+      shadowOpacity: 100,
       border: 'custom',
       frame: true,
       borderColor: 'black',
@@ -376,7 +379,7 @@ export const presets: ThemePreset[] = [{
     // Blurred warm-gray drop shadows (500 light / 950 dark at 25%) with
     // subtle panels.
     style: {
-      shadow: 'hard',
+      shadow: 'custom',
       shadowGeometry: {
         x: 0,
         y: 2,
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 38b746b801..820b3040c3 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -28,7 +28,17 @@
 import type { ShadeStop } from './types'
 import { SHADES } from './types'
 
-export type ShadowStyle = 'none' | 'flat' | 'soft' | 'hard'
+/**
+ * 'soft'/'hard' are legacy values (old exports/saved state) treated as 'custom'
+ * — the one config-driven shadow whose geometry is a slider, not a mode.
+ */
+export type ShadowStyle = 'none' | 'flat' | 'custom' | 'soft' | 'hard'
+
+/** A config-driven ("Custom") drop or inner shadow, including its legacy aliases. */
+export function isCustomShadow(shadow?: ShadowStyle): boolean {
+  return shadow === 'custom' || shadow === 'soft' || shadow === 'hard'
+}
+
 /** 'bold'/'frame' are legacy values (old exports/saved state) treated as 'custom'. */
 export type BorderStyle = 'default' | 'none' | 'custom' | 'bold' | 'frame'
 export type BorderColor = 'default' | 'inverted' | 'black' | 'white' | 'primary' | 'neutral' | 'shade' | 'primary-shade'
@@ -208,11 +218,6 @@ const FLAT_FIELD_VARIANTS = [
   { variant: 'none', class: 'shadow-none' }
 ]
 
-// Reusable shadow class strings (whole literals so tailwind's scanner sees
-// them). Hard scales mirror the originals: base for field-size surfaces,
-// ×1.5 for panels/overlays, ×0.66 for badge-size ones.
-const SOFT_LG = 'shadow-lg shadow-(color:--ui-shadow-final-soft)'
-
 /**
  * A ramp shade reference — or the literal when the stop is white/black.
  * Standard stops go through the `--ui-color-<ramp>-<stop>` indirection so a
@@ -231,20 +236,17 @@ function shadeRef(ramp: string, stop: ShadeStop | number): string {
   return `var(--ui-color-${ramp}-${stop})`
 }
 
-const HARD_BASE = 'shadow-(--ui-shadow-hard)'
-const HARD_LG = 'shadow-(--ui-shadow-hard-lg)'
-const HARD_SM = 'shadow-(--ui-shadow-hard-sm)'
-
 // The pill tabs' stock trigger shadow is the pre-hydration active-tab fallback
 // (shown before reka mounts its indicator), emitted through the library's
 // `ssr()` helper with this exact modifier chain. A bare `before:shadow-none`
 // won't tailwind-merge against it — the override must carry the same chain.
 const TABS_SSR_SHADOW_NONE = 'in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-none'
 
-const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
+const SHADOW_FRAGMENTS: Record<'none' | 'flat' | 'custom', Fragments> = {
   none: {},
   // Strip the stock shadows the library ships on overlay surfaces — the
-  // studio's None, distinct from Inherit (no treatment at all).
+  // studio's None, distinct from Inherit (no treatment at all). The generalised
+  // ramp is also blanked for raw content via the .shadow-none root flag.
   flat: {
     popover: { slots: { content: 'shadow-none' } },
     dropdownMenu: { slots: { content: 'shadow-none' } },
@@ -261,86 +263,44 @@ const SHADOW_FRAGMENTS: Record<ShadowStyle, Fragments> = {
     // pseudo — strip both so None reads flat like every other surface.
     tabs: { compoundVariants: [{ variant: 'pill', class: { list: 'shadow-none', indicator: 'shadow-none', trigger: TABS_SSR_SHADOW_NONE } }] }
   },
-  soft: {
-    // shadow-(color:--ui-shadow-final-soft) recolors the preset shadows through the
-    // same variable the hard treatment uses, so the color/shade options
-    // apply to soft shadows too (tailwind stock shadows are hardcoded black).
-    button: {
-      slots: { base: 'shadow-sm shadow-(color:--ui-shadow-final-soft)' },
-      // A shadow under an invisible surface reads as a glitch — ghost only
-      // casts one once hover paints its background; link stays flat (it's text).
-      compoundVariants: [
-        { variant: 'ghost', class: 'shadow-none hover:shadow-sm transition-shadow' },
-        { variant: 'link', class: 'shadow-none' }
-      ]
-    },
-    card: { slots: { root: 'shadow-md shadow-(color:--ui-shadow-final-soft)' } },
-    empty: { slots: { root: 'shadow-md shadow-(color:--ui-shadow-final-soft)' } },
-    input: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)' }, compoundVariants: FLAT_FIELD_VARIANTS },
-    select: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)', content: SOFT_LG }, compoundVariants: FLAT_FIELD_VARIANTS },
-    selectMenu: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)', content: SOFT_LG }, compoundVariants: FLAT_FIELD_VARIANTS },
-    inputMenu: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)', content: SOFT_LG }, compoundVariants: FLAT_FIELD_VARIANTS },
-    textarea: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)' }, compoundVariants: FLAT_FIELD_VARIANTS },
-    alert: { slots: { root: 'shadow-md shadow-(color:--ui-shadow-final-soft)' } },
-    badge: { slots: { base: 'shadow-xs shadow-(color:--ui-shadow-final-soft)' } },
-    // Overlay surfaces keep their stock shadow SIZE, recolored through the
-    // same variable so the shade/opacity options reach them too.
-    popover: { slots: { content: SOFT_LG } },
-    dropdownMenu: { slots: { content: SOFT_LG } },
-    contextMenu: { slots: { content: SOFT_LG } },
-    tooltip: { slots: { content: 'shadow-sm shadow-(color:--ui-shadow-final-soft)' } },
-    toast: { slots: { root: SOFT_LG } },
-    drawer: { slots: { content: SOFT_LG } },
-    // modal's surface classes live under the fullscreen:false variant — slot
-    // classes would lose the tailwind-merge, so this must be a compound.
-    modal: { compoundVariants: [{ fullscreen: false, class: { content: SOFT_LG } }] },
-    // slideover is edge-to-edge on mobile; only its sm+ panel casts a shadow.
-    slideover: { slots: { content: 'sm:shadow-lg shadow-(color:--ui-shadow-final-soft)' } },
-    // The whole pill bar is the raised surface — the list casts the shadow
-    // like a control; the indicator/trigger stock shadows drop so it doesn't
-    // double up inside.
-    tabs: { compoundVariants: [{ variant: 'pill', class: { list: 'shadow-sm shadow-(color:--ui-shadow-final-soft)', indicator: 'shadow-none', trigger: TABS_SSR_SHADOW_NONE } }] }
-  },
-  hard: {
+  // The one config-driven shadow. Colour/opacity/geometry come from the
+  // generalised --shadow-* ramp (active under .shadow-custom), so plain size
+  // classes are all these fragments need: overlays keep their stock shadow-lg
+  // and ride the ramp untouched; flat surfaces get a size added.
+  custom: {
     button: {
       slots: {
-        // Geometry rides CSS variables so the sliders are a variable swap;
-        // hover sinks halfway into the shadow via calc, active collapses it.
+        // The base rides the ramp; the press-effect translates by the shadow
+        // offset (0 for a soft/blur config → no visible press) and collapses the
+        // shadow on active, so brutalist geometry gets the neobrutalism press.
         base: 'shadow-(--ui-shadow-hard) hover:translate-x-[calc(var(--ui-shadow-offset-x)/2)] hover:translate-y-[calc(var(--ui-shadow-offset-y)/2)] hover:shadow-(--ui-shadow-hard-half) active:translate-x-(--ui-shadow-offset-x) active:translate-y-(--ui-shadow-offset-y) active:shadow-none transition-[box-shadow,translate,background-color]'
       },
-      // A floating shadow under an invisible box reads as a glitch — ghost
-      // and link buttons stay flat, as in the reference neobrutalism kits.
+      // A floating shadow under an invisible box reads as a glitch — ghost and
+      // link buttons stay flat, as in the reference neobrutalism kits.
       compoundVariants: [
         { variant: 'ghost', class: 'shadow-none hover:translate-x-0 hover:translate-y-0 hover:shadow-none active:translate-x-0 active:translate-y-0' },
         { variant: 'link', class: 'shadow-none hover:translate-x-0 hover:translate-y-0 hover:shadow-none active:translate-x-0 active:translate-y-0' }
       ]
     },
-    card: { slots: { root: HARD_LG } },
-    empty: { slots: { root: HARD_LG } },
-    input: { slots: { base: HARD_BASE }, compoundVariants: FLAT_FIELD_VARIANTS },
-    select: { slots: { base: HARD_BASE, content: HARD_LG }, compoundVariants: FLAT_FIELD_VARIANTS },
-    selectMenu: { slots: { base: HARD_BASE, content: HARD_LG }, compoundVariants: FLAT_FIELD_VARIANTS },
-    inputMenu: { slots: { base: HARD_BASE, content: HARD_LG }, compoundVariants: FLAT_FIELD_VARIANTS },
-    textarea: { slots: { base: HARD_BASE }, compoundVariants: FLAT_FIELD_VARIANTS },
-    alert: { slots: { root: HARD_LG } },
-    badge: { slots: { base: HARD_SM } },
-    popover: { slots: { content: HARD_LG } },
-    dropdownMenu: { slots: { content: HARD_LG } },
-    contextMenu: { slots: { content: HARD_LG } },
-    tooltip: { slots: { content: HARD_SM } },
-    toast: { slots: { root: HARD_LG } },
-    drawer: { slots: { content: HARD_LG } },
-    modal: { compoundVariants: [{ fullscreen: false, class: { content: HARD_LG } }] },
-    slideover: { slots: { content: 'sm:shadow-(--ui-shadow-hard-lg)' } },
-    // The whole pill bar takes the hard drop like a control; the
-    // indicator/trigger stock shadows drop so only the bar casts.
-    tabs: { compoundVariants: [{ variant: 'pill', class: { list: HARD_BASE, indicator: 'shadow-none', trigger: TABS_SSR_SHADOW_NONE } }] }
+    card: { slots: { root: 'shadow-lg' } },
+    empty: { slots: { root: 'shadow-lg' } },
+    input: { slots: { base: 'shadow-xs' }, compoundVariants: FLAT_FIELD_VARIANTS },
+    select: { slots: { base: 'shadow-xs' }, compoundVariants: FLAT_FIELD_VARIANTS },
+    selectMenu: { slots: { base: 'shadow-xs' }, compoundVariants: FLAT_FIELD_VARIANTS },
+    inputMenu: { slots: { base: 'shadow-xs' }, compoundVariants: FLAT_FIELD_VARIANTS },
+    textarea: { slots: { base: 'shadow-xs' }, compoundVariants: FLAT_FIELD_VARIANTS },
+    alert: { slots: { root: 'shadow-lg' } },
+    badge: { slots: { base: 'shadow-xs' } },
+    // slideover is edge-to-edge on mobile; only its sm+ panel casts a shadow.
+    slideover: { slots: { content: 'shadow-none sm:shadow-lg' } },
+    // The pill bar is the raised surface — the list casts, the stock
+    // indicator/trigger shadows drop so it doesn't double up inside.
+    tabs: { compoundVariants: [{ variant: 'pill', class: { list: 'shadow-sm', indicator: 'shadow-none', trigger: TABS_SSR_SHADOW_NONE } }] }
   }
 }
 
 // Inset shadows use tailwind's separate inset-shadow group, so they merge
 // independently of (and coexist with) the drop treatment on every surface.
-const INNER_SOFT = 'inset-shadow-sm inset-shadow-(color:--ui-shadow-final-inner)'
 const INNER_HARD = 'inset-shadow-(--ui-inner-shadow)'
 
 const INNER_FLAT_FIELD_VARIANTS = [
@@ -540,7 +500,7 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
     dark['--ui-shadow-opacity'] = `${style.shadowOpacity}%`
   }
 
-  if (style.shadow === 'hard' && style.shadowGeometry) {
+  if (isCustomShadow(style.shadow)) {
     const geometry = { ...SHADOW_GEOMETRY_DEFAULTS, ...style.shadowGeometry }
     for (const [axis, token] of [['x', '--ui-shadow-offset-x'], ['y', '--ui-shadow-offset-y'], ['blur', '--ui-shadow-blur'], ['spread', '--ui-shadow-spread']] as const) {
       light[token] = `${geometry[axis]}px`
@@ -553,7 +513,7 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
     dark['--ui-inner-shadow-opacity'] = `${style.innerShadowOpacity}%`
   }
 
-  if (style.innerShadow === 'hard' && style.innerShadowGeometry) {
+  if (isCustomShadow(style.innerShadow)) {
     const geometry = { ...INNER_SHADOW_GEOMETRY_DEFAULTS, ...style.innerShadowGeometry }
     for (const [axis, token] of [['x', '--ui-inner-shadow-offset-x'], ['y', '--ui-inner-shadow-offset-y'], ['blur', '--ui-inner-shadow-blur'], ['spread', '--ui-inner-shadow-spread']] as const) {
       light[token] = `${geometry[axis]}px`
@@ -561,11 +521,11 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
     }
   }
 
-  // An unset shadowColor is the 'shade' default, but only a hard shadow paints
-  // one — so the shade slider works in custom mode without first touching the
-  // colour dropdown, while a pristine theme emits nothing.
+  // An unset shadowColor is the 'shade' default, but only a custom shadow paints
+  // one — so the shade slider works without first touching the colour dropdown,
+  // while a pristine theme emits nothing.
   const shadowColorMode = (!style.shadowColor || style.shadowColor === 'default')
-    ? (style.shadow === 'hard' ? 'shade' : undefined)
+    ? (isCustomShadow(style.shadow) ? 'shade' : undefined)
     : style.shadowColor
   if (shadowColorMode === 'shade' || shadowColorMode === 'primary-shade') {
     // Per-mode ramp shade — a graded shadow that darkens or lightens
@@ -664,9 +624,9 @@ export function styleComponents(style: StyleOptions): Fragments {
 
   const sources = [
     defaults,
-    SHADOW_FRAGMENTS[style.shadow ?? 'none'],
-    style.innerShadow && style.innerShadow !== 'none'
-      ? innerShadowFragments(style.innerShadow === 'hard' ? INNER_HARD : INNER_SOFT)
+    SHADOW_FRAGMENTS[isCustomShadow(style.shadow) ? 'custom' : (style.shadow === 'flat' ? 'flat' : 'none')],
+    isCustomShadow(style.innerShadow)
+      ? innerShadowFragments(INNER_HARD)
       : {},
     borderFragments(style),
     style.borderColor && style.borderColor !== 'default' ? FRAME_COLOR_FRAGMENTS : {}
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index f9f450908b..5adeb287ee 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -344,22 +344,24 @@ describe('styleComponents', () => {
   it('inner shadow rides its own inset utilities on the same surfaces', async () => {
     const { styleComponents, styleTokens } = await import('../../docs/app/utils/theme-engine')
 
-    const soft = styleComponents({ innerShadow: 'soft' })
-    expect(soft.button!.slots!.base).toContain('inset-shadow-sm inset-shadow-(color:--ui-shadow-final-inner)')
-    expect(soft.tooltip!.slots!.content).toContain('inset-shadow-(color:--ui-shadow-final-inner)')
+    const inner = styleComponents({ innerShadow: 'custom' })
+    expect(inner.button!.slots!.base).toContain('inset-shadow-(--ui-inner-shadow)')
+    expect(inner.tooltip!.slots!.content).toContain('inset-shadow-(--ui-inner-shadow)')
     // surfaceless variants stay flat, mirroring the drop treatment
-    expect(soft.button!.compoundVariants).toContainEqual({ variant: 'ghost', class: 'inset-shadow-none' })
-    expect(soft.input!.compoundVariants).toContainEqual({ variant: 'none', class: 'inset-shadow-none' })
+    expect(inner.button!.compoundVariants).toContainEqual({ variant: 'ghost', class: 'inset-shadow-none' })
+    expect(inner.input!.compoundVariants).toContainEqual({ variant: 'none', class: 'inset-shadow-none' })
+    expect(inner.card!.slots!.root).toContain('inset-shadow-(--ui-inner-shadow)')
 
-    const hard = styleComponents({ innerShadow: 'hard' })
-    expect(hard.card!.slots!.root).toContain('inset-shadow-(--ui-inner-shadow)')
+    // legacy 'soft'/'hard' fold into the same one inset treatment
+    expect(styleComponents({ innerShadow: 'soft' }).card!.slots!.root).toContain('inset-shadow-(--ui-inner-shadow)')
+    expect(styleComponents({ innerShadow: 'hard' }).card!.slots!.root).toContain('inset-shadow-(--ui-inner-shadow)')
 
-    // both treatments coexist on one surface — separate tailwind groups
-    const both = styleComponents({ shadow: 'hard', innerShadow: 'soft' })
-    expect(both.card!.slots!.root).toContain('shadow-(--ui-shadow-hard-lg)')
-    expect(both.card!.slots!.root).toContain('inset-shadow-sm')
+    // drop and inner coexist on one surface — separate tailwind groups
+    const both = styleComponents({ shadow: 'custom', innerShadow: 'custom' })
+    expect(both.card!.slots!.root).toContain('shadow-lg')
+    expect(both.card!.slots!.root).toContain('inset-shadow-(--ui-inner-shadow)')
 
-    const tokens = styleTokens({ innerShadow: 'hard', innerShadowGeometry: { y: 6 }, innerShadowOpacity: 30 })
+    const tokens = styleTokens({ innerShadow: 'custom', innerShadowGeometry: { y: 6 }, innerShadowOpacity: 30 })
     expect(tokens.light['--ui-inner-shadow-offset-y']).toBe('6px')
     expect(tokens.light['--ui-inner-shadow-offset-x']).toBe('0px')
     expect(tokens.light['--ui-inner-shadow-opacity']).toBe('30%')
@@ -367,13 +369,13 @@ describe('styleComponents', () => {
 
   it('merges shadow and frame fragments slot-wise', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
-    const components = styleComponents({ shadow: 'hard', border: 'custom', frame: true })
+    const components = styleComponents({ shadow: 'custom', border: 'custom', frame: true })
 
     expect(components.button!.slots!.base).toContain('shadow-(--ui-shadow-hard)')
     // widths ride the default-width variables — no ring-N classes anywhere
     expect(components.button!.slots!.base).not.toContain('ring')
     expect(components.button!.compoundVariants).toContainEqual({ variant: 'solid', class: 'ring ring-inset ring-(--ui-border-accented)' })
-    expect(components.card!.slots?.root ?? '').toContain('shadow-(--ui-shadow-hard-lg)')
+    expect(components.card!.slots?.root ?? '').toContain('shadow-lg')
     expect(components.card!.compoundVariants).toContainEqual({ variant: 'soft', class: { root: 'ring ring-(--ui-border-accented)' } })
   })
 
@@ -394,12 +396,12 @@ describe('styleComponents', () => {
 
   it('mergeUi concatenates slot classes and compound variants', async () => {
     const { mergeUi, styleComponents } = await import('../../docs/app/utils/theme-engine')
-    const merged = mergeUi(styleComponents({ shadow: 'hard' }), { button: { slots: { base: 'rounded-full' } } })
+    const merged = mergeUi(styleComponents({ shadow: 'custom' }), { button: { slots: { base: 'rounded-full' } } })
 
     // both the shadow classes and the explicit override survive, explicit last
     expect(merged.button.slots.base).toContain('shadow-(--ui-shadow-hard)')
     expect(merged.button.slots.base.endsWith('rounded-full')).toBe(true)
-    expect(merged.card.slots.root).toContain('shadow-(--ui-shadow-hard-lg)')
+    expect(merged.card.slots.root).toContain('shadow-lg')
   })
 })
 
@@ -457,19 +459,21 @@ describe('style colors', () => {
     expect(isDefaultStyle({ border: 'custom' })).toBe(false)
   })
 
-  it('soft shadows skip ghost/link buttons (hover-only for ghost) and surfaceless fields', async () => {
+  it('custom shadows keep ghost/link buttons and surfaceless fields flat', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
-    const components = styleComponents({ shadow: 'soft' })
+    const components = styleComponents({ shadow: 'custom' })
 
-    expect(components.button!.compoundVariants).toContainEqual({ variant: 'ghost', class: 'shadow-none hover:shadow-sm transition-shadow' })
-    expect(components.button!.compoundVariants).toContainEqual({ variant: 'link', class: 'shadow-none' })
+    // a floating shadow under an invisible box reads as a glitch — ghost/link
+    // buttons drop the shadow AND the press-effect translate
+    expect(components.button!.compoundVariants).toContainEqual({ variant: 'ghost', class: 'shadow-none hover:translate-x-0 hover:translate-y-0 hover:shadow-none active:translate-x-0 active:translate-y-0' })
+    expect(components.button!.compoundVariants).toContainEqual({ variant: 'link', class: 'shadow-none hover:translate-x-0 hover:translate-y-0 hover:shadow-none active:translate-x-0 active:translate-y-0' })
     expect(components.input!.compoundVariants).toContainEqual({ variant: 'ghost', class: 'shadow-none' })
     expect(components.input!.compoundVariants).toContainEqual({ variant: 'none', class: 'shadow-none' })
   })
 
   it('hard shadows keep surfaceless field variants flat', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
-    const components = styleComponents({ shadow: 'hard' })
+    const components = styleComponents({ shadow: 'custom' })
 
     expect(components.select!.compoundVariants).toContainEqual({ variant: 'ghost', class: 'shadow-none' })
     expect(components.textarea!.compoundVariants).toContainEqual({ variant: 'none', class: 'shadow-none' })
@@ -478,14 +482,21 @@ describe('style colors', () => {
   it('treatments reach overlay surfaces with the right placement', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
 
-    const soft = styleComponents({ shadow: 'soft' })
-    expect(soft.popover!.slots!.content).toBe('shadow-lg shadow-(color:--ui-shadow-final-soft)')
-    expect(soft.toast!.slots!.root).toContain('--ui-shadow-final-soft')
-    // modal's surface lives under the fullscreen variant — never slot classes
-    expect(soft.modal!.slots).toBeUndefined()
-    expect(soft.modal!.compoundVariants![0]).toMatchObject({ fullscreen: false })
+    // Custom themes overlay shadows through the generalised --shadow-* ramp, so
+    // the fragments leave the stock shadow-lg on those surfaces untouched.
+    const custom = styleComponents({ shadow: 'custom' })
+    expect(custom.popover).toBeUndefined()
+    expect(custom.toast).toBeUndefined()
+    expect(custom.modal).toBeUndefined()
     // slideover is edge-to-edge on mobile — the shadow is sm-scoped
-    expect(soft.slideover!.slots!.content).toMatch(/^sm:shadow-lg /)
+    expect(custom.slideover!.slots!.content).toBe('shadow-none sm:shadow-lg')
+
+    // None strips the stock overlay shadows outright.
+    const none = styleComponents({ shadow: 'flat' })
+    expect(none.popover!.slots!.content).toBe('shadow-none')
+    expect(none.toast!.slots!.root).toBe('shadow-none')
+    expect(none.modal!.compoundVariants![0]).toMatchObject({ fullscreen: false })
+    expect(none.slideover!.slots!.content).toBe('sm:shadow-none')
 
     const colored = styleComponents({ borderColor: 'inverted' })
     expect(colored.tooltip!.slots!.content).toBe('ring-(--ui-frame-color)')
@@ -709,4 +720,21 @@ describe('style colors', () => {
     expect(css).toContain('--ui-shadow-color: var(--ui-color-neutral-950);')
     expect(css).toContain('--ui-shadow-color: black;')
   })
+
+  it('generateCSS redefines the whole shadow ramp as @theme tokens for content', async () => {
+    const { generateCSS } = await import('../../docs/app/utils/theme-engine')
+
+    // Custom scales the one config per size so a consumer's compile rewrites
+    // every bare shadow-* utility (content images included), not just widgets.
+    const custom = generateCSS({ version: 1, style: { shadow: 'custom' } })
+    expect(custom).toMatch(/@theme \{[^}]*--shadow-lg: calc\(var\(--ui-shadow-offset-x\) \* 1\)/)
+    // alpha is the opacity slider read literally — no per-size scaling factor
+    expect(custom).toContain('color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 25%), transparent)')
+    expect(custom).toContain('--shadow-2xl:')
+    expect(custom).toContain('--shadow-2xs:')
+
+    // None flattens the ramp; Inherit leaves Tailwind's native shadows alone.
+    expect(generateCSS({ version: 1, style: { shadow: 'flat' } })).toContain('--shadow-lg: 0 0 transparent;')
+    expect(generateCSS({ version: 1, style: { shadow: 'none' } })).not.toContain('--shadow-lg:')
+  })
 })
diff --git a/test/utils/theme-import.spec.ts b/test/utils/theme-import.spec.ts
index 839b431be4..38e5ddfea3 100644
--- a/test/utils/theme-import.spec.ts
+++ b/test/utils/theme-import.spec.ts
@@ -95,14 +95,14 @@ describe('importTheme', () => {
   it('round-trips an inner-shadow style', () => {
     const original: ThemeDoc = {
       version: 1,
-      style: { innerShadow: 'hard', innerShadowGeometry: { x: 0, y: 4, blur: 8, spread: 0 }, innerShadowOpacity: 30, innerShadowColor: 'primary-shade', innerShadowShade: { light: 700, dark: 300 } }
+      style: { innerShadow: 'custom', innerShadowGeometry: { x: 0, y: 4, blur: 8, spread: 0 }, innerShadowOpacity: 30, innerShadowColor: 'primary-shade', innerShadowShade: { light: 700, dark: 300 } }
     }
     const css = generateCSS(original)
     const config = generateConfig(original)
     const { doc: imported, skipped } = importTheme({ css, config })
 
     expect(skipped).toEqual([])
-    expect(imported.style?.innerShadow).toBe('hard')
+    expect(imported.style?.innerShadow).toBe('custom')
     expect(imported.style?.innerShadowGeometry).toEqual({ x: 0, y: 4, blur: 8, spread: 0 })
     expect(imported.style?.innerShadowOpacity).toBe(30)
     expect(imported.style?.innerShadowColor).toBe('primary-shade')

From 5c0ff5516e7336ae2ba3b1f345e9987a36bba0ae Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 27 Jul 2026 18:13:07 +0200
Subject: [PATCH 168/185] feat(theme-studio): press-effect option, themed tabs,
 reset and staleness fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Optional button press choreography (shadowPress) with a Style-panel
  switch; off for Marshmallow — soft blurred configs keep buttons still
- Pill tabs ride the theme: full-size drop shadow (matching buttons),
  inner shadow, and a border ring under any active border treatment;
  frame no longer double-outlines the indicator
- Strip the ramp shadow from the switch thumb under Custom
- Orchard/Marshmallow gain 1px custom borders; 1px widths now export
  (and so round-trip) explicitly
- Two-stage toolbar reset unjammed: font fingerprints treat explicit
  stock values as absent, and emptied style tags clear via a :root {}
  sentinel (unhead skips empty innerHTML patches)
- Recompute the persisted style-ui bundle on load so fragment changes
  shipped in code reach existing sessions
- Prune dead legacy shadow vars (final-soft, hard-lg/sm), keeping
  import tolerance for old exports

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/app/assets/css/main.css                  | 10 ++--
 .../theme-studio/ThemeStudioControlsStyle.vue | 21 ++++++-
 .../theme-studio/ThemeStudioViewPortfolio.vue |  6 +-
 docs/app/composables/useTheme.ts              |  7 ++-
 docs/app/pages/theme.vue                      |  5 +-
 docs/app/plugins/theme.ts                     | 16 ++++-
 docs/app/utils/theme-engine/export.ts         | 11 ++--
 docs/app/utils/theme-engine/import.ts         |  8 +++
 docs/app/utils/theme-engine/presets.ts        |  7 ++-
 docs/app/utils/theme-engine/sections.ts       | 30 +++++++++-
 docs/app/utils/theme-engine/styles.ts         | 60 +++++++++++++++----
 test/utils/theme-engine.spec.ts               | 16 +++--
 12 files changed, 152 insertions(+), 45 deletions(-)

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index 76422bd676..cff5ee8a59 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -94,7 +94,6 @@ html.dark .shiki span {
   --ui-shadow-blur: 0px;
   --ui-shadow-spread: 0px;
   --ui-shadow-final-hard: color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 100%), transparent);
-  --ui-shadow-final-soft: color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 25%), transparent);
   /* The generalised ramp's alpha IS the opacity slider — uniform across sizes so
      the slider reads true (100% is solid everywhere, for a neobrutalist theme;
      low is subtle). Size is expressed through geometry (--ui-shadow-s-*), not by
@@ -110,12 +109,11 @@ html.dark .shiki span {
   --ui-shadow-s-lg: 1;
   --ui-shadow-s-xl: 1.5;
   --ui-shadow-s-2xl: 2.2;
-  /* Composed hard shadows, used as shadow-(--ui-shadow-hard*) so
-     tailwind-merge can dedupe them against stock shadow-sm/lg classes
-     (it can't parse a full shadow-[calc(...)_...] arbitrary value). */
+  /* Composed press-effect shadows (button rests at 1×, hover sinks to ½×),
+     used as shadow-(--ui-shadow-hard*) so tailwind-merge can dedupe them
+     against stock shadow-sm/lg classes (it can't parse a full
+     shadow-[calc(...)_...] arbitrary value). */
   --ui-shadow-hard: var(--ui-shadow-offset-x) var(--ui-shadow-offset-y) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard);
-  --ui-shadow-hard-lg: calc(var(--ui-shadow-offset-x) * 1.5) calc(var(--ui-shadow-offset-y) * 1.5) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard);
-  --ui-shadow-hard-sm: calc(var(--ui-shadow-offset-x) * 0.66) calc(var(--ui-shadow-offset-y) * 0.66) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard);
   --ui-shadow-hard-half: calc(var(--ui-shadow-offset-x) / 2) calc(var(--ui-shadow-offset-y) / 2) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard);
   /* Inner-shadow geometry defaults; shares --ui-shadow-color with the drop
      treatment, with its own gentler opacity fallback. */
diff --git a/docs/app/components/theme-studio/ThemeStudioControlsStyle.vue b/docs/app/components/theme-studio/ThemeStudioControlsStyle.vue
index e536ead983..1250beed9d 100644
--- a/docs/app/components/theme-studio/ThemeStudioControlsStyle.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControlsStyle.vue
@@ -197,6 +197,13 @@ const shadowColor = computed({
   set: (value: any) => setStyle({ shadowColor: value })
 })
 
+// The press choreography (buttons sinking onto their shadow) rides the
+// shadow offset — optional, so soft blurred configs can keep buttons still.
+const shadowPress = computed({
+  get: () => style.value.shadowPress !== false,
+  set: (value: boolean) => setStyle({ shadowPress: value ? undefined : false })
+})
+
 // The two shadow sections are the same panel pointed at different style
 // fields — one config each, one template.
 const shadowSections = [{
@@ -209,7 +216,8 @@ const shadowSections = [{
   shades: shadowShades,
   opacity: shadowOpacity,
   geometry: geometrySliders('shadowGeometry', SHADOW_GEOMETRY_DEFAULTS),
-  hard: computed(() => isCustomShadow(style.value.shadow))
+  hard: computed(() => isCustomShadow(style.value.shadow)),
+  press: shadowPress as typeof shadowPress | undefined
 }, {
   label: 'Inner shadow',
   dirtyKey: 'innerShadow' as const,
@@ -220,7 +228,8 @@ const shadowSections = [{
   shades: innerShadowShades,
   opacity: innerShadowOpacity,
   geometry: geometrySliders('innerShadowGeometry', INNER_SHADOW_GEOMETRY_DEFAULTS),
-  hard: computed(() => isCustomShadow(style.value.innerShadow))
+  hard: computed(() => isCustomShadow(style.value.innerShadow)),
+  press: undefined
 }]
 
 // Per-section fold-out for the shade fine-tuning, mirroring the Colors panel's
@@ -284,6 +293,14 @@ const isShadeColor = (color?: string) => color === 'shade' || color === 'primary
                 :step="1"
                 unit="px"
               />
+
+              <div v-if="section.press" class="flex items-center justify-between gap-2">
+                <span class="text-xs text-muted select-none">Button press effect</span>
+
+                <UTooltip text="Buttons sink onto their shadow on hover and press">
+                  <USwitch v-model="section.press.value" size="sm" aria-label="Button press effect" />
+                </UTooltip>
+              </div>
             </template>
 
             <!-- Colour and its per-mode shade sliders fold out from the header
diff --git a/docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue b/docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue
index 583017851d..a8df9dda45 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewPortfolio.vue
@@ -342,11 +342,7 @@ onUnmounted(() => clearTimeout(appearTimeout))
           :items="faqCategories"
           orientation="horizontal"
           :ui="{
-            root: 'flex items-center gap-4 w-full',
-            list: 'relative flex bg-transparent dark:bg-transparent gap-2 px-0',
-            indicator: 'absolute top-[4px] duration-200 ease-out focus:outline-none rounded-lg bg-elevated/60',
-            trigger: 'px-3 py-2 rounded-lg hover:bg-muted/50 data-[state=active]:text-highlighted data-[state=inactive]:text-muted',
-            label: 'truncate'
+
           }"
         >
           <template #content="{ item }">
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index d993489ec8..bd63eb52e4 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -338,7 +338,9 @@ export function useTheme() {
   })
   const customColorsStyle = computed(() => {
     const entries = Object.entries(customColorsData.value)
-    if (!entries.length) return ''
+    // non-empty sentinel: unhead won't patch an emptied innerHTML, leaving
+    // the FOUC-written tag stale after a reactive-only reset (immediate: false)
+    if (!entries.length) return ':root {}'
     const vars = entries.flatMap(([name, shades]) =>
       Object.entries(shades).map(([shade, color]) => `--color-${name}-${shade}: ${color};`)
     )
@@ -355,7 +357,8 @@ export function useTheme() {
       const full = { ...cssVariableDefaults.dark, ...data.dark }
       parts.push(`.dark { ${Object.entries(full).map(([k, v]) => `${k}: ${v};`).join(' ')} }`)
     }
-    return parts.join(' ')
+    // same sentinel rationale as customColorsStyle
+    return parts.length ? parts.join(' ') : ':root {}'
   })
 
   /** Google Fonts stylesheet link for a family (Public Sans is bundled). */
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index e3ca7d8b4e..9346666280 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -259,7 +259,10 @@ const shareMode = ref<'import' | 'export'>('export')
                 color="primary"
                 class="shrink-0"
                 :ui="{
-                  list: 'ring ring-accented ring-inset rounded-md'
+                  /* match the toolbar's subtle buttons — their ring is the
+                     stock variant, not themed, so the pill needs its own */
+                  list: 'ring ring-accented ring-inset rounded-md',
+                  indicator: 'rounded-sm'
                 }"
               />
               <span v-else class="shrink-0 w-17" />
diff --git a/docs/app/plugins/theme.ts b/docs/app/plugins/theme.ts
index 0d7ce4619f..0d96545b67 100644
--- a/docs/app/plugins/theme.ts
+++ b/docs/app/plugins/theme.ts
@@ -1,7 +1,7 @@
 import { defu } from 'defu'
 import { themeIcons, cssVariableDefaults } from '../utils/theme'
 import { THEME_STORAGE_KEYS, THEME_STATE_KEYS } from '../utils/theme-keys'
-import { mergeUi } from '../utils/theme-engine'
+import { mergeUi, styleComponents } from '../utils/theme-engine'
 
 export default defineNuxtPlugin({
   enforce: 'post',
@@ -66,6 +66,20 @@ export default defineNuxtPlugin({
         persisted.value = next
       }
 
+      // The persisted style-ui bundle is DERIVED from the style prefs, but the
+      // live path only rewrites it on a style edit — recompute it here so
+      // fragment changes shipped in code reach already-persisted themes on
+      // reload instead of serving a stale bundle until the next edit.
+      if (persisted.value && Object.keys(persisted.value).length) {
+        const bundle = styleComponents(persisted.value)
+        useState<Record<string, any>>('nuxt-ui-style-ui').value = bundle
+        if (Object.keys(bundle).length) {
+          localStorage.setItem('nuxt-ui-style-ui', JSON.stringify(bundle))
+        } else {
+          localStorage.removeItem('nuxt-ui-style-ui')
+        }
+      }
+
       // Keep the .shadow-custom root flag in lockstep with the shadow treatment
       // on EVERY path: setStyle (sliders) and applyDoc (presets, which set
       // style.value directly and bypass setStyle) both flow through this one
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index 756b98dce7..9ad4ed8c0b 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -37,7 +37,9 @@ export function generateCSS(doc: ThemeDoc): string {
   const borderWidth = doc.style?.border === 'none'
     ? 0
     : doc.style?.border && doc.style.border !== 'default' ? doc.style.borderWidth ?? BORDER_WIDTH_DEFAULT : undefined
-  if (borderWidth !== undefined && borderWidth !== 1) {
+  // 1px matches tailwind's stock width but still exports: the treatment is an
+  // explicit choice, and the variable is what lets an import reconstruct it.
+  if (borderWidth !== undefined) {
     themeLines.push(`  --default-border-width: ${borderWidth}px;`)
     themeLines.push(`  --default-ring-width: ${borderWidth}px;`)
   }
@@ -148,15 +150,10 @@ export function generateCSS(doc: ThemeDoc): string {
       style.light['--ui-shadow-blur'] = '0px'
       style.light['--ui-shadow-spread'] = '0px'
     }
-    // The shadow-(--ui-shadow-hard*) utilities read these compositions.
+    // The button press-effect's shadow-(--ui-shadow-hard*) utilities read these.
     style.light['--ui-shadow-hard'] = 'var(--ui-shadow-offset-x) var(--ui-shadow-offset-y) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard)'
-    style.light['--ui-shadow-hard-lg'] = 'calc(var(--ui-shadow-offset-x) * 1.5) calc(var(--ui-shadow-offset-y) * 1.5) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard)'
-    style.light['--ui-shadow-hard-sm'] = 'calc(var(--ui-shadow-offset-x) * 0.66) calc(var(--ui-shadow-offset-y) * 0.66) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard)'
     style.light['--ui-shadow-hard-half'] = 'calc(var(--ui-shadow-offset-x) / 2) calc(var(--ui-shadow-offset-y) / 2) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard)'
-  }
-  if (castsShadow(doc.style?.shadow)) {
     style.light['--ui-shadow-final-hard'] = 'color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 100%), transparent)'
-    style.light['--ui-shadow-final-soft'] = 'color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 25%), transparent)'
   }
   if (doc.style?.innerShadow && doc.style.innerShadow !== 'none') {
     if (isCustomShadow(doc.style.innerShadow)) {
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index 065954b458..6abc26547b 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -3,6 +3,7 @@ import { SHADES_ALL, DEFAULT_COLORS } from './types'
 import type { StyleOptions, DefaultVariant, DefaultSize, DefaultColor, VariantGroup } from './styles'
 import {
   styleComponents,
+  isCustomShadow,
   FRAME_COLOR_VALUES,
   SHADOW_COLOR_VALUES,
   SHADOW_GEOMETRY_DEFAULTS,
@@ -790,6 +791,13 @@ export function importTheme(input: { css?: string, config?: string }): ThemeImpo
   const defaults = extractDefaults(components)
   if (defaults) style.defaults = defaults
 
+  // Press-off exports keep the button's resting shadow but drop the
+  // hover/active choreography — detect it so the expansion subtracts cleanly.
+  if (isCustomShadow(style.shadow)) {
+    const base = String(components.button?.slots?.base ?? '')
+    if (base.includes('--ui-shadow-hard') && !base.includes('hover:translate')) style.shadowPress = false
+  }
+
   const explicit = subtractStyleExpansion(components, style)
   if (Object.keys(explicit).length) doc.components = explicit
 
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index c2be8b3900..4cd7064395 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -161,6 +161,8 @@ export const presets: ThemePreset[] = [{
       innerShadowOpacity: 50,
       innerShadowColor: 'shade',
       innerShadowShade: { light: 500, dark: 950 },
+      border: 'custom',
+      borderWidth: 1,
       defaults: { variant: 'subtle' },
       tokenShades: {
         '--ui-bg-muted': { light: 100 },
@@ -225,6 +227,7 @@ export const presets: ThemePreset[] = [{
       shadow: 'custom',
       shadowGeometry: { x: 0, y: 6, blur: 12, spread: 0 },
       shadowOpacity: 15,
+      shadowPress: false,
       innerShadow: 'custom',
       innerShadowGeometry: {
         x: 0,
@@ -241,7 +244,9 @@ export const presets: ThemePreset[] = [{
       innerShadowShade: {
         light: 500,
         dark: 900
-      }
+      },
+      border: 'custom',
+      borderWidth: 1
     }
   }
 }, {
diff --git a/docs/app/utils/theme-engine/sections.ts b/docs/app/utils/theme-engine/sections.ts
index cd5e859378..288cf264fd 100644
--- a/docs/app/utils/theme-engine/sections.ts
+++ b/docs/app/utils/theme-engine/sections.ts
@@ -1,5 +1,6 @@
 import type { ThemeDoc, ShadeStop } from './types'
 import { DEFAULT_COLORS, THEME_DEFAULTS, SEMANTIC_ALIASES } from './types'
+import { FONT_WEIGHT_DEFAULTS } from '../theme'
 import type { StyleOptions } from './styles'
 import { styleTokens, TOKEN_SHADE_TARGETS } from './styles'
 import { parseUiColorRef } from './resolve'
@@ -119,8 +120,28 @@ export function pickSection(doc: ThemeDoc, key: SectionKey): unknown {
         tokens: ownedTokens(doc, 'semantic'),
         shades: ownedTokenShades(doc, 'semantic')
       }
-    case 'font':
-      return doc.font ?? {}
+    case 'font': {
+      // Explicit stock values count as absent: setFontPrefs strips them on
+      // apply, so a live doc never carries them while a preset doc may (8-bit
+      // spells out the default weights) — raw comparison would read dirty
+      // forever, jamming the toolbar reset at its reset-to-preset stage.
+      const font = { ...(doc.font ?? {}) }
+      const weights = Object.fromEntries(Object.entries(font.weights ?? {})
+        .filter(([step, weight]) => weight !== FONT_WEIGHT_DEFAULTS[step as keyof typeof FONT_WEIGHT_DEFAULTS]))
+      if (Object.keys(weights).length) font.weights = weights as typeof font.weights
+      else delete font.weights
+      if (font.letterSpacing === 0) delete font.letterSpacing
+      if (font.lineHeight === 1.5) delete font.lineHeight
+      if (font.heading) {
+        const heading = { ...font.heading }
+        if (heading.weight === 700) delete heading.weight
+        if (heading.letterSpacing === 0) delete heading.letterSpacing
+        if (heading.lineHeight === 1.25) delete heading.lineHeight
+        if (Object.keys(heading).length) font.heading = heading
+        else delete font.heading
+      }
+      return font
+    }
     case 'icons':
       return doc.icons ?? THEME_DEFAULTS.icons
     case 'scale':
@@ -143,7 +164,9 @@ export function pickSection(doc: ThemeDoc, key: SectionKey): unknown {
         color: color === 'shade' && !style.shadowShade ? null : color,
         shade: style.shadowShade ?? null,
         opacity: style.shadowOpacity ?? null,
-        geometry: style.shadowGeometry ?? null
+        geometry: style.shadowGeometry ?? null,
+        // explicit true equals absent (press is the default)
+        press: style.shadowPress === false ? false : null
       }
     }
     case 'innerShadow':
@@ -310,6 +333,7 @@ export function mergeSection(current: ThemeDoc, base: ThemeDoc, key: SectionKey)
       setOrDelete(doc.style, 'shadowShade', baseStyle.shadowShade ? structuredClone(baseStyle.shadowShade) : undefined)
       setOrDelete(doc.style, 'shadowOpacity', baseStyle.shadowOpacity)
       setOrDelete(doc.style, 'shadowGeometry', baseStyle.shadowGeometry ? structuredClone(baseStyle.shadowGeometry) : undefined)
+      setOrDelete(doc.style, 'shadowPress', baseStyle.shadowPress)
       break
     case 'innerShadow':
       doc.style ??= {}
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index 820b3040c3..a9067668e0 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -82,6 +82,12 @@ export interface StyleOptions {
    * per-treatment color-mix fallbacks.
    */
   shadowOpacity?: number
+  /**
+   * Buttons sink onto their shadow on hover/active — the press choreography
+   * driven by the shadow offset. On by default; off keeps the resting
+   * shadow static (soft blurred configs have nothing crisp to sink onto).
+   */
+  shadowPress?: boolean
   /**
    * Inset shadow treatment, independent of the drop shadow — same
    * vocabulary ('soft' recolors a stock inset, 'hard' rides the geometry
@@ -293,12 +299,25 @@ const SHADOW_FRAGMENTS: Record<'none' | 'flat' | 'custom', Fragments> = {
     badge: { slots: { base: 'shadow-xs' } },
     // slideover is edge-to-edge on mobile; only its sm+ panel casts a shadow.
     slideover: { slots: { content: 'shadow-none sm:shadow-lg' } },
-    // The pill bar is the raised surface — the list casts, the stock
+    // The pill bar is the raised surface — it casts the same full-size
+    // composition as buttons (it sits next to them in toolbars); the stock
     // indicator/trigger shadows drop so it doesn't double up inside.
-    tabs: { compoundVariants: [{ variant: 'pill', class: { list: 'shadow-sm', indicator: 'shadow-none', trigger: TABS_SSR_SHADOW_NONE } }] }
+    tabs: { compoundVariants: [{ variant: 'pill', class: { list: 'shadow-(--ui-shadow-hard)', indicator: 'shadow-none', trigger: TABS_SSR_SHADOW_NONE } }] },
+    // The thumb's stock shadow-lg is a subtle native lift — riding the ramp
+    // would cast a full-size shadow inside the track.
+    switch: { slots: { thumb: 'shadow-none' } }
   }
 }
 
+/** shadowPress: false — the resting shadow without the press choreography. */
+const PRESSLESS_BUTTON: Fragments[string] = {
+  slots: { base: 'shadow-(--ui-shadow-hard)' },
+  compoundVariants: [
+    { variant: 'ghost', class: 'shadow-none' },
+    { variant: 'link', class: 'shadow-none' }
+  ]
+}
+
 // Inset shadows use tailwind's separate inset-shadow group, so they merge
 // independently of (and coexist with) the drop treatment on every surface.
 const INNER_HARD = 'inset-shadow-(--ui-inner-shadow)'
@@ -334,7 +353,9 @@ function innerShadowFragments(classes: string): Fragments {
     toast: { slots: { root: classes } },
     drawer: { slots: { content: classes } },
     modal: { compoundVariants: [{ fullscreen: false, class: { content: classes } }] },
-    slideover: { slots: { content: classes } }
+    slideover: { slots: { content: classes } },
+    // The pill track reads as a recessed well; the raised indicator stays clean.
+    tabs: { compoundVariants: [{ variant: 'pill', class: { list: classes } }] }
   }
 }
 
@@ -369,25 +390,38 @@ const FRAME_FRAGMENTS: Fragments = (() => {
     // fields have no solid variant — soft is their surface look
     ...Object.fromEntries(FIELD_COMPONENTS.map(component => [component, { compoundVariants: [{ variant: 'soft', class: inset }] }])),
     chatPrompt: { compoundVariants: [{ variant: 'soft', class: { root: outset } }] },
-    // other solid surfaces: the pill tabs wrapper + its indicator, and the
-    // switch track (its checked color-ring loses the merge to ours — the
-    // frame look owns ring color by design, same as solid buttons)
-    tabs: { compoundVariants: [{ variant: 'pill', class: { list: inset, indicator: inset } }] },
+    // other solid surfaces: the pill tabs wrapper (the list ring only — the
+    // indicator already sits inside the outlined list, so ringing it too
+    // reads as a double outline) and the switch track (its checked
+    // color-ring loses the merge to ours — the frame look owns ring color
+    // by design, same as solid buttons)
+    tabs: { compoundVariants: [{ variant: 'pill', class: { list: inset } }] },
     switch: { slots: { base: inset } }
   }
 })()
 
+/**
+ * The pill tabs list has no stock ring, so a border treatment that only
+ * retunes existing rings would leave it bare next to outlined fields —
+ * any active treatment outlines it, frame toggle or not.
+ */
+const TABS_BORDER_FRAGMENTS: Fragments = {
+  tabs: { compoundVariants: [{ variant: 'pill', class: { list: FRAME_INSET } }] }
+}
+
 /**
  * Every width flows through --default-border-width/--default-ring-width —
  * compiled onto the studio variable in the docs' own build, emitted as a
  * static @theme value in exports — so borders need no class fragments at
  * all. Only the frame toggle adds classes: outlines on surfaces that have
- * none. Legacy 'frame' (old saved prefs) implies the toggle.
+ * none (plus the ringless tabs list, outlined by any active treatment).
+ * Legacy 'frame' (old saved prefs) implies the toggle.
  */
 function borderFragments(style: StyleOptions): Fragments {
   const framed = style.frame || style.border === 'frame'
   const zeroed = style.border === 'none'
-  return framed && !zeroed && style.border && style.border !== 'default' ? FRAME_FRAGMENTS : {}
+  if (zeroed || !style.border || style.border === 'default') return {}
+  return framed ? FRAME_FRAGMENTS : TABS_BORDER_FRAGMENTS
 }
 
 /**
@@ -450,7 +484,9 @@ const FRAME_COLOR_FRAGMENTS: Fragments = {
   modal: { compoundVariants: [{ fullscreen: false, class: { content: 'ring-(--ui-frame-color)' } }] },
   slideover: { slots: { content: 'ring-(--ui-frame-color)' } },
   checkbox: { slots: { base: 'ring-(--ui-frame-color)' } },
-  radioGroup: { slots: { base: 'ring-(--ui-frame-color)' } }
+  radioGroup: { slots: { base: 'ring-(--ui-frame-color)' } },
+  // inert until a border treatment gives the list its ring
+  tabs: { compoundVariants: [{ variant: 'pill', class: { list: 'ring-(--ui-frame-color)' } }] }
 }
 
 /** Per-mode values behind the two color variables, per palette choice. */
@@ -624,7 +660,9 @@ export function styleComponents(style: StyleOptions): Fragments {
 
   const sources = [
     defaults,
-    SHADOW_FRAGMENTS[isCustomShadow(style.shadow) ? 'custom' : (style.shadow === 'flat' ? 'flat' : 'none')],
+    isCustomShadow(style.shadow)
+      ? (style.shadowPress === false ? { ...SHADOW_FRAGMENTS.custom, button: PRESSLESS_BUTTON } : SHADOW_FRAGMENTS.custom)
+      : SHADOW_FRAGMENTS[style.shadow === 'flat' ? 'flat' : 'none'],
     isCustomShadow(style.innerShadow)
       ? innerShadowFragments(INNER_HARD)
       : {},
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 5adeb287ee..5f95e61b69 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -409,9 +409,11 @@ describe('style colors', () => {
   it('widths ride the default-width variables — only the frame toggle emits classes', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
 
-    // width and none alike produce ZERO class fragments: every default-width
-    // border/ring/divide follows --default-border/ring-width instead
-    expect(styleComponents({ border: 'custom', borderWidth: 3 })).toEqual({})
+    // width alone produces class fragments ONLY for the ringless tabs list:
+    // every default-width border/ring/divide follows --default-border/ring-width
+    const unframed = styleComponents({ border: 'custom', borderWidth: 3 })
+    expect(Object.keys(unframed)).toEqual(['tabs'])
+    expect(unframed.tabs!.compoundVariants).toContainEqual({ variant: 'pill', class: { list: 'ring ring-inset ring-(--ui-border-accented)' } })
     expect(styleComponents({ border: 'none' })).toEqual({})
 
     // the frame toggle outlines solid/soft surfaces at the default ring width
@@ -420,16 +422,18 @@ describe('style colors', () => {
     expect(framed.card!.compoundVariants).toContainEqual({ variant: 'soft', class: { root: 'ring ring-(--ui-border-accented)' } })
     expect(JSON.stringify(framed.button!.compoundVariants)).not.toContain('"ghost"')
     // …and the other solid surfaces: pill tabs, chat bubbles, switch track
-    expect(framed.tabs!.compoundVariants).toContainEqual({ variant: 'pill', class: { list: 'ring ring-inset ring-(--ui-border-accented)', indicator: 'ring ring-inset ring-(--ui-border-accented)' } })
+    // list only — an indicator ring inside the outlined list would double up
+    expect(framed.tabs!.compoundVariants).toContainEqual({ variant: 'pill', class: { list: 'ring ring-inset ring-(--ui-border-accented)' } })
     expect(framed.chatMessage!.compoundVariants).toContainEqual({ variant: 'solid', class: { content: 'ring ring-inset ring-(--ui-border-accented)' } })
     expect(framed.switch!.slots!.base).toBe('ring ring-inset ring-(--ui-border-accented)')
 
     // frame off (or border none) → no outlines
     expect(styleComponents({ border: 'none', frame: true })).toEqual({})
 
-    // legacy saved 'frame' keeps its outlines; legacy 'bold' is width-only → nothing
+    // legacy saved 'frame' keeps its outlines; legacy 'bold' is width-only →
+    // just the tabs-list outline, like unframed custom
     expect(styleComponents({ border: 'frame' }).button!.compoundVariants).toContainEqual({ variant: 'solid', class: 'ring ring-inset ring-(--ui-border-accented)' })
-    expect(styleComponents({ border: 'bold' })).toEqual({})
+    expect(Object.keys(styleComponents({ border: 'bold' }))).toEqual(['tabs'])
   })
 
   it('exports carry width via tailwind default-width variables, not classes', async () => {

From addd3cb417c664ed90154aed26fbb72462147a1b Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Mon, 27 Jul 2026 18:33:42 +0200
Subject: [PATCH 169/185] fix(theme-studio): parse the CSS none keyword in
 oklch colors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

tailwindcss 4.3.3 (already on v4, so PR merge runs resolve it) emits
CSS Color 4 missing components for achromatic stops — zinc-50 is now
oklch(98.5% 0 none) — which parseColor's numeric-only regex rejected,
crashing the zinc round-trip in CI. none reads as 0 for chroma/hue.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/app/utils/theme-engine/oklch.ts | 7 +++++--
 test/utils/theme-palette.spec.ts     | 7 +++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/docs/app/utils/theme-engine/oklch.ts b/docs/app/utils/theme-engine/oklch.ts
index 0cfa5eb837..71d2e409a2 100644
--- a/docs/app/utils/theme-engine/oklch.ts
+++ b/docs/app/utils/theme-engine/oklch.ts
@@ -146,9 +146,12 @@ export function parseColor(value: string): Oklch | undefined {
     return rgbToOklch(hexToRgb(input))
   }
 
-  const oklch = input.match(/^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)/i)
+  // `none` is CSS Color 4's missing-component keyword — tailwind ≥4.3.3
+  // emits it for achromatic hues (`oklch(98.5% 0 none)`); it reads as 0 here.
+  const oklch = input.match(/^oklch\(\s*([\d.]+)(%?)\s+([\d.]+|none)\s+([\d.]+|none)/i)
   if (oklch) {
-    return { l: Number(oklch[1]) / (oklch[2] === '%' ? 100 : 1), c: Number(oklch[3]), h: Number(oklch[4]) }
+    const channel = (value: string) => value.toLowerCase() === 'none' ? 0 : Number(value)
+    return { l: Number(oklch[1]) / (oklch[2] === '%' ? 100 : 1), c: channel(oklch[3]!), h: channel(oklch[4]!) }
   }
 
   const rgb = input.match(/^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/i)
diff --git a/test/utils/theme-palette.spec.ts b/test/utils/theme-palette.spec.ts
index 583e1d6b99..e41fcb41e5 100644
--- a/test/utils/theme-palette.spec.ts
+++ b/test/utils/theme-palette.spec.ts
@@ -75,6 +75,13 @@ describe('oklch', () => {
     expect(parseColor('not a color')).toBeUndefined()
     expect(parseCssColor(undefined as unknown as string)).toBeUndefined()
   })
+
+  it('reads the none keyword as 0', () => {
+    // CSS Color 4 missing components — tailwind ≥4.3.3 emits them for
+    // achromatic stops (zinc-50 is `oklch(98.5% 0 none)`).
+    expect(parseColor('oklch(98.5% 0 none)')).toEqual({ l: 0.985, c: 0, h: 0 })
+    expect(parseColor('oklch(50% none none)')).toEqual({ l: 0.5, c: 0, h: 0 })
+  })
 })
 
 describe('sampleCurve', () => {

From 454582e01271f56e96e079cd70e106a99d90d11b Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Wed, 29 Jul 2026 21:33:31 +0200
Subject: [PATCH 170/185] refactor(theme-studio): trim comments, rename
 press/border vars, drop legacy vocabulary
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Comment pass across the studio and engine (~800 comment lines removed,
keeping the one-line whys). Renames for readability: the press-effect
shadows are --ui-shadow-press/-half/-color (were hard/final-hard), the
inner color-mix is --ui-inner-shadow-mix, and the border recolor variable
is --ui-border-color (was frame-color). Shadow inherit is now spelled by
absence and the legacy 'none'/'soft'/'hard'/'bold'/'frame' values are gone
along with the localStorage migrations — the studio is unshipped, so
there is no persisted state to translate.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/app/assets/css/main.css                  |  63 ++--
 .../theme-studio/ThemeStudioColorSection.vue  |  15 +-
 .../ThemeStudioControlsGeneral.vue            |  11 +-
 .../theme-studio/ThemeStudioControlsStyle.vue |  91 ++---
 .../theme-studio/ThemeStudioCurveEditor.vue   |  83 ++---
 .../theme-studio/ThemeStudioPaletteEditor.vue | 279 +++++----------
 .../theme-studio/ThemeStudioPresetMenu.vue    |  51 +--
 .../theme-studio/ThemeStudioSliderRow.vue     |  31 +-
 .../theme-studio/ThemeStudioTokenShades.vue   |  15 +-
 .../theme-studio/ThemeStudioViewA11y.vue      |  25 +-
 docs/app/composables/useTheme.ts              | 131 +++----
 docs/app/composables/useThemeStudio.ts        |   2 +-
 docs/app/pages/theme.vue                      | 105 ++----
 docs/app/plugins/theme.ts                     |  47 +--
 docs/app/utils/theme-engine/export.ts         | 111 +++---
 docs/app/utils/theme-engine/import.ts         | 127 +++----
 docs/app/utils/theme-engine/oklch.ts          |  38 +-
 docs/app/utils/theme-engine/palette.ts        | 134 +++----
 docs/app/utils/theme-engine/presets.ts        |  61 ++--
 docs/app/utils/theme-engine/resolve.ts        |  23 +-
 docs/app/utils/theme-engine/sections.ts       |  41 +--
 docs/app/utils/theme-engine/styles.ts         | 327 ++++++------------
 docs/app/utils/theme-engine/types.ts          |  38 +-
 test/utils/theme-engine.spec.ts               |  52 ++-
 test/utils/theme-import.spec.ts               |  10 +-
 25 files changed, 649 insertions(+), 1262 deletions(-)

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index cff5ee8a59..ee41760c17 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -6,17 +6,13 @@
 @theme static {
   --container-8xl: 90rem;
 
-  /* Every default-width border/ring/divide utility in the app compiles to
-     this var — the studio's width slider repaints the whole site through
-     one custom property instead of per-component class fragments. Exports
-     do the same thing statically (@theme --default-border-width). */
+  /* every default-width border/ring/divide utility compiles to this var,
+     so the studio's width slider repaints the whole site through it */
   --default-border-width: var(--studio-border-width, 1px);
   --default-ring-width: var(--studio-border-width, 1px);
 
-  /* Shadow ramp stays Tailwind-native by default — Inherit leaves the library
-     shadows completely untouched. Only under :root.shadow-custom does the
-     config-driven scale (--ui-shadow-c-*, defined below) take over each slot.
-     A var() fallback IS the native value, so the override is opt-in per size. */
+  /* each fallback is the Tailwind-native value — Inherit stays untouched;
+     --ui-shadow-c-* only exist under .shadow-custom / .shadow-none */
   --shadow-2xs: var(--ui-shadow-c-2xs, 0 1px rgb(0 0 0 / 0.05));
   --shadow-xs: var(--ui-shadow-c-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
   --shadow-sm: var(--ui-shadow-c-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1));
@@ -74,34 +70,24 @@ html.dark .shiki span {
   mask-image: var(--shiki-icon-url);
 }
 
-/* Studio baselines. :where() keeps them at zero specificity: being
-   unlayered they still beat the library's @layer theme defaults, but any
-   user override from the theme studio (plain .light/.dark rules injected
-   via useHead) wins regardless of load order. */
+/* Studio baselines. :where() = zero specificity: unlayered, they beat the
+   library's @layer defaults but lose to the studio's injected rules. */
 :where(:root:not(.dark), .light) {
-  /* hard-shadow treatment: a shadow, not a glow */
   --ui-shadow-color: var(--ui-color-neutral-950);
 }
 
-/* The one shadow config the whole scale derives from: geometry (offset/blur/
-   spread), colour and opacity. The studio's sliders / presets override these —
-   a Soft preset keeps the blur, a Hard preset drops it to 0 and leans on offset.
-   The resting geometry is the crisp fallback presets rely on when they don't
-   set their own; the --shadow-* factors scale it per size. */
+/* The one shadow config the whole scale derives from; studio sliders and
+   presets override these vars. */
 :where(:root) {
   --ui-shadow-offset-x: 3px;
   --ui-shadow-offset-y: 3px;
   --ui-shadow-blur: 0px;
   --ui-shadow-spread: 0px;
-  --ui-shadow-final-hard: color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 100%), transparent);
-  /* The generalised ramp's alpha IS the opacity slider — uniform across sizes so
-     the slider reads true (100% is solid everywhere, for a neobrutalist theme;
-     low is subtle). Size is expressed through geometry (--ui-shadow-s-*), not by
-     fading small shadows, so a bold config stays bold on a badge as on a modal. */
+  --ui-shadow-press-color: color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 100%), transparent);
+  /* alpha is uniform across sizes so the opacity slider reads true (100% =
+     solid everywhere); size is expressed through geometry only */
   --ui-shadow-alpha: var(--ui-shadow-opacity, 25%);
-  /* Per-size geometry scale (lg is the config's 1× reference); the offset/blur/
-     spread of the one config ride these so a tooltip's shadow is small and a
-     modal's large, from a single set of sliders. */
+  /* per-size geometry scale — lg is the config's 1× reference */
   --ui-shadow-s-2xs: 0.15;
   --ui-shadow-s-xs: 0.25;
   --ui-shadow-s-sm: 0.4;
@@ -109,26 +95,20 @@ html.dark .shiki span {
   --ui-shadow-s-lg: 1;
   --ui-shadow-s-xl: 1.5;
   --ui-shadow-s-2xl: 2.2;
-  /* Composed press-effect shadows (button rests at 1×, hover sinks to ½×),
-     used as shadow-(--ui-shadow-hard*) so tailwind-merge can dedupe them
-     against stock shadow-sm/lg classes (it can't parse a full
-     shadow-[calc(...)_...] arbitrary value). */
-  --ui-shadow-hard: var(--ui-shadow-offset-x) var(--ui-shadow-offset-y) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard);
-  --ui-shadow-hard-half: calc(var(--ui-shadow-offset-x) / 2) calc(var(--ui-shadow-offset-y) / 2) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard);
-  /* Inner-shadow geometry defaults; shares --ui-shadow-color with the drop
-     treatment, with its own gentler opacity fallback. */
+  /* press-effect shadows (rest 1×, hover ½×) as vars so tailwind-merge can
+     dedupe shadow-(--var) — it can't parse a shadow-[calc(...)] value */
+  --ui-shadow-press: var(--ui-shadow-offset-x) var(--ui-shadow-offset-y) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-press-color);
+  --ui-shadow-press-half: calc(var(--ui-shadow-offset-x) / 2) calc(var(--ui-shadow-offset-y) / 2) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-press-color);
+  /* inner-shadow defaults; shares --ui-shadow-color, gentler opacity fallback */
   --ui-inner-shadow-offset-x: 0px;
   --ui-inner-shadow-offset-y: 2px;
   --ui-inner-shadow-blur: 4px;
   --ui-inner-shadow-spread: 0px;
-  --ui-shadow-final-inner: color-mix(in oklab, var(--ui-inner-shadow-color, var(--ui-shadow-color)) var(--ui-inner-shadow-opacity, 15%), transparent);
-  --ui-inner-shadow: var(--ui-inner-shadow-offset-x) var(--ui-inner-shadow-offset-y) var(--ui-inner-shadow-blur) var(--ui-inner-shadow-spread) var(--ui-shadow-final-inner);
+  --ui-inner-shadow-mix: color-mix(in oklab, var(--ui-inner-shadow-color, var(--ui-shadow-color)) var(--ui-inner-shadow-opacity, 15%), transparent);
+  --ui-inner-shadow: var(--ui-inner-shadow-offset-x) var(--ui-inner-shadow-offset-y) var(--ui-inner-shadow-blur) var(--ui-inner-shadow-spread) var(--ui-inner-shadow-mix);
 }
 
-/* Custom shadow: one config — geometry (--ui-shadow-*), opacity (--ui-shadow-a-*)
-   and colour (--ui-shadow-color) — scaled per size (--ui-shadow-s-*) into the
-   ramp's override slots. Single-layer; blur 0 stays crisp, offset carries the
-   size ramp. Active only when the studio flags .shadow-custom on the root. */
+/* Custom: the one config scaled per size into the ramp's override slots. */
 :root:where(.shadow-custom) {
   --ui-shadow-c-2xs: calc(var(--ui-shadow-offset-x) * var(--ui-shadow-s-2xs)) calc(var(--ui-shadow-offset-y) * var(--ui-shadow-s-2xs)) calc(var(--ui-shadow-blur) * var(--ui-shadow-s-2xs)) calc(var(--ui-shadow-spread) * var(--ui-shadow-s-2xs)) color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-alpha), transparent);
   --ui-shadow-c-xs: calc(var(--ui-shadow-offset-x) * var(--ui-shadow-s-xs)) calc(var(--ui-shadow-offset-y) * var(--ui-shadow-s-xs)) calc(var(--ui-shadow-blur) * var(--ui-shadow-s-xs)) calc(var(--ui-shadow-spread) * var(--ui-shadow-s-xs)) color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-alpha), transparent);
@@ -139,8 +119,7 @@ html.dark .shiki span {
   --ui-shadow-c-2xl: calc(var(--ui-shadow-offset-x) * var(--ui-shadow-s-2xl)) calc(var(--ui-shadow-offset-y) * var(--ui-shadow-s-2xl)) calc(var(--ui-shadow-blur) * var(--ui-shadow-s-2xl)) calc(var(--ui-shadow-spread) * var(--ui-shadow-s-2xl)) color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-alpha), transparent);
 }
 
-/* None: strip every default shadow-* to nothing so raw content (screenshots)
-   goes flat like the components do under the None treatment. */
+/* None: strip the ramp so raw content (screenshots) goes flat too. */
 :root:where(.shadow-none) {
   --ui-shadow-c-2xs: 0 0 transparent;
   --ui-shadow-c-xs: 0 0 transparent;
diff --git a/docs/app/components/theme-studio/ThemeStudioColorSection.vue b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
index de9e92da79..154c5496ae 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
@@ -34,19 +34,16 @@ const title = computed(() => props.label ?? capitalize(props.alias))
 const paletteEditor = ref(false)
 const shadeEditor = ref(false)
 
-// Per-token shade sliders, one light/dark pair. Only the touched mode is
-// written so an untouched mode never becomes an override. Dirty and reset
-// measure against the BASELINE preset's own choice for the token: reset
-// restores the preset's shade, or deletes the override entirely when the
-// preset made no choice (the token's real default may not sit on the ramp
-// at all — --ui-bg is literally `white` — so writing a "default shade"
-// would pin a lookalike override over it).
+// Only the touched mode is written, so an untouched mode never becomes an
+// override. Reset restores the BASELINE preset's shade, or deletes the entry
+// when the preset made no choice — a token's real default may not sit on the
+// ramp at all (--ui-bg is literally `white`).
 function tokenShadeControl(token: string, defaults: { light: ShadeStop, dark: ShadeStop }, target: 'light' | 'dark') {
   const model = computed({
     get: () => {
       const value = style.value.tokenShades?.[token]?.[target] ?? defaults[target]
-      // A stop chosen at a finer density, then coarsened away, no longer sits
-      // on the ladder (indexOf -1) — clamp to 0 so the slider stays grabbable.
+      // a stop coarsened off the ladder reads indexOf -1 — clamp so the
+      // slider stays grabbable
       return Math.max(0, shadeLadder.value.indexOf(value as ShadeStop))
     },
     set: (index: number) => {
diff --git a/docs/app/components/theme-studio/ThemeStudioControlsGeneral.vue b/docs/app/components/theme-studio/ThemeStudioControlsGeneral.vue
index fbbc7ff74b..a575f52434 100644
--- a/docs/app/components/theme-studio/ThemeStudioControlsGeneral.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControlsGeneral.vue
@@ -79,9 +79,8 @@ const headingLineHeight = computed({
   set: (value: number) => setHeading({ lineHeight: value })
 })
 
-// The Base and Headings rows are the same toolbar over different models —
-// one config each, one template. Base tunes the four tailwind weight steps;
-// headings have a single weight.
+// Base and Headings are one template over different models; base tunes the
+// four tailwind weight steps, headings a single weight.
 const fontRows = [{
   key: 'base',
   label: 'Base',
@@ -155,10 +154,8 @@ const defaultSizeItems = [
   { label: 'XL', value: 'xl' }
 ]
 
-// Per-group default variants, each offering only what its components
-// actually support (buttons add ghost, form fields run outline → none);
-// the app-wide `variant` (presets, shuffle) shows through as the fallback
-// until a group makes its own choice.
+// Per-group default variants, each offering only what its components support;
+// the app-wide `variant` shows through as the fallback.
 const variantItems = (values: string[]) => values.map(value => ({ label: capitalize(value), value }))
 
 /** Variant names UButton can render itself — the rest (none) fall back. */
diff --git a/docs/app/components/theme-studio/ThemeStudioControlsStyle.vue b/docs/app/components/theme-studio/ThemeStudioControlsStyle.vue
index 1250beed9d..bc125956d4 100644
--- a/docs/app/components/theme-studio/ThemeStudioControlsStyle.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControlsStyle.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { SHADE_LADDER, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, BORDER_WIDTH_DEFAULT, SHADOW_GEOMETRY_DEFAULTS, INNER_SHADOW_GEOMETRY_DEFAULTS, isCustomShadow } from '../../utils/theme-engine'
+import { SHADE_LADDER, SHADOW_SHADE_DEFAULTS, BORDER_SHADE_DEFAULTS, BORDER_WIDTH_DEFAULT, SHADOW_GEOMETRY_DEFAULTS, INNER_SHADOW_GEOMETRY_DEFAULTS } from '../../utils/theme-engine'
 import type { ShadeStop } from '../../utils/theme-engine'
 
 const { style, setStyle, primaryChip, neutralChip, baselineDoc } = useThemeStudio()
 
-// Inherit leaves the library's own shadows alone, None strips them, Custom
-// is the studio treatment. The engine still understands 'soft' (presets,
-// imports) — it simply reads as Custom here.
+// Inherit leaves the library's shadows alone, None strips them ('flat' in
+// the persisted vocabulary), Custom is the studio treatment.
 const SHADOW_STYLE_OPTIONS = [
   { label: 'Inherit', value: 'inherit' },
   { label: 'None', value: 'none' },
@@ -16,32 +15,29 @@ const SHADOW_STYLE_OPTIONS = [
 const shadowStyle = computed({
   get: () => {
     const shadow = style.value.shadow
-    if (!shadow || shadow === 'none') return 'inherit'
+    if (!shadow) return 'inherit'
     return shadow === 'flat' ? 'none' : 'custom'
   },
-  // Custom starts where the library already is: geometry approximating the
-  // stock shadow-lg, so entering Custom isn't a jump (20% ≈ shadow-lg's two
-  // stacked 10% layers flattened into one). Leaving Custom clears the knobs
-  // — Inherit means a clean slate, and the next Custom reseeds fresh.
+  // Custom seeds at ≈ the stock shadow-lg (20% ≈ its two stacked 10% layers)
+  // so entering isn't a jump; leaving Custom clears the knobs.
   set: (value: any) => setStyle(value === 'custom'
     ? {
         shadow: 'custom',
         ...(style.value.shadowGeometry === undefined ? { shadowGeometry: { x: 0, y: 6, blur: 12, spread: 0 } } : {}),
         ...(style.value.shadowOpacity === undefined ? { shadowOpacity: 20 } : {})
       }
-    : { shadow: value === 'none' ? 'flat' : 'none', shadowGeometry: undefined, shadowOpacity: undefined, shadowColor: undefined, shadowShade: undefined })
+    : { shadow: value === 'none' ? 'flat' : undefined, shadowGeometry: undefined, shadowOpacity: undefined, shadowColor: undefined, shadowShade: undefined })
 })
 
-// Nothing in the library casts an inner shadow, so None and Inherit are
-// the same thing — two options suffice.
+// Nothing in the library casts an inner shadow, so None and Inherit coincide.
 const INNER_SHADOW_OPTIONS = [
   { label: 'None', value: 'none' },
   { label: 'Custom', value: 'custom' }
 ]
 
 const innerShadowStyle = computed({
-  get: () => (!style.value.innerShadow || style.value.innerShadow === 'none') ? 'none' : 'custom',
-  set: (value: any) => setStyle({ innerShadow: value === 'custom' ? 'custom' : 'none' })
+  get: () => style.value.innerShadow === 'custom' ? 'custom' : 'none',
+  set: (value: any) => setStyle({ innerShadow: value === 'custom' ? 'custom' : undefined })
 })
 
 const shadowOpacity = computed({
@@ -65,12 +61,8 @@ const borderOptions = [
   { label: 'Custom', value: 'custom' }
 ]
 
-// Legacy saved prefs may still hold bold/frame — both read as custom.
 const borderStyle = computed({
-  get: () => {
-    const value = style.value.border || 'default'
-    return value === 'bold' || value === 'frame' ? 'custom' : value
-  },
+  get: () => style.value.border || 'default',
   set: (value: any) => setStyle({ border: value })
 })
 
@@ -81,13 +73,8 @@ const borderWidth = computed({
 
 // Outline solid/soft surfaces too — the neobrutalist frame look.
 const frameSolids = computed({
-  get: () => !!style.value.frame || style.value.border === 'frame',
-  // Migrate the legacy border: 'frame' encoding on write — otherwise the
-  // getter keeps reading true and the switch can never turn off.
-  set: (value: boolean) => setStyle({
-    frame: value,
-    border: style.value.border === 'frame' ? 'custom' : style.value.border
-  })
+  get: () => !!style.value.frame,
+  set: (value: boolean) => setStyle({ frame: value })
 })
 
 // Default recolors nothing — every ring keeps its own per-element color —
@@ -103,9 +90,8 @@ const borderColorItems = [
   { label: 'Primary shade', value: 'primary-shade' }
 ]
 
-// The drop shadow's stock color IS the neutral shade at its resting stops
-// (neutral-950 light / literal black dark), so Default merges into a
-// tagged 'Neutral shade' — the ladder's black end made this expressible.
+// The stock shadow colour IS the neutral shade at its resting stops, so
+// Default merges into a tagged 'Neutral shade'.
 const shadowColorItems = [
   { label: 'Neutral shade', value: 'shade', defaultTag: true },
   { label: 'Black', value: 'black' },
@@ -125,16 +111,12 @@ const innerShadowColorItems = [
   { label: 'Primary shade', value: 'primary-shade' }
 ]
 
-// Slider position ↔ SHADES index, per mode. shadow/border shades write both
-// modes on first touch (explicit 'shade' mode choice); token shades write
-// ONLY the touched mode so an untouched mode never becomes an override.
-// Dirty/reset measure against the BASELINE preset's choice: reset restores
-// it, or deletes the entry when the preset made none.
+// Slider position ↔ SHADES index, per mode. Dirty/reset measure against the
+// BASELINE preset's choice: reset restores it, or deletes the entry.
 function shadeControl(field: 'shadowShade' | 'innerShadowShade' | 'borderShade', defaults: { light: ShadeStop, dark: ShadeStop }, target: 'light' | 'dark') {
   const model = computed({
-    // Per-key fallback: an imported doc can carry a single-mode shade
-    // object ({ light: 400 }) — indexOf(undefined) would park the slider
-    // at -1 and the chip at var(--color-…-undefined).
+    // per-key fallback: an imported doc can carry a single-mode shade object —
+    // indexOf(undefined) would park the slider at -1
     get: () => SHADE_LADDER.indexOf((style.value[field]?.[target] ?? defaults[target]) as typeof SHADE_LADDER[number]),
     set: (index: number) => {
       const current = { ...defaults, ...style.value[field] }
@@ -204,8 +186,7 @@ const shadowPress = computed({
   set: (value: boolean) => setStyle({ shadowPress: value ? undefined : false })
 })
 
-// The two shadow sections are the same panel pointed at different style
-// fields — one config each, one template.
+// The two shadow sections are one template pointed at different style fields.
 const shadowSections = [{
   label: 'Shadow',
   dirtyKey: 'shadow' as const,
@@ -216,7 +197,7 @@ const shadowSections = [{
   shades: shadowShades,
   opacity: shadowOpacity,
   geometry: geometrySliders('shadowGeometry', SHADOW_GEOMETRY_DEFAULTS),
-  hard: computed(() => isCustomShadow(style.value.shadow)),
+  hard: computed(() => style.value.shadow === 'custom'),
   press: shadowPress as typeof shadowPress | undefined
 }, {
   label: 'Inner shadow',
@@ -228,14 +209,12 @@ const shadowSections = [{
   shades: innerShadowShades,
   opacity: innerShadowOpacity,
   geometry: geometrySliders('innerShadowGeometry', INNER_SHADOW_GEOMETRY_DEFAULTS),
-  hard: computed(() => isCustomShadow(style.value.innerShadow)),
+  hard: computed(() => style.value.innerShadow === 'custom'),
   press: undefined
 }]
 
-// Per-section fold-out for the shade fine-tuning, mirroring the Colors panel's
-// "Adjust shades" affordance — the per-mode shade sliders stay out of the main
-// shadow flow until asked for. Keyed by dirtyKey so the two sections toggle
-// independently.
+// Per-section fold-out for shade fine-tuning, mirroring the Colors panel's
+// "Adjust shades"; keyed by dirtyKey so the sections toggle independently.
 const shadeEditors = reactive<Record<string, boolean>>({})
 const borderShadeEditor = ref(false)
 const isShadeColor = (color?: string) => color === 'shade' || color === 'primary-shade'
@@ -295,16 +274,13 @@ const isShadeColor = (color?: string) => color === 'shade' || color === 'primary
               />
 
               <div v-if="section.press" class="flex items-center justify-between gap-2">
-                <span class="text-xs text-muted select-none">Button press effect</span>
+                <span class="text-xs text-muted select-none">Buttons sink on press</span>
 
-                <UTooltip text="Buttons sink onto their shadow on hover and press">
-                  <USwitch v-model="section.press.value" size="sm" aria-label="Button press effect" />
-                </UTooltip>
+                <USwitch v-model="section.press.value" size="sm" aria-label="Buttons sink on press" />
               </div>
             </template>
 
-            <!-- Colour and its per-mode shade sliders fold out from the header
-                 toggle and sit last, keeping the main flow to opacity/geometry. -->
+            <!-- colour + shade sliders sit last, behind the header toggle -->
             <template v-if="shadeEditors[section.dirtyKey]">
               <ThemeStudioDefaultSelect
                 v-model="section.color.value"
@@ -370,17 +346,14 @@ const isShadeColor = (color?: string) => color === 'shade' || color === 'primary
             unit="px"
           />
 
-          <div class="flex items-center gap-2">
-            <span class="text-xs text-muted w-13 shrink-0 select-none">Frame</span>
+          <div class="flex items-center justify-between gap-2">
+            <span class="text-xs text-muted select-none">Frame solid surfaces</span>
 
-            <UTooltip text="Outline solid surfaces too — the neobrutalist look">
-              <USwitch v-model="frameSolids" size="sm" aria-label="Frame solid surfaces" />
-            </UTooltip>
+            <USwitch v-model="frameSolids" size="sm" aria-label="Frame solid surfaces" />
           </div>
 
-          <!-- Frame colour, its shade sliders, and the neutral border tokens
-               (relocated from the Colors panel) fold out from the header toggle
-               and sit last, mirroring the shadow sections. -->
+          <!-- colour, shades and the neutral border tokens (relocated from the
+               Colors panel), behind the header toggle -->
           <template v-if="borderShadeEditor">
             <ThemeStudioDefaultSelect
               v-model="borderColor"
diff --git a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
index 0ebdd4e56e..3adaa78e1f 100644
--- a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
@@ -8,31 +8,15 @@ const props = defineProps<{
   yMax: number
   /** Fill colors for the stop dots along the curve, one per stop. */
   stopColors?: string[]
-  /**
-   * Curve x-position (0–1) for each stop, aligned with `stopColors`. Omit for
-   * the standard 11 stops (evenly ranked); a denser ramp passes its stops at
-   * their true positions (150 → 0.15, not an even 19th).
-   */
+  /** Curve x (0–1) per stop; omit for the standard 11 evenly-ranked stops. */
   stopXs?: number[]
   /** Which stops are pinned to an exact colour, aligned with `stopXs`. */
   stopPinned?: boolean[]
-  /**
-   * The actual channel value each stop resolves to (pin-corrected), aligned
-   * with `stopXs`, so every dot sits on the colour it really produces.
-   */
+  /** Pin-corrected value per stop, so every dot sits on the colour it produces. */
   stopValues?: number[]
-  /**
-   * The pin-corrected curve as a dense `{ x, v }` polyline. When present it's
-   * the line the editor draws — bending through pinned stops and showing the
-   * pull on their neighbours — in place of the raw bézier.
-   */
+  /** Pin-corrected curve as a dense polyline — drawn in place of the raw bézier. */
   actualCurve?: { x: number, v: number }[]
-  /**
-   * 2D colour field behind the plot: one entry per column (ramp position),
-   * each an array of oklch colours sampled top (yMax) to bottom (yMin). Drawn
-   * as a small bitmap scaled up on the canvas, so it shows exactly what
-   * dragging the curve at each (x, value) point would produce.
-   */
+  /** Colour field behind the plot: columns of oklch samples, top (yMax) to bottom. */
   field?: string[][]
 }>()
 
@@ -69,8 +53,7 @@ function fromY(py: number) {
 }
 
 const path = computed(() => {
-  // With pins active the parent passes the corrected curve; draw that so the
-  // line rides through the pinned stops. Otherwise it's exactly the bézier.
+  // with pins the parent passes the corrected curve — draw it through the stops
   if (props.actualCurve?.length) {
     return props.actualCurve.map((p, i) => `${i ? 'L' : 'M'} ${toX(p.x).toFixed(2)} ${toY(p.v).toFixed(2)}`).join(' ')
   }
@@ -78,16 +61,10 @@ const path = computed(() => {
   return `M ${toX(0)} ${toY(c.y0)} C ${toX(c.p1x)} ${toY(c.p1y)}, ${toX(c.p2x)} ${toY(c.p2y)}, ${toX(1)} ${toY(c.y1)}`
 })
 
-/**
- * Paint the colour field: parse the oklch grid into a `columns × rows` bitmap
- * once, then let the canvas scale it up with bilinear smoothing — which does
- * the vertical gradient AND the horizontal smoothing the SVG needed a blur
- * filter for. The backing store is small and fixed (the field is soft anyway);
- * the element stretches to fill via CSS. Drawing is ~0.1ms and, unlike the old
- * SVG filter, never re-rasterises during unrelated page restyles.
- */
+// Paint the field as a small bitmap the canvas scales up with bilinear
+// smoothing — does what the SVG needed a blur filter for, without the filter
+// re-rasterising on every page restyle.
 const fieldCanvas = useTemplateRef<HTMLCanvasElement>('fieldCanvas')
-// The small source bitmap, reused across redraws (the grid size is fixed).
 let sourceCanvas: HTMLCanvasElement | undefined
 
 function drawField() {
@@ -98,8 +75,7 @@ function drawField() {
   const nRow = columns[0]!.length
   if (!nRow) return
 
-  // Fixed, modest backing store — the field is a soft gradient, so a low-res
-  // bitmap stretched by CSS is indistinguishable and keeps redraws cheap.
+  // low-res backing store stretched by CSS — indistinguishable for a soft gradient
   if (canvas.width !== W * 3) {
     canvas.width = W * 3
     canvas.height = H * 3
@@ -131,14 +107,12 @@ function drawField() {
   ctx.drawImage(sourceCanvas, 0, 0, nCol, nRow, 0, 0, canvas.width, canvas.height)
 }
 
-// Watch both sources explicitly (not via read-tracking, which the early return
-// on a not-yet-mounted canvas would miss): draw once the canvas exists and
-// redraw on every field change — a drag, a tab switch, or a preset reseed.
+// Watch both explicitly — read-tracking would miss props.field behind the
+// early return while the canvas isn't mounted yet.
 watch([() => props.field, fieldCanvas], drawField, { immediate: true, flush: 'post' })
 
-// Sit the endpoint handle on the corrected value, not the raw bézier control,
-// so it rides the drawn line when a pin pulls the edge (equal when unpinned). A
-// pinned endpoint is also locked from dragging — the pin owns it.
+// Endpoint handles ride the corrected line when a pin pulls the edge; a pinned
+// endpoint is locked from dragging — the pin owns it.
 const lastStop = computed(() => (props.stopValues?.length ?? 1) - 1)
 const startPinned = computed(() => props.stopPinned?.[0] ?? false)
 const endPinned = computed(() => props.stopPinned?.[lastStop.value] ?? false)
@@ -147,9 +121,7 @@ const endY = computed(() => props.stopValues?.[lastStop.value] ?? curve.value.y1
 
 const stopXs = computed(() => props.stopXs ?? SHADES.map(shadeX))
 const stops = computed(() => stopXs.value.map((x, index) => {
-  // Sit each dot on the value its colour actually resolves to (pin-corrected),
-  // so they ride the drawn line; fall back to the bézier sample when the parent
-  // sends no corrected values (no pins).
+  // dots ride the drawn (pin-corrected) line; bézier sample when no pins
   const value = props.stopValues?.[index] ?? sampleCurve(x, curve.value)
   return {
     key: index,
@@ -161,7 +133,6 @@ const stops = computed(() => stopXs.value.map((x, index) => {
 }))
 
 // Dots track the stop spacing, or a dense ramp draws them as one fat band.
-// Capped at the radius the standard 11 stops have always used.
 const stopRadius = computed(() => Math.min(2.25, Math.max(0.9, (W - 2 * PAD) / (stops.value.length * 2.4))))
 
 const svgRef = ref<SVGSVGElement>()
@@ -185,7 +156,7 @@ function onPointerDown(event: PointerEvent) {
   const targets = [
     { id: 'p1' as const, x: toX(c.p1x), y: toHandleY(c.p1y) },
     { id: 'p2' as const, x: toX(c.p2x), y: toHandleY(c.p2y) },
-    // Skip a pinned endpoint (locked); grab the rest at their drawn spot.
+    // a pinned endpoint is locked
     ...(startPinned.value ? [] : [{ id: 'y0' as const, x: toX(0), y: toHandleY(startY.value) }]),
     ...(endPinned.value ? [] : [{ id: 'y1' as const, x: toX(1), y: toHandleY(endY.value) }])
   ]
@@ -211,15 +182,13 @@ function onPointerMove(event: PointerEvent) {
 
   const point = svgPoint(event)
   const value = fromY(point.y)
-  // Strictly window-clamped: an overshot handle would leave the canvas and
-  // become ungrabbable (and out-of-range lightness exports nonsense).
-  // Reaching further is the window's job — hue auto-pans at the edges.
+  // window-clamped: an overshot handle would leave the canvas and become
+  // ungrabbable (and out-of-range lightness exports nonsense)
   const clamped = Math.min(props.yMax, Math.max(props.yMin, value))
 
-  // An endpoint drag carries its control handle by the same delta so the tangent
-  // is preserved. The handle sits on the corrected curve but we steer the raw
-  // control, so back out the pin pull (corrected − raw) to track the pointer;
-  // with no pin at the edge the offset is zero and it's a plain drag.
+  // An endpoint drag carries its control handle by the same delta (tangent
+  // preserved). The handle sits on the corrected curve but steers the raw
+  // control — back out the pin pull (corrected − raw) to track the pointer.
   if (dragging.value === 'y0') {
     const raw = Math.min(props.yMax, Math.max(props.yMin, clamped - (startY.value - curve.value.y0)))
     const delta = raw - curve.value.y0
@@ -240,9 +209,8 @@ function onPointerMove(event: PointerEvent) {
 function onPointerUp(event: PointerEvent) {
   if (dragging.value) {
     dragging.value = null
-    // After a pointercancel the capture is already gone and release throws
-    // NotFoundError — which would skip dragEnd and leave the page-wide
-    // dragging class stuck on <html>.
+    // after a pointercancel the capture is gone and release throws — which
+    // would skip dragEnd and strand the page-wide dragging class
     if (svgRef.value?.hasPointerCapture(event.pointerId)) {
       svgRef.value.releasePointerCapture(event.pointerId)
     }
@@ -262,11 +230,8 @@ onUnmounted(() => {
 
 <template>
   <div class="relative w-full rounded-t-sm ring ring-default bg-elevated/30 overflow-hidden">
-    <!-- The reachable-colours field behind the plot: a small colour grid drawn
-         on a canvas and scaled up with bilinear smoothing. It replaces 24 SVG
-         gradients behind a Gaussian blur — that filter was re-rasterised on
-         every page restyle (~7ms per apply during a drag); a canvas is a bitmap
-         leaf that stays out of style recalc entirely. -->
+    <!-- canvas, not SVG gradients + blur: the filter re-rasterised on every
+         page restyle (~7ms per apply during a drag) -->
     <canvas
       ref="fieldCanvas"
       class="absolute inset-0 size-full opacity-75 pointer-events-none"
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 45ae0f7bb1..5fcb5b42d1 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -28,50 +28,39 @@ function pickCurves(value: StoredPaletteParams): PaletteCurveParams {
   return structuredClone({ lightness: toRaw(value.lightness), chroma: toRaw(value.chroma), hue: toRaw(value.hue) })
 }
 
-// Clone-safe copy of the pins: reading elements off the reactive ref yields Vue
-// Proxies that toRaw doesn't unwrap, so structuredClone would throw. Rebuilding
-// from scalar fields sidesteps the proxy.
+// Elements read off the reactive ref are Vue Proxies toRaw doesn't unwrap —
+// structuredClone would throw. Rebuild from scalars.
 function plainPins(pins: readonly PalettePin[]): PalettePin[] {
   return pins.map(pin => ({ shade: pin.shade, l: pin.l, c: pin.c, h: pin.h }))
 }
 
-// The modifier lens, restored alongside the base so a reload lands exactly
-// where the session left off instead of silently baking the sliders in.
+// Restore the lens too, so a reload doesn't silently bake the sliders in.
 const stored = paletteParams.value[props.alias]
 const effects = reactive<PaletteEffects>({ ...PALETTE_EFFECT_DEFAULTS, ...(stored?.effects ?? {}) })
 const effectAmount = ref(stored?.amount ?? 100)
 
-// Stop density: 100 is the standard 11 Tailwind stops, finer steps subdivide
-// them into 19, 37 or 91 and expose every one to the shade sliders.
+// Stop density: 100 = the standard 11 stops; finer steps subdivide to 19/37/91.
 const stopStep = ref<ShadeStep>(storedStopStep(stored))
 const stopSet = computed(() => SHADE_SETS[stopStep.value])
 
-/** The density dropdown — the step itself, so it reads like the shade names. */
 const stopItems = SHADE_STEPS.map(step => ({ label: `${step}`, value: step }))
 
 // Stops locked to an exact colour — the curves bend to pass through them.
-// Keyed edits go through setPin/removePin so the array stays a plain, cloneable
-// value (it's persisted and fed to generatePalette on every apply).
+// Kept a plain cloneable array (persisted, fed to generatePalette).
 const pins = ref<PalettePin[]>(stored?.pins ? plainPins(stored.pins) : [])
-// Keyed by shade, valued by the pin's lightness: `has` still answers "pinned?"
-// while the strip's badge reads the lightness to pick a contrasting colour.
+// shade → pin lightness: `has` answers "pinned?", the badge reads L for contrast
 const pinnedShades = computed(() => new Map(pins.value.map(pin => [pin.shade, pin.l])))
 
-// OKLCH L above which a stop reads as light and takes the dark badge (sRGB
-// mid-gray sits at ~0.6). Whole class strings, since tailwind's scanner only
-// sees literals — never build these by concatenation.
+// L above which a stop takes the dark badge. Whole class strings — tailwind's
+// scanner only sees literals.
 const LIGHT_STOP_L = 0.62
 const PIN_BADGE_CLASS = {
   text: { onLight: 'text-(--ui-color-neutral-950)', onDark: 'text-(--ui-color-neutral-50)' },
   bg: { onLight: 'bg-(--ui-color-neutral-950)', onDark: 'bg-(--ui-color-neutral-50)' }
 } as const
 
-/**
- * The badge colour for a pinned stop — the neutral end that contrasts with the
- * stop's own colour. A blend mode can't do this: `difference` against white
- * lands back on the stop's colour at mid lightness (badge vanishes) and inverts
- * the hue on saturated stops.
- */
+// The neutral end that contrasts with the stop — a `difference` blend vanishes
+// at mid lightness and inverts saturated hues.
 function pinBadgeClass(shade: number, property: 'text' | 'bg') {
   const lightness = pinnedShades.value.get(shade as Shade) ?? 0
   return PIN_BADGE_CLASS[property][lightness > LIGHT_STOP_L ? 'onLight' : 'onDark']
@@ -111,11 +100,8 @@ const shades = computed(() => generatePalette(params, stopStep.value, pins.value
 const stopColors = computed(() => stopSet.value.map(shade => shades.value[shade]))
 const stopXs = computed(() => stopSet.value.map(shadeX))
 const stopPinned = computed(() => stopSet.value.map(shade => pinnedShades.value.has(shade)))
-// The active channel's pin-corrected value at each stop and as a dense
-// polyline: the curve editor draws the polyline (so the line bends THROUGH
-// pinned stops and shows their pull on neighbours) and sits every dot on it.
-// The sampler is built with the REACTIVE params (not a toRaw snapshot) so
-// sampling inside these computeds tracks curve edits — a handle drag redraws.
+// Pin-corrected values: the editor draws the polyline so the line bends THROUGH
+// pinned stops. Sampler built on the reactive params so a handle drag redraws.
 const CHANNEL_KEY = { lightness: 'l', chroma: 'c', hue: 'h' } as const
 const stopValues = computed(() => {
   const key = CHANNEL_KEY[tab.value]
@@ -123,7 +109,7 @@ const stopValues = computed(() => {
   return stopSet.value.map(shade => sample(shadeX(shade))[key])
 })
 const actualCurve = computed(() => {
-  // No pins → no correction, so let the editor draw the exact bézier.
+  // no pins → no correction, draw the exact bézier
   if (!pins.value.length) return undefined
   const key = CHANNEL_KEY[tab.value]
   const sample = buildRampSampler(params, pins.value)
@@ -133,11 +119,8 @@ const actualCurve = computed(() => {
   })
 })
 
-/**
- * The strip tiles — just shade + live color. Kept deliberately light (no
- * hex/rgb parse) because it recomputes on every drag frame across every
- * stop (up to 91); the costly parse is deferred to the single open swatch.
- */
+// Kept light (no hex/rgb parse) — recomputes every drag frame across up to 91
+// stops; the parse is deferred to the single open swatch.
 const swatches = computed(() => stopSet.value.map(shade => ({ shade, oklch: shades.value[shade]! })))
 
 const { copy: copyShade } = useClipboard()
@@ -154,27 +137,18 @@ function copySwatch(info: { shade: number, oklch: string }) {
 }
 onUnmounted(() => clearTimeout(copiedTimeout))
 
-/**
- * Swatch details live in a popover, not a tooltip: the copy button and the
- * editable colour inputs inside must be keyboard-reachable, and popover
- * content can take focus. Hover previews it (hand-rolled, with a grace gap so
- * the pointer can cross onto the content); clicking a swatch STICKS it open so
- * you can type into the inputs. Sticking-open is separate from pinning: a stuck
- * popover is just "kept visible", while a pin locks the stop's exact colour.
- */
+// A popover, not a tooltip: the copy button and inputs must take focus. Hover
+// previews it (with a grace gap); click STICKS it open for typing. Stick ≠ pin:
+// a stick keeps the popover visible, a pin locks the stop's colour.
 const stuckShade = ref<number>()
 const hoveredShade = ref<number>()
 let hoverLeaveTimeout: ReturnType<typeof setTimeout> | undefined
 
-// One popover serves the whole strip (all tiles anchor to it anyway), driven
-// by whichever swatch is active — a stuck one wins over a hover. Rendering a
-// single Reka popover instead of one per stop is the bulk of the 19-stop speedup.
+// One popover serves the whole strip (stuck wins over hover) — a single Reka
+// instance instead of one per stop is the bulk of the 19-stop speedup.
 const activeShade = computed(() => stuckShade.value ?? hoveredShade.value)
 
-/**
- * Full detail for the ONE open swatch — the oklch→rgb→hex parse runs here,
- * not across all 19 tiles every frame. Undefined when nothing is open.
- */
+// Full detail for the ONE open swatch — the oklch→rgb→hex parse runs here only.
 const activeSwatch = computed(() => {
   const shade = activeShade.value
   if (shade === undefined) return undefined
@@ -191,9 +165,8 @@ const activeSwatch = computed(() => {
   }
 })
 
-// Always-defined mirror for the slot template (avoids undefined-narrowing).
-// Holds the last real detail after the swatch goes inactive so the content
-// doesn't flash the placeholder while the popover animates closed.
+// Always-defined mirror; holds the last detail so content doesn't flash while
+// the popover animates closed.
 const lastDetail = ref({ shade: -1, oklch: '', hex: '', rgb: '', pinned: false })
 watch(activeSwatch, (value) => {
   if (value) lastDetail.value = value
@@ -201,8 +174,7 @@ watch(activeSwatch, (value) => {
 const swatchDetail = computed(() => activeSwatch.value ?? lastDetail.value)
 
 function onSwatchEnter(shade: number) {
-  // a stuck swatch means "I'm reading/editing this one" — other swatches don't
-  // hover-open until it's released (clicking another still migrates the stick)
+  // a stuck swatch blocks other hover-opens (clicking another migrates the stick)
   if (stuckShade.value !== undefined && stuckShade.value !== shade) return
   clearTimeout(hoverLeaveTimeout)
   hoveredShade.value = shade
@@ -220,22 +192,15 @@ function toggleStuck(shade: number) {
   stuckShade.value = stuckShade.value === shade ? undefined : shade
 }
 
-/**
- * Commit an edited readout: parse whatever format was typed (hex/rgb/oklch),
- * pin the stop to it, and keep the popover stuck open so further edits land.
- * A rejected value leaves the pin untouched — the input restates the old text.
- */
+/** Pin the stop to whatever format was typed; keep the popover stuck open. */
 function commitSwatchColor(shade: number, value: string): boolean {
   const ok = setPin(shade as Shade, value)
   if (ok) stuckShade.value = shade
   return ok
 }
 
-/**
- * Commit an edited colour input. A parseable value (any format) pins the stop;
- * a rejected one leaves the pin untouched and the field restates its own
- * canonical text so the box never shows an unparseable string.
- */
+// A rejected value restates the field's canonical text — the box never shows
+// an unparseable string.
 function onColorCommit(shade: number, field: 'oklch' | 'hex' | 'rgb', event: Event) {
   const input = event.target as HTMLInputElement
   if (!commitSwatchColor(shade, input.value)) {
@@ -243,11 +208,8 @@ function onColorCommit(shade: number, field: 'oklch' | 'hex' | 'rgb', event: Eve
   }
 }
 
-/**
- * Reka emits update:open(false) for trigger clicks as well as dismissals —
- * clearing the stick here would race toggleStuck into re-sticking. Only hover
- * intent clears; the stick is released by toggleStuck or Esc alone.
- */
+// Reka emits update:open(false) for trigger clicks too — clearing the stick
+// here would race toggleStuck. Only hover clears; toggleStuck/Esc release.
 function onSwatchOpenUpdate(shade: number, open: boolean) {
   if (open) return
   if (hoveredShade.value === shade) hoveredShade.value = undefined
@@ -257,16 +219,12 @@ function onSwatchEscape(shade: number) {
   if (stuckShade.value === shade) stuckShade.value = undefined
 }
 
-/**
- * A closing hover-popover would return focus to its trigger tile — Reka
- * treats that focusin as focus-outside on the popover that just opened and
- * dismisses it (hover A→B closed B). Only keyboard flows (focus actually
- * inside the closing content) keep the focus return.
- */
+// A closing hover-popover returns focus to its trigger tile — Reka reads that
+// focusin as focus-outside on the newly-opened one and dismisses it (hover A→B
+// closed B). Keep the focus return only for keyboard flows.
 function onSwatchCloseAutoFocus(event: Event) {
-  // "inside a popper wrapper" is not enough — the whole palette editor
-  // lives in the Colors panel's wrapper. Only a swatch DETAIL popover
-  // (recognizable by its copy button) marks a keyboard flow.
+  // the whole editor sits in the Colors panel's popper wrapper — only a swatch
+  // detail popover (has a copy button) marks a keyboard flow
   const wrapper = document.activeElement?.closest('[data-reka-popper-content-wrapper]')
   if (!wrapper?.querySelector('[aria-label^="Copy oklch"]')) {
     event.preventDefault()
@@ -277,15 +235,9 @@ function onSwatchCloseAutoFocus(event: Event) {
 const stripRef = useTemplateRef<HTMLElement>('stripRef')
 const stripEl = computed(() => stripRef.value ?? undefined)
 
-/**
- * Every axis is a fixed 1:1 window — the full physical range fits the
- * canvas, so dragging never pans or rescales under the pointer. Hue params
- * are normalized into 0–360 on seed (cyclic, so shifting by full turns is
- * color-identical; fitPalette unwraps across the seam), but a seam-crossing
- * fit legitimately leaves individual points outside [0, 360] — the window
- * stretches once, at seed, to include them, or the drag clamp would snap a
- * merely-grabbed handle back into range and shift the color uninvited.
- */
+// Hue normalizes to 0–360 at seed, but a seam-crossing fit can leave points
+// outside — stretch the window once, at seed, or the drag clamp would snap a
+// merely-grabbed handle back into range.
 function hueWindow(hue: PaletteCurveParams['hue']) {
   const points = [hue.y0, hue.y1, hue.p1y, hue.p2y]
   return {
@@ -293,29 +245,21 @@ function hueWindow(hue: PaletteCurveParams['hue']) {
     max: Math.max(360, Math.ceil(Math.max(...points) / 10) * 10)
   }
 }
-// Hue window stretches to fit each seed (a later palette can cross the seam
-// elsewhere) but never mid-drag, or a grabbed handle would rescale under the
-// pointer. Lightness/chroma are fixed physical ranges.
+// Fixed 1:1 windows — dragging never pans or rescales under the pointer.
 const windows = ref({
   lightness: { min: 0, max: 1 },
   chroma: { min: 0, max: 0.35 },
   hue: hueWindow(params.hue)
 })
 
-/**
- * The color field behind the active tab's curve: columns follow the ramp,
- * rows sweep the edited channel across its window (top = max) while the
- * other two channels track the live curves — each point shows the color
- * that dragging the curve there would produce, gamut clamp included.
- */
+// The colour field behind the curve: columns follow the ramp, rows sweep the
+// edited channel (top = max) — each cell is the colour dragging there would give.
 const FIELD_COLUMNS = 24
 const FIELD_ROWS = 12
 const CHANNEL_KEYS = { lightness: 'l', chroma: 'c', hue: 'h' } as const
 
-// The field's 288 gamut-mapped cells are the editor's single biggest chunk of
-// per-frame work. It's a background aid, so feed it a throttled snapshot of
-// the curves: it repaints a few times a second while dragging and settles
-// exactly on release, while the curve line and stops track the pointer live.
+// The 288 gamut-mapped cells are the biggest per-frame cost — feed a throttled
+// snapshot; the curve and stops track the pointer live, the field settles on release.
 const fieldCurves = ref<PaletteCurveParams>(structuredClone(toRaw(params)))
 const syncFieldCurves = useThrottleFn(() => {
   fieldCurves.value = structuredClone(toRaw(params))
@@ -327,9 +271,7 @@ const field = computed(() => {
   const { min, max } = windows.value[channel]
   const curves = fieldCurves.value
 
-  // Fence-post: column i is sampled AT ramp position i/(n-1) — the editor
-  // draws each column centered on that plot x, endpoints under the
-  // endpoint controls.
+  // column i sampled AT x = i/(n-1), so endpoints sit under the endpoint controls
   return Array.from({ length: FIELD_COLUMNS }, (_, columnIndex) => {
     const x = columnIndex / (FIELD_COLUMNS - 1)
     const base = {
@@ -357,11 +299,9 @@ function normalizeHue(values: PaletteCurveParams) {
   }
 }
 
-// The reactive apply: regenerate the ramp, inject it (rebuilding the custom-
-// colours <style>), and persist. This reparses the whole stylesheet and churns
-// Vue state + localStorage — fine once, but ~16×/sec during a drag it's the
-// dominant cost, so a live drag routes through the CSSOM fast path below and
-// only lands here on the first edit and on release.
+// The reactive apply reparses the custom-colours <style> and persists — fine
+// once, dominant at drag rate — so live drags ride the CSSOM fast path below
+// and only land here on the first edit and on release.
 const isDragging = ref(false)
 const customName = computed(() => `custom-${props.alias}`)
 
@@ -370,12 +310,9 @@ function applyReactive() {
   clearCssomPreview()
 }
 
-// Fast path: write the ramp's vars straight onto :root. Inline custom
-// properties outrank the <style>'s `:root {}` rule, so the preview updates
-// with only the unavoidable restyle — no stylesheet reparse, no reactive
-// re-inject, no localStorage write. Only valid once the alias already resolves
-// through --color-custom-* (an active ramp); the first edit takes the reactive
-// path to create it. Reconciled + cleared by applyReactive on release.
+// Fast path: inline :root custom properties outrank the <style> rule — no
+// reparse, no persist. Only valid once the alias already resolves through
+// --color-custom-* (the first edit takes the reactive path to create it).
 function previewViaCssom() {
   if (!import.meta.client) return
   const root = document.documentElement.style
@@ -383,17 +320,16 @@ function previewViaCssom() {
   for (const shade of stopSet.value) root.setProperty(`--color-${customName.value}-${shade}`, ramp[shade]!)
 }
 
-// Sweeps every stop any density can emit, not just the current set — the
-// density may have changed since the preview was written.
+// Sweeps every density's stops — the density may have changed since the
+// preview was written.
 function clearCssomPreview() {
   if (!import.meta.client) return
   const root = document.documentElement.style
   for (const shade of SHADES_ALL) root.removeProperty(`--color-${customName.value}-${shade}`)
 }
 
-// Throttled (not debounced) so the theme streams live while dragging a
-// curve — the trailing call catches the release position. With a neutral
-// lens the base simply tracks the edited curves.
+// Throttled (not debounced) so the theme streams while dragging; the trailing
+// call catches the release position.
 const throttledApply = useThrottleFn(() => {
   if (!effectsDirty.value) {
     seedBase = structuredClone(toRaw(params))
@@ -405,27 +341,19 @@ const throttledApply = useThrottleFn(() => {
   }
 }, 60, true, true)
 
-// A density change re-tiles the strip, so pins on stops the new set doesn't
-// emit lose their tile — drop them rather than let them keep bending the ramp
-// invisibly (their x still lies between stops, so it relaxes back to the curve
-// there). Note the 25 and 10 sets are siblings, not nested: moving between them
-// drops pins either way. Only reassigns when it actually removes one — the
-// combined watcher below covers the density change and the resulting apply.
+// A density change drops pins on stops the new set doesn't emit — otherwise
+// they keep bending the ramp with no tile (25 and 10 are siblings, not nested).
 watch(stopStep, (step) => {
   const stops = SHADE_SETS[step] as readonly number[]
   const kept = pins.value.filter(pin => stops.includes(pin.shade))
   if (kept.length !== pins.value.length) pins.value = kept
-  // A stuck/hovered tile can be gone too — drop the popover state so it can't
-  // dangle over a stop that no longer renders.
+  // drop popover state pointing at a tile that no longer renders
   if (stuckShade.value !== undefined && !stops.includes(stuckShade.value)) stuckShade.value = undefined
   if (hoveredShade.value !== undefined && !stops.includes(hoveredShade.value)) hoveredShade.value = undefined
 })
 
-// params, pins and the density all reshape the ramp, so any of them changing
-// re-applies. Programmatic writes (seeding, external sync — e.g. an undo/redo
-// restore) wrap ALL of these in ignoreUpdates so restoring state never fires a
-// spurious apply that regenerates and clobbers it; only genuine user edits
-// reach throttledApply.
+// Any of these reshape the ramp. Programmatic writes (seeding, undo/redo sync)
+// wrap in ignoreUpdates so restores never fire an apply that clobbers them.
 const { ignoreUpdates } = watchIgnorable([() => params, pins, stopStep], () => {
   throttledApply()
 }, { deep: true })
@@ -434,30 +362,27 @@ function seed(values: PaletteCurveParams) {
   const next = structuredClone(toRaw(values))
   normalizeHue(next)
   seedBase = structuredClone(next)
-  // All apply-triggering writes go through ignoreUpdates together: a seed is
-  // never a user edit, so it must not re-apply (which would, e.g., turn a stock
-  // ramp custom the instant the editor opens, or clobber an undo/redo restore).
+  // A seed is never a user edit — an apply here would e.g. turn a stock ramp
+  // custom the instant the editor opens.
   ignoreUpdates(() => {
     Object.assign(effects, PALETTE_EFFECT_DEFAULTS)
     effectAmount.value = 100
-    // A fresh fit is 11-stop; seedFromCurrent re-detects the density after.
+    // a fresh fit is 11-stop; seedFromCurrent re-detects the density after
     stopStep.value = 100
-    // Fresh curves own no pins — a reseed starts from the raw ramp.
     pins.value = []
     Object.assign(params, next)
   })
-  // Restretch the hue window — this seed may cross the seam differently.
+  // this seed may cross the hue seam differently
   windows.value.hue = hueWindow(next.hue)
 }
 
-// While dragging, a global class turns on short color transitions so the
-// page glides between throttle ticks instead of stepping.
+// While dragging, a global class enables short colour transitions so the page
+// glides between throttle ticks.
 let dragEndTimeout: ReturnType<typeof setTimeout> | undefined
 
 function onDragStart() {
-  // Editing a curve commits the lens: the base becomes the curves on
-  // screen (the look doesn't change) and the modifier sliders reset, so
-  // a later modifier edit can never throw the drag away.
+  // Editing a curve commits the lens (look unchanged, sliders reset) so a
+  // later modifier edit can't throw the drag away.
   if (effectsDirty.value) {
     seedBase = structuredClone(toRaw(params))
     Object.assign(effects, PALETTE_EFFECT_DEFAULTS)
@@ -473,15 +398,12 @@ function onDragEnd() {
     document.documentElement.classList.remove('theme-studio-dragging')
   }, 200)
   isDragging.value = false
-  // Land the drag on the reactive path once: persist and hand the vars back to
-  // the <style> (a pending trailing throttle can't be relied on to fire after
-  // release). applyReactive clears the inline preview so there's no double
-  // definition left behind.
+  // Land once on the reactive path — a pending trailing throttle can't be
+  // relied on to fire after release; applyReactive clears the inline preview.
   if (!effectsDirty.value) {
     seedBase = structuredClone(toRaw(params))
   }
-  // Only the active ramp reconciles via applyReactive; an inactive alias still
-  // set preview vars during the drag, so clear them directly.
+  // an inactive alias still wrote preview vars during the drag — clear directly
   if (active.value) applyReactive()
   else clearCssomPreview()
 }
@@ -490,8 +412,7 @@ onUnmounted(() => {
   clearTimeout(dragEndTimeout)
   if (import.meta.client) {
     document.documentElement.classList.remove('theme-studio-dragging')
-    // The fold can unmount mid-drag — don't strand inline preview vars that
-    // would then shadow the reactive <style> for this ramp.
+    // the fold can unmount mid-drag — don't strand inline preview vars
     clearCssomPreview()
   }
 })
@@ -504,22 +425,17 @@ function seedFromCurrent() {
   const source = paletteShades(name)
   if (source) {
     seed(fitPalette(source))
-    // A ramp that already carries a finer density keeps it, so opening the
-    // editor doesn't silently narrow it back to 11. Ignored like the rest of
-    // the seed — following a palette must not apply.
+    // keep a finer density detected on the source; ignored like the rest of the seed
     const step = detectStopStep(source)
     if (step !== 100) ignoreUpdates(() => (stopStep.value = step))
   }
 }
 
 // External writes to the stored entry — reflect them here, lens included.
-// The effective-curve comparison is what breaks the echo loop for our own
-// throttled applies (the callback runs queued, after any sync flag reset).
 watch(() => paletteParams.value[props.alias], (value) => {
   if (!value || !('lightness' in value)) return
-  // Echo guard: skip only when curves, pins AND density all match — comparing
-  // curves alone would swallow a pin-only or density-only external change (e.g.
-  // undo/redo) and leave stale pins over correct curves.
+  // Echo guard: skip only when curves, pins AND density all match — curves
+  // alone would swallow a pin- or density-only undo/redo.
   const effective = applyPaletteEffects(pickCurves(value), value.effects, value.amount)
   const curvesMatch = JSON.stringify(effective) === JSON.stringify(toRaw(params))
   const pinsMatch = JSON.stringify(value.pins ?? []) === JSON.stringify(toRaw(pins.value))
@@ -528,8 +444,7 @@ watch(() => paletteParams.value[props.alias], (value) => {
 
   seedBase = pickCurves(value)
   normalizeHue(seedBase)
-  // Wrap every apply-triggering write: reflecting an external change must not
-  // echo back into an apply that re-persists and clobbers what's being restored.
+  // must not echo back an apply that clobbers what's being restored
   ignoreUpdates(() => {
     Object.assign(effects, PALETTE_EFFECT_DEFAULTS, value.effects ?? {})
     effectAmount.value = value.amount ?? 100
@@ -537,17 +452,13 @@ watch(() => paletteParams.value[props.alias], (value) => {
     stopStep.value = storedStopStep(value)
     Object.assign(params, applyPaletteEffects(seedBase, effects, effectAmount.value))
   })
-  // A restored curve can cross the hue seam elsewhere — refit the window too.
+  // a restored curve can cross the hue seam elsewhere
   windows.value.hue = hueWindow(toRaw(params).hue)
 })
 
-// Follow the selected palette so opening the editor starts from the curves of
-// the colour already on screen. We fit from the applied shades unless the
-// editor already OWNS curves for this alias (a ramp it built, in paletteParams)
-// — a preset's custom ramp is active but has no stored curves, so it must still
-// be fitted rather than showing the blank defaults. Stuck/hover popover state
-// resets too: the swatch strip unmounts with the fold, so a stale stick would
-// pop a popover for a palette the user never opened.
+// Open from the curves of the colour on screen, unless the editor already OWNS
+// curves for this alias — a preset's custom ramp is active but unowned, so it
+// still gets fitted. Popover state resets: the strip unmounts with the fold.
 watch([() => (appConfig.ui.colors as Record<string, string>)[props.alias], open], ([, isOpen]) => {
   stuckShade.value = undefined
   hoveredShade.value = undefined
@@ -559,7 +470,6 @@ watch([() => (appConfig.ui.colors as Record<string, string>)[props.alias], open]
 
 /* ---------------------------------------------------------- modifiers -- */
 
-/** The modifiers fold — closed by default like the other advanced panels. */
 const modifiersOpen = ref(false)
 
 const effectRows = [
@@ -584,7 +494,7 @@ function resetEffects() {
 </script>
 
 <template>
-  <!-- unmount-on-hide (the default) matches the old v-if: each open reseeds fresh -->
+  <!-- unmount-on-hide: each open reseeds fresh -->
   <UCollapsible :open="open">
     <template #content>
       <div class="mt-2.5 flex flex-col gap-2.5 pb-1">
@@ -611,13 +521,8 @@ function resetEffects() {
             @drag-end="onDragEnd"
           />
 
-          <!-- Plain tiles recolor live every frame (cheap); a single popover,
-               anchored to the strip and driven by the active swatch, carries
-               the details — 1 Reka instance instead of one per stop. A pin
-               badge, in whichever neutral end contrasts with the stop, marks
-               stops locked to an exact value. The strip keeps the height it has
-               at 11 stops (hence the 11:1 ratio rather than square tiles), so a
-               denser ramp only makes the tiles narrower. -->
+          <!-- Fixed 11:1 ratio so a denser ramp only narrows the tiles; the
+               single strip-anchored popover carries the details. -->
           <div ref="stripRef" class="flex aspect-11/1 rounded-b-sm overflow-hidden ring ring-default">
             <button
               v-for="info in swatches"
@@ -631,8 +536,7 @@ function resetEffects() {
               @mouseenter="onSwatchEnter(info.shade)"
               @mouseleave="onSwatchLeave"
             >
-              <!-- Past 19 stops a tile is narrower than the icon, so the badge
-                   becomes a full-height hairline instead. -->
+              <!-- past 19 stops a tile is narrower than the icon — use a hairline -->
               <template v-if="pinnedShades.has(info.shade)">
                 <UIcon
                   v-if="stopStep >= 50"
@@ -712,9 +616,7 @@ function resetEffects() {
                   </div>
                 </div>
 
-                <!-- Paste any format (hex / rgb / oklch) into any field: it
-                     parses, pins the stop to that colour, and the ramp bends to
-                     pass through it. All three fields restate on commit. -->
+                <!-- paste any format into any field: it pins the stop to that colour -->
                 <UInput
                   :model-value="swatchDetail.oklch"
                   size="xs"
@@ -760,9 +662,8 @@ function resetEffects() {
           </UPopover>
         </div>
 
-        <!-- Layered modifiers, each recomputed from the fitted base. The
-             whole trigger group toggles the fold; the reset stops the click
-             so it only resets. -->
+        <!-- Modifiers recompute from the fitted base; the reset stops the
+             click so it doesn't toggle the fold. -->
         <UCollapsible v-model:open="modifiersOpen">
           <div class="flex items-center gap-1">
             <UButton
@@ -774,9 +675,8 @@ function resetEffects() {
               block
               class="flex-1 justify-start"
             />
-            <!-- Density picker rides the Modifiers row so it never overlaps
-                 the curve handles or swatches above. Its own click must not
-                 toggle the fold. -->
+            <!-- rides this row so it never overlaps the curve handles; its
+                 click must not toggle the fold -->
             <UTooltip text="Shade interval">
               <USelect
                 v-model="stopStep"
@@ -787,9 +687,8 @@ function resetEffects() {
                 @click.stop
               />
             </UTooltip>
-            <!-- Modifiers live outside the doc (presets land with them
-                 zeroed), so resetting to defaults IS resetting to the
-                 preset — only the dirty styling mirrors the section resets. -->
+            <!-- modifiers live outside the doc, so defaults = the preset;
+                 only the dirty styling mirrors the section resets -->
             <UTooltip :text="effectsDirty ? 'Reset modifiers' : 'No modifiers active'">
               <UButton
                 icon="i-lucide-rotate-ccw"
diff --git a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
index 71737aa018..c315a3f1eb 100644
--- a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
@@ -7,11 +7,7 @@ import { themeIcons } from '../../utils/theme'
 const props = defineProps<{
   /** Button size — the toolbar uses the default, the header picker slims down. */
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  /**
-   * The studio toolbar opts out of dismissing on its own chrome so the
-   * color-mode switch stays usable while the list is open; other hosts
-   * keep the stock dismiss behavior.
-   */
+  /** Toolbar opts out of dismissing on its own chrome; other hosts keep stock dismiss. */
   keepPanels?: boolean
 }>()
 
@@ -28,11 +24,8 @@ const { hasCSSChanges, hasConfigChanges } = useTheme()
 // the label after mount so hydration matches the server's fallback.
 const mounted = ref(false)
 
-/**
- * Each row leads with a mini theme chip: the doc's neutral ramp as the
- * page, its own icon in its primary — the theme in one glance, following
- * the current color mode (light 50→200 / dark 900→800, primary 500/400).
- */
+// Mini theme chip: the doc's neutral ramp as the page, its icon in its
+// primary, per colour mode.
 function themeChip(doc: ThemeDoc) {
   const shade = (alias: 'primary' | 'neutral', step: Shade) => resolveShade(doc, resolveAlias(doc, alias), step)
   return {
@@ -79,25 +72,18 @@ const selected = computed({
 // the boolean prop shadows the util in template scope — alias the handler
 const onKeepPanels = keepPanels
 
-/**
- * The shuffle die rolls: the icon spins once while cycling faces, then
- * settles on a random face that sticks around until the next roll.
- * Reduced-motion users get the plain shuffle.
- */
+// The shuffle die spins while cycling faces, then settles on a random face.
 const DICE_FACES = ['i-lucide-dice-1', 'i-lucide-dice-2', 'i-lucide-dice-3', 'i-lucide-dice-4', 'i-lucide-dice-5', 'i-lucide-dice-6']
 const diceFace = ref(studioIcons.dice)
 const rolling = ref(false)
 
-// Rest on the active pack's die; only Lucide ships the numbered faces the
-// roll cycles through, so other packs just spin their single die/shuffle.
+// Only Lucide ships numbered faces; other packs spin their single die.
 watch(() => studioIcons.dice, (die) => {
   if (!rolling.value) diceFace.value = die
 })
 
-// keep in sync with the dice-roll keyframes: total duration and the
-// percentage stops where the die hits an edge — each impact flips the face.
-// Tuned on the bench: 6 wall hits, constant travel, 1.3× slowdown per
-// crossing, 1.5 turns with 0.8× spin decay, 12% squash, 12% button bump.
+// Keep in sync with the dice-roll keyframes: the stops are where the die hits
+// an edge — each impact flips the face.
 const ROLL_MS = 675
 const HIT_FRACTIONS = [0.064, 0.147, 0.255, 0.395, 0.578, 0.815]
 let rollTimers: Array<ReturnType<typeof setTimeout>> = []
@@ -124,15 +110,12 @@ async function rollDice() {
   await nextTick()
   rolling.value = true
   rollTimers = HIT_FRACTIONS.map(fraction => setTimeout(() => (diceFace.value = randomFace()), ROLL_MS * fraction))
-  // animationend settles the roll; this is only a safety net for
-  // environments that never fire it
+  // safety net for environments that never fire animationend
   rollTimers.push(setTimeout(onRollEnd, ROLL_MS + 400))
 }
 
-/**
- * The animation clock decides the end — a JS timer would race it and
- *  snap the tumble back a few frames early.
- */
+// The animation clock decides the end — a JS timer would race it and snap the
+// tumble back a few frames early.
 function onRollEnd(event?: AnimationEvent) {
   if (event && !event.animationName.includes('dice-roll')) return
   if (!rolling.value) return
@@ -143,11 +126,8 @@ function onRollEnd(event?: AnimationEvent) {
 
 onUnmounted(clearRollTimers)
 
-/**
- * The baseline preset's name — edits deliberately don't clear it (the
- * dirty dots carry divergence); 'Custom' only when no preset is set but
- * the theme differs from stock.
- */
+// Edits deliberately don't clear the preset name (the dirty dots carry
+// divergence); 'Custom' only when preset-less but diverged from stock.
 const presetLabel = computed(() => {
   if (!mounted.value) return 'Presets'
   const active = presets.find(preset => preset.id === activePreset.value)
@@ -227,11 +207,8 @@ const presetLabel = computed(() => {
 </template>
 
 <style scoped>
-/* Bench-tuned (dice tuner artifact): a die in a fixed box — constant
-   wall-to-wall travel, each crossing 1.3× slower than the last, spin
-   decaying 0.8× per hit, 12% squash on impact, held ~10ms. Impact stops
-   mirror HIT_FRACTIONS; the rotation ends on -540° (pips are 180°-
-   symmetric, so the settled face still reads upright). */
+/* Impact stops mirror HIT_FRACTIONS; rotation ends on -540° (pips are
+   180°-symmetric, so the settled face reads upright). */
 @keyframes dice-roll {
   0% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
   6.4% { transform: translate(-8px, 6px) rotate(-73deg) scale(0.88); }
diff --git a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
index 3c1310f78c..e16a611bdd 100644
--- a/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSliderRow.vue
@@ -3,10 +3,8 @@ import { SHADE_LADDER } from '../../utils/theme-engine'
 import type { ShadeStop } from '../../utils/theme-engine'
 
 /**
- * The studio's control row — a horizontal UFormField: tiny label (or icon),
- * slider, monospace readout. With `chip` + `mode` it becomes a shade
- * slider: the fill and swatch wear the ramp color at the selected shade,
- * and the readout names the shade.
+ * The studio's control row: tiny label (or icon), slider, monospace readout.
+ * With `chip` + `mode` it becomes a shade slider wearing the ramp colour.
  */
 const props = withDefaults(defineProps<{
   /** Names the slider (aria) — shown unless an icon or chip replaces it. */
@@ -23,9 +21,8 @@ const props = withDefaults(defineProps<{
   /** …for this color mode. */
   mode?: 'light' | 'dark'
   /**
-   * Shows a per-row reset button, enabled while an override exists.
-   * Emits `reset` — the host deletes its override (true absence, not
-   * "write the default value", which would pin a lookalike override).
+   * Per-row reset button; `reset` means the host deletes its override —
+   * writing the default value would pin a lookalike override.
    */
   resettable?: boolean
   dirty?: boolean
@@ -50,12 +47,8 @@ const sliderColor = computed(() => {
   return stop.value === 'white' || stop.value === 'black' ? stop.value : `var(--color-${props.chip}-${stop.value})`
 })
 
-/**
- * A border that always contrasts with the fill, derived FROM the fill:
- * relative color syntax steps lightness to near-black on light fills and
- * near-white on dark ones (the ×1000 turns the difference into a hard
- * switch the clamp bounds).
- */
+// Border derived FROM the fill via relative colour syntax — the ×1000 turns
+// the lightness difference into a hard near-black/near-white switch.
 const contrastColor = computed(() => shade.value
   ? `oklch(from ${sliderColor.value} clamp(0.12, (0.66 - l) * 1000, 0.95) 0 h / 0.65)`
   : undefined)
@@ -67,19 +60,13 @@ const display = computed(() => shade.value
   ? String(stop.value)
   : `${String(value.value).replace(/^(-?)0\./, '$1.')}${props.unit ?? ''}`)
 
-/**
- * Typed values keep their precision — a value between step stops is a
- * deliberate choice, so only the range clamps it (which also caps runaway
- * numbers). The toFixed sweeps float noise from step arithmetic.
- */
+// Typed values keep their precision (between-step values are deliberate); only
+// the range clamps. toFixed sweeps float noise from step arithmetic.
 function clamp(raw: number): number {
   return Number(Math.min(sliderMax.value, Math.max(props.min, raw)).toFixed(4))
 }
 
-/**
- * The numeric readout doubles as an input: type a value, or nudge with
- * ArrowUp/ArrowDown (Shift for ×10 steps) without reaching for the slider.
- */
+// The readout doubles as an input: type, or nudge with arrows (Shift ×10).
 function onReadoutKeydown(event: KeyboardEvent) {
   if (event.key === 'Enter') {
     (event.target as HTMLInputElement).blur()
diff --git a/docs/app/components/theme-studio/ThemeStudioTokenShades.vue b/docs/app/components/theme-studio/ThemeStudioTokenShades.vue
index d6383850d3..09e5e85370 100644
--- a/docs/app/components/theme-studio/ThemeStudioTokenShades.vue
+++ b/docs/app/components/theme-studio/ThemeStudioTokenShades.vue
@@ -26,19 +26,16 @@ const shadeLadder = computed<readonly ShadeStop[]>(() => (isCustomPalette(props.
   ? SHADE_LADDERS[storedStopStep(paletteParams.value[props.alias])]
   : SHADE_LADDER))
 
-// Per-token shade sliders, one light/dark pair. Only the touched mode is
-// written so an untouched mode never becomes an override. Dirty and reset
-// measure against the BASELINE preset's own choice for the token: reset
-// restores the preset's shade, or deletes the override entirely when the
-// preset made no choice (the token's real default may not sit on the ramp
-// at all — --ui-bg is literally `white` — so writing a "default shade"
-// would pin a lookalike override over it).
+// Only the touched mode is written, so an untouched mode never becomes an
+// override. Reset restores the BASELINE preset's shade, or deletes the entry
+// when the preset made no choice — a token's real default may not sit on the
+// ramp at all (--ui-bg is literally `white`).
 function tokenShadeControl(token: string, defaults: { light: ShadeStop, dark: ShadeStop }, target: 'light' | 'dark') {
   const model = computed({
     get: () => {
       const value = style.value.tokenShades?.[token]?.[target] ?? defaults[target]
-      // A stop chosen at a finer density, then coarsened away, no longer sits
-      // on the ladder (indexOf -1) — clamp to 0 so the slider stays grabbable.
+      // a stop coarsened off the ladder reads indexOf -1 — clamp so the
+      // slider stays grabbable
       return Math.max(0, shadeLadder.value.indexOf(value as ShadeStop))
     },
     set: (index: number) => {
diff --git a/docs/app/components/theme-studio/ThemeStudioViewA11y.vue b/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
index 0c8f83bc61..393526182e 100644
--- a/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
+++ b/docs/app/components/theme-studio/ThemeStudioViewA11y.vue
@@ -3,11 +3,8 @@ import type { ButtonProps } from '@nuxt/ui'
 import { blendColors, contrastRatio } from '../../utils/theme-engine'
 
 /**
- * WCAG contrast matrix for the CURRENT theme: every text-role token against
- * every surface token, plus inverted text on the solid semantic surfaces
- * (what buttons render). Colors are read from the live computed custom
- * properties, so the matrix is the resolved ground truth — custom palettes,
- * shade sliders and mode switches included.
+ * WCAG contrast matrix for the current theme, read from the live computed
+ * custom properties — the resolved ground truth.
  */
 const FOREGROUNDS = [
   { token: '--ui-text-highlighted', label: 'Highlighted' },
@@ -34,11 +31,8 @@ const BACKGROUNDS = [
 /** Solid surfaces (buttons, badges) render --ui-text-inverted on the alias. */
 const SOLIDS = FOREGROUNDS.slice(5)
 
-/**
- * The color/variant grid buttons and badges actually paint. Tinted variants
- * use an alpha of the alias over the page background, so the measured pair is
- * the composited pixel — not the alias against a surface it never touches.
- */
+// Tinted variants measure the composited pixel (alias alpha over the page),
+// not the alias against a surface it never touches.
 const VARIANTS = ['solid', 'outline', 'soft', 'subtle', 'ghost', 'link'] as const
 
 const VARIANT_COLORS: Array<{ key: NonNullable<ButtonProps['color']>, label: string, icon: string }> = [
@@ -128,10 +122,8 @@ function neutralSpecs(styles: CSSStyleDeclaration, page: string, inverted: strin
   ]
 }
 
-/**
- * The theme applies through <style> tags useHead swaps asynchronously —
- * recompute a beat after any state that feeds them changes.
- */
+// The theme applies through <style> tags useHead swaps asynchronously —
+// recompute a beat after any state that feeds them changes.
 const colorMode = useColorMode()
 const appConfig = useAppConfig()
 // the owning composable's refs — never re-seed these channels here
@@ -144,9 +136,8 @@ let pending = 0
 let queued = false
 function scheduleCompute() {
   cancelAnimationFrame(pending)
-  // One queued tick at a time — rapid changes (curve drags) would otherwise
-  // stack nextTick callbacks, each spawning its own rAF chain into the
-  // layout-reading compute().
+  // one queued tick at a time — curve drags would otherwise stack nextTick
+  // callbacks, each spawning its own rAF chain
   if (queued) return
   queued = true
   nextTick(() => {
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index bd63eb52e4..31d11fd564 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -7,12 +7,11 @@ import type { ThemeDoc, ThemePalette } from '../utils/theme-engine'
 import { omit } from '#ui/utils'
 import colors from 'tailwindcss/colors'
 
-// AI `applyTheme` output is untrusted and ends up concatenated into <style> rules, so
-// only persist values that are plain CSS-safe tokens. This is the single write boundary,
-// which keeps every downstream sink (live useHead styles and the FOUC inline scripts) safe.
+// AI `applyTheme` output is untrusted and gets concatenated into <style> rules —
+// this is the single write boundary, so only CSS-safe tokens may persist.
 const SAFE_NAME = /^[\w -]{1,50}$/
 const SAFE_HEX = /^#[0-9a-f]{3,8}$/i
-// The engine's canonical shade format (tailwind v4 style): `oklch(62.3% 0.214 259.815)`.
+// the engine's canonical shade format: `oklch(62.3% 0.214 259.815)`
 const SAFE_OKLCH = /^oklch\(\d{1,3}(?:\.\d+)?% \d(?:\.\d+)? \d{1,3}(?:\.\d+)?\)$/i
 const SAFE_CSS_VAR_KEY = /^--[\w-]+$/
 const SAFE_CSS_VAR_VALUE = /^(?:var\(--[\w-]+\)|#[0-9a-f]{3,8}|[a-z]+|-?\d{1,3}(?:\.\d+)?(?:px|%))$/i
@@ -61,8 +60,7 @@ export function useTheme() {
   const colorMode = useColorMode()
   const { track } = useAnalytics()
 
-  // The scale sliders stream through their setters at drag frequency —
-  // one analytics event per burst is plenty.
+  // sliders stream through setters at drag frequency — one event per burst
   let trackedAt: number | undefined
   function trackThrottled(...args: Parameters<typeof track>) {
     if (!trackedAt || Date.now() - trackedAt > 2000) {
@@ -73,30 +71,24 @@ export function useTheme() {
   const { framework } = useFrameworks()
 
   const aiThemeExtras = useState<Record<string, any>>('nuxt-ui-ai-theme', () => readLocalStorage('nuxt-ui-ai-theme', {}))
-  // Style-treatment class bundles live in their OWN channel so restyling
-  // (which regenerates the whole bundle) can never destroy preset/AI
-  // component overrides that share the same component keys.
+  // style-treatment bundles live in their OWN channel so restyling can never
+  // destroy preset/AI overrides sharing the same component keys
   const styleUiData = useState<Record<string, any>>('nuxt-ui-style-ui', () => readLocalStorage('nuxt-ui-style-ui', {}))
   const customColorsData = useState<Record<string, Record<string, string>>>('nuxt-ui-custom-colors', () => readLocalStorage('nuxt-ui-custom-colors', {}))
 
-  // The neutral may be a custom palette (AI themes, studio presets) with no entry in
-  // tailwindcss/colors — a throw here would abort the whole unhead flush, taking every
-  // other theme <style> down with it.
+  // The neutral may be a custom palette with no tailwindcss/colors entry —
+  // a throw here would abort the whole unhead flush.
   const color = computed(() => {
     const neutral = appConfig.ui.colors.neutral
-    // Match the page background in both modes (docs light baseline is
-    // neutral-50, not white) so browser chrome doesn't seam against the page.
+    // match the page background (docs light baseline is neutral-50, not white)
     const shade = colorMode.value === 'dark' ? 900 : 50
     return (colors as any)[neutral]?.[shade] || customColorsData.value[neutral]?.[shade] || (colors as any).slate[shade]
   })
   const cssVariablesData = useState<{ light?: Record<string, string>, dark?: Record<string, string> }>('nuxt-ui-css-variables', () => readLocalStorage('nuxt-ui-css-variables', {}))
   /** The studio's style axis (it owns writes); read here for currentDoc/export. */
   const stylePrefs = useState<ThemeDoc['style']>(THEME_STATE_KEYS.stylePrefs, () => readLocalStorage(THEME_STORAGE_KEYS.style, {}))
-  // The storage listener doubles as the SAME-TAB sync channel: useTheme is
-  // not a shared composable, so the preset menu's ref and the style
-  // renderer's ref only converge through vueuse's storage events. (It also
-  // half-syncs across tabs — colors/tokens don't follow — a wart, but
-  // disabling it here breaks live updates within one tab.)
+  // useTheme is not a shared composable — separate instances of these refs
+  // only converge through vueuse's storage events, so the listener stays on
   const _radius = useLocalStorage('nuxt-ui-radius', 0.25)
   const _fontSize = useLocalStorage('nuxt-ui-font-size', 16)
   const _spacing = useLocalStorage('nuxt-ui-spacing', 0.25)
@@ -104,11 +96,7 @@ export function useTheme() {
   const _iconSet = useLocalStorage('nuxt-ui-icons', 'lucide')
   const _blackAsPrimary = useLocalStorage('nuxt-ui-black-as-primary', false)
 
-  /**
-   * Typography beyond the base family: body weight plus the heading
-   * treatment. One JSON channel (state + storage under the same key) so
-   * resetTheme and the FOUC script share it.
-   */
+  /** Typography beyond the base family — one JSON channel shared with the FOUC script. */
   const fontPrefs = useState<FontPrefs>('nuxt-ui-font-prefs', () => readLocalStorage('nuxt-ui-font-prefs', {}))
 
   function setFontPrefs(next: FontPrefs) {
@@ -127,8 +115,7 @@ export function useTheme() {
     const heading = next.heading || {}
     const cleanHeading: NonNullable<FontPrefs['heading']> = {}
     if (heading.font && heading.font !== _font.value) cleanHeading.font = heading.font
-    // 700 is the heading resting point (the slider's default position) —
-    // storing it would pin the toolbar's B active and pollute exports.
+    // 700 is the heading resting point — storing it would pollute exports
     if (heading.weight !== undefined && heading.weight !== 700) cleanHeading.weight = heading.weight
     if (heading.uppercase) cleanHeading.uppercase = true
     if (heading.italic) cleanHeading.italic = true
@@ -147,9 +134,8 @@ export function useTheme() {
     trackThrottled('Theme Changed', { setting: 'fontPrefs' })
   }
 
-  // taupe/mauve/mist/olive ship with tailwind v4's theme.css but not (yet)
-  // the tailwindcss/colors JS export — swatches and fits resolve them from
-  // the CSS variables instead.
+  // taupe/mauve/mist/olive ship in tailwind's theme.css but not (yet) the
+  // tailwindcss/colors JS export — swatches resolve them from CSS variables
   const neutralColors = ['slate', 'gray', 'zinc', 'neutral', 'stone', 'taupe', 'mauve', 'mist', 'olive']
   const neutral = computed({
     get() {
@@ -295,15 +281,13 @@ export function useTheme() {
   const hasCSSVariables = computed(() => Object.keys(cssVariablesData.value.light || {}).length > 0 || Object.keys(cssVariablesData.value.dark || {}).length > 0)
 
   const radiusStyle = computed(() => `:root { --ui-radius: ${_radius.value}rem; }`)
-  // font-size scales every rem metric (UI scale); --spacing is tailwind v4's
-  // base unit behind all spacing utilities (density).
+  // font-size scales every rem metric; --spacing is tailwind's base density unit
   const fontSizeStyle = computed(() => _fontSize.value !== 16 ? `html { font-size: ${_fontSize.value}px; }` : 'html {}')
   const spacingStyle = computed(() => _spacing.value !== 0.25 ? `:root { --spacing: ${_spacing.value}rem; }` : ':root {}')
   const blackAsPrimaryStyle = computed(() => _blackAsPrimary.value ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
   const fontStyle = computed(() => {
-    // _font/heading.font hydrate unvalidated from localStorage into this <style>
-    // innerHTML — re-assert SAFE_NAME at the sink so a tampered name can't break
-    // out of the quoted string.
+    // fonts hydrate unvalidated from localStorage — re-assert SAFE_NAME at
+    // the sink so a tampered name can't break out of the quoted string
     const safeFont = SAFE_NAME.test(_font.value) ? _font.value : 'Public Sans'
     const parts = [`:root { --font-sans: '${safeFont}', sans-serif; }`]
     const prefs = fontPrefs.value
@@ -404,11 +388,7 @@ export function useTheme() {
       || !!aiThemeExtras.value.ui
   })
 
-  /**
-   * Snapshot the live theme state as a sparse ThemeDoc — the single input
-   * for the theme-engine export generators and, eventually, the studio's
-   * source of truth.
-   */
+  /** Snapshot the live theme state as a sparse ThemeDoc — the export generators' input. */
   function currentDoc(): ThemeDoc {
     const doc: ThemeDoc = { version: 1 }
 
@@ -439,32 +419,23 @@ export function useTheme() {
     if (Object.keys(fontDoc).length) doc.font = fontDoc
     if (_iconSet.value !== THEME_DEFAULTS.icons) doc.icons = _iconSet.value
 
-    // Only palettes actually referenced by an alias belong in the export —
-    // leftovers from a previous custom palette would bloat the @theme block.
-    // Reference by the alias's CURRENT value, not just overrides: a custom
-    // palette can shadow a default name (AI retunes 'green' while primary
-    // stays 'green') and must still export.
+    // Only alias-referenced palettes export. Reference by CURRENT value, not
+    // overrides — a custom palette can shadow a default name and must still export.
     const referenced = new Set(Object.values(appConfig.ui.colors as Record<string, string>))
     const paletteEntries = Object.entries(customColorsData.value).filter(([name]) => referenced.has(name))
     if (paletteEntries.length) {
       doc.palettes = Object.fromEntries(paletteEntries.map(([name, shades]) => [name, { shades: shades as ThemePalette['shades'] }]))
     }
 
-    // The studio's style prefs, read from the shared reactive state (the
-    // studio owns writes) so callers watching currentDoc() re-run on style
-    // edits — a raw localStorage read here would be invisible to reactivity.
+    // read from reactive state, not localStorage, so watchers re-run on style edits
     const style = stylePrefs.value
     if (!isDefaultStyle(style)) {
       doc.style = style
     }
 
-    // Diff against the LIBRARY defaults, not the docs baseline — the export
-    // must reproduce the preview on top of a stock @nuxt/ui install.
-    // Studio-only vars (hand-rolled preview markup) stay out of exports.
-    // The style treatment's variables live in this channel too (the studio
-    // applies them there for the live preview) — but doc.style already
-    // accounts for them, so tokens only keep values that DIVERGE from the
-    // style expansion.
+    // Diff against LIBRARY defaults (exports sit on a stock install), drop
+    // studio-only vars, and keep only values that diverge from the style
+    // expansion — doc.style already accounts for the rest.
     const styleVars = doc.style ? styleTokens(doc.style) : { light: {}, dark: {} }
     const light = Object.fromEntries(Object.entries(cssVariablesData.value.light || {}).filter(([key, val]) => !key.startsWith('--studio-') && val !== LIBRARY_TOKEN_DEFAULTS.light[key as keyof typeof LIBRARY_TOKEN_DEFAULTS.light] && val !== (styleVars.light as Record<string, string>)[key]))
     const dark = Object.fromEntries(Object.entries(cssVariablesData.value.dark || {}).filter(([key, val]) => !key.startsWith('--studio-') && val !== LIBRARY_TOKEN_DEFAULTS.dark[key as keyof typeof LIBRARY_TOKEN_DEFAULTS.dark] && val !== (styleVars.dark as Record<string, string>)[key]))
@@ -483,8 +454,7 @@ export function useTheme() {
     return doc
   }
 
-  // Pure generation — callers track 'Theme Exported' on the actual copy,
-  // so opening the export modal doesn't inflate the metric.
+  // pure generation — callers track 'Theme Exported' on the actual copy
   function exportCSS(): string {
     return generateCSS(currentDoc())
   }
@@ -516,9 +486,8 @@ export function useTheme() {
   }
 
   /**
-   * Rebuild `appConfig.ui.<component>` for the given keys from the two
-   * override channels: the style bundle first, preset/AI extras last (so
-   * explicit overrides win the class merge).
+   * Rebuild `appConfig.ui.<component>` for the given keys: style bundle
+   * first, preset/AI extras last so explicit overrides win the class merge.
    */
   function recomposeComponentOverrides(keys: Iterable<string>) {
     for (const key of keys) {
@@ -562,8 +531,7 @@ export function useTheme() {
   }
 
   function applyThemeSettings(settings: Record<string, any>, options: { track?: boolean } = {}) {
-    // Sanitize once up front — later checks must consult the SANITIZED set,
-    // or a rejected palette could still be selected as an alias.
+    // sanitize up front — later checks must consult the SANITIZED set
     const safeCustomColors = settings.customColors && typeof settings.customColors === 'object'
       ? sanitizeCustomColors(settings.customColors)
       : {}
@@ -574,12 +542,10 @@ export function useTheme() {
     }
 
     if (settings.primary && SAFE_NAME.test(settings.primary)) primary.value = settings.primary
-    // Any known palette is a valid neutral (the studio suggests every ramp
-    // for either role); custom palettes (injected via customColors) count
-    // too, e.g. presets shipping their own ramp.
+    // any known palette is a valid neutral, custom ones included
     if (settings.neutral && SAFE_NAME.test(settings.neutral) && (neutralColors.includes(settings.neutral) || primaryColors.includes(settings.neutral) || (customColorsData.value[settings.neutral] || safeCustomColors[settings.neutral]))) neutral.value = settings.neutral
     if (settings.radius !== undefined && Number.isFinite(Number(settings.radius))) radius.value = Number(settings.radius)
-    // Clamped: these scale the whole page, so a wild value would wreck it.
+    // clamped: these scale the whole page
     if (settings.fontSize !== undefined && Number.isFinite(Number(settings.fontSize))) fontSize.value = Math.min(20, Math.max(12, Number(settings.fontSize)))
     if (settings.spacing !== undefined && Number.isFinite(Number(settings.spacing))) spacing.value = Math.min(0.5, Math.max(0.125, Number(settings.spacing)))
     if (settings.font && SAFE_NAME.test(settings.font)) font.value = settings.font
@@ -628,18 +594,16 @@ export function useTheme() {
     if (settings.ui) {
       savedExtras.ui = savedExtras.ui || {}
       for (const [key, value] of Object.entries(settings.ui)) {
-        // Skip `colors` (handled above), `icons` (the reload path skips it
-        // too — a partial map would blank icons app-wide) and
-        // prototype-chain keys that would pollute appConfig.ui when assigned.
+        // skip colors (handled above), icons (a partial map would blank
+        // icons app-wide) and prototype-polluting keys
         if (key === 'colors' || key === 'icons' || key === '__proto__' || key === 'constructor' || key === 'prototype') continue
 
         savedExtras.ui[key] = defu(value as Record<string, any>, savedExtras.ui[key] || {})
       }
     }
 
-    // Only rewrite the channel when this call actually touched it — style
-    // sliders and curve drags stream through here and must not re-persist
-    // (or reactively wake) the AI extras every tick.
+    // only rewrite the channel when touched — slider/curve drags stream
+    // through here and must not reactively wake the AI extras every tick
     const touchedExtras = settings.ui || colorKeys.some(color => settings[color] && SAFE_NAME.test(settings[color]))
     if (touchedExtras) {
       aiThemeExtras.value = savedExtras
@@ -649,15 +613,14 @@ export function useTheme() {
       recomposeComponentOverrides(Object.keys(savedExtras.ui || {}))
     }
 
-    // Hot paths (style sliders, curve drags at ~16Hz) opt out; only real
-    // entry points (AI chat, presets) should emit an analytics event.
+    // hot paths (slider/curve drags) opt out of the analytics event
     if (options.track !== false) {
       track('AI Theme Applied')
     }
   }
 
-  // applyDoc resets before applying — without the opt-out every preset,
-  // import, shuffle and undo/redo would count as a "Theme Reset".
+  // track opt-out: applyDoc resets before applying — every preset swap and
+  // undo/redo would otherwise count as a "Theme Reset"
   function resetTheme(options: { track?: boolean, immediate?: boolean } = {}) {
     if (options.track !== false) {
       track('Theme Reset')
@@ -699,25 +662,21 @@ export function useTheme() {
     customColorsData.value = {}
     cssVariablesData.value = {}
 
-    // Studio-owned state must reset with the theme regardless of which
-    // reset button was pressed (popover, chat, or studio) — orphaned style
-    // prefs would silently resurrect on the next style click or export.
+    // studio-owned state resets too — orphaned style prefs would silently
+    // resurrect on the next style click or export
     setStyleUi({})
     window.localStorage.removeItem(THEME_STORAGE_KEYS.preset)
     window.localStorage.removeItem(THEME_STORAGE_KEYS.style)
     window.localStorage.removeItem(THEME_STORAGE_KEYS.paletteParams)
     useState<Record<string, any>>(THEME_STATE_KEYS.stylePrefs).value = {}
     useState<string | undefined>(THEME_STATE_KEYS.themePreset).value = undefined
-    // The in-memory curve params too — the storage key alone leaves the
-    // palette editor showing (and re-persisting) supposedly-reset curves.
+    // in-memory curve params too, or the palette editor re-persists them
     useState<Record<string, any>>(THEME_STATE_KEYS.paletteParams).value = {}
 
-    // Clearing the live <style> tags imperatively makes a bare reset take
-    // effect on the same frame. But when a reset is immediately followed by a
-    // re-apply (applyDoc: preset swap, undo/redo), that cleared frame paints as
-    // the default theme first — a white flash. Those callers pass immediate:
-    // false so the reactive customColors/cssVariables state ({} → new value in
-    // one tick) swaps the tags atomically with no intermediate paint.
+    // Imperative clearing makes a bare reset land the same frame — but a
+    // reset-then-reapply (preset swap, undo/redo) would flash the default
+    // theme, so those callers pass immediate: false and let reactivity swap
+    // the tags atomically.
     if (import.meta.client && options.immediate !== false) {
       document.getElementById(THEME_TAG_IDS.cssVariables)?.replaceChildren()
       document.getElementById(THEME_TAG_IDS.customColors)?.replaceChildren()
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 59c2035e31..34b29375e0 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -415,7 +415,7 @@ export function useThemeStudio() {
       font: { sans: pick(theme.fonts) },
       // Weighted so most rolls stay clean, with the occasional loud one.
       style: {
-        shadow: pick(['none', 'none', 'custom', 'custom'] as const),
+        ...(Math.random() < 0.5 ? { shadow: 'custom' as const } : {}),
         border: pick(['default', 'default', 'custom', 'none'] as const)
       }
     }
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 9346666280..f5df882a89 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -2,14 +2,11 @@
 const { track } = useAnalytics()
 const { resetTheme, icon: iconSet } = useTheme()
 
-// The studio toolbar skins to the applied pack: undo/redo/reset/export/
-// fullscreen come from the pack's studio glyphs, while import and the group
-// picker's chevron reuse the standard `upload`/`chevronDown` semantic keys
-// (read off appConfig.ui.icons, already the active pack's resolved map).
+// Toolbar skins to the applied icon pack; import/chevron reuse the standard
+// semantic keys off appConfig.ui.icons.
 const studioIcons = useStudioIcons()
 
-// View and fullscreen are app-level state: the site header hosts the view
-// switcher while on /theme and hides itself in fullscreen.
+// App-level: the site header hosts the view switcher and hides in fullscreen.
 const { view, fullscreen } = useThemeStudioView()
 const { past, future, snapshot, align, capture, undo, redo } = useThemeStudioHistory()
 
@@ -27,9 +24,8 @@ onMounted(() => {
   align(snapshot())
 })
 
-// A debounced capture folds slider-drag bursts (and a reset) into single
-// history steps. The snapshot spans the doc AND the editor's curve/pin params,
-// so undo restores the palette editor's state, not just the visible colours.
+// Debounced capture folds slider-drag bursts into single history steps; the
+// snapshot spans the doc AND the editor's curve/pin params.
 let captureTimeout: ReturnType<typeof setTimeout> | undefined
 watch(() => (mounted.value ? snapshot() : undefined), (snap) => {
   if (!snap) return
@@ -37,12 +33,9 @@ watch(() => (mounted.value ? snapshot() : undefined), (snap) => {
   captureTimeout = setTimeout(() => capture(snap), 350)
 })
 
-// ⌃⇧D flips the mode without a click, so open panels survive the switch.
-// The chord threads several needles: bare Shift+D is a screen-reader
-// landmark key (and a WCAG 2.1.4 character shortcut); macOS eats ⌘⇧L
-// (Search-with-Google Service) and fires ⌘⇧D's menu binding (bookmark all
-// tabs) at the NSMenu level where pages can't block it. Control chords
-// have no macOS menu bindings, and Windows accelerators are preventable.
+// ⌃⇧D: bare Shift+D is a screen-reader landmark key, and macOS fires ⌘⇧D/⌘⇧L
+// menu bindings at the NSMenu level where pages can't block them — control
+// chords are the safe zone.
 const colorMode = useColorMode()
 function toggleColorMode() {
   colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
@@ -58,15 +51,9 @@ const groupDirtyFlags = {
   style: groupDirty('style')
 }
 
-/**
- * The toolbar reset is two-stage: edits on top of a preset reset back to
- * the preset (matching the section resets' baseline), and a second press —
- * already clean at the preset — clears the preset back to stock Nuxt UI.
- * Disabled only once nothing diverges from stock.
- */
-// Gated on `mounted`: the persisted theme is client-only, and a state that
-// diverges from the SSR render would leave stale hydration-adopted
-// attributes (a disabled= that never lifts) on the button.
+// Two-stage reset: edits reset back to the preset, a second press clears the
+// preset back to stock. Gated on `mounted` — the persisted theme is client-only
+// and hydration would adopt a disabled= that never lifts.
 const anyDirty = computed(() => mounted.value && Object.values(groupDirtyFlags).some(flag => flag.value))
 const baselinePreset = computed(() => mounted.value ? presets.find(preset => preset.id === activePreset.value) : undefined)
 const resetsToPreset = computed(() => Boolean(baselinePreset.value) && anyDirty.value)
@@ -81,11 +68,8 @@ function resetToBaseline() {
   else resetTheme()
 }
 
-/**
- * The mode tabs follow the app-wide default size setting like every other
- * toolbar control — but one step down: tabs at the default size read a
- * size too big next to the buttons.
- */
+// Mode tabs follow the default size setting, one step down — full size reads
+// too big next to the buttons.
 const SIZE_LADDER = ['xs', 'sm', 'md', 'lg', 'xl'] as const
 const modeTabsSize = computed(() => {
   const base = style.value.defaults?.size
@@ -112,26 +96,20 @@ defineShortcuts({
   f: () => (fullscreen.value = !fullscreen.value)
 })
 
-// Esc exits fullscreen — but NOT through defineShortcuts, which
-// preventDefaults every matched key and would stop Reka's dismissable
-// layers from ever seeing Escape (no popover on /theme could close). A
-// plain listener defers whenever a layer is open, so Esc closes the
-// popover first and exits fullscreen on the next press.
+// Esc exits fullscreen — not via defineShortcuts, whose preventDefault would
+// stop Reka's dismissable layers from ever seeing Escape. A plain listener
+// defers while a layer is open, so Esc closes the popover first.
 function onEscape(event: KeyboardEvent) {
   if (event.key !== 'Escape' || !fullscreen.value || event.defaultPrevented) return
-  // Only VISIBLE layers defer — pre-mounted closed overlays (the search
-  // palette) keep their layer marker in the DOM.
+  // only VISIBLE layers defer — closed overlays keep their marker in the DOM
   const layers = document.querySelectorAll('[data-dismissable-layer]')
   if ([...layers].some(layer => layer.getClientRects().length)) return
   fullscreen.value = false
 }
 onMounted(() => window.addEventListener('keydown', onEscape))
 
-// The fullscreen state is app-level (the site header gates on it) — never
-// let it leak past the studio. The pending capture flushes rather than
-// dies: an edit made inside the debounce window would otherwise vanish
-// from history, and a pending post-restore realign would stay armed and
-// swallow the next edit after remount.
+// Fullscreen must not leak past the studio. The pending capture flushes rather
+// than dies — an edit inside the debounce window would vanish from history.
 onUnmounted(() => {
   window.removeEventListener('keydown', onEscape)
   fullscreen.value = false
@@ -145,13 +123,9 @@ const settingGroups = [
   { label: 'Style', value: 'style' }
 ] as const
 
-/**
- * Fullscreen toolbar reveal. Pointer proximity is tracked with a mousemove
- * listener instead of an invisible hover overlay — an overlay would eat
- * clicks on the preview's bottom edge. The bar also pins open while any of
- * its panels is open: their content portals to <body>, so hover/focus-within
- * alone would retract the bar underneath its own popovers.
- */
+// Fullscreen reveal via mousemove, not a hover overlay (it would eat clicks on
+// the preview's bottom edge). The bar pins open while a panel is open — panel
+// content portals to <body>, so hover alone would retract it under its popovers.
 const nearBottom = ref(false)
 function onPointerNear(event: MouseEvent) {
   nearBottom.value = window.innerHeight - event.clientY <= 96
@@ -175,23 +149,14 @@ const shareMode = ref<'import' | 'export'>('export')
 </script>
 
 <template>
-  <!-- The app root (#__nuxt) paints bg-default via nuxt.config rootAttrs —
-       the page tint composites on top of it. -->
+  <!-- page tint composites on the app root's bg-default (nuxt.config rootAttrs) -->
   <main class="bg-elevated/25">
     <UContainer :class="fullscreen && 'max-w-none px-0 sm:px-0 lg:px-0'">
-      <!-- Structured borders (like /releases and /templates): border-x rails
-           run from the header's bottom border to the viewport bottom at the
-           container's padding edge — no floating card. -->
+      <!-- structured borders like /releases: border-x rails, no floating card -->
       <div class="flex flex-col w-full bg-default" :class="fullscreen ? 'h-dvh' : 'h-[calc(100dvh-var(--ui-header-height))] border-x border-default'">
-        <!-- The preview: the grid scrolls inside it; the app-shell views own
-             their height and scroll internally. [contain:paint] puts hard
-             paint containment on the views' own scrollers — Chromium won't
-             clip nested composited layers (sticky headers, filtered glows)
-             by an ancestor's overflow alone. -->
-        <!-- Keyed on the icon pack: the demo views resolve icons into plain
-             data arrays at setup, so they can't react to a live pack swap in
-             place — remounting on the (infrequent) swap re-resolves them,
-             which is far cheaper than making every demo's data computed. -->
+        <!-- [contain:paint]: Chromium won't clip nested composited layers by
+             an ancestor's overflow alone. Keyed on the icon pack: demo views
+             resolve icons at setup, so a pack swap remounts to re-resolve. -->
         <div :key="iconSet" class="flex-1 min-h-0 overflow-hidden [&>*]:[contain:paint]">
           <Playground v-if="view === 'grid'" />
           <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
@@ -205,14 +170,9 @@ const shareMode = ref<'import' | 'export'>('export')
           <ThemeStudioViewA11y v-else-if="view === 'a11y'" />
         </div>
 
-        <!-- One toolbar at the bottom: history leftmost, presets and
-             setting-group popovers, document actions on the right. In
-             fullscreen it floats over the bottom edge at the normal
-             container width, peeking a few pixels until the pointer
-             nears the bottom (Esc still exits); only that strip catches
-             the pointer so the preview stays clickable. -->
-        <!-- UContainer's own recipe, so the floating bar's edges line up
-             with every other page's content. -->
+        <!-- In fullscreen the toolbar floats over the bottom edge at
+             UContainer's own recipe (edges line up with other pages); only
+             the strip catches the pointer so the preview stays clickable. -->
         <div :class="fullscreen ? 'group fixed bottom-0 inset-x-0 z-50 pointer-events-none w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8' : 'shrink-0'">
           <!-- thin touch affordance only — mouse reveal is proximity-driven -->
           <div v-if="fullscreen" class="absolute bottom-0 inset-x-0 h-2 pointer-events-auto" />
@@ -270,9 +230,8 @@ const shareMode = ref<'import' | 'export'>('export')
 
             <span class="flex-1" />
 
-            <!-- The header center hosts the view switcher on desktop; the
-               toolbar keeps one for mobile and for fullscreen, where the
-               header is hidden. -->
+            <!-- desktop's switcher lives in the header; this one covers
+                 mobile and fullscreen -->
             <ThemeStudioViewSwitcher
               v-model:open="openPanels.view"
               :content="{ align: 'end' }"
diff --git a/docs/app/plugins/theme.ts b/docs/app/plugins/theme.ts
index 0d96545b67..fcedf689ff 100644
--- a/docs/app/plugins/theme.ts
+++ b/docs/app/plugins/theme.ts
@@ -51,25 +51,10 @@ export default defineNuxtPlugin({
       restoreNamedState(THEME_STORAGE_KEYS.style, THEME_STATE_KEYS.stylePrefs)
       restoreNamedState(THEME_STORAGE_KEYS.paletteParams, THEME_STATE_KEYS.paletteParams)
 
-      // Migrate legacy persisted shadows onto the one 'custom' config. Both
-      // aliases still read as Custom everywhere, but canonicalising here means
-      // the next save writes 'custom' — and a bare 'soft' predates explicit
-      // geometry, so hand it the blurred default it used to imply.
+      // The persisted style-ui bundle is DERIVED from the style prefs —
+      // recompute it on load so fragment changes shipped in code reach
+      // already-persisted themes instead of serving a stale bundle.
       const persisted = useState<any>(THEME_STATE_KEYS.stylePrefs)
-      if (persisted.value && typeof persisted.value === 'object') {
-        const next = { ...persisted.value }
-        if (next.shadow === 'soft' && next.shadowGeometry === undefined) {
-          next.shadowGeometry = { x: 0, y: 6, blur: 12, spread: 0 }
-        }
-        if (next.shadow === 'soft' || next.shadow === 'hard') next.shadow = 'custom'
-        if (next.innerShadow === 'soft' || next.innerShadow === 'hard') next.innerShadow = 'custom'
-        persisted.value = next
-      }
-
-      // The persisted style-ui bundle is DERIVED from the style prefs, but the
-      // live path only rewrites it on a style edit — recompute it here so
-      // fragment changes shipped in code reach already-persisted themes on
-      // reload instead of serving a stale bundle until the next edit.
       if (persisted.value && Object.keys(persisted.value).length) {
         const bundle = styleComponents(persisted.value)
         useState<Record<string, any>>('nuxt-ui-style-ui').value = bundle
@@ -80,19 +65,13 @@ export default defineNuxtPlugin({
         }
       }
 
-      // Keep the .shadow-custom root flag in lockstep with the shadow treatment
-      // on EVERY path: setStyle (sliders) and applyDoc (presets, which set
-      // style.value directly and bypass setStyle) both flow through this one
-      // watcher, so gated shadows update without a reload. One persistent
-      // watcher here beats per-composable toggles scattered across call sites.
+      // One persistent watcher keeps the shadow root flags in lockstep on
+      // every path — applyDoc (presets) bypasses setStyle, so per-call-site
+      // toggles would miss it.
       const stylePrefs = useState<{ shadow?: string }>(THEME_STATE_KEYS.stylePrefs)
       watch(() => stylePrefs.value?.shadow, (shadow) => {
         const flags = document.documentElement.classList
-        // Custom swaps the default ramp for the config-driven scale; None strips
-        // it to nothing; Inherit leaves the native Tailwind ramp. ('soft'/'hard'
-        // are legacy aliases of the one config shadow.)
-        const custom = shadow === 'custom' || shadow === 'soft' || shadow === 'hard'
-        flags.toggle('shadow-custom', custom)
+        flags.toggle('shadow-custom', shadow === 'custom')
         flags.toggle('shadow-none', shadow === 'flat')
       }, { immediate: true })
 
@@ -106,8 +85,7 @@ export default defineNuxtPlugin({
         const styleUi = JSON.parse(localStorage.getItem('nuxt-ui-style-ui') || '{}')
         if (extras.ui || Object.keys(styleUi).length) {
           onNuxtReady(() => {
-            // Same composition as the live path: style bundle first,
-            // preset/AI extras last so explicit overrides win the merge.
+            // same order as the live path: style bundle first, extras win
             const merged = mergeUi(styleUi, extras.ui || {})
             for (const [key, value] of Object.entries(merged)) {
               if (key === 'colors' || key === 'icons') continue
@@ -121,11 +99,8 @@ export default defineNuxtPlugin({
     }
 
     if (import.meta.server) {
-      // Inline scripts below intentionally duplicate logic from the client-side composable
-      // (useTheme / injectCustomColors / injectCSSVariables) to restore persisted theme
-      // settings on first paint and prevent a flash of unstyled content (FOUC).
-      // The script IDs (nuxt-ui-custom-colors, nuxt-ui-css-variables, nuxt-ui-radius, etc.)
-      // correspond to the <style> elements managed by useTheme via useHead.
+      // FOUC scripts: intentionally duplicate useTheme's logic to restore
+      // persisted settings on first paint, targeting the same <style> ids.
       useHead({
         script: [{
           innerHTML: `
@@ -212,7 +187,7 @@ export default defineNuxtPlugin({
             try {
               var st = JSON.parse(localStorage.getItem('nuxt-ui-style') || '{}');
               var sh = st && st.shadow;
-              if (sh === 'custom' || sh === 'soft' || sh === 'hard') document.documentElement.classList.add('shadow-custom');
+              if (sh === 'custom') document.documentElement.classList.add('shadow-custom');
               else if (sh === 'flat') document.documentElement.classList.add('shadow-none');
             } catch (e) {}
           `.replace(/\s+/g, ' '),
diff --git a/docs/app/utils/theme-engine/export.ts b/docs/app/utils/theme-engine/export.ts
index 9ad4ed8c0b..c8758fcec1 100644
--- a/docs/app/utils/theme-engine/export.ts
+++ b/docs/app/utils/theme-engine/export.ts
@@ -1,13 +1,10 @@
 import { themeIcons } from '../theme'
 import type { ThemeDoc } from './types'
 import { DEFAULT_COLORS, THEME_DEFAULTS } from './types'
-import { styleComponents, styleTokens, mergeUi, isCustomShadow, BORDER_WIDTH_DEFAULT } from './styles'
+import { styleComponents, styleTokens, mergeUi, BORDER_WIDTH_DEFAULT } from './styles'
 import { LIBRARY_TOKEN_DEFAULTS } from './resolve'
 
-/**
- * Generate the minimal `main.css`. The document only holds overrides, so
- * everything present is emitted and nothing else.
- */
+/** Generate the minimal `main.css` — the doc only holds overrides, so everything present is emitted. */
 export function generateCSS(doc: ThemeDoc): string {
   const lines = [
     '@import "tailwindcss";',
@@ -18,9 +15,8 @@ export function generateCSS(doc: ThemeDoc): string {
   if (doc.font?.sans && doc.font.sans !== THEME_DEFAULTS.font) {
     themeLines.push(`  --font-sans: '${doc.font.sans}', sans-serif;`)
   }
-  // Weight steps are live variables in tailwind v4 — font-medium compiles
-  // to font-weight: var(--font-weight-medium) — so remapping them reaches
-  // every component, not just inherited text.
+  // Weight steps are live variables in tailwind v4, so remapping them
+  // reaches every component, not just inherited text.
   for (const step of ['normal', 'medium', 'semibold', 'bold'] as const) {
     const weight = doc.font?.weights?.[step]
     if (weight !== undefined) {
@@ -30,10 +26,9 @@ export function generateCSS(doc: ThemeDoc): string {
   if (doc.spacing !== undefined && doc.spacing !== THEME_DEFAULTS.spacing) {
     themeLines.push(`  --spacing: ${doc.spacing}rem;`)
   }
-  // Border width exports as tailwind's default-width theme variables — the
-  // consumer's compile scales every bare border/divide/ring utility, far
-  // beyond what per-component classes could enumerate. (The live preview
-  // can't use this: the variables resolve at compile time.)
+  // Width rides tailwind's default-width theme variables: the consumer's
+  // compile scales every bare border/divide/ring utility. (The live preview
+  // can't use this — the variables resolve at compile time.)
   const borderWidth = doc.style?.border === 'none'
     ? 0
     : doc.style?.border && doc.style.border !== 'default' ? doc.style.borderWidth ?? BORDER_WIDTH_DEFAULT : undefined
@@ -43,15 +38,10 @@ export function generateCSS(doc: ThemeDoc): string {
     themeLines.push(`  --default-border-width: ${borderWidth}px;`)
     themeLines.push(`  --default-ring-width: ${borderWidth}px;`)
   }
-  // Redefine the whole shadow ramp as @theme tokens so the consumer's compile
-  // rewrites every bare shadow-* utility — the same reach the docs get from
-  // gating --shadow-* in main.css, but unconditional here since an export is
-  // one fixed theme (no Inherit/Custom toggle to switch between). Custom scales
-  // the single config per size (mirrors main.css's .shadow-custom block); None
-  // flattens content the way the component fragments already flatten widgets;
-  // Inherit emits nothing and leaves Tailwind's native shadows untouched.
-  // The per-size geometry scale below must stay in step with main.css. Alpha is
-  // uniform (the opacity slider read literally), so size shows through geometry.
+  // Redefine the shadow ramp as @theme tokens so the consumer's compile
+  // rewrites every bare shadow-* utility — unconditional here, since an
+  // export is one fixed theme (no Inherit/Custom toggle). The per-size
+  // geometry scale must stay in step with main.css; alpha is uniform.
   const SHADOW_RAMP = [
     { size: '2xs', s: 0.15 },
     { size: 'xs', s: 0.25 },
@@ -61,7 +51,7 @@ export function generateCSS(doc: ThemeDoc): string {
     { size: 'xl', s: 1.5 },
     { size: '2xl', s: 2.2 }
   ]
-  if (isCustomShadow(doc.style?.shadow)) {
+  if (doc.style?.shadow === 'custom') {
     for (const { size, s } of SHADOW_RAMP) {
       themeLines.push(`  --shadow-${size}: calc(var(--ui-shadow-offset-x) * ${s}) calc(var(--ui-shadow-offset-y) * ${s}) calc(var(--ui-shadow-blur) * ${s}) calc(var(--ui-shadow-spread) * ${s}) color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 25%), transparent);`)
     }
@@ -87,8 +77,8 @@ export function generateCSS(doc: ThemeDoc): string {
     lines.push('', 'html {', `  font-size: ${doc.fontSize}px;`, '}')
   }
 
-  // Body-level treatment: classless text has no utility to dereference the
-  // weight variable, and case/tracking/leading are inherited properties.
+  // Classless text has no utility to dereference the weight variable, and
+  // case/tracking/leading are inherited properties.
   const bodyLines: string[] = []
   if (doc.font?.weights?.normal !== undefined) bodyLines.push(`  font-weight: ${doc.font.weights.normal};`)
   if (doc.font?.uppercase) bodyLines.push('  text-transform: uppercase;')
@@ -125,9 +115,8 @@ export function generateCSS(doc: ThemeDoc): string {
     lines.push('', ':root {', ...rootLines, '}')
   }
 
-  // Color variables behind the style treatment. Hard shadows always need
-  // --ui-shadow-color defined; explicit color choices override per mode.
-  // Studio-only variables (hand-rolled preview markup) never export.
+  // Color variables behind the style treatment. Studio-only variables
+  // (hand-rolled preview markup) never export.
   const style = styleTokens(doc.style || {})
   for (const mode of ['light', 'dark'] as const) {
     for (const key of Object.keys(style[mode])) {
@@ -135,13 +124,12 @@ export function generateCSS(doc: ThemeDoc): string {
     }
   }
   // Any shadow treatment defaults the shared color when none was chosen.
-  const castsShadow = (value?: string) => !!value && value !== 'none' && value !== 'flat'
-  const anyShadow = castsShadow(doc.style?.shadow) || castsShadow(doc.style?.innerShadow)
+  const anyShadow = doc.style?.shadow === 'custom' || doc.style?.innerShadow === 'custom'
   if (anyShadow && !style.light['--ui-shadow-color']) {
     style.light['--ui-shadow-color'] = 'var(--ui-color-neutral-950)'
     style.dark['--ui-shadow-color'] = 'black'
   }
-  if (isCustomShadow(doc.style?.shadow)) {
+  if (doc.style?.shadow === 'custom') {
     // The custom-shadow classes reference the geometry variables — a
     // standalone export must define them even at default values.
     if (!style.light['--ui-shadow-offset-x']) {
@@ -150,28 +138,24 @@ export function generateCSS(doc: ThemeDoc): string {
       style.light['--ui-shadow-blur'] = '0px'
       style.light['--ui-shadow-spread'] = '0px'
     }
-    // The button press-effect's shadow-(--ui-shadow-hard*) utilities read these.
-    style.light['--ui-shadow-hard'] = 'var(--ui-shadow-offset-x) var(--ui-shadow-offset-y) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard)'
-    style.light['--ui-shadow-hard-half'] = 'calc(var(--ui-shadow-offset-x) / 2) calc(var(--ui-shadow-offset-y) / 2) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-final-hard)'
-    style.light['--ui-shadow-final-hard'] = 'color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 100%), transparent)'
+    // The button press-effect's shadow-(--ui-shadow-press*) utilities read these.
+    style.light['--ui-shadow-press'] = 'var(--ui-shadow-offset-x) var(--ui-shadow-offset-y) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-press-color)'
+    style.light['--ui-shadow-press-half'] = 'calc(var(--ui-shadow-offset-x) / 2) calc(var(--ui-shadow-offset-y) / 2) var(--ui-shadow-blur) var(--ui-shadow-spread) var(--ui-shadow-press-color)'
+    style.light['--ui-shadow-press-color'] = 'color-mix(in oklab, var(--ui-shadow-color) var(--ui-shadow-opacity, 100%), transparent)'
   }
-  if (doc.style?.innerShadow && doc.style.innerShadow !== 'none') {
-    if (isCustomShadow(doc.style.innerShadow)) {
-      if (!style.light['--ui-inner-shadow-offset-x']) {
-        style.light['--ui-inner-shadow-offset-x'] = '0px'
-        style.light['--ui-inner-shadow-offset-y'] = '2px'
-        style.light['--ui-inner-shadow-blur'] = '4px'
-        style.light['--ui-inner-shadow-spread'] = '0px'
-      }
-      style.light['--ui-inner-shadow'] = 'var(--ui-inner-shadow-offset-x) var(--ui-inner-shadow-offset-y) var(--ui-inner-shadow-blur) var(--ui-inner-shadow-spread) var(--ui-shadow-final-inner)'
+  if (doc.style?.innerShadow === 'custom') {
+    if (!style.light['--ui-inner-shadow-offset-x']) {
+      style.light['--ui-inner-shadow-offset-x'] = '0px'
+      style.light['--ui-inner-shadow-offset-y'] = '2px'
+      style.light['--ui-inner-shadow-blur'] = '4px'
+      style.light['--ui-inner-shadow-spread'] = '0px'
     }
-    style.light['--ui-shadow-final-inner'] = 'color-mix(in oklab, var(--ui-inner-shadow-color, var(--ui-shadow-color)) var(--ui-inner-shadow-opacity, 15%), transparent)'
+    style.light['--ui-inner-shadow'] = 'var(--ui-inner-shadow-offset-x) var(--ui-inner-shadow-offset-y) var(--ui-inner-shadow-blur) var(--ui-inner-shadow-spread) var(--ui-inner-shadow-mix)'
+    style.light['--ui-inner-shadow-mix'] = 'color-mix(in oklab, var(--ui-inner-shadow-color, var(--ui-shadow-color)) var(--ui-inner-shadow-opacity, 15%), transparent)'
   }
 
-  // One block per mode: the style expansion and the doc's explicit token
-  // overrides merge, explicit values last so they win — a doc whose tokens
-  // duplicate the style expansion (older exports round-tripped through
-  // import) collapses instead of printing every variable twice.
+  // Style expansion and explicit token overrides merge, explicit last so a
+  // round-tripped doc collapses instead of printing every variable twice.
   const light = { ...style.light, ...doc.tokens?.light }
 
   const dark: Record<string, string> = {
@@ -179,10 +163,9 @@ export function generateCSS(doc: ThemeDoc): string {
     ...(doc.blackAsPrimary ? { '--ui-primary': 'white' } : {}),
     ...doc.tokens?.dark
   }
-  // The `:root, .light` block matches `<html class="dark">` too (`:root` is
-  // unconditional) and lands after the library's `.dark` block, so a token
-  // overridden for light only would win the source-order tie in dark mode.
-  // Restate the library's dark value so the `.dark` block below wins it back.
+  // `:root, .light` matches `<html class="dark">` too and lands after the
+  // library's `.dark` block, so a light-only override would win in dark mode.
+  // Restate the library's dark value so the `.dark` block wins it back.
   for (const [key, value] of Object.entries(light)) {
     if (key in dark) continue
     const fallback = (LIBRARY_TOKEN_DEFAULTS.dark as Record<string, string>)[key]
@@ -203,18 +186,12 @@ export function generateCSS(doc: ThemeDoc): string {
 }
 
 /**
- * Serialize a plain object to JS/TS object-literal source: unquote only keys
- * that are valid identifiers (so dashed keys like `ui-radius` stay quoted and
- * valid), and prefer single-quoted strings — but keep double quotes on any
- * string containing an apostrophe, so a value like `Cooper's` isn't corrupted.
+ * Serialize to JS object-literal source: unquote only identifier-safe keys,
+ * prefer single-quoted strings, keep double quotes around apostrophes.
  */
 function toObjectSource(value: Record<string, any>): string {
   return JSON.stringify(value, null, 2)
-    // Only identifier-safe keys may drop their quotes.
     .replace(/"([a-z_$][\w$]*)":/gi, '$1:')
-    // Convert the remaining double-quoted strings (values, dashed keys) to
-    // single quotes, but leave any that contain a single quote untouched —
-    // double quotes are valid JS and don't need escaping there.
     .replace(/"((?:[^"\\]|\\.)*)"/g, (match, body: string) =>
       body.includes('\'') ? match : `'${body}'`)
 }
@@ -234,9 +211,7 @@ export function generateConfig(doc: ThemeDoc, framework: string = 'nuxt'): strin
   }
 
   // Explicit components merge INTO the style expansion (classes concatenate,
-  // explicit last so it wins) — a spread would drop one side wholesale.
-  // Width rides the @theme default-width variables in the exported CSS, so
-  // the config only carries frame/color/shadow classes.
+  // explicit last) — a spread would drop one side wholesale.
   const componentOverrides = mergeUi(doc.style ? styleComponents(doc.style) : undefined, doc.components)
   if (Object.keys(componentOverrides).length) {
     config.ui = config.ui || {}
@@ -267,9 +242,8 @@ export function generateConfig(doc: ThemeDoc, framework: string = 'nuxt'): strin
 }
 
 /**
- * Translate a document into the shape `useTheme().applyThemeSettings()`
- * accepts — the sanitized write path shared with the AI theme feature, which
- * also persists everything to the localStorage keys the FOUC scripts restore.
+ * Translate a document into the shape `applyThemeSettings()` accepts — the
+ * sanitized write path shared with the AI theme feature.
  */
 export function docToSettings(doc: ThemeDoc): Record<string, any> {
   const settings: Record<string, any> = {}
@@ -307,9 +281,8 @@ export function docToSettings(doc: ThemeDoc): Record<string, any> {
     }
   }
 
-  // Only the doc's explicit components ride the settings channel — the
-  // style expansion is applied through the dedicated style-ui channel by
-  // the caller (applyDoc), so a later style tweak can't destroy them.
+  // Only explicit components ride the settings channel — the style expansion
+  // goes through the dedicated style-ui channel (applyDoc).
   if (doc.components && Object.keys(doc.components).length) {
     settings.ui = doc.components
   }
diff --git a/docs/app/utils/theme-engine/import.ts b/docs/app/utils/theme-engine/import.ts
index 6abc26547b..90b175eaba 100644
--- a/docs/app/utils/theme-engine/import.ts
+++ b/docs/app/utils/theme-engine/import.ts
@@ -3,8 +3,7 @@ import { SHADES_ALL, DEFAULT_COLORS } from './types'
 import type { StyleOptions, DefaultVariant, DefaultSize, DefaultColor, VariantGroup } from './styles'
 import {
   styleComponents,
-  isCustomShadow,
-  FRAME_COLOR_VALUES,
+  BORDER_COLOR_VALUES,
   SHADOW_COLOR_VALUES,
   SHADOW_GEOMETRY_DEFAULTS,
   INNER_SHADOW_GEOMETRY_DEFAULTS,
@@ -18,10 +17,9 @@ import { parseUiColorRef, LIBRARY_TOKEN_DEFAULTS } from './resolve'
 import { themeIcons } from '../theme'
 
 /**
- * The inverse of generateCSS/generateConfig: parse an exported (or
- * export-shaped) theme back into a ThemeDoc, so pasting a theme is as
- * first-class as copying one out. Anything outside the export grammar is
- * collected in `skipped` and surfaced — never silently dropped.
+ * The inverse of generateCSS/generateConfig: parse an exported theme back
+ * into a ThemeDoc. Anything outside the export grammar is collected in
+ * `skipped` and surfaced — never silently dropped.
  */
 export interface ThemeImportResult {
   doc: ThemeDoc
@@ -53,10 +51,8 @@ function parseCSS(css: string): ParsedCSS {
   const result: ParsedCSS = { palettes: {}, light: {}, dark: {}, skipped: [] }
   let clean = css.replace(/\/\*[\s\S]*?\*\//g, '')
 
-  // The flat block scanner below can't see nesting, so a conditional
-  // at-rule's inner blocks would import as GLOBAL tokens (a dark-scheme
-  // @media pasted from someone's main.css silently overriding light).
-  // Lift each whole nested at-rule out into `skipped` instead.
+  // The flat block scanner can't see nesting — a nested at-rule's inner
+  // blocks would import as GLOBAL tokens. Lift each whole one into `skipped`.
   clean = clean.replace(/@(?:media|supports|container|layer|scope)[^{}]*\{(?:[^{}]*\{[^{}]*\})*[^{}]*\}/g, (block) => {
     result.skipped.push(block.trim().replace(/\s+/g, ' '))
     return ''
@@ -78,8 +74,7 @@ function parseCSS(css: string): ParsedCSS {
   while ((match = blockRe.exec(clean))) {
     cursor = match.index + match[0].length
 
-    // Everything before the selector's own line (@import lines, stray text)
-    // is preamble — the selector is what follows the last ';'.
+    // The selector is what follows the last ';'; the rest is preamble.
     const segments = match[1]!.split(';')
     outside(segments.slice(0, -1).join('\n'))
     const selector = segments[segments.length - 1]!.trim().replace(/\s+/g, ' ')
@@ -135,9 +130,7 @@ function parseDeclaration(result: ParsedCSS, selector: string, prop: string, val
       return true
     }
     if (/^--shadow-(?:2xs|xs|sm|md|lg|xl|2xl)$/.test(prop)) {
-      // Derived shadow ramp — regenerated from the shadow style on export
-      // (scaled config, or transparent under None), so it carries no
-      // independent data to import; the treatment is read from the classes.
+      // Derived ramp, regenerated on export — carries no independent data.
       return true
     }
     return false
@@ -226,9 +219,8 @@ function parseDeclaration(result: ParsedCSS, selector: string, prop: string, val
     return false
   }
 
-  // Only custom properties are theme tokens — a plain declaration
-  // (background, font-family) must surface in `skipped`, not ride the token
-  // channel into the re-export.
+  // Only custom properties are theme tokens — a plain declaration must
+  // surface in `skipped`, not ride the token channel into the re-export.
   if (selector === ':root, .light' || selector === '.light') {
     if (!prop.startsWith('--')) return false
     // studio-internal vars never carry theme meaning
@@ -246,10 +238,7 @@ function parseDeclaration(result: ParsedCSS, selector: string, prop: string, val
 
 /* ------------------------------------------------- style reconstruction -- */
 
-/**
- * Reconstruct a color choice (named value, or a per-mode neutral/primary
- * ramp shade) from a pair of emitted per-mode values.
- */
+/** Reconstruct a color choice (named, or a per-mode ramp shade) from emitted per-mode values. */
 function matchColorChoice(value: { light?: string, dark?: string }, table: Record<string, { light: string, dark: string }>): { color: string, shade?: { light: Shade, dark: Shade } } | undefined {
   const named = Object.keys(table).find(key => table[key]!.light === value.light && table[key]!.dark === value.dark)
   if (named) return { color: named }
@@ -262,9 +251,9 @@ function matchColorChoice(value: { light?: string, dark?: string }, table: Recor
 }
 
 /**
- * Pull the style-owned variables out of the per-mode records (consuming
- * them) and work backwards to the StyleOptions that would emit them.
- * What remains in light/dark afterwards is plain token overrides.
+ * Consume the style-owned variables out of the per-mode records and work
+ * backwards to the StyleOptions that would emit them; what remains is plain
+ * token overrides.
  */
 function extractStyle(light: Record<string, string>, dark: Record<string, string>): StyleOptions {
   const style: StyleOptions = {}
@@ -276,8 +265,7 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
     return value
   }
 
-  // A consumed variable the style axis can't express (unknown color value,
-  // single-mode declaration) goes back into the residual maps — it then
+  // What the style axis can't express goes back into the residual maps and
   // survives as a plain token override instead of silently vanishing.
   const putBack = (prop: string, value: { light?: string, dark?: string }) => {
     if (value.light !== undefined) light[prop] = value.light
@@ -291,14 +279,12 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
     blur: take('--ui-shadow-blur'),
     spread: take('--ui-shadow-spread')
   }
-  const finals = { hard: take('--ui-shadow-final-hard'), soft: take('--ui-shadow-final-soft') }
-  // Force-emitted compositions the shadow-(--ui-shadow-hard*) utilities read
-  // — never a choice of their own, so consume them silently.
-  for (const composed of ['--ui-shadow-hard', '--ui-shadow-hard-lg', '--ui-shadow-hard-sm', '--ui-shadow-hard-half']) {
-    take(composed)
-  }
+  const pressColor = take('--ui-shadow-press-color')
+  // force-emitted compositions — never a choice of their own, consume silently
+  take('--ui-shadow-press')
+  take('--ui-shadow-press-half')
   const shadowColor = take('--ui-shadow-color')
-  const frameColor = take('--ui-frame-color')
+  const frameColor = take('--ui-border-color')
 
   if (geometry.x.light !== undefined) {
     style.shadow = 'custom'
@@ -312,7 +298,7 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
     if (JSON.stringify(parsed) !== JSON.stringify(SHADOW_GEOMETRY_DEFAULTS)) {
       style.shadowGeometry = parsed
     }
-  } else if (finals.hard.light !== undefined || finals.soft.light !== undefined) {
+  } else if (pressColor.light !== undefined) {
     style.shadow = 'custom'
   }
 
@@ -327,8 +313,7 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
   if (opacity.light !== undefined && style.shadow) {
     style.shadowOpacity = Number.parseFloat(opacity.light)
   } else {
-    // without a shadow the option would never re-emit (styleTokens gates
-    // opacity on shadow) — as a token it at least round-trips
+    // without a shadow the option would never re-emit; as a token it round-trips
     putBack('--ui-shadow-opacity', opacity)
   }
 
@@ -339,7 +324,7 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
     blur: take('--ui-inner-shadow-blur'),
     spread: take('--ui-inner-shadow-spread')
   }
-  const innerFinal = take('--ui-shadow-final-inner')
+  const innerFinal = take('--ui-inner-shadow-mix')
   const innerColor = take('--ui-inner-shadow-color')
   take('--ui-inner-shadow')
 
@@ -397,12 +382,12 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
   }
 
   if (frameColor.light !== undefined || frameColor.dark !== undefined) {
-    const match = matchColorChoice(frameColor, FRAME_COLOR_VALUES)
+    const match = matchColorChoice(frameColor, BORDER_COLOR_VALUES)
     if (match) {
       style.borderColor = match.color as StyleOptions['borderColor']
       if (match.shade) style.borderShade = match.shade
     } else {
-      putBack('--ui-frame-color', frameColor)
+      putBack('--ui-border-color', frameColor)
     }
   }
 
@@ -412,9 +397,8 @@ function extractStyle(light: Record<string, string>, dark: Record<string, string
 /* ------------------------------------------------------------- config -- */
 
 /**
- * Parser for the restricted object-literal grammar generateConfig emits
- * (unquoted keys, single-quoted strings, numbers, booleans, arrays) — a
- * tokenizer, not eval, so pasted content can't execute anything.
+ * Parser for the restricted object-literal grammar generateConfig emits —
+ * a tokenizer, not eval, so pasted content can't execute anything.
  */
 function parseObjectLiteral(source: string, start: number): { value: any, end: number } {
   let i = start
@@ -444,10 +428,8 @@ function parseObjectLiteral(source: string, start: number): { value: any, end: n
         ws()
         if (source[i] !== ':') throw new Error(`Expected ':' at ${i}`)
         i++
-        // Define rather than assign: a pasted key named `__proto__`,
-        // `constructor`, or `prototype` must land as an own data property,
-        // not walk the setter and mutate the prototype (same intent as the
-        // apply-path guards elsewhere).
+        // Define, not assign: a pasted `__proto__`/`constructor` key must
+        // land as an own property, not walk the setter.
         Object.defineProperty(obj, key, {
           value: parseValue(),
           writable: true,
@@ -491,8 +473,7 @@ function parseObjectLiteral(source: string, start: number): { value: any, end: n
     while (i < source.length && source[i] !== quote) {
       if (source[i] === '\\') {
         i++
-        // A backslash at EOF has nothing to escape — stop before appending
-        // the out-of-range `source[i]` (which stringifies to "undefined").
+        // backslash at EOF — don't append out-of-range source[i] ("undefined")
         if (i >= source.length) break
       }
       out += source[i]
@@ -577,7 +558,6 @@ function extractDefaults(components: Record<string, any>): StyleOptions['default
   return Object.keys(defaults).length ? defaults : undefined
 }
 
-/** Border treatment lives only in the class bundles — read it back from them. */
 /** A compound entry's classes, whether written as a string or a slot map. */
 const classOf = (entry: Record<string, unknown>) => typeof entry.class === 'string' ? entry.class : Object.values(entry.class || {}).join(' ')
 
@@ -589,10 +569,8 @@ function detectBorder(components: Record<string, any>): Pick<StyleOptions, 'bord
 
   const widths = texts.flatMap(text => [...text.matchAll(/(?:^|\s)(?:sm:)?ring-(\d)(?:\s|$)/g)].map(match => Number(match[1])))
   if (!widths.length) return {}
-  // A mixed-width paste (ring-1 here, ring-3 there) has no single correct
-  // answer, and picking the first by object-iteration order makes the result
-  // arbitrary. Pick the most common width — the dominant treatment — and
-  // break ties toward the larger width, so the choice is deterministic.
+  // A mixed-width paste has no single right answer — take the most common
+  // width, ties toward the larger, so the choice is deterministic.
   const counts = new Map<number, number>()
   for (const value of widths) counts.set(value, (counts.get(value) ?? 0) + 1)
   const width = [...counts.entries()].sort((a, b) => b[1] - a[1] || b[0] - a[0])[0]![0]
@@ -617,8 +595,7 @@ function detectFrame(components: Record<string, any>): boolean {
 /** Shadow fallback when only a config was pasted (CSS normally decides). */
 function detectShadow(components: Record<string, any>): StyleOptions['shadow'] {
   const slots = Object.values(components).flatMap(component => Object.values(component?.slots || {})) as string[]
-  if (slots.some(classes => classes.includes('--ui-shadow-hard') || classes.includes('var(--ui-shadow-offset-x)'))) return 'custom'
-  if (slots.some(classes => classes.includes('--ui-shadow-final-soft'))) return 'custom'
+  if (slots.some(classes => classes.includes('--ui-shadow-press') || classes.includes('var(--ui-shadow-offset-x)'))) return 'custom'
   // the flat treatment is bare shadow-none on the overlay surfaces
   if (components.popover?.slots?.content?.includes('shadow-none') && components.toast?.slots?.root?.includes('shadow-none')) return 'flat'
   return undefined
@@ -628,22 +605,19 @@ function detectShadow(components: Record<string, any>): StyleOptions['shadow'] {
 function detectInnerShadow(components: Record<string, any>): StyleOptions['innerShadow'] {
   const slots = Object.values(components).flatMap(component => Object.values(component?.slots || {})) as string[]
   if (slots.some(classes => classes.includes('(--ui-inner-shadow)'))) return 'custom'
-  if (slots.some(classes => classes.includes('--ui-shadow-final-inner'))) return 'custom'
+  if (slots.some(classes => classes.includes('--ui-inner-shadow-mix'))) return 'custom'
   return undefined
 }
 
 /**
- * Old exports carried border widths as class fragments (ring-2, border-b-3,
- * divide-y-2 …). Widths now live on the style axis, so those tokens are
- * noise: drop them, and renormalize old frame literals (ring-N ring-inset …)
- * to the default-width form so subtraction still recognizes them.
+ * Old exports carried border widths as class fragments (ring-2, divide-y-2
+ * …); widths now live on the style axis. Drop them, and renormalize old
+ * frame literals to the default-width form so subtraction recognizes them.
  */
 function normalizeLegacyWidths(components: Record<string, any>) {
-  // Only width-bearing legacy fragments are noise (ring-2, border-b-3,
-  // divide-y-2 …); the width digit is REQUIRED. A bare presence token
-  // (`border`, `ring`, `divide-y`, `lg:not-last:border-e`) is a real class —
-  // the new style axis never regenerates it — so scrubbing it would corrupt a
-  // genuine divider/border rather than just strip a migrated width.
+  // The width digit is REQUIRED: a bare presence token (`border`, `divide-y`)
+  // is a real class the style axis never regenerates — scrubbing it would
+  // corrupt a genuine divider rather than strip a migrated width.
   const WIDTH_TOKEN = /^(?:sm:)?(?:ring|divide-y|border(?:-[tbesxy])?)-[0-4]$|^lg:not-last:border-e-[0-4]$/
   const scrub = (classes: unknown): string | undefined => {
     if (typeof classes !== 'string') return undefined
@@ -690,10 +664,7 @@ function normalizeLegacyWidths(components: Record<string, any>) {
   }
 }
 
-/**
- * Remove the fragments the reconstructed style regenerates, leaving only
- * genuinely explicit component overrides for doc.components.
- */
+/** Remove the fragments the reconstructed style regenerates — only genuinely explicit overrides remain. */
 function subtractStyleExpansion(components: Record<string, any>, style: StyleOptions): Record<string, any> {
   const expected = styleComponents(style)
   const remaining: Record<string, any> = {}
@@ -782,9 +753,8 @@ export function importTheme(input: { css?: string, config?: string }): ThemeImpo
       style.border = border.border
       if (border.borderWidth !== undefined) style.borderWidth = border.borderWidth
       if (border.frame) style.frame = true
-      // Only pastes that actually carry legacy ring-N width tokens get
-      // scrubbed — running unconditionally would eat genuine user classes
-      // (border-2, divide-y) out of config-only pastes.
+      // Scrub only pastes that carry legacy ring-N tokens — unconditionally
+      // it would eat genuine user classes out of config-only pastes.
       normalizeLegacyWidths(components)
     }
   }
@@ -793,9 +763,9 @@ export function importTheme(input: { css?: string, config?: string }): ThemeImpo
 
   // Press-off exports keep the button's resting shadow but drop the
   // hover/active choreography — detect it so the expansion subtracts cleanly.
-  if (isCustomShadow(style.shadow)) {
+  if (style.shadow === 'custom') {
     const base = String(components.button?.slots?.base ?? '')
-    if (base.includes('--ui-shadow-hard') && !base.includes('hover:translate')) style.shadowPress = false
+    if (base.includes('--ui-shadow-press') && !base.includes('hover:translate')) style.shadowPress = false
   }
 
   const explicit = subtractStyleExpansion(components, style)
@@ -830,10 +800,9 @@ export function importTheme(input: { css?: string, config?: string }): ThemeImpo
       // its .dark counterpart is generated, not a token choice
       if (css.dark['--ui-primary'] === 'white') delete css.dark['--ui-primary']
     }
-    // The export restates the library's dark default under `.dark` for any
-    // token overridden in light only (the `:root, .light` block would win
-    // the source-order tie in dark mode otherwise). Generated, not a choice
-    // — drop it so the round-trip doesn't grow explicit tokens.
+    // The export restates the library's dark default for light-only
+    // overrides (source-order tie) — generated, not a choice; drop it so the
+    // round-trip doesn't grow explicit tokens.
     for (const [key, value] of Object.entries(css.dark)) {
       if (key in css.light && value === (LIBRARY_TOKEN_DEFAULTS.dark as Record<string, string>)[key]) {
         Reflect.deleteProperty(css.dark, key)
diff --git a/docs/app/utils/theme-engine/oklch.ts b/docs/app/utils/theme-engine/oklch.ts
index 71d2e409a2..147d010073 100644
--- a/docs/app/utils/theme-engine/oklch.ts
+++ b/docs/app/utils/theme-engine/oklch.ts
@@ -1,9 +1,7 @@
 /**
- * Minimal sRGB ↔ OKLCH conversion (Björn Ottosson's OKLab), kept
- * dependency-free so the engine stays portable. Only what the palette
- * generator needs: parse any CSS color the studio meets, move through
- * OKLCH space, come back out as a gamut-safe `oklch(…)` string —
- * tailwind v4's native color format.
+ * Minimal sRGB ↔ OKLCH conversion (Björn Ottosson's OKLab), dependency-free
+ * so the engine stays portable: parse any CSS color the studio meets, move
+ * through OKLCH, come back out as a gamut-safe `oklch(…)` string.
  */
 
 export interface Oklch {
@@ -116,23 +114,18 @@ export function hexToOklch(hex: string): Oklch {
 }
 
 /**
- * Serialize to an `oklch(…)` string in tailwind v4's shape:
- * `oklch(62.3% 0.214 259.815)`. Pure formatting — no gamut clamp, so
- * wider-than-sRGB values (tailwind's own ramps have them) survive a
- * round-trip. Achromatic hue is atan2 noise — zero it.
+ * Serialize to tailwind v4's `oklch(62.3% 0.214 259.815)` shape. No gamut
+ * clamp, so wider-than-sRGB values (tailwind's own ramps have them) survive
+ * a round-trip. Achromatic hue is atan2 noise — zero it.
  */
 export function formatOklch(color: Oklch): string {
   const c = +color.c.toFixed(3)
   return `oklch(${+(color.l * 100).toFixed(1)}% ${c} ${c === 0 ? 0 : +color.h.toFixed(3)})`
 }
 
-/**
- * Parse a CSS color into OKLCH. Handles the forms the studio actually
- * meets: hex, `oklch(…)` (tailwind v4's format) and `rgb(…)`.
- */
+/** Parse a CSS color into OKLCH — the forms the studio meets: hex, `oklch(…)`, `rgb(…)`. */
 export function parseColor(value: string): Oklch | undefined {
-  // Ramp lookups can pass undefined (missing midpoint, unset var) — treat any
-  // non-string as unparseable rather than throwing on .trim().
+  // Ramp lookups can pass undefined — unparseable, not a .trim() throw.
   if (typeof value !== 'string') return undefined
   const input = value.trim()
 
@@ -140,8 +133,7 @@ export function parseColor(value: string): Oklch | undefined {
   if (input === 'white') return { l: 1, c: 0, h: 0 }
   if (input === 'black') return { l: 0, c: 0, h: 0 }
 
-  // Only 3/6-digit hex converts cleanly — a truncated or alpha hex would
-  // feed NaN channels into the curve fitter, which returns undefined ramps.
+  // Only 3/6-digit hex — truncated/alpha hex would feed NaN into the fitter.
   if (/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(input)) {
     return rgbToOklch(hexToRgb(input))
   }
@@ -169,10 +161,9 @@ export function parseCssColor(value: string): string | undefined {
 }
 
 /**
- * Composite `color` at `alpha` over `backdrop` — what the browser actually
- * paints for `bg-primary/10`. Blending happens in gamma-encoded sRGB, not
- * linear, so the result matches the rendered pixel. Returns a hex string, or
- * undefined when either input is unparseable.
+ * Composite `color` at `alpha` over `backdrop` — what the browser paints for
+ * `bg-primary/10`. Blends in gamma-encoded sRGB (not linear) to match the
+ * rendered pixel. Undefined when either input is unparseable.
  */
 export function blendColors(color: string, backdrop: string, alpha: number): string | undefined {
   const fg = parseColor(color)
@@ -191,9 +182,8 @@ function luminance(color: Oklch): number {
 }
 
 /**
- * WCAG 2.x contrast ratio between two CSS colors (hex or oklch), 1–21.
- * Returns `null` when either input is unparseable, so callers can signal an
- * unknown/unmeasurable result rather than a fabricated ratio.
+ * WCAG 2.x contrast ratio between two CSS colors, 1–21. `null` when either
+ * input is unparseable — unknown, not a fabricated ratio.
  */
 export function contrastRatio(colorA: string, colorB: string): number | null {
   const a = parseColor(colorA)
diff --git a/docs/app/utils/theme-engine/palette.ts b/docs/app/utils/theme-engine/palette.ts
index 296e16fb89..4f3264b136 100644
--- a/docs/app/utils/theme-engine/palette.ts
+++ b/docs/app/utils/theme-engine/palette.ts
@@ -4,12 +4,9 @@ import { clampToGamut, formatOklch, parseColor } from './oklch'
 import type { Oklch } from './oklch'
 
 /**
- * A palette is three transition curves — lightness, chroma and hue — sampled
- * across the 11 shade stops (x: 0 = shade 50 … 1 = shade 950). Each channel
- * is a cubic bezier in the devtools-easing sense: endpoints pinned to the
- * left/right edges with adjustable y, plus two free control handles.
- * All y values are in channel units (L 0–1, C 0–0.4, H degrees); handles may
- * overshoot the endpoints.
+ * One channel of a palette (L, C or H) as a devtools-style cubic bezier
+ * sampled across the shade stops (x: 0 = shade 50 … 1 = shade 950).
+ * y values are in channel units; handles may overshoot the endpoints.
  */
 export interface ChannelCurve {
   /** Channel value at shade 50 */
@@ -28,21 +25,14 @@ export interface PaletteCurveParams {
   hue: ChannelCurve
 }
 
-/**
- * Fallback curves fitted to tailwind v4's color ramps. In practice params
- * come from `fitPalette()` over a real palette, so these only seed empty
- * states.
- */
+/** Fitted to tailwind v4's ramps — only seeds empty states; real params come from fitPalette(). */
 export const CURVE_DEFAULTS: PaletteCurveParams = {
   lightness: { y0: 0.977, y1: 0.27, p1x: 0.1, p1y: 1.012, p2x: 0.925, p2y: 0.376 },
   chroma: { y0: 0.016, y1: 0.08, p1x: 0.4, p1y: 0.3, p2x: 0.6, p2y: 0.25 },
   hue: { y0: 250, y1: 250, p1x: 0.33, p1y: 250, p2x: 0.66, p2y: 250 }
 }
 
-/**
- * Neutral ramps want a much deeper dark end than color ramps: tailwind's
- * grays run to L 0.13 so dark-mode backgrounds stay genuinely dark.
- */
+/** Neutrals run to L 0.13 like tailwind's grays, so dark-mode backgrounds stay genuinely dark. */
 export const NEUTRAL_CURVE_DEFAULTS: PaletteCurveParams = {
   lightness: { ...CURVE_DEFAULTS.lightness, y1: 0.13 },
   chroma: { y0: 0.005, y1: 0.01, p1x: 0.4, p1y: 0.01, p2x: 0.6, p2y: 0.01 },
@@ -50,11 +40,8 @@ export const NEUTRAL_CURVE_DEFAULTS: PaletteCurveParams = {
 }
 
 /**
- * The editor's modifier lens: independent effects layered on top of base
- * curves — lightness shift, contrast about the ramp's own midpoint,
- * saturation (multiplicative with an additive floor, so gray ramps respond
- * too) and hue rotation, all scaled by an overall amount. Pure: always
- * derives fresh curves from the base, never compounding.
+ * The editor's modifier lens over base curves, scaled by an overall amount.
+ * Pure: always derived fresh from the base, never compounding.
  */
 export interface PaletteEffects {
   lightness: number
@@ -66,9 +53,8 @@ export interface PaletteEffects {
 export const PALETTE_EFFECT_DEFAULTS: PaletteEffects = { lightness: 0, contrast: 0, saturation: 0, hueShift: 0 }
 
 /**
- * A stop locked to an exact OKLCH the curves must pass through — "pin this
- * brand colour, edit around it". Stored as the absolute target; the ramp is
- * bent to hit it (see `pinField`), so it survives curve drags and modifiers.
+ * A stop locked to an exact OKLCH — "pin this brand colour, edit around it".
+ * Stored absolute so it survives curve drags and modifiers (see pinField).
  */
 export interface PalettePin {
   shade: Shade
@@ -77,11 +63,7 @@ export interface PalettePin {
   h: number
 }
 
-/**
- * A persisted palette: the base curves plus the modifier lens over them.
- * `fineStops` predates the density model — it's read (never written) so
- * palettes saved before it keep their 19 stops.
- */
+/** A persisted palette. `fineStops` predates the density model — read, never written. */
 export type StoredPaletteParams = PaletteCurveParams & { effects?: PaletteEffects, amount?: number, stopStep?: ShadeStep, fineStops?: boolean, pins?: PalettePin[] }
 
 /** The density a persisted palette generates at. */
@@ -90,10 +72,8 @@ export function storedStopStep(stored?: { stopStep?: ShadeStep, fineStops?: bool
 }
 
 /**
- * The density a ramp was generated at, read back from the stops it carries:
- * the coarsest set that covers every stop present. A ramp mixing stops no
- * single density emits (a hand-edited import) falls to the finest set, which
- * covers the most of it.
+ * Density read back from a ramp's stops: the coarsest set covering all of
+ * them; a hand-edited mix no density emits falls to the finest.
  */
 export function detectStopStep(shades: Partial<Record<Shade, string>>): ShadeStep {
   const present = Object.keys(shades).map(Number) as Shade[]
@@ -105,10 +85,9 @@ export function nearestShade(value: number, stops: readonly Shade[]): Shade {
   return stops.reduce((best, stop) => Math.abs(stop - value) < Math.abs(best - value) ? stop : best)
 }
 
-// Width (ramp x) of each pin's influence. MAX is the widest, smoothest kernel
-// (single/well-separated pins); but wider than the gap between two pins the
-// exact-interpolation solve goes ill-conditioned and overshoots (clustered pins
-// blow neighbours to white), so it's narrowed to the closest spacing, floored.
+// Pin influence width (ramp x). Wider than the closest pin spacing the solve
+// goes ill-conditioned (clustered pins blow neighbours to white), so sigma
+// narrows to that spacing, floored.
 const PIN_KERNEL_SIGMA_MAX = 0.2
 const PIN_KERNEL_SIGMA_MIN = 0.04
 
@@ -118,9 +97,8 @@ function pinKernel(distance: number, sigma: number): number {
 }
 
 /**
- * Solve `A·x = b` for a small dense symmetric system (Gauss–Jordan with
- * partial pivoting). Pins are ≤19, so this is trivially fast; a near-singular
- * pivot (coincident stops) collapses that weight to 0 rather than exploding.
+ * Gauss–Jordan with partial pivoting (≤19 pins, trivially fast). A
+ * near-singular pivot collapses that weight to 0 rather than exploding.
  */
 function solveLinear(a: number[][], b: number[]): number[] {
   const n = b.length
@@ -143,11 +121,8 @@ function solveLinear(a: number[][], b: number[]): number[] {
 }
 
 /**
- * Build the additive correction field that locks the pins. Each channel's
- * correction is a radial-basis interpolation of the pin deltas (target minus
- * the base curve at the pin), so at a pinned x it equals the delta exactly —
- * `base + correction` renders the target — and decays smoothly elsewhere.
- * Hue deltas take the short way round the circle.
+ * Additive correction field locking the pins: radial-basis interpolation of
+ * the pin deltas — exact at a pinned x, decaying smoothly elsewhere.
  */
 function pinField(pins: PalettePin[], base: (x: number) => { l: number, c: number, h: number }) {
   const xs = pins.map(pin => shadeX(pin.shade))
@@ -163,10 +138,8 @@ function pinField(pins: PalettePin[], base: (x: number) => { l: number, c: numbe
 
   const matrix = xs.map(xi => xs.map(xj => pinKernel(Math.abs(xi - xj), sigma)))
 
-  // Hue is cyclic: unwrapping each target to the base's nearest arc sends pins
-  // near the antipode the long way round. Chain-unwrap in x order instead (each
-  // within ±180° of the previous, anchored to the base at the first pin) so a
-  // run of pins takes the short way between themselves.
+  // Hue is cyclic: chain-unwrap targets in x order (each within ±180° of the
+  // previous, anchored to the base) so runs of pins take the short arc.
   const order = xs.map((_, i) => i).sort((i, j) => xs[i]! - xs[j]!)
   const hueTarget: number[] = Array.from({ length: pins.length })
   let prevHue = base(xs[order[0]!]!).h
@@ -215,15 +188,13 @@ export function applyPaletteEffects(base: PaletteCurveParams, effects?: PaletteE
   const target = structuredClone(base)
   if (isDefaultEffects(effects, amount)) return target
 
-  // The strength scales every effect's distance from its default: 100% as
-  // set, lower blends back toward the base, higher extrapolates past.
+  // 100% applies as set; lower blends toward the base, higher extrapolates.
   const strength = amount / 100
   const effective = (key: keyof PaletteEffects) =>
     PALETTE_EFFECT_DEFAULTS[key] + ((effects?.[key] ?? PALETTE_EFFECT_DEFAULTS[key]) - PALETTE_EFFECT_DEFAULTS[key]) * strength
 
-  // Lightness: contrast expands/compresses about the curve's own midpoint,
-  // then the shift slides the whole ramp. Every point clamps to the
-  // physical [0, 1] window, exactly like a drag stopping at the edge.
+  // Contrast expands about the curve's own midpoint, then the shift slides
+  // the whole ramp; every point clamps to the physical [0, 1] window.
   const lightness = target.lightness
   const mid = (lightness.y0 + lightness.y1) / 2
   const span = 1 + effective('contrast') / 100
@@ -234,9 +205,8 @@ export function applyPaletteEffects(base: PaletteCurveParams, effects?: PaletteE
   lightness.p1y = mapLightness(lightness.p1y)
   lightness.p2y = mapLightness(lightness.p2y)
 
-  // Saturation: scale for colorful ramps, plus a small additive floor when
-  // boosting so near-gray ramps (where a multiply is a no-op) respond too.
-  // Clamped to the editor's chroma window (sRGB tops out around 0.37).
+  // Multiplicative, plus a small additive floor when boosting so near-gray
+  // ramps (where a multiply is a no-op) respond too.
   const saturation = effective('saturation') / 100
   const factor = 1 + saturation
   const floor = Math.max(0, saturation) * 0.02
@@ -247,9 +217,8 @@ export function applyPaletteEffects(base: PaletteCurveParams, effects?: PaletteE
   chroma.p1y = mapChroma(chroma.p1y)
   chroma.p2y = mapChroma(chroma.p2y)
 
-  // Hue shifts the whole curve, then re-centers by full turns so the mean
-  // stays in [0, 360) — a uniform shift keeps the curve continuous, and
-  // hue is cyclic so the colors are identical.
+  // A uniform shift keeps the curve continuous; re-center by full turns so
+  // the mean stays in [0, 360).
   const hueShift = effective('hueShift')
   const hue = target.hue
   hue.y0 += hueShift
@@ -274,8 +243,8 @@ function cubicBezier(t: number, a: number, b: number, c: number, d: number): num
 }
 
 /**
- * Sample a channel curve at ramp position `x` (0–1). Control x values are
- * clamped into [0, 1], keeping x(t) monotonic so the solve is well-defined.
+ * Sample a channel curve at ramp position `x` (0–1). Control x clamps into
+ * [0, 1], keeping x(t) monotonic so the bisection is well-defined.
  */
 export function sampleCurve(x: number, curve: ChannelCurve): number {
   const p1x = Math.min(1, Math.max(0, curve.p1x))
@@ -297,10 +266,9 @@ export function sampleCurve(x: number, curve: ChannelCurve): number {
 }
 
 /**
- * A shade's fixed position along the curve (x: 0 = shade 50 … 1 = shade 950),
- * keyed by VALUE not array index — so the standard 11 stops keep their exact
- * position (and colour) whether or not the fine midpoints are generated, and
- * a midpoint like 150 lands halfway between 100 (0.1) and 200 (0.2).
+ * A shade's position along the curve, keyed by VALUE not array index — so
+ * stops keep their exact colour across densities and midpoints land between
+ * their neighbours.
  */
 export function shadeX(shade: Shade): number {
   if (shade === 50) return 0
@@ -309,10 +277,8 @@ export function shadeX(shade: Shade): number {
 }
 
 /**
- * A reusable sampler for the pin-corrected ramp: solves the pin field once,
- * then returns the raw channel values at any x — hue unwrapped, no gamut clamp
- * — so a curve drawn through them stays continuous and bends through pinned
- * stops (which `generatePalette` then clamps per stop for the actual colours).
+ * Sampler for the pin-corrected ramp: raw channel values at any x — hue
+ * unwrapped, no gamut clamp — so a curve drawn through them stays continuous.
  */
 export function buildRampSampler(params: PaletteCurveParams, pins: PalettePin[] = []): (x: number) => { l: number, c: number, h: number } {
   const base = (x: number) => ({
@@ -337,8 +303,7 @@ export function generatePalette(params: PaletteCurveParams, step: ShadeStep = 10
     c: sampleCurve(x, params.chroma),
     h: sampleCurve(x, params.hue)
   })
-  // The pin correction is added to the raw curve sample (pre-clamp), so a
-  // pinned stop lands on its target exactly whenever that target is in gamut.
+  // Correction applies pre-clamp, so an in-gamut pin target is hit exactly.
   const correct = pins.length ? pinField(pins, base) : undefined
 
   for (const shade of SHADE_SETS[step]) {
@@ -346,13 +311,10 @@ export function generatePalette(params: PaletteCurveParams, step: ShadeStep = 10
     const b = base(x)
     const d = correct ? correct(x) : { dl: 0, dc: 0, dh: 0 }
 
-    // Clamp here, not in the serializer: sculpted curves can demand
-    // impossible chroma, and the swatches/contrast math assume sRGB.
-    // Lightness clamps too — clampToGamut only searches chroma, so an
-    // overshooting curve (handles may exceed the window) would otherwise
-    // emit oklch(112% …) verbatim into exports and contrast math. Hue
-    // wraps into [0, 360): a negative or 4-digit hue would fail the
-    // sanitizer's canonical-oklch check and silently DROP the shade.
+    // Clamp here, not in the serializer: clampToGamut only searches chroma,
+    // so an overshooting curve would emit oklch(112% …) verbatim; and a
+    // negative or 4-digit hue fails the sanitizer's canonical-oklch check
+    // and silently DROPS the shade.
     result[shade] = formatOklch(clampToGamut({
       l: Math.min(1, Math.max(0, b.l + d.dl)),
       c: Math.max(0, b.c + d.dc),
@@ -364,10 +326,9 @@ export function generatePalette(params: PaletteCurveParams, step: ShadeStep = 10
 }
 
 /**
- * Fit a channel curve to sampled points (x ascending, 0 and 1 included).
- * Endpoints are pinned to the first/last values; the two handles are found
- * by coordinate descent — small, deterministic and fast enough to run on
- * every palette selection.
+ * Fit a channel curve to sampled points (x ascending, 0 and 1 included):
+ * endpoints pinned, handles by coordinate descent — deterministic and fast
+ * enough per palette selection.
  */
 export function fitCurve(points: Array<[number, number]>): ChannelCurve {
   // Nothing to fit — a flat zero curve beats a TypeError.
@@ -391,8 +352,7 @@ export function fitCurve(points: Array<[number, number]>): ChannelCurve {
 
   const keys = ['p1x', 'p1y', 'p2x', 'p2y'] as const
 
-  // Coordinate descent with per-parameter line search, from a few handle
-  // placements so a bad basin doesn't trap the fit.
+  // Several starting handle placements so a bad basin doesn't trap the fit.
   let winner: ChannelCurve | undefined
   let winnerError = Infinity
 
@@ -408,7 +368,6 @@ export function fitCurve(points: Array<[number, number]>): ChannelCurve {
         const isX = key === 'p1x' || key === 'p2x'
         const step = isX ? stepX : stepY
         for (const direction of [1, -1]) {
-          // Walk while it keeps improving.
           for (;;) {
             const previous = curve[key]
             const next = previous + direction * step
@@ -443,8 +402,6 @@ export function fitCurve(points: Array<[number, number]>): ChannelCurve {
 /**
  * Work backwards from an existing palette (e.g. a tailwind ramp) to curve
  * params that reproduce it — so editing always starts from the real thing.
- * Hue needs care: it is unwrapped around the color wheel and meaningless on
- * near-gray stops, where it borrows the nearest chromatic neighbor.
  */
 export function fitPalette(shades: Partial<Record<Shade, string>>): PaletteCurveParams {
   const stops: Array<{ x: number, color: Oklch }> = []
@@ -456,8 +413,7 @@ export function fitPalette(shades: Partial<Record<Shade, string>>): PaletteCurve
     }
   }
 
-  // Nothing parseable to fit — fall back to the stock curves rather than
-  // letting fitCurve([]) throw.
+  // Nothing parseable — stock curves beat letting fitCurve([]) throw.
   if (!stops.length) {
     return structuredClone(CURVE_DEFAULTS)
   }
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index 4cd7064395..eae3c2534e 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -49,7 +49,7 @@ export const presets: ThemePreset[] = [{
   icon: 'i-lucide-zap',
   doc: {
     version: 1,
-    // A sculpted warm neutral running lilac-tinted paper into pure carbon.
+    // Sculpted warm neutral: lilac-tinted paper into pure carbon.
     palettes: {
       carbon: {
         shades: {
@@ -75,8 +75,6 @@ export const presets: ThemePreset[] = [{
     radius: 0.5,
     font: { sans: 'Outfit' },
     icons: 'tabler',
-    // Framed everything in near-black ink, straight-down hard shadows, soft
-    // inked inputs, and both modes retuned shade-by-shade toward carbon.
     style: {
       shadow: 'custom',
       shadowGeometry: { x: 0, y: 3, blur: 0, spread: 0 },
@@ -112,8 +110,8 @@ export const presets: ThemePreset[] = [{
   icon: 'i-lucide-citrus',
   doc: {
     version: 1,
-    // A sculpted green-tinted neutral (studio curve editor) whose light end
-    // starts far below white — the whole page sits on foliage.
+    // Green-tinted neutral whose light end starts far below white — the
+    // whole page sits on foliage.
     palettes: {
       grove: {
         shades: {
@@ -146,10 +144,7 @@ export const presets: ThemePreset[] = [{
         '--ui-text-highlighted': 'var(--ui-color-neutral-50)'
       }
     },
-    // Exercises the newest axes together: straight-down hard shadow at 55%
-    // paired with a bottom-lit hard INSET at 50% (drop below, light above —
-    // the pressed-clay look), app-wide subtle variants, and per-mode shades
-    // for the surface stack plus the success/error alias tokens.
+    // Drop shadow below plus a bottom-lit hard INSET above — pressed clay.
     style: {
       shadow: 'custom',
       shadowColor: 'shade',
@@ -182,8 +177,7 @@ export const presets: ThemePreset[] = [{
   icon: 'i-lucide-candy',
   doc: {
     version: 1,
-    // A sculpted pink-mauve neutral (chroma peaks mid-ramp) instead of the
-    // stock mauve.
+    // Sculpted pink-mauve neutral — chroma peaks mid-ramp.
     palettes: {
       'custom-neutral': {
         shades: {
@@ -221,8 +215,6 @@ export const presets: ThemePreset[] = [{
         '--ui-border-inverted': 'var(--ui-color-neutral-50)'
       }
     },
-    // Soft pink-cast shadows (primary 700 light / 950 dark at 15%) over a
-    // top-lit blurred inset in its own lighter shade (500 light / 900 dark).
     style: {
       shadow: 'custom',
       shadowGeometry: { x: 0, y: 6, blur: 12, spread: 0 },
@@ -256,8 +248,8 @@ export const presets: ThemePreset[] = [{
   icon: 'i-mdi-space-invaders',
   doc: {
     version: 1,
-    // A teal-washed neutral: the light end never reaches white, so the whole
-    // page sits on a dim LCD panel instead of paper.
+    // Teal-washed neutral: the light end never reaches white — a dim LCD
+    // panel instead of paper.
     palettes: {
       'custom-neutral': {
         shades: {
@@ -282,8 +274,6 @@ export const presets: ThemePreset[] = [{
     radius: 0,
     font: { sans: 'Pixelify Sans', weights: { normal: 400, medium: 500, semibold: 600, bold: 700 } },
     icons: 'pixelarticons',
-    // Inked page: near-black default AND accented borders over muted panel
-    // edges, deep red at 600 in light, flat 50s inversions in dark.
     tokens: {
       light: {
         '--ui-primary': 'var(--ui-color-primary-600)',
@@ -322,8 +312,7 @@ export const presets: ThemePreset[] = [{
   doc: {
     version: 1,
     palettes: {
-      // Anchored on the real brand clay — hsl(14.8 63.1% 59.6%) — at 500,
-      // with the ramp's hue and chroma re-fit around it.
+      // Anchored on the real brand clay — hsl(14.8 63.1% 59.6%) — at 500.
       clay: {
         shades: {
           50: 'oklch(97.4% 0.009 48.308)',
@@ -339,9 +328,8 @@ export const presets: ThemePreset[] = [{
           950: 'oklch(25.9% 0.054 38.197)'
         }
       },
-      // The real warm-gray scale (their --_gray-* HSL stops mapped onto the
-      // tailwind ladder: 20/40/70/150/300/450/600/650/750/830/900), so the
-      // 50 IS the signature cream background.
+      // Their real --_gray-* stops mapped onto the tailwind ladder — the 50
+      // IS the signature cream background.
       parchment: {
         shades: {
           50: 'oklch(98% 0.003 106.451)',
@@ -365,9 +353,7 @@ export const presets: ThemePreset[] = [{
     radius: 0.375,
     font: { sans: 'DM Sans', heading: { font: 'Source Serif 4', weight: 400 } },
     icons: 'heroicons',
-    // Deep cream page over ivory surfaces in light, with the border family
-    // stepped one deeper to hold on the tinted page; one flat 800 surface
-    // family in dark, with the brand clay held at 500.
+    // Border family stepped one deeper to hold on the tinted cream page.
     tokens: {
       light: {
         '--ui-bg': 'var(--ui-color-neutral-200)',
@@ -381,8 +367,6 @@ export const presets: ThemePreset[] = [{
         '--ui-bg-accented': 'var(--ui-color-neutral-800)'
       }
     },
-    // Blurred warm-gray drop shadows (500 light / 950 dark at 25%) with
-    // subtle panels.
     style: {
       shadow: 'custom',
       shadowGeometry: {
@@ -467,11 +451,9 @@ export const presets: ThemePreset[] = [{
   icon: 'i-simple-icons-bootstrap',
   doc: {
     version: 1,
-    // The real 5.3 scales: 100–400 are tint-color() (mix with white at
-    // 80/60/40/20%), 600–900 are shade-color() (mix with black), extended
-    // to 50/950 with the same math. Prefixed names: palettes named plainly
-    // 'blue'/'gray' would override the tailwind ramps of the same name
-    // across the whole app while the preset is active.
+    // The real 5.3 tint/shade-color() scales, extended to 50/950 with the
+    // same math. Prefixed names: a palette named plainly 'blue'/'gray' would
+    // override the same-named tailwind ramp app-wide while active.
     palettes: {
       'bs-blue': {
         shades: {
@@ -565,8 +547,7 @@ export const presets: ThemePreset[] = [{
         }
       }
     },
-    // $primary/$secondary/$success/$info/$warning/$danger — secondary is
-    // literally $gray-600, so the gray ramp serves both roles.
+    // secondary is literally $gray-600, so the gray ramp serves both roles.
     colors: {
       primary: 'bs-blue',
       secondary: 'bs-gray',
@@ -577,12 +558,11 @@ export const presets: ThemePreset[] = [{
       neutral: 'bs-gray'
     },
     radius: 0.125,
-    // Bootstrap ships the platform's own face (system-ui stack); Roboto is
-    // the stack's named Android fallback and the closest loadable stand-in.
+    // Bootstrap ships the system-ui stack; Roboto is its named Android
+    // fallback and the closest loadable stand-in.
     font: { sans: 'Roboto', heading: { weight: 500 } },
     icons: 'bootstrap',
-    // Light rides the gray ramp one step deeper than stock (page on gray-100,
-    // surfaces stepped 200/300) with a single strong border family.
+    // Light rides the gray ramp one step deeper than stock.
     tokens: {
       light: {
         '--ui-secondary': 'var(--ui-color-secondary-600)',
@@ -597,9 +577,8 @@ export const presets: ThemePreset[] = [{
         '--ui-bg-elevated': 'var(--ui-color-neutral-200)',
         '--ui-bg-accented': 'var(--ui-color-neutral-300)'
       },
-      // Dark mode keeps the very same brand colors (--bs-primary stays
-      // #0d6efd); $body-color-dark: $gray-300. The library's own dark
-      // defaults already land on the right gray stops for bg and borders.
+      // Dark keeps the same brand colors (--bs-primary stays #0d6efd);
+      // $body-color-dark: $gray-300.
       dark: {
         '--ui-primary': 'var(--ui-color-primary-500)',
         '--ui-secondary': 'var(--ui-color-secondary-500)',
diff --git a/docs/app/utils/theme-engine/resolve.ts b/docs/app/utils/theme-engine/resolve.ts
index 10a843ab97..c0d4254494 100644
--- a/docs/app/utils/theme-engine/resolve.ts
+++ b/docs/app/utils/theme-engine/resolve.ts
@@ -4,9 +4,8 @@ import { DEFAULT_COLORS } from './types'
 
 /**
  * The semantic token defaults as @nuxt/ui ships them (src/runtime/index.css).
- * Exports diff against THESE — the docs site's own baseline diverges (e.g.
- * its light `--ui-bg` follows the neutral ramp), but an exported theme must
- * reproduce the preview on top of a stock library install.
+ * Exports diff against THESE, not the docs site's diverging baseline — an
+ * exported theme must reproduce the preview on a stock library install.
  */
 export const LIBRARY_TOKEN_DEFAULTS = {
   light: {
@@ -58,20 +57,16 @@ export const LIBRARY_TOKEN_DEFAULTS = {
   }
 } as const
 
-// Standard stops ride the `--ui-color-<alias>-<shade>` indirection; the stops
-// between them have none — the runtime colours plugin only generates the 11
-// standard stops — so shadeRef emits them against the custom ramp's
-// `--color-custom-<alias>-<stop>` variable instead. Both forms name the same
-// ramp in the same capture position, so a single alternation parses both and
-// in-between stops promote back to governed shades like standard ones.
+// Standard stops ride the `--ui-color-<alias>-<shade>` indirection; midpoints
+// have none (the runtime colours plugin only generates the 11 standard stops)
+// so they emit against `--color-custom-<alias>-<stop>` instead. One
+// alternation parses both forms with the ramp in the same capture position.
 const UI_COLOR_RE = /^var\(--(?:ui-color|color-custom)-([a-z]+)-(\d{2,3})\)$/
 
 /**
- * Parse a shade reference the studio emits — both the standard-stop
- * `var(--ui-color-<alias>-<shade>)` form and the midpoint
- * `var(--color-custom-<alias>-<mid>)` form — to `{ alias, shade }`. The alias
- * is the ramp name in either case; callers apply their own ownership check
- * against it, so a ref on a foreign ramp is parsed but not adopted.
+ * Parse a shade reference the studio emits (either form) to `{ alias, shade }`.
+ * Callers apply their own ownership check — a foreign-ramp ref is parsed but
+ * not adopted.
  */
 export function parseUiColorRef(value?: string): { alias: string, shade: number } | undefined {
   const match = value?.match(UI_COLOR_RE)
diff --git a/docs/app/utils/theme-engine/sections.ts b/docs/app/utils/theme-engine/sections.ts
index 288cf264fd..01486d66e6 100644
--- a/docs/app/utils/theme-engine/sections.ts
+++ b/docs/app/utils/theme-engine/sections.ts
@@ -7,15 +7,11 @@ import { parseUiColorRef } from './resolve'
 
 /**
  * The studio's setting sections, each owning a slice of the ThemeDoc.
- * `pickSection` extracts a section's normalized state (defaults filled, so
- * "absent" and "explicitly stock" compare equal) and `mergeSection` splices
- * one doc's slice into another — which is all a per-section reset is:
- * merge the baseline's slice into the current doc and re-apply.
- *
- * The baseline is the ACTIVE PRESET's doc (stock when none): dirty means
- * "you touched this after applying the preset", per the exchange that
- * motivated it — not "differs from stock Nuxt UI" (the export already
- * answers that).
+ * `pickSection` extracts a section's normalized state ("absent" and
+ * "explicitly stock" compare equal); `mergeSection` splices one doc's slice
+ * into another, which is all a per-section reset is. The baseline is the
+ * ACTIVE PRESET's doc: dirty means "touched after applying the preset", not
+ * "differs from stock".
  */
 export type SectionKey
   = | 'primary' | 'neutral' | 'semantic'
@@ -36,10 +32,9 @@ function tokenSection(token: string): 'primary' | 'semantic' | 'neutral' {
 }
 
 /**
- * applyDoc promotes ramp-shaped token overrides into style.tokenShades
- * (deriveStyle), so a live doc and the preset doc it came from express the
- * SAME choice in different slots. Both sides are compared canonicalized:
- * promotable tokens count as shades, never as raw tokens.
+ * applyDoc promotes ramp-shaped token overrides into style.tokenShades, so a
+ * live doc and its preset express the SAME choice in different slots — both
+ * sides compare canonicalized: promotable tokens count as shades.
  */
 export function promotedShades(doc: ThemeDoc): Record<string, { light?: ShadeStop, dark?: ShadeStop }> {
   const promoted: Record<string, { light?: ShadeStop, dark?: ShadeStop }> = {}
@@ -59,9 +54,8 @@ export function promotedShades(doc: ThemeDoc): Record<string, { light?: ShadeSto
 }
 
 function ownedTokens(doc: ThemeDoc, section: 'primary' | 'semantic' | 'neutral') {
-  // tokens the doc's own style treatment emits are DERIVED — they're
-  // compared through the style fields, and a live doc always carries them
-  // merged into tokens while a preset doc never does
+  // tokens the doc's own style treatment emits are DERIVED — a live doc
+  // carries them merged into tokens, a preset doc never does
   const derived = styleTokens(doc.style ?? {})
   const promoted = promotedShades(doc)
   const pickMode = (mode: 'light' | 'dark') =>
@@ -122,9 +116,8 @@ export function pickSection(doc: ThemeDoc, key: SectionKey): unknown {
       }
     case 'font': {
       // Explicit stock values count as absent: setFontPrefs strips them on
-      // apply, so a live doc never carries them while a preset doc may (8-bit
-      // spells out the default weights) — raw comparison would read dirty
-      // forever, jamming the toolbar reset at its reset-to-preset stage.
+      // apply while a preset doc may spell them out (8-bit) — raw comparison
+      // would read dirty forever, jamming the toolbar reset.
       const font = { ...(doc.font ?? {}) }
       const weights = Object.fromEntries(Object.entries(font.weights ?? {})
         .filter(([step, weight]) => weight !== FONT_WEIGHT_DEFAULTS[step as keyof typeof FONT_WEIGHT_DEFAULTS]))
@@ -160,7 +153,7 @@ export function pickSection(doc: ThemeDoc, key: SectionKey): unknown {
       // colors (neutral-950 / black) — a non-choice, same as absent
       const color = style.shadowColor === 'default' ? null : style.shadowColor ?? null
       return {
-        shadow: style.shadow ?? 'none',
+        shadow: style.shadow ?? null,
         color: color === 'shade' && !style.shadowShade ? null : color,
         shade: style.shadowShade ?? null,
         opacity: style.shadowOpacity ?? null,
@@ -171,7 +164,7 @@ export function pickSection(doc: ThemeDoc, key: SectionKey): unknown {
     }
     case 'innerShadow':
       return {
-        shadow: style.innerShadow ?? 'none',
+        shadow: style.innerShadow ?? null,
         color: style.innerShadowColor ?? null,
         shade: style.innerShadowShade ?? null,
         opacity: style.innerShadowOpacity ?? null,
@@ -201,10 +194,8 @@ export function sectionFingerprint(doc: ThemeDoc, key: SectionKey): string {
 }
 
 /**
- * A doc's effective per-token shade choices: explicit style.tokenShades
- * plus ramp-shaped token overrides (the two representations applyDoc
- * interconverts). The per-row shade resets restore THESE — the baseline's
- * choice, not stock.
+ * A doc's effective per-token shade choices: explicit style.tokenShades plus
+ * ramp-shaped token overrides. Per-row shade resets restore THESE.
  */
 export function canonicalTokenShades(doc: ThemeDoc): Record<string, { light?: ShadeStop, dark?: ShadeStop }> {
   return { ...promotedShades(doc), ...doc.style?.tokenShades }
diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index a9067668e0..b8161d5849 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -1,46 +1,22 @@
 /**
- * Shadow and border treatments, expressed as per-component class bundles
- * plus two CSS variables for the colors.
+ * Shadow and border treatments as per-component class bundles, plus two CSS
+ * variables (`--ui-shadow-color`, `--ui-border-color`) so recoloring is a
+ * variable swap, not a new bundle. Nuxt UI has no semantic shadow/border
+ * tokens yet, so structure rides `app.config ui.<component>` with STATIC
+ * class literals.
  *
- * Nuxt UI has no semantic `--ui-shadow` / `--ui-border-width` tokens yet
- * (a known core gap), so structure rides the `app.config ui.<component>`
- * override path with STATIC class literals (tailwind compiles what it can
- * see in source), while the color choices are pure CSS variables:
- *
- * - `--ui-shadow-color` — referenced by every hard-shadow class
- * - `--ui-frame-color`  — referenced by every border-color override class
- *
- * so any color configuration is a variable swap, not a new class bundle.
- *
- * Placement rule: every ring in Nuxt UI themes lives at variant or
- * compoundVariant level (card/input variants, button/badge/alert compounds),
- * all of which render after slot classes — so width/color overrides MUST be
- * extension compoundVariants (appended after the theme's, they win the
+ * Placement rule: every ring in the library's themes lives at variant or
+ * compoundVariant level, which renders after slot classes — so ring
+ * overrides MUST be extension compoundVariants (appended last, they win the
  * tailwind-merge). Only shadows, which no theme variant sets, ride slots.
- *
- * Semantics:
- * - `border: bold` thickens borders that already exist, keeping ring colors.
- * - `border: frame` additionally frames solid/soft surfaces — the
- *   neobrutalist outline-everything look. Ghost/link stay flat.
- * - `borderColor`/`shadowColor` recolor via the variables; 'default' leaves
- *   each element's own ring color / the dark shadow color untouched.
  */
 import type { ShadeStop } from './types'
 import { SHADES } from './types'
 
-/**
- * 'soft'/'hard' are legacy values (old exports/saved state) treated as 'custom'
- * — the one config-driven shadow whose geometry is a slider, not a mode.
- */
-export type ShadowStyle = 'none' | 'flat' | 'custom' | 'soft' | 'hard'
+/** Absent = inherit the library shadows; 'flat' strips them; 'custom' is the config-driven shadow. */
+export type ShadowStyle = 'flat' | 'custom'
 
-/** A config-driven ("Custom") drop or inner shadow, including its legacy aliases. */
-export function isCustomShadow(shadow?: ShadowStyle): boolean {
-  return shadow === 'custom' || shadow === 'soft' || shadow === 'hard'
-}
-
-/** 'bold'/'frame' are legacy values (old exports/saved state) treated as 'custom'. */
-export type BorderStyle = 'default' | 'none' | 'custom' | 'bold' | 'frame'
+export type BorderStyle = 'default' | 'none' | 'custom'
 export type BorderColor = 'default' | 'inverted' | 'black' | 'white' | 'primary' | 'neutral' | 'shade' | 'primary-shade'
 export type ShadowColor = 'default' | 'black' | 'inverted' | 'primary' | 'shade' | 'primary-shade'
 export type DefaultVariant = 'default' | 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'link' | 'none'
@@ -59,45 +35,26 @@ export interface StyleOptions {
   borderShade?: { light?: ShadeStop, dark?: ShadeStop }
   /** Ring width in px (1–4) while `border` is 'custom'; 2 when unset. */
   borderWidth?: number
-  /**
-   * Frame solid/soft surfaces too (the neobrutalist outline-everything
-   * look) — only meaningful while `border` is 'custom'.
-   */
+  /** Frame solid/soft surfaces too — the neobrutalist outline-everything look. */
   frame?: boolean
   /**
-   * Default variant/size, expanded into per-component `defaultVariants` —
-   * the runtime override channel Nuxt UI already honors — only for
-   * components that actually support the chosen value. `variant` applies
-   * app-wide; `variants` refines it per component group and wins where set.
+   * Default variant/size/color, expanded into per-component `defaultVariants`
+   * only where the component supports the value. `variant` is app-wide;
+   * `variants`/`colors` refine per group and win where set.
    */
   defaults?: { variant?: DefaultVariant, size?: DefaultSize, variants?: Partial<Record<VariantGroup, DefaultVariant>>, colors?: Partial<Record<VariantGroup, DefaultColor>> }
-  /**
-   * Hard-shadow geometry in px, driving --ui-shadow-offset-x/y/blur/spread.
-   * Only meaningful while `shadow` is 'hard'.
-   */
+  /** Shadow geometry in px, driving --ui-shadow-offset-x/y/blur/spread. */
   shadowGeometry?: { x?: number, y?: number, blur?: number, spread?: number }
-  /**
-   * Shadow opacity in percent, driving --ui-shadow-opacity. Applies to both
-   * treatments; unset falls back to 100% (hard) / 25% (soft) via the
-   * per-treatment color-mix fallbacks.
-   */
+  /** Shadow opacity in percent; unset rides the color-mix fallbacks. */
   shadowOpacity?: number
   /**
-   * Buttons sink onto their shadow on hover/active — the press choreography
-   * driven by the shadow offset. On by default; off keeps the resting
-   * shadow static (soft blurred configs have nothing crisp to sink onto).
+   * Buttons sink onto their shadow on hover/active. On by default; off keeps
+   * the resting shadow static (a blurred config has nothing crisp to sink onto).
    */
   shadowPress?: boolean
-  /**
-   * Inset shadow treatment, independent of the drop shadow — same
-   * vocabulary ('soft' recolors a stock inset, 'hard' rides the geometry
-   * sliders) and the same components.
-   */
+  /** Inset shadow treatment, independent of the drop shadow. */
   innerShadow?: ShadowStyle
-  /**
-   * Inner-shadow geometry in px, driving --ui-inner-shadow-offset-x/y/…
-   * Only meaningful while `innerShadow` is 'hard'.
-   */
+  /** Inner-shadow geometry in px, driving --ui-inner-shadow-offset-x/y/… */
   innerShadowGeometry?: { x?: number, y?: number, blur?: number, spread?: number }
   /** Inner-shadow opacity in percent; unset falls back to 15%. */
   innerShadowOpacity?: number
@@ -106,12 +63,9 @@ export interface StyleOptions {
   /** Ramp shade per mode — neutral for 'shade', primary for 'primary-shade' */
   innerShadowShade?: { light?: ShadeStop, dark?: ShadeStop }
   /**
-   * Semantic token → neutral ramp shade, per mode. Strictly a token
-   * shorthand parked on the style axis until the studio grows a full
-   * tokens editor. Keys are whitelisted in TOKEN_SHADE_TARGETS. A mode
-   * is only an override when present — an absent mode stays inherited,
-   * so hydrating one mode from a preset never leaks a phantom override
-   * for the other into exports.
+   * Semantic token → ramp shade, keys whitelisted in TOKEN_SHADE_TARGETS.
+   * An absent mode stays inherited — presets hydrating one mode must not
+   * leak a phantom override for the other into exports.
    */
   tokenShades?: Record<string, { light?: ShadeStop, dark?: ShadeStop }>
 }
@@ -127,17 +81,13 @@ export const VARIANT_SUPPORT: Record<string, string[]> = {
   alert: ['solid', 'outline', 'soft', 'subtle'],
   card: ['solid', 'outline', 'soft', 'subtle'],
   empty: ['solid', 'outline', 'soft', 'subtle'],
-  // form fields have no solid variant (theirs run outline → none) — an
-  // unsupported value would silently unstyle them, so they keep their
-  // default instead
+  // fields have no solid variant — an unsupported value would silently unstyle them
   ...Object.fromEntries(FIELD_COMPONENTS.map(component => [component, FIELD_VARIANTS]))
 }
 
-// inputRating is size-only (no variant axis); everything here spans xs–xl exactly.
 /**
- * Every component the app-wide Size default scales — those with the full
- * xs–xl size axis and a user-facing footprint. Components on other scales
- * (avatar/chip/timeline's 3xs–3xl, kbd's sm–lg) stay out.
+ * Components the app-wide Size default scales — exactly the xs–xl axis.
+ * Components on other scales (avatar's 3xs–3xl, kbd's sm–lg) stay out.
  */
 export const SIZE_SUPPORT = [
   'button', 'badge', ...FIELD_COMPONENTS, 'inputRating',
@@ -146,7 +96,7 @@ export const SIZE_SUPPORT = [
   'dropdownMenu', 'contextMenu', 'commandPalette', 'listbox'
 ]
 
-/** Components with a color prop — the panels group has no color axis (card and empty lack one; a lone alert color stays a verbatim override). */
+/** Components with a color prop — the panels group has no color axis. */
 export const COLOR_SUPPORT = ['button', 'badge', ...FIELD_COMPONENTS]
 
 /** Component groups behind the per-group default-variant selects. */
@@ -175,14 +125,10 @@ export const TOKEN_GROUPS: Array<{ key: TokenGroup, label: string }> = [
 ]
 
 /**
- * Semantic tokens the studio exposes as per-mode shade sliders, with the
- * library/docs default shades. 'white' library values map to shade 50.
- * `ramp` names the color scale the slider walks (and the token references);
- * the semantic aliases ride their own ramps (--ui-secondary follows the
- * secondary palette, etc. — all generated by the runtime colors plugin).
+ * Semantic tokens exposed as per-mode shade sliders. `defaults` are the
+ * LIBRARY's real resting values — some are the literal ladder ends (light
+ * --ui-bg is `white`, not a ramp stop); `ramp` names the scale the slider walks.
  */
-// defaults are the LIBRARY's real resting values — several are the
-// literal ladder ends (light --ui-bg is `white`, not a ramp stop)
 export const TOKEN_SHADE_TARGETS: Array<{ token: string, label: string, ramp: TokenRamp, group: TokenGroup, defaults: { light: ShadeStop, dark: ShadeStop } }> = [
   { token: '--ui-primary', label: 'Primary', ramp: 'primary', group: 'colors', defaults: { light: 500, dark: 400 } },
   { token: '--ui-secondary', label: 'Secondary', ramp: 'secondary', group: 'colors', defaults: { light: 500, dark: 400 } },
@@ -217,22 +163,18 @@ interface ComponentFragment {
 
 type Fragments = Record<string, ComponentFragment>
 
-// Form fields also come in surfaceless variants (ghost/none) — those stay
-// flat under both shadow treatments.
+// surfaceless field variants stay flat under every shadow treatment
 const FLAT_FIELD_VARIANTS = [
   { variant: 'ghost', class: 'shadow-none' },
   { variant: 'none', class: 'shadow-none' }
 ]
 
 /**
- * A ramp shade reference — or the literal when the stop is white/black.
- * Standard stops go through the `--ui-color-<ramp>-<stop>` indirection so a
- * token follows whatever colour the ramp is assigned. Stops between them (any
- * density finer than 100) have NO such indirection — the runtime colours
- * plugin only generates the 11 standard stops — so they reference the custom
- * ramp's `--color-*` directly. That's sound because an in-between stop can
- * only exist on a custom palette (named `custom-<ramp>`), whose `@theme
- * static` block defines those variables in both the preview and the export.
+ * A ramp shade reference, or the literal for white/black. In-between stops
+ * (finer than 100) have no `--ui-color-*` indirection — the runtime colors
+ * plugin only generates the 11 standard stops — so they hit the custom
+ * ramp's `--color-*` directly; such stops only exist on custom palettes,
+ * whose @theme block defines those vars in both preview and export.
  */
 function shadeRef(ramp: string, stop: ShadeStop | number): string {
   if (stop === 'white' || stop === 'black') return stop
@@ -242,17 +184,13 @@ function shadeRef(ramp: string, stop: ShadeStop | number): string {
   return `var(--ui-color-${ramp}-${stop})`
 }
 
-// The pill tabs' stock trigger shadow is the pre-hydration active-tab fallback
-// (shown before reka mounts its indicator), emitted through the library's
-// `ssr()` helper with this exact modifier chain. A bare `before:shadow-none`
-// won't tailwind-merge against it — the override must carry the same chain.
+// The tabs' pre-hydration active-trigger shadow ships with this exact modifier
+// chain; a bare `before:shadow-none` won't tailwind-merge against it.
 const TABS_SSR_SHADOW_NONE = 'in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:before:shadow-none'
 
-const SHADOW_FRAGMENTS: Record<'none' | 'flat' | 'custom', Fragments> = {
-  none: {},
-  // Strip the stock shadows the library ships on overlay surfaces — the
-  // studio's None, distinct from Inherit (no treatment at all). The generalised
-  // ramp is also blanked for raw content via the .shadow-none root flag.
+const SHADOW_FRAGMENTS: Record<'flat' | 'custom', Fragments> = {
+  // None: strip the library's stock overlay shadows (Inherit touches nothing);
+  // the ramp itself is blanked via the .shadow-none root flag.
   flat: {
     popover: { slots: { content: 'shadow-none' } },
     dropdownMenu: { slots: { content: 'shadow-none' } },
@@ -265,24 +203,18 @@ const SHADOW_FRAGMENTS: Record<'none' | 'flat' | 'custom', Fragments> = {
     drawer: { slots: { content: 'shadow-none' } },
     modal: { compoundVariants: [{ fullscreen: false, class: { content: 'shadow-none' } }] },
     slideover: { slots: { content: 'sm:shadow-none' } },
-    // The pill tabs ship a stock shadow-xs on the indicator and trigger
-    // pseudo — strip both so None reads flat like every other surface.
     tabs: { compoundVariants: [{ variant: 'pill', class: { list: 'shadow-none', indicator: 'shadow-none', trigger: TABS_SSR_SHADOW_NONE } }] }
   },
-  // The one config-driven shadow. Colour/opacity/geometry come from the
-  // generalised --shadow-* ramp (active under .shadow-custom), so plain size
-  // classes are all these fragments need: overlays keep their stock shadow-lg
-  // and ride the ramp untouched; flat surfaces get a size added.
+  // Custom: the ramp (active under .shadow-custom) carries color/opacity/
+  // geometry, so plain size classes suffice — overlays keep their stock
+  // shadow-lg untouched; flat surfaces get a size added.
   custom: {
     button: {
       slots: {
-        // The base rides the ramp; the press-effect translates by the shadow
-        // offset (0 for a soft/blur config → no visible press) and collapses the
-        // shadow on active, so brutalist geometry gets the neobrutalism press.
-        base: 'shadow-(--ui-shadow-hard) hover:translate-x-[calc(var(--ui-shadow-offset-x)/2)] hover:translate-y-[calc(var(--ui-shadow-offset-y)/2)] hover:shadow-(--ui-shadow-hard-half) active:translate-x-(--ui-shadow-offset-x) active:translate-y-(--ui-shadow-offset-y) active:shadow-none transition-[box-shadow,translate,background-color]'
+        // press effect: translate by the shadow offset, collapse the shadow on active
+        base: 'shadow-(--ui-shadow-press) hover:translate-x-[calc(var(--ui-shadow-offset-x)/2)] hover:translate-y-[calc(var(--ui-shadow-offset-y)/2)] hover:shadow-(--ui-shadow-press-half) active:translate-x-(--ui-shadow-offset-x) active:translate-y-(--ui-shadow-offset-y) active:shadow-none transition-[box-shadow,translate,background-color]'
       },
-      // A floating shadow under an invisible box reads as a glitch — ghost and
-      // link buttons stay flat, as in the reference neobrutalism kits.
+      // a floating shadow under an invisible box reads as a glitch
       compoundVariants: [
         { variant: 'ghost', class: 'shadow-none hover:translate-x-0 hover:translate-y-0 hover:shadow-none active:translate-x-0 active:translate-y-0' },
         { variant: 'link', class: 'shadow-none hover:translate-x-0 hover:translate-y-0 hover:shadow-none active:translate-x-0 active:translate-y-0' }
@@ -297,29 +229,26 @@ const SHADOW_FRAGMENTS: Record<'none' | 'flat' | 'custom', Fragments> = {
     textarea: { slots: { base: 'shadow-xs' }, compoundVariants: FLAT_FIELD_VARIANTS },
     alert: { slots: { root: 'shadow-lg' } },
     badge: { slots: { base: 'shadow-xs' } },
-    // slideover is edge-to-edge on mobile; only its sm+ panel casts a shadow.
+    // edge-to-edge on mobile; only the sm+ panel casts a shadow
     slideover: { slots: { content: 'shadow-none sm:shadow-lg' } },
-    // The pill bar is the raised surface — it casts the same full-size
-    // composition as buttons (it sits next to them in toolbars); the stock
-    // indicator/trigger shadows drop so it doesn't double up inside.
-    tabs: { compoundVariants: [{ variant: 'pill', class: { list: 'shadow-(--ui-shadow-hard)', indicator: 'shadow-none', trigger: TABS_SSR_SHADOW_NONE } }] },
-    // The thumb's stock shadow-lg is a subtle native lift — riding the ramp
-    // would cast a full-size shadow inside the track.
+    // the pill list is the raised surface (full size, matching toolbar
+    // buttons); the stock indicator/trigger shadows drop so it doesn't double up
+    tabs: { compoundVariants: [{ variant: 'pill', class: { list: 'shadow-(--ui-shadow-press)', indicator: 'shadow-none', trigger: TABS_SSR_SHADOW_NONE } }] },
+    // riding the ramp would cast a full-size shadow inside the track
     switch: { slots: { thumb: 'shadow-none' } }
   }
 }
 
 /** shadowPress: false — the resting shadow without the press choreography. */
 const PRESSLESS_BUTTON: Fragments[string] = {
-  slots: { base: 'shadow-(--ui-shadow-hard)' },
+  slots: { base: 'shadow-(--ui-shadow-press)' },
   compoundVariants: [
     { variant: 'ghost', class: 'shadow-none' },
     { variant: 'link', class: 'shadow-none' }
   ]
 }
 
-// Inset shadows use tailwind's separate inset-shadow group, so they merge
-// independently of (and coexist with) the drop treatment on every surface.
+// tailwind's separate inset-shadow group merges independently of the drop treatment
 const INNER_HARD = 'inset-shadow-(--ui-inner-shadow)'
 
 const INNER_FLAT_FIELD_VARIANTS = [
@@ -354,18 +283,14 @@ function innerShadowFragments(classes: string): Fragments {
     drawer: { slots: { content: classes } },
     modal: { compoundVariants: [{ fullscreen: false, class: { content: classes } }] },
     slideover: { slots: { content: classes } },
-    // The pill track reads as a recessed well; the raised indicator stays clean.
+    // the pill track reads as a recessed well; the indicator stays clean
     tabs: { compoundVariants: [{ variant: 'pill', class: { list: classes } }] }
   }
 }
 
 export const BORDER_WIDTH_DEFAULT = 2
 
-/**
- * Frame outlines at the DEFAULT ring width — the width itself flows through
- * --default-ring-width (compiled to the studio variable live, a static
- * @theme value in exports), so no per-width class enumeration is needed.
- */
+// default-width rings — the width itself flows through --default-ring-width
 const FRAME_INSET = 'ring ring-inset ring-(--ui-border-accented)'
 const FRAME_OUTSET = 'ring ring-(--ui-border-accented)'
 
@@ -390,71 +315,55 @@ const FRAME_FRAGMENTS: Fragments = (() => {
     // fields have no solid variant — soft is their surface look
     ...Object.fromEntries(FIELD_COMPONENTS.map(component => [component, { compoundVariants: [{ variant: 'soft', class: inset }] }])),
     chatPrompt: { compoundVariants: [{ variant: 'soft', class: { root: outset } }] },
-    // other solid surfaces: the pill tabs wrapper (the list ring only — the
-    // indicator already sits inside the outlined list, so ringing it too
-    // reads as a double outline) and the switch track (its checked
-    // color-ring loses the merge to ours — the frame look owns ring color
-    // by design, same as solid buttons)
+    // list ring only — ringing the indicator inside it reads as a double outline
     tabs: { compoundVariants: [{ variant: 'pill', class: { list: inset } }] },
     switch: { slots: { base: inset } }
   }
 })()
 
 /**
- * The pill tabs list has no stock ring, so a border treatment that only
- * retunes existing rings would leave it bare next to outlined fields —
- * any active treatment outlines it, frame toggle or not.
+ * The pill tabs list has no stock ring, so any active border treatment
+ * outlines it, frame toggle or not — else it sits bare next to outlined fields.
  */
 const TABS_BORDER_FRAGMENTS: Fragments = {
   tabs: { compoundVariants: [{ variant: 'pill', class: { list: FRAME_INSET } }] }
 }
 
 /**
- * Every width flows through --default-border-width/--default-ring-width —
- * compiled onto the studio variable in the docs' own build, emitted as a
- * static @theme value in exports — so borders need no class fragments at
- * all. Only the frame toggle adds classes: outlines on surfaces that have
- * none (plus the ringless tabs list, outlined by any active treatment).
- * Legacy 'frame' (old saved prefs) implies the toggle.
+ * Widths flow through --default-border-width/--default-ring-width, so borders
+ * need no class fragments — only the frame toggle adds outlines on surfaces
+ * that have none.
  */
 function borderFragments(style: StyleOptions): Fragments {
-  const framed = style.frame || style.border === 'frame'
-  const zeroed = style.border === 'none'
-  if (zeroed || !style.border || style.border === 'default') return {}
-  return framed ? FRAME_FRAGMENTS : TABS_BORDER_FRAGMENTS
+  if (style.border !== 'custom') return {}
+  return style.frame ? FRAME_FRAGMENTS : TABS_BORDER_FRAGMENTS
 }
 
 /**
  * compound entries recoloring rings via the variable. With `colors` given,
- * only those color variants are touched — on outline/subtle the ring IS the
- * semantic signal (an error badge's ring must stay error-colored), so those
- * only recolor for primary/neutral. Frames added around solid/soft surfaces
- * are outlines by design and recolor for every color (comic-book black
- * outlines a solid error button too).
+ * only those variants repaint — on outline/subtle the ring IS the semantic
+ * signal (an error badge's ring stays error-colored); frames around
+ * solid/soft are outlines by design and recolor for every color.
  */
 function recolor(variants: string[], slot?: string, colors?: string[]): Array<Record<string, unknown>> {
   return variants.map(variant => ({
     ...(colors ? { color: colors } : {}),
     variant,
-    class: slot ? { [slot]: 'ring-(--ui-frame-color)' } : 'ring-(--ui-frame-color)'
+    class: slot ? { [slot]: 'ring-(--ui-border-color)' } : 'ring-(--ui-border-color)'
   }))
 }
 
-/**
- * Colors whose rings carry no meaning — safe to repaint. Only neutral: a
- * primary ring is as deliberate a choice as an error one (a subtle primary
- * button must keep its primary border under any border color).
- */
+// only neutral rings carry no meaning — a primary ring is as deliberate as an error one
 const UNSIGNALED_COLORS = ['neutral']
 
-const FRAME_COLOR_FRAGMENTS: Fragments = {
+const BORDER_COLOR_FRAGMENTS: Fragments = {
   // cards have no color variants; field rings are neutral for every color
   card: { compoundVariants: recolor(['outline', 'subtle', 'solid', 'soft'], 'root') },
   empty: { compoundVariants: recolor(['outline', 'subtle', 'solid', 'soft'], 'root') },
   ...Object.fromEntries(FIELD_COMPONENTS.map(component => [component, { compoundVariants: recolor(['outline', 'subtle']) }])),
-  select: { slots: { content: 'ring-(--ui-frame-color)' }, compoundVariants: recolor(['outline', 'subtle']) },
-  selectMenu: { slots: { content: 'ring-(--ui-frame-color)' }, compoundVariants: recolor(['outline', 'subtle']) },
-  inputMenu: { slots: { content: 'ring-(--ui-frame-color)' }, compoundVariants: recolor(['outline', 'subtle']) },
+  select: { slots: { content: 'ring-(--ui-border-color)' }, compoundVariants: recolor(['outline', 'subtle']) },
+  selectMenu: { slots: { content: 'ring-(--ui-border-color)' }, compoundVariants: recolor(['outline', 'subtle']) },
+  inputMenu: { slots: { content: 'ring-(--ui-border-color)' }, compoundVariants: recolor(['outline', 'subtle']) },
   alert: {
     compoundVariants: [
       ...recolor(['outline', 'subtle'], 'root', UNSIGNALED_COLORS),
@@ -473,24 +382,23 @@ const FRAME_COLOR_FRAGMENTS: Fragments = {
       ...recolor(['solid', 'soft'])
     ]
   },
-  // slot-level rings recolor via slots; color utilities are inert without a
-  // ring width, so slideover's needs no sm: prefix
-  popover: { slots: { content: 'ring-(--ui-frame-color)' } },
-  dropdownMenu: { slots: { content: 'ring-(--ui-frame-color)' } },
-  contextMenu: { slots: { content: 'ring-(--ui-frame-color)' } },
-  tooltip: { slots: { content: 'ring-(--ui-frame-color)' } },
-  toast: { slots: { root: 'ring-(--ui-frame-color)' } },
-  drawer: { slots: { content: 'ring-(--ui-frame-color)' } },
-  modal: { compoundVariants: [{ fullscreen: false, class: { content: 'ring-(--ui-frame-color)' } }] },
-  slideover: { slots: { content: 'ring-(--ui-frame-color)' } },
-  checkbox: { slots: { base: 'ring-(--ui-frame-color)' } },
-  radioGroup: { slots: { base: 'ring-(--ui-frame-color)' } },
+  // ring color utilities are inert without a ring width, so no sm: prefixes needed
+  popover: { slots: { content: 'ring-(--ui-border-color)' } },
+  dropdownMenu: { slots: { content: 'ring-(--ui-border-color)' } },
+  contextMenu: { slots: { content: 'ring-(--ui-border-color)' } },
+  tooltip: { slots: { content: 'ring-(--ui-border-color)' } },
+  toast: { slots: { root: 'ring-(--ui-border-color)' } },
+  drawer: { slots: { content: 'ring-(--ui-border-color)' } },
+  modal: { compoundVariants: [{ fullscreen: false, class: { content: 'ring-(--ui-border-color)' } }] },
+  slideover: { slots: { content: 'ring-(--ui-border-color)' } },
+  checkbox: { slots: { base: 'ring-(--ui-border-color)' } },
+  radioGroup: { slots: { base: 'ring-(--ui-border-color)' } },
   // inert until a border treatment gives the list its ring
-  tabs: { compoundVariants: [{ variant: 'pill', class: { list: 'ring-(--ui-frame-color)' } }] }
+  tabs: { compoundVariants: [{ variant: 'pill', class: { list: 'ring-(--ui-border-color)' } }] }
 }
 
 /** Per-mode values behind the two color variables, per palette choice. */
-export const FRAME_COLOR_VALUES: Record<Exclude<BorderColor, 'default' | 'shade' | 'primary-shade'>, { light: string, dark: string }> = {
+export const BORDER_COLOR_VALUES: Record<Exclude<BorderColor, 'default' | 'shade' | 'primary-shade'>, { light: string, dark: string }> = {
   inverted: { light: 'var(--ui-color-neutral-950)', dark: 'white' },
   black: { light: 'black', dark: 'black' },
   white: { light: 'white', dark: 'white' },
@@ -516,12 +424,12 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
   if (style.borderColor === 'shade' || style.borderColor === 'primary-shade') {
     const ramp = style.borderColor === 'primary-shade' ? 'primary' : 'neutral'
     const shade = { ...BORDER_SHADE_DEFAULTS, ...style.borderShade }
-    light['--ui-frame-color'] = shadeRef(ramp, shade.light)
-    dark['--ui-frame-color'] = shadeRef(ramp, shade.dark)
+    light['--ui-border-color'] = shadeRef(ramp, shade.light)
+    dark['--ui-border-color'] = shadeRef(ramp, shade.dark)
   } else if (style.borderColor && style.borderColor !== 'default') {
-    const value = FRAME_COLOR_VALUES[style.borderColor]
-    light['--ui-frame-color'] = value.light
-    dark['--ui-frame-color'] = value.dark
+    const value = BORDER_COLOR_VALUES[style.borderColor]
+    light['--ui-border-color'] = value.light
+    dark['--ui-border-color'] = value.dark
   }
   for (const [token, shade] of Object.entries(style.tokenShades || {})) {
     const target = TOKEN_SHADE_TARGETS.find(target => target.token === token)
@@ -531,12 +439,12 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
     }
   }
 
-  if (style.shadow && style.shadow !== 'none' && style.shadow !== 'flat' && style.shadowOpacity !== undefined) {
+  if (style.shadow === 'custom' && style.shadowOpacity !== undefined) {
     light['--ui-shadow-opacity'] = `${style.shadowOpacity}%`
     dark['--ui-shadow-opacity'] = `${style.shadowOpacity}%`
   }
 
-  if (isCustomShadow(style.shadow)) {
+  if (style.shadow === 'custom') {
     const geometry = { ...SHADOW_GEOMETRY_DEFAULTS, ...style.shadowGeometry }
     for (const [axis, token] of [['x', '--ui-shadow-offset-x'], ['y', '--ui-shadow-offset-y'], ['blur', '--ui-shadow-blur'], ['spread', '--ui-shadow-spread']] as const) {
       light[token] = `${geometry[axis]}px`
@@ -544,12 +452,12 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
     }
   }
 
-  if (style.innerShadow && style.innerShadow !== 'none' && style.innerShadowOpacity !== undefined) {
+  if (style.innerShadow === 'custom' && style.innerShadowOpacity !== undefined) {
     light['--ui-inner-shadow-opacity'] = `${style.innerShadowOpacity}%`
     dark['--ui-inner-shadow-opacity'] = `${style.innerShadowOpacity}%`
   }
 
-  if (isCustomShadow(style.innerShadow)) {
+  if (style.innerShadow === 'custom') {
     const geometry = { ...INNER_SHADOW_GEOMETRY_DEFAULTS, ...style.innerShadowGeometry }
     for (const [axis, token] of [['x', '--ui-inner-shadow-offset-x'], ['y', '--ui-inner-shadow-offset-y'], ['blur', '--ui-inner-shadow-blur'], ['spread', '--ui-inner-shadow-spread']] as const) {
       light[token] = `${geometry[axis]}px`
@@ -557,15 +465,12 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
     }
   }
 
-  // An unset shadowColor is the 'shade' default, but only a custom shadow paints
-  // one — so the shade slider works without first touching the colour dropdown,
-  // while a pristine theme emits nothing.
+  // unset shadowColor defaults to 'shade' — but only under a custom shadow,
+  // so a pristine theme emits nothing
   const shadowColorMode = (!style.shadowColor || style.shadowColor === 'default')
-    ? (isCustomShadow(style.shadow) ? 'shade' : undefined)
+    ? (style.shadow === 'custom' ? 'shade' : undefined)
     : style.shadowColor
   if (shadowColorMode === 'shade' || shadowColorMode === 'primary-shade') {
-    // Per-mode ramp shade — a graded shadow that darkens or lightens
-    // independently of the scheme it sits on; the primary ramp tints it.
     const ramp = shadowColorMode === 'primary-shade' ? 'primary' : 'neutral'
     const shade = { ...SHADOW_SHADE_DEFAULTS, ...style.shadowShade }
     light['--ui-shadow-color'] = shadeRef(ramp, shade.light)
@@ -587,11 +492,8 @@ export function styleTokens(style: StyleOptions): { light: Record<string, string
     dark['--ui-inner-shadow-color'] = value.dark
   }
 
-  // Studio-only: the docs build compiles --default-border-width and
-  // --default-ring-width onto this variable, so EVERY default-width
-  // border/ring/divide in the app follows it live (plain gap-px boundaries
-  // reference it directly). Stripped from exports, which carry a static
-  // @theme value instead.
+  // Studio-only: every default-width border/ring/divide compiles onto this
+  // var live. Stripped from exports, which carry a static @theme value.
   if (style.border && style.border !== 'default') {
     const width = style.border === 'none' ? 0 : style.borderWidth ?? BORDER_WIDTH_DEFAULT
     light['--studio-border-width'] = `${width}px`
@@ -617,8 +519,7 @@ export function styleComponents(style: StyleOptions): Fragments {
       }
     }
   }
-  // Group refinements land after the app-wide value, replacing it for the
-  // components they cover — unsupported values still fall through silently.
+  // group refinements replace the app-wide value for the components they cover
   for (const [group, components] of Object.entries(VARIANT_GROUPS)) {
     const groupVariant = style.defaults?.variants?.[group as VariantGroup]
     if (groupVariant && groupVariant !== 'default') {
@@ -660,14 +561,14 @@ export function styleComponents(style: StyleOptions): Fragments {
 
   const sources = [
     defaults,
-    isCustomShadow(style.shadow)
+    style.shadow === 'custom'
       ? (style.shadowPress === false ? { ...SHADOW_FRAGMENTS.custom, button: PRESSLESS_BUTTON } : SHADOW_FRAGMENTS.custom)
-      : SHADOW_FRAGMENTS[style.shadow === 'flat' ? 'flat' : 'none'],
-    isCustomShadow(style.innerShadow)
+      : style.shadow === 'flat' ? SHADOW_FRAGMENTS.flat : {},
+    style.innerShadow === 'custom'
       ? innerShadowFragments(INNER_HARD)
       : {},
     borderFragments(style),
-    style.borderColor && style.borderColor !== 'default' ? FRAME_COLOR_FRAGMENTS : {}
+    style.borderColor && style.borderColor !== 'default' ? BORDER_COLOR_FRAGMENTS : {}
   ]
 
   const result: Fragments = {}
@@ -693,10 +594,9 @@ export function styleComponents(style: StyleOptions): Fragments {
 
 /**
  * Merge two `ui.<component>` override fragments so both take effect: slot
- * class strings concatenate (the explicit override last, so it wins the
- * tailwind-merge), compoundVariants arrays append in the same order. Used
- * wherever a doc's explicit `components` meet a style expansion — a spread
- * would silently drop whichever side loses.
+ * class strings concatenate (extra last, winning the tailwind-merge),
+ * compoundVariants append in the same order. A spread would silently drop
+ * whichever side loses.
  */
 export function mergeComponentOverrides(
   base: Record<string, any> | undefined,
@@ -743,14 +643,13 @@ export function mergeUi(
 }
 
 /**
- * The style axes that mean "leave it alone": no shadow (or 'none'), border
- * 'default', and nothing else set. Border 'none' is a REAL choice (strip
- * every ring), so the generic value-check can't be reused for it.
+ * Nothing set that changes rendering. Border 'none' is a REAL choice (strip
+ * every ring), so the generic value-check can't cover it.
  */
 export function isDefaultStyle(style: StyleOptions = {}): boolean {
   const { shadow, innerShadow, border, ...rest } = style
-  return (!shadow || shadow === 'none')
-    && (!innerShadow || innerShadow === 'none')
+  return !shadow
+    && !innerShadow
     && (!border || border === 'default')
     && !Object.values(rest).some(value => value && value !== 'default')
 }
diff --git a/docs/app/utils/theme-engine/types.ts b/docs/app/utils/theme-engine/types.ts
index 15ded681ee..4ad3af3a52 100644
--- a/docs/app/utils/theme-engine/types.ts
+++ b/docs/app/utils/theme-engine/types.ts
@@ -3,28 +3,21 @@ import { isDefaultStyle } from './styles'
 export const SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
 
 /**
- * Every stop any density can emit: the 10-step ladder plus the odd 25-step
- * quarters (75, 125…). `Shade` is that whole union, so each density's set is a
- * subset of it and a stop stays a valid shade whichever density produced it.
+ * Every stop any density can emit — a stop stays a valid `Shade` whichever
+ * density produced it.
  */
 export const SHADES_ALL = [50, 60, 70, 75, 80, 90, 100, 110, 120, 125, 130, 140, 150, 160, 170, 175, 180, 190, 200, 210, 220, 225, 230, 240, 250, 260, 270, 275, 280, 290, 300, 310, 320, 325, 330, 340, 350, 360, 370, 375, 380, 390, 400, 410, 420, 425, 430, 440, 450, 460, 470, 475, 480, 490, 500, 510, 520, 525, 530, 540, 550, 560, 570, 575, 580, 590, 600, 610, 620, 625, 630, 640, 650, 660, 670, 675, 680, 690, 700, 710, 720, 725, 730, 740, 750, 760, 770, 775, 780, 790, 800, 810, 820, 825, 830, 840, 850, 860, 870, 875, 880, 890, 900, 910, 920, 925, 930, 940, 950] as const
 
 export type Shade = typeof SHADES_ALL[number]
 
-/**
- * Stop density, as the gap between stops. A palette carries one in its
- * `stopStep`; generation and the shade sliders then span that set. Ordered
- * coarse → fine, which `detectStopStep` reads back in order.
- */
+/** Stop density as the gap between stops, ordered coarse → fine (detectStopStep relies on the order). */
 export const SHADE_STEPS = [100, 50, 25, 10] as const
 
 export type ShadeStep = typeof SHADE_STEPS[number]
 
 /** The stops each density emits: 11, 19, 37 and 91. */
 export const SHADE_SETS: Record<ShadeStep, readonly Shade[]> = {
-  // The standard ramp is the only irregular one — 50 and 950 are half-steps
-  // at the ends. Every finer density is just the multiples of its step, which
-  // already include both ends.
+  // 100 is the only irregular set — 50/950 are half-steps at the ends.
   100: SHADES,
   50: SHADES_ALL.filter(shade => shade % 50 === 0),
   25: SHADES_ALL.filter(shade => shade % 25 === 0),
@@ -34,10 +27,9 @@ export const SHADE_SETS: Record<ShadeStep, readonly Shade[]> = {
 export type ShadeStop = 'white' | Shade | 'black'
 
 /**
- * The shade sliders' full travel: a density's stops plus literal white/black
- * ends. The ends matter because several stock defaults are literals the ramp
- * can't express (--ui-bg is `white`, the stock dark shadow is `black`) —
- * without them the sliders could only pin lookalike ramp overrides.
+ * The shade sliders' travel: a density's stops plus literal white/black ends
+ * — several stock defaults are literals the ramp can't express (--ui-bg is
+ * `white`).
  */
 const ladder = (step: ShadeStep): readonly ShadeStop[] => ['white', ...SHADE_SETS[step], 'black']
 
@@ -58,9 +50,8 @@ export interface ThemePalette {
 }
 
 /**
- * A theme is a sparse document: it stores only explicit overrides and
- * everything absent stays inherited from the Nuxt UI defaults. Serializing
- * the document therefore *is* the minimal export.
+ * A theme is a sparse document — only explicit overrides, everything absent
+ * inherits Nuxt UI defaults — so serializing it *is* the minimal export.
  */
 export interface ThemeDoc {
   version: 1
@@ -82,10 +73,8 @@ export interface ThemeDoc {
   font?: {
     sans?: string
     /**
-     * Overrides for tailwind's weight steps — the knobs components
-     * actually dereference (`font-medium` compiles to
-     * `font-weight: var(--font-weight-medium)`). Sparse: only set steps
-     * are emitted. normal also drives classless body text.
+     * Sparse overrides for tailwind's weight steps (`font-medium` compiles to
+     * `var(--font-weight-medium)`); normal also drives classless body text.
      */
     weights?: { normal?: number, medium?: number, semibold?: number, bold?: number }
     uppercase?: boolean
@@ -106,10 +95,7 @@ export interface ThemeDoc {
     }
   }
   icons?: string
-  /**
-   * Shadow/border treatment, expanded into per-component overrides on apply
-   * and export (no semantic shadow/border-width tokens in core yet).
-   */
+  /** Shadow/border treatment, expanded into per-component overrides (no semantic tokens in core yet). */
   style?: import('./styles').StyleOptions
   /** L4 — per-component overrides merged into `app.config ui.<component>` */
   components?: Record<string, Record<string, unknown>>
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 5f95e61b69..edebd56373 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -352,10 +352,6 @@ describe('styleComponents', () => {
     expect(inner.input!.compoundVariants).toContainEqual({ variant: 'none', class: 'inset-shadow-none' })
     expect(inner.card!.slots!.root).toContain('inset-shadow-(--ui-inner-shadow)')
 
-    // legacy 'soft'/'hard' fold into the same one inset treatment
-    expect(styleComponents({ innerShadow: 'soft' }).card!.slots!.root).toContain('inset-shadow-(--ui-inner-shadow)')
-    expect(styleComponents({ innerShadow: 'hard' }).card!.slots!.root).toContain('inset-shadow-(--ui-inner-shadow)')
-
     // drop and inner coexist on one surface — separate tailwind groups
     const both = styleComponents({ shadow: 'custom', innerShadow: 'custom' })
     expect(both.card!.slots!.root).toContain('shadow-lg')
@@ -371,7 +367,7 @@ describe('styleComponents', () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
     const components = styleComponents({ shadow: 'custom', border: 'custom', frame: true })
 
-    expect(components.button!.slots!.base).toContain('shadow-(--ui-shadow-hard)')
+    expect(components.button!.slots!.base).toContain('shadow-(--ui-shadow-press)')
     // widths ride the default-width variables — no ring-N classes anywhere
     expect(components.button!.slots!.base).not.toContain('ring')
     expect(components.button!.compoundVariants).toContainEqual({ variant: 'solid', class: 'ring ring-inset ring-(--ui-border-accented)' })
@@ -383,7 +379,7 @@ describe('styleComponents', () => {
     const { docToSettings } = await import('../../docs/app/utils/theme-engine')
     const settings = docToSettings({
       version: 1,
-      style: { shadow: 'hard', shadowColor: 'black' },
+      style: { shadow: 'custom', shadowColor: 'black' },
       components: { button: { slots: { base: 'rounded-full' } } }
     })
 
@@ -399,7 +395,7 @@ describe('styleComponents', () => {
     const merged = mergeUi(styleComponents({ shadow: 'custom' }), { button: { slots: { base: 'rounded-full' } } })
 
     // both the shadow classes and the explicit override survive, explicit last
-    expect(merged.button.slots.base).toContain('shadow-(--ui-shadow-hard)')
+    expect(merged.button.slots.base).toContain('shadow-(--ui-shadow-press)')
     expect(merged.button.slots.base.endsWith('rounded-full')).toBe(true)
     expect(merged.card.slots.root).toContain('shadow-lg')
   })
@@ -430,10 +426,8 @@ describe('style colors', () => {
     // frame off (or border none) → no outlines
     expect(styleComponents({ border: 'none', frame: true })).toEqual({})
 
-    // legacy saved 'frame' keeps its outlines; legacy 'bold' is width-only →
-    // just the tabs-list outline, like unframed custom
-    expect(styleComponents({ border: 'frame' }).button!.compoundVariants).toContainEqual({ variant: 'solid', class: 'ring ring-inset ring-(--ui-border-accented)' })
-    expect(Object.keys(styleComponents({ border: 'bold' }))).toEqual(['tabs'])
+    // width-only custom border → just the tabs-list outline
+    expect(Object.keys(styleComponents({ border: 'custom' }))).toEqual(['tabs'])
   })
 
   it('exports carry width via tailwind default-width variables, not classes', async () => {
@@ -458,7 +452,7 @@ describe('style colors', () => {
   it('border none counts as a real style choice', async () => {
     const { isDefaultStyle } = await import('../../docs/app/utils/theme-engine')
     expect(isDefaultStyle({})).toBe(true)
-    expect(isDefaultStyle({ shadow: 'none', border: 'default' })).toBe(true)
+    expect(isDefaultStyle({ border: 'default' })).toBe(true)
     expect(isDefaultStyle({ border: 'none' })).toBe(false)
     expect(isDefaultStyle({ border: 'custom' })).toBe(false)
   })
@@ -503,8 +497,8 @@ describe('style colors', () => {
     expect(none.slideover!.slots!.content).toBe('sm:shadow-none')
 
     const colored = styleComponents({ borderColor: 'inverted' })
-    expect(colored.tooltip!.slots!.content).toBe('ring-(--ui-frame-color)')
-    expect(colored.modal!.compoundVariants![0]).toEqual({ fullscreen: false, class: { content: 'ring-(--ui-frame-color)' } })
+    expect(colored.tooltip!.slots!.content).toBe('ring-(--ui-border-color)')
+    expect(colored.modal!.compoundVariants![0]).toEqual({ fullscreen: false, class: { content: 'ring-(--ui-border-color)' } })
   })
 
   it('the whole input family follows the inputs group', async () => {
@@ -528,11 +522,11 @@ describe('style colors', () => {
 
     // outline/subtle rings ARE the color signal (a subtle primary button
     // keeps its primary border) — only neutral rings repaint
-    expect(compounds).toContainEqual({ color: ['neutral'], variant: 'outline', class: 'ring-(--ui-frame-color)' })
-    expect(compounds).toContainEqual({ color: ['neutral'], variant: 'subtle', class: 'ring-(--ui-frame-color)' })
+    expect(compounds).toContainEqual({ color: ['neutral'], variant: 'outline', class: 'ring-(--ui-border-color)' })
+    expect(compounds).toContainEqual({ color: ['neutral'], variant: 'subtle', class: 'ring-(--ui-border-color)' })
     // frames around solid/soft surfaces repaint for every color
-    expect(compounds).toContainEqual({ variant: 'solid', class: 'ring-(--ui-frame-color)' })
-    expect(compounds).toContainEqual({ variant: 'soft', class: 'ring-(--ui-frame-color)' })
+    expect(compounds).toContainEqual({ variant: 'solid', class: 'ring-(--ui-border-color)' })
+    expect(compounds).toContainEqual({ variant: 'soft', class: 'ring-(--ui-border-color)' })
   })
 
   it('borderColor appends recolor compounds after frame ones', async () => {
@@ -540,7 +534,7 @@ describe('style colors', () => {
     const compounds = styleComponents({ border: 'custom', frame: true, borderColor: 'black' }).button!.compoundVariants!
 
     const frameIndex = compounds.findIndex(entry => entry.class === 'ring ring-inset ring-(--ui-border-accented)')
-    const colorIndex = compounds.findIndex(entry => entry.class === 'ring-(--ui-frame-color)')
+    const colorIndex = compounds.findIndex(entry => entry.class === 'ring-(--ui-border-color)')
     expect(frameIndex).toBeGreaterThanOrEqual(0)
     expect(colorIndex).toBeGreaterThan(frameIndex)
   })
@@ -550,8 +544,8 @@ describe('style colors', () => {
 
     expect(styleTokens({})).toEqual({ light: {}, dark: {} })
     expect(styleTokens({ borderColor: 'inverted', shadowColor: 'black' })).toEqual({
-      light: { '--ui-frame-color': 'var(--ui-color-neutral-950)', '--ui-shadow-color': 'black' },
-      dark: { '--ui-frame-color': 'white', '--ui-shadow-color': 'black' }
+      light: { '--ui-border-color': 'var(--ui-color-neutral-950)', '--ui-shadow-color': 'black' },
+      dark: { '--ui-border-color': 'white', '--ui-shadow-color': 'black' }
     })
   })
 
@@ -592,8 +586,8 @@ describe('style colors', () => {
     })
     // primary-shade modes reroute the frame/shadow colors through the primary ramp
     expect(styleTokens({ borderColor: 'primary-shade', borderShade: { light: 700, dark: 300 } })).toEqual({
-      light: { '--ui-frame-color': 'var(--ui-color-primary-700)' },
-      dark: { '--ui-frame-color': 'var(--ui-color-primary-300)' }
+      light: { '--ui-border-color': 'var(--ui-color-primary-700)' },
+      dark: { '--ui-border-color': 'var(--ui-color-primary-300)' }
     })
     expect(styleTokens({ shadowColor: 'primary-shade' }).light['--ui-shadow-color']).toBe('var(--ui-color-primary-950)')
   })
@@ -691,7 +685,7 @@ describe('style colors', () => {
   it('emits hard-shadow geometry variables and keeps defaultVariants replace semantics', async () => {
     const { styleTokens, mergeUi } = await import('../../docs/app/utils/theme-engine')
 
-    const tokens = styleTokens({ shadow: 'hard', shadowGeometry: { x: 6, blur: 4 } })
+    const tokens = styleTokens({ shadow: 'custom', shadowGeometry: { x: 6, blur: 4 } })
     expect(tokens.light['--ui-shadow-offset-x']).toBe('6px')
     expect(tokens.light['--ui-shadow-offset-y']).toBe('3px')
     expect(tokens.light['--ui-shadow-blur']).toBe('4px')
@@ -710,17 +704,17 @@ describe('style colors', () => {
     const { styleTokens } = await import('../../docs/app/utils/theme-engine')
 
     expect(styleTokens({ borderColor: 'shade', borderShade: { light: 700, dark: 100 } })).toEqual({
-      light: { '--ui-frame-color': 'var(--ui-color-neutral-700)' },
-      dark: { '--ui-frame-color': 'var(--ui-color-neutral-100)' }
+      light: { '--ui-border-color': 'var(--ui-color-neutral-700)' },
+      dark: { '--ui-border-color': 'var(--ui-color-neutral-100)' }
     })
-    expect(styleTokens({ borderColor: 'shade' }).dark['--ui-frame-color']).toBe('var(--ui-color-neutral-200)')
+    expect(styleTokens({ borderColor: 'shade' }).dark['--ui-border-color']).toBe('var(--ui-color-neutral-200)')
   })
 
   it('generateCSS emits style color variables', async () => {
     const { generateCSS } = await import('../../docs/app/utils/theme-engine')
-    const css = generateCSS({ version: 1, style: { shadow: 'hard', border: 'frame', borderColor: 'inverted' } })
+    const css = generateCSS({ version: 1, style: { shadow: 'custom', border: 'custom', frame: true, borderColor: 'inverted' } })
 
-    expect(css).toContain('--ui-frame-color: var(--ui-color-neutral-950);')
+    expect(css).toContain('--ui-border-color: var(--ui-color-neutral-950);')
     expect(css).toContain('--ui-shadow-color: var(--ui-color-neutral-950);')
     expect(css).toContain('--ui-shadow-color: black;')
   })
diff --git a/test/utils/theme-import.spec.ts b/test/utils/theme-import.spec.ts
index 38e5ddfea3..94c8b8f574 100644
--- a/test/utils/theme-import.spec.ts
+++ b/test/utils/theme-import.spec.ts
@@ -70,7 +70,7 @@ describe('importTheme', () => {
     const original: ThemeDoc = {
       version: 1,
       style: {
-        shadow: 'hard',
+        shadow: 'custom',
         shadowColor: 'shade',
         // literal ladder ends mixed with a ramp stop (NOT the stock
         // 950/black pair, which the importer rightly reads as no-choice)
@@ -160,11 +160,11 @@ describe('importTheme', () => {
     const { doc, skipped } = importTheme({
       css: [
         ':root, .light {',
-        '  --ui-frame-color: #ff0000;',
+        '  --ui-border-color: #ff0000;',
         '}',
         '',
         '.dark {',
-        '  --ui-frame-color: #ff0000;',
+        '  --ui-border-color: #ff0000;',
         '}'
       ].join('\n')
     })
@@ -173,8 +173,8 @@ describe('importTheme', () => {
     // but it must survive somewhere, not silently vanish.
     expect(skipped).toEqual([])
     expect(doc.style?.borderColor).toBeUndefined()
-    expect(doc.tokens?.light?.['--ui-frame-color']).toBe('#ff0000')
-    expect(doc.tokens?.dark?.['--ui-frame-color']).toBe('#ff0000')
+    expect(doc.tokens?.light?.['--ui-border-color']).toBe('#ff0000')
+    expect(doc.tokens?.dark?.['--ui-border-color']).toBe('#ff0000')
   })
 
   it('round-trips base weight and heading typography', () => {

From b6a25be8d20e0fda328d4503e627284c1cb47937 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Wed, 29 Jul 2026 21:37:13 +0200
Subject: [PATCH 171/185] test(theme-studio): drop legacy shadow/border values
 from specs

vue-tsc (which CI runs over test/, unlike nuxi typecheck) caught the
literals the vocabulary removal left behind.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 test/utils/theme-engine.spec.ts | 6 +++---
 test/utils/theme-import.spec.ts | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index edebd56373..348c074c12 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -338,7 +338,7 @@ describe('styleComponents', () => {
   it('returns nothing for the default treatment', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
     expect(styleComponents({})).toEqual({})
-    expect(styleComponents({ shadow: 'none', border: 'default' })).toEqual({})
+    expect(styleComponents({ border: 'default' })).toEqual({})
   })
 
   it('inner shadow rides its own inset utilities on the same surfaces', async () => {
@@ -518,7 +518,7 @@ describe('style colors', () => {
 
   it('border recoloring spares semantic outline rings but frames every solid', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
-    const compounds = styleComponents({ border: 'frame', borderColor: 'primary' }).button!.compoundVariants!
+    const compounds = styleComponents({ border: 'custom', frame: true, borderColor: 'primary' }).button!.compoundVariants!
 
     // outline/subtle rings ARE the color signal (a subtle primary button
     // keeps its primary border) — only neutral rings repaint
@@ -733,6 +733,6 @@ describe('style colors', () => {
 
     // None flattens the ramp; Inherit leaves Tailwind's native shadows alone.
     expect(generateCSS({ version: 1, style: { shadow: 'flat' } })).toContain('--shadow-lg: 0 0 transparent;')
-    expect(generateCSS({ version: 1, style: { shadow: 'none' } })).not.toContain('--shadow-lg:')
+    expect(generateCSS({ version: 1, style: {} })).not.toContain('--shadow-lg:')
   })
 })
diff --git a/test/utils/theme-import.spec.ts b/test/utils/theme-import.spec.ts
index 94c8b8f574..954b84e643 100644
--- a/test/utils/theme-import.spec.ts
+++ b/test/utils/theme-import.spec.ts
@@ -51,7 +51,7 @@ describe('importTheme', () => {
       expect(imported.fontSize).toBe(original.fontSize)
       expect(imported.spacing).toBe(original.spacing)
       expect(!!imported.blackAsPrimary).toBe(!!original.blackAsPrimary)
-      expect(imported.style?.shadow ?? 'none').toBe(original.style?.shadow ?? 'none')
+      expect(imported.style?.shadow).toBe(original.style?.shadow)
       expect(imported.style?.border ?? 'default').toBe(original.style?.border ?? 'default')
     })
 

From b770a3401dbe6e4b3037912d1eb1f5d33efc4812 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Wed, 29 Jul 2026 22:37:46 +0200
Subject: [PATCH 172/185] refactor(theme-studio): keyboard-operable curves,
 lazy previews, drop dead code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The curve editor was pointer-only — its four handles are now focusable
role=slider elements: arrows nudge, shift takes a 10x step, home/end jump
to the window edges, and a run of keypresses commits once like a drag does.

Also: the nine non-default preview views load as async chunks instead of
bundling ~3.5k lines into the /theme route; the shade-slider logic that was
duplicated verbatim across ColorSection and TokenShades moves to
useTokenShades(); the theme-studio-dragging class and its timeout are gone
(no CSS ever defined it); and the color-parse test asserts idempotence
rather than byte-equality with tailwind's palette, which a patch bump breaks.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../theme-studio/ThemeStudioColorSection.vue  |  61 +---------
 .../theme-studio/ThemeStudioCurveEditor.vue   | 106 +++++++++++++++++-
 .../theme-studio/ThemeStudioPaletteEditor.vue |  18 +--
 .../theme-studio/ThemeStudioTokenShades.vue   |  62 +---------
 docs/app/composables/useTokenShades.ts        |  68 +++++++++++
 docs/app/pages/theme.vue                      |  18 +--
 test/utils/theme-color-parse.spec.ts          |  21 +++-
 7 files changed, 208 insertions(+), 146 deletions(-)
 create mode 100644 docs/app/composables/useTokenShades.ts

diff --git a/docs/app/components/theme-studio/ThemeStudioColorSection.vue b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
index 154c5496ae..33e42a9898 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { TOKEN_SHADE_TARGETS, SHADE_LADDER, SHADE_LADDERS, storedStopStep, canonicalTokenShades } from '../../utils/theme-engine'
-import type { ColorAlias, SectionKey, ShadeStop } from '../../utils/theme-engine'
+import type { ColorAlias, SectionKey } from '../../utils/theme-engine'
 
 /**
  * One color alias in the Colors panel: a section header carrying the edit
@@ -17,67 +16,13 @@ const props = defineProps<{
   sectionKey?: SectionKey
 }>()
 
-const { style, setStyle, rampChip, baselineDoc, isCustomPalette, paletteParams } = useThemeStudio()
-
-/** The active preset's own shade choices — what a row reset restores. */
-const baselineShades = computed(() => canonicalTokenShades(baselineDoc.value))
-
-// A custom palette's tokens can pick every stop its density emits — the
-// sliders (and their model mapping) span that ladder, up to 91 stops. Stock
-// ramps only define the standard 11, so they stay on the short ladder.
-const shadeLadder = computed<readonly ShadeStop[]>(() => (isCustomPalette(props.alias)
-  ? SHADE_LADDERS[storedStopStep(paletteParams.value[props.alias])]
-  : SHADE_LADDER))
+const { rampChip } = useThemeStudio()
+const { shadeLadder, sections } = useTokenShades(props.alias)
 
 const title = computed(() => props.label ?? capitalize(props.alias))
 
 const paletteEditor = ref(false)
 const shadeEditor = ref(false)
-
-// Only the touched mode is written, so an untouched mode never becomes an
-// override. Reset restores the BASELINE preset's shade, or deletes the entry
-// when the preset made no choice — a token's real default may not sit on the
-// ramp at all (--ui-bg is literally `white`).
-function tokenShadeControl(token: string, defaults: { light: ShadeStop, dark: ShadeStop }, target: 'light' | 'dark') {
-  const model = computed({
-    get: () => {
-      const value = style.value.tokenShades?.[token]?.[target] ?? defaults[target]
-      // a stop coarsened off the ladder reads indexOf -1 — clamp so the
-      // slider stays grabbable
-      return Math.max(0, shadeLadder.value.indexOf(value as ShadeStop))
-    },
-    set: (index: number) => {
-      setStyle({
-        tokenShades: {
-          ...style.value.tokenShades,
-          [token]: { ...style.value.tokenShades?.[token], [target]: shadeLadder.value[index]! }
-        }
-      })
-    }
-  })
-  const baseline = computed(() => baselineShades.value[token]?.[target])
-  const dirty = computed(() => style.value.tokenShades?.[token]?.[target] !== baseline.value)
-  function reset() {
-    const entry: { light?: ShadeStop, dark?: ShadeStop } = { ...style.value.tokenShades?.[token] }
-    if (baseline.value !== undefined) entry[target] = baseline.value
-    else Reflect.deleteProperty(entry, target)
-    const tokenShades = { ...style.value.tokenShades }
-    if (Object.keys(entry).length) tokenShades[token] = entry
-    else Reflect.deleteProperty(tokenShades, token)
-    setStyle({ tokenShades })
-  }
-  return { model, dirty, reset }
-}
-
-const sections = TOKEN_SHADE_TARGETS
-  .filter(target => props.alias === 'neutral' ? target.ramp === 'neutral' : target.token === `--ui-${props.alias}`)
-  .map(target => ({
-    ...target,
-    sliders: {
-      light: tokenShadeControl(target.token, target.defaults, 'light'),
-      dark: tokenShadeControl(target.token, target.defaults, 'dark')
-    }
-  }))
 </script>
 
 <template>
diff --git a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
index 3adaa78e1f..e58434fce9 100644
--- a/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioCurveEditor.vue
@@ -3,6 +3,8 @@ import { sampleCurve, SHADES, shadeX, parseColor, oklchToRgb } from '../../utils
 import type { ChannelCurve } from '../../utils/theme-engine'
 
 const props = defineProps<{
+  /** Channel name, for the handles' accessible labels. */
+  label: string
   /** Display window for the channel value axis */
   yMin: number
   yMax: number
@@ -218,11 +220,91 @@ function onPointerUp(event: PointerEvent) {
   }
 }
 
+type Handle = 'y0' | 'p1' | 'p2' | 'y1'
+
+const keyEditing = ref(false)
+let keyEndTimeout: ReturnType<typeof setTimeout> | undefined
+
+// A run of keypresses is one edit: dragEnd settles after a pause so the
+// parent commits once, as it does for a pointer drag.
+function beginKeyEdit() {
+  if (!keyEditing.value) {
+    keyEditing.value = true
+    emit('dragStart')
+  }
+  clearTimeout(keyEndTimeout)
+  keyEndTimeout = setTimeout(() => {
+    keyEditing.value = false
+    emit('dragEnd')
+  }, 300)
+}
+
+function nudge(handle: Handle, axis: 'x' | 'y', direction: number, coarse: boolean) {
+  const c = curve.value
+  if (axis === 'y') {
+    const step = (props.yMax - props.yMin) / (coarse ? 10 : 100) * direction
+    const clamp = (value: number) => Math.min(props.yMax, Math.max(props.yMin, value))
+    // endpoints carry their control handle, matching the pointer drag
+    if (handle === 'y0') curve.value = { ...c, y0: clamp(c.y0 + step), p1y: clamp(c.p1y + step) }
+    else if (handle === 'y1') curve.value = { ...c, y1: clamp(c.y1 + step), p2y: clamp(c.p2y + step) }
+    else if (handle === 'p1') curve.value = { ...c, p1y: clamp(c.p1y + step) }
+    else curve.value = { ...c, p2y: clamp(c.p2y + step) }
+    return
+  }
+  const step = (coarse ? 0.1 : 0.01) * direction
+  const clamp = (value: number) => Math.min(1, Math.max(0, value))
+  if (handle === 'p1') curve.value = { ...c, p1x: clamp(c.p1x + step) }
+  else if (handle === 'p2') curve.value = { ...c, p2x: clamp(c.p2x + step) }
+}
+
+function jump(handle: Handle, to: 'min' | 'max') {
+  const c = curve.value
+  const value = to === 'min' ? props.yMin : props.yMax
+  if (handle === 'y0') curve.value = { ...c, y0: value }
+  else if (handle === 'y1') curve.value = { ...c, y1: value }
+  else if (handle === 'p1') curve.value = { ...c, p1y: value }
+  else curve.value = { ...c, p2y: value }
+}
+
+function onKeydown(handle: Handle, event: KeyboardEvent) {
+  // a pin owns its endpoint — same lock the pointer path applies
+  if ((handle === 'y0' && startPinned.value) || (handle === 'y1' && endPinned.value)) return
+
+  const steps: Record<string, () => void> = {
+    ArrowUp: () => nudge(handle, 'y', 1, event.shiftKey),
+    ArrowDown: () => nudge(handle, 'y', -1, event.shiftKey),
+    ArrowRight: () => nudge(handle, 'x', 1, event.shiftKey),
+    ArrowLeft: () => nudge(handle, 'x', -1, event.shiftKey),
+    Home: () => jump(handle, 'min'),
+    End: () => jump(handle, 'max')
+  }
+  const step = steps[event.key]
+  if (!step) return
+
+  step()
+  event.preventDefault()
+  beginKeyEdit()
+}
+
+/** Rounded for `aria-valuenow` — hue reads in degrees, the rest need decimals. */
+function readout(value: number) {
+  return props.yMax - props.yMin > 10 ? Math.round(value) : Number(value.toFixed(3))
+}
+
+const handles = computed(() => [
+  { id: 'y0' as const, label: `${props.label} start`, cx: toX(0), cy: toHandleY(startY.value), value: startY.value, locked: startPinned.value },
+  { id: 'p1' as const, label: `${props.label} control point 1`, cx: toX(curve.value.p1x), cy: toHandleY(curve.value.p1y), value: curve.value.p1y, locked: false },
+  { id: 'p2' as const, label: `${props.label} control point 2`, cx: toX(curve.value.p2x), cy: toHandleY(curve.value.p2y), value: curve.value.p2y, locked: false },
+  { id: 'y1' as const, label: `${props.label} end`, cx: toX(1), cy: toHandleY(endY.value), value: endY.value, locked: endPinned.value }
+])
+
 // Closing the fold mid-drag unmounts the SVG without a pointerup — emit dragEnd
 // so the parent isn't left with isDragging and stranded preview vars.
 onUnmounted(() => {
-  if (dragging.value) {
+  clearTimeout(keyEndTimeout)
+  if (dragging.value || keyEditing.value) {
     dragging.value = null
+    keyEditing.value = false
     emit('dragEnd')
   }
 })
@@ -312,6 +394,28 @@ onUnmounted(() => {
         class="stroke-(--ui-text-highlighted)"
         stroke-width="1.5"
       />
+
+      <!-- Focus layer over the decorative handles. Transparent fill still
+           hit-tests (`none` would not), so drags keep bubbling to the svg. -->
+      <circle
+        v-for="handle in handles"
+        :key="handle.id"
+        :cx="handle.cx"
+        :cy="handle.cy"
+        r="6"
+        fill="transparent"
+        stroke="transparent"
+        stroke-width="1.5"
+        :tabindex="handle.locked ? -1 : 0"
+        role="slider"
+        :aria-label="handle.label"
+        :aria-valuemin="yMin"
+        :aria-valuemax="yMax"
+        :aria-valuenow="readout(handle.value)"
+        :aria-disabled="handle.locked || undefined"
+        class="cursor-grab focus:outline-none focus-visible:stroke-(--ui-primary)"
+        @keydown="onKeydown(handle.id, $event)"
+      />
     </svg>
   </div>
 </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
index 5fcb5b42d1..70ee2f8441 100644
--- a/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPaletteEditor.vue
@@ -376,10 +376,6 @@ function seed(values: PaletteCurveParams) {
   windows.value.hue = hueWindow(next.hue)
 }
 
-// While dragging, a global class enables short colour transitions so the page
-// glides between throttle ticks.
-let dragEndTimeout: ReturnType<typeof setTimeout> | undefined
-
 function onDragStart() {
   // Editing a curve commits the lens (look unchanged, sliders reset) so a
   // later modifier edit can't throw the drag away.
@@ -389,14 +385,9 @@ function onDragStart() {
     effectAmount.value = 100
   }
   isDragging.value = true
-  clearTimeout(dragEndTimeout)
-  document.documentElement.classList.add('theme-studio-dragging')
 }
 
 function onDragEnd() {
-  dragEndTimeout = setTimeout(() => {
-    document.documentElement.classList.remove('theme-studio-dragging')
-  }, 200)
   isDragging.value = false
   // Land once on the reactive path — a pending trailing throttle can't be
   // relied on to fire after release; applyReactive clears the inline preview.
@@ -409,12 +400,8 @@ function onDragEnd() {
 }
 
 onUnmounted(() => {
-  clearTimeout(dragEndTimeout)
-  if (import.meta.client) {
-    document.documentElement.classList.remove('theme-studio-dragging')
-    // the fold can unmount mid-drag — don't strand inline preview vars
-    clearCssomPreview()
-  }
+  // the fold can unmount mid-drag — don't strand inline preview vars
+  if (import.meta.client) clearCssomPreview()
 })
 
 /** Fit curves from whatever palette the alias currently shows. */
@@ -509,6 +496,7 @@ function resetEffects() {
         <div>
           <ThemeStudioCurveEditor
             v-model="params[tab]"
+            :label="tabs.find(({ value }) => value === tab)!.label"
             :y-min="windows[tab].min"
             :y-max="windows[tab].max"
             :stop-colors="stopColors"
diff --git a/docs/app/components/theme-studio/ThemeStudioTokenShades.vue b/docs/app/components/theme-studio/ThemeStudioTokenShades.vue
index 09e5e85370..2ed3018ca8 100644
--- a/docs/app/components/theme-studio/ThemeStudioTokenShades.vue
+++ b/docs/app/components/theme-studio/ThemeStudioTokenShades.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { TOKEN_SHADE_TARGETS, TOKEN_GROUPS, SHADE_LADDER, SHADE_LADDERS, storedStopStep, canonicalTokenShades } from '../../utils/theme-engine'
-import type { ColorAlias, TokenGroup, ShadeStop } from '../../utils/theme-engine'
+import { TOKEN_GROUPS } from '../../utils/theme-engine'
+import type { ColorAlias, TokenGroup } from '../../utils/theme-engine'
 
 /**
  * Per-mode shade sliders for the semantic tokens of one ramp, grouped and
@@ -14,62 +14,8 @@ const props = defineProps<{
   groups?: TokenGroup[]
 }>()
 
-const { style, setStyle, rampChip, baselineDoc, isCustomPalette, paletteParams } = useThemeStudio()
-
-/** The active preset's own shade choices — what a row reset restores. */
-const baselineShades = computed(() => canonicalTokenShades(baselineDoc.value))
-
-// A custom palette's tokens can pick every stop its density emits — the
-// sliders (and their model mapping) span that ladder, up to 91 stops. Stock
-// ramps only define the standard 11, so they stay on the short ladder.
-const shadeLadder = computed<readonly ShadeStop[]>(() => (isCustomPalette(props.alias)
-  ? SHADE_LADDERS[storedStopStep(paletteParams.value[props.alias])]
-  : SHADE_LADDER))
-
-// Only the touched mode is written, so an untouched mode never becomes an
-// override. Reset restores the BASELINE preset's shade, or deletes the entry
-// when the preset made no choice — a token's real default may not sit on the
-// ramp at all (--ui-bg is literally `white`).
-function tokenShadeControl(token: string, defaults: { light: ShadeStop, dark: ShadeStop }, target: 'light' | 'dark') {
-  const model = computed({
-    get: () => {
-      const value = style.value.tokenShades?.[token]?.[target] ?? defaults[target]
-      // a stop coarsened off the ladder reads indexOf -1 — clamp so the
-      // slider stays grabbable
-      return Math.max(0, shadeLadder.value.indexOf(value as ShadeStop))
-    },
-    set: (index: number) => {
-      setStyle({
-        tokenShades: {
-          ...style.value.tokenShades,
-          [token]: { ...style.value.tokenShades?.[token], [target]: shadeLadder.value[index]! }
-        }
-      })
-    }
-  })
-  const baseline = computed(() => baselineShades.value[token]?.[target])
-  const dirty = computed(() => style.value.tokenShades?.[token]?.[target] !== baseline.value)
-  function reset() {
-    const entry: { light?: ShadeStop, dark?: ShadeStop } = { ...style.value.tokenShades?.[token] }
-    if (baseline.value !== undefined) entry[target] = baseline.value
-    else Reflect.deleteProperty(entry, target)
-    const tokenShades = { ...style.value.tokenShades }
-    if (Object.keys(entry).length) tokenShades[token] = entry
-    else Reflect.deleteProperty(tokenShades, token)
-    setStyle({ tokenShades })
-  }
-  return { model, dirty, reset }
-}
-
-const sections = TOKEN_SHADE_TARGETS
-  .filter(target => props.alias === 'neutral' ? target.ramp === 'neutral' : target.token === `--ui-${props.alias}`)
-  .map(target => ({
-    ...target,
-    sliders: {
-      light: tokenShadeControl(target.token, target.defaults, 'light'),
-      dark: tokenShadeControl(target.token, target.defaults, 'dark')
-    }
-  }))
+const { rampChip } = useThemeStudio()
+const { shadeLadder, sections } = useTokenShades(props.alias)
 
 // Groups fold individually — all closed by default so the panel opens compact.
 const tokenGroups = TOKEN_GROUPS
diff --git a/docs/app/composables/useTokenShades.ts b/docs/app/composables/useTokenShades.ts
new file mode 100644
index 0000000000..28b417dd2e
--- /dev/null
+++ b/docs/app/composables/useTokenShades.ts
@@ -0,0 +1,68 @@
+import { TOKEN_SHADE_TARGETS, SHADE_LADDER, SHADE_LADDERS, storedStopStep, canonicalTokenShades } from '../utils/theme-engine'
+import type { ColorAlias, ShadeStop } from '../utils/theme-engine'
+
+/**
+ * Per-mode shade sliders for the semantic tokens riding one ramp — the accent
+ * pair for a color alias, every neutral-ramped token for neutral. Shared by
+ * the Colors panel section and the folded token groups.
+ */
+export function useTokenShades(alias: ColorAlias) {
+  const { style, setStyle, baselineDoc, isCustomPalette, paletteParams } = useThemeStudio()
+
+  /** The active preset's own shade choices — what a row reset restores. */
+  const baselineShades = computed(() => canonicalTokenShades(baselineDoc.value))
+
+  // A custom palette's tokens can pick every stop its density emits — the
+  // sliders (and their model mapping) span that ladder, up to 91 stops. Stock
+  // ramps only define the standard 11, so they stay on the short ladder.
+  const shadeLadder = computed<readonly ShadeStop[]>(() => (isCustomPalette(alias)
+    ? SHADE_LADDERS[storedStopStep(paletteParams.value[alias])]
+    : SHADE_LADDER))
+
+  // Only the touched mode is written, so an untouched mode never becomes an
+  // override. Reset restores the BASELINE preset's shade, or deletes the entry
+  // when the preset made no choice — a token's real default may not sit on the
+  // ramp at all (--ui-bg is literally `white`).
+  function control(token: string, defaults: { light: ShadeStop, dark: ShadeStop }, target: 'light' | 'dark') {
+    const model = computed({
+      get: () => {
+        const value = style.value.tokenShades?.[token]?.[target] ?? defaults[target]
+        // a stop coarsened off the ladder reads indexOf -1 — clamp so the
+        // slider stays grabbable
+        return Math.max(0, shadeLadder.value.indexOf(value as ShadeStop))
+      },
+      set: (index: number) => {
+        setStyle({
+          tokenShades: {
+            ...style.value.tokenShades,
+            [token]: { ...style.value.tokenShades?.[token], [target]: shadeLadder.value[index]! }
+          }
+        })
+      }
+    })
+    const baseline = computed(() => baselineShades.value[token]?.[target])
+    const dirty = computed(() => style.value.tokenShades?.[token]?.[target] !== baseline.value)
+    function reset() {
+      const entry: { light?: ShadeStop, dark?: ShadeStop } = { ...style.value.tokenShades?.[token] }
+      if (baseline.value !== undefined) entry[target] = baseline.value
+      else Reflect.deleteProperty(entry, target)
+      const tokenShades = { ...style.value.tokenShades }
+      if (Object.keys(entry).length) tokenShades[token] = entry
+      else Reflect.deleteProperty(tokenShades, token)
+      setStyle({ tokenShades })
+    }
+    return { model, dirty, reset }
+  }
+
+  const sections = TOKEN_SHADE_TARGETS
+    .filter(target => alias === 'neutral' ? target.ramp === 'neutral' : target.token === `--ui-${alias}`)
+    .map(target => ({
+      ...target,
+      sliders: {
+        light: control(target.token, target.defaults, 'light'),
+        dark: control(target.token, target.defaults, 'dark')
+      }
+    }))
+
+  return { shadeLadder, sections }
+}
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index f5df882a89..0f17a8b221 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -159,15 +159,15 @@ const shareMode = ref<'import' | 'export'>('export')
              resolve icons at setup, so a pack swap remounts to re-resolve. -->
         <div :key="iconSet" class="flex-1 min-h-0 overflow-hidden [&>*]:[contain:paint]">
           <Playground v-if="view === 'grid'" />
-          <ThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
-          <ThemeStudioViewChat v-else-if="view === 'chat'" />
-          <ThemeStudioViewSaas v-else-if="view === 'saas'" />
-          <ThemeStudioViewLanding v-else-if="view === 'landing'" />
-          <ThemeStudioViewDocs v-else-if="view === 'docs'" />
-          <ThemeStudioViewPortfolio v-else-if="view === 'portfolio'" />
-          <ThemeStudioViewChangelog v-else-if="view === 'changelog'" />
-          <ThemeStudioViewEditor v-else-if="view === 'editor'" />
-          <ThemeStudioViewA11y v-else-if="view === 'a11y'" />
+          <LazyThemeStudioViewDashboard v-else-if="view === 'dashboard'" />
+          <LazyThemeStudioViewChat v-else-if="view === 'chat'" />
+          <LazyThemeStudioViewSaas v-else-if="view === 'saas'" />
+          <LazyThemeStudioViewLanding v-else-if="view === 'landing'" />
+          <LazyThemeStudioViewDocs v-else-if="view === 'docs'" />
+          <LazyThemeStudioViewPortfolio v-else-if="view === 'portfolio'" />
+          <LazyThemeStudioViewChangelog v-else-if="view === 'changelog'" />
+          <LazyThemeStudioViewEditor v-else-if="view === 'editor'" />
+          <LazyThemeStudioViewA11y v-else-if="view === 'a11y'" />
         </div>
 
         <!-- In fullscreen the toolbar floats over the bottom edge at
diff --git a/test/utils/theme-color-parse.spec.ts b/test/utils/theme-color-parse.spec.ts
index 8f6c90ff63..b21a1a9f69 100644
--- a/test/utils/theme-color-parse.spec.ts
+++ b/test/utils/theme-color-parse.spec.ts
@@ -8,11 +8,22 @@ describe('parseCssColor', () => {
     expect(parseCssColor(' #F00 ')).toBe('oklch(62.8% 0.258 29.234)')
   })
 
-  it('passes tailwind v4 oklch values through losslessly', () => {
-    // Tailwind's palette strings already use the canonical shape — the
-    // round trip must not clamp or reformat them (some exceed sRGB).
-    expect(parseCssColor(colors.blue[500])).toBe(colors.blue[500])
-    expect(parseCssColor(colors.slate[50])).toBe(colors.slate[50])
+  it('passes canonical oklch through losslessly, including out of sRGB', () => {
+    // wide-gamut values must survive unclamped — tailwind ships several
+    expect(parseCssColor('oklch(62.3% 0.214 259.815)')).toBe('oklch(62.3% 0.214 259.815)')
+    expect(parseCssColor('oklch(70% 0.35 150)')).toBe('oklch(70% 0.35 150)')
+  })
+
+  it('is idempotent over the real tailwind palette', () => {
+    // Idempotence, not equality with the vendor string: a tailwind bump that
+    // changes formatting (4.3.3 started emitting `none`) must not red CI.
+    for (const ramp of [colors.blue, colors.slate, colors.zinc]) {
+      for (const value of Object.values(ramp)) {
+        const once = parseCssColor(value)
+        expect(once, value).toBeDefined()
+        expect(parseCssColor(once!)).toBe(once)
+      }
+    }
   })
 
   it('normalizes fractional lightness to percentage', () => {

From ef6760a060af27d948c6df70216c6905afb8965f Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Wed, 29 Jul 2026 22:51:59 +0200
Subject: [PATCH 173/185] refactor(theme-studio): fold compound variants that
 select the same variants

Successive treatments (a frame's ring, then a border colour) emitted one
compound entry each for the same variant, so an exported app.config.ts
listed 'solid' and 'soft' twice and leaned on tailwind-merge to resolve
them at runtime. Folding them at composition time renders identically and
shrinks the exports: 8-bit 656 -> 592 lines, neo-brutalist 693 -> 629,
marshmallow 289 -> 229.

The two tests that pinned the old shape now assert the invariant (one
entry per selector, colour last so it wins the merge) instead of exact
class strings.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/app/utils/theme-engine/styles.ts | 48 +++++++++++++++++++++++++++
 test/utils/theme-engine.spec.ts       | 25 +++++++++-----
 2 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/docs/app/utils/theme-engine/styles.ts b/docs/app/utils/theme-engine/styles.ts
index b8161d5849..d2d0cabc82 100644
--- a/docs/app/utils/theme-engine/styles.ts
+++ b/docs/app/utils/theme-engine/styles.ts
@@ -589,9 +589,57 @@ export function styleComponents(style: StyleOptions): Fragments {
     }
   }
 
+  for (const fragment of Object.values(result)) {
+    if (fragment.compoundVariants) {
+      fragment.compoundVariants = collapseCompoundVariants(fragment.compoundVariants)
+    }
+  }
+
   return result
 }
 
+/** Concatenate two compound entries' classes, string or per-slot map. */
+function joinCompoundClass(a: unknown, b: unknown): unknown | undefined {
+  if (typeof a === 'string' && typeof b === 'string') return `${a} ${b}`
+  if (a && b && typeof a === 'object' && typeof b === 'object' && !Array.isArray(a) && !Array.isArray(b)) {
+    const merged: Record<string, string> = { ...a as Record<string, string> }
+    for (const [slot, classes] of Object.entries(b as Record<string, string>)) {
+      merged[slot] = merged[slot] ? `${merged[slot]} ${classes}` : classes
+    }
+    return merged
+  }
+  // a string meeting a slot map has no single right target — leave both entries
+  return undefined
+}
+
+/**
+ * Fold compound entries that select the same variants into one. Successive
+ * treatments (a frame's ring, then a border colour) target the same
+ * variant/slot, and tailwind-variants appends their classes in order — so
+ * one entry carrying both renders identically while halving what an export
+ * prints.
+ */
+function collapseCompoundVariants(entries: Array<Record<string, unknown>>): Array<Record<string, unknown>> {
+  const collapsed: Array<Record<string, unknown>> = []
+  const bySelector = new Map<string, Record<string, unknown>>()
+
+  for (const entry of entries) {
+    const { class: classes, ...selector } = entry
+    const key = JSON.stringify(Object.keys(selector).sort().map(name => [name, selector[name]]))
+    const existing = bySelector.get(key)
+    const joined = existing && joinCompoundClass(existing.class, classes)
+    if (joined === undefined) {
+      const copy = { ...entry }
+      bySelector.set(key, copy)
+      collapsed.push(copy)
+      continue
+    }
+    existing!.class = joined
+  }
+
+  return collapsed
+}
+
 /**
  * Merge two `ui.<component>` override fragments so both take effect: slot
  * class strings concatenate (extra last, winning the tailwind-merge),
diff --git a/test/utils/theme-engine.spec.ts b/test/utils/theme-engine.spec.ts
index 348c074c12..2be4466c6b 100644
--- a/test/utils/theme-engine.spec.ts
+++ b/test/utils/theme-engine.spec.ts
@@ -519,24 +519,31 @@ describe('style colors', () => {
   it('border recoloring spares semantic outline rings but frames every solid', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
     const compounds = styleComponents({ border: 'custom', frame: true, borderColor: 'primary' }).button!.compoundVariants!
+    const classesFor = (variant: string, colored: boolean) =>
+      compounds.find(entry => entry.variant === variant && !!entry.color === colored)?.class as string | undefined
 
     // outline/subtle rings ARE the color signal (a subtle primary button
     // keeps its primary border) — only neutral rings repaint
-    expect(compounds).toContainEqual({ color: ['neutral'], variant: 'outline', class: 'ring-(--ui-border-color)' })
-    expect(compounds).toContainEqual({ color: ['neutral'], variant: 'subtle', class: 'ring-(--ui-border-color)' })
+    expect(classesFor('outline', true)).toContain('ring-(--ui-border-color)')
+    expect(classesFor('subtle', true)).toContain('ring-(--ui-border-color)')
+    expect(classesFor('outline', false)).toBeUndefined()
     // frames around solid/soft surfaces repaint for every color
-    expect(compounds).toContainEqual({ variant: 'solid', class: 'ring-(--ui-border-color)' })
-    expect(compounds).toContainEqual({ variant: 'soft', class: 'ring-(--ui-border-color)' })
+    expect(classesFor('solid', false)).toContain('ring-(--ui-border-color)')
+    expect(classesFor('soft', false)).toContain('ring-(--ui-border-color)')
   })
 
-  it('borderColor appends recolor compounds after frame ones', async () => {
+  it('folds a frame and its recolor into one compound, colour last', async () => {
     const { styleComponents } = await import('../../docs/app/utils/theme-engine')
     const compounds = styleComponents({ border: 'custom', frame: true, borderColor: 'black' }).button!.compoundVariants!
 
-    const frameIndex = compounds.findIndex(entry => entry.class === 'ring ring-inset ring-(--ui-border-accented)')
-    const colorIndex = compounds.findIndex(entry => entry.class === 'ring-(--ui-border-color)')
-    expect(frameIndex).toBeGreaterThanOrEqual(0)
-    expect(colorIndex).toBeGreaterThan(frameIndex)
+    // one entry per selector, not one per treatment
+    const solid = compounds.filter(entry => entry.variant === 'solid' && !entry.color)
+    expect(solid).toHaveLength(1)
+
+    // the frame supplies the ring, the recolor overrides it — order wins the merge
+    const classes = solid[0]!.class as string
+    expect(classes).toContain('ring ring-inset')
+    expect(classes.indexOf('ring-(--ui-border-color)')).toBeGreaterThan(classes.indexOf('ring-(--ui-border-accented)'))
   })
 
   it('styleTokens maps color choices per mode and default contributes nothing', async () => {

From 21938e33f0abbecfdb4b6ecf76b48443a97b2133 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Thu, 30 Jul 2026 01:23:26 +0200
Subject: [PATCH 174/185] docs(blog): add a WIP theme studio article

Walks through the palette editor: why per-stop blending traded precision
against coherence, why curves in OKLCH fixed it, the non-destructive
modifiers and stop-density options on top, and pins for the colours that
aren't a taste decision. Closes on where the curve model might go next.

Flagged work in progress in the article itself - the copy is still being
worked and the four palette-editor screenshots are placeholders standing
in for short clips.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DBnE22R8HET4djqk1v5F41
---
 docs/content/blog/theme-studio.md             |  97 ++++++++++++++++++
 docs/public/assets/blog/custom-stops.png      | Bin 0 -> 94465 bytes
 .../assets/blog/theme-studio-screenshot.png   | Bin 0 -> 639950 bytes
 .../assets/blog/theme-studio/curve-drag.png   | Bin 0 -> 42255 bytes
 .../assets/blog/theme-studio/curve-field.png  | Bin 0 -> 55037 bytes
 .../assets/blog/theme-studio/modifiers.png    | Bin 0 -> 60976 bytes
 .../blog/theme-studio/pin-brand-colour.png    | Bin 0 -> 75833 bytes
 7 files changed, 97 insertions(+)
 create mode 100644 docs/content/blog/theme-studio.md
 create mode 100644 docs/public/assets/blog/custom-stops.png
 create mode 100644 docs/public/assets/blog/theme-studio-screenshot.png
 create mode 100644 docs/public/assets/blog/theme-studio/curve-drag.png
 create mode 100644 docs/public/assets/blog/theme-studio/curve-field.png
 create mode 100644 docs/public/assets/blog/theme-studio/modifiers.png
 create mode 100644 docs/public/assets/blog/theme-studio/pin-brand-colour.png

diff --git a/docs/content/blog/theme-studio.md b/docs/content/blog/theme-studio.md
new file mode 100644
index 0000000000..85f7ec0655
--- /dev/null
+++ b/docs/content/blog/theme-studio.md
@@ -0,0 +1,97 @@
+---
+title: 'Nuxt UI Theme Studio WIP'
+description: A live theme editor built into the Nuxt UI docs, and the curve-based palette editor at its heart.
+navigation: false
+image: /assets/blog/theme-studio-screenshot.png
+authors:
+  - name: Mike Newbon
+    avatar:
+      src: https://github.com/mikenewbon.png
+    to: https://github.com/mikenewbon
+date: 2026-07-28T10:00:00.000Z
+category: Article
+---
+
+::warning
+**Work in progress.** The writing and the screenshots here aren't final - the images are placeholders standing in for short clips, and the copy is still being worked on.
+::
+
+Nuxt UI now has a proper theme editor built into the docs, over at [/theme](/theme). Colours, type, icons, shadows, borders, spacing and component defaults, previewing live across ten layouts, exporting only the bits you actually changed.
+
+![The Theme Studio open over a dashboard, editing the neutral ramp's lightness curve](/assets/blog/theme-studio-screenshot.png){class="rounded-lg shadow-2xl ring ring-default"}
+
+It started as a much smaller complaint. Nuxt UI's dark mode is lovely and its light mode always felt a bit colourless to me - washed out where dark mode is rich, and not always contrasty enough to be comfortable. I wanted to fix my own light mode, which meant getting at the neutral ramp, which meant building something to get at it with. The palette editor is about the fourth answer to that.
+
+## The first attempt
+
+It worked the way most palette tools do. You place a few stops and it blends between them.
+
+I was quite pleased with it, and it did fix my light mode. The trouble starts when you want a more specific transition. The blend is whatever the tool decided it should be, so your only move is to drop another stop in and drag it somewhere better. Then there are two new gaps either side with the same problem, so you add more - and every stop you add leaves less of the ramp free to blend.
+
+![The first prototype: a stop every ten percent, a slider each, and a blend you had no say in](/assets/blog/custom-stops.png){class="rounded-lg ring ring-default"}
+
+It traded precision against coherence, a stop at a time. The more exactly I described a ramp, the less it behaved like one.
+
+## Curves
+
+I shouldn't have been editing the ends of a transition. I should have been editing its shape.
+
+So lightness, chroma and hue each get a curve - the sort you drag around in a devtools easing editor - sampled at eleven points in OKLCH. Muddy middle? Grab the middle of the curve. Move a handle and every stop moves with it, so there's no way left to express the mess I kept making.
+
+That it's OKLCH and not HSL is doing more work than it sounds. Equal steps in OKLCH look like equal steps, so the shape you draw is the ramp you get. The same curve in HSL gives you shouting yellows and muddy blues, and you go back to nudging individual stops to fix what the space broke.
+
+![The lightness curve for the primary ramp, with the eleven swatches it produces below it](/assets/blog/theme-studio/curve-drag.png){class="rounded-lg ring ring-default"}<!-- placeholder: swap for a gif of one handle being dragged, site restyling behind -->
+
+`fitPalette()` runs it backwards for ramps you already have - Tailwind's, a preset's, a few hexes out of a brand doc - and fits curves through them. Everything's editable, rather than sat there being looked at.
+
+The gradient behind the curve came to me halfway through a conversation with Benjamin, and it's my favourite bit of the whole thing. The plot draws the colour you'd get at every point in it, so the background is every option and the curve is just the line you took through them. You stop reading the graph and start aiming at the picture.
+
+![The hue curve sitting over its colour field - every hue you could pick, and the line taken through them](/assets/blog/theme-studio/curve-field.png){class="rounded-lg ring ring-default"}
+
+## Too fiddly
+
+Curves are great when you want precision. Most of the time you don't. You want it warmer, or a bit less punchy, or the whole thing hue-shifted a few degrees.
+
+So there are modifier sliders - lightness, contrast, saturation, hue - that layer over the curve rather than rewriting it. Push saturation to the top, drag it back, and you land exactly where you started. A taste pass never costs you the shape underneath.
+
+![The modifier sliders open under the curve: lightness, contrast, saturation and hue, with an overall amount](/assets/blog/theme-studio/modifiers.png){class="rounded-lg ring ring-default"}<!-- placeholder: swap for a gif of saturation pushed up and dragged back -->
+
+Eleven stops is just a convention too. If the gap between 100 and 200 is where your UI actually lives, drop the ramp to steps of 50, 25 or 10 and take up to ninety-one stops off the same curves. The curve doesn't change - you're only choosing how often to sample it.
+
+## They wouldn't let me fix the brand colour either
+
+There's one good reason to nail down a single stop: when it isn't a decision you get to make. Your brand blue is *that* blue, it lives at 500, and no curve is going to override it.
+
+So the first prototype's idea comes back round - anchoring was never the wrong instinct, only ruinous as the *only* control I had. Pins sit on top of the curves rather than instead of them: lock a stop and all three curves bend to go through it, and stay through it while you drag everything else about. Clicking a stop opens its readout in OKLCH, hex and rgb, all editable.
+
+![A stop's readout open on 500, showing the same colour as OKLCH, hex and rgb, all three editable](/assets/blog/theme-studio/pin-brand-colour.png){class="rounded-lg ring ring-default"}<!-- placeholder: swap for a gif of a brand hex being pasted and the curve bending to meet the pin -->
+
+## The rest of the theme
+
+Colour was the hard part, but it isn't the part people notice first.
+
+Type is wired straight into Google Fonts, so the picker loads each family as you scroll it - you choose by looking rather than by imagining. Headings get their own treatment separate from body text, and since Tailwind v4 exposes weights as live variables, remapping them reaches every component instead of only inherited text.
+
+Icons swap as a whole set, so you never end up half-changed.
+
+Then shadows, borders, radius, spacing density and per-component defaults - the things that separate two themes using identical colours.
+
+## Maybe in your own app, later
+
+For now the studio is a page on this site: you theme Nuxt UI here, export, and paste the result into your project.
+
+There's an obvious next step, though, which is running the same thing inside your own app - the whole editor while you're building it, or a curated version you hand your users so they can pick their own colours without you exposing your design system's internals. The engine already works that way; it doesn't much care whose theme it's editing. Whether that ships, and in what shape, is undecided. If it's something you'd use, say so - that's the sort of thing that decides it.
+
+## On palettes
+
+None of the individual pieces here are new. Perceptual colour spaces are standard now. [Leonardo](https://leonardocolor.io), [ColorBox](https://colorbox.io) and [Huetone](https://huetone.ardov.me) have generated ramps for years, and Material's HCT does contrast-first colour properly. Draggable curves are just an easing editor.
+
+What I haven't come across is the combination: curves you can edit *and* reverse-fit from a palette you already own, non-destructive taste sliders layered over them, and pins the curves bend through rather than break at - all previewing against real components instead of a row of swatches. That last part matters more than I expected: a ramp on its own tells you very little, but the same ramp behind a form, a table and a chart tells you straight away.
+
+Mostly I just like working this way. Editing a shape feels far more intuitive than maintaining eleven colours and hoping they still agree with each other, because the relationship between the stops is the thing you're actually adjusting. Whether that's the right model for everyone I genuinely don't know. It's made picking colours enjoyable, which it hadn't been before.
+
+## Have a go
+
+Fast enough to muck about with, exact enough to match a spec someone's handed you. That was the whole aim. Open [/theme](/theme), bend some curves about, and export whatever you end up with.
+
+If you make something good, or something gloriously horrible, I'd love to see it.
diff --git a/docs/public/assets/blog/custom-stops.png b/docs/public/assets/blog/custom-stops.png
new file mode 100644
index 0000000000000000000000000000000000000000..e706670a707dd722eb9390578aff453258769076
GIT binary patch
literal 94465
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

literal 0
HcmV?d00001

diff --git a/docs/public/assets/blog/theme-studio-screenshot.png b/docs/public/assets/blog/theme-studio-screenshot.png
new file mode 100644
index 0000000000000000000000000000000000000000..f8b7abd7487a08124a03a50f1ff8fb8ba60e1a90
GIT binary patch
literal 639950
zcmb5Wc|6o>A3uytM4}>XmUB9?(;<W~>ZI(lGqw_gu`{xct#V3ev1A=f_T6CYLqgfc
z(%20WW1AW4Scm7UQ=Pi+=lT8a=bv8YJJ<J`&-Gc~pXKVQj@E4!rt?fRG&C%#cmC3)
zp<xEo&@eDE9tEBhe*tsQ(6G^{{-vz%O}jMCP<PQ_{9t8bNpwE#ra)if`tN6+u|8vO
zVOT_l{r>m;TXN6XLAMzH4)VMUcDMm{G`8!5(W%`4%RNeX1P)psD_c{VKs}^%J6Gas
z{m7&-Yyfds)?>Ca-UII;Q8GNCpbGCKGOC`v!tmxuC+#eaN04meMXM7(KJxZ@1Y!60
zs0{!4#rJiulo+bo#;pJQO{))`!O<(BjW0N?CK-8yXy|_a=Y>D5%HO{}0#<zFw0iXK
zs+*cYG;?WQZRf;+S9xhq{j$N~et%d7o&5bjHVy)>g3kW-&(fRvzy`nhPM?$h_SqoF
z?b82Y{l7o`ZR^IKGrTmub`yarQ9o$C;z@s2@P8*I?KCgV$ZyLxXlUu#z(4-EQ$}Nb
z^T(%e&x5}(U%Bz~DlkoO+8<z=b)A~gmC{$Y|A+O!kKAdXx%Ah+ORX50*k}~!UF2@6
zSmiKZLHxS^f3N@N&7Vm*TSG?=W*zs#emHqZ=#vzhODg~F|KIC>I^{P~p48FM_S{4;
z(fr{3aS(0m|4sbgr14c#z$$<wpC2LrBq81)umtEV$NwaWEAQ!_JfK-;t8F{Z`HLI?
z4*w?DnELf#KZys-yG{3;?dO$GvJQ{1)*!i%CfxWBBmR%;zkc~jypi$y*1^At0+M{u
zKt0Y4?0Z&??m5TL`~TPaA7B1NiX>fXJm@<Mz<r>zJpa?_znjDZ5Mxlc?hECggctnw
z*cI;oStY(iy`Y)%KS}w1rtdV`A!q^l{3k8H8Z$sP;0XY0`hed_yXM;Z{QtiGaK*2F
z;>suB2;2*jK`WPn8hhBRqQ5ia$7a8-|4!6Tq)Y-kP>$FA_Rm*fUC>$1|0MkX>{r-0
zd1>T|ln<r&!)_U`oci(U`}6;>!+-7M9UWj#oZvLZ?<@b=1`zF>{QpAAaT{8?)Uft(
zXwv`x(|<j+6+Kw;7#o;(h3@z-I{rWDAU)gP^o&7~e+>QOcwbznReAJ-`~NTe{{HAE
zQNG{@(|B?-*8WSrDx1~ue?NWu>;E81cEByylrU%h@($R8sR#ByiNWe`=HpL+$bg7C
zr}&>7zj-4_`S+kkUdBhHgg+#YU$Hu|9&n<njZysj&Z*~V7k&*or+8^hnf{=E1vrN9
zD)B?Kfb|}cdFS{dyW^3ViCx<084de~&ma7D6o|J4lalWg<o!RDS1MNDj^`G3Zf5@R
z8lWvqOgjI1NVd~}(mhc=bGU$4mF_v{=ap>WR9iYGHT|Ib?8`~g%zm$g-Q|mJ$cg7F
z3R;KW<l-8uYeugGFe~zyq5V=W?fazf<}f^~BvlS9ZQr{23kzxJj<H!W{_{vg81PqR
zm!p3~?k-U<`6tWIi3ti}Ywp=wC{zf3=G<16JIbLVNL*FxRfK$H+m~)yg-g+&#YpE)
zE9m+2mitA|#lIHJ$2E(j5wD1R=jIPz^pCj&rytrz=F~45bv2QOdh470oIkcsubB8a
zE9ft@n~6~lxP?>>7d3WR!@qIyNC_OYRg@jI2;39(gSRKfufG|6wPbK8LJ@fe-;~q7
zwsXU2(7#joe6zMJ&-O^R@^5}nUGy1P8*{rrd<lpy_)d`Mf9eC^3{uA!j|GYGzjymj
zqR(3faUZHe#p&hXCu!Sf{{ry}^%EuL%SF9m4P6O}ZFtZ5dKo<W7FoP9k}o+{YxlLo
zAcN@*n&7{f=i<|#VJW})#?Hm3L&H=4Bn7`Rks49(TW3D&JS{RN*;;S*<eO)@X@2PM
zeqqTvBOA^5k*3Q}>7F0^RTTg}9flp4(BzThH}!hb1Q&D!lPmcE3gY#kqqW5dD|Jq|
zX&zt6%Z{iLjsau5p-CVIB%mMX*wtmkfA0|c>0f17@9aU{#Ih-<uWR(8Zeh<Vz}7og
zf_r?AR)0aNnm)rTWjO47%J}mKLxQtTre^%4N?!obk-XT%4RG_taaxt&Ux)`HcLkkd
z$(1vEV??H!ehNOHXK0ClFOAF`ACRuY85(=YLa5F8)x=e4_s1s(6w`6KqI*)-6=PDl
z+Lsuw<_4vl^YxlLSN1NUWAnOR?Akx%`M9+1#>b>?i2Tl2qe{Ly{xe1iPGIa|{3cm;
z_Q}MjAtLPGY#5AU>T&sT4uF?)q2L^k`%T#S^2|8T;Up-&)CV<N8!8BK9y<$xH^&6@
zpoAwM0|)w~4{qx5ZJjf*jxF;+ac)6hq}=Lt=vj$Lh55Rj|8I2nggsRcU=dglaNp|l
zuE+nCTk!13)a>uv15eO1ft18aWoS$9!82Wu`%cXxj<^k@vR>hc1;}pF;ZN)TmI{qX
zk@cm_ox4hSTpjC${UanbAN<zg{}U4!@&Y~=bVvW^;13XB_keci$)Rw1puu!a*a5DQ
z+TuDFbxyCLl9$BFRbOG#(Z8ipja!GWEr?I1Ncqmr4QD`mUOiT)N~&TnhomlIu^fk{
z(|RWL;rAnam-afK1>>-n1s5~^<7a{OU$O3vD4XffX?iF7IMu|ifQ<miUekTd>e@3{
zu~qJweWuch&Z~gl8!#XK<_p7+0m=FLLB%T`Sb>9rvLRIdLaZ$9cP`r9pso1@Q*<yc
z6I&$ys1UuQpwO}OcC-+-nU4~bvNv@SzX1c(@>1i8|FU&`UN*|7-hu3%*iLghW?Rv9
z20$6NpPWEYlE1Lf(w`Dd<+W1?zxrWY5)gOvK_SaQr*5u#do9b4=y2$!?qtzq{J{Iq
zj<M00Yh)drVe%wh+mT-Mb+pxjaTzJzlZ(~+@Qng0XDaAt6$Ga;1^3)2%*x|S?YC#H
zttC>82#KJy2rij{5tZ_qx@u%&XZ>>?Kz!`MUpAYSJjN3J=1ty0U!`dJs?3|%km7Af
z!!yWxD)gSK{PaI(0|0qX-qM7AwGDwwfJ&T8ZQwQxLeV9MCl^~I;B)sm1a1SuIW|{&
z_SH7|?W@Tbb?4guX0vmrt@$?v(uoP$H9J%D1*=-CF|yZ=O;(pHsHpE!DZbjy^BLe1
zn;ku^!s~U%KFRiCU2=*^7Bp@#DKNIW?M=t(`BQYqPkk5Kk5u6+QqIu;Kz@5tUQrCf
z-Ei2W?{rp7;Z1-scK2xmRzAP>>p+}7Z92Ew@yF(4%{ygJBn4cH%TA7w-fVxF&8cl6
zC4Y05p_dvB{)tm_uY-1Zr!Dq9BC4@@<KvaC-M>%tz2P{9ps)b|5Pb94U)akE`Flb=
zU%BNQD>$K3pDB50qg?cM|4pPj{i$;_$&&Ashk6&V=22ZDem1zf<7FJVfR1)uN)<Qr
zUv(kLpWWnhAJI6t2#wZIM%h2So}#bfuG5|Q^5W;sJ3fQxIYnD^Q73$?{?kJlgYnk-
zwI7<oc9w=#4Dgfz>>m!sJ}aWVMCZ7jLy+HV0VUm!lVjB~9ltzl-W|G<eF$JTPWPZx
zu>uPD>zxvtOYPOB`zTQYulzSN?CGRi=lX@y0)GG!|1Aa)3pd;Tt3^~_5B*ss_gXaQ
z?5@?ZIp)|Dura0vwM(Z$TQ+d|>SAb0t@*v^KCxnUB1#JO;K;aerZ*296EmhTP)||a
zHFdiK>3Z6f5M}mDO7%*thrBXx9X`JnzFTm*rhKbDv!Uyr^^<K;mqW&0V)_dp7`476
zvANfW5?RxLz31-d|4I3G_!>WcJwT|4>*rGb(f2UtvtKM+edyT)E(6s68Lt?-X@86G
z+L=6!y9VgmQFE|z(f)<lp0;bkjMA^&7}!M?8y+3wd}zE(p;NElPsvP4b`tG}ns%HP
zqY^~Xd==O43Wv&7PLpG5p(Ok~_kzVj$^w2ze8jU@iq)*|qU!}2squ?CtxjVnez9tB
zYB2p61IMQBp2y|K1Eo35n=V6l=u&~ynneUW_@oTH{(Kc%Fh@2|C&UM)ve<C7Mt=8$
zUm?^VszIf^SGMT-vlVQ#wGy3A7u7dK^Xzf=9-(LZaF|nAzUA4?&4!v-8hVm^9kb@g
z9K;Jf{1dKr?XY{B6G6Fv{Z-TLxVHq9e#XF5Yj4^cr6xP0iF0M2I(=e&DNe9}9VhjA
zN(0E_j7dpOM?pWAk-|f!;>)Lc6g)PyHgz_2H$P249!9~7yT(2G>x~p-INgt=CE6u<
zR>*?pq<(US)RT9z3;jxW>lQ}rxbU<1#kHM&OP5j<Rsro;Gx<53ICYy_aO4=5Ub5Oq
zpH#T?`$LnL3!XbSgES!x<2;YdxrE8`{Gxh*$3M?3P$HA!Fm}Cb<5sFNcE#<PHg-WT
z$vX5zZo2b4_Vz6fb$#6nYJ7RFIZ*%#+&oz{Y2Od!6e)UpMd6+)AI^6%$+H%IF#vMe
zeEYA<%Of!xhP+`kbZ`!x7x^Jbj;(^aSG#?;gz3<Al$46=vK=AuYm&5BWh?2t@plF)
zrX{oPXNqdmGi6MN-)S2DCiOBH1IT~dZ;q5n%B}WWJd!?MKcFyJKX`FD{{~E}>Mhug
zs#k!pS+3DiJAYVv0ZITF-#|sM5a^vTwS4rhd!iUsH(UPG2uZQI#;MS<4e6b3?l)ec
zSYkrknc1hXiC+wTTby|1Uc7UTMld!{FE3*5O;IjPyq^t7<a?s&dL`SHP-Cc$_2YWa
zR5Hp0umHqA#n)){b0U%IMaT61`pVF2C-OL@^mL?xAb+lg{bwneH@d_kHTAB`sX<V^
z>*?y|wU)_G^_HF*eQJ0WnSEJP^MOwJEM{M14*PfIj$}re8reEc35rXyoQJ<MEFM__
z0#l*!%bi@+ehK9dw<6<&Df!@9>2};&+lG#hV-~h`;?omup%sZ$MqV9j+JL9&sfOr{
z;6gF75tXO~>42;iY~-T5@FvmKb2(lpT$^##O8c3jilpIZ86pZJF)XlBUIV0fv?S+j
zJvZHcO0^$>oK_oGlU;+ZX;VCF$_d}J@Bn)>jU|<&aHL5YT{ZA$^UQhn$9HFtIze|B
z{TbIy8Uq#QW#v8P@5z;yBbo+dK%x}~i#H12?d>s(R}JL*QCF~mmGLNB8*N<+o8b^9
z$(qU?oqO;+z{ek9{^oD`Bt;gA{E}{&RQ}^0znbIW_J_tPb^32Q367raFXi)mqsgvB
zmaMmp+9A^Fx_l%n_N{^z6OO1Hea9Da18y_=JQoXt=03g6ZOM}ksNV0?-+|s}>U+GO
zH1AK9b@Y9H^gNh|>9tF3VtHUBSLC0*G-LYExc&iPDR(pzY<*qXVIO$p=PCEYPFr*@
zv*n<ISj|{8n+me(8VuYfD(RWyj2Gf%Z6!J1fJjnaZyv*nCqq-3OPeE*518k;cdhIm
zVvjr|OEFyKyvl!7#-BZS_F1ANf@HT^<zHrSmg^@Y-e6B9jxf%JK7C~xUfDjVSig1O
zWqB<Ux%DVUeTBQzdnRVd`Fim?cj8>tf?&&TY5-7Q{X?18*ULUX`q7_%9{nx`nqUiB
z_pe;4U>9J2QH>jbj07`~U7*P_c>bA;2c<k9r&IJ?M^x>km6m1CXWi!>WgTxF!A|7M
z*iZ0rg)i9WTLJufP{3H|Q~c+xK&|MgSCJgMl4(jXrr5}Z1%K+fa7uVGCl?fw4Aj_g
zJ{$$f30DiPeCkT5Jx*P%<a6ReN#dvL%v4{Lhon-E<Sugv+@c9?VB8|>_=X?@X!3>U
zv>?lr-_;d%i$LM>qGtyjni4upd^bvMFPZMT$21_D<3q(KN!6tK*&rmdv({Gi)a>8Y
z)%Te~ygb5q=bA7E>xZ!I2N+2T+BIIpi>{fp5RNVpx27Xex`OzZIf+8ygbK?%7QpSj
z=Q|1%J*w&U$q=)<`$yh!to$3r54TA$42ry@V;#H~qydsWm@a}Wb*^=n9BF94I8|?)
zQ559i<1(tx5oX%bm+wWOoGW&U=yZfNd#`0{Cp*WaWWfF+NOc&NKIwgiy^9>>nDi(7
zra1d&{e*NZ-rvlnuR;A;m?IpnFC(X|+~XiDmFr^^I#3_knxVwA<8gNm`)Hx%_5Sm}
zny_~#QTs``EX3PRWrc^ll`0Y8j2=VGRmS37V1axy0a+g)xsx;cpx}YKsQF_vp=B90
z6=Ox1k53Fm%w2my0X5Ox!UMCk3|vFm(z3^b^XT_D1=4Je7}c69KO6}`&zdZc_{C?%
z^4QLA7?!NhQ92dLHx0r67&TkS?BBD`SVIQJeq%Hhk<z^SHP85Naa49!9*^B&x@?*1
zMjuWyD<vhWC(^=yrA0AnRy%Mz+~uYdb+M>+XRKRCeg%mhkA?4ch@y{IOc`Cr+X$^L
znLc?$_mjxJ3U3v(dPIWbeXdpap6_Fdf%ZlQ*bd~CSAPQzGcYXnVvjCpK)NoeW?7Nc
zUbSA>$bPkRm&@E5@Tn`b{k_`}b()$94ot?8J45)>TLr0voPse!I5X%*KGB^Zz2ioe
z{d*_Jf1RLg)2k3w*_(8?!~<{*zANmwr*SXIwE%kq&}+~vAx5>x5F|Wgbz2>ie?5f>
zB)%v&LsvNMv;|&Z+Bu_?jo)S#Yxuz4X-0%!){fUD3Vyns+Dhlsgf%sp?P3*qBRdho
zdj(?i_VIM<z*fT5!6iC`R#o*$`e3B+?Cf)U(iaA0nO*R_5*_35ESkX|S?<ndHV})-
zXhVg>A6VbLiGxa|gN@>jKR|`}0IY&EeB`R%T9-^>_iS!<N*RBa*2a9O&)Uw|fst+J
zvQti>%!F?~mUz74v}NFQM8W8DBTFuaX7Yh|2GpdS7#Ln21kO0t10)<jYy_w|Y15g;
zOEXpK_hivY?DpwgpVK1>zNiu>9v_fpLKy0l?I^wo(9tO<Qg|^~Krs~rDOt)&`I+u+
z`^AUEqd*3>o<(#y8U5ww%MIfqDT!{0fvnSk+)NStOo(o!EQ8dwj#bJqG4znH;BYNf
zz<JJuyaHT{bY9AM)``x7qsgKlI<_WfvY|6Eh8ReZ3l2SWAjwXz3HCVPVy;M?T)mNt
z!S6)9nDtH5&*6!Q-KZGXCFDlMSYST;-kY;F3<wB#`kA7K;xt|?05yCtyx=tTEJMNv
zfAYiWWsl~rlN_*aJJQy%%<3;p<DL>2@@n0;<NsR$ymF0hQ(-yC++!Tx@ixD>en715
z%c<RAal}2PYYPJMOCK%~pCme$ZB7IRy2`bG%Sr$!^cUk5#vjZKZeSAFGNG-KvuwgL
zjp#QNs}h7u^a#Q)t|<xV&qO3VIJu#D#uQhRqB{6@5hun=e?S1zVkHQcU5H{u01lzN
zw$pHf_;ytDBOxyLrQou14}lyr>_#><uh9=M%AB%*IHPPnD$ZkXmdffcak8W<N%kT$
zUU5!ZwE!^7NTb5BW&QO`XmrJAkNtT2%~Sz2Q~CbnZGvD9%JGVazN|~W$J(=_0Y=I-
zq4=kd;9%u$CNc47?&Q5Y2P*Obm8|Q77dy29?BNu!%^E$MIqQw^>qX?Ah?6URrSv*;
z#A4Q1`$e98{v8~t9JCf^y0Eb+TG*cdyxevBq;2p@DEJ<&jLhCeH;-E$Djv5zK8%^I
z24fQ-a*`uL+CO>K)M%PEp!O-eynHFjI5)cR8e=>f@7v*AH-B0F^Be1>m$!Mi9&x*>
z{$T4NCUu~d`zLD!D}mA{p;8%EnohfkpM#SlE)FFsX@MN`HG)4@l<D}jyedkA&3k(~
z&0G-EBu4}|DtTVe)3E-iShHg~WFQFO&yRTy>a@7KneH1Iz7bW)if~`e8jdcIVMx(2
zXyr+|R1`bThP^RYsWY?NLA+$gLmx9H)RUJDv&&D_aoT<5>1;`-zw2J8hV}7me~@_H
zMlBPUJ2*$z4>cOU+0~J!?at4h*g?`ES}O8NmFwKiXF_OYi!K3yZN!gc8Vu@Sv7UkQ
zH|0yv7Sb2WTF=f#Cf-a?pPh}auAU*hNnfHSNg{r>P9O+9V-&%BW|F<#t+;6>9K(K*
zE4idkP59Pug44qZq9i3TT%0oB$1GlsM7lo<SWFBX;YMyhuRvGqE_Nc7CJ;W|vXpGh
zUJH5c7sve-31ot<J)@zca{kT0e>=E}>LS&D<5NnAYzBvu<n8lo3ivkn{G9=J`W0Bq
zu1*JRJ-ZOVOJ@rA$BHHi)Jnlovz?Flv!$O5^J9uJ+t>6)^K!0r&_)2@efOmU$NEL`
zjq+8GOWk4KN{OP{G@d+U<7yhM!eukN4Z@uJKKh~>{hj<2%#+xNK`kZSOZ!Jb`QXjz
zC+-VD#~vy2;_5Ta7o=eU9x0h;9>%l4D%Pt?&(H_Q`<+u_j6UV+@dqQF67=fBt6^8;
zI=ck>$I5ivdNNG~;Lol9!G+(--Hk6!4mrNobm|aQJLnH>x#Bh9guWlPW2Wf4E&vG_
zyM`Pvwq_ai%`aS9L+%!EQR>OV+k_PB#DJ~l;mTs<m8L9B;d-I=I-j*A9yHzoQ@g5G
zJNHVRI56sh27GQwIU;zV;;P4h$nLI^%f>v(kL1Sp*pl3^TV&}!dFV4NExpss{iqvW
zgX0fJ({F_{$>%+K|GgG~)OovJh{l)sk?IGFwy5L)B)9L@JwLJn^}hGZ(`xKk#I95A
zK`_G-+Q{r)+}^CjZZmTKK{00E_o-y8!uq>#@e!W=t=qNhXw1fRjq~Tf{Fc+g3Q#DI
z;r3f<J1~*9IquGQ$u>(H(pYr^&tUETRtTMoOWn$o@ugP(d7HRln>b77P5eXTM>H6B
z{}xp&aA!VycU-0V=+V#TXLcI@t5Tj|oGNBM=<vS6@fzOZdQVO4U~1tGGXPO)bZbH;
zp*Ylv-%il1hS`@g+WyCMNz+a;_m5}r7{#NvlEn2YzD(K85Nx++f?tK&r-tSpT~P1$
z<de!>kK;Ih$06TsBwB;%#lVp?eLgDXX6`gG%o!F_es_*mFK^tJ#}6>KON=%6_VNj6
zunx3FW>W%rLtWg$K^oR@;!WXoA=C_4umdQ)dV2O1Qtw&WriTVg^>aVL+d!3GjXo#z
zM-G359i$~U)keuRSF%wS%CXx@bgX-s?A0z<NeNTbze_bW&;_rb%TBfho|n2v5ET#1
zJ?Arrt!ypN`stOdrcF?b%n>s&6fDH0qLx%WityW>@#<s^w42y%Vs&hNevZ;ETs*{q
z!SrQ6mBF8tua()2gE*IxFM7R6_Mr@WO>4>w2W(D|jgSKsn8o%3pIu^oO!$|+@$oDx
zd~=jsyI9rMeL$NI=6Bcg*Sb+I{=1_MBA(NN?!H<pA&;4fP|Vij`4NJ-Yw)=5sFN4L
z{GjaEY5tLuZ5OQ%(U;!=b<?B!<Al%tW6q^H0QB-CyM}01O&zVB?v|%k?Qdl(4a;Ko
zD*~n=6JNoFVUc#lm4S^6zvYp|;zYW1%nT`U$BkhAaOUB-oSfWJr{#X%38fvo*YjKl
zJ8|Q)q^507^9NyEK5vr|v+<QyO(8bj`S9RY#A<GKf^Okx<cQwr-DmAXzw2C}HT{o*
zagL$Yy9${ty>wgxRf}aJJ;o6>^oJ%(D)@RNkR^<PX8{K@P_c_s6huyl^7LFsVE69p
zjYnp<bR=!A7bH#hO0hGX!+2@&!3yeq_s%_I&>ggXJl}fiVig`JQ8O$?3L^!440qE;
z6G9Tz4HsnJ$hj`2m`zCU%YnFswhN^`yXcs?uG~UMCG0hnMKw+`Kbpm~^+V*G?mZkC
zu@&$1ua>iYlX)Aue{Qsi%&%Z4O{?^9>|!71MuJ`fgf!~X|ES;7Bi{DHsec+-XOGhs
zJ^iX#jcjMm{^?)E1>a&_!pcya_TAUIZ2HC9koFL#3S8>nAZ4ow>Hu0~rgEWCp4<RC
z@VP&XF{=9*akHtt#ZUs_*L_ib>I*WO>Q~MzUj4qPfnvHyA`Q&Ms;+U0luVc-sx6=T
z#D|uKs3UeE7}L^_O6!*4C7><=i!<|z-xYxDpuH>Jt*r1TS?Q@4_*371%JmvsX-hOj
zcU$nr_Noo?Q@><OPveZNGpmO|%$!3~gXU0Z65O!2bg=yzVg}IUHnIIKmx4F1NzEph
zofu8TQt6hx>~`A$)kS_MOsV{wq(zrt@kY0vLcS90u`Nh&uqL1)w-QG>lju^!^0j-F
zdWNq2rxp=7l<B=unNyFLA+GRrl)^9t@5Ga+NX&hP)iY1dHYkZH-g>W+b1lHIl2b8N
zwl*&DY4NFKzX!wh-s5}MTDGKCqeMshCgVP>AyhEeb+EAG4U>%&-jlRFM^t0;tTv!L
z(PsCu`x2vsYePIrv)JvpxWWk;Wm^LWM{j`wqL7ko079>^;uUL_V#_h(-64rpvdE2d
zhLJ@&%S+$gLA9TWFY`U1$99!Y=9&z%=OH=Fu2xO^FdwXXYL$&5g?(+8n@*v2Ev0K`
zCt~-v&CjG9yciZesQ45(A?B;a#}Fc;STfm75T%ZOJhQ(fhB27XEvkF9mRJ@!8#((z
zjyxNUgp^ii-N!6cVVD1ny)VQY51Z9Jj&zH~m<HnV%cuvn0h{%kwrlNn@R_HtFAFaA
zC%_8sF_18rWCcWBGQ9O%<wV2oNEOZy#it%O6u^3Ya*^G4cQTZ93GYYl;@%m9D#0*v
ziz2nN?ZU*NjL0&UfeBu}B^eC05DtgiY_3U~zVz8Dnetj5Y_KI%NsCo4-;m$0ns!XC
z80<Er4w^q4E_^ula$G$6?j#u^2_4CKdC3Wh4a957Za=7<tXo?e4dZr5bg49<L_Z{S
zSFCkotl}qa3ip5*QdB%1-%wQb`B^2|2;-1_ut)I17b9#Yu76=0wQFWU5e42D2lotz
zq-YdA_e<z-=0<!u$wS|;+Acgw8FhlzE|u$1jOCImJ+Mkj{F4D4qLn3Nz~gzPNp8(Q
z<sTtz;zw1UpS?$}TZ>d!Taq01SbQnl9Pflb{iXnH0}>frkaJLX%2P164wQk$@P8Wz
z0Wi(UNwaSda;~-!OmFC1-4#20;>7!nGS2*)Dzu$I>6QdB#6yL=<)?;TYY^-+Cmp);
zQ|D`pRFz~$Ei>R@II1+ksl#n}oKlBNLoqNt`0SKfY3dYzer3AjqT^)9mYK_>^NIPQ
zlQiZnM5ASo+n{_Uqu#g02@B0aJw%^;4dJ<(vCta<F6A~~c#<WCfh_Sem-pi9Af@@<
zk5OBqE)^#~6unP8L0!P+qB*yo^j{hgRY=DX7<NTB$TEe~*$*LY_M0|(3)B`4c>XRK
zYclvg+g*2af{6i~Z4o$8qt(zXCywZpJ6K7FD^Vli3VToB7E0r>`%B!+#RpLvd{#2v
z>r#u?_D?KU?HyZefIWdzH@Psxs?WzD3+?c_^rox#__}`U;)9!e2rp?RR#)4ekdWN;
zeDv!e$QQ<v{`YjSHoCA0|Fy2AJLNZ4V~osW#*Knj;-N|R4#>imr4cgtA?fi4r+H`s
zX6Lg<7p8qN-XBufIs~?4OrLt=3=B(e`h|o7aZq;mi&*W@OQma_Az(}ltkV1ADZiD>
zxcg9otzK?)#6gQaWkwv)D?R3VQ%{F-SmjFgqYPK>`!3oDYX`1=bZjtIp>4?C|H7|m
z>{IK6mWpsAV-W+06%=w<tEg+Pj?==wiQ9X*$!^d^e0Q8&kk7wmGTkE!Kq#dB<9i!7
zm2uD{uLP$G8#1RedXGw`jKGSw*ES5*tt;Y?C*+pFyW^R0Bih<>9~(BhTx?k<;G5%F
zH1j#&&B<~-?FuZhI@?~+5ksX=3SIo0*%=iahe~ox&Cwf-A>FKq0jUK!#;;Z8Zy^5r
z)K^X}O;aMyO+^@D<Zf90s(8WBBV~crtM5kM!p$_Wjp*zMVorJhv2St4vf5-rJ!{3!
zG<Pi>c56^<_zc6zoEtz#O{jz&Y*ti5_p$@`Q7Og8)iKf1Yy-g;{3)X9xqrQ3uwm_@
zOIcdW>-M~3Rf?0TM?AWXAVM7&SqHr~CO&gX3}U~b+o<+&w~+~gx>v(#=6@Fvv(ylo
z8*xJr@>D~E_o_#+hWoi&ZyPXIJ^ZUFon9{{Dt`AMxP%|9<yI`D7~Uscn{ighm|ric
zS&ZcrsVl3oywAw(-y+xT_r5^byehxQtj(a<^>I%5Q*^Ic-&o(pwT}^Pn$?~3o<0`8
zfO7B+&_Bt{=jIci<rREDu@<f?EqtSYj~oE~iFsMrvNRKKWRW7YTmJ3<sb<rHdBdkC
zMnK1yw#>Tixtm{gF^8dX6T@*dn&ZIlsaq+{{3bqdVzyz^LhI6E0V)zuBk?7u5;a$w
z=~Z_w+vqk@8_`$p4lnosg+L(0)FUUBed-l9_tpT!sdRnzEKg^$rK<8k8+SmtQ~8w2
z@XZxmDMu=GRk(QlqNM!F)^q@`S7j=HKOXPQ4}ht{vekA4K3nv`qUEr^Xap*P@__ws
zYK(Zm$E&d^=}WVg4<}xC3BRDuU5fm0G!@EP)oGjPWP6(nQPsiHsZQH&nrULxpV!4?
zW!NCDO2}hL&X>kjuKuW(f3IQgTy8Y!`r}G~gKf(f+Xau(2JYnzDzPziQwDU^<s4+V
z#+aJ32h<~%3G-$ZCu8{U<u^iGBn{<bUlCdiV~Z-sgNrP&L0*ODi&j3Zop%Tn;G;_w
zt{XL_R-54{H+Q+;n`us#7wP3Ra9^J>3?6W~d-bzWPYnIBxV7RhRUyHfN;#Y13A%(F
z?I^8yvphA*P@Ce;-A$X8lfzVRl|lVR_c{@!VnvSHfxBUx&N3Jl3XFF$RNHT)_gS4i
z%GE6!#4O(#pl&nuW@>;@X<nEcRZa)p9g6?d4TCH~2hpE)I$|8tb}I=YW<&9X{WUnD
z0ZKiwkQgXa#>+Gbzg<i6ZV8c%Hz*r-9yZ$KIT(dxOW716_g+-+Y~RJOj6g(o=J#(F
zSm?ibQHWGmo+QN1zNxN`H38K?gI21C^xhv0zDVo!Q!Z`ydoYW&auJh-Sls8E5Shx)
zCG9{*r-?yv!h>9ocs%azblCCn+Iz~s@JU(SwEkMn)@QzO(d2<JFe*F6S5AnMuh6z=
z!@B;!(89-N)GmX?j}klXNSR`Vcp{+CY_5Q%Qm<xBnVEtodsCV+6;74-k!%hlGq+(C
zUp46wyNr~vvP2e{C1Pku0imw{LQk?KM0tGF8KsGE^TK3iws>uQpbS$F_BZ1l!CR;M
zvurwUM_jZA(hxT<B_&D!p(~^J!$r$l`tK74`mXr}r*r}Vbntb@_=kgSPT$bxhg%<R
zGaXgE4W0LfEH+ZZt(o)<8_SA{X>36f!j_tSvT{a*9MOv0>$xZBuKt5se<VdgU?uva
zzv}?C;UqvU!5$UXy*_Hxs$21T49g1q&aN*)UU}?X39=@4WL~!LxM`_1okYtH%<kP-
za?e-dWL7IG@v+o&+R}(e-)O@23ToCet+#Lve-XqL{(d2%T6|QkD6?_KVMKA^?~J8s
z9;$JZ9ybsX*>%k4tV-Q+27V4kK7EahTaV);TuAEZ@`~<76ROW&el84oj9M%y2{uii
z;^Ws%Nek-rED0d-`o!Ff8UVMYD?P;6nZKS`4by`~ZH(qkP{v0>T$ZdvAu(G74`4iM
z@JRi^1IN*ZM3d#$+KB-p0lhvwUIV`S_%qL!sP1BQ<d|nQC$B4v)=Vt1#5yZ&zdm!Z
zA>*-pF#%2F50Dtu+Ux{f#yBdUl31zkm(0G}_D;tVQ5)(^sx~^M(tZ}ut>BttJy*Up
zYpx<2<1i&rPG-O7R1W=JUPD?ajfsGEC)fn;ts%n=#7*~sHrJ3<5xs&3Wyx_O*3!A!
zz<TpXEx_^0Qmw~CSFCW5Y^~lOdU;xG^b{)DzfC3b>^#<@%I@X3cfY3Bm(sS8d$%v%
z8`Ms+Tj7Wa$o$<Uzo1<A<t1C|*5{@7h{WM(GUfmwjYQt<aZkg&oZgV0a6~OR8$FB*
zSZ-oK93&5^4KsZ>5z-jP>DMpR(Oc@R<0TrALCJ6`H7F-^Cok@6eGF(N=T>cpDUH1r
zuCs^1P~KKPQ>GQ7290HOakxCXc#fU|e?C<>JaQqAr6TkCA@<LypdtPMUx2d*rk_45
z*8x3p99rcXbMS9ssT@tWQaKV~8w3Gv4f8IC>4n>`^a9&dfN7?Xn1X#rNRgqkx=o&b
zk4iPKeIcEBQMXkgU7;0TmoAeoSUq|0PMaD?SUA<!-QoqhwP5wWwE)hd)I)$A6}0Q#
zUhmI5B6JF_tWC520Uz_U%d=-tXm=oBac$tweFU<mJFv=?3Je&g!~=RWb*VnMZRK=`
z$y&i$LT-F|Y@;dWpjV@To7|6=fQ%6#C!SOom-yiqv@=Eu;ZZDmZuOZwLSs;_@a*+3
zcwf;AMOIU@)!6QJ+kDdw72yZk$M`WRT}Fw=_E)0?4g4&6cc#gO%6_HQr@I8Z{_Lul
zdoi(tPB;HC3VB?W_GkoPcvmYLhoLF<3_PAC#I2{=(VEB+xX~dhUrIf~+Iep6xsiL|
zcIB(e^rJvK<*|VL<R}{NFX^XQ_~jx|#Juc}_7SEIaby=~M}hwDS4;^0d)7QCOQc`q
zW(0#EM#>{=d=E(UOO<wBQg_}lJFR?f$+Nf`!)z+{@Vdh_#ep1=z}mgl4g$NVdBV2e
zn_J<WHXTMLJ~05kvd!f1Gb$&|&6SWyofGz-My?^KQ_ai=>i5)rTiI}3Jl6W$6S1}E
zm70onVOO9(?x0QE#pGz%ps&k?GvETES@d@t4%P(O{g{uNLxZn-qb4Fa?7r3j`i`*T
zCtMP#nzTjy+<s*SiR?XjpERb89Pd?P`k^)`IQD%}On+F7rS~xNUz?CkE&Ji~wkt99
z;W$B0i&BY-lLsEB4{klaPtdW52bv2uN$h)Oz&sC-4)*JU!m_bqklarT*xrwM{WZ-C
zz0OTeZM|p?kz(l7VHlHNSibbk;&ZRy>wGg%jh$YoSL)bVj^&GFvyYQdXeQ<J#z)o?
zu$)t6RY#jVgHz#|s_`r4=2i|JVvDx&$q4J<Obbgdo41qkXwjs>mxY|~yFZ@s3L6NR
ze=vyb<n(s39C`na<yrBEXoce9_=lXfSjS;25OW-aqF!&ch$m?HYR!vlqawQIsdSPR
z=H%_+X|dNMmFVmK+2{s&eVp(fS$^Qp6?@dmrXk#-sl6zoJ9h@z3&M5@f4bOb)|a$e
zx}IR20Q1=x`ZiGeweJbcy*laAm!B%9OYF$ZIH5GgureDZe{kBT+G`cd^PGC+I59VS
z9NM1}?ou<Kr67yquvV_c0%hgOI^)@D0#e*d0Mam$m%lT)0xPO%cX>GM1HB+6ff6bg
z8h>~|_3G0O%yS&?U*lNctgdsreYw{#If?4Ejh)8U_gt7PGN^=@ntD2zKM!c;!+&lX
z$}{{}U-(|l2`48QWD?xzU=-ZN<Z9TU)AuK?_s`@EkDt;tU@}3T78s~K^dvFh!cduM
zsxB|oA2Ymm9($}U<$>uudgN`8AzwwW#)-RT_jW$M3na(-`o?Bn-Vo^-(m0Y|Qrt@&
zsMiznJYY|~2-<>K2wbxW?&q-hJv(7!5T5>S3yIBn?lb{h8X(o0Q#3#qp$~W795$n3
z=uM4A{1+MvI}C9^vo_D|vAghj0t4gV*6NYIq*i0c3K+=ew)OMM$8wo#IIT2mAw8?|
zh4-)9nKQkU_x#g#ZdQscarvay(It;d&*?V0+1-PYrX^f)8+=);R`Bin#p@K9>6JWD
zziSFJ8;*+Y?~P=&0_+^88fP)rZN{<P8`<Rr=%mM%Bku@{6p95|NME|Le%VHawIeo+
zYdqGp=feABg%@$En86DIT+hY&NN@0~uFfvhx~z6`N_l>T6Dnc5ab|_e7~%zB$qEic
zDJ#jD+rG%I`@MW}yk6S2?3tQN&fVM9gtGli3FOq_T;I>_KNFC1{q%{%m4*Ca5_u&a
z`(O=LRBbDLFabq&&3Z_bCPRgCP8;wjI=*53U5PZ8L0k|nF6Z$l`$>1k%x?)x+779U
zV+tJ2`xjm6?lGSc5%7sPP+ZfXYzYY$J32YVV{V#QZ{RH>5gQeQKxtYMQmiu@e?X~3
z4Vc1g@;~)o^Lts>IoF%vR9$L~%A6q)Yk~5Z3pW0Bp;FH|0J)@^3>q8`HpWEp$IQQJ
z*Eb>v{M=9asxmKWx(-KMKrSlz;I<>;Ft>Pbzb@_%@jP$N$KTQ#iOSwvwX?h&z!DiT
zVi)b?(5K)3E|1GdO9~j^NPu^s38vv8#pYf;7EF!<0TFVkyV*1ZJEai^M1B#4gTAoQ
zzUv&{IN4ow<5SUy(FHYNV#4BrE(^&0(vHKB>!}1a+%<vfXw|kD?Pxj2!>Too-V~O*
z<<5HCTn|%vcl90ons+n&ba-VR&D2M|EOrIF2!k3(9EKwtIU(0mE-Ia(OIW<fh4db$
z4}V25un-V5mdlI7i0UIHBtiK*(I>j(%-jVOjioxjj2Gp9ndoQ$If)L`tc8_r)bRLR
zO5BVm_0(_^MPb`WxWC(;sP~HbVqG;MyzVfxZT_iOyCPT79Y$_DlInLPd3x|z+k=Ma
z&e(cOMPpfi8AJXvb4gCkHoDfnMu}RR{4^sKHdK}n?!aQ!ROeA!sZAxX+Ps#A?4fnH
z*99^;_^v+-nTP~4|Huuh+Eb<1wBN?Bzahyk-en+b8hZ4!K9IGN>NPqXcE70_Ip#xH
zx`Ovz6g_N`bdd<qeW2(q4KrK`e6?B}xSN>lJ7TYB?uIjv%@)q_-o*O1dg0x&9k;=I
z)I>#s1-z?*bjfw^h+8FdRuGAS+gAWm;?Zf{78N))VhW*_vMO#hURA{CO%f*#_R%dy
zCj09}wYD%^-?dRYQ2drL33EUzT<ME`4pdb~m`n>?I6zm0OH7RJrlROlVvK-UqxSsB
z1tBH2r?78bqn~i`1c<%vTyi0Ar@#cVkWMaREu*o=4pThZbX}Xapm&4gjqj`v)Y#u_
zBuaNo&nM<^NF=>q)cLijV~>VIKF%Lo!<}fqT^hP#kOm(!T53ylQ95&n%e<CHld}71
ziyBTs(<L#F-^4{M%)Mi>HPpT0S^d`6!H6I@Y3iYYNlFdSB?9+!#O~$NOq~j&ra6SX
zq8<a`+3n0zuc7TaIz#!<CF>S^`QU7R4dL-ST#-V&M#3jKVZH~UCj`85?AxVUfk2RM
z7YJ0Ks^|Vp&Rz>QoCJ^4OO$5s=xV9P9TU~aj`{e9(Z#B9o#5V;Or*I_){Uu6D*_zF
z&{y1rnk-~3+igO*K(>?}XTBt_(WP=eG}+{fN`OPf`Y1815Z`)^GQyzfblXtBZx2co
zb!^(OWx@8zRMb)BsRQ~<>%k6_lfy_{7`ox8^5E}VveFi}y282*JOrRS-sqh4N@u)%
ze^{D36EL)75%jM%!Oytz_`)B{`Cs-~{m4&j<4?A;+*>f}$Py>+9xR1~i<h>j-^V27
zBcxPK%e_mf`w6h6Fs1!cQM0O^P2a<UQ%2+mYHfOyBc?v$f=oBh;Ao5y74M8$)6&x^
zpu|KU99BJNjLg!;(^Z8pYkRb+1s=31Ej{IT=Y$w9?W}JF?k6h*77i`+55JRpK&l})
z?~cb9nHm`xX)Q7t@3)+rcAD?YY^bX*9RHke9d%B!)r*S6gJ%=>T~Xs+ZCnk`d&JT<
z9yF?3wymZ{l2}}`kXN~;RUeG6xEg7RHrq$}Exlx!v?%j@n(Wnjj<UCgB_w4T6pC+m
zxrlJnr|8`addNOhKm#>5q{TA%8v<G?mnGNEYTB-t=$m2?I&f0#Id~jY^{=WP{?+3`
z3o;d&(`6B4MCrI@M;at}Hqgl#Skk639XDu*e{J?DFygjFyHVojR$Pj_-3EGzD*thB
zsL8wT9?&#lC*F6^wS7ESG+tb(n>#%>D#G-3;C|6O^%>e^{XYD9s?SBB$xZgw@%J>r
z^<D&;JVN7nP9Q~LtA@sl`Q_&pV%P*O1{i*Rl;$oVmFsWi3hX)XC?n$)4k<$pSl0Kw
zdkE~Kd>gkW%5%zl&*OwE?w5+WHQnO0>;I%`Ey6Kp?&vC4JoINf1DJRBmfGdleJUR<
z<;sm6i?EB~cLH<XL#jRs4V3N7IYz8U<2jK1dKMkAXvf+FU{tYexBZdK^?Tzkw)@pX
zu^X|HyM41lMS-UGyvb6tocmDQP!Lx=JQ{*{gjdh{q*f1q2Z|S$UDIZ~KcifLK-A|^
z@>xQPZY_IgGf3TDB}9azQKx!3v88smAx2sM^f!Q5^O^3;*O~MMQMLyN;VQ8>AL7O!
zF}hz1MMw!uOQ&pfWNeQ4MMWqr#&O_y3e>bUk{#kKyyCSv4`yX3D9gQf4Qo{LXfOkh
zBYKbM5=+4>J4icM;Fi9e)+#BrZvEm}QBi@5lwG}}o+%M{D<2z$*(SOWCtVQz-PDa@
z;>Eaz{jQsuPK!f-pR7mbdYpHcA9boN6vgbV0<<JcBkHJgk4`(id#mb2+9r&$j={@c
zl|@#Tm%lO0Fl<P%H}<P_*&hIk4o5Kia31=CQvc18=A}okwJU)Xz+~N{XYfQh&bnz*
zNNN2-*wA@cL0SRa(`(2EvzyH2w%+SC#TPeJEMC`hg4+FX={c%f0(2_>RY;EZ))cFz
zum#LAH@4NGxUU?D?ZdRYWMp9xcx(EwmilmO3ejL!<lhy)w@9iDNWOdN_72esBiLvX
z+`SM+hm46fijNeW5Xeoz7O0%NL_I_(KMm?0;=;_J5HXIRTxpK6;lY?xcuKdCysFwu
z&9u}(wYGDhySJSTeDPKTdKzgVFL7aeL&||m-8T!Ud-Vl&C9A4vNL!2^D!9ub+iZ34
z0tQ;`5bAD5+dU&zAg8usfPqJnYUz?<R*$?j$WjWWS5(hK2(F<QH((fhNRfbm52kQe
zp+SwVkhw_0d@4p*R^~uPR>-l&5?B7tEq8MAa1snC@AnnMuD<(-J1Plexhiuq0j_j+
z*&NumV&dou8<*PG`3mG65Tk1|B@K_B7tiHSZ|B+!!pm+=T`JzK8@VH$Z_V(1E<hX6
zLD(2r{fL(vK_ArFn4{~LP`>I;n3~~fmjq2OLM^)ni6v#gEm5wYhk14*@Noezcjras
zJCwnBA7;*0x(tZknMf|Y$J?#T#-*DbBd&-k8oO`?!?q)(;WCinmujJ@Fpj-~?LNud
zolbBJ?k)!2b~Sr%%*{h%W@h$9ar1>A1E`HXr>)*I9xn%<-4eDvxW&D>-Lf9s;zCW!
zn;_LK7Uf}kkM$!HoDTv>CN>u&y1X|GYNss^R#o$_Y9~u~;Zr2r0_Z!f1be)(<C`UG
zScSm>6MnK}Aog$RVQ*{ssoP3rC!770^svCFO1aQ-D67JQwOQ<%R7Kv(!xIXh2+Z~K
zrqE<WP2s2qR{-9Bs)cijRc6AG_4-z7R{&WdaAf&jb3o5V&fRKE5Rr9Y%L%KnSuP$h
z#oS;}xW0$vPq`x71q@MGW}$f*9S^7!)WNu)3vu@CRQDG`cGCR|F6DPC_cmnkCAH-0
zHd5^Y!tWtz%yAoN;X5iRZLmWEsT(MpyIF><cl~0VF;!SaO5iRDru<@CGIPzgD`AEZ
zKHJ_Gc|yI~I_#o<39+n0Om2)#HMpC}J5nyAu05SfJG!H!Lh7pb?7~BJi?iERzgNP+
z_vz1myUPYYr9+byaurt>0^bCBr2P)vBjR!T+8c0-x}uOYxQNBT^KF4E2Gjl5q_VuP
zlvAb!&rh%C_SdJ;HD{FN6xv~W(JL`2%q=H`*lK#t>b~|pg5>xF%!f)FN+e_AShFgR
zvLFV|P6L+*3~gFo&EE7}I;<j7xBIr$82keQ!x`?hEvgVo3hRM98l<7eQLt~OYULK3
z<?*b1)txVRK$d^wUUq$_8g3uZ`m-K9V&<#SPX{#xe6AnM2MhPq_NCh5@};e6{;&#R
zJ@KXIo&F1xG_*XifsB(8OUvwwrRI89#3v7QrSwzV8P0SjKt+M#-TIhDiTjl@+&iLT
zbYX_Z77`zmUNPabh8pl8H4lGsBV7{e&Wh|fn2s9m+#W7#u+<gbM4TL<_U+n+%f~q_
zJbqYalWX96BoX!av4rsEfV$FwbK3a<s-sJ7Q@fM}ZLS%cXJH7^`cgRdW#^dNnt<oW
zF2Tb60@*Y9T3_$q9%c?-6QQ%$gHt96jtuL=e6{_XowZ~NVt;hyG_qtmO1|j9v!b`e
zT@T6N+IAUtrjW+g$aAp8g8IsU2fIX~-^6yLIlP4fDAXa^*grt>$UNis800sXP)=y=
z06FN!eUPwA#Y`-Pc$2k)huh;h%LVBIeMxEOv1_|CTPu{u0hH2>K?v3qVv5>0?2h#d
z^+J)dcy^6s1)Vkxbs-x|r8(Z+UZCh#IqGP=lDf#t=pU$cu#F`iH0<Eg>y2$@Vu+pn
z+Gw)>B4l`y<ZV+}6wrv+-R50mb*Zu6)6r@$Y?Y0O9X=M)NSSzODNp>QM>P)R{g9GY
zovvtavn*b-%Ryh?Ru*&g&x{}_$c5E(*<*ib4S8!Do42>K^z(I9u->sA6TlB+f<msc
zUiUs&dd%Kf_fVU+JmhK&`&RzjIyyhN*+%+n&j#J{V(YvMM44$r+Wfn&RXfFh3Z6Cf
z;UnJ8)$!5KlKvFiZ6EuV1`4{8kBJ{@%59I;G~G6d*{h!3T+jatmN}Phzvh+&n@>{F
zstH>_?jN^<h_pm;))IhK1Q_D|V*Yb|zhHf0q9f@H$KG`|<&PHjJB}E^4a0CStYV5s
zj!#VAxsy+eIQScgdImNLRC!LLnAY2rc1rIzcgCLHOUkr+u7Tau8Ye2mXPReO8DQoN
z<jQ%SW{p<i^#&}31#hjL(UZbv@bU`B26u|_wHX$5Z6AeN<cOOn>SW<CwW<3N<hdkF
zbK7|<CWTBke`@;p9uy5fKy4z$oVVXBVopS>HhI-=)F554jpwQ@A21X*xHQydCwo&<
z()V4Sfs_X&wq!lmnge9BtJ6-viXIT2%g+*CCF;q=CR^XN;W(px@z=?j1>s4>jz@}B
zJptai{W0wH=0dpnGAVmXRYp`LX3T$0Vjdf~6>9E>BNIb_p&?|FcRI16ja%BQ^Ubs3
z>elnHp_4$*)wzl!SG)d>nYicCUHWv;d@&TdxxWMrke3KA3TUy3+b-La0jUN~Plgif
zEUE3zRr_+7`i0dFVgiu!>uD(t4_NpS_w@Gm$>zy9L?U{$JC4Jzc4}u4H9Y||`#thn
z0@(KoLgk578Ob}ZkwY6smQHbIuEFMW&p$ocL2cV6=Bj;siz`$@4_ai!low-W&%f^S
zfg*`@#enCmeovt;7&&=@giQzERh{Qw+#Yrh7p<#rE!a-m&98Rviwblcb-~mZZ;ZPH
z2*Z5WPu|XP?0Fr6=3rEq<ND~ud-cGPX>rrB-QwBtAMxuOK0b2kN~+P_65H!RCY(_r
zeiaIbO@CD%kn=*-E4rH;J-KT!pPh1?Q4Gqro2JfZw?cq^$*Rr;T+-kbcpKUNu0|SN
zqTXvY24z_3U=BIA&@jC0>4*a<j>&Yujm3D=eDsEDzA~p!c7Y;Y{9NTu`FM1p7jQXm
z7$KZm<(MhKq5C?^q#70jsjlwib3f4*SBRBmn~<HSY~h2xaI8awu3ZCMDYLGyG7KUT
z!$dFc)g2V$65n}X#j(+GG|g5b_oP$SB+gYeZsMqYz{k(J*f>!+Te0GinUGY-K7S?C
zdULVK<|UU0wY@bRzQg{}_QQ@+u-&mIxAYdZ>YLunWzXm>Zq-!Ym_>H6;4K}!);yVu
z-`vkNaz7GbfYE1aJAsN#R*Ej{gHt`#51h+D+FcU0R9W?db**s2V#CZ&+3p8VhbLEL
zMC!KgF_XOU>>`D7YEuLG5C<IIAhj0ZgBgzK7uo0>wUyCCb)!gnQb>LAF<UsYczaZ}
z)^t=l--PgK*mjz{q3RP8FF#PcxIKR|VfNAN6XYd_p03l9Mx@yn?dh_avRTcsvX^TA
z1g2nlwS&xm)T)AOm>#VRY(Ow80W;>HP2EU+rQm@9Lx^>Rl;b#jutGmCFc3aEFfeNr
zVsY;=$HL&0kSWmR7%=nD<awk}*Xc0Ol3<XEavZP>q~_6eP7{Ih0N%N}uC;*U9XzlD
z$F<r<MYUo!bhpem9iOS~A<CPjP3WE<{T?L#DVe2O&@ox<x0$1dfU7fPz1&5CDx+X5
z6Dfkh6X@geBqu)NwTn=lj@Fb?CCrU|_`Tt9z}O${wuYlu)<)vwBSqUbW_P1u1+PDE
z-o-HL<TvhT#WO^}<?|La5BAU0=c!8}Y(RW*i#9;&6q~QxyP_6?gq^hGf~%;1yp1V6
z88hQTb*E^zaqDk$ER+}X&fV99aoA<vZ%fSF1F~YFVH{9lioTBjz|gO4C<FbBVbQlU
zo0+vw^KdYjZ3y$w6m&HBXv6VBuB^*uOhzbN9=Nl#e`kak2E=KS&bs@qTr5k7mqGeX
zU<708=9zNz*7$k{k1;!VOv3qXri?i*u5F@EzR23^1Lc<9!dhZ$KBU74y$o+QkQCN{
zPh9DebJ;0|kFPv~Q+Jg0dYrnC*?5^!#y*tggT;xJq`<C{$bJ&4TR1ymhbI|Nc`7AZ
zzcXYvc-W1ZUJ5H%+#f8Qe#S4d(UV`_rW;(bN4|W9`iLx6+O4DrQ`fF<lXF1~l=E=u
z)i>gzD6j^FTp7k1j|E2_w(;Ug=(tDRRp3TdXV=plETYJ6qAPjn&n`g^{w>*Ab#u7W
zk&ez==#FpyImfXV--17HFc=9LYhzy%1}B0P$@sC3ueaonnu4+1n`W!n-_0S|%SN+E
zgORUY4b{_D*S|wJz_%QK(MW4KF%g|^WeJkIEhwbt>T-Qq7B7|TH`%lc4L>i-D5v<u
z6jWi$VDbBD%Ujp*VgC<jUme%<_WutEf`DQWDiU5rq?HtqvJe3Um2T-qQeq77ie3@H
zpi@#h#(*(kSRgq%H$aJzqZw>$`@M&X=)L#z`Fwx>_*mfH=e*9V&pFTM;cVvNH`Tn`
zMK*BSv3V6ZnK$PYckd8He&6RQ?g`{{jn7cS&5P^fiLZm+oN-~uu{oh#gEtmEYY-d<
zWw>!uGhWx50a|&JbXCxRPEO%Xz{v8@{6ej+swkAv6FkH-w<2Wl2@eFlf|q^|6{6p`
z6M40$a@BL{s;*TKEa;i!QPO4SlFIK+l}>9YUQZCZ6D-ulAs#sP99F%?3QucsybFg0
z1cYlSt|#Nit89XMNSJWn0crS%!M$LX%2xKM);~G(t(>#BBIwdtX-zBrX8Dz@zI;jf
zEPJ%gI1-YQ+%v=iHb-ja6BC9uoJwTCs2(BjYMTlEd53v=C(~D>wm`>V(<q0qAa|_F
z_hsBEm$b_2$(vJ?kqJ`Kad##$u{1Rgd5d`&PzFD4Y5=L)AJo8wzjHw}3MrNvMlq|K
z*HTPM6&6$OqZ9nCn?F<fc2M?3<WbzDX^o~TxNnjXz0w$?YJ}J+WhCKL#P85s!SC3#
z7HwY(&Z|k#si+1QP_FSZI_U6vD!dA@@e(n()~8$hrfWl?fY?5)pZr`X+fe!-K4YlW
zxbti7@ypf8>#treW6J6?2}f@Uo|1|NvStNb`peYuZe5~Tl}VofhaK89T_?*wG#Wi6
zBh~~hpx1%1`9b#gp1b3~Hg(+8rY_;OmItgSCH-d3@c6QjifRwNQ=adgnS1dPna{;M
zoctDC_lS73uyub$#yMu;^@Oo^!y5IQ*eYYfogi*k@(67*W#**Y6<$T2az|*ns+ubU
z&eZjQ4!!cG!#2m%@%elN+2(^{JQB_xm4mMM74qWP=BjVHsD!T@BC27Tx+h%T6|*}M
znzC%t#owWHq!81&y^17>-dgfxFMdf%7&^n?IABNTh;{@yDlMn8Z<(ty4T|R(s?LWR
z6}gDW=VN_<9d~GVw#@40hEZkT8R<FOl+s=?=X(W4MGiSpsv8CCL$}a9o)=9K$(xH|
zMwMjkAt+w`3a-alBAD8SGz=&3RKZd+U=}XVr%1LBQ%s00#_qtyk>=L(Of8a_EtH1=
znQ=>=a@TyP!*x!QZm(@OzWSwijJHu2J!{39P*D|9wy+E{!HCYY&AycY+-&Z<k@+Bf
zDdO5v^~`IB%MEuQ1Bcl(PmiXEkVLxdadV9qAEI1VHJ&DG7e3hy81)@5NBIuZIQ=u}
znH%ko@Hw@;LIUQxGTwOw6{|wdMz6Lqa6|Qm3m2^hl&2bO3|V=i4V24ew5rrXb??ha
z>6I~7(ey=mvW(??4SjpT9JrGs??AVud-yeKL?=#YU!XU-gk-Af%&P8S#FBQeK}S(P
zPnpMS<4{#VYiEN}G+fZR^>|_0NjfP#?HcmM?jOB?8VkK(Q5jpw3ZY}!Gf@PHuA2NF
zUH&NFE1{N;6JQIb?|r#k@}3Q4bVc8IEIQ^lw&F5t%IN3C$-|H*X2W)rlW(LR2-8F1
z<h}$Kyb@DGc#nV%KjIQZ9#O#mDDPRD{izyae6M?>VlN&p77Ma&PP7cf1UU=KRZM&Z
z1!%viSe>yH+3I9xKLHQRF`ap)AiObofL$=w=wXYzTHdkjz*RNQb%K~dvup~~tp^o&
zwWlkgz~LQfNZ)NaJAa}Rw53b<GMRT(XSw`g<*W-7Yj*J}PRHo{#;9%IC%Xd~tB(>B
zIOSA5_~sfD2+N`pF{srJlsiTrX?!R8*Mo@6PlL#)v0;=gJIF=56T{^!LH$IIeJ!7V
zL0VfaXFinE<+Z{V<ysN!b-|qYY+*&RKeGC(Z`5l?)drng0>kw4uZ|l8)$W(2R#1Pv
z8guq|^)l9gRlz^a_C>O4jT+ldY5rZ~T7{I6ul`64(x!WQZA@G1{%h9^=k8l{kY2c1
zRj5YW#f4{nX1SvC9E^YJ&goO`!-bDPMEjh|u1T4_rl>&&UJcwL-T}I7lGgIH?5p-@
zaXCnhvA9=!F^V=Y+UN~TtPiQg?={-Hc~zEx58qFhJIQ*Wu1&d+rXVVgAeRvVT1{t5
z8jNwgC}-`S5|XOEX1`38FIWIGacKiC`$m13MW#UAonw@^W6l2RLq#+jjt<`zm^HQk
zli>0Rv{GuGGw@Q>LtYf7CzrG@<mTh7(cV;f$$|||Jh5GeK~tp!Us?~f!k3;=+FbCu
z<Wu99`5L~wDBTw$XPSO}q|5Mr)#s9`2zY&8E5dcqrxZ(ySI6GNs>7yg9S_)v{^=4J
zo4~aB4jFg=2Fs9^tO!_yOvWFV#En&uTIUxprK$$)-<5?!S)VAnUoq<QzCm^hAIgGv
zu~#C+<B-n5WZ~IijTC2S>udN^?RwDZr=@}-uWPp+ft<#|{T`+=^$6Tur<|?R<&hEf
zzwR4l%_P_|H8^wmQBMwVsCv)I$d$RNf$4!MgChzat2q8>6QZo7LV9=2R9t5DRb;8%
zEK|a2xXbQBma@F<f6_3r>eRWW`<M{#p3BqSD6s96@+?T>)^z7({IfT=oiX61>oCCw
zswqxeB}+>i8bIZlsS?L%j#Zx-Bs$Dqz?aX7FJ?}@4oPXI1Lq<@)2dsEH*_E9rslGs
zM0>u-oq&I-`b)|YdRJ>P{mz+~>YHXEF=P8@wr=Ms#T?IWOF%tNornOhS}uuNtwdCn
z+{9k?AJ}W0W!zq!2SkDRg?PvKZ0$|}03gpaCqrpZ=5v;h=RdtMoNRTz&0a>!{>)Cw
z$i9+*<tsDCeoZ$2+V09WK7%;5Zgv1J4){fKRa>ZN(d(R}RbpZ3R_w8x8DjUZzo~Gx
zdOQ_4-CUue<v-<;r#^{Ku0c|qF-V4Y<sGu{##?2(iZyGOJlTvAhnw~;z}9g_i{z=0
zy6-vB!6`NhQp2`S-otw^7FrJ7L>8dc*TN9k_%{TqF{P2S41+pu1iZ$$(op3G>{#Tm
ziTm2t^Pwue*R3PT3M38rjns$E4YvZ)obcV`Ifn)w|3og&y5Q)M=S`j(UV`@OecjNN
zAqyp3@0Z|)AY^bN)A|NHJo$VF<jiU?61zE;aurKGW(vULEZ6{ODL&V;fjo})7|k=9
z-HCd<kuo&`uvm|XKZj3g87t@cb0`h^XLS12*fJ*>7pTVPdOd9IHN`g?uz4Be{ek1t
z>8{M{2F{7-if#<(G}Fc@N_WxU#bqjW$U5XX<(ga1l{()wP*G|AMB|(1)TAfY6CLsz
zlvynkCBz_GbOCPEc%vti=6QtN7K4z?&9#&M?~YroD@{=$O3UzUx1yvAMn*eM6lBy+
z#)c%NXMi$qv=xjamHFmZVK=wbj}#>4^IHj8ziIX<kZS@Rnyd9ODeexTOA;L`JY3~!
zvU($1Q>EPysHHp4j!I22YQ8Hr+<(E-tn*4^(uC<7d8JpYkM;|AmWL;Knt_(h+F(N*
z@a(Dvk}2Gu8;G%f@l5eY;y~!-_9Ux7?4R+MUGzL|cr>F<tdO}MCfKqQKVt6Pt^d&x
z3yr55qZ}!j5jqIMPHl>`M1K*nv4<4$VI_(PE$K)pd_cMxw!4@7M>gTaiAtozAo6tI
zRm2EnEhX+N9c)u<VFls6Rnicxsmev#19Z`N7VIS}_IvcTpYO@Z5HY!fiH!F8Nc&19
zX;1SaJfvUZjNjxHBrjRR9huc4(bNKfXxw@4mu$gqM+w}3rYYZHY`5R30)a&a0Db82
zDPF@5y2|gycvZjj%N!ilx29oS$ji66<fwBz)?nd_Ug`Tn-R=S(rLXgP$4_u8WwUR7
zrLOO(FwGUAlPv=7#b<fesnEy2Tox4b=A#qikY|q)da&6c@JKJVcT+p%jH%4Kr*w9+
z0nj5*gGOnG3VoAs_2BlUyZJ6}mTyejy;%_yas0C<MFQkC5?vWX?!01_TFF{grhg%=
zwR7xR9J$lFji$nDgb}`AEpE0E%I*!^@Zi&E;xlUiS&Th2L)X@(YDebZo?2IH%WLHF
z6a&q8zp9J)ga-Q{y%y4CM=^gk1-L`h-*o^B7AR^Dm||RlW!(6T9X1Z^A-^jtK6o^j
z=9#}a?drf~H9e+$&|Mq4spnVKMezA~NQmNsB2NEkWj=v<Tycz65w?QrWwV)qn|M4{
zJ3vD(!|yhVyc8!pdcZb?2WyaKR@e@?Y8^LfiwjsrCbyR&|IoXIJloSH(Oe3C{B_1=
zrJiNSohx@Sv}^xZlvEgPIm(aej$of-kG7y*#2As|`Wj-N;Z%__B`E6li}XF$?H19?
zj&7hAx=@Xp`P}nN+gV_$5+%!cL03?($T)IoT;PsIaQ&yjMkOV%Qeg6+w*OM;ZQpRH
zzOq-&il9Q4Y%a{up6D=R?=`JrMwIQf_>>-BE2&1uURK$Vp|0W>=2f8B)OpHKWNxZ-
zbpDaeblD?O>)Lk4R#eQn!M+%A#*iLeFAcNax5?^;#|$TK7)o8Zp%^PYUuY<-?efrq
z70u)9g$$T+#|@&@R|H<^`FbKL*c{@GnoMS5^O$Fp8$FXRCtusUz^q&fVQ^O!^Q~Q(
zDUhRjaXbO9GlbO9;Nq<MW2M1pz7;uC!!c0r{YFq*4~9$6d{SvB{*irVvSp!0@DoM1
zj)~SDerqTET+o{Y^P>kIZ62w#4F!8w$`)1EpQsX7uq-=X1D>3U4ctUILyPL{6w+6V
zJ0;YSg}e-9vv-7NalXGo(;Ww}D!!k<RMw=uEoGni7pL~<gt?blpG(b3<kOH8dcQT>
zIOfTx)rMRKpto0VN8T5qdFWc{a&G|p+7JrU;w=w}W{Ohf5bQC%%U|20KSqGI5qPIA
zR}|Po@E+!4xP1ErqJuEL?R2fzNb*^Ish(bkY3Q}h$qy{i`WJjkGFOulX^hdjX5CZG
zN1ZQ6!7|3Q&GVHeo5Y9O@ABW6Y(`gnb}D!woJL45fQfw(SHlUc=CMo<&u}NeU2AV5
zIoz|H?XtwV`iwggJH|V{9dtW{T!LjWcGNDP7OVTYD+RcQZY^F?+^Grg*QhM7xpR)3
zXd8S0WR>_SOZoEb=7|j6sZ@-aV$<t5f$Q2{@5|%|z<U`rRh|uuH;KRNC`_!jcz4nK
zK&9+xvOtH#dz6QY8Zxp4@==%*fP%or9XY!(FtLWx=2A##A#y!S*7386^WWMq6YTR4
z_S47}Zi4JScDEgQf<up_Qb0JBMd&EG0&txbx|&}p!eeY~(Vo36dkk<}vEgYZ&BMH!
zxsS7F`YHWrhg&OaUc>wQG$rYT2qAyCGU^6;HjRg<N=4s$*C^O0#hCPVz1!uD<)fx<
zRg=8-62mC_OdBPzV|%J=_Io9IsY+uuO<H!^!YUx~3)2lgV01g0TLM+pdwl*tJl%q5
z=^~L&k-^Zc_H4ft{CHVy;yyITdu;P@Gi+^QM~pOM=$Z-y`=AN**Q=Dfk6H1fU*CCt
zMu-KP;WPw1al>f%RPtjiH-UhCJ{=}Mk?vneD3DEq-NUK^_xrDV<oK*%UfaK?i}#ou
zp@7&a@6Pznouk1*ibN#?GGAaH<`0D6*yBT3+1#d-FjFhf)jKef9-A8OwlE~zVlat4
z^PFdP<@n5>r#}S2>P|dq4W3(hgNw7k9(&2TaRQIv05HZDb1)~iq3A~78@5sYTlz?d
zy1`)@O;G?}YS(GD?L8gJotxqVG&yo*19vrh#bY5agM~&Rz)rA69}t6QGEx#VTZ7K5
zLE;sA(>;LoAh_26yII8!4<G87VFZdRQBq=+8)<1elF@1O=-}H8Jy^g!85cB}I;ay1
z^SwtL>|N~E+*@DOmZj>X<Pklz8oeCWnf5F0?WuvqM5ykkVY)4nr97par(7i7S=9g&
z15#C4CJ_an7t<+ocZ>62V$PRhR;{1G#Owk(Ii!L6FU|PznYX5aotvj|1+bN48jrUK
zFVPFY4Yd?RQB`({f1ZD#-%Q112&G>NlTFJ>lYQk)!B{}@$z%&Nw4j>#YXn?>IHaIs
zd$%*RH8wXMMU*<vW%0)OjN8)gQ5L;&X+2djo<nKLymlTb{;Ut)I-kh|x!oI8<gs4A
z4DqZ`9~6WoXRE~p-8|uDet<Q3kDu<@HAVSVjeUNBUoQHU(_%N%tIPe)Ob=w(zE0Lr
z+>j;V1hMCBNWnJWo-P?hmGrx5q%P20R-`iYWSqRqoBeX#F^Y9OC&Qa<E+<IaM5xAh
zBJU=!U0&E=6W^12hi_2ZEUH^?4RWQ2T0UcR%y93D;DwC|jOl7{yMs*aa_O>m6_8hF
zW#FTj%lide9d6CPcDzj8J9DeV@6(`|t{G8Oy6qljHPd+I%8H@KwH4zPRe|B?_4M&s
zU?+3{Xz9c&(J!q(o$%VfmfgQp`+8QMwTpuvZ!2lklArl0L^oz|DBpjrqqoNJ41?SQ
zpOQxqjL}r>Ywh;D5Hn5cYHahUmJts0oLs6(4bgV@5=l;TFSiM|I*3qhY9M5Zt)gqz
zaQ$dU51b(YipA^cB?X{6p<0#zP>eHf+g8(Ph<b5%beN{OMJi^3f&uz7j4($kPkLN8
zXZ(Ztwg8hM4U?gfb4z@>?_V!J{pba3VM;e$#md?~B`Fp~rABRGq;S3selJ7VBpQX?
zQo;ge7)9I!az98*QowSpCWDgqD_%v0xhTkAVhR}b=qK2IA`-)rWpDUlrzkL!%M_H!
zZLGIU+gQg(2qQ|@ecOamr)j5t+-uk#;HnXC&jS15&LA58DApE(ybRu3e9)mj^IJ(q
zc_g5~2I<T=nn|&-dKw7}oYnKn)s!pJPdHMPpyljQTRV8Sb5nb$NmY%y@kXsXovVY8
z1AncKe^mLM{Qb~uZ^5a0ah>k0m%xFJP5Zbbc>Pq_bXe|YI%|sKV8qKJy-#9PSI~cz
z%P9?eUtB0Uq?7+iTI*CWo!^bU!EuC3e0KNcZ-}NiIIgL*n>fP6LUp_XAJY}JN*MK9
zFb4K;7zGRAs7t2H2sHfjO)IYm_Zn)-+>2Qvy?grQ%C5Oj!IY}9-@qf5tX!1b8b>Vq
zoYeuJ2S0*3vFP!xbswAKa{$x@P^8bO6U!crt*1cp9F_LglQv-#Ac~)B2cV)WGmL{t
z?U=)$Yie}8weQby*2EL?IYZaq&G|-S-FZ4un4~&BGOQs=)pxe-1SE0vYE-6(8)o9P
zo~p|8%)<?rK2SZp(i&Wi34$S18#CI8CUNRmn7Lp1>P7WcrzI6+p@uJ4m&A4CA0Ei$
zj=b=7<XI1-;0iLon%*X|0x7y%l_WE$l6F8>9QY!0buO1tAP`R9<i&ShF``oua?=q~
zu7K+Icizic*HtePZ<6cfv7ELj%!f3;k6UTA5j$sua(+W7J#z#9{#tM;OrWd|w3Ke;
zqJ9G|hBz)XJ$yD372^cMwY9GI6MI145ce3+#_fsQpgXN>t#Ng&NiB@+0usPI2oVpZ
zj$Z2()45-di+UY)<GF%r21}O!d6TS+om!l(F4x){ZD}W%MQ=?;^DuZ;LEXnE0fxLf
zsYp*JdX@U=U?_GazsWP->UPknM&>=tjL2ZCs!Gh&985?umtW|VL7LxSu7)qr3z+Mm
z$V%bWHIQ8f_}V5AHGm-QZE$cy6Pd8|6A$8Be-QwfYnP&Av;e$eh69Sbm6A#|9(FTJ
ztJJg6z!F$NIcZe7bfx&9-gRln#5H})-ex1e%tKfv3q3ED#{)(@8|G8y?{4cw`aZ&{
zr`&4<mjKWU`wLz$KShg0*<y3!uq7eMUPw)x>18($6^~0Er`$X~BBKE1I&#CKQKKsd
z(+cc61Y6Ud{Ta^Q<^lMuX%YOS;{p}w2tKF#uA+1zBGNVm9leTGt#TY*1O7!dwkE(P
z4)tG(YXN~escE-kd&M9#9}eccQ0(gDn6yksQY*->GHW-j>mZ!Iy!?hW+^txJ2C7D<
zPDK91D}Uq7sMJ<JQsAczdqZluU%@UZ3cd}x->s?)*3?glwx_TiTz{r)9t<|zYa<do
zZ4?ER{H{Yo!bgW4k{q9xJ`b-q^n-chGK=%di@V+rFtwWcA?Ys<`G<+<kJg?ujW^&L
z+^`o6)-qd!e*+R!oHD@mqQ~mcj$OE1>@cObWOoxtz>qH<03D@Bx*Ct%9M&meih9=t
zF}NN2R(I^xNX0<Z4#s8z?U1rq#SgIr<}UHvp87(C`p|GL8xt<{I@WPvAPtAIHO37z
z(5pNaO-HH?Ryj#O(6-iIZa}G&V;A<heQx8N{Lr4r(&2Hk)(b4WRjp;<Z5j*ior+7h
zjYw9p?BjOc33q-r1_$*cJNHPmb5gE6*(p-{{eo1y?GA{C7r_esMeKV=ttcR{49vMf
z<O6(D#7kGH^9>K>K|i(d73}3=c7#NKnYXbFHNqHL=3Ayu6gWnG=|x8`n>lP!4Zy-g
z5*0?~!dZkLOejENCSS&Xt{ai?S=dtW#C49`!A&G$OR&&yKzQGhf|OGQE`^n{mhtlJ
z3F_}s+nhvq)=@H%iVMI%p=N)g_{whfj=4%0VXHH~G_|J3@LI*d@@#mCcAgdKQ~IU{
z`ygCm7z#j)ucvseg{8)^uFqkd*}AWnhP?YyIV#>g8AOn0<(aE)=~cj?(l0lxI(0}~
zLmpQ!x>h9Dr1WrAxKpB$0v0UD&_Z0haVCy%AHD<T%OLrJ%H-F~z~N+M?$uKizzDA+
zsb8)gS~Sa`jW*Fa!_Z=Qn|&%QrdOJ2(6H5*am%6I*~W6Pz(2gB7y8A$x8#fd>~Wd*
zMa)UuUuK}RE_ZLZj3GuX^2DIW<zPluc$-$VJo<9Ma)JNMLIJ#?s;>(3Zc(}m@aHNk
zDilDlR<^Fhk~%+3<ZoW!3eCexuarA9Cc`zEuUl@5U?Gl<VT6FO@(+ei-G=E-n``xk
zc?69iXxWfrtis4-^~Uqo1Y$5tDAo{VKV4WR5L6-qliqBZ)o`<$LK0d!sFTwVRP$3A
zBAFHBSy%II|4J6{E1x=+PQm;>)px>TGFe3h?#~XheF>J%M5PD-0Kh)N!Oif3;oYrh
z;I1b6ClSosH$kMT;?UL(R=^-4&4ZK0bZ8W0qgYTzP4hrsuu{wdP%wPL@nM%iyiSm6
zSwc9M3py{nv`wl(A5&%NG+p03)TtQ_T#`2FjJD#U+kgCX16l|zL6I3+9eoEqREM?%
z7d?g=crFl)-B#Wi(ntUzi>ecL>-tnfi1|%sk|9Ba{Cn(HibVi6li~-Urz^lii*``)
zPslVrUcT&RbpJz%w9R};uXGl=bGn@!T-;5689^BIm&RoJIIS~z+?#fe;cpG3ez?5%
z=zgyBVcS2G0aW<2QwGSx3U_{J*tRqOY-rS~^a>b`LOKc}IJ%&}U36@xE8lV!812+|
z*ncR;BH*nEHui@o-s-LLXnm%b0jd|=@pU;%%nVSkGC^o8OQ5r>grh6eTpvCi7T^8E
z0%)p2%rl1cg35*l-&#a#o-#?c>b2Wj;?Iiksfr;bR}u34=N6#N1pkr2ub2?CHQ3c7
zeCJxDct5vrb@f{Np47S>^l(>Bz?>08PCOi|2-iOtD^S-CN>+nbA)&x!GSFm)?VA^Q
z%n-I-PG=z(@%s9Fsrt}@b1jCd<%Uf?wwY!=U6&581j%YOo@kf2j69%lc~!VW;wq9|
z!E!afV<dai_Ev&_ZKdrCGC@Wm0VN@LUDlFGL(FlV2mce@`&(f9LB^ydLrvCu<mH$Y
z3e-!%8H|-;MlGP`uLw77Q#G^q8_HAcOaTX-fE{p#LFXaEmZAfwLMpq8B3?T>RaG^@
zX{O_?yj4nr_*ww{75fGegH3kGbOlEknZOVjk;y$NQUH#r@v_IqRyGgcF?vcxoSIKX
z0hFh_G>@dEF_Ae(J_gwKD(nnfEIA+#sdQr=3yDzV47Y=nmz;9?nESyA#u8r6CUewM
z2>d|S$XVj>UVz9-+1f*yVn3_Q9gr(XR-TP~+h-K``m->EYsp=6Qrvj5rb-j)mieS9
zr9mYLrAqoIf~9W%KS@PQv!FwRly46Uj3VszwSaK<NX;CeV@GHw^)l@5NAyM4h4j8w
z7h&HJb1_8g=Cp=LJF5lLd`#fm^q<5g;W;PJF>X~2Oa55?D@|y^>&<+BoY=S7Qs#M9
zq>j=QGhd{m@j402R)#?spMPWuaw~ywF#~yt@w$_%Pm1eM3%U8iDdSCs3Z;9o*5s&D
zL`S*sb+N5>9>+?s*I)kPtJuGi_bUjvA)nPL$@?Yq;o%YrMyt=3knz%8kOp#^uev#2
zot^9?J`w&M$uS<-)%tCNqx(9qPP(_<-e5U~_R}<)yrZ=q=RpEa!S-W_Crfd4TO5*x
z=bPy-!y5{QX2KFurL2R=;@O{QK!0gC1Uv@rM&sJhVqjM^adl{l8;9~~rM7OR!QB@B
zQ6GFWxC|<K&Kq^0XXkOg*HWA{cwAnu!uZ+rCm~J=n`Sm#ljT^*OEQQ179xIZ9qOL9
ze52{r@dY!vugPw=_Iezc8b}={j3yrwT}U~JHF!zXE8h|`D$@_>u~i7$l4zt+NZw`O
z!8UBEBfD&?TbEa7Xwr^yneAvA4VJ*s74x25|6t{Kav>=!?yh+u@2j*R17~7PL*dKi
zM~AH^ABJ&$deaU}Y~UMqHt2R7T^w)=X;)X1QjE1fqam$mnB$+MBjps+k+yiJ46~WF
zoKG|b{kc(wYhn}Q<3{N7w?|EyE@(Z5iL+vYz%FIhSkP-%FC;6@={z5WVdFl_Nri`~
zdIhyT61ZPQMip$snu`2B4=s-1yC#O2+dA`>aVqR+%2on^6GaL;jw=f<FKidj>!*!I
z?+xB`FAtxHbjR@}qlkZDExl)(jI+_rJzipW!~^lC>R`LX!rM+ogLmp$@l{O$Z`pFq
z3kjS%A1zL<(rywLx+3)C#q0C$sOcx`#66Vr6ojBz8V%8#bPp6P1H@O5+zJ6SIA!-;
z`n;2f#@`G&K+&%?*6Tfx`-2p$($KP?+SsMWn(46PKui1fL7)lcD=@LH#x5DJGKy6<
z6=!OBZ4BGAvJu=CKyV-vFtYChZGS+6uO3q*(5jdR6B4fQG0`+<>GPJ^_vmImIOc0~
zrtZiQjnHMl^IZ~fIq087tALE-W$;Uu0G3LP)m&rubhmvRg<$9c6%DrN2>qy_@%Bbg
zT?@$dvbg#)0GIOnW1&Y<`6!uVa45%Oian7c=mFlV#QA%pems>GcTH~}YdmrEFW<To
zXEy@egn`x*DA_JK*8jQP>~|GWrlC9fH|jd*5jSv+KD^#8CzM9=*J^$zb(TyB3ONjN
zcV)a?Ru__b{RYhaCEZbT;6eDrb4)0q8#aSdJ7yJpn(^Ej$}lNzlk(477;w5oia%2Y
zAT%kW`l@EG{i7Fv`OV^i*5fM%+QJl&hGP2*kNxx#%q^j1Kj*(KH8pl~ryt@|t^w|q
z6~+k9e=EtfYN%{?m$Tbq+r`26<G%r)@6h#i8vw90a(lWi{#e-{Wj>njUk|QQME-X^
zJYZ(qL_y}}z#zDf+7^cFXa{9US=m!re@I|Q7TeqsJMX^BC^d^_|1m0)u0x$icLwp}
zr+z7df5`OjgGuEEj%xH>j*>n!1*fw8wLk@C{a<9TEwgTIiXgsrN>aw4EJf4(Yo`03
zW$?|Hk|={1i51#egKyZJyTrbuP&<F}{mbtJTYJs`L{CB59w&F}&u0$v-vRu;5exlO
z*L07<C7M)v!^GL$NDdTfnuk*VO}aZ;@N+obY7{ZN>vS@sy|A4F?5Hti+5U0;e&8d0
zU)NwfKs94xW@bo<(t<|-K)K%p@KgDIKK9o&VtxWx%%1lxSAS?oEY-yCKk^$L-LIJv
z(8-}tEk+I+@8a>=0Z-rkQ~%Cv_7I@yS>;Xj_yxvR+1!rloZs%%*`D=35zM6qQq%!i
zUKO1~!HU>D*B=Spk3oO`@^54D0=Ouuupf;9K{oAkJMq7n(=W?$^en(|M1LcG_S@r&
z^QriL8wpT>{Ad2pJ;Hz-s2+OA{+#uXgO|H3`Io2ee7>zOM^8}3(2$h3+b-+0*vwJ?
z<50ZV?4D3fRXvZa|C`3Ao}`_k{av{KpkRAW0+Uca>#?8qDU%!R|A!!z&8aAShssW(
z+aUsA9{jf~{a+Wgu8t{VvgRW4`mY49N9$zk$lxV%%0E%QQkY$@lTM6sdql+jBPVQ-
zY~+?~ox&uy1pQv;1I09}b@WLdSAQ-QZD>B#o`1@wf2TJEWOBW>&OG9r6#jC$^V#gF
zz0B5o>J`h#%x+{D85mogc}wsV0%6(5>3Ev?J3+1alNM@HLIW80UkCR$Mq96xJ=&;N
z^N(ASol*wWa`F3|=v9K$cdN*@(flv2oA+EXU}`M+GJ2HlRB@W>zlYW39U|IYI=9RH
z)ujR~ZVG4TjK9UK;Qu?bXz)7#Ov&%u8tgm4E%2N=t;6Q|yPo&W2LIjM_EU(#_Mm91
zepR8<MnN6Fd-Hz|X?yqqEw3}cnEs`(O9Q?+(SLGLe-G<N-6*!2n8@_Eg`lj)zYqP#
zEbGhxjx7cK<!?kp=4Tnt+58_z60Abu`Hgg?irLZH&`_%MpWTxmVdmd6lGO7+M&j~}
zpe*(yW1tv3Zw}3~UD4pX5BSH3X0A-PmygO%S@rX$-M;`R7f>2%(N>=QA3V-OipMd3
z>(Tl~xUT<ie(OKD%N^&rmy(gFe8hB8RH^;2dD#yk??jXTwjRv2KpcGtW|{gC`cDJ&
zh5wr>efOctA1LgG=PE*;?}}glC!*2dYn&&k+rzz8r+%J2`DWRNX^-yt9|Xz3{E{*Y
zS|v%b=C}V}f;@QCn4;BvDR}@@t=1v){|~a(_Je?jk@@JHdgR+8oYo6^@qZE|6;1eQ
zz`9SN_v3%&$&sh2>wmucVfDKha({gE&Gh<%D1#W)e53x0CMbI_wfp~1R%X6PN!8E#
z7yhWIe*VtCKJ+K?DKMCaqJUBZWI%HN?0^0t@B&Zx#f7(@rOcrzDV1mY+5cJ${_@!E
zKiwJO{xg6eAEFOd?aboz<sj`{`uR<2zdUwFklQ}LJ(e<vNzfa;p8^2-2Kh9roZsET
zPqY7L2cbo`_cWEC7T_TMrjh2#w3R;yE`JVcSFE9EzZO(^s_pZcn0-<AtVNrd0Mv7!
zkkfsJXSmC+?EF8i<uAVbEdRkOM#ahj>#s%tlgs$bhF-p~sZ0Vc>cQpIw}ACrwZE_}
zfp#V8wjG+1A9MVBIYn`FKjOs=hK&n0xU4#Bo^huvr!$X47j9Q+xJO-15y#jR_I70n
zE!a!nX_2Q<07QyYF5ame9nL6I&eH7os_j?*?yx@51(>@}J%7w@4LayC7zGRAO)9Sg
zD2-eYT2G(bmfQ1Cb5*Sb7{z66NtJTk_pd$}2~6uY?`|6ej!Xe$hrbK&AJ#9lSUEQQ
z2KFztwmJIgGL{Frksjy#Yw1{!=isD$5VK*&FZapCi?iUe)fm@eY)ugkxbHR{JM*@%
ztpipY?m0E6ZcCGfmO=|XEPQs`CITnNDCyS)C={M64gA}bTX~gv{-z;2&cA-o)43nL
zfbHM{kjx9Erdr0Jnzv?JrrU)zj8dKDoYz-{A$i;ti;D<@zLVhcwl1FH!oO}A^nr?u
za1aj>V%t5Y7;jr51%4st`3&9z1#`IUyeVxmL^_T&T#9-l()Gg0-wGg$2WZn5l37Nd
zz$hCJzb?&h`uXk4-6q6r5ZoSa{H{K5%-h(Mx>2#!%wZjqEun%`s_LpDEk4UM+pO!E
z8&L-sY()FASVFz~7*NnHDK@uxd@8RKm@P)8Pb3B7e4UaXWVpyY1bCyUkBnaWeH{Ne
z$Eed{*K#X)6!$6GpC*FsPba46c+Cgzs}A7Py-Y|c@w5sYmh11@vB#^T0b)0TVr8wh
z?w`GJZ#HiVsvj2z6qF^-s8#vfdK^7U{aeR^B9R>@vwK_=t-bIk-6ffIE!U?)-bOJj
z#--Ty5U`>pdITTlr5VuVWM7eYL0QZPI2_xj%M)PM%^#z`-!BNO^3WudYHBb1r036C
zI@O+T>camd|464`tq-#%YXe2)i8qbTjhR61V9VOnxhvdE9}Dik(FyILU;Bhp1F6GF
zf@`bjt#UK;*!Y=)K+U+%<*>=G8Pjp2pyA!d@+}1ao)(`r<-I%ZW*4VvXSgP-0iRD2
z)5lnl%dq4Ym!mXmS3!)%BLO@;_JDq_o$v1KacLH61f<$Gi|zd7=)$&c{a20RJ;zEb
z{^A2bw`9*$=!dFmOF<RW%p~BCI`G+rzvII-t;!@c&MhYk1Ht>1m(sEQH2Y5~^Z)Q#
zJBGevP2Vi&`{z4mANoZ3R%-D`Wd$!+Jk8VjYT$xm1XB89$U^#T9zMS|f%BoiH9o1;
z%G>wWbHG3vVKL9Pod~c6u#-0Zw3YubsmrRoEzCU)``{J4Nzy#mx0(t01njZ6hnkCp
zwR;PZwF@rHll5Os<C1aD&O<)<-v&bQ&88%)6F)SqE|t;k{_oyv#|{57?cgi>HtI&T
zO5SHx)D>;bF@lMyUJ8rXy7u?r2G$fj$J+HJvosEtalZ1GLI+K`sR061Uv~SIVE*i>
zI*b3|X@><4G6f!px@F|H1^}pF^%A_xX5jS)LtTVjG-OrUHRT26Os}VkQnx=6y>jgD
zTCE<`@l$x;U+wlPKxSJ?lVh7w-W!I5bf2U*Tx>K6xIG*LvusZ82;yTrpj&~Gb`#LZ
z7V#pi^sY77>I?!XL%{sbgaZfa1C?D81DlQhposFLb3U4vJ7D8HCwMrseBtEdfnIn(
zo9>X6KPPN5OHrUmoa+u(PXRjWNY~*#J5lO~SpRbjJa{x@n=4dXP<pFZJ<$1!PpvIl
zhB)v(#;jTQ4rR2tuN2y!#GUKPImfI?{oZ2G*(}*Hi9;b;HZsU3oX^d2+0tXITc22b
ziQHyHLm6(J=G?+T(*XO>q}4F9fxSbZ&h-s2{lGNF)DDbTaq<5$5#vk>c{DH?_06l#
zoB%*MOW7I$fgNNs@Bg7RJK^=;BP#>52sPcs6gQMwInH+dyffwUf+}}>BAr@NK(*J%
zM)q7_$+MZaE+xRJc5WN?s|Q-0i3yMNh_;JxoiXl>^H<*?<1DI#DxdjddbTKe6Io$y
zg~6sZ*;19Xfhq6d$Ca*#!8>i*0*7*m9RNbHGk{QR;LO?mt$s_LraQVb%AJ_=&vukX
zn^tE_cTs48UT@SnJzQor)38T2VDwN*(YU6Ukr>H~PlvwzX8#eYxpG6|KpBxB(M$X|
z7d+oUWvpq*i0a=uioO6{i_sajec)&VD1E{vb}fBD&jkF+8QN^>{b@~RH9ZP-rzd*w
z?hs71|L5WB>$y~8J7=x_T_<?$X^s@tyenEa7F;y29Ck*cohEd2OS>Vr^vaeYZGUBB
z6G-F8@EEB}imTLhZyrszJCSbB)_%#kHl=HVA8nYdpK5S$X$hS3g5B+s8FbnMxat9{
z{(ijwcm&u+X=6#C-2BV?<7Lr9e*z<{x`sWp{$nuPZVj;eb4UM+(Oypt3Q6HNPJp{j
zMH{(V*e1yjXM?w9+3$3c$OJ^ugWzt23vQ^kdJTiBH7**LeM1vu65cL+Jt1!B7ID*_
z3FB3n6zmI4sfZES-_nCRi0+rX7A_@Wqc>S!L=2wU(+7~>Qn#<&ckb6k_<gnjg!*cx
z8!>F-wcjMK;?EO+3pgi9J6S8$$6aIn^i~r~xVA*owL|Sn&FL%-;hjAAALJrxZ05%Q
zL5r2e=~k2c0v9Q$k*u@@tl`F+ECn^uBbrJiSHyg?5x8x>d95ksh~YuOgL0Ba#ocmb
ze8A=%hr8+4kMBnh|MBW|kv7CSVac*vu-yf993IE%KLB~#K1ESrJXfv-nKg0?DZfx?
z5tf<I3H5C4gkE^6e2MnxUYeWA)JT?*<=C2)UVn<)@BuEFdU0qiLP+-9Ag!))EXVk6
zKgWEPy8iD+h`!|!k#^LeY;GQaxAcUV&}$a6zyhuNSFMS%6=_U&4F%@*;d|<{+i&|^
zbS*D~ce2M<By(EM+?3Hhwo!s(zDiIqkZ$D%N}UxnL~(87GY`3iH4>Hmig5oWklf(X
z_uZuIP{dzSrXUryEdU4Vgb^3j2+yn+Dg0_{R}jIu83E~8kGTUslkU$dL8eE@Idd}B
z{I}v>DyU){5!wyc5x;6z#=djh|DavUovLqpQpPMVE{+llIuK?NxC-`7jcQk$HB7O*
zvx!g5?J%2!wEf{amIo9r*#&m7DrCR<1o$}7Gp|yY^8gCV!pgwT)bQ&-X0*3pkMU7J
zl>x3*nnboK<2i8v5bx9TJI|HDw95}u)`oJ3_O85b#2#Nn>8a<k;t7HNpB4nG=IA)g
zB7s4hc}_oKOVVq&A^AUb)b|~FQbfuh1t2<y5no@>%@&#5M{hkP%E}-L6c-$OEWz$}
zDpTSXb|SZs<%`fw7hAh(N!@UR7s%l{+AsCV1C`80Hb=ghXcRF?%KtfWqs&a#S9d-y
zk7Y(3Y*age1Va*BDjTygDWF0p4|NW)C9iakXi*cx^~B)(_KpsVTQ@=C303gNbxQo_
zBI}Hqf~gN`nL_|pt(d_FkN0Z`m}bf4a*CabPzKY*pWlEXEGGkiQ)#T!J7)6JM1D(6
zPpg{a%d+uOvE8cW3oDy|QXx4^CO;;#MO>CZ(6|rI-}1GLGgK2}kg^F^VEt2A@?K0|
zXtyUNU7LxPvXdV}!n@gpjW0~q+~MhtA$bEHXycWMPwSPGwu?k3qcS_~#xq_QbBhXS
z($tgB)zOb6tvpW(crP$eX4mnR8cQ8>nJSpXa5mK-xOGXIb)$M|oiqNHywgD?tK2*f
zcg6vgRDd~J33upu*Eb~twm$!1yK`3pdio|Xp=nvmT$?r9q*zi*^5Cif;G`5yia)BU
zNH5Abqi?kcYfHpEmYh7Nk-!dKXKy?)8F`G2x_w`5k65kbhr&uyXs&91Ri~T!eED<e
zTxAyByogSU*&Hp9xe9t$4=(!*`}PHr;d!|V;drluscN*LX+aby^b<V(tXn6d4$*R{
z6&FCM-XWpvnLj(IzjBZL2w~rsqfYB!zx%96F1L+eS8IXwh?pM8w3!SV@O0_n?_K`$
zoI^hUk<e&A|Jp}Itq}*9;|l8YOA;hLGs}rL&MgfaQ`}J>F*mmYk+ShPcP5X5rX?pz
zeCB1cY(Kk2<d&X^oZ(q_$kv}xPk9Q>Tpn_TcV&@mb4w{y6Xtca_ue4~94G0OROuN)
zo}cdTy%98unK{klzja=o^l@z7gAmYGPMj()Z;a+CCl7%1<fl042QoPM2SVtWZb)C4
z&f)}c3AqzBN94B%wSlUtk2R|;(ztMAJcG81gkwW~kDZ+&kPFjAYa0k2oYz;^Y0p6{
z49DHI3CAu847n2uoEF4D!_POrocA8%aS`W==o5=FtMbetu0<mT-;5}9E7o9K$_IKA
zh9-wx?BQS+AHusAO2u$&ZF3bIt}gZN{BDQy_GZxFPlf;fijvvHx&`yE=mue%-QWk5
z>O)KvwU=^oht?ii3Kp6np4O<;zM%nkxsW$uYjETAiu@A!J+5EQilbX?#NpL4kAQfk
zc|QT)+sH}Ys>r>`ya%FfHiR;)FqHBi4%s6EU0;hqVujNERE)w5)YrPQ2NkFNCOWTT
z%<hG8h>7YIj4shHfIpK+ec+AN$yry{{3C3`APl-Tc?Ov%+suLVbF?Yfm{_P*Xo$fe
z6v%TP1AZ*SxKyQp*%4O=e4(ljlU^}I_Vq6xCgM;$Y{12%;Jt_6p4pI{kydGcK|4fZ
zl+<11GnNqk(F^bZtKJz|F$1mX5Z>$6+L3Wk;{2o%xiJ|8pzfLv2h7gRmGz;)D?EPV
zhvcWbQ~DcFkMGc3;+SovU^zczQA*T|&<Ol!)0SvY;4UsA0yug7DP%l{|7O%NX)uY#
zf9X@q7Ia;~O$neKjIl|$dv3WzNv`(*akygsIT&qURI^?Mps;>U_MJ2!%#M(4_(`j$
z31Gs)Y#aEz|IHHM)YXWsJjlUTesW`ME}4LZ9CJxjj}~1ci>-Dx7xe>7R4yZmbMSHk
zX1zE&C9q0g;`Q%)GFoq_dVUE%Kv=k*T&HW~I)G8hL|zyw%k_Zmy{qcg+{5{H?5Y3r
z!iha#+m>+eR;MS{=>8fNWbv4^!d0jEE2(&f-ZRJgwH79UncGO%B23sW&n|y(B5_C;
z7xI?rUX_JIy7Iy$3G2F|eT3snaclVmlt}^6R^Gq?W>G^g_&Mj+j1iqqv#tSvIuwvp
zF_LVlXA%fS>Jip43FLbSV(WyW0&Z@F?-s)1eK=*=A8fLj`DE(omLo=%Bb+wr5VidP
zs7|z~>Af-VQnOPMFWbfky)7(G+WxDiB2SHpM~~NlpA7ne$K4j-mhSQEqniz8Ez_;_
z@=oTQt_X{p25-1}w9y+STjgIHKA(ydQ(p9_y}m>w@C4K;k|)T}>03%V)whv{h=-$S
z-ms;fAP04MJcw(3$)`RKMwCV<Y~GzNM{ch9dM~+(t_hvz@j`WYH!G29HH?-*__H*j
zMRQ~wfB&0HWPmXMr#C2r@PFHyL@?dz4)LYC2KGf14bJ<ZOcyUaBC?Kp?zYJ7&4?eZ
zz@N+Yl)+91GwKs#&|GU)YEFbgps#V(*w`5>7Rl>pv@(ibK4PzxMX2~mEuud^Q;_sv
zAGR8W*ReUC)_O%Xb$soSjl)?ta(aXg+7QR0bnnaF=FOE5rCI>&AS@uTF-E$0^n=i5
z03r93bE7?v%#fwC(K1=Otk7)EO65#)A5YPEffz`r8>{m8gdIScvGmvlzIGr%aZN3S
z=W|7QxwQP(DV_@tncsKwXALNjtN62-j__-g`i!)0)wl3_Z&l8hHQ$tN7yypyPqJw#
zLue9&xPoV95^v1jVFBRxM={saw$|7B%qmVr$i6QsPBeo9#4Z4V*$cBd9C^9IXzpcm
z;Mhv$a9N1wMJfZbSmX^hlG)6P=mh|V|5436z>po^H4b1}y052m75o7joX)-qmmLBy
zo%+SVUeSu+iPuHtgSq9+H|2-ChnyVKRU?{Yvua6;A9><*KeWl#9RSkHb{6XG^zNs~
zfmgp2sl0ztN>ZIJi%c0bs_KAJZ>Qd^;zbhux9VA{Mql$dlSDzK=IHH>_4h5Lg8_a0
z*5+*|CAOT-K$`u#7+9b8+QnnLI_}ZjNy*0sD+FMm!o;X>kcUVZykKJ4zSsNRk%6dG
zqc(Jpp&pk7*9dyBQ-~S2wl%~(t3Q<8yEJfPBzNAZ#2aA8p(C{64y-+f-b>dt>vd?Z
zH6I;zS`m?{P*~s6Sbu6bu=$W>a+4@y>i@xIQ{CoMLr1#m5H4b)P^@oglOxG8J9+(x
zHDr3u16dX(3a`t41@^mCo(SN-Nj|S@z-_)2c;edt@_q{tk8ULkF&JV5a|*V`<^VG}
z#~PBtA!2A()bb$H$*|Pwz9Lebpd`1XD(y-NNnF+h7|mR&NqhbAe@(A<gOkhPF7U3}
z)kk8J-5qV49HhZy-}PhG%~`h=s`Ai&%}R5KJ1NW4lbkN4BGN+vaVw?|&O;ow01SL9
zjwGL8P5-%lgoU!~`FHSz3fDm5LG=mZnE@qNL@PkUAd;QrDd!A4`f>CDe<jcToV_--
zNs7bVwYZZ2qhH?qq#C$b73<#*5R$c!Ij`;)2E1!v;I%KQGj9(VeK)wb*Mn~SWAyvB
z7oz-$#<iN1rLa1BYP~JdM@TW-La=Hf`2#LmQp0C&)v3U_HuKb?<~0W~pk|oY<V^d7
zF^$*0uN3m4pnS@ar>&QTr3Ni$nq<ob4jir`Exi<5(D%uQp1^6Vb4BL#9k<cF*!!*!
z2#4KMy4FHBdR7aJAHuQad7xEG`3(n%Ey7ukOfpR2nX0&4yXIwN@o0i*jcHAA)g!In
zNI}eXju`0a#UQ~1_=u;ME<nx&vP*(Gw@USCNhkCg5-yixt7bRK{Dw=M_{13`pVhU`
zKM9G|Gq(JsxM#{ZQ&FbwugllW&(bQ*+9+;KrI!zx!ecb=qzDs>6fP1_5b24fh8`<v
zXGl-)dJN!`<pZqf9bH{<WQPxavxT-8(((!U^|zLgwb$A~OKUP3TIE)Q)(uH>Pn!#i
zHKm6?mgSZWqFsjO0pwYfm16;PQXErWUOxDz<C($Xlp%RSkzRgD{qglzN5J<+$XHx-
z4tcff76!ng`TSwMKEZY3b&}sQ(rKg!JKJ!C>!_5&>m<*uzW_={G6&n{Jdp+E3bAQj
z_8s13u5V3)BzC?1wyV3{s|>bc8ZROR)V(9%{OcB4LCAXYoCX0;8Y!+(f<#Q1rH^pD
z)!EY_X9V2j^kyS)ihllB215td7<wPI?aAnl&a*Ab4v@m+x~z`}T1k2z+c;yDmXTza
zcQHo*sJdL94&4Ru+tw(+zrG3u*(g9v`j*!oD{Mp$bXNeWX>~;M;<Nq!;GDPwfiOgI
ztyfMvmnN4-MR+yFD@I~=(0;!<$a@daa4Cqd)#)6zPz^+0i{PHfBaJOo40d&SJPh3m
zmP6QkVHN_&Lj!pz4;;w5@lniRSx%gC!Msvw637pC%QoWGc8AT*J(zlm^wH7vbD;7d
zkR{LMdo-}r=_C*i%aErh6RGX)PjuZR!dL>@WZNMtHLl<WY1BC!*}`R$AksT9FmNY*
zaWXdjxxfSS{$dO7{t5)5r349faUF7dh?>0;b%21i=<V%gpU2OKi6Q1HIuh`#6HpWT
zPf@^1k(8{NvM#f1+T4WEz!xfK+Y-fhGl@~wL-1fKfLZ@rfAaJtN*Mz9sD@K`Zl%DP
zKOOn&eK^H=4DF)5)oNy^di@c%3BLXYZr8j7P_DCcQc*?g0VWbd%4QNB{Yj5xrXA%I
zWu|CyR2HbY-iFm}(J=`*$Ur;Yj684K&`m^V+B?GV)5DJw9WB0e%SPAA9GRN)Cgu^N
zV+vN*k42M+cWl(fS>8V%Q@WR<qq;FRF)TQ51oKWC6DlZs37VCUQ%(UWU_w?zOEcAD
zu05uAg0JxVG!<Se2pe8U%9oYAICZW6kSf>YO7*vHzgAA&E3XYI-Dzk7beKu3HnwX`
zs?WHqygwi;v2^3PuFbGz1$yjix!aet(mXzZSGryn^U;Tqi?CP^00WMXt5%Y4ZD<YW
zc1W0l__Eu8{BnFQ;<!R*+vb|A_d3j$LxYi4Z_#HfLuNSORP9jFMgHFty<hi#x67x<
z)4}`th9kM!f~E9{vJL=NKDt;)Sv4u#naz@8i0h>Rvv@_#z{tKJmv#C62oimP0H;^e
zO`B$xm4dPnV!Vj&IhhM*7%r<5XYM=h-(!|-eLrSDe1fm*Qae{fYiWm1^-Qy~1{_Mh
z#{pbF5-050svY8n4|or`&KAjeObWx-aebRx$_Os+4Ik%^Prk^;5bG;yU4#ls-ESU~
z|E3VHkF-BUc0A?-X~})5eASfHS=Jz<4_1)JKRMN$1zo0jv_iktn_uDnwAaWVok+YS
zKU)MRiGOmfjT*XH{XX`5y7Tyx7fWf0Te*3K@sOgVOV)xBow<4W?AFBc^iwzv7|=kS
zZcYb4RQ=JS@GYOKU9LryC=~hq)gGdEZ@xibGk}z^svh*}-**qU_d9qkXz+b8vr-v*
zSQL4)r~OQYFqd@Z|CEJZ2B^2XhshTZ&n;aci{mr5&)FN6D>do)*A~V(rxqPk@>Uxk
zj5Wp&p26&Y3RFlB-<y)do*z@lox3_%Zu&`a<71^pO$Ga4=PN97+;ZWmzl;2mWpCya
zTRm>nMxw}rDb1L!W~Yuume|(V1)pe_il<QLig;v<UtWf5W}BGz+~;(#`6*Q!nwO-&
zW~KSK>=XfAsLKQ(<kI=Y5-#^a@}kWrJy1)|XG*>UsD&@hWj+SK8n3>JQ(!l%fwJD?
zjuZPPu#;q_gCA6%eJ;>47rQP(Kz!Jw{!Di>FZV2iIO4kQTn6u1P<1*4(x1Z?QvrqQ
z7{@&Qwt&Jy%KQFq+-5<CzMX6W&aj9`M<ehn)Bw)3oMFF)A7#%lAU)gM(^0dkpV%*)
zcP29%CrXvI?P^8jO!7+l(!|O-l!C2KDdPLMZDpR+RRTCee^g{SHR3AHa}K%mvJJ+1
zaLX8>YBUy9=gSL4`h_5V_hueuMk^A|cjdMZJWaCaBsluGs18;&lnuQ+RdK#RI7z{j
z_fEMhU0Y7Z^>+;;TfHZ19pp5IHZdkvo55Nn^Er|0YkN<Km{y<mwi=lGdNnLYq(#X0
z3yfp#4S}agpk^vWJ)CdF<NC{z4`(SkBK6^;f-3FMQDaNgjBIN)-Vlkn`{GVKeC1;|
zd7QnnMygl8t45~HajnNM(4rt)9e_`N!R51hUnf(Hw7}ulX0vmuf>$ewD(c_V@37Fh
zFN1%1@eBp~<|(s$l*;40>l%>Q#w6^PP!}@s7(U+~U|o-8uD*)meX<bgN<-<!kDgh}
z3`=l|+-E52?b3YGD0aR&6yWZRgO!he8P-Vxy&1k8EONoh1EPzghYOXhcX3OpW5ft9
z<^4%R_*Hqi4^D)h{CWSOSl#DstilA-Lf7VGZQsV^l%Wsh12#h7_eQR@)_o=t?=WFC
zA{8k2fy)xM>m+Zr@?w67+m}Cp%DFnZ=6yn8p(sFz9F{MiR3078o^p2uW}8w0MlG{g
z16TGU4+g_rTct8<52#`k$qO6=KYVJ6D*ay5Al|8_mOf*Tg2bmqwbCCZ+maIQL?c#G
z>~D>;X5JP6Kx}(Fn)dqJwpIttwY41}yu;O+=?q$9O!oR8HU8!NcDzOq_HW1QfK9QN
z7vCRwF5mby?|kS<jP#FQ0MCO(l6R0glpCTOq&uVyugWUqnwR-1%|OGXd#vM$31_6D
z{hZ1{=FiZ|>ma(@YtG5N^y=mb1?6Y`rh8e!OWKN@XCfl5Cy3xXYI=#J+lUm9I-T^_
zvZPkU(p<6Qq;Yuf{UK(6DS9?}#Qux6kC8f(rc-?#-5**|VH^mZ3(Tpt7Fs*yv2p(K
z(33-PBU&(WExmfVq>J&wjR6*=jVE57o~-#`Bmyg-&n;Gc|Gnn=OkUAu8kzWhcs;Wy
z;2mbod%mY{NZu8xEiIGjPG$&2D?EWgf!!CN3-Vw!T3~%qBx18WhSw%3eI*4v$9KnQ
zzocYU=O_(j?_%|x8rmt8MPmk|oDE=y4J4|Inhe@wOx;Xx8U$eKl~7j5iz^z{pA~Cn
zvz-8!D{Ebnq|%6m5t3#5K-Tqn(!Ncv6HDz>$ul1_5jEX`fp{_Z&aKUrbU~-Tsdj1^
zmFjOF#v7Y|g~~8rU-bBxQ8zP12#A`N2k}jC3ed5~W`=0Q=<*~C9QcH5>DOcr)(A~g
zxm2IX35ttUInNBa6&Ub1jd^;H45YW`8euHVEWy=Mu{<lBh+rW|+8|hlruN8GSlD9k
zF(E30i!4pv42W@y&)zi3t@(5fTap|;;M0{T>DT9#PsqectN|t17nKCtWx8SYwF2d}
z+%R1uXC3+R1bRKs;hXTe*a8`VY1eycGp4`ulX|IjlZOAjc+E<ew9>0xLSi-dz?IVx
zqzy))d~*WWSt&)=43sElG&fkin${ekNGk8VA!K-vb|5V~ODU-p$lZeLIkXN!XyS$D
zbAA-Y0n{O>D_7ldN^44RfM2fg<sG1Vs3uLClPI7tf)#FMB)F8lx+OdC{+!XA1U=WH
z6v8>9Lcx3FL;bVHErd~bk!6HZTe7dT%mbqafI8So9@B>zkm@sgr72dk6(SFQcHq^)
zsmD~=|703RPwsN%jjWW8D@eI4<mGJCfr}eKbN`RC?|`Rz|Nk#JDGCh~iEc@DvO-pp
zN+^3%w&U0%<D6r(g~|#UrECWWN9NH$_I5aC_Be-(gL97K{6DAN?cVS2`~5%8qkE4!
z&gcDpy<dAg-!JWSo-0Dir9)F*wo5`{%pwmW*mHFQgLMu0I>f@wcfuZ@x!$Q&te@O{
z5J<SL6Qrd!{NxwkgyvP7*b$~S5kC0R2i_os4#oLLsC8}1EorD*V?AWJfv2R_vacq$
zhw^|~mCLWYs&}c`Y~<>E<8kM=`96i94A{+h8!pks`I)@=94_Pb;g`-@Iw{?y&)>=6
z0@qejN<>P9s~LTOOAAna%{~zzl@Y*OUQ1F%yV@shX;e&vXy7-jwF>~C_iPcPg41%g
z@ep6%(j@rso%B5Bqa?hl^Tfv|y}*sd_jtUYJq+~66~YI0tSgMJbR^DQQ0WvT_lUJg
zP!8-u%dH%#n0uI`e*qX0-+7>K<2cvU>I}8WmnZ0Yv>#7BTq5xz$F=O6i=Y6p^<;c^
zQ4-sSh5m|+kiUGK@AU<6?AsUcc9?*xTHkr<uS@qH<Eq=J{mpg<o<2r8M!62!PsPXE
zC;KJ0wc?80w+;)Z_5%r%+}xXQ8;$yLnnHP&g$NvEVqd1#=*?t$bMEl{4{o<|`)l37
zFXTLODZ?8;ifilSMj!9+8a>94P2D*^^XP`Xpd(k&mBq>~E$qz|5oB-iBj@YapR}IE
zKVl4zUmZAsN7lQ@O>J0v5xfn-eP!>9@md43b*3(eYppOx`GuKr!CdR@Un-*C{xc_9
zbM)_yJTEJJyZ<4}?P2v!4{hG|<el#rx}=rYSEVmmBF;HWUf9E#<}&AO5?tWOQs0rF
zW0f-Giy*nVYUx-AUUDsB>TeBcbhOA?#a<{;qDZwsm-sEEXC7yC&m_Hicl*i#lT!_I
zZhUzQqeBf>*ec`(J=Sut(zYCpDvG=4xP6xk1%-vpY#`Lbfe%rGPAgZ-vUD?M37D;n
zj5?(>F-2-;ekp#a+?zmbjAE!$OkG5i-{xCbxAc_sjFc|>CFYi_nPBY((5Af^i3qfs
zgnjEW(ZS>M4Tg)xG11X8MQw^0Au)9N`Y=?fC>cnU6dwt8ftEXVnM-H3^D;T3woNk%
z6|p-f#x$5r&KHy;F;CP}QFJ0Fc9o-AAe|lquBBDX3Nxd3B8V8vE&`Uzb*4wg0#oV7
zMlE3ws+`NtnR&@1igXUUO2(Cx`V9ERF+z%zsyV66U7UVBF`V9u4$$?XbvD$%JL3D+
zuATFSo6ShVAGcpS2`K-T-lxS}CP_6lJ9g^b;`H?Ns=>A&sn6SbcD*vy=0#}3QEoQj
zesRHJyQyCL`HI7tk1k9eUg|2RZ#-{cYMAB-!P7Gzeq$H|T4@W^|D-Y=1Me%+Pp{mO
zV$d-hDYSTdT57SwmF+}RGJ6t-pzJC^aJ>N`baq4FPDZufWMK|iH|7r4o6h9iz|ps%
z?8adVBFoWT+P&Ku_I8?3FwOLu{O_(ciInC>$Szz;lABQ4de9mpM4rq@k(x>_gq8Go
zeh|M$4qTgf{GR1{oT&MxAX9ZYK7AliF~PZVwvH3F<Y!_(RMJxw;0scjijoq12aM~O
zJPQJeVx)H^j83z!P1R<~(yJI!?UH3TfV)9fohPTK4J}WBo02Q28taiqbJp-!`#gwW
zKh<K{GRY0+&In#Ie_>wXBe#h2lya-7iN!oID!#Avw|EukuiXUA{Hh;!725?<m=9$F
zf7&O^jf$w8NHS3qHfnO@wC#F=h`{5DrChhXqa}Sp7HWYh?`ymp`RqSw4(`wI6?mMu
zZKk(>y|2{&&SYH2jZpS2Rxyfa@|EF)SDhGG-Wk4;gv_!03_;n7S0UG({M}<FIkKl)
z9tg&tDScOsvVs&!8&_A)wsw@x7iJt?bFA9iYic7UzlbUl<HC3O6?*Y{Ome?J-EBc$
z$YK(cwOm&?Yl0c}Dp?4au`u@=x<s+gfNzY+jJR8;BQ&K4KIEG^&BFXYFS)}g@3qgR
z+Qu4V^V^cW=DM$^EmU;H75Y4PYh3D2gu+@%Fr9wy+d8<{2eZ}dl_r`jJm2fXxDEid
z)Ofm*-61D8%51BB-JN16oi^xm#woaz&O$h{e)+^~jS6`_t3G*EJ9Gi-U3llxLq;ab
zftdP11(P@nFUK$z7>c=XJ?21!f=cAM&-d4c0(iV<3fyYeZZ1@`9%DHA$}l<La_CN+
zeZ>=+^F7FT?KgnCFK6|^GU(_JqbAN;5HP!g<xnbrazOEA-8JZD?1w}2lX<&ClvP*-
zOJF0*F_07XP*gR8%Hvsg1L>lOtMjyuKJQ9xg3IJ#exAGtZn^FNsu|t^Qh=JsuCB|i
zPo5aeAJK{DR}q^ta#r6Kj1s!0%PRS{4YFS8FqdpkUG6psN#!}ZUQkV49=KXQTh0Zp
zl_ntq&XD`I(iRTskHeZoi*j3!1f~!BQ6QAX7@5_YXYS>$-BtdCJ8^`i0G`?9CQ-~?
zE@vZaZdEP$s(0c_{?qR{o5cEk8yF|^k}7bO8sX$Y&*@A?vT(L#PChE(Zi?><#X$0o
zs<n4QoB?fz6auNCq*46(>Q>^S<ILk1Tb41IOR3J^niPZOm<s-!1^7ugR_$P<m8A?5
zoy_hXpcm05Rrf;p<m-x>^j8~6b7UOJMZ1PM1Q>iKrd+KP6L;jMTQfjK#CA6N?_QlN
zyDfUy$G>W=Wm2nmCs;#t{*@@e7CzfKN9nWohQOxfOG`FOW<|L^Hpb>3yQjQBFM3qm
zYz>oRkOopQMV=E7vC`IB=uf-XYa9T96m0FB8_39CUS96xGF|H4a>&t6Q8a;95lVU!
zz*!p8+0@reKjxJIi=_OXzVFYT@-Z=GmVL^+t#t8y!^o?wrzW3<TzhM$QCl|6Mw%ke
zk)AIE#H$_L&Mjil7kVdFlohqQv$Ogx(~)xyuH4cNBX<q;+Bk82y?6Z=T3u)l3F9cJ
zv14*WAYPza8udz(2zl32CrkQ6QrG3Jf>>@xguF1d5OUo2ix2h1Sms?0Lj7RO@8%QG
zCY=h!4B_F`^TVs>d%Js$8%=t$i)KeH1$LbWJ-C(yiHlo4U%ORL=pZ=(d@6KJZr8ar
z?nqyTftq-(MVSIrRmI#>&*E_uJRh?3Jf_GRTj*(UjE$C#649%ndoI#m=CR_O1j(sP
zwx#D(wHn>N!v<(AzAoea*W-P>Kcmm@h4v+m)O+6-_qA)4Yk$G$^xKT*F9H_I4W&yF
z_W4Bwl=Hl)E8{_W1VI!OoOnB!F0MQ4k{{Km7vhj$I4h49*py5X9+6bnFONjzSGOTX
zR9G*qc{JE}Uxb_ZmA*F^h9y`s1iSm1VP2`Uvu`@r=c*nMcnCbN*l9bH7b<AFmh2V7
z*ECRWFeJeFef00}_A|e&jJ7<Q*YR_Bp&bPhZuiT8_$&pt$3}+VWmzp5roUpWSWwn<
zf-VME{xF2u4^?<sXQ@HEK_}`+GxrCQ9W;6#+(<ALeQk!}Q)+1bpq+C7PyjtuwtK+^
zpc6ba2GG~3_AQZ>zssG2rE{j4)tiD=+uOJnkuQXe71M`anf_cBL?dYUpAPxE$$%JG
zwQPYu>UeJ>bDvJF!}s7Z`!NiPQ!>|B-$d_XD?jKZs`F<4ib!FZtYZ|RWgR&627<W<
zh2?{`5N$j)1|3Xr+|rMGo(2|^)#jG>%4}PZTCnyu8S;6=$%Nb&Y#^r0@Mj`?i*EJz
zepK2nzRJb6?XzS1-rEMZ#)vo%(VPW~A-Oo{Xg;_cv_-Pf4rYFRA#*~>(BRD#nNo2J
zv3X!sq-Ts~mMy$)(BcU@q-|o9$?Kp1byM34N3R_q=A*@>iZFrzxAZAro>qgn9!GDP
z0zcdraHaOAAcy}$VSlG2&C1>Y0lWYkD^rJ_E(TpN9q!dXbubLX6v%v#UX%|f(7s!s
z?X?Q{!%JT_xf@UqDAR%6AVj{(<AsWY_fvYsSW#P|?V%(_no2^HPdGz28+GNDKC1Rq
z*hk74+LHUK4es^yH1!xyU+Med-8!7a&L8}q3*e)ZJn*aA`-QCEiS|p`7K^G$pkN-q
zHWH){9@Job6|ELoen;=nsY@rKO<?YP%#XBLiwU))3Gx&vllRno(L9W|AGzV!L+8U-
zI>+3;ahEB#VDk(otT&6aKrvixruc$q1nTEg2DZ$FL`$E`dE*|-22DbeAVp^kde;h}
zc@bAtev<@NneC+iTaw!^(ueT6DeOIXTa@p-z`jew-N5~PFW=!~eFjX{n@CpBLPg^d
zI*j^!&cRc==#~z!1fM=S<Pc%;VdYt(Yk6?%S)xOD)wmpVbuNlT$yt}Qe;21{Jlxwa
zEo5ywo~4}scdoln|Lo7?^smlS`(65%+pJ`?%TC0FTsZ#%w0oK_`kWQ_9WH`P32(2@
zyy_@vj2wOGBk2%9e{G!PETJ>czRT2i#ZdvMRfcV2_!BZ<gQ;EhmxKAbqWkD=3SSJL
zLmFLhExkr?fbr=9jjYqrpz{pG-F%Tl*FKdibYo$;Ex<EFfrEO*>z1#KjMGp&4jbcT
zt$T4`^(%h_r|%y<`<+35G}->Hfqqk?#g5x~b_s)2cmvLOu<m5s|6)Staa=}wNUHXr
z(Wi@5-6pWyyvyJsa0TJ*dM#-jFh+;yXA#jYolI9vi-P2>O+8l}<$stF<paCj{%lA6
zu{)YXe?NlY4W?HC&vx&M2uW21`MrpCYhtH2f1EKP&LudAvMdi|N;ctwnwlr-BJjNo
z^BSyo6>Ch5p^&#jsgB+U-R!~K>#4ubOth!df5nsgv2EH$e|ikxw+*?@d#QdWLomxh
z=8$VDe|_5VLgevT;g7n@LEZ-!(Eeeyg(#wQIm#pvI$A_{OQ=oW%uUUWWHfQ+aWJCL
zzw^h}Y5gw*{^6WM3~TD?85rr*M^9#*zGl@xcOUQAP9!oiE=L3RYk;Pm5pI(RgjLfm
zW7AyCY6v16i7J;SZ*##g%!hdk@5-%m8MBBzUaJm_fNoUAt-g9dfA)_H(f(n(z*>I|
z2hIi~Ypi%q;ea*hSqX?8<1<qfYhzH!Ffcj)T2<Qc=3)$6ahs>SbX!vd;M<^#5`~rJ
z-5^&>r9KU~Ku@v2eDHhB#@OV8Px~mm{5s7Q&Zk`UzY#=PEtr@47|!11rna^gfZ?ZO
zk$GC_Q)ue@cY!erl@FiBZJB>!ZrXsb2|0b>1K*QR=N`ZUk;JGyII%?BZ6L3uckSWZ
zw%KZ_n@ySJ@$~QP<V5fN5Hyn~+cbat@C&p3i`3;B@LpnIB*!PdGD8N9@jiLHynJwi
z@8H1+p;OI<eR-izcl7GaJ<Ma<0)y^UVGT_osxn4HK6~V2xw`-YeTKM0mLZ;yVt`$C
z!(1|N&G#!gD`>uc{VPG*C+Lp+yJh<!5P)c$4hFDfc7z>^)f7%WyK6@SA5##DU*sOq
zPe&!0<u-G<x1L97kDf=z2wO7p#k;(?ryl$E;O7d;bG32?B5u?pYwYDwuAvG`{dB2$
z5K&{(yq0Pv#z1ndwp#Erk$u~^i)5k~e(>YhB~DxnGWkxWAHvD|cUvsDn;v!KBi#d$
z4OzCGI)?-cqAy+Y+YR#bV-(qi)wvP8Uk!8x(WTz7qxbsUJG9W78CS-ws@Qk<ID>+<
z{fx15si~g912V;pT@7^4hUCyKF-x{Xim3da8{WoA2EL;a``%a+t;?;+(r*Bc%Z2pT
z@$Lysd|iY7pp63|ThoDfi&@$%i1Ytm=$B9YYX5@gKy;-71rH9=yDU6~zw`L(F^D@O
zWoJ^xvhqwI2qeljDdcRKs)w$P#(Eg@F{~NRKHw7aYo!XvdYHa;=~Kxv^|`_ySL%&w
ziF3Dw@C;z)cA1%1YZ<!wjd~`_+r2AQd7xaa84QlnK=LFq#2zaF0d<XmcNJHGAwOOQ
zI=%1B?LQgf5AXFiAMqM^JJTrx-o*X`u_94^Sfs)}Ik96@Njn)9#{IV1cUldv8O1(a
zj+uT6lDvm!JXoCn3~-!_&M1z`V#OH!eZ12{^A5z<*n{ttyv5%111BDQ6Q?njA+q~6
zB&%qZ2J=bN!E?uIM1L;m+q?f@B)ZjW#vXQEuVbVu9eoPoHAQBeW_WO|k;zs&)WD+u
zKmx?#aYg~JWryzb(03uoN}+KSkr3}qw6$FcRG3Yj_8P_{?RtHIS3aE&!@ADcS>=wu
zZY*6D;%K_h&0fuPR*>?`WLl~VUG$#=ssCs-Gw%ekNHRw!m-!vKq%srw6j+W=Q!q%-
z^t2a@^q{3t;}X%2QFyd}Qne|LFU5Br$bJ<f**A{7f!cb%DW@~cFdG6^*Ul~KR$qFe
z?5bRrk5cr*6y-x`(T?N4iX{-n?_@0aY305fm_KccH^(kI;;3~)TL^E}^M`aXLxUl)
zKu$l%A;oMsBteA8J6(BO*wyiche0nNlRruh&#S`PcXg|NvWa7p^CU!%*Ex-XP%rHV
z{Sd|P7V}r0{_&5$%W3Lcx_IRYFE<bWj!Ar0i_6=PxGt4ul_`M^_Cw~fwsD0};Wx5w
z-t@saLXSnR2sXX(9%BeT1F&lo@3Uh;%6sXY{~UPvN4o#C=e!uY;GA~4C=ugSkKUWC
z^o(?I!l`BHHnxFJh4PUp%CNV2aZL|-=mmipPxIZkzoC#IK_CCK*Y(|0e=}#w2X+~y
zB3X=l;&Ek>RzCBa=bY4waZ~-a62#0Sp7hxOJVdz@NAHiA24Wtx^<O_Al^Ag7%}JZ5
zO&h$^x!$zN>v9@ek)e3wuV10u44OIm!_E131^{G98O)w(zRe4~a18PTuj0Gn3dZif
z#`xp-{`G8w4*?hp+@Ug0L?sd1N`76(mnZ*f&wr}(-?{O_cRztPy7;kV8{yAU&tLuA
zzft^)N|Fay!+Jfo^Vm08aCoy#>gVIWz57pVQ8oi+*dylUHGZ8c$&B1a{;$7<cS_;J
zHn}O+(?dTev%WZynMvDTe<$h>dj2jBU#QDVg8{1_hdSq4Tod~*&+l(^DcsMyP0qlT
zKM5#;4eq{n;D7&?4>Z`0v(-7PG=O11ncUq~@IS7F)tYt|n^T=%(5%0HOZo0=oIkey
zudGD-1dT4IX;5VKRE6~4Gbc4K>HB_w3ja8ke=<=YE&`iy8o46<<5S-)$bVvi?~($D
z#URj%7BL`y1<v~M&NlD=pKlRo15P5{Re0!&p2|$w7Vy6^^#@a66SvUlRp#%M%goz0
z`QI=SK;SPb*x>*`$I=I-@mfFB4Nc|=bk2WHkp8psj8g8|-tInk4EpCUWP^;tep2k)
zyFU&?c@IsjJ|$j><2-rHPhH}BE}&-k`-%Mcj{jiOe;mLPjjGj)A__DSn-f&_``z>b
zg!-xPzq1*Qi+}F!Cau2|H*!<%dzLGVJ@roruHW_3x5t0uonkhc*VHJlsq{;=J@ZPC
z_kX=32Wvo6l!sS+^5Xb%w860_PLJO^{MQWtOY6(4-E4YW{p8^Ik<ov7-KWad1T+UU
zfBXFR-=qDXwbV0}uXan)-W2Gj)S|@tI-C4{i6Lz_f1DHT6#jMq%DJ?oBMfLv15mna
zbkP@phI7`LN@x2gr~heL4&|QPz`3#vXaD6j250_!bmgcgv)h-~2l5ezh(jr{x31Eq
znvPYRPyEW*4p+8E{E1@uAD3HvjCLOFiJFE#&qI*0;D6Y3-x{s+G+<Fy;SXo-yXbw(
z2K>TEKLzoo5WrGXd3^tO%IJ&b`Wu<I(YXVONV$c@(-hTIX}ah?CG98k{(R=|e2%3d
z4niiv(-Xh&pgvQ<_uJHd{>FcH%2FYK*E56~cJ==u)EDTQe-iZD_xyv^`k`#1Xv(Ic
zG)e0hAD}%JH1ps1qBOPi9MlQunuTM~znM=!e2cf~{uhFd4WdzDR5LwHimBjx`0(En
z;ET3M#nbSje1^gPwA{HKyVc>po&V1y?{Dk*NtR$~et;Q-U`?UX2Vd!&*z;8yu&c7X
zusOb(|1BBQZU6|Ni`rt~WRShUq-lyrQMT?CfzsgHJEpe*FJ-V2!yrG5ErkGMb+cBf
zRl0jQ-}cM8g=%*GwmjP2{!K3yFCE>#ZHQ4T=+tN9E5zRP!Da@Dle$;RUac~g$_nrm
zMF}|!Ty6z1xgT{q>c(6==E*x>q%gT`n?jb}xiJwt)D*eT!&*&_x7_*3cK`(&`ne=`
zv{p2Ac#_?Dl&>tG+o*VG<>j#90r_9;5P&HqTC@G<`FweYy$hV7$Og2PIZ$iFw2ko=
zO8H{xnV74M89Fjzny%|j9i)WmS*SqhHyQ}ZG7L^vLVE}7Vf_IoW!N{A+}u{8xwtlY
zKE85x(|Dll;Q0+@=bH9*85H)csbY1xdtaT&)5_h<c`e6$@!pub)YjS7?PWlTva-34
zhUffE*uTB=5LCAPMYR_T0P4ncW&olB))AyUbUB4>QH#@geK|(-lG9t<{+1Mrmu0#S
zrR<jjTehGU#>jJyYm0}hu64=QNVi7z-eP{GG>w-SQ6xk56cpCf(Q|PH@)mRP3-788
z(Q!Uh7<@t@y|{gQq}^9<p}mv75k^H8cGE#Qngx2BFH1;GCT1mUG%S)PlXjD4TP!af
zDlYS^X@yqo#F-R;-y!x^T*R3aE~Y4!6wk-6@s5I?{V<;2H}R_vRIEnZ&1l6@Q1<J^
ziVU0W5CQ6|w&*KU(GJ7ipagP#U`tA&GM}eLwD9F}@*{*96OKvqi%avdDhL$cXO9lw
zF3sNe%*r}6d|#H$6#*H$jl%bPPb^Gwv4)Glg1<Mh3JY6>rfW#IVvXd;>#_-(vo@NW
zpM5nc?g@6<@p+)4uoz)Y(MmBetHTaDpM?P_D@=&_0Ut=8)J@Doa|s{(M{`xhlI<+z
zG^<_AxSjLC54YiaH1N$vD09&wtUFc2>p><{buU<KG_t&0vZl1+^ZmNQ^i9mNdG|zP
z6fM=vnR=@2<-KtOD%^2%m)-?=(q5?|&vz{Rb~w(D3JTxVJ&NX165fTSySDjktggc0
zk-M?Qu3`Z8k>-sGpRj^!BwXo#oTYbW7Pgp>cA1BQ5E#+y8H}%GT%q&EbzBe2Z#RdM
z)_ZlhL|)rUn<m^=Nt9>64VHpy5TJ^aIBWs<1A?u>4p`)P{xM(K%hH8l@C&90wjT%9
zwae|`-`Vo3MDyNGwcSO(P?ySb)zgzFGuBIHbg0EQ=A;z-V&N1;UpN43|19O&_0sd+
zM##{I<s5?f*46JqZXet!l6JiK3s80H5@^uA8oD-c$jUmH=fGf}mG$j#ww1wWH>~f4
zA7lS$8{7_acDH^ME+suB2|F%JM~f+xnGU4N>hFG2cpW)XrNcP5XsL@%NpG;!zP|K)
zKby}-%$SgmE;>BUV`X8kuPBXCj{VdV4g>uI^Q`x)f|AHSd;3ZXHXaT&A;Mj@ObWqu
z2=0ozIFl=7)QlUL*ow-Vi{}}Bu{{nq=p=t45PkLQf~AkQ-(4I;6|bL-sg`ljzU(2x
zNNIToy4;e4QsyhtfLb$g2<efB@zC}n%eP;FwSWWy(_NJKyE;ZwTiWJ4tRL{`Iy)DN
z*X@;o)fArp)&hh@28D-RVNi-|wM-pRO3IB#w|V^aqFiJ^zX~&p4^19ow8*mvVwQ{z
z0;vv^+{8RONCJOE@KvO5`d;%5CuXR~80^UW>e>BNCc%%k9sczQ9l&%qOy}J+aQO=1
zT_XopqgMCciivhwD83oP9w#Wgi^iR7UV;t}S~4{At_MjU4^nmpIp-FLzprEFQgs$C
z6t87SeKmM!yq>cmQeo^Xd4i<{N2$D*kV_qOQv7gnHBb9i!y9Be!t97{64}cs?X(wH
zFll$6lr<*8T-8UUU&<B}Yi?a#hXl7y$4lmIQ~%TS{_1?Bh6CA#p=Q^>gF$x39FZBG
z<p-l<orW#>uCVdPoVt_=jr4Iz&d_Ub4xju?W0F1eW5XaWq5U8~TWj@qk$lqWeSKp)
zt__|YuRp@DFI)vkV0<A^FzWbYB%-{dJ^aCylTwp8O8V#QgR$O%I+0QV*{Rkq4&Dc@
z8ORI^s<6Xh3%`;Yhed*$;SBm$*0MEXqG>sFPQjY3?*j8fIsEXofJ!!COY7E^+}5eM
z&jN`R(H`+NLqRD@X?hLB*Nlt@oJub|327g?TpaR^3!DV3tncxt4jSFGei$wyUDs!1
z{g&V5<C2t`^%G00{l42tUoIjZ1?eo0zaS5R=hnL<(YS^-ja=02{eGJdaSxvH0yc-n
z*GPVqff8HHGnSAwOT{7TMy7og4!Ak`%WA#%r~Y=$*%xj7HT(!VFuH(Hb*PT3AWmB>
zEL2RSD8}kERO-YuTZ|^^b>}@EwHN!!*{O<j?DP=p2Y9e`Sh#q{t?~M!T%p38SjNYI
zEekecYL}&Nq}Q1povxv5Nv*fZCJ+Xk(J#mkhuHRS;zXYDwqM&`5sOPe`r|l@z%2+_
z>OF=9&f?!%;yBfVOnwo`uO<@kdnRe2%;3w*o*f5dhVZ_|tO@9SMhV>^vwYRuAakbZ
zQ<pX>HFeI>V-H>WvfmQck4GiGu&>XG^&>9u=Cdf|zK`n4LYz^#d%ooy`k49-J-a%W
zpJM-U=UbO1A6=DtI$PM-T7_Y{wGFF-O>i!_9wAVHqODeB5+O^5^Mnu5W&fVR!XmaQ
z{Oxa20pFr!Ej^=ieM^U(`dnw!WoK-w&~*<L9Tk<#5G`Ao(H-E_6r;P*JGN)jHi*3&
z#3eu2L~{DU0oGb_yRdb<LQjypzpeEalhJ6A##;Wd<}GN%m8pX{spi3Q>kH8fzE%=S
zg|r>b@r@#mts~9xG?qn3RZQWq8gK>(F#Ood{0E%>E+Fdv1?jBV95By`pQ^;*o#_>`
z_A;Z8*sIw#cAcf^sn*pg60}&sLs;1xV#Ld7>YRI7DY)%M-=PySyULu2eG}}rzB&=C
zhTFNwPX$^?(AdQr(~8`$kye_tE}t?sH%u(L&Ma>$!4qRa5_=0MHehzQkFNWBhsaNP
z`Wb;0`_Yy(dGHcLBJr6-96@_bSS!2ujh@P(Q~5gp`Yxl~t^plNXM#bV><%O`iB<A+
zl+>r8-6Ue3rN`4;(VVV1l=Z};xrJlja{<|^U)mZ5#7+DIa^_0E3R{$ibws#A$JuDn
z#htIbPNwUYe+diQ(?L1{ME<sux+bS9jA|vq*iN4Jp6MvmENb_o=QOQBh*$LD5{kf)
z8Ok!KvxG09$fZO7>H<9moCP_2`-HA9b%>|S<(;XZh!#UKA9j*RxJnb9vy4W(OVRn%
z?pNBduGI%!Qt+w3nAr3bSW4KIiMc^W52U`px?g<Wv=k5aHv0M(nXb^7^`akjE^7nP
zxSUCcM}^|`bw@P}d?imBCwDK?D-vhA<YclH$=yU=T)RKLg8<#GS0J3BsLV`Dq6IE)
zz#F_c4Xh#69rP01Vi~Z&xeC9Hd2{cT&vz@53Sn#qfB)gDQ3SLp&Ck!JAu)p@(#_m_
zNAPtiLqv^q8}0GpG=9b%iBD+T>f7D?T(XHlu`OP@emxJ0S(~fYlOdR7WsnfPrcgsy
zE01rRVJNgVwkqTvh@F4xOsgjqP`;G!I`$8MA!d3H>kcVRy(v_e-l=BY@zTdGplH_~
z#mPO!oKQ?viDGq33DgH`7iY4lssb#N7eRL&?fizxd8`gS7QaH7d)cZ6YXuB5ry*~7
z?`Fv~LZyNo@8LX{rt@3GSj@MbM2l*EIm32onlc|-SGW|zUEqB5#3WT<suLtSE`0|S
zPKteVT$n_dtxpk@7x8DgLi;r-rmIxjyXlm3EgVSYn@oQ#U^BuV%5exj0j{U^SSsZ~
zFy}PQ6_?`=`3TEr((1QF><J+-*~mEO{Txy*&qe<3V4<^V=+hrRaswZ?HsumdX*w7#
zE<M%Pl>*tbOi;Jh=^xCu?!?ip9kkczeH<{yx-H3E8ap!gB?N&O@N$mm2v939A+odl
z%G181mLrZu(-#J2ZiUU-dgb+(*pH|T-FfC>>IF%Ud-i*%1Z-b<2-LUZ7l%SxgcUVA
zETb{qwD|e8>n5KFor&P(e3q4jX_3O9X$dW^>?CSo;@vlXK1lD_1#YQ}u?cs=L;q^G
z+AioIx;^0OGQiK2PaN|@YV0_0FdC+ITnk5|Kst9Ft%4n>+0bZYEM!eK;Wmg9k+DNs
z_Z8xv`5Xa<meeknU5OX3t9u^J<*Rd<Sa`~FTd8Oi|JVG7vKhT|phiDBU=+SCm}EI8
zAA9PrZCKUQDydJtak6}-`ICj4Uh10DW_LO0WZ6^Y{*jA+)Y)E5JwQRmmlt4`7i(PB
zUq4;2tJHwm9@;S0)dT?7m~L%NjBA6>;byK|+Xyh;MHHUqq8Tdw0;|@L=BN~rf>PDe
zH5W)%HL!YT`D_K_eyj~K`zcU}M703jKO!U14H1s@C~Fg-l_A#k+Cv{vF6)=>^>wKZ
zx@&z0^Q?y@=|<q|p<4kRlUQ&Zw4_VA!lrXnw>7gp2nUgxEb>LlA)Bz`I3u5CoW}(4
z=wQHprB3gZCv*5ceU0Mf+rKGyguI@_jM^1EV^RceL#UL2#VH)SMPB+z(p>QSaoei?
zJ?jHFj=q5s2U{K&k{4nVKDGN?3K;X8teKX=n5gbxz~_XCR@Lw~sW+@WcnUhdA~|y@
zR2E2G@Smn&4#RZG2)u1@73{^~lRnPiP;NP=s7av=heSX!1zlaUZRJrVZzDKL8kS|X
zrFR-P`qk<gnFdp<wqhgX$LOmzHZ>9??6n}iIli=Jy(WN42w$~42lWJ+JlZhnZN{-6
zOCJL*yXmZ>oX(845nl_)$^!>eF~7>|&$O4aEnqx^!X$f;3QHe(g!riRCsJI?AApqX
zm6rNLp7R9E-Pns>rQ3U`IKS5jyf;Odhi|}T@}+?ZYjMv35eb?-M}lw-wVvs(cgV?$
zbqECL7EPo{)9UasTsMHCX<lTbNp+b{_fBwBi3kRNDN-TJt0Z1rpz33>BfVWq!s{ln
z!~K#BIb){)f~c}38Ua>ii8YlY2Gn@BsxfEa9TGYWUultnyvSKCl-gDN30x>usZdP2
z#qF!hliIVp-Rk=f-?c6_SDA}3$faS?y=$0KlsXCA9hto09NfY_Va9b#$bK?S*&(NX
zE~lkB+7TA4MBUW2Pw{g(2~5qT61mivZVH{AZY!&HT{|&;0k*;-1N8ZZNeMb7PNp5q
z16tIiO-9T-X;K%#Q_`|rrlBdnHh~yg%9`zov&{M2Jq^c~CGKRASBP4Zw^F{-YUi3G
zkWv-Z^TfP2VjrY5L&cQqrR|hA$HvmV6tA|VH17_-xS3bhS{-WB7P$bVgsElVmTjIO
zcxJ0a?$RD6itMEJUaml`lTs7p=6W9J%MRb69M86M+V_}ArCJJ~yv*JEV@RV_EL{37
zq}5q}H(Y4>=2IcBM)!<4oJ4DnCT8TNp(V_`1S&U|8(*|KEWbEk9Z)y-&Qr9rcG~i#
zyY<obdyDW_WuBeZpI^#d*U`zguUE>MM^svbYAe3a0O!Baid5RXJ=K<i&K#nw*__ET
zwD8w29d=6`fZz8$;*ULT4sQuhID6xz*!x$0AlMes9+=TNiG@vbd-aqU3Xttdk7ngQ
zw}%G$&&_5aWlEOMwfyb}(k$SwVGZpR9p>p;c%Jm090@)(Bb*?^{jMsl?qf(S{yzH$
zXYD{#pm`MN{J<6}r3cduG}s<mo^M0X#c)`5;7bQzXoyzol@5C)CI{j!8$Zr335({t
z7MmpFT0IP3484jBia}~NvwkeAsf=F<Ov1~t6a6%vU4T5m#tx-BnCqPkF!h{FLtTJ?
zpZi>}zAowdJnh>2JGv1l1!_0xKcAnb8hP%5sdJg}$-I8JrY+Ux%lSrrIo})g4;yVt
zkD0{H69EjjPdgMu`c?>rBOkp9EjlTnyCwzGOX|s)9lntr;QUHNKALnfziewrh6Lle
z5HJbP@5C7w<v3fauID2=*$b9qI4l|}F_v(mcUp<VaHXIB;?TN8mg0y#uHqFahedYs
z>X0X<%AcI)OBirPH??ByQ(zXV+B{P`uy~`gg^wHj$-Vm+xbf8$!!Lm4s93_5Vuqn)
z1%>6BG{yVG)u_8OaVhYur2?8djW{>qu$RjtVxb%wJ$wrfSG+}9GhOJ8&q#W0&8+0|
z<ZXQlY%@MWe)E>O_?VNzQr|7Ad<ZljzPywX_<8xsy(4M9&owmn7An0uJN;<Is{s@@
z`_`SMLQZidf~S)Dg5{+msomN;zv7}(c3MNJ)R>!ZeUh)k2e#wvR}3wE^XekFa^fst
zm!nQ<IxUN$*GS+5c^U45)WMZD!?Q4V_d*Nr0TIgPd_EhhFi1IVm*kjK-zhvKJf`!{
z8zFvAt$qg5-~m9Ep>TA%Bdu<u)#Ni0Bu>8LujLF62r0(9yxk9MEX$Tlp(S3*bb611
zwmLT~SF~cngU9*Cc6DGRH4}keJIM|Ed>skg)+6e)TIaS6h<*)HZL~<c$BFpm91&f=
z_u5L-TzU2I&W|~W&i9du*?#)xpdP)r{&MPD2C3ynAt|R-2g=%jYfMg7!SgEC5<Vx>
zHPmn1hVXG4tlRf2g>Z0d4L=~}^;n9W|HL>hsVz76WR$tIJP%u&qJa<BOMF=}n%YWs
zF{^%`VPB_|I6s&8x|%D$tN~6vB_h&t1g)E)#TZf}X6lBQ&{oJ0+A>|boC8Zsl=Old
zs)Yp_v*Pn)UXRRcD>@}C-XYw1<GiuUxWK;{4vfsjTHcVIoSsz62~;MR7@EZyx2jFu
znYQSZI-cLt94{f!<2}=^^5DW>MVtK@DNV_4=0m#Al_(n$#*bHv9pScXS<i`-(gsCV
zYK1F0zp_D0d&4{A?p|3_C3}zw2RnOaW<k4aX~V<_|NQ0+j=6z+bV==<&PRtOyyuoO
znnF6#!ox&*)tZEhyoxhHe0-eV(+<?=+2+PW_7}qszXrR$fxVDi&VIsqZgmg0$A=r(
z%|%m({OtkY)vB}@%Hhsu!UHZ9c_f1Al{<HcoNpFu>dqbX{#yG0u=tPsdEe2`3d~3L
zT}2!pWkQt?C{j)_!cZ0fleBOpAX9jg%;Bo@c`nr52TsmS9MFnUsC`p@X6>K^)7|PZ
zv|%IN<7}aN-~uNHv*6CoS4zr%<@>0%fb-D^>T{ojqy8H=sx}*i%Eu8EUSk3oGx_MP
zWkR1#rz?7PBTB1NAx(XL($KQ!4Fivt?N%C#66vF~*cmmNCaO{`78Q)D%1hrYcI;Xm
zCNGlp^lMNG@vEUMik}Da219aFF$r@ekn5%|QT^r5)Ah8#X~>JLZ*F~XQ_Dj2m=b|$
zEh}=54@YB<N=<S%*~^&Mmz5rCodTb&zIPGathzq4rM}n|d=Hnh`*uWfW1=}!b-fJ{
z7D%DT3ABl!Hy)1k)1|b@xn>3|*3D#dA=;}Js*VKqI>ratFd4Nne<sNHcrH(;=z5P!
z$=Iz~z~2+R1~L<+)}90qMh}d8P08ASq?^sFnP`B|M3^oVJKwPxfvB4WmQ6Lsk7Imi
zJJsrsz+YXokUxJMQGFE{NX-;Z#Y%4xFka@yYOK{g;>(>vQgB!yo9;+8)T=)x&SB8n
zT54gbaQH_5WbD#_urh{@2oYWpLY^Gw;mYTMZ#Lu?${{KyIfo<`T+9QSdddTENm%<)
z3s|Bi!k2<rcrb%faB*zlBhNkF!P58&x<0JVg+K?#8dX-1DHr?~L)WEN2X8E_ShG+*
zkF$giQ~1~|&x<KiLVzJAZevqUO3;z--USc@W`WNBTSt#F8(m4*m7JUE1|_1w0Zqx9
z&UvT|rGayX0@?Wj$#hV{N3e}bd+(adP`MLz$9k8yjKym%mnyA$M|@IaEz(mU%MHnl
z+;RMxBxZ4y)Dp&5Joink=kb@HVTRn&o@PY@Lu0N<0lmg1zDeGjT}iH0l(pt+%*d^@
zbgiW97MX#o(@9X2&xp5SOQMptp}A+c6PuA)7%EfR_Ke6=MG8(LNh$D+He4(IX$fCa
zRc#4%kV$NHK#8<r4NMSb$aLG8aNOfd{+<h{M|G!PX)FfflaQj<<tTq(yhbmDGUxvs
zWwe#WpWNydFb|<>-`gbfdgHn~^1&Fyr2v*e4WNPRsU@m`E5FjE=&IAqR{X<{!sk;-
zEs+YVx9r9XR_-~CYs%;yN{5Re*WJSMq%lgq{o=Y)@cb>YDA!9<gg8q~u5l5Rjs3K9
zFh(JOu-fG3w;NJUti!@G@S8|YiyW_ozVb-LO(XUr5aNYHb4Vev-UvjVP+sLr17mMn
ze0e=WjymSaM(I0{3g1B748li_P%~+xvK$RfO<l6@?>UzA7!r1>ux{|*;K8+mEo(Gk
zZj<;29ioYT##XCQkxG+s6<)Ks8u^v4-mSY)6)2-BCNSb;U_5apj4(W~NDMT6miuOt
zkyFmb;pASW#q;5Zz4M3t@gkJABnEjGDofkvrHm9Oz#YtXttQrq$xNNt1ymoNZRI*O
zk6)AdJ%BEzJMw3tYfS7Kl%>m;lrz#Adx&vjZnkZorVlincyOixO+mCNQqIZcYH=;|
z;1#UIL`uArs1xNw>x1TTkKPz5_zOP~Sec>@H&5g=HYdp&ik%~eEL0Li&0({b%;AK+
zoW3JFNWeI1j-bV)98-DVWUb+*E=d%<%7~`grv#=GSEk9!YZvC~dHl{_f0*1iEmPjW
zun2wJzgBB+`9^A4n-D-9TK8V(PFtN$fs?#r_&x1fdL_nFIv_Gbh<$Np2ve6gJv}RL
zV5Cp=jcOcan>`$svkmph-BN~TIoExMkAtK7g+0_6c^@AS2K1td=TvLQ-TC~*9jWB?
z#r!Dkvnn7Wh&1{>a`QUQgp6Bh>nYQ<2j*A{O~5Tu-lJP&aEZQQPdA_)yV^?7F3>xg
zr~Nh?mi#?7Z^2)M%U~}t@Z3sm12S^K9>EQ0?Os5=E_8XeRbH!p@o+F7y*bxpOpLR*
z<@aKL+c|=nT}2NV1S2ikD-b3m%Izjf%JEb3t5aOA;JQcgs4NQs`Db3!z(hAPVz10F
zZ_!pgl7Hf&5NA1DPaFJvASw=DRkZqv%+u3%2XGiptys{$N-8$5sm@V1qanE&LKZH<
zotZ<on#7u)!uz(vwjMOwCwtySZK6duuofw7BT%ZUT`9Nk);-}F*`k-iMI9%(Vkcjr
zw-OMuT^aVVA}fQsZ3E32!05joG!8ev(jOILXnvW3v5+X5>$h)QFN_(nFR=zDWc5?3
zq0ZiS0MKtVFzg%et+aK`{SkB}yi{^BQUFFaXtgh_E#C-S1DJ8IY=B#x`|M<F>+qo6
zibB8|a5ffcrmk;{?VQnEN4z($CnyB?grDT&<MUs*Gwn^$#LQPRiM5x=m@USM98$n8
z^<XS|#<kBOWVY5X7B{xx*Y}&c&XRem*XNxQY~tW6d8JN*3H@u0Ir$qvdghE!gQU@D
z+iqPhv-+2U4iBw`v-bi6rawYC+Plnq+bVv^EYTv>Qy)?xyDkJbbaW+n4$T8$_Hm59
zsNTqj2T^C{agN?Oh-xQ0*+#FKb_<51mFTUql?X+VqUJLXQMPSS4X;>M6|8FBa>|Yg
zhF4Hksy5y=`7b}n@S4W^&d(f=z!-<#YY2H%w4U=EKHcK$^*QyuS3h6ee6Tx9nViKk
znMILs6<><k@}GQdDCN6wZs-=JC0^3gzcw`o@TkR$@Ojj#yhSv{;vV;{+pS0alj|Z5
zXOtC98=TDr$qvGrxaF)y-<Fda=U3Z9BWGR%0m^X}rK!0xwfdvpFI$z!@0z2KLO3(W
z8&j)?<y`wfq_)c$^CYlqXP34@4tb%<@_p+$!yRjVZ45?+*gI<UoNB!K2H;hCEz{zR
zgKG;z8bx+(%i6xl;?{R@o0fL*uZ7O3$rfn~X4kH{Y|;FNd6c}%`d(wlS~jS%FYD(^
z_AKw{gN1_um)BUv!ZS)cZILsn#P$;o2odpsM35JuRxjv$N2CRdhLQsVx(KB+Gw&mM
zfXFs&N&8$L!$QEd=?Zt(8uVIMIA#dhz7=M2WBYwTLAL`_@2goOof`UOO><yGvN3f!
zdU>?u?m|jdag5!tKP9i3ywbTM*3%cpkph?1T_Xr4-!>a>m2%!(OI);B3}qvdrQt=!
zF%8waE`Xlj%4%lcV`lq84k0Xf>hpAXl2VS|l0t8GQN~&R{kxk;l2Y@Vg=~w}6huoP
z7C_G5tjxZ=hVmWB-k6vKu!zs#`>fs*vav&vMSw{-Z#Ph^)YN8eN+fVt0#ZcHd0Xh4
zVlmt<9OpA$IuiVVV*`z*q-dQbolT)`0p7^ChzvPUKWa%k9Aif<En`+9?K1Zv?izAm
z=jL>;-G#24HAtLmDeZ)>`pw>N^4b*OpIa7EH^{WBYd#FCf&?tw;ShArae7fua1Aqb
zD`{kUM4dW7ePW_N`O-Uz`Ycy9;%qY@9(XU)myqUpvClp7BQu11!yZ{nS1sW)nuhT4
zqiI`ogn_84Z&{9?Lh`e<<%`?^2&3C(E`|7o0;6U#+KOAnDunLhqM`edDAUo#QcF0O
zh{3Y~T~fr^DK}#v2;U*-Tm%Yuh--iQJ}`B$(r?9CKW6qli&C$#eR5iV(X?I}C5=U~
zQ;ox-ygiEe^4&^Un0J5eaml&X>mAu@t!VN>K$7f+aLaSqqDJJJq$8LdI({^^$I|v#
z=`y}_xZ`j}a@OT2n5RY$T1)YhUR4y^r6_ZxWIUi*%=4#H%)K68Sc6TNMl0tyHeV6S
zd*!31=D&h3C5*mj0grunK!PsYh@28wf<D`<=Sk36lk}=!b_U{vt?YohM;#d{(DYh%
z)2kX{RmEZh`%fxSR-?A$Jzn7=Mf}%hJ|X7c3Z6RUuv;^2ugE1UY_yU@o*y9wL(30J
zUPfB0F|@h>UbW~-&PB64^`p0nu?y!&qiN+^30yft7Ck%3J90l!tFCc`U&@$6%nRtI
z+xS@Cd{8Svr19|mt5qQ64nMMJiA{R)g99gL0W0V=-F%!x%5mM~8MKj}I_25Dq;A*B
z&E$p1#yWOwWxL@PjHe^R;Q-o3Bd*sq9u^-s+1zRTwoX?FBu2Ha#{)ciW13rVF~K-_
zS)FLFx6W5?-)lP6mMa&Bi}NW~(m`%p;XmqkzU>_G(aBA@w-28>v7TLhtZEBCVXIcB
z;Dx3RTM==qn@nxwnlYuu<TvI<&+;{;u|`~wf)^}$)c4_h_m03aE#Tt>+z{t;p0id;
zmiH*4s}oV$q(JW|1|C>@slpz*y?yq|-nB-S>cIl&^!&F<{8ytuf*AL8HTF^<)h_gA
z<0)IdyQw;W1!KUk9Qscs#~-7&Upw_rM1-YC-@N8A!3I(u@UZ4~&3YXh4Px#W7dCG1
zY*V7%?3d#U@b@^F$xR=O8h~+``?XARlH04wKlRRgO?2GL(U@+n)?x}e>{Hhd<U1oQ
zBTiaEmtsWEuKz{VGcm;!S~K9Q0rzfw^F}%8u8{YK>-QW9J%&Y^{&NlXo0Za0fC;_?
z0BFYc*r&rsNUlzca}jG*lvsJfEPskx7}lpEk1+BiZl>CO-C?74+Oe%_D@Hs)&N~6#
zXq$aEW6b2SW?Qm?S7R3c95xZrtB;B3zFvRyMQf5g(Ymi1fN~CpZ7%Vno9Tn=_RkDv
zMMa$3bhD(Gr(K+#8IQ#5Q|H0&cmbIdcOkAyv=-!6Z_Wv!@qGuhyD8&!Sp})e^<_vR
zkq8U$)ZQY^izUH3)Dq-<5pq5=nK$f{vqa6yC4Gyqqf4f+IFZNbGSmM3*mk3x5_Zjc
zK!DDyh*J))^ttU)N%7x%*rz<UfpHIX^ArE-Olag}<?ep%L33E`<h&UiNFl9kA82Rp
z53U$07fA;acozWGp1K7c-A7vFJMIlA_BmS4QL$ogG^oS$nyc<|<$7;L{Ck4iNXN@X
z8<YpO8|^$574C<}vJnAQh@&{4L&BfD%J%5VD;k}=d;q?Z7|PqeEF?U=(qZG&&%?*Y
z#-0r&uK@{2Rct^U)cf6a{@L;z*Y21F^7tnP?nwv_bYsauW-5jr=Qt98FU+tc16iy2
zB;TeHxGAxYI@~VKe{?!@Y@h_30i-i5c&aHc7Ro%M7pek^o6z}S#2XWj#f}^5-07D5
zTiIq5Ty>MnR#gdUflH>>t|#4{C1Pa&HF#4)q+f=cb<yy&<Kr5;3fJ5PXaz}5_*y?*
zEag1&Nm^l3zhB&7*h;PG=~vzA@S0BY-!K)n1!sfaWg8YrBk0)m229Akg`WHrKy)Qq
zsA~g@USl2nvmu_M-79V9@{J|z>`?k~@f-8>3Tqz^#J5lt$5^?2I}1%*?o8UKfB@2T
z0LWUILI|!bQDc?%$a6+p^p}|!t8F%HA0{7#sPIgi--=)+uD><$4fVDS)~5~<Qp!Jf
zu9P&SbJ<4d4>V7iI%k_MzPbEftV)?b$^T`!x5mgS3Z=B=;5Wc>*5Pr467g(a<y@oU
zC4T_G<f+0EDOI&G#h=n7hMpTL9m!d1SMXo`ynO&ZKysbKxC)3=Y$CBsDe?{zQgP%|
z@d5GpD|20uiY3CkgD<l6IW>uR_p5QtrpV)85qixH=X0x2xU6=c_7d_shBGJM#n^kU
zufx?80IMh-5UrS5rfy;4*0~b>&cL?<%|}UA+VGaPrmn|b+O!Zpu}uF+^=n2iT>Fdu
z#NIOJT=3dm$@4q*-^kRsXz@y6eMprSxy71g=Sz=xNSOP*|H%0E`8W?;Fhjkxro+%8
zkWY7dP2MH30dumeouYJWQ8k<!imvPZ%edVMf<2gVre9li>jM;hSbD>`pC?>@Aq})w
zNny)4ymErE-xu9Dz-8UPbtj6v7{IGbSd-T~=bNsX7~9|54;5<_)_dZJsZMe}@=#hc
z(WKh77?Dndu0M)_G8CTy=T)Wq6BcayuRf$}sPMwSq~Rw4x#fzfGV#;8slwJMnio~4
zBwg*ix2Ta$NVxR8T~DME<yphPBBweJycpLoverFqia=i;a4E_|QuU9JDYo@++~|%p
z-7Mv<jJA)sk@l+$G8ggXE27m2>x#E5N2s5x+6<E`*S7*(Ov{Ht8<RQB%l0%8I2;}U
zpn-4Od>)ZXA1nM+#0mOAp}(~Fe(k@b^%UL+r@Iku+J9eJ1oV<$5QDr`6~+zgzJU!G
zQDCD7Fyd4$KN$93;Wl?C_Has$@+L{Fp5xhLPJGZ(U66Q=iVJf|fEmlk<R*U41)T0~
zt-wFG$doh>Tw37t8m(!@PAB^vi=xg@B3J8qbk8(pun;2+%=|v_+w~t9(vlz76G3l!
z#3RERy>NZk>z}(7vp68kq$}_M5={3(z=A>9eam5jWyQ={!}=Tdc>dBL68&IM{itB_
zq7c*b%*s6VNWRrJbD!qit>v)%GkyTlb9#+OlSsyUW<?|WB=@_mN9FX`U%A%Hdw#Y8
zAe5J4dyq|{^QC*a&s<>Ob_*h{&5mPAZ#R_43}(8b$*u5<+`i4?CeV@|lk-Ims!VJ~
z9<#9c*gPawkn<dF_2gxr+?g6^>?7BpEh=P1ChuBpR~+6lszB+`!#z05sAmdbpW?pM
zG6h@T4OxyH$@o=5ZpARx1lrOAt(K0uyWm=X3rNO$PeXh$f<y9iiUY4TUmHu<+mZqX
zT6{lNYhZa&`n%rdzgh4|a$mE85KBeQ*jfaBvgH{}H14<`558!T1Naui<9$3e_%|!e
ziaeTjc9cTPd%5sqC$JWN!_}(ynzM0G389>ZbJW$9ht<A!RWgIgEJm3&6B}gLD8k1b
zk%CG}mKBR7iLKl)lqi~nmLsknC>gsl8C-?2@D3dg9LL|8b9}^>m)ANOD?&BDG4^VA
z{FD-aiJfrWr}`+oc?oMXu6bra&>q0_WuhT@#u&=n@<T({o4VacDC_pi{qcpi+V>U)
zGD^2lJtIh&Cv8uHK&O1$I-*i{!&*BM&rAJUYHY{RN&a+Rzr8!ayA6AAERlWASeITf
zzp$5+iCe}{D1^6t3xLn^<4DeHDecRBccA@>h6Z7{Vv%e$Gahm7`Ut$@vu>jz@zv(#
zx}5yN1o&8rLOde7dtm58Bv!$1*{0>$6WB`=)D6H;lJW<X1X1lko>Y49R_L8x!_u2Q
z`i8L}6~hvR3VfnV^@H4n?8g3byicDN`!0wh&~=Q`*H6!;D@_XlppkDz0})SPd_$B<
zsyK*U*eEqpam#2t1!kiCh$lZ@!k+X#98Nl{K)p#~Ih4Lh%m8Fuq7A@NQ;IVuS6^d#
z7PwCFt!AUdnp{bAMa2VI2w;#vLwMMnRyK+{A#VV|c4M1zD;ux$_`F!&kg;t{>50w5
z?+m!|+4em(hnCG;ME2b@_gbFiCk8@J?j1r)*QY+xYe!_#z3<>Z^7@!P%bGSrY0wZY
zACSSKpwDpR+$r4!AjQ%$!6js^Jq}x&orV(Fy#gCYqk76T?9oRwk?7;CNfI(9=J>(n
zo7@mwUzTcgo;y&jvz(cGg0XAF6^&S!Sm)gd-N4Jc>1C#-Dt}4Ma=YK}9dT0t49gX)
z{{WiojdGsEZNl)A7-5a<6YV8nl4U?)Pmx^=!wh<<m+Bm&o#<TrAO$1YUwn7lY{FWO
z<A75RBD(}*(!}96^Mrw&)M^X&B7M*ur>sHOk7k~pfQ#LFbn#jDnO)^|#}90p9cTH{
zF7Rtf*Fl7?_&1~yB>fxJ_&fVB&OXW>KA&B{3;7^IGHfcV+#Y8xXFW4ZLZhj9=SK@b
z!YTgCR#iZ`gsq%tZxGa_%5v`I4u+#<5Kg%X93%OnHZ=Ln>&@A=oZNCG?s6L&qk&0*
z^8A&YY;&`h_K{Adwxv~u`46dk{7U3SZoc2IA#4G8P+NqeNa6FHno0)u7U!1i-dt`H
zlUs_`^;+|ro(0g|ds|9}v$ML=i7taa^>|JNyGL!>&(C(aR(wiN^qMNTAqV-$+Ap;z
zBfVntes3rI^XINMr6w$<x#iR6UB!;U3&!I{w)X*VGpnG0x5$61(l0&`Dp5M(kuglN
zB<(H*GM1y$h@r+ETpaqYs_T(+RE$N1<3!1Erx;OA_Z!8giSebbBZ^&^o?at;dA!+@
zKvPGZ!dky-hwlr41+w+3!f9-B6LG+`It}<Ep*sn{r@bi2+1OEm7-DaVjyGPj8Et-e
zC4P)pD<~@3nu|9H^K@TcjPm}}|DK{-2&wPE7-<5KV^;llbjZw;5k9RV=<`I~M``cY
zxQQd`+?*nFO>M-`@;w&~rhuAZvoHbIFCRt4myQHhXBJ!o=T^@soi?{7^bAd#RFCk-
zMXBuQgzq^$*_P%1sdgF8Rv)o6vB7Vv(!O>to{TGt%lk{}rLt-Wpj=!&$lT2~y}zyH
zYvunJwenl}*y;w*)4(C^*ej)y?aqw0>(`Cv658g!nkioW324xmpVpKT5Ekw}ndtg5
zN?V?W{idsa#QRyrlI1CKVQS?6<LoQInry%Sr369Z6$KRu1Ef(>K*}T}q-%t9H%K#3
zQ4v8>a!7ZK95oc_&asUUrBkT^WAJ|l*6a8E#_xY|UAqP-d!F;0``qU~=W{-v1czFU
zt&gI56@poG${nT78X0qSaUu?W<}O>bXnrm(Gdjas?+l?Kz6!3~ZS@aJ5lFk$-V%4^
zZyn?CTpvYct2`?`4Yv|1U{Z4=62f=x`Yl>ErNMTtg8U$=8`8l{KE>6%6>p1%V=zD=
zAF?`7Q#ny_;D@zBn#J^aO!yad6xBjMl&??-H-1EwwKX$fFH5bDx>P%i-heo)$qA9Z
zl5ELEc3KlZVlB>g;yy_$y0{9e9LJYtt^t`AcDZ0vSX-pDHv0j-p);{xWt9=FrEb?x
z&czF<vq@<6=-#C&M_K1-qGxMspNPD|iv_I!_nZ;ZU2~^Ry`MSv0A*th4?3Qk3t3{B
z@m!zDNl#DDedGt);A0;NB<VFL^+Q*;TYV^^b={S_y#X*j;xbppYUT$84%C)ueM=$t
z>e{XIwtaKsxnYA53xhdn6M|O#4sp9UayElc-WZ8yi_vuDVP?_p<RriIWp(s)MoYqo
z?e?A?#3=>!gO(_v75&C$Mvsw)ATf_M))fX12;_cb3H7T@<Z=a4Glb6o$E>+~>w)tn
z6$p!EAjIXCGAka9)o}(u-v3cL{53+SQUG90hx$L-+;%rwt22Aw4qGrTT+DN*0r*At
zVT)33BYy>(=5B8yP5>uCYjYU(^BDh5s0dOPs44mvsD&BK2LvvO)o(xQQ-)&KI*J5Z
zY-O7RnNxAgCww0!ixN7~Y|o$_HW!QF)&SQbg0+!v(7t9VHOT`dmn817HHNkdW-MDC
z*2C74jEqzOJhq@%L-#nZ&7~YZ_^v$A^<G0KxSTo;RubEPTu|FDUw;ns`dk{lfluFT
z9B^|(gvQ$YZmuhr_EoILFIAxbisxsIlmiK@>5h4<;^G=tJQ|Ksidn)tofYGrtr)6}
z@i^<9HH{zAUv-0<#depy17Y3cd^F-LPeSbkvU-Yjlm^z7rHUqJ^`ksh*LN8Tvs`#@
z)}Z`BANRi&`D!NkA1q_6(d*dNNC7mIC`*8=lz+l+JxNL2shCZ9zp-d}C@+h*X6=;D
zwK~IxP3aR*9KTH|I!Y%ly3IYYkL<Nhuyr(&T5`9wQrvaoB2ZmogjC9fF-h2Eo}j&I
zB|i+8{-ULMy=21E&kc@MFUgU~d-?KZS<8y|wwQs}^ckF_sINV~59fu!VQ{;19DROZ
zxipGFRy_CRJ%8~VKk$cwX~%;9Wk&EQ8ql$-FgZc9BWxXp2yODqpQUC=-&eNj)(D0!
zGW0%I4oKcZuX^nx>G`epM?E#%jRBBRL9yRV=f=Q*tr<kJ&TdAn(jHVkE9pHbc2~Jt
z&$+GM&p%;LcwR&?NvsPxl-VPNt3}zlA$#*YiXMDp_S?P=K<=b35aW;a6QO4`wE@aR
zRbAa&c&2i!L|^ZI!+SzUTijs2lr>qPG{6m-SfHsMY-rgmCnE#yzHoDd)Lc)Xux|3W
zuQuJNX~z}f&um}eh>1ZHYKfTvdI;ZMuuKyLooTf#!rA;C_dtfiE;XaA6VRTBm$0cY
z%X>garak@4Tw4@>{BqoK4E6s!-`RKIJ9Y8=<A#8rei2%}4B(Ewu9ntK_(zd+m@{`I
z&oJ{`Jw<U4U!on$+h?vAzpck+sA1m!q<JSTW;#YW?3{b2q2GQJaK@ISy=q=jP$s`i
zt;f%G{_Qz|1xb(}GMZD7%~vtO0T$OSw))`AX}ay{1vVUF9)jHXcv;ze%`C2S>Barz
z)~QlVTRwM3Eq2TMywBRX-8=xCkK5(R06J`UB)l_%96Da|2<lzz_y#nTK$hNRADY+L
z&!UrW)v3c-(-b?C8i44S)rSdn7quEt6n;1%ISsequIc3Wt5Y05U}3bh-C5}OE@xL8
zs}IqYa-7&uYg-NzZkE^%;PX2mnwQ$s9#5jc)6*Naq|Xyu(-JFwbs4B*zHo#aKPslO
z(S36Kml&eLMibLza>K?BBroI@L~2fQ72<^IO}wx=o}VR0-I*(OHCik8W3s$Q)APL3
z8CM}^4Rh{zIibp|=3gbaFAU1jwN66!%cmzQHe3>F_ZJw3j`N|raNa8y3Kom%-{UbH
zCN<k-J9G&ekNGFM5EGZURz)=9eQ?tVFQ9zMSx_+XIY!Se8QF)Dw7TV~qGTS_@gPY|
zv4zRAmP-7qBZSHG>%+<zdO{vO7V<UE<#NO(4l|LLo_;6n=GNOxWk}(43`o=XZ0_w~
zs)eDvSihueGCdLpweS_mgU=Lo>nk<;@k@xJJ*%j$F+Fe8G*Ai70Z2jH1L3?otNxof
zYAK)~1${lSZK5>%zO`BZQ<BI;A0=XZX&|X`v|PnO%1a98s)p{ZbYM=<kd^S-RHuoO
zItLWi404Mlbc+KfMGQPI>)H;(NJ6Lp$Wq-VywX?v1IwV(Rpz|0t<f$%KI{Ho9KD9W
ziJkw5Z`SkiMGJ^m;Rj<tZjQq{!m$kMac0%6XGv;icmF=_D`*H3Qn623DUr(+yKYeD
zo$G*PF4g&3kGrm?v3aoDQM9`>z_*wA;R7L0=_pikqW4AU381$Tx>Elo`GE%79$v1*
z?3D`;Zt^eYcG!MtzlTm{I>=uNJDxgixsN|WEhtP+NL7ySul8k<uUjPh+?!2u0|WH@
zi-@A)&ui7DQ+M0<weIgd<7Bfbs;oF=JXd*hzxRv%C@-FT8R!Z1*>Qc#(=ss2AV*Xi
zBA;E|!Z!An_NZ<I69qH5W<&kmQN~%FpK(C7YQmeJi_<K>kevnApP9(bTe;+ndfez5
zz7G6ybHa|vXX>IMCdJnp^U>R|>fu$pqP6(LEXaG7=#RN*U`Vs>Cp!1As>Mm3zN)LG
z-=g|}1PUR<wc*j%k71Ia3S3&2l-^et6G<ErRXIxDk#jqED`s>49Vye$hL!)0k6;}C
zwDOqaSXW=_uudhM+mT<l1n5QPTJ$jaWpsN7{-^~w?Y=r!y}cJAl=1TF*>T6N(DN><
z+7de-)g;ZNd|~U4KxNaKdfQ^QYpA@U#dxm5uD$i?itc_9L*KO0;N&dW(9IlF`yi`b
zEwXuGysl=VDbRwq?(xT4c9oxk52`l-R8i@YmABeK;sQ#S>Bh20_xq25y(_iLytvtq
z0~>>p)5`T_0U49CpnQt%bA_w*SV@=kS%{}WR`TO&`<i+8**8?sHrp#f0km^tHI?q$
zEmDFuTii)LC@a)KN{}le`{Dks#9RQ8{)>&pULxv^IGaMa0T#Atk?0mfeF5d&BXLF|
z1H?0x<p7a9@4Rc(-qW!@iz8_aUJL^YZWjyE&XG+i8O@u;bgP>mEP#Dmo@>^w57(Rt
zd=zV7J}IR>Hwud!*7fePqz|oLXY$>6-x6om(U~Nmr4?F*0^L@#EzyaT5ZaD1IY=w2
z-$PY4Chtm4Ee&jjF;=d3gv1NF9^4(8c#Dp0^Exo_nmlv&eIs4NPHWYDUlmi=J+l}d
zDZW&<MZ4nHs7i-f`p6srO5<*pNd@m$Tx#o$HS~IFTcg*x!$n58T#c3Tty`a^2Ow7~
z;vJRK6FRm*b@zcDoE4j+$EJ{`nt{OwVY7&&u=|Y8ueisYaRqUkLS_I=C(Wh%W{<Cj
z7n_=GnD2fD?Y>Jb^C~}=O=~`Ua(6*>>&h~a8(NJ3Ja@>ekhV3=0{|W{_u8p2^{N7z
znK8d&H}{P7gACQ`#o-#a>1l-NcxgFez9{6Les(vg9nxxGoFz}8u%Ue`!M6T|A@)m{
z)O<e$Z#2mk_KX=VmI#ctuPv~ZJ5#vc*>2u-r6Vkvvq$*u3UI_mFkzS8RgQb2nOBN$
zQw?eA*-rx%=;&yzL-+u2W8X+9C1$xHMb^$U$lIHv6g^ty92SemDKAVd?(P7hzirPI
z%={B|)z#C-JkVoB7X3E~6PD{ssxiw8)cdnftN<o7g_z1{fcsXvUPqM^o2`S;-?Cn#
zq)+*8Q{36AKr@b0C*Hy=yuDidtQl@p*||S^GS(mk=vp@-%-(lw`kpFVw!mUv##=r*
zu-$5qA>zMZdR2niZ>|r@5{I_02VG_Kcu56B3d#LBTEph{)oN@vPzPFDUw1==t3}DC
z2Wi)Df97Iz+jctd)HYr1u%QhCdfPZ`%4I=Gu56DyxLr>9umM-@haLb=R{Y=^wBYep
z+^mpMkBk_$)5Yi7#$Uk~G5~mm2GAi<#kw!&%LYY~XeT)@oPcIM&^6nNYWnh8QZ5#B
z^Ong9Oqt%$@x}3FmlP;b&+(HeEl`a|>1R>JqT213&7r=%r2Zg}P0E+a_k6#&i7fg%
z)aF!<`{;?lY8eL!JB!YH7S!*pap4u_ye5(Kc0wn>Pl>6dHdGj^4)&o9#w1`(JvR-I
z>w6Miw`dK1Gm#M^q9hjp*aS4Ian%{v&4GvaFTC^JLUr(=(^)fywDf>I&$rB>9{_#0
z7A}VQ@@}6Am2@%*_TFi{<5H<&obS|8OJkYcFpS25#;P-din!;TzqVP-z4d1<x=bZ0
zPq%b#Xd+Kb*)C?Y=-iz}JHLjD*gO#Ou_z$ol;nxh*{8NBbo$cr6+lJ<4GRv6s&Z&o
z9Cz!6R0||?!VfDka1xuA&c$0J@4YIPf)WHMuYG~$;3}6@a~phXM{CBr^@-utxniQ%
zy`Lh3fkGnnaNSCc>|hyB1?qvs7?zRe{`!Xxw-_JG?l718V3sla`l8;?vHPymo9BhM
zFEC<PzijvlDL;F?U^VB1_P5Q8)>I0+EVchNO-XFml+p8RpBScd-F5G;s|zEI$|@Vg
z3*)|Ci|GT(s#{@ovp^Jy=cXC#-(@I*)WJ}Dz+DVuSN&9sv1(yb1-|YK+RHGP=A7GH
zQI*n5m&0~EW@?s14E^&4l+LG0c#PloUWOJuOO|{fb+8dKkyTtQ9b5zTyJ*AjzJaS=
z9mkdqxB6#^TQ<BKs%Y$9{rveeIrf5MD+`kO+DJRX5DTF~uBs$C4$6&x`$`nHp&VPW
zh^%m^oxg`_Op=OmIFW-Yxn@?dPTMgk9yc^4#l|I%Z{8Ys?XZry&)SLYl&O_1CfCfT
zDfh!mmnu36#c)vrxi^P18u_AeN+t{~uj-T!B-bX+V;XKK#tX^;C+cvC&7I!MR71X)
zupyMqCIZ^Qy%$Vc;lSGus9@$bb@&xkO;@<~9(0SZOm%}%Bwe$ql!Fh;14wS@rIgy0
zAFgqLm~TxnVN__!K!dRqWmA;<As;_*Ykg7ruiwj0hvkM}pyCuZaB*g+t<5cPu04%8
z$sJM+yCREqXiy4|w)?FAQl|I)&>Rgr&F*%zA5vWVTA5vk0pjcq$bCWwUmjnwGSP%f
z%&#=j8}tL!DAmamk)Rsh%n-gB6}*_$nY?h@v0|5Q^(>{NJuixTUh_>_f(wOxUMom?
zPGTWD*wBpF{2;9lZ0UuB)z*iQ9z5QMKaZz(5{Ho-#G^)D&|cly?BK0=#ap#~6VlUU
zif6O8vPevIUw-N1Mkl+|u28g)T(cTYlH8dnI#5*EW&i}#x~;JRsHn34-ot%jCGVFh
z5}s(Ph&n%coj5>hLi6!Uld|#lNE!eq8z>D(5a$)vEpU!`W5&({aDQFTjA&@c_8tm{
zUF;9xb%yArxlT{V+F<P}Hy0CZpiMIgi<3@Yd=}7^tGBxFjU}8gmrGZ)mT+5SF4wDb
zIwo?NPNEmo_}wC`P7rqWKYN`dwy>@CIuiFzY48{YCvG$LL|-a%rSi??C!O2TNR=2J
zv!Q6WdIqhuEF$#C+D?|C<sPjv_M6?ppcPcQqo5K8hf2g-m@A7V3)#3o4br=|w1h0x
zP>UDwub;?zhsDarJ3Uf9HEv<F!<;yR-2k#9tKE%rahf_Q*oQ65aXN*GJG1uU^UqDF
zd-5w*jaTc}>wy-J!D=10zS9~u9jkGWpA~39KFhAAqMhOr3@Mn_((XoBg0b+uwY+h^
zMbH7Cc2rc<_GSp*IEdcB%a5&LqR2H8kN0<(Nk6z7Vm9hg2keHc!@RpfcDhaeu#a2W
z^R*>*>$%&pcPjR<G3UKj&YdX~_2!G(G?6Kt1-TXiMcBIh^7$o0jWUy!QJ7G2<1n4Z
zdGTFdq?U!@4es?j3ji(=hjDUAyk`7p*T^2_pHwcmoj<@YgSOY`@QU8dyJcjKtlkyg
z*gU`~GdPr3vEe4R^cKS}Qw@;NQz8J+`X#KEUX0@`0)T!Obnr1gEKr2|;app~Ds#Lm
zH{gWpdkTCDWdfu&r3dI+dV9WHNq#dlb=zwlx(-QhZkT0{9N!wMO}n*Am<|A8Iqtmz
zdN-N^&AO$f-FB;#%r<88ilvP-rXFOr$UTwHv50EZSJPRHFXOpz^62pOn4(ww-z+<@
zF2Dl=qDW`sc_c#0BeW(HZ0H3(PK6S2IZa_y0g%-{dflG|bPE+K@WUa?n!KpCt;*9p
zXkjh}9+6?6bpT-coQrn|knBqX&gBL>z{DD39stg<$%j>MjbaUVS6dazmex8@3!DSh
z4EcF^h45Q7t0j5Wu7%r!{N5kda`OsOUHHysss-<5p#q-NEAZsJ(K5*NC0!{1I`*co
zO_XB|jGLx6izGY-%wi4mnKW(^Tvw}NiUSJt53~$iVD6*y%(;86Rum6LjDj{@VKxW?
z(pAGSluc#F*1?D-a1NfPa44SK)lFN<`3zJkzd%$imd_VYNcz=~Bsx^=u#pE!<6Fq?
z;`Xx$0jt}DieKY2ZMslp8Nz1Pz75CeI?eR*c@-#aPt{yjiEcQ~P*7y!P_N5iR|`f(
zOSB=|b!cYr4P*xU8sT+5m66?CKt8Z2m4dHETF(LNfmHKI;|Eo{#)Mwh8hf09Z=dLn
zaj)0jNgmeo9}~-B9rHMD<9HiWDHbnIDfU<j^mu+p*D2$S>4bRd)(FtnqV+4P*^DQj
z2uWQ=u7ljMS@>g?Fw*u5xf#!6FNB19-}5}afm3e#`%%76?#_zWtS_`L-d}iCN@{c4
zV;_Zyzk~txcZ*<|Di36^^Dh^9wR#LB=yI37P)l~_qn8cEE!INX^Q)V4-6TCU-6!Po
zay@Q)6zE|0fda=adZJQ&f)$$!z|UZdvj?Wi&nxN+N`@CSmUCG_u-(KK<42Q*jLTv4
z_RPK^`HVK3hH6_(D0tPQ_g^Y}KD4zgT)-ruhBc6HXY}L9)1gwQtd}PH_NCJuAmjTS
zU3k%&mHK6+x^HU?s7YpVZdD`P<}l(5wM1^vmXs``xaLX6iuKLnAnLxP%JFwpjGXp*
zrcImd*Nh+padpG`zLW*9=J+@>{w_X%RiDeD3?TE|hLHz$0u%)CAQz1&<1@d3f!%0R
z1b_SXs2cInFl9?Zf1B5R8Ixg}MmECpA*zPnVf~({bY?$6&{hEru^j{Vb5Z%*N({gn
z*aHF@${aGRZ$k-kohO0fcqm;rw<+x(nI&8ztDfM;xsJ-USWgLE7TlV=UcFPX=r$1q
zjG>v)FErey%GT&DAu+$Owi@Jy@%30J^tNA@X%rdrN@99!o6lRf_o$#|zq;_g5FF*P
zl!DiVsc9K~C%#gD_j1v0QS(j5uzLm)w@8`Y!^zQS+6ZZxfC<98ITowQXE<>^pMYv2
zmDo}PIXYKwZmcrwwb+VmD3geM<+xkvJ$<Ja_ONv}iLZ0ol;Q{61yyS=HCC(%S|5tr
z8fa^4n~Cbd_Fi^apoF@IY!*`oeP1-WEh}o-4AyyAj(Fbobu6_*d({-U&Ca1+5p(GB
zt}XNkC*(M_#8@maKWQ^m<G}}iEw@K<$_%WU!P-VQfXwE3h=wxI6@;{#I@lEY48~;J
zZQ9-6ZA%d@)XsI_Sqhf!BJ|ze8ZM^j?#G3_?qf`I7)rv7&#d3>X3A&v;(oZ^ZKkK?
z`~}gL1<BT1seYK&Jf4HTH<sT={i^@m?8&}U_Ddz7<^W|D^_arCom^;LyM;$sU86(k
zGF=p?-fVKTs%51k3S<=>O~<R!6z{%_p05q*$#FrgFwb8vd56{NOE=dk->Sy>I(`jO
z9xX~(t(Cz@2<oP-z!ie`(7u?Q$(p<FCY5_=x_yr3H0CPwkW<=<+v<A33Qlq_yKyfv
zRC%}OTO8&p_C=p&FbNjreIX;hzDIj!K@}JVu?<l)Q@&omUtzNuuo#x)KzFltHN|(Z
zTo1wNf!l6W-rEI2n`K@><=PJF!E1@hY%z%V{R_U@<r;j;^_B#W(tp$fs8=gy?Zq}<
z9n58l7a}$*4e}zDrR2m{>r0os^6gua+{fQ_FBh*%ihq)*v0txr*BAVJ3+cW6b(_?6
z_AT11V=LHU>*Mm$8V}!U^F500PMOAJhJ!@By3Eu5SZ4o1EyKqe)USP|>64`N6YQ#W
z%Kc4sGz7f1mU4_OsD?-#>WZ|I{pF}%otvFqt^fAA`v&f0xx>Wx>ek5Zuw9cd1{XL0
zAyeS4e`4rhC%)JFa#mdtor+6?NpMKCQ=hLgj4~S!BnBWsO*5WrE^f#7QO*c$H?+<l
zqzfwE1oD5(fOB7wKDKe|N>|wj`;)s@NcwQ^$=B6)yrx%L2;cJ13<tjD8B%vSy?t}9
zpMqa`uY67O{#L!>8DhJZ3e)#z>vlJ~iT@g@u1;qm8!Y!0VHUInH)%o^wrK%?F8kxB
z(V8j`A3kKn6#9R=bLkzEL`<)IUVeVEgg5)igsq5`en4L6yaTSXVYQt>jBl8gmL25D
z(DChbs|{pTyuxUOP|D#%<e`hBPyg=X<yQB-PRhxxOn1a~;k-JqCC&VPT(rc_yfnmM
z>c<8?FPa$CD@h<*wo_ThM6$t4OK|VadGvioaW~uWXC#X#+BgPvIojn~qxXcqK=pjz
zQha5PnmK=&{%sjA7;1b?Kv;LNV>qKlx$=`iMKvocb_H%a!CKypvgw$q7>!!4vFMc8
zcT5s@8<g_c%K}>CESEnOofC25gYyDyTp_)41*JZ(PYwOq$oU%&J^q(NCj{-vOx+5M
ze03Y_kLw!6^XQECq`l%1G=Q?0E6|;^YfJumfmN?UUG%GHjZlSy%W)Zt%BMF8?X*+w
zy47W?y>aLn)mh)GWqpte%zAd%s~rto!Pf92RYNdFjZh9nf&4*O&JrF_Q+6B-%#Nrw
zH8lZ+paB5KHF7@w0YlzjWVWw1+Riwdq<Oa$xrEfx(Y@sd&|H37=irluHOo2f%cz~3
zw8Ximif!5oISxokVw@211$nvLi@*%gIN{O{&dXml=U==YEX8E_J|@ASX~J@*k?S=N
zmtLl^xV3d?w4ZnTSQMY0{S@-NO~E8&&2}Bd^pa%`CI65LTye3t-dpUNd3Tv8Cn(%@
zOG%F*pJzBc+b$+dwX7S^*t7I?=_;TcrW5xY6z)Jo^(!M3kTek-F-!`!NeX?aeA}|z
z&7OGzU<>NqCY18Q1_ABPnhLbB9#XBH;o$j&cMpkECrU>j&js<@A+KimPdG2)j231;
zx11OiS@8qp<f;<OCIScmCJFGX0J!Gp$GSbtLy=f`rs_(({7y$(Y`L3c<9GU}|Hx%q
z4xmJ;-IYSMIN9@1_Qd89ql&jO98OhxKizMBr?;W3>`d!_yDvu12-wp|>Nx~YfXz>}
zIzWoHK<ExX^S$c>z;t=)_epe<KPJ)b9s-l-l=i)je1^ke9K5qJIAIaYmluW(6!v<8
z$6?$>ne=430sab>w+A{}zCL%&X(M(YGoc?7opERM{qRuH{Q=dWETQn}dnTzp=psY2
zbK>b{W2**R(58ySh_>|RSB%Rigi%JfdEldKl0C!(e8s)x5zeupdh-UnUwFA=zairJ
zx{i#1&wW!a5-$CudHm`5cvo;c1sFj|KU9BYjQ#;>4(tIxtM~ahe`kw!Muh#@>Nq%f
zj!m;WqQKfJCzoX|X80ZoAbn80+-ug>y)O;SuOroFw|!h50P0T1#oY(lI<%DfgaIZE
z_3?4_jzb0lK7fHBPhOZ#JA#2>X}V+N?c@=i)f)yi?rmhO%cAc&wl3bo78k>~H-^Y}
ztuHHXy19Mi`ndNj?!hL~t~LJ(o@k=%64*;<sQH$NW_2vHBu?9k!oIF+52~>g<4cgB
z2X(W%28=>>#9woYSlvkh2kj-EAl&!Pg7X3n^57$$Zmb`zx_@A$Em_Aq&3Baxz#AW)
z3ckPm6SZtE-Zq@k_YCPJ)~?6b5TP!g9Rs~Ll~a|`Nr@-P(}5lnuCcQ8)PgQ$zN_(^
z)6~7D7j<Q)i^o`1l&qSy>;*tZEImLm5*bpnwYWgNhe)4?HW<KrpU~npBdDwn)#q|e
z(fP0JN_}k&J4DQ&fcDh#+hIDJ$mvqG4Vc6FM#`sVV$7P^sP^Y)q#~wOXCxuX=#fVz
zuh1;Ww`p@%&xfRXmL+?dP}r7zJ05o%7@@r%q%3+{+^$q1jZM5c5#}P$GUgMaC;%Ya
zfQw0>acl&=mBk3cQU)nQ=AHV@M#Ilfvr<e&;i@$3gF0ZZypd-YBlQL}4boN^r)#Po
zW9(6W=w+W|xeyx5-Fxa)$J^;_XLLUoo$IjhJt$jj-}iq8vMGFiNaoTJd4zZU4Lp&e
zNqG8qJA=;yysL!-S@Xgq<fnLH2~Tq((rfNpo>Nc_kE)qS=G2SruF27x%`BAlWMi$F
ze5>TVGows|L2HGD`Hx(s=)Wv<;C*Tpb8I4Jci(+w=pks=^$kwjXtnIcfJSwL<fyIU
z7uF-<iu)zP+In=;re^v1%m2h^lJUrU0J4dM;3Ubo%)G0nh?GV(rIa}&o~0x7zP<>(
zUN0#!BMaWPG5`ZdZzUqkL?!aPamz~OhH96)57jHc9|dEj4P=s+Fq!?HtiqP<`x(U8
z+ZPjR3~NU_{0<`cE@S0jFETn)7U|lXQA-+5UCjO)-@HDJW8EgQu~D(DYWi3?czgG{
zx`s<7piXalrLvu``m?(P(i~eq&&z@=kMdPSmYbU`p<J3gFNS|7sQR0Q{|-v&Bb-bP
zQAvGB9LWBaTczDB$OofYCH}0<Q_iDQWlhG$OgV7Nvy#VG;NhCc=`m;rtTy4E2$S6k
z9le1SgKQO^q*ri4w0I;U$y8aOA}m{UU}mne$Ul|@+nsP-it(hKVreL)Tp<<3rHVs_
z9LA1ZJSC2`H<h*yx@D_e>^sv_D`Q865IgM0w<9I_N&xGK@#I!@fxVRfp5=;WTQf0a
zl*unyKJ0Rg2f)a8-}W)U$X8H`=S#XP(;IhPZcnhJ!H<+`a1sDx2kr&3i9-*`NbI3O
z&Mf$F#!6N-QImhpb9tRrgqN;|)BQ^ZiFlSN+yu#dLg!QFG!JssknW=uIHAJu={Lmk
zX9Q1Kzwk${O+y==g3>LNu6vxBe(aYa5lr(ymTpp`#x<D6PwGiYq=&M9e0mWN+8%#;
z+DExy?;6VRC>;86cG|I~U%=S!PvhsrOv*5!ae;#BH4LFU(Rf6jC^tm_Z<5x+%KMlJ
z_E+`|XvNzK93BFF5%Bx-Yx~Dd+Q&d;Qw!e~$1b@9gM-9l9Y5(>iq1;UCNmCthZ<N<
zl-JornZB?0-{&79y{)|M6T#*)+%UCJ%<>3NsTFj{&a+gVOi>Z`i;K!~cuUu0NkB^8
zkJ~Y}CIP)|Wb%|%O0vo=CM-}j^?GxdsAgEGOboZOwJ;cj8M%v*61xW!km><Gk-CSG
zj9>O!np<BZZ5g}2fphRQ<k=z8G{l^9+AI{KiBcx@4AN?ACT9IZ5f6524;VW`-_aFY
znPgMKG@Ai78m{Fnw}I0+g%c(06Y@Rh5KD7=7#EMwk#b|ia}Zabn+f9OXnB-8r>_L;
zmU{tG5-=?yW&0-)&cE0FkOq-_s9urYc}8J6v07SH%5w5FT{U)gWyW)Ulw|%DJnpUh
z#5GqDY5;JGRJ=`LUCJU-(`UKfNomUU#hw@CuFARmoRlh&h-cvfJG;E)i|Lx&o&|}a
z3=fMl?wsnE-qgHn{Z9J?xS7sG&mBDRRrMk9)w>J0?<`+<+Aka1qJw-7%HlB5SUzS7
z)iskRdKO=vj*b`;uvdU8x<M4e%~f%>oh2nL%`94x{$^o{ek74>XIeXY22hJz2s%Cc
z;q128Z(?H+>Aqi#fDFizP+gy%fMH|Q$l`$T*5o4+zaH4YOgpK4W_m+t!oCNWi1~4|
zwlD~<gA0SQT}^1(7FJ8Wx!FKf{_Mxm1`w%xHyY-Eklxjmg)L^?M7k^NdwrXZgs!=V
z?${_sfV|x)+d&~voBo0?f8*E=Ii2zY;PNvYAXC2_UXxvFP1Wm~r`PeOeRYil+(Ej+
z<G6l}PenWGYE4PKk@<_7hi~iOSc=dsA5Vq9vGh2P3;n3Rd%U!xhSAi_RthpI2JgJN
z97u#W_S%J3t_Rr)tFISek32S)ClqkQ%aM_$cu}27#>-le;O``G@#S^)+|MOfr`Lof
zw^J^A6rvyhRZv>HIWbew-Asq>X+F>3GS$okyUtEFs+~S}Rh+rN<VY1j+J?UP8;^?7
znBy0N54drSUYH7}ob}df>6y@I;Y^hFxlo7<e-6ueL%Wq`5SI<wSG00z-JW4RDt<WN
zi%?Ew(qhag%pMV-Ki)G21ziT$Xxbtx+w3Stce7u?n@7vd5s4sgXG98|&P+|g-T3=F
z$FKeEUpU}_1HExq0y5r);GpbsUfGhQVS62s%qO~0uD<s?RS8ci%+GMKD@Kn!SKft<
z$v!Aj;L8(~sALEM*C5YUF}zBTqE@ktq^dor#Uv8heZ3&NE2&p3C&<>?OeEqr^7f*K
z5_|N9$@5TV;fmJK>wfu8CQ3BK(Ce+wt}y$5=8wDHKJEFP0FZ$|WM!wms)Ub>ki<B}
zT>{mXtR%jOiL+0RU=|r0v4SgTOA5s7y0xucM}(GFB&pj!yQ^0!ySvy_7|pWi^}H~y
z0VELT^1&DLz|dq3Zw5erGG@w8e^}9TNF!kF*LmXmyPv$9htmNnT;O8O4E8}X!WAV5
ze13Lj<+u;$$up;q<MqUJRdPSaQ9$jXSq|BmOEZtG+DY$gRpnTUob4b?6%aXZ$JjRU
zw&}`KBE+ry9<Z=ysMZK#f%iu(V7IgK`uo7d>1Hx1P1B_Himv9<40^V&N=llWFThIf
zlaF?=CWHX&q4=ltnac?7m4WA<Yrw4x*?)6yUkuM8agi5v`OJ+0wQbhf?v<4YIKsU%
zMxAqQc||HqgdG<NA<DZG2ts(`rLfz3Jp>q>K(WijxD6(0pzuXhN7iU{RKk7q)Y|+N
ze><d*Iev?9Uv2{hx$~f==L*FDKE(j(Bw}`ahVW}?;oto_cn#iV$yYFLpHX6|M$!|5
z0~-K=$li=vr4=4Ixu${HJXgOLfvT`6O;h_znNgfI@7YBvjVc@L*4xIyHx_N{l+R!y
zx$b{>aztP(luRVo=3jVq?Cqxr?9Iv^Uj`yu-*%p?y{)zS9TpyuXCrt%Q;F&R=Cceo
zgd*d_U<Pmf2rNee>_U+yo3zW}ZnkiVrs{)zufkKXE%#EH=~a&C{td&-yvLd)9rwOi
zsydtGg_g%~LpXV`5}iFftL>;&!-s2MikI)7qFdQ}(dJ2$G-03YjCi8Fe_pn|@C3}w
zJyaW7yXU=HNbLbSB%Q4(Ha#*G?111B$#?czfGU$s+Unnx<h{tAY>otj&U34{SN53m
zA|r1QdC*Fl5m-G1uZf-6zTA1xG4{km<oxopcVjALM#3<LSMyW$+0_hT&LU^k3SYth
zvO?Q}*mUBcQ|&rB5$g??Bt@n?`8@f)_)t~#xSK_g=wzsEcsf9E`vPN<>vcism1Y74
zF5AxHlE!wxYC!-C?EZX@@bJi6+UlZX_9r>1rAtV-<nW1rZqPBiJ1MUTWl~tkOqC&&
zwkKV4iuK;0HW%0#1hR0~6mveO+a^Y1qh;(LXdt)GSA8349&QMQf%WLC%m9&j;mFa7
z(`}?ppTl2<-5&O|pRG;8&fBm=`+aspma}+(TBFNtS`2AdbfGr#IZ^QDCEduHnSO*p
zcs<>+SN<2X2Tnh&2CiV2hWt}bvbk!keE>q1))VHipa#sAG9g_{=0=y)-^#N08IV(~
zN9l(T)=JG{6SDTrQ)@iWRwcXy*OaWpf+PhnB1~gRyGw3JPjv7V;{bv~@_A8Gs8l1@
z)R;xxL8mf@!11bOVd0Up#$dLJ@xU<KlO-h|n@>wsR9$aQuAdE3CKRDVp1sl`J8crF
z*YlnAw~BmZguc3j?=McrFOOo)#Bx#;-qCgHq)5SWY8)7G?RMPwbkL2lZEF*2G1xZ|
z8&OA-66H2iF`7ZUQl~1pQ!O8A<$4G_UdJY_&f8qvrHWTCy8z<bM>!$FK??3bx(rb6
zf^3`-iAyMo(M@_p5B=`nwmq^b)qv{1rO*V#bR0CiP-2qvaxCHSRr=O0q6`QjBWLvN
zc*LHHXA&U^$vgQF1tE`ieb%wjv0&v1BiFbT!Hjke-}OHGTbi+|^SH6DeplpU?g9Go
z``rZH;O!)$A>Y^N-N9Rs17RjpLWtT*+IZ+WVfT@<k4#>Kaya7|du8UD&&LL`gfC4;
z^x(OU@zLrL@2BQ^7DpmOK=|~Dq>jqWqYl2zTB@CRsZwo!pUq%-bKb8670xEP)Jv{#
ze`Ia@D#HqfKf3xG%vrwL?FuG?n6x}|J!Q>vDR%6sO4Gq@fE}LnCR$kQW8lH^?=;HX
zE_KLqdg2Jyq1E93KL3p(e^SmP3mYZBql`LvT6Sf|kfsV&bAow>HGS`9&b4>7-6x*j
zoxdv6vtyD>SH<wHkMf=ewZX&Uggwd@^=JYoy3<<85rro?97UYu5=pO%l2&D!cuOGm
z;tY1yCz_wIlQlJyGYITOLdK5lBV4h4y*X4!h9<p*2?iT=j7WxE;5)JqDj<M?beTHP
z$0!qv>+qXhsCGsGRLik*7(O<enbp!U47UhV%|v;is)z^2dd*wC*%nYjjm$_<(alP`
zD`ttsmW*`KJzp$gYuMT0`-rC`l6vEX=W5*PIyt@}B0y^Hb|fq3*AcpB<yTO&Qe-SD
zh6G#xksv!eEue--qeX%}`8F7k^F}H*^qT2I8NSI}dUs7q8B8MMA<xm5BdsdmBrs#M
zG6my|11-?0<vONGV4s<`JGj%r8C+&3w;db6crN;(WFijC_>THyX}!+{N1{MxhC?!X
zF>90i$#@3vZzeDCTiqK58y{#%3#CK^BzqIr`{>9v3l~2%!&!>`!7ZWwfcl+6E1<o5
z*K?tI?U6MiFO4!Se!s(2ao-kdesH~o54}oDH#Hw5G4?nyE;h3t+~4W+d|fo$w_9&~
zbExoyf;*7312pG6Xd%-hy8t^KK`$T-N<-{S`&}<wdW@Jo^xy4r(tsA}?sBsMjHdM_
z32KZeN<qd*<n!&PCo02dX8^@W<N8y}YVE5rMa3-dfP%_;R?k49oQwL+0&RfFJ&Kbz
zT0*D8UU=7ihaI-oP(=>zw`b@WInt3SD|C@wDMeq!hAYc$#R1V<`1pvnkx5`ErSQEG
zZDW&Xp^U=Mw7-_xK5#No0Fn-3`&T8g3iZ`c*t8swamy21vH^#86&BgBU}0XiTWzE=
zvmC7*YO#Kd<s<E&Xv9UsCKm<4<rcW$w;;Lr-7kV&$^7?$#4XQNrk}F8@Pz$?EqKuN
zmbB1BqJPpY7{Qy2^?PpMORDjS_X0jA_-?3jx)hc_6N5t?Ibm5A+ure|Q6q2^`~<rP
zL+=>bNg@*7j8i9`x<~fff25z{aOB`7i=N}2=F`kBW>==GtpaNBT@Xn_m(0$A#EBWp
zt#o9(#G5DhV0~;>Iv+?~bQ~Z%TSy0!fKU=)wvmzW)n+pM{ze8ISlS4cZ6B1BusWK&
zlE5KDg`p4txqtIJ#q}^tc%<-gO$C6^HG;%^=BcXREwF+x--2fPN}ij>?3wD^hR}kx
z{wQpcO(FHOeOw4f{Klli?q=PKD<@H-qDHgzAR@Yrn-=Z*$fL8Ld)G+02|~q{hr}I7
zn&^(Nq`I`#;kjUcS%!?ISeAhNr=h<8LWKcbEc}#xpo&oPSQlWD)3P!t4PzI|q|1B9
zxKA##`N$*(-im#>c7~2EdM;euuky)S_35fwJqz@h;@u-h?PVh-#KbXI_w3&Z_L2Ib
zTmi-#A{=cGWYb41^(|*fps~!}AE}S7$xgk2GI-cUO0wEXNcIW&+9~q&_0v%qTOsth
zi}Iks0)G!TgNl%sUS(PaEk4MR_DD#Q!OOvqvofVpR_H&(IbIYp_*2601^TD&4h|Sr
z9=!2AI1PlCA5QW8T`@aB#qVRb(u~9(#G*1R)5xpDziyF_UO9QXDhitL)%cdNK{9tZ
z4|}VYih4>4=v`py&8JT}o-RkoySnBm$nS)_cp}3fMtWlcHiKRf4R`#_3DR4Ri`=UM
z1TIc8h!cuDOK*vgcK#wyLo81Use*k!il>B9j8x4XzlR-DFwSP-yXfszz)CSw_HA&6
zWSL^H{=T@IPG)3v5lTZLe+(osY<MYY*u^En%ZSDy2)aJ@w|h^uX)0t?*axy0&a%}+
z-W{8QQ2+5>+<(`r1f(h#>nXeipGmim(LO*b%7{=Cia3do6L~bMoWRh*7{0yB*n6@U
z+7x&b87bB1PD0+UI%nTbx=e9~PKVRcMOFI=!SO_*L?S0~Qu1l3#bp7h-8~N%23kT9
zAZPij8gBuZQ)4rYRLscRM<yW*1^}5l%+utR+2E1Th;$z9SCdC64WZFF&<QyAV*z$=
za#!u}BFk6hFjkn`R+JuObekcf9}f9UV@T>DF|uQi_xhNrafgK972p6xU*o=n&BCW8
za$x@#hg&>&m!kOU-&`K=0Y8<;2K89-G096K?1VWDV=S&hq~HWSXOYj#&F>`Mt9g1t
zQ!08VEITppdyS3j2_fXC>FC%kXJgRF#M30f0<-#fiLU28qT!JJ{K_7046y8_#kM~d
zc;Izfgf&O->K>zKFNwqe2LQFvkyD}9@oJKqT+)p|?g&n#7`ZmzERRv8sWyB=%RBva
z?S10TiJebMBHg;hS>*jD_PZX}Fg3AyRI(pfW@ZDi<5sh^I5=6&@j&R}`@+ypTF97?
z2{1ZNNn(bGvQ1v6h#~);lcp4q^(z0&R)5so57BNZ?+A@=a~S~yad!x;-3P9bjWRY~
z3x~g$n~}dV6<PBaGXQ=IwijiWtzzi$oR3<axk7T*=uq-3)`f*!&<V2n4%<mR1|_+P
z);0oP^|N&}c|szIe)|sCsI=w7)cQsu3?3a)iT9F|SUQ_fR5=Y$Ca+94_psBTnulwj
z*mhEmdc5oneJ{B^FioUje{-v&a{wOvnMRpZ9Ki#_h?LnhOyh(m3qv<NdR1iRRB2j4
z((_mRe$OFOk_mrmJN#PH<)_JPbP7r6LOde-!Pf5UDl7Z%x<KRu9I{WK2_fwi(NKoh
zlGAO;yKzb<c8qR#m_&%u;r%s{2*{9fxAT?52;MQ%+S;lhZ%iJi!Z@2e^M*aVGk^W=
z-uJK}ZAVNf5>S1b7`#LsqWTV7$2D26Ts6_y|2~;_wZ&}4nx8aZ?@2kFYSeqO@M%;B
z8i>TQ!1iq@IUx7rZ~WZ7|25HBV51o>xRH^d$}+ujF>~o&Dj|}aY;-gbJvvGXgL!_k
zZ^lm9OCNu+;SRr0U{R>;^|gMj-kGYb&!xe)8*NeNI}@8k<QKrsz>s<@ilw-Z^DDTA
z15#=BL;qk<uHm?PY<mkrT5`1+G^1TM@517^3TO4;*<MZMHO#UJ`S8y`6{#Cg_aC(Y
z!vLmV4f8<-02}R9BDAbTR~rMAxQYCYI*!Yv%ssQ2d1mryy!)CsNyJ$AmB~Z@NpnfD
z^D8v-tw3A&(zHrqi7@rMfVP#wJToC=fa<}K>$biNVDPeAVihIB_RE}_4LppG=RpBP
ze@5=#d&iW2kug98u)+mE<g!tMF?2nQ7$ujp*AU`xT$GaukfAZ6AwEk?a9pNWmoj%h
zKlb1SVR9PGu<c4R;l}?UzKUNz-|NlJc+!6=nuNTU>MR+7?4Lq^c#z%t1<S&R&%fYp
zqsY-v^1HVlHoblptPj8Y@$#83yatd4OA=SG{=H{&_=%N-gFp03e);&XipEcaxZ$;!
zx=ojQM+q-5|5)ok3ueFgP=EgD=iU6cNboLR;MP#|F!7Ez2)O*~3IFi?KO|6(F6d_%
z1?n$Ec(ni)mYVOosk9oI<H>)HKtJyN=cj+CiDnT2NPTCU-~6sVZh3*g`v0Ka-kAdo
zgo;k5^Z)&m!TKjuzULUfEct5__-RSt^uY|Y=NHq4eXx$EfBzeRVSk~8f4hahHH7d#
zw+sNTfwI9w3wV2^v*>jC?YG90|19XpE=5}05O`QtI#S2_`zy=-?6KABtJe?n%flS=
zb~pG&GtE$zGO;w`eyHz}5&u5~9a+K!fLnFBCwKR|NmR7J-5u_9CxYU;2`ZfYjuQWW
zdi{8C;giIS#LT}@%>;Htyl!S<4W_E_o2V0y@-bKa37x+e1qyTm{+4zf2F2eM(|$dY
zLA4Zsatcuz{0{-YKsF%re{j{_Yrvf{%(RS?35FiK|Fie;r~m!-Q2*s&x4ytTmT~$i
zyi))aQ7H!hXYX+4073_^P|i_Z2Ka>5q+>!yrQ_d{(tkF>(L$5Hj2BKM%U1uJE*s@v
zMuz|M#RwWup9rwOsb~G?eC_`#vJO5@0bGO8Elx{Yf`vb59{+*y{V?YIv2Iwj@atSY
z!V7Q8Q3{pI|2{qY<pw~6`7H!ZX#@Mtg&<YN@Bek`R)E-##|c>WDAN7Ah$~Hv&%T=f
z0-~mqe$H<amVjzk@!yX}f6EpBycpv&yiiwmt@<Bw$trpT?f=_zh0y@QIP@<=wMd12
zKZN{;)$m)yJ^EKvK-lfR$fj{IK$@2%`=@XHjP?IL{I}Ktt_>5(xOZf?^KAcj)!<Mz
zz_ru*gq@q(qEsm&IFqz;rxI18yLlhZbDugq5&*50&liA0(SGR!UdpgF^hD^*1r-TG
zMYaa;|K-5}UI#2?y&El?S@OW==;ii{X2^Fd%d>K1aDU~A{zCNd&?NxgfL|Z>T{n@Z
zvajqAly3AFq3xgU|F2pFhZbyoBTYdS(EX6wL{+gpaFlz_(?FF|u_;~4^-v>*#e&e@
zR<`>3hvbuXCil7*GA{k_y_7zZpX2Pm{N~T6hgXLJJfJc;R5d|jOhB|q5SKoCPn0ma
z;s(KaytMA1S_A%11Lc*?{J^o_4V98Ze1q!0EF8g?z>^LA5T78g#(~#o1Rf16Cmg@M
zf;CyBX<aUV*ItWAIG;oEbJ-k)!T%;~-uo6<#3GsYL<<$4W(P-AbD~<yk6(jw0ha`*
zz>OZ273~;Ohc=R*{SP7f*Fuw~#Roa!)=kkn&IUQEa)FRVlNQOtJ!+az7&tkq)<4r%
zpp(r|%}pF7e>3WF$s*`>BI6vxtjNzz62DRY{v{3cl*UcQO@LDIKYfAkLWrWju-U>`
zTfBNJ+6fga9~^TX&_V3Vw(ZCz@9Ep{kRRRxw`z(Yt5gLyl!YW-x1l~gwwq7m+p8Tw
zzw>5Svf%wvzqkw?sqX$xW^?PAFae>UA7!Ch;L{Dq4gc}8@z(?1h7i@Z)V3U*MSg!R
zmn1b8;|hr@9yt;6u2`EqB&T?UJfx&pJ0$b<>Ziv%YCssI+p15OSC!|Htti$MvU9m{
z9`6;>D<pWyMK+9(nhA(_NuesE-;+XcwFf3S;<@z^$tz`uZ;Oh;)pJxaAZZQ`nxCZ+
zK#+Rw!hd$G%~NDom?a*@ua%spQ@g&}vjaU#LGiNUEk#IO@!69Kn_|bs%e{bgsyCwd
zmXmE8_Oy;wkQAJG`ja-9VD2%K2We}=+Av>ag*v}Cc!`hJLODL~^EnEiVwbn{oNyB`
zAfTCZdv$A}O8vf@Zf2<%pTc+H(BD%dmdx2>6PO*};QuXkk|ydQ2uUhFOCFL@{FXeV
zp!h6>cX48qzV=enlAMca$yvHcW4XOD4sfyJX2nwvVT}lN&N%DIf^^SA&nwVqz_;>r
z&9PsQoCnil(W-!NQu|c+M>Hj`UARJc#+^eYc${(2sqHmh;*ea7p8a9eRV<W=_}fN`
z*7pSK$1ZON3fTWQ;U4zazdUJ*5LodDMacVN?UNKwDn?FbsIJ^SX>LCbjxkgiSxXpk
z*L|zs%g<N)F*edHXStSk<1{{bDUw!TwE4`&1XSBEtk>qO3t}rpp?qUoO|_uPOK!Tk
zY2-C@91o+y^TW5T1_)i5{#gD0Mu9nHk`U~Z{}gYwr%guM+|Qa!wQZj@SrWTP&5%E-
zFo}$R05~LDn!!gfKm(D%!*xvTTkBQwEvAC0;#nVPZGqk$<&ncKZEpl1vsrRIi?y=k
zOl21#ga;Wr-~U;)EBVI#t)4>d*rg(BabBd%P7=jvD%Yd|ZzFzZv;5z#6ez50zYS?<
zIl91+>)iJm9|>`rH@?(98O(~l_Ywj`MV=`MMIGt*!ArU(%HCALQbkh|5bi-HpoW>>
zd5b~kP-3Z<lUTR^?Eq(kHBuJ)!PYRDC%TiPFY$$onPGP0hbLki_C+5GpBA!J4%Izg
zC{6ox)b^4_)1_ekc;bJmz5~HCZX3A5BkO7BKWnnpUb?6L@sZg1QjWo~n}o*e7h=*h
z>0~Ryk6BXKR$P_LlH99vrWNSG&o3i8<pIt-?ErGTWC5{m``ZC^oZZVWBlKq2e%lt#
z<T_~=wjPakT<pX}Lq_j%t<-Ci!mv{-)BLr+Z6KD7gszPL;i+5RB47^rYkTBmNMErw
zWeBo(gfe6@99wd!t1tV?k6Hj7dJ<au=nAm;Q+NslnXZdm0UkHBVP+|Y*aoBicwAUM
zlrh^8E>tSA1FcYg8qIyU6%K+@USKRwm?+VDz?`UK<;|GpZ2cu}tcH2+KYp6D4qyf@
znF+uA-k|$&$zWj~>DlkqtzU`y_Y^N)izPg4sQ4|V&GRNlZSLUdF*c59C^rWiut!yf
zi$Gxq)eVGkkr*FUnMT6oNDJG7ehshf&5W8tm?KRY0HoXeF5p~74xV9h(Iru}V~E>q
zsw%sY1B>hkf`rg<wdXeZhPoH!pE2zqe*3>=cfbKNMaO&2gn#d&NaG{nR2IvS>EgFk
z@b_#wB}^5v)^+%+i^3G1J1A}-e47U-lmyJS->m2+Oe;m8>w&QXu_MR_k9NwrmPERI
zRZOPF_N@z+<58Ya|65J_9MP#w<k8U8p_u#`OM6dzl_#9e=noY?An5!<$v}~nrpdet
zhIhMXhZbvcWyeCk7SgO=^wZ6erT}ENG6D-~k&|C%%?LV?W5vfTC|tV@Vv{QEG}*k9
zhK$|JiY_0GQUHRvoIZb12?BzroIJc5sVwSP`=`;>%k?^1x{a5PHWE8PZu8$nyk9G&
z>!QkaV5Q#Rj%j=(#$9onScXeUided3ek}jC;VDC<7!q#$D)?Y9>4|P7OytVXfAk($
z3`>fKkS2?w9y7^rpDO`4`%~rj%%$`?ZgacmqLqDaI=z`rC^$xXnDJQ(5$4Fh?_ph+
zF9UE@4shINim#Ru$qGfe_fB-*DBrbThr|CGY*KcJQ_oV0ggp}R;SRQW)8wxGDww<Y
z_B`a}b(VRz2YO*Zm?@a8Yu8cWkrowQ64hyNR<|m4SJshsndg*9)d)${Lk^CBp}uJ!
z4ka$14^KNMpU1qAcQ|Osa_oO~SCi4_+WXjY-;HMF5N>6B{PQAs{ao7SR54%uiny~*
zBoWg2TiGMH{s>2p6ak9Qlx;dgAg}dTx`}^hrxL*XZ%yCJPt4hD4Tx#*WHzGAuQSmt
zzJsz@a>W_YNfoF7kz8{-Qz*Ud#eK;)B<vOlV}i~$fr=OsL5rdyyYVebj9%$2Cjj}I
z_d%ZSXqj3z5pF$2)NkJd6;G3t(r26cz4&k^`$PBB2#Fn?^8I%#|2ePt;S2bap0NTQ
z86oq4aS0>c7vmBpy7j+=L>=Rn%qm;+qRE~Vq$ddqkP^~`C)UnJk_+j4f|6X*($)!k
z+7CiR4Mo@G0hq$Ly4N?4KF^6pHscDGP@li_&X(H9^&WG-q#oc&gYS|RpZgCX@aGwd
z#?p@<WVKlH4sbDx#*5rrjl+@WIeUGuw8zGLwiLZgDehDROf3cJHb6;uEsAVp#{pzx
z>0&W}EH6crkL=Z+Vl}`SyueDTf8G^|s#*lGChy&vOg|?iESh-j_6rO67KaaZ)>S8O
z@yiSOn;S1qRn}*G44G(e=ZGHHHx@%MVlo^CT3pN;W8rEy`WQ=dp=aE=4aqXQH9p4`
zMODq#xuWmGi$1PTu)mdr*V2gM4<TSLiV?$IBp_bLvP-Bh#)sRO1vJ?wE-F9VaN&F|
zFW)EjqosVM;XjEe9T@@eb?66S{_7X)lMek{f&}$QG9Uc#<a0E42xW;|`tW676Ik>t
zIzOmNai_bmfiRlKNYop|y9T&+5-65Y{M+=@lE#^}t~#2iE751y!GV{V)Yle7qJ2KO
zuo~_?Y-@pQuDzy?5}R~-N`Eu!6GlfvSZI5On$^J%k@e{t-)TQ7jTZwDm9@aws9Fpy
zD`a1(ZE-?#A-&}c(?Riv33KxWIiH(y@87IcA?kSiZ)yp<E$hiAZC8CzV~!;ewjkGf
za{@?sSK|@sX-t}HF_<WysXSLS^S){u!-Uf!v+AP_Y%c%T>X*BCtwNv<SRUZpr|2Lz
ztJ;<hAQilKU25)lscj9?uSYJG<K-t0{pLSzO5c~nIYMx*mnFzp=T&f%kM>gVUKrQn
z%zRGAS8E}B{Ex59-KQ+rBcAzMYi9~>-z+MbkpQ$%?{#J9whqIZ$a{S6wUNTZXEKS9
zxz;)hU)so(n2Wv+Oyr^xbz*ltpQ+vk`9_*s44YY~!h7Cy`zyVl(y1?;%HY%T*3aX*
zae%ZAN-214)Edd@J8i+Ss}{8sq*H$-XR6VVbG6$;|D2wT^^xwoE?9cYa9d}*{ws<;
zJ3=(0e)C0Y{xM7R9D@H>P{iLiKcVT-t^HabKdR$ELXtsl+T?r(2qo*rCCn9Vk7QCa
zEoRf)I`s+z>VkPH-O9LU3E!h6G^*vp5)pc^TR{Ba(uH_^jbuls&b&w%S6|D^i4%UB
zz?1Q{D)fy0j`Gvn73x*%?W!`n{Bm77ETC`kfgCRU(_9ulaS`eHtCMm5k%h>+@1LSM
zMqPwB{@VVWBQ?W$1EZ6{>#4)3#5r136j-|76FsIexr5FOn^%y}IZ=9Ae=o2js(?KK
zsg~E6XBbJHUE#L8cABZ`bzq*m=0agz#$V!`qrMs(d}RfkzH14tG-Za50s+4$BL)u-
zJln{sEEh>C<*Q+B%8-xAJYC(hRlB!gQ4oEoK>H(#;oT@ey5gAUkD9>GwB@J|w@C(U
z7)@T<oxx3h+9zeJH|O7mZwS^sv+AH{d6YE`zfWmzyinRkS(tWL^O{StznJqiH~Vsz
zE<F{y0a|7ym9<Sn0d(V-=EM0DdfBca(@{%fIvI=HIsG_<+T(?omxM3W1YQD5&CeW?
z%Rf1zz#(dC6TP*XrXKcMzObrF9%G>QzAeGxr5;V$Of2W9F-dfCZFGdqmb;mFw(B%&
zf6Gnl#x<yvlGe6H6Xu%Fa`0Nia;?gHQFOLzmPYi_kQ`^bnsrW-x|k6o$?b~vK@*wY
z$=EZCcz&kC6_g>pLl0_O+q#RG0f2e`kFoC#r1Ee7kIamOh%&PG$<96{dq(!E?7jCq
zNr;eRWFFaMWF6Tml0CCIlD)Gz#_v8fKcDA$e&7GpIo#KMy|4MY#v25Shiy1B;S9(H
zeE5q)sPF#W$O?F^vu|*!(LUdKJA63|Eff%=Povc=4WETD6E$dU1~Z&D$XKKHok~w&
zb;t`*>9W_wPquB)<KCG>-M~b<%5DB2{2KRsNNQ@Tm-|wR`R)EXFRxUgWTD5>_wN(Y
z%XSInFoGP(1(X_&2W<AbI=VQL+|70y)-~NVTs2(3*ki-%yMu)h^u`(4nIN+;c;0F&
z5|&EKb5y1VJxyZl%@Km{C#<Kz)jWD3SH`Sp%hs2s&4a!Tg;a<MKGrMTHWF36cd8lF
z13FD3oF1!`ax~3XIr>P*!i7D1DRPxbGg#X2MTG}6UN8X`pO|FmW4=q~ACKP|Crhcl
zDv}M=vOg~GXosGu-Ea-~yU{!(+0MyzD+Xqr)Kwn?u48rhrIORC0j&S_@6&j1@BR`y
z$YV6YK}ll?KCFAjchFTXa??Vr)1Fz|;4O56;O3uKtR8>^la5cX(eH*6+=re{jHKI^
z+rCgPVly%e+s`Rtr!Mi=3neY*kTN<s-eYYOszh(tC$n+jVQeTgvwU1>p}Gmt>#wUy
zB6(v#UvfR$V>T+>H1td1?c9;Jw(rz>UC3i+0dLb9J-ib5YG`7nBy<|y4)^fnxsU0A
zI_hhXX@Vk;90_tUqOpS-?Jc?1xXJTd?0?7!kw1FJwSW0(Vxxeo=fINc-NqL?w*YHn
zn`*r+<B=TV*~pj;z@ib0G%B6ST$b;pd#C0~>ovx#V5RWlCAa!-H6iPLXjwVOy3#&{
z6~>XW_csy+-quw1=nZ7v>C|jLoOEVqA8W@pFNj-w-yD4~*ZjU$vwhm9^_jBL)^y2=
zSdg+*@7~~qR6=9tNdru(=#<ZDvw@erN45BR*u}gGSyU<SE+$JXQ`&U{CAzrbAPB)*
zkX&Wshkv2Vjtq?tetMH%uSokHQ~M@5&OH(bV=?p+nm8d+5Yc7gLhPLqHo(gkoS0Y{
z8{$c-@WXfQIbW)646LY_W0PA8_<NYM-WaVMU=X9j7SOBNlANa`wYhPa_RhqV6dODy
z^yqlPtiBH81ExgfZlA#Dw{i46+t~)}>76!2BsI!brI4|l;EnY8AIxVqGHEwmI`KBx
ze{PM&^pBZo;Lt)rjXzrrepxjzK=y9wUBSVRO@71hSK36yDvseHT2f4AsIwTMQR-Cb
zNUiDh&chN%u2XQlj27Rb{ABqFQE=yTN1;;9-L|io><y|%3YAy2uv2FA^>rkxvYR2p
zhti0Vx@Px-6I1y?#*5{6XYEpH_~>hKny0a_BtiH2$6>b84yAKlC<rse9Bu9&aQuHJ
z7aiTMAox>Yh`K|4=f%1t;hap*`A_cQKykxh6Z@W$0g<c%@f%ZB+V7hMYFf6O6Le}*
zAiI9JoMZhnXSa_JN+@&48Y-;uSVikpM*2d<!jLb|nifOYrtB;xu$oO3R=_J|$dI3x
ztTz>3IJ;N*FV6{SB7Ye4hcUcI_BN9RtEu%i=W}Dp<R@EHhHm-$5!?WhX1s#^!Np3s
zQ8>SBj|W*+MOTAY>*OG<;tv;3`lg|?dR_iecbs9B08f2}uxD{agAv1Y<c$~Rw%xIr
zmD#eJ*P%-Cy6;+-$%Q02&%6>J+A&PDx3dt4Ys%dQ{;(fJNc0Y(UxN7aY=7%oK;tCF
znH}L{GO@SiEx)7m6ASR9_6FjamdWm?6knnOPWP$l^5o`h-3F<@A0uT-;4`mE-CH?H
z5$Y0Q{)b-0ZNg=d3%z@4VMZq;Ue6hj9r!Cc*BK8wTj@M8vsVmU)>OhtPPM`^H<p{H
zPc4J?#{_q%0fPv+h4vih9x2WdyTsnhEUAb9H=%cbP!AmScjm_M|E5s1s+wqHWF&aR
zeTIROciC8)a>2Auc%+$I%87E7(P}g#zZ-Z*?Oh^ZfUoV#M^n=<%h{{MX8QYq1~q6x
z{o90#U#!1UR`alNFV@$i@JBLD*ZBCa?*t(@uE4sEcjTh^oFW*+j>GotPV|rP%4!7$
zuVRNx+-hb&x8xyQM76Q5TZf>N^u3UE=8k`3Zhx@(hYLh$C1A@xJjZ><ebX*HB!W13
zh=+9-80d_sgW>Y#-+_EEt_fYQ4r~%p63PJ|L5D(5+k>WIb#j@F>zz!C1Ju(EC#uEz
zV+kK_0z)x9Ql}WrlTq|1_HiMnDLT`qwiUx;&KK2PQkN->Z#szFx><yJ;t|ff>*I~#
zoVYO~(^#VK=%R?wIZ#)q{}J#3lJTFYC6Y=r;gF>jV32ptH<oWC7rri!Gav@}K;r%U
z2*Elnl9wcVJfj+50^5&Rp&dL9%$jPu^EihgNW8c+no-Tei>8E{imv{fa9HNEV@J2P
zdSj8$of*r=gW5^XvlD-43N4W_x+3=ffuvA&A~NoTcX+0zp*N@e*KA5;^lj80ox;5h
z9(<L;egz-RaoB%!e{2lN_ws}F<txaYM|9mV(<jeoM|h<sg^ezqdc^D_%Ogg$R9+5#
z=f5g`o54!NSJlI5efnVBvp`cyDQJG(XngnC0<#LT#!U9>i{P+Y$NJCC=2&wl>EE_@
zG1WZ!uT0w`ZZC<PIXhZaHQFPi&8pcA@7C0T->G_2&;{t<%RT{a|79P*6c`_j?~Ip@
z@z<^lI!6+qtireXMvli)jpm^f>5%;ze)1ZP>fzS!TQc|Nttu5ScZg-whnV6T;lyYJ
zxB)3mb%5!Z;l&fT9hT3(9}FCKGVU#de;zK8tPh&z*&+i~H^|hrsHx$o(nxUoC}{|6
zp=<QP^h7M#+e3K%_BDKz3kUuPKTeG2=P4!o1d-l<+mFY00)+m2<oU0h1u1MCU`5%W
zMXL&Ww4RDKBVJHt*P<3L=#qDsn6acbfz&x+)7p(AtHKD!+6&nc;CB~H|2w(o<or;d
zEL^}1IkOgO6iB>D+M>T8tm(JLzl|*$7+tu9AOYe#1qR<aCkt`4>xKR1rk3+??mff8
z&KG!RZ-kFC(6gR=P1`akTa_}B(=F&zCdt_c;kdV`{tpDi+(|3fj_P|X+jfgjDPISG
zQ>?JKmN()weElC>@~$MdKJB?+LhzVSIq@>=&7hS0tnGYFCT!ux2ju-TtSXlZtv$aU
zAyiS8zU0NO{Drao-46{=^+vD#H*oQ{K0eS4c=fXF(%?OR^fc?cRru>~-yAT1Z7_dp
zLF+`3t(K+4w^6;(;in<Y6nIm$867_uoI;Yjh7fWkjKTcVqJl+nZpr-5w{?|GOZ;fJ
z9A&~7zod|V;?JE1`CN~!atqQ!iC_4>^-FArce1<Xlq;j<!kK3Vp4QypobU1Q*}vQT
zuaQ2K|5MG+PBUsBy#OUsxn~aMbN6^Y<bs8P)uVOIbVyGk-|edEXwS$kE??%e(0~?>
zVYTG0Y*UyxLQBL1zVd%C5-9maSy^FrRCsl?;2S4PfO)5-Ejj`F?7%s37S<_`Q`GT_
zm1DF<;VCQ%+{?oywmG$@M>33k=EW~!z9Up(X7RLS*Vgp=1&%hC7jQSb{3TfU3$@Gp
zT=XhjDm+_cK>lnecN_A?#!NfRzbV2JNX$HyB#sf}S@kOOWg_O0Lz5}rD(UO@meNiA
zD0kjacms91n@Zw-v%I{Koy!8j1Ht4jsaAP*@4Lr^7RJ*Vhgjdycw*!$1UUXzfA@zn
zG)`g?b7GmSvnv;nVSvM$I#dSYA2)aCzrs0t#mAR6YM8kFi(+*&?iki{BsHYpOBD2d
z9e(|wtafijW^-Ed6iQ$%5aZD~x1(n=JN+dqdnH9E+bGFbw>>e-+O&5itJLL$M_p^w
zbST0m;pp1~-eS#FJujsp4n4gkq>FeECZ?gcdxW}w!cCxeert)|l&?_-Y2Q9dvFUN}
zA=ZrAJ00Um&5JStTi#UxGdrg@9TO>m5mcO2%GnpmQSt{_B7Ug<KLznja9r;JigxYr
zj$W&H$?aI)XMS|9kJt(TDOidQIEm;*@Vi=e7F774SBm>&jGq+iDIR{4{5ZQg#ua^x
zwM#}I?T1{vY_j^iBjh5r*AeZ(7D=VFB9gkNeOpdRA$Agbo9{pfDu4Ojp!8NY7f}Nu
zPSaLTb}YiSf{lToX00G(z2B41X5dz4q2B&lMoDxX?-=LcejSH0zc{Pm&%H1JiKhQ9
ziT|0hrP<-`FAX{w`&VePNkk8yvT{pe5Xs^|gx}%#wG6zc@e+#HFZL75L(oQ1@>?=c
zRj<;U8+tz57D|hsS!;zZelwT4(HlQQLf{Y)<5NFfr*ta0%X>`TX-MZSqU5<dBb04>
zDtXaY@#aEwa`cUzl*gF-9BoWF46SR)Vw<bM2=XrjM}-B-{1UvAKZ!=^2s++dzW;s#
zs?3<r>D88IHjV9jHA@*aF9B`d$kto*z;DpjV{W^LokWDLYurNS6SJ(}_Psnh<f2pM
zkX5C%-IwPrV>wtGN=i!F_GA$+ov_Su!c3>ZD`Vd$ZbdLxWx#FL^X=)Q<19;QW1U;h
zB^^m*#}l&@Q20MBMN{bo=YQLjvmkrG6phZ-cq3<B!P$>PP7}W?ob{}T)07pkCDMFk
z7uw#+yQobhTNrPZU1B_@{2h7BWb`_$tZq@u<<j;_>sC4;xA~_2R)II7D0-4*Vuszj
zw?9v%&Lf1vY+J^d!CWh%)j7`@o#THcs(+{>U~fW-2@ANn;uqe;GsJa2Z?ED#8_I+X
zU+F<G9*Qu!nKda+-=}qM7Uo?w<4k<styQ&Z+#q@QeAdQM6J$U?R%s*n4a>-8EKW%3
zeeZGDldM3P784>%%Uoz`<0QJwy3%K_ceo8-3e_A&ONjZ32c_u0<4WKshWZQae+L~)
z5#U)m?WG9y7sU@Q1{NI3(aCAPXsGF`jS50ZY$(^%5n=BcdA;#%hxsZGJ4-8gPLQE<
znAp@+4OPKL0>uapXXb9smxEm0`1Wi{yos_o)KtxIDKiyT&r92FQtYNJaD%?IN4|^o
zMuMTc6_0!KiP!suY$i%Mb;;Ew_6v-&9Q&nt+(*%MZacrsdy}W&nQUdHTzekuL4<EM
z(*1wT9pK1-o|<R=Gn8-R9!SU)koqZd9~nQk!fDF709E!uJDzyt7re1<L3|o)5X648
z1})iK4Ov$@+)OE+?PNy8R-SC7qO@quxB7Eq24ToPT&gU-ZQkD3fKCZ%Yu2=Tk#Ny^
zX<jkedhLDuh*XZmy1OckoV@%cKhkK}Ei<*yy~P`Y96D5eT(wb}5=zQ-3k>SVfKs)u
ztxPZ(k;HEbe`!kgIP)y$anNJDx5EEjtpdOXS7}QH2>mwe`C$7?jG?pi&p8SG^c7K_
zEms5W*x+>o@3y;4p)!M;QCEljl~*TY90`Z*_)s&YWOnN~bNO}w&Y33X2<RihWO}()
zxhvl8i(llFh4=P}EgJ&8WNZ-Dr-sp*APu<9C|d$MZ=Jw_=RxViPju>Q{tJF{)T>TY
zFE7g1s?7Jm)yFIhY7gyvtL0B658H}Tgf=IbB|LV%q_7sNyLJbE|LbHR7-SDE|0!~`
zKb-l}JD@t|xQX^Qn)5rqEU}RoOg5U)=e({;L^pM0*MqonSaa9k{HbV$su|iCJd2Cz
z${2U)>}Z1_m*CMVTh&b57GvvyqUG_;mdi1BS_nzoOX)@}k_4!9+wZj8(57=;`y%uh
zHWOpA=nDpIDHD{tb&_}JGk8{c_Ibg``tl9hLwr+UQHw)mMtdj;<g=fsy(f{9fh64X
z`!LcX=k*PX2heyOKI@VpW;H!-J&@iJ9AP~lLE<-bl1TR@eu&j4ybZV`ybI?3u*p22
z`vMG2{Nh&_+B`W3@%yzM85>RhVhbuBK><9kFYRyNeNKbMKEf=w17(m4eBJLu*BZBA
z34=5y@9SXmp0z#aJ`G@mG$2zDXkL9~C(1ntg19Y_yZdbMU?t4`+Y&rmZ-fWeJM~Ou
z!v;IEoFgN67G6Qjx+KDnbe!Dh6MgoNd?VaE40PI2GW#i6!nS@m$PWq=u`H^(eA`6A
z8MLgORS_o8a!9b$nn#{&F}Vc@s+?gLH8he>^I}fn;QUHQ#HciEoy%)7?apzOTkl+&
zuPpK7AmC<!T?(SFWlT>XvUjh`^80=n*A^%Li3JS!<t1i!zx~YxAp3~N&_*?f{b7N?
zDa1V<;ldSDPjw2qiP@V0K1APBK`P3t#AQA+RVi<Ne$G?JBMOI;E<yi2k%o)g?vVY0
zrw2QlU+{1*595Nc8&s~+Gs5~=)O^dUWmi*fPOl+9LoY+Or3o0!%_ELPmxkD2{=r2^
z*|In#Q}<nJ9Ul8Ull5UncJjiQ83x$4Sgw6+1E?=R47n3ke{nC?K%{gQsnQ~4^>~TW
zoKIk{;Kf*n*r@4NHpf=3V;R_6eF{|v0GuHK?!B?32U5Np#2@z5zs^p<e^rHkMVx77
z7#?T2#1E_MdLL};vNT<-!wYow8K7wb;jk;Xk)SCQJ|GJL_l^#JIV|_GbQ<r;=-kXX
z6*dqkn6TK?@LcqlmEavuZrw8JiosM{sLaws*!9uY)#nw5wujCW#9_Ul{9FJuF?9k_
zOYusT(PedsPRGyP?Scmz?TMz=rW2ds)70bYAc^er1qon%ycqNK@=9NAeaTw~9wZOz
z|2h^Fu|Gp@RK~yb7Eo2!{owAtGdW&L1V1hsA}GbJUzVrGTzcnvm|X4-Il<n8!c#_H
zHO}<XL|!S`o6HgAJiNSQO?b;l*gQ{>M&hH(D$1G|s*@AI#SdypI+jb_O_IF#rRE1}
zHJ+^uSF4MA9q^98g|-<MvbN${=k5Ji{aWS&J{~GO>lg6BZ#$=vAu*t)__@na1=f1!
zc<tc%_A9Hq0q%ba*7*Vb3aHT24)A|`4A#H&6ua*!Hlk@Z{jqHy;gZ}uzQCO}>$sxW
z5$OEA<gW#xWwSdii07~3I*q7HA~gl924#hJmN*VDgQ6=O-((6}(M}w?e39{1qKu+i
zO%WQYQP>4#W$&TYW$vAbWx#V0X{q{d%Tj&SlI%Jq7Fo6X-C8pvNW+++(_^@(=aB#G
zM{)`7_r2Iu&S}X`U!!urJs4nJ3J^VqR%oR$lR2MaFuNyyMG97?{sa$cRZY?HQSG3A
zzvLMR%R;<yb)xE5Lkc%&3afL$fcZMLw)(pquv6u%eAlOm=sG4nx1w=Ik+}63D)zRQ
z<&knCrt@q$r%N^?B}_7IMH8GNyv~f?lBprHwIgz4g0pSA1l}es)f1)0wh=b&qjp2$
zQpfE(lbanSm&TapGe37$UKV6+(J|gnzOM6PCR+kC)!pg~Yt!aC;|T8KqUtp#A@|{t
zE9zl~oOchOM*5HDF(+}m5DIq{X+*fQF4t_1wkskPxN2@qBVDL5lP=Y|S3BPrKD|)P
z<wK||{&oLb=R4s@G~_OOFZ`jxYy9hO5tbR$@kXwp$=+)^POBSl6jOFZT&CWa8qX^C
zet!ZL!8U+(fz(Em)Hgh46ex|=s&U2lHz=lfRq0`9=G|G|pozdmLyn;l=;EYeGRS<M
z!OrP<y0?&^Wx`*4jU|7G@lRI_2)qG)K#{eC@!<J7Kk!`~i>UCLsHqE-{`E#qWxJn?
zzKj5C)hlQ0+M!R9(OEe*lBOt0Y`?k9{Dh)i<pL@OGXu)*^dBd#y>|h{Ew8k?*k^n5
zO}w$JQ*N;&D;4V(*H!uF2vFJ+beBH^T8J>J06=y8zHFtMt+5)=N60=&Puevl;jO6v
ziZM{BxkBoSZW3pe$Y!(ALVPAEEK@)^_ONhC;iDTt*8LXgzIO`7#8^I9`}ip4G@f}a
z2<1Nh!lc69!)o$=v4piwm&j~yelZH&J-g~)_LAbV)kX>Ze(X#(;)mD%$(r9N5z4F&
z*rFLt7>d6+n+nL~Md#pK!{A%cfhvzXaU~`v9dwN)FxP0VN7trQWhY0cvMt(D%6cK6
zsev+5Gc$8SK%LB*Y7U_OnBOK7%#Zso%6zldCeXd#iE<`p*6=Io_SC_cI#Ff-atW{J
ze<k}<IQz*>f<JYLh!>r5J6(=B^Zl(vzI7%sA&2fbeP{WHPJyJB!(0YSm5R_zuhz#W
zdjlUuaEyK{9zR!_HxKh7wbGtdwRwMC(%O~_D95{cN=QhlQ&V}l{KYvjC>M~nf?oc2
zbp0FBQ{@28u>|w1Qv(&oNud!q^=7K$5C-&?COHYLeOLA^8WL5aEH7ZLe*oJWUi|7K
zLQ#)8?}upTO<@(B4|gr%M#>f^mG&H_eHJZysw<sKZz4wZp_)sRs?a%L?*5mrjiGBq
zrC~qe{PUk=eIUf_10k=8V;}tbCO<3Djp1pm+NTXh7fmiXZ8pcxK(_@57%Cp+V?^M(
zc-=<)Dq&&ZMoG~=!{{*Vth$Y;4(_i@UR!jr&+)F6<#kQ;`tsgesyG_|C%exn2?z=J
zMbg<L0VfDdTdj51uN5X=Jwu(EGQkdD1&1_+4U;{aRuY1!UND82&@EO@)_v~Zg>=Ym
z;+~(+6P;L=O7z>9yyek-Ezee#3iCg_=np9K?BS~OKsl;tiw5lia70`<Z$IUezqQfJ
z=g~OE|7P4Y1&*7#5I;3CzuEys$!We{7@wRx=V<*a!mj26fy-6DScTJ66fjaIL_V*_
zoaZeJTm@*j=T$x5@8iK{WtShg7m@u0kmDGlwEqd5gTZMmPgqo^em3p(V%7$jH*mr^
zm7UfSixr))oa&pMJ~^~RiU&4%roU%TbdjPQNSE9C+PWJyV>X+xbl9oJ$XYSZERj^N
z|NDR+tAO|1s$2RK7E@LB{1Pv#RBH`n?o<a4WS(^i0(`iG{-2{#pzKIXL<a~b4)za5
z%3sokhhQ;Vr<JZ&GTOV>uXKzvCXw5`tl%AN&u6t}k0~#Xcx}A+N*G=*iO5=y!8pD|
zsO@-BC!Leu-8vPQPo)UP!AhWJV!xX4LQ)LfRXsrC9A6|FL$9vv7fW5+af!_JZs;>B
zSe=+3o$Pe}HC40(zi@6${*>G^Q2ZsT0+M<6$M}yFI%Rml`>T}6$qgb#rE&JLu4O~*
zgZyKR<}yX3WTa#j9H&airE9`*5qZYTBHIRs%D(OgGA~xCtGQBMV-;KU`IJA<eyA|n
zrN8yg@FS^X2F#W{*IZR||J)uoUY!E$cnK>}x%<|xi*m}yvJmfJ9ZUk@=G5DeGPefr
zIg+ee;PgBX41c(3Tu>wWS-kZ7RF=w7fz(V(H_zDzZJ;!?&rA=8*5i|vYD^{yc1o?C
z;S{;|mt8EY?C};IRJ|8{JeU`K?g>HrWzNVa%s(T4x>g-g=-gu-8s#EZ9Z_m4&cQl-
z1;<ah5XMnYs!&75tj-rdE$sAL|A~<pUDRC%gsC|Iue)<x59VkZgZO)}AGO+kUE}^p
zt^Q9lMf)04`>z>*kQh!ZTvkA{X#Fr>387yl?rAh8QT$qII$v#2YC59HtDG@Npw#2M
zwbsd4=Xp_1UV&^KN0_xGo-rFG9hSGsBMRvkYPM6RYxU;SoO=(eUviiy#0hnR?6n|J
za=AR1$=Y0cq|&oLZ2veO#_H<07;FvA^)iPUlxhIHfA?WAI^Unda29I+RVE2wp4xIU
z`N8x?9E-*h-0F?7=rUFrc;O_|p+xUQtu?RZWMLJqz5v0SjdaMs55XO9*W$vdzQnBE
z`Z_#^S9<Y!BzUR}&N;453;za-v5|AKTC7Wcbnts{D8w0UVvAA8TVmp3VqKbT*cx6l
z#$AObkf5k=57%Q7Hk7p%rfWPu?B7ywp8cWpEC8rvT#@=p=bD=wo50u*nQYRh1&WAk
zW1uqc9bin)BfL`j0D%3#5b#D>*{udn%$h9*>qW90+P-uJb;|*G3C1+2Aid^6XFPB6
zLSvT!;`KW5yaFH^I2d=r7RDI}8^!}-`UI&UQ|9iTK~;XxFW_s?uTQ|9m=-@P`i{&~
zYscetX<W2#<6Q*WbVH)XnIUdhC{=&1a0=yYT>6vtGZ%8+pKu>TK2qv=U+B_4c@KE@
zJ3VvzTt^|3hMSadS9+_06ckHS%T4qUrRx=JX*rz-wj(8OISJAqH3=@h@6LX3Oiu7*
z(0wV%h0yC#>TTyfr`oJi%=D*N63djwo&dmabV={(&RIj%?3FZB)taaneGS+dh*!Og
zv%)%|YF-JS5$h>35&QFIa)$H^*8d8kitq-4a?`6%c)3da2vi5bv&5J4bMIb!vqPo9
zcjF_<pz|}OF>@r{Hl9~|C!*pcuu3NOs%k|1MOJo0hX^OPb5E7Ug>v4)cfy#$w=Xar
zKFcrx4#bAFgOhJYPOjHG5$l)f1zK&K9Jv6Vx`1-MKTOSH?8beqfRMeffVe@tP_@-R
zgLqul#`M2=OAmhV@=>l{eCKlMU9$0X170DYg*5rB)WGVX@G6V8=qM-At8v{%T=a$~
zO_|)V7hyShGOyS*fb7~1C~S*43Yl9MEsnl5mHeK?nB=2mxSaxkH91{U^9)_%<u~kE
z56$SEHp;LHU+oCv?Jx?FqaunQ+3M2MfSSGjy0kUiz>7&&!OQnfgVJM;F4^mqN~I6I
z761P@RU!@|F(%e`R}Y?E(dKgvWx38k{}T(q0Cr<Q+Jgzjw0TBNAF%D*7&dU>Ah&X!
z)69!dPs@pfv68eXaa$teY}c0ax9b7yRY%xANX}ZzOmlG<9~gk=XHk8rHKNQ+zym*y
zt`P$oG#Ye#b4uOnC)|^&Zaed!^$53&CMZ`;QsO9I39avCVcZ`%ps?r(tM4i0sC)UF
z!%G1HrkJ~a)#L-mnb}~a@6#2^yTlk&7W4q_1U9(xFy$ZT^Jf|i!9nl+7EQ;O&GsFG
z&!H+`^QyR}Ycl%r7*Of?_!*`+TFbr7u$-@p{S8p-3DUQG3!3poXrKJ_fFP=zA&)@4
zqfUTpt)^2yStyiOa9+=)sDc}|S<idOMDMjxwimG>OTLblP>R!o_2WE<LaZTab!k|<
z*jGDC%Ta`K{(#3+u`#rN^ws}C@Hv(XSwQbKhNka*l}o;KPx!bhKVFR_2duS|OmP|b
zyDVgHn=#af;iPj&C08~1(yF0P&AychVZ6+|f-jyFy=aa3mICpNs|&;`kEv7{k;!2M
zf_iSWxU;k;DgYgbBE*b6<Fb9*`cwY^-~SuLwOf4`J#9}u<{iNY6`P{xvCkrPr~qP`
zMJZ6jlOZf=E$r3-B~|1VEasU(Sh`2R?G#RkiM@7Lt#R7Q$$e(e-Mo2|PumGn7vsK>
z9og|R&rkcr8$Z>xrt}TG;&oWYb-(ioGi9B<1N+a_m_%$~Tu2i!4uWJU_5NPO8e0WN
zGWt)xo$DUhfaGD_AACcpWD$7ZU&U#;iun~-Dfwh2`pY0|PtuTmTwa5spym7UAiA!n
zo6cLNi$|uY${x>BU@y<=5Jjous`M5A19}{H^Yyqa=lC|248NBk1X9}XU``Oo{e!e;
zuUWMWQt`~rTW%hkOMH%B505S}I%4T>>5iGGaY`PEJL2j9-CA}Ws&JDsYn4{+?6MW9
zbE}rld2SEn1W&=VuhNe$S~U1iBBMl4J~x=Q%~(cPxutOE)IO-E;MYC*K7=$Gh)2Zu
z_oPz`yWJPawx3NfceoH%!_tr7YB4IXlUe)yrlE{eE4ZDLw`??C?nV(0e&Uo~S{MKJ
zGeQ0RJx8WSm)~ZA2!{j!)A2KlNI$Ar6}7nrM;fT-fQt=MSrNX6fpR4N$#lz_g-|UT
ze|72FqlBZ)RgVOI$B6I~lY*o5(8}2nY@=w->+l%MkwY5A7T<%iqxtpj_7E+J`0vI{
ztpKJqGqmm(zh|_6&(Ldyzg54gXrKfDhT54=k@~5p^XvfQzL~Uj_nUSNVDc=s<ZZ6X
z7|$dijd;*T52`$Geq+dDXg~b2+?nWN3p-lJ8-bQFXTBh-cOJ~@=C|egR$WfR>WHbW
z!-&Cl#T&Wvx!81i9ok&VQMJ7pHWPFz#vCbj5OTw{<BHnCUb{kfEyGAnDZ6-;d`ICl
zh||A&At|h<ALeRuETXw?w>jciD(n7X{5Ny*m1uqJuhqNb$Iu7glPM~M=keS^uV88n
z`~8(4*5^k@-<kctM;1bzL0TnN;mD#2&5@`Pt#G|mjy&O9E}L0B^`jkw+ql2EyCza;
z-d@uk5!JaYh^qW<?#?7M&LaF@-8lKoZa?zw3&pae4xf367J0HxgIVCw`uED@c?CvY
zeWORO5f~N?yG>*1Irp&lXnf{Mq9@<h=e147(i_X1m~5_@j?|i(*>DP44$4M|9J6!+
z8+OykFql*lttP#;OJrK5;*A)9i$S9Nj`yH?b`4TXSy>6R3p%{!NdloBxEN{ojC3}f
z31mwc`G!X}Pof8MdRs=?NvMA}4KO?fKUC4KmBHtb-;04TH_w8(HZ{g%{O+Fjo+abm
z^8K&wBnAa=<cWqJ+&X$Xx1?>lFJiSsYT?catiMUW)12bv67^^(g;DTim9lCjlDzFv
z;AJuxXagqC|7!o3Ts-c{6ZA^GP~;qePN~NlPf0Qtl3)oajk@KJJM3xjZ1<^WBJTLs
z?qXsF@hsK#GCqlSc3*$lZAim<$Yq-xGXsUltb*nZ#0J8h52ctD*3rbaU&`quRRU<F
zFQeOQM9hvFsIETQVX!2TUrwdeu*xI06`8W<w>NSdI@Hcep3J~%nU}~2xD!sCapV+Y
zCd^&}DuHm8`8?L&e_b|Alk;9fqJV9F<x>T_hjQC5g0{#lS>M2)Jb_J=$Xj*+IeG{S
z7%;jhISHjF8YaQojcWF8wphk1$Matr#QJo}U;bC)M~D{M+`o4LqCmlRIwCRUJdQd`
zk}dQK$HTHPwXqzq^~3Lsf~lYhqzg2gGqFwFV6?p?hlbJIz^__FYNUc*FRnvpDK^7Y
zS=jt-vg3EwzWGL9#te;T+f>6c$_+E5LW{}Y>bSh!=G#CS%pRtlM~4&ZrJUBmW=c~#
zI`Oc%Z3+&t!<}2-wng3*C;QH-3LQNSRJvYQU{Io*t@0{M2ejijIb@6IGCUZ&f=Fsy
z#g$NuE=;OSI6Mj7j^(O*KK4qU3kYN~(B<UhqLY&u;!Hi)J3BjL?WJGDRao<6>6B&n
z)u@2hbtYQ1iEp^56_Bt^HG_jS)z9O-hwJF&K*0U<Y6x5ge^MQ5H}O3`Zu|QWzuiAk
z?ihN(Kb!6#v;YDTc#D|zx-F-Ub=l0`ODG)^L0rTjNY}T#q}&j3b-XxR1tRXZ!2MWe
ze;rnbwH>pYGUlbOS4P+0F4J}cXc7?G_<T$+77dZ1q7A;`9<^ulHC#$9D&D@$OLz+y
zE><!G$)q?v-CjYcmofHn=TI>su~IO^=s7Ovir@>aW5~%V4HhiO^=8QUfJi<m^2|!V
z=%0Pc8_Dm9;zulcb52Q^LA_(cp-;?_<GwAA%|g)Tih8%)n?cUmN$gW<;u}=1O;PTc
zoj0w5hdoqNm4c`+D1FjlSj8C4ku9G-yuv&eC?JCVh#o4;KS8oI*<)a|pW0i97!&(&
zTG=>Rz46ZxAjm6{hj)KF1%ME>G|>`yMsIbJesrA#ol*;@g~d-vyp{6hnYImHjxGs9
znYI}(W(Tn^XS)jLOjR$n<p>sllz0;FQPtZ93rv<7jJbOr$Wn;O39HrV0Yx`=L3Ti?
zOZ`@*)eS4n0#~|5j5oa&2Wz(b6KZx=^E(wsqpIYb+{}_{y?b|V__kfKyKknH%6xEu
zneEf}_I<QwLu#w@6&#{mV#w5muqZSohf-(9dda1am%`#XVzU(D<Q_eG?di1eC|Gtc
zbwaVesX2UBKY5+FJNbF8vtw%W2X}{u@~sCkqQ^o`NU#Wj3#$;;AE^XTtJ!-7sWWc9
zWmb5(=u4@r!;7arn5n@J?uYoJX`aUte+KhsVEm708j=fi!pdaj)m+}*o~tXYr^}IA
zx9!OHnS5uNp%#qimulql*g2ChFOL-{MGn5C_H<npE`K>Q!%$pnjZ}srN?e1hmKhlt
zb#&p@c_X=&u&!0fR9ghuHRgAlQyJLuW4^kWT5^bs-g4c?UQY+^19Hzs+LLC&EQC-?
z1<wGux+=Br^rNbsE(v*9J+h4)=F93|waV4n-p=mobV%qMFGM?HB5zB*`*!#F)d|%F
zuaD+R4)X7Ce)ZJ>X~4Zv66sNqI4LGCZ5JJ{epFl<B84{h7hHaBsDAc>?=q?OdSunT
zXy3X<YSCMia8KcV|HPPFC*@H=j#Q0r`U~K6SFJYf7-LU*;XbCwZrI|B{^oghUk)Ru
z=mBfhZaqUkyQv3rwPMY8B3>l&jW6FOxGuQ;sYh`#RlhEX$$Sz?BTk!H<f}d9@>%i{
zAd^C9dZ$G_EGB}Omvda-&-VDd87#~^JvpAqgsMczoF0d`EKh2Xbr`WYn|I^cTF8Gj
zwya`F5PBue?HNk?ir6+iZj06lIo%JVmv9%}d;#<}d;AQDaGBG*KW-+Y*9l&rvbVSW
z_5a*ljoW|Nl=Blmckia8EMlc);ekCI;uwTfUT^Oy<Xom9E)4-v<KUP;y!Y?Bb!luB
zD-Fk*tVgRolU62U)t9y_&28g>nq!>+K@t{vLVr@Gx9eEtD$#fATNzp!bkHg`-pr!=
zQ0bedoEECv_8H6;g9;M<TW_{b3=9(hc=bVHK$gEtAe69pcB*DBB@?YHad&0pTg>wY
zD6saw5d!hAy=A+!J&m1+N2Aa#)mp1J)?|ALLqH~_z7UVoFCVQBqUOk@I(G&@swQ6O
z2Hp+QM2fS5dvR#`YMk387urUlS{X;9Kj0*srm_paLAsyJfT%+5;Rg^J+|1&^yCLqP
zDmzwec!Lu_H6GAm3N8ud>N#-V+_H`<=5#f%jtj!#GB39=8x^!qc(mpP6inKmxhC;l
z=Px9rWCr9OsJwFZx~+VMnY8SJ-#R<VM|;+ryQlh`wq9oH2HO1dRU650af=+<y4)R8
z$eOAwh>D#_=9f>Y{q)z~&311thIA(b5#2Oq82Z&UiDy0HqeJ0WJTlk&tqLy<$WHlY
zt3BR*!;yqbAc>2S`4mJ?#9-i43KNg~j=4<w6E`QqL+`lx8WY|7?t~=S`c+pgifW53
z(Q>xOc_!T<ow@&j%tFM_%>Gu5d!#H19coPx513NH(lz*&y+Hf-a*-X7_u{Io@e=s0
z3B9e+QyfMXXD|b8gX1B~?IQ`C4Ss@?-h=hV*Da%an_`kGY?y3C-~yg?NBdtuUSY4c
zNf%LVgWbDgZ{r!5nY~Rr3$)AC%oJZ0>hP{rX%X^!)^WV5&?Xa-yQjbaq!7etB*`n`
znR`(TkTes=dUS3INO=ETz{NfHO*(oBq`cqhj(cl+Cv-x{dj@I$>GO(?b7vVEa*xDu
zRG3`dEii?De`IDy$DvPCchEbTkw7|Bcs7k66FUQAK4W(l?WbP>CP#>HCa*u63EYkT
zN|d#B=i~Jj*M!#dh!8{|&i@k&_`__X8ZQ4BQR)K#T`r{@LU9q7h4-e0t_C=Mn&CUv
zf~~<Ie>(3{ck5n-5uh@Uit!4R#%ikrBg7lqt>>mPE)OKhwUZS@^}@nqKOCW}yMgos
zZDZYG$2}q=LaZaq*fe52zBX$IRR^1$!H9&~R3Fzqp};I_SWzjW(N`(Oupa4BFtZwZ
zBe$?y4u_!@?8>2fG5Hv-t;}<$9lknlLsA3GmF=V`a}&MeaN2RzlCN>IHJ$HD+3ZHr
zyi|B*z!WdMC~<mH43D9Y6xZLSdDpPGzT1m!#$kSgq~L4qM^Cw_l)1W5I%;*t5P3%~
zA1X*ctl9G6;F_r0)08*rU-kch6m#3ry9|465>r;o)?TJ?K7QD}U_$ry>EN?CI=&oW
zQQ@>sK-KR!`v;oz2PfN5+X*S6mUN;0!I!UyP3WiuM#PmX892x(%ki}9*E~)UJ&q&?
z(u`X3C$A9udt;j&$Dp=Pu1THFb=yk_gG2n43>}cAX9J|JZnNCT{4?I=1~ym&x0<xS
zsPxI6zkQoRWIfYZ<=XaWvd8ZCzET5);(`PknPa-KQa1}ttQ(^$qpnugo6O0s1q1e~
z-81fX-ElPaN6j-p-2{9UXSnMcys+eRx+8g9+_9ZOn&HI^eh(e!*1f*|{@F$IQ%-Vy
zKE=^;OU^2(Q<m2%2;bRFcF@b3lU;H-<x9zHMZSug*q?ab-{?X%c?NsNZ;5jz;@<Y8
zk{FCmaHe3s+Be8i5Kd*O$%IDvt03;G1m5dgOO)JAv@?zI_8gU_cw%*)eOM_4kpDMk
zveW=jy=i5>I_Hjyxfp@4Za(|9!qJMDvf|rHYHHBt^-9yuHrMn!9m|6@eB7Z$lEr=#
zv*BSXu3<O#)IrziE)q_3zv&0h9`KU4mm|y)FIWi@ss<LSP`IVvaM-_4Txg~V(xX@R
zPbty?nmCmr#8z3LLkh>w2xgv^Mf4ZQ@iKLg+S*?NaK$t=bjtApNcUmzgxkqc7*sJT
z$a$!ii69k+fty*t8n(TS<<uM-{~5R!m;vT{@Y3h#0J+%&jcf}dCm?}^3@M+kU>}aA
z8&|dZ27BgMk}lA5A7)wScMNRXh`Zv1f7K3|jan8{{fJtFHXL>#@+@^Fen9(HhOb7d
z>@KHuD=C{tp3Ui{`Z&Aa@!)@|lLN(Ih*R;~Qb&bZznfG<A%c)e<X&9+iO0+Bk%k;T
zyHOUC!@{wOn0^p7-Mpb|c4lVQQ&DF;Io8(nJ3SwZL=>u5$8-wbo=)o)`z7LwTKQMa
zb+wzGeni$xbkyBy0N0;9EVsbV)V$$5dS6YVuHLM!9FZp8mt`)aKIn$<*-vS81_p%M
z@U$O?X;_4v+~h-R^&7*uWj(@>vx3EC4Spu4oC5z6GqV*sdjy-Sn>o7k#m!E_*?q}H
zlpt-e6wYrtKOr34R-CycbIUqJxPaH%Kz(5TFfI2*)<F;HYqoMU#vf@b(G?;hSsO@*
z_uU+xx0hXcvN-(hZPB|GC<0`Dvk3SJ+<|lJA9v0}EYRyMF6YY7l408UJ$yHQJV3<+
zIDG5Rq}VqG5d+Ix>~=K_Gddn$r;IOejuO_aB}cVfqzmt__GK5^dd@p@dCve;De4fY
z@7j{JnG<Xm{pQrCYWsRQY&h$*Qj6DbPkdtLXt_I9ga(;`%6XldZOPj^QNJX1gbk!{
z@1uL!K9=LvTWo9-?CF2&<Uew;s9X&aB-|R+_uu<s$M23po&rE$4z4bevwrT}dy;C~
zp#HT|Nwr*K;qripDS>X0MPHgZujXq`;b)$~wn-&B6Vv3}&UsC`R%LIlo;aD?e$~(=
zEH8Wdko3zR^U%5AhxQhsSwT||Vgyf@S*1Mdq^xtgW&h$ADxM}XM^_{VWbtPxU5B&3
zyP4dA%McZt5DR{jSC_?SGp;(i(yzM|l+wgudL*x`#QnZ&Rk$KnTIqVI>35h#yR1x^
z8ivP%Aap5z26f8J5Ud9?s~v)nRwmUE`!ItTK5ZTKv`G+C$cQHy3pV<zj5(!^^8Oaf
zVq*)Z7FVQ2N<FGZ#m&x<nAF<R%SiN2&FO=<UX$<K<Tsa4MsgW~-+nI(bG+_#jn+Vo
z9=Z5CalGP;a4_Aaw@kmt|M?=nrfC2VXi5Ss9<)(*9AV2aSP1<Pmd)`}N<BUV>+aBl
zL*JQ9qM8k%Akj>et85AhFx813Wl?G(Yn_0PRf$mSZ3ETeIOt^z4rDVI{-x(!+hOlo
zE$QF47P_xN>Xjw>hbS^E6x*x9<hpLd4YuvLol6QVUQ=^FnN#|>`6RI}pEv=0eN1Z_
zlE-4c@qF>)@2zjNB^c>zxGA=dQwdO3(^gYUb$NH{Gb`GZdV%+!HI-kZN#H7s^rzIZ
z*7%eyZ^7MnCTd4)yT;kVm_V^W)H|fz=Uz>MlNzSif?72c!iq*B`4z~)%FXh+25ed<
zW9Wlw@a`Qc_hK-QDNm9SXu>b;tO@2wSWlIb53iK-LVCNL*Na@G<i>P^lqDLV$pXT0
zgIAfk*9Y9gh9A#OcgQsXy$5F<2@f&e{cwlBld?Y?<4<t{s6ZWs_7x!OXHO@S@%18H
z;o=<Sf3riee8YvSLi`F7it#aQ4?|6Lru7-B3`+;BN5D;RQ<*u!d9$PkH!@e^r)zDW
z0MNWygL=fPBg2}h`sqDy<3%~w#O;(WyiVZH2s5`k%`qi1aMia7_k%^|m$X}&KfGc<
zi4Axa@76^?#YE7}A}wM)$!)$+QE2|G{-ZwsD=hjUKJutlm88iYUJpj~F9V6i!eV=(
zytNipH{Zs=#_Pa)^Qu(ec!3KRXjL`P;ii~R*f`AZ!JNMzFx1&rs}nh2a@jpJczhM>
zN!kQ7wb|Yq(r!3uNgw1FnoL*j4m20^H=6qf*RwkumSN0Ibx64=ca<mG_f{o_e%Z|8
zNWw9I3M!G*60;oKxa7Q9p^k5t;c1Ye-ubJQCIE~9saDGZ;^gbq%dT5qL*{mMSIb)l
z%<X*3y&Vu1wz<Cw`ag~#4UXv{@k@ySey<p$ag-={(*%)mgVJ(9*22E~M0u^5kZy`q
zp2w5HxSuL6KxNXFF!(4xIB~_PaKKEJA$H^Z4$n{E8e^tIpKN;544{`J178OQzT)4Y
zv${m+F<5Jx)M&+<tv=|!P~&p{&`#`FXMS2ywyCd5F4<q_v5k*oJ%0AjIw-(8Z}cv>
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%0A(l#TsyXq!gG3cw;Ico~!5lr~IuaA{
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
Da!Z1q

literal 0
HcmV?d00001

diff --git a/docs/public/assets/blog/theme-studio/curve-drag.png b/docs/public/assets/blog/theme-studio/curve-drag.png
new file mode 100644
index 0000000000000000000000000000000000000000..cfbcc63028d51e036cbf7a1da58549bd5f785402
GIT binary patch
literal 42255
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
Tikf&}ZvgVrN>Wu4CL#X@{Tpu0

literal 0
HcmV?d00001

diff --git a/docs/public/assets/blog/theme-studio/curve-field.png b/docs/public/assets/blog/theme-studio/curve-field.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f641000f977c20ac6592ae3cb0576009e8c9670
GIT binary patch
literal 55037
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

literal 0
HcmV?d00001

diff --git a/docs/public/assets/blog/theme-studio/modifiers.png b/docs/public/assets/blog/theme-studio/modifiers.png
new file mode 100644
index 0000000000000000000000000000000000000000..f95b43fbf99e85a7f968da26660c619fd530bcac
GIT binary patch
literal 60976
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
C3$Sni

literal 0
HcmV?d00001

diff --git a/docs/public/assets/blog/theme-studio/pin-brand-colour.png b/docs/public/assets/blog/theme-studio/pin-brand-colour.png
new file mode 100644
index 0000000000000000000000000000000000000000..2528316d5bb66d605ade6341722cb04ffc589795
GIT binary patch
literal 75833
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%0DU_sK|
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
Z?Vk3Q=iJ!uN5Cs+N^)wl#nNWb{{s=O&&B`%

literal 0
HcmV?d00001


From aeb5b56900a94c1e891d81280686e2c484db18cd Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 1 Aug 2026 20:13:02 +0200
Subject: [PATCH 175/185] refactor(theme-studio): split the presets listbox out
 of the menu

ThemeStudioPresetMenu did two jobs: the trigger button that names the
active preset (plus the shuffle die), and the listbox of theme chips
inside its popover. The listbox moves to ThemeStudioPresetList, so it
can be placed on its own - the header picker wants the presets without
the toolbar trigger wrapped round them.

Fixes a hydration mismatch carried over in the process: the label was
already resolved after mount, but the listbox's selected row read the
client-only persisted preset straight off, so the server rendered no
selection and the client rendered one. It now waits for mount too.

ThemeStudioPresetMenu's public API is unchanged.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DBnE22R8HET4djqk1v5F41
---
 .../theme-studio/ThemeStudioPresetList.vue    | 103 ++++++++++++++++++
 .../theme-studio/ThemeStudioPresetMenu.vue    |  88 +--------------
 2 files changed, 107 insertions(+), 84 deletions(-)
 create mode 100644 docs/app/components/theme-studio/ThemeStudioPresetList.vue

diff --git a/docs/app/components/theme-studio/ThemeStudioPresetList.vue b/docs/app/components/theme-studio/ThemeStudioPresetList.vue
new file mode 100644
index 0000000000..2c57cc125c
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioPresetList.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { resolveAlias, resolveShade } from '../../utils/theme-engine'
+import type { ThemeDoc, Shade } from '../../utils/theme-engine'
+import { themeIcons } from '../../utils/theme'
+
+/**
+ * The presets listbox on its own — theme chips, fonts and icon tastes — so it
+ * can be dropped anywhere the picker is wanted without the toolbar trigger
+ * around it. Selection applies the preset directly.
+ */
+const emit = defineEmits<{ select: [id: string] }>()
+
+const { presets, activePreset, applyPreset } = useThemeStudio()
+
+// The persisted preset (and any persisted edits) are client-only — resolve
+// the selection after mount so hydration matches the server's fallback.
+const mounted = ref(false)
+
+/**
+ * Mini theme chip: the doc's neutral ramp as the page, its icon in its
+ * primary, per colour mode.
+ */
+function themeChip(doc: ThemeDoc) {
+  const shade = (alias: 'primary' | 'neutral', step: Shade) => resolveShade(doc, resolveAlias(doc, alias), step)
+  return {
+    '--chip-bg-light': `linear-gradient(135deg, ${shade('neutral', 50)}, ${shade('neutral', 200)})`,
+    '--chip-bg-dark': `linear-gradient(135deg, ${shade('neutral', 900)}, ${shade('neutral', 800)})`,
+    '--chip-icon-light': doc.blackAsPrimary ? 'black' : shade('primary', 500),
+    '--chip-icon-dark': doc.blackAsPrimary ? 'white' : shade('primary', 400)
+  }
+}
+
+/** A taste of the doc's icon set (its own, or the default lucide). */
+function iconSamples(doc: ThemeDoc): string[] {
+  const sets = themeIcons as Record<string, Record<string, string>>
+  const set = sets[doc.icons ?? 'lucide'] ?? sets.lucide!
+  // upload, search and folder vary the most between the sets
+  return ['upload', 'search', 'folder'].map(key => set[key]!)
+}
+
+const presetItems = computed(() => presets.map(preset => ({
+  id: preset.id,
+  label: preset.name,
+  chipIcon: preset.icon,
+  themeChip: themeChip(preset.doc),
+  font: preset.doc.font?.sans ?? 'Public Sans',
+  iconSamples: iconSamples(preset.doc)
+})))
+
+// the rows render their own font names — load the faces once
+const { fonts } = useTheme()
+onMounted(() => {
+  mounted.value = true
+  loadFontPreviews(fonts)
+})
+
+const selected = computed({
+  get: () => mounted.value ? activePreset.value : undefined,
+  set: (id: string | undefined) => {
+    const preset = presets.find(entry => entry.id === id)
+    if (preset) {
+      applyPreset(preset)
+      emit('select', preset.id)
+    }
+  }
+})
+</script>
+
+<template>
+  <UListbox
+    v-model="selected"
+    :items="presetItems"
+    value-key="id"
+    class="w-80"
+    :ui="{
+      root: 'ring-0 rounded-md',
+      content: 'max-h-96',
+      item: 'gap-3'
+    }"
+  >
+    <template #item-leading="{ item }">
+      <span
+        class="flex items-center justify-center size-10 rounded-md ring ring-default shrink-0 bg-[image:var(--chip-bg-light)] dark:bg-[image:var(--chip-bg-dark)]"
+        :style="item.themeChip"
+      >
+        <UIcon :name="item.chipIcon" class="size-4 text-(--chip-icon-light) dark:text-(--chip-icon-dark)" />
+      </span>
+    </template>
+
+    <!-- the doc's font in its own face and a taste of its icon set -->
+    <template #item-description="{ item }">
+      <span class="flex items-center gap-2 pt-0.5">
+        <span class="shrink-0 text-xs text-muted truncate" :style="{ fontFamily: `'${item.font}', sans-serif` }">{{ item.font }}</span>
+
+        <span class="text-dimmed select-none">·</span>
+
+        <span class="flex items-center gap-1 shrink-0">
+          <UIcon v-for="name in item.iconSamples" :key="name" :name="name" class="size-3 text-dimmed" />
+        </span>
+      </span>
+    </template>
+  </UListbox>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
index c315a3f1eb..a788b8a9e3 100644
--- a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import { resolveAlias, resolveShade } from '../../utils/theme-engine'
-import type { ThemeDoc, Shade } from '../../utils/theme-engine'
-import { themeIcons } from '../../utils/theme'
-
-/** The presets listbox (theme chips, fonts and ramps) plus the shuffle die. */
+/** The presets trigger (label + popover listbox) plus the shuffle die. */
 const props = defineProps<{
   /** Button size — the toolbar uses the default, the header picker slims down. */
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
@@ -11,7 +7,7 @@ const props = defineProps<{
   keepPanels?: boolean
 }>()
 
-const { presets, activePreset, applyPreset, shuffle } = useThemeStudio()
+const { presets, activePreset, shuffle } = useThemeStudio()
 const { icon: iconSet } = useTheme()
 const appConfig = useAppConfig()
 const studioIcons = useStudioIcons()
@@ -23,51 +19,7 @@ const { hasCSSChanges, hasConfigChanges } = useTheme()
 // The persisted preset (and any persisted edits) are client-only — resolve
 // the label after mount so hydration matches the server's fallback.
 const mounted = ref(false)
-
-// Mini theme chip: the doc's neutral ramp as the page, its icon in its
-// primary, per colour mode.
-function themeChip(doc: ThemeDoc) {
-  const shade = (alias: 'primary' | 'neutral', step: Shade) => resolveShade(doc, resolveAlias(doc, alias), step)
-  return {
-    '--chip-bg-light': `linear-gradient(135deg, ${shade('neutral', 50)}, ${shade('neutral', 200)})`,
-    '--chip-bg-dark': `linear-gradient(135deg, ${shade('neutral', 900)}, ${shade('neutral', 800)})`,
-    '--chip-icon-light': doc.blackAsPrimary ? 'black' : shade('primary', 500),
-    '--chip-icon-dark': doc.blackAsPrimary ? 'white' : shade('primary', 400)
-  }
-}
-
-/** A taste of the doc's icon set (its own, or the default lucide). */
-function iconSamples(doc: ThemeDoc): string[] {
-  const sets = themeIcons as Record<string, Record<string, string>>
-  const set = sets[doc.icons ?? 'lucide'] ?? sets.lucide!
-  // upload, search and folder vary the most between the sets
-  return ['upload', 'search', 'folder'].map(key => set[key]!)
-}
-
-const presetItems = computed(() => presets.map(preset => ({
-  id: preset.id,
-  label: preset.name,
-  chipIcon: preset.icon,
-  themeChip: themeChip(preset.doc),
-  font: preset.doc.font?.sans ?? 'Public Sans',
-  iconSamples: iconSamples(preset.doc)
-})))
-
-// the rows render their own font names — load the faces once
-const { fonts } = useTheme()
-onMounted(() => {
-  mounted.value = true
-  loadFontPreviews(fonts)
-})
-
-const selected = computed({
-  get: () => activePreset.value,
-  set: (id: string | undefined) => {
-    const preset = presets.find(entry => entry.id === id)
-    if (preset) applyPreset(preset)
-    open.value = false
-  }
-})
+onMounted(() => (mounted.value = true))
 
 // the boolean prop shadows the util in template scope — alias the handler
 const onKeepPanels = keepPanels
@@ -154,39 +106,7 @@ const presetLabel = computed(() => {
       />
 
       <template #content>
-        <UListbox
-          v-model="selected"
-          :items="presetItems"
-          value-key="id"
-          class="w-80"
-          :ui="{
-            root: 'ring-0 rounded-md',
-            content: 'max-h-96',
-            item: 'gap-3'
-          }"
-        >
-          <template #item-leading="{ item }">
-            <span
-              class="flex items-center justify-center size-10 rounded-md ring ring-default shrink-0 bg-[image:var(--chip-bg-light)] dark:bg-[image:var(--chip-bg-dark)]"
-              :style="item.themeChip"
-            >
-              <UIcon :name="item.chipIcon" class="size-4 text-(--chip-icon-light) dark:text-(--chip-icon-dark)" />
-            </span>
-          </template>
-
-          <!-- the doc's font in its own face and a taste of its icon set -->
-          <template #item-description="{ item }">
-            <span class="flex items-center gap-2 pt-0.5">
-              <span class="shrink-0 text-xs text-muted truncate" :style="{ fontFamily: `'${item.font}', sans-serif` }">{{ item.font }}</span>
-
-              <span class="text-dimmed select-none">·</span>
-
-              <span class="flex items-center gap-1 shrink-0">
-                <UIcon v-for="name in item.iconSamples" :key="name" :name="name" class="size-3 text-dimmed" />
-              </span>
-            </span>
-          </template>
-        </UListbox>
+        <ThemeStudioPresetList @select="open = false" />
       </template>
     </UPopover>
 

From 0a3476d656bf5c78a1fa279951bcfcbf614e5e67 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sat, 1 Aug 2026 21:18:35 +0200
Subject: [PATCH 176/185] fix(theme-studio): header and picker feedback pass
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Five things from Benjamin's review of the studio PR:

The header GitHub link is a brand mark, so it goes back to
i-simple-icons-github instead of skinning with the active icon pack —
it was the one glyph in the header that stopped matching the rest of
the docs. The `github` key leaves the studioIcons table entirely; the
preview demos keep their own themed github icon, which SHOULD follow
the pack.

The light/dark toggle comes out of the theme popover and back into the
header as a UColorModeButton, where it was before the studio took it
over. No kbds on its tooltip: ctrl+shift+D is registered on /theme
only, not site-wide.

In the popover, Preset now leads its own row like Primary and Neutral
below it, so the three controls share a left edge, and the studio link
slims to size sm and reads 'Edit theme' rather than 'Open Theme
Studio'.

The stock preset is renamed Nuxt UI -> Default (id unchanged, so
persisted state still resolves) and shows as selected while the theme
is untouched: an unedited theme IS that preset, so both pickers now
resolve through useThemeStudio().selectedPreset rather than pointing at
nothing until you pick something.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DBnE22R8HET4djqk1v5F41
---
 docs/app/components/header/Header.vue         |  6 ++++-
 .../theme-studio/ThemeStudioPicker.vue        | 17 ++++++++------
 .../theme-studio/ThemeStudioPresetList.vue    |  4 ++--
 .../theme-studio/ThemeStudioPresetMenu.vue    |  8 +++----
 docs/app/composables/useThemeStudio.ts        | 14 ++++++++++-
 docs/app/utils/theme-engine/presets.ts        |  5 +++-
 docs/app/utils/theme.ts                       | 23 ++++++++-----------
 7 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index 7a9d3df651..9161efad46 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -56,13 +56,17 @@ const viewListOpen = ref(false)
 
       <ThemeStudioPicker />
 
+      <UTooltip text="Color mode">
+        <UColorModeButton />
+      </UTooltip>
+
       <UTooltip text="Open on GitHub" class="hidden lg:flex">
         <UButton
           color="neutral"
           variant="ghost"
           to="https://github.com/nuxt/ui"
           target="_blank"
-          :icon="studioIcons.github"
+          icon="i-simple-icons-github"
           aria-label="GitHub"
         />
       </UTooltip>
diff --git a/docs/app/components/theme-studio/ThemeStudioPicker.vue b/docs/app/components/theme-studio/ThemeStudioPicker.vue
index bd1fb9abb1..5c4e3a2c84 100644
--- a/docs/app/components/theme-studio/ThemeStudioPicker.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPicker.vue
@@ -36,15 +36,17 @@ const aliases = [
     </UTooltip>
 
     <template #content>
-      <div class="flex items-center justify-between gap-2">
-        <span class="text-xs font-semibold text-muted">Theme</span>
+      <span class="text-xs font-semibold text-muted">Theme</span>
 
-        <UColorModeSwitch />
-      </div>
+      <!-- Preset leads its row like the colors below it, so all three
+           controls share one left edge. -->
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center gap-2">
+          <span class="text-xs text-muted w-14 shrink-0">Preset</span>
 
-      <ThemeStudioPresetMenu size="sm" />
+          <ThemeStudioPresetMenu size="sm" class="flex-1 min-w-0" />
+        </div>
 
-      <div class="flex flex-col gap-2">
         <div v-for="{ alias, label } in aliases" :key="alias" class="flex items-center gap-2">
           <span class="text-xs text-muted w-14 shrink-0">{{ label }}</span>
 
@@ -56,11 +58,12 @@ const aliases = [
         <USeparator />
 
         <UButton
-          label="Open Theme Studio"
+          label="Edit theme"
           :icon="studioIcons.themes"
           trailing-icon="i-lucide-arrow-right"
           color="neutral"
           variant="subtle"
+          size="sm"
           block
           to="/theme"
           @click="open = false"
diff --git a/docs/app/components/theme-studio/ThemeStudioPresetList.vue b/docs/app/components/theme-studio/ThemeStudioPresetList.vue
index 2c57cc125c..55a5bbee9b 100644
--- a/docs/app/components/theme-studio/ThemeStudioPresetList.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPresetList.vue
@@ -10,7 +10,7 @@ import { themeIcons } from '../../utils/theme'
  */
 const emit = defineEmits<{ select: [id: string] }>()
 
-const { presets, activePreset, applyPreset } = useThemeStudio()
+const { presets, selectedPreset, applyPreset } = useThemeStudio()
 
 // The persisted preset (and any persisted edits) are client-only — resolve
 // the selection after mount so hydration matches the server's fallback.
@@ -55,7 +55,7 @@ onMounted(() => {
 })
 
 const selected = computed({
-  get: () => mounted.value ? activePreset.value : undefined,
+  get: () => mounted.value ? selectedPreset.value : undefined,
   set: (id: string | undefined) => {
     const preset = presets.find(entry => entry.id === id)
     if (preset) {
diff --git a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
index a788b8a9e3..f6e61e43b5 100644
--- a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
@@ -7,14 +7,13 @@ const props = defineProps<{
   keepPanels?: boolean
 }>()
 
-const { presets, activePreset, shuffle } = useThemeStudio()
+const { presets, selectedPreset, shuffle } = useThemeStudio()
 const { icon: iconSet } = useTheme()
 const appConfig = useAppConfig()
 const studioIcons = useStudioIcons()
 
 /** Exposed so hosts (the fullscreen toolbar) can pin themselves while open. */
 const open = defineModel<boolean>('open', { default: false })
-const { hasCSSChanges, hasConfigChanges } = useTheme()
 
 // The persisted preset (and any persisted edits) are client-only — resolve
 // the label after mount so hydration matches the server's fallback.
@@ -82,9 +81,8 @@ onUnmounted(clearRollTimers)
 // divergence); 'Custom' only when preset-less but diverged from stock.
 const presetLabel = computed(() => {
   if (!mounted.value) return 'Presets'
-  const active = presets.find(preset => preset.id === activePreset.value)
-  if (active) return active.name
-  return (hasCSSChanges.value || hasConfigChanges.value) ? 'Custom' : 'Presets'
+  const active = presets.find(preset => preset.id === selectedPreset.value)
+  return active ? active.name : 'Custom'
 })
 </script>
 
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 34b29375e0..2ee637a198 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -1,6 +1,6 @@
 import colors from 'tailwindcss/colors'
 import { THEME_STATE_KEYS, THEME_STORAGE_KEYS } from '../utils/theme-keys'
-import { presets, docToSettings, isDefaultTheme, generatePalette, applyPaletteEffects, isDefaultEffects, parseCssColor, styleComponents, styleTokens, sectionFingerprint, mergeSection, canonicalTokenShades, storedStopStep, nearestShade, TOKEN_SHADE_TARGETS, SECTION_GROUPS, DEFAULT_COLORS, SHADES, SHADES_ALL, SHADE_SETS } from '../utils/theme-engine'
+import { presets, DEFAULT_PRESET_ID, docToSettings, isDefaultTheme, generatePalette, applyPaletteEffects, isDefaultEffects, parseCssColor, styleComponents, styleTokens, sectionFingerprint, mergeSection, canonicalTokenShades, storedStopStep, nearestShade, TOKEN_SHADE_TARGETS, SECTION_GROUPS, DEFAULT_COLORS, SHADES, SHADES_ALL, SHADE_SETS } from '../utils/theme-engine'
 import type { SectionKey, ThemeDoc, ThemePreset, PaletteCurveParams, PaletteEffects, StoredPaletteParams, PalettePin, StyleOptions, Shade, ShadeStep, ShadeStop, ColorAlias, TokenRamp } from '../utils/theme-engine'
 import { readLocalStorage } from '../utils/theme'
 
@@ -508,9 +508,21 @@ export function useThemeStudio() {
     setActivePreset(undefined)
   }
 
+  /**
+   * The preset the pickers show as selected. An untouched theme IS the stock
+   * preset, so it reads as Default rather than as nothing selected; once
+   * edits diverge with no preset behind them there's nothing to point at
+   * (the menu calls that 'Custom').
+   */
+  const selectedPreset = computed(() => {
+    if (activePreset.value) return activePreset.value
+    return (theme.hasCSSChanges.value || theme.hasConfigChanges.value) ? undefined : DEFAULT_PRESET_ID
+  })
+
   return {
     presets,
     activePreset,
+    selectedPreset,
     baselineDoc,
     clearActivePreset,
     sectionDirty,
diff --git a/docs/app/utils/theme-engine/presets.ts b/docs/app/utils/theme-engine/presets.ts
index eae3c2534e..59c8c6b112 100644
--- a/docs/app/utils/theme-engine/presets.ts
+++ b/docs/app/utils/theme-engine/presets.ts
@@ -8,6 +8,9 @@ export interface ThemePreset {
   doc: ThemeDoc
 }
 
+/** The stock preset — what an untouched theme already is. */
+export const DEFAULT_PRESET_ID = 'nuxt-ui'
+
 /**
  * Presets are plain ThemeDocs: applying one replaces the current document.
  * Each deliberately exercises a different engine capability, so they double
@@ -15,7 +18,7 @@ export interface ThemePreset {
  */
 export const presets: ThemePreset[] = [{
   id: 'nuxt-ui',
-  name: 'Nuxt UI',
+  name: 'Default',
   description: 'The stock theme — everything inherited.',
   icon: 'i-simple-icons-nuxt',
   doc: {
diff --git a/docs/app/utils/theme.ts b/docs/app/utils/theme.ts
index 7faa8333ac..0ff9e092b5 100644
--- a/docs/app/utils/theme.ts
+++ b/docs/app/utils/theme.ts
@@ -454,25 +454,20 @@ export const studioIcons: Record<ThemeIcons, {
   assistant: string
   /** Theme-picker + preset-menu button. */
   themes: string
-  /**
-   * Header GitHub link. Packs without a native brand glyph fall back to
-   * simple-icons, which every install already ships for the logo set.
-   */
-  github: string
   /** Preset-menu randomize die. Packs without a die use their shuffle glyph. */
   dice: string
 }> = {
-  lucide: { undo: 'i-lucide-undo-2', redo: 'i-lucide-redo-2', reset: 'i-lucide-rotate-ccw', export: 'i-lucide-download', fullscreen: 'i-lucide-maximize', exitFullscreen: 'i-lucide-minimize', assistant: 'i-lucide-bot-message-square', themes: 'i-lucide-swatch-book', github: 'i-lucide-github', dice: 'i-lucide-dices' },
-  bootstrap: { undo: 'i-bi-arrow-90deg-left', redo: 'i-bi-arrow-90deg-right', reset: 'i-bi-arrow-counterclockwise', export: 'i-bi-download', fullscreen: 'i-bi-fullscreen', exitFullscreen: 'i-bi-fullscreen-exit', assistant: 'i-bi-robot', themes: 'i-bi-palette', github: 'i-bi-github', dice: 'i-bi-dice-5' },
-  heroicons: { undo: 'i-heroicons-arrow-uturn-left', redo: 'i-heroicons-arrow-uturn-right', reset: 'i-heroicons-arrow-path', export: 'i-heroicons-arrow-down-tray', fullscreen: 'i-heroicons-arrows-pointing-out', exitFullscreen: 'i-heroicons-arrows-pointing-in', assistant: 'i-heroicons-sparkles', themes: 'i-heroicons-swatch', github: 'i-simple-icons-github', dice: 'i-heroicons-arrows-right-left' },
-  iconoir: { undo: 'i-iconoir-undo', redo: 'i-iconoir-redo', reset: 'i-iconoir-refresh-double', export: 'i-iconoir-download', fullscreen: 'i-iconoir-expand', exitFullscreen: 'i-iconoir-collapse', assistant: 'i-iconoir-magic-wand', themes: 'i-iconoir-palette', github: 'i-iconoir-github', dice: 'i-iconoir-shuffle' },
-  material: { undo: 'i-material-symbols-undo', redo: 'i-material-symbols-redo', reset: 'i-material-symbols-refresh', export: 'i-material-symbols-download', fullscreen: 'i-material-symbols-fullscreen', exitFullscreen: 'i-material-symbols-fullscreen-exit', assistant: 'i-material-symbols-robot', themes: 'i-material-symbols-palette', github: 'i-simple-icons-github', dice: 'i-material-symbols-shuffle' },
-  phosphor: { undo: 'i-ph-arrow-arc-left', redo: 'i-ph-arrow-arc-right', reset: 'i-ph-arrow-counter-clockwise', export: 'i-ph-download', fullscreen: 'i-ph-arrows-out', exitFullscreen: 'i-ph-arrows-in', assistant: 'i-ph-robot', themes: 'i-ph-palette', github: 'i-ph-github-logo', dice: 'i-ph-shuffle' },
-  remix: { undo: 'i-ri-arrow-go-back-line', redo: 'i-ri-arrow-go-forward-line', reset: 'i-ri-restart-line', export: 'i-ri-download-line', fullscreen: 'i-ri-fullscreen-line', exitFullscreen: 'i-ri-fullscreen-exit-line', assistant: 'i-ri-robot-2-line', themes: 'i-ri-palette-line', github: 'i-ri-github-fill', dice: 'i-ri-dice-line' },
-  tabler: { undo: 'i-tabler-arrow-back-up', redo: 'i-tabler-arrow-forward-up', reset: 'i-tabler-refresh', export: 'i-tabler-download', fullscreen: 'i-tabler-maximize', exitFullscreen: 'i-tabler-minimize', assistant: 'i-tabler-robot', themes: 'i-tabler-palette', github: 'i-tabler-brand-github', dice: 'i-tabler-dice' },
+  lucide: { undo: 'i-lucide-undo-2', redo: 'i-lucide-redo-2', reset: 'i-lucide-rotate-ccw', export: 'i-lucide-download', fullscreen: 'i-lucide-maximize', exitFullscreen: 'i-lucide-minimize', assistant: 'i-lucide-bot-message-square', themes: 'i-lucide-swatch-book', dice: 'i-lucide-dices' },
+  bootstrap: { undo: 'i-bi-arrow-90deg-left', redo: 'i-bi-arrow-90deg-right', reset: 'i-bi-arrow-counterclockwise', export: 'i-bi-download', fullscreen: 'i-bi-fullscreen', exitFullscreen: 'i-bi-fullscreen-exit', assistant: 'i-bi-robot', themes: 'i-bi-palette', dice: 'i-bi-dice-5' },
+  heroicons: { undo: 'i-heroicons-arrow-uturn-left', redo: 'i-heroicons-arrow-uturn-right', reset: 'i-heroicons-arrow-path', export: 'i-heroicons-arrow-down-tray', fullscreen: 'i-heroicons-arrows-pointing-out', exitFullscreen: 'i-heroicons-arrows-pointing-in', assistant: 'i-heroicons-sparkles', themes: 'i-heroicons-swatch', dice: 'i-heroicons-arrows-right-left' },
+  iconoir: { undo: 'i-iconoir-undo', redo: 'i-iconoir-redo', reset: 'i-iconoir-refresh-double', export: 'i-iconoir-download', fullscreen: 'i-iconoir-expand', exitFullscreen: 'i-iconoir-collapse', assistant: 'i-iconoir-magic-wand', themes: 'i-iconoir-palette', dice: 'i-iconoir-shuffle' },
+  material: { undo: 'i-material-symbols-undo', redo: 'i-material-symbols-redo', reset: 'i-material-symbols-refresh', export: 'i-material-symbols-download', fullscreen: 'i-material-symbols-fullscreen', exitFullscreen: 'i-material-symbols-fullscreen-exit', assistant: 'i-material-symbols-robot', themes: 'i-material-symbols-palette', dice: 'i-material-symbols-shuffle' },
+  phosphor: { undo: 'i-ph-arrow-arc-left', redo: 'i-ph-arrow-arc-right', reset: 'i-ph-arrow-counter-clockwise', export: 'i-ph-download', fullscreen: 'i-ph-arrows-out', exitFullscreen: 'i-ph-arrows-in', assistant: 'i-ph-robot', themes: 'i-ph-palette', dice: 'i-ph-shuffle' },
+  remix: { undo: 'i-ri-arrow-go-back-line', redo: 'i-ri-arrow-go-forward-line', reset: 'i-ri-restart-line', export: 'i-ri-download-line', fullscreen: 'i-ri-fullscreen-line', exitFullscreen: 'i-ri-fullscreen-exit-line', assistant: 'i-ri-robot-2-line', themes: 'i-ri-palette-line', dice: 'i-ri-dice-line' },
+  tabler: { undo: 'i-tabler-arrow-back-up', redo: 'i-tabler-arrow-forward-up', reset: 'i-tabler-refresh', export: 'i-tabler-download', fullscreen: 'i-tabler-maximize', exitFullscreen: 'i-tabler-minimize', assistant: 'i-tabler-robot', themes: 'i-tabler-palette', dice: 'i-tabler-dice' },
   // Pixel pack has no `themes`/`palette` glyph, so `colors-swatch` stands in
   // for the swatch-book.
-  pixelarticons: { undo: 'i-pixelarticons-undo', redo: 'i-pixelarticons-redo', reset: 'i-pixelarticons-reload', export: 'i-pixelarticons-download', fullscreen: 'i-pixelarticons-viewport-wide', exitFullscreen: 'i-pixelarticons-viewport-narrow', assistant: 'i-pixelarticons-robot', themes: 'i-pixelarticons-colors-swatch', github: 'i-pixelarticons-github', dice: 'i-pixelarticons-dice' }
+  pixelarticons: { undo: 'i-pixelarticons-undo', redo: 'i-pixelarticons-redo', reset: 'i-pixelarticons-reload', export: 'i-pixelarticons-download', fullscreen: 'i-pixelarticons-viewport-wide', exitFullscreen: 'i-pixelarticons-viewport-narrow', assistant: 'i-pixelarticons-robot', themes: 'i-pixelarticons-colors-swatch', dice: 'i-pixelarticons-dice' }
 }
 
 /**

From b661e0b9e339b42c4b5cf94c7271a13c519c46fa Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 2 Aug 2026 02:27:18 +0200
Subject: [PATCH 177/185] fix(theme-studio): drop the shuffle die from the
 header picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The die sat on the Preset row, leaving that control ~40px narrower than
the Primary and Neutral selects under it — left edges aligned, right
edges didn't, which was the ragged half of the alignment feedback. It
stays in the /theme toolbar, where there's room and where shuffling is
part of the job.

Behind a `random` prop rather than a wrapper, pinned true through
withDefaults: an absent optional boolean casts to false, so the toolbar
would have silently lost its die.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DBnE22R8HET4djqk1v5F41
---
 .../theme-studio/ThemeStudioPicker.vue           |  2 +-
 .../theme-studio/ThemeStudioPresetMenu.vue       | 16 ++++++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioPicker.vue b/docs/app/components/theme-studio/ThemeStudioPicker.vue
index 5c4e3a2c84..00138e1721 100644
--- a/docs/app/components/theme-studio/ThemeStudioPicker.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPicker.vue
@@ -44,7 +44,7 @@ const aliases = [
         <div class="flex items-center gap-2">
           <span class="text-xs text-muted w-14 shrink-0">Preset</span>
 
-          <ThemeStudioPresetMenu size="sm" class="flex-1 min-w-0" />
+          <ThemeStudioPresetMenu size="sm" :random="false" class="flex-1 min-w-0" />
         </div>
 
         <div v-for="{ alias, label } in aliases" :key="alias" class="flex items-center gap-2">
diff --git a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
index f6e61e43b5..efca31f642 100644
--- a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
@@ -1,11 +1,19 @@
 <script setup lang="ts">
-/** The presets trigger (label + popover listbox) plus the shuffle die. */
-const props = defineProps<{
+/** The presets trigger (label + popover listbox), optionally with the die. */
+const props = withDefaults(defineProps<{
   /** Button size — the toolbar uses the default, the header picker slims down. */
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   /** Toolbar opts out of dismissing on its own chrome; other hosts keep stock dismiss. */
   keepPanels?: boolean
-}>()
+  /**
+   * The shuffle die beside the trigger. Off in the header picker, where the
+   * row aligns with the colour selects below it and has no width to spare.
+   */
+  random?: boolean
+}>(), {
+  // absent optional booleans cast to false — pin the default so it survives
+  random: true
+})
 
 const { presets, selectedPreset, shuffle } = useThemeStudio()
 const { icon: iconSet } = useTheme()
@@ -108,7 +116,7 @@ const presetLabel = computed(() => {
       </template>
     </UPopover>
 
-    <UTooltip text="Random theme">
+    <UTooltip v-if="random" text="Random theme">
       <UButton
         :icon="diceFace"
         color="neutral"

From a89ad23a8315d7d845d6ef890cee55bfcfe70652 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 2 Aug 2026 02:53:09 +0200
Subject: [PATCH 178/185] refactor(theme-studio): one settings panel, type and
 icons on the toolbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

General and Style were one long list chopped in half, so they merge into
Style: type, icons and scale, then the shadow/border treatments, with the
per-component defaults trailing behind. SECTION_GROUPS is the single
source for that split, so groupDirty and the toolbar follow from it.

Only top-level sections fold now. ThemeStudioSection takes `collapsible`
— same header and content, disabled shell — and the aliases nested under
Semantic use it, as do the token-shade groups, which sat three folds deep
behind a section, a fold and an "Adjust shades" toggle for one slider.

Button/Card/Input Defaults become one Defaults fold over all three, which
needed sectionKey (and sectionDirty/resetSection) to take several keys.
Reset splices every slice in one applyDoc, so it stays one history entry.

Type and icons ride the toolbar rather than a panel — the two things
feedback called hardest to reach, and the pickers preview themselves, so
seeing them costs no clicks. Both take a `size` so the toolbar can run
them at the bar's own size. The Colors trigger wears overlapping primary
and neutral dots, reporting its colours without being opened.

The light/dark tabs leave the toolbar: the header owns color mode now.
That button gets data-keep-panels so flipping the mode doesn't dismiss
the theme popover beside it — checking a theme in both modes is the
whole point of having them adjacent.

The header popover regains font, icons and radius on the studio's own
w-13 label column, plus a reset in its title row and an Export that
appears once there's something to export.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DBnE22R8HET4djqk1v5F41
---
 docs/app/components/header/Header.vue         |   4 +-
 .../theme-studio/ThemeStudioColorSection.vue  |  10 +-
 .../theme-studio/ThemeStudioControls.vue      |  26 +--
 .../ThemeStudioControlsColors.vue             |   7 +-
 .../ThemeStudioControlsDefaults.vue           | 164 ++++++++++++++++++
 .../ThemeStudioControlsGeneral.vue            | 160 +----------------
 .../theme-studio/ThemeStudioFontPicker.vue    |  10 +-
 .../theme-studio/ThemeStudioListPicker.vue    |  10 +-
 .../theme-studio/ThemeStudioPicker.vue        | 151 +++++++++++++---
 .../theme-studio/ThemeStudioSection.vue       |  28 ++-
 .../theme-studio/ThemeStudioTokenShades.vue   |  64 +++----
 docs/app/composables/useThemeStudio.ts        |  17 +-
 docs/app/pages/theme.vue                      | 112 +++++++-----
 docs/app/utils/theme-engine/sections.ts       |   8 +-
 docs/app/utils/theme.ts                       |  11 ++
 15 files changed, 485 insertions(+), 297 deletions(-)
 create mode 100644 docs/app/components/theme-studio/ThemeStudioControlsDefaults.vue

diff --git a/docs/app/components/header/Header.vue b/docs/app/components/header/Header.vue
index 9161efad46..dfa6d08372 100644
--- a/docs/app/components/header/Header.vue
+++ b/docs/app/components/header/Header.vue
@@ -56,8 +56,10 @@ const viewListOpen = ref(false)
 
       <ThemeStudioPicker />
 
+      <!-- data-keep-panels: flipping the mode is how you check a theme in
+           both, so it must not dismiss the open theme popover beside it -->
       <UTooltip text="Color mode">
-        <UColorModeButton />
+        <UColorModeButton data-keep-panels />
       </UTooltip>
 
       <UTooltip text="Open on GitHub" class="hidden lg:flex">
diff --git a/docs/app/components/theme-studio/ThemeStudioColorSection.vue b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
index 33e42a9898..df6aef13c0 100644
--- a/docs/app/components/theme-studio/ThemeStudioColorSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioColorSection.vue
@@ -7,14 +7,18 @@ import type { ColorAlias, SectionKey } from '../../utils/theme-engine'
  * shade sliders folding out underneath. Color aliases expose their accent
  * pair; neutral carries every neutral-ramped token group.
  */
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   alias: ColorAlias
   /** Header text — defaults to the capitalized alias. */
   label?: string
   helpTo?: string
   /** Passed through to the section header's reset affordance. */
   sectionKey?: SectionKey
-}>()
+  /** Off for the aliases nested under Semantic — only top level folds. */
+  collapsible?: boolean
+}>(), {
+  collapsible: true
+})
 
 const { rampChip } = useThemeStudio()
 const { shadeLadder, sections } = useTokenShades(props.alias)
@@ -26,7 +30,7 @@ const shadeEditor = ref(false)
 </script>
 
 <template>
-  <ThemeStudioSection :label="title" :help-to="helpTo" :section-key="sectionKey">
+  <ThemeStudioSection :label="title" :help-to="helpTo" :section-key="sectionKey" :collapsible="collapsible">
     <template #actions>
       <UTooltip text="Adjust shades">
         <UButton
diff --git a/docs/app/components/theme-studio/ThemeStudioControls.vue b/docs/app/components/theme-studio/ThemeStudioControls.vue
index 848f986a98..071bab6997 100644
--- a/docs/app/components/theme-studio/ThemeStudioControls.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControls.vue
@@ -1,18 +1,24 @@
 <script setup lang="ts">
-import { ThemeStudioControlsColors, ThemeStudioControlsGeneral, ThemeStudioControlsStyle } from '#components'
-
 /** Which settings group this instance renders — one popover per group. */
 defineProps<{
-  group: 'colors' | 'general' | 'style'
+  group: 'colors' | 'style'
 }>()
-
-const groups = {
-  colors: ThemeStudioControlsColors,
-  general: ThemeStudioControlsGeneral,
-  style: ThemeStudioControlsStyle
-}
 </script>
 
 <template>
-  <component :is="groups[group]" />
+  <ThemeStudioControlsColors v-if="group === 'colors'" />
+
+  <!-- Style is type, icons and scale, then the shadow/border treatments,
+       with the per-component defaults trailing behind, collapsed. -->
+  <div v-else class="flex flex-col">
+    <ThemeStudioControlsGeneral />
+
+    <USeparator />
+
+    <ThemeStudioControlsStyle />
+
+    <USeparator />
+
+    <ThemeStudioControlsDefaults />
+  </div>
 </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioControlsColors.vue b/docs/app/components/theme-studio/ThemeStudioControlsColors.vue
index d879621d5c..e6d29fd9c5 100644
--- a/docs/app/components/theme-studio/ThemeStudioControlsColors.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControlsColors.vue
@@ -33,7 +33,12 @@ const semanticAliases: ColorAlias[] = ['secondary', 'success', 'info', 'warning'
       section-key="semantic"
     >
       <div class="flex flex-col gap-3 pt-1">
-        <ThemeStudioColorSection v-for="alias in semanticAliases" :key="alias" :alias="alias" />
+        <ThemeStudioColorSection
+          v-for="alias in semanticAliases"
+          :key="alias"
+          :alias="alias"
+          :collapsible="false"
+        />
       </div>
     </ThemeStudioSection>
   </div>
diff --git a/docs/app/components/theme-studio/ThemeStudioControlsDefaults.vue b/docs/app/components/theme-studio/ThemeStudioControlsDefaults.vue
new file mode 100644
index 0000000000..432ca12f55
--- /dev/null
+++ b/docs/app/components/theme-studio/ThemeStudioControlsDefaults.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import type { VariantGroup } from '../../utils/theme-engine'
+
+/**
+ * Per-component defaults: the variant (and colour, where the group has one)
+ * that Buttons, Cards and Inputs start from. One fold over all three — they
+ * were three sections for three short forms. Collapsed by default and last in
+ * the panel; it's the least-reached-for control.
+ */
+const { style, setStyle } = useThemeStudio()
+
+// Per-group default variants, each offering only what its components support;
+// the app-wide `variant` shows through as the fallback.
+const variantItems = (values: string[]) => values.map(value => ({ label: capitalize(value), value }))
+
+/** Variant names UButton can render itself — the rest (none) fall back. */
+const RENDERABLE_VARIANTS = ['solid', 'outline', 'soft', 'subtle', 'ghost', 'link']
+
+/** Variant grid popovers close on pick — one open flag per group. */
+const variantGridOpen = reactive<Record<string, boolean>>({ buttons: false, panels: false, inputs: false })
+
+// `stock` is the library's own default variant — its cell wears the
+// "(Default)" tag and picking it clears the override instead of pinning.
+const variantGroupFields = [
+  { key: 'buttons' as const, label: 'Button Defaults', hasColor: true, stock: 'solid', items: variantItems(['solid', 'outline', 'soft', 'subtle', 'ghost', 'link']) },
+  { key: 'panels' as const, label: 'Card Defaults', hasColor: false, stock: 'outline', items: variantItems(['solid', 'outline', 'soft', 'subtle']) },
+  { key: 'inputs' as const, label: 'Input Defaults', hasColor: true, stock: 'outline', items: variantItems(['outline', 'soft', 'subtle', 'ghost', 'none']) }
+]
+
+function groupVariantModel(group: VariantGroup) {
+  const supported = variantGroupFields.find(field => field.key === group)!.items.map(item => item.value)
+  return computed({
+    get: () => {
+      const own = style.value.defaults?.variants?.[group]
+      if (own && own !== 'default') return own
+      // An app-wide value this group can't express (e.g. solid inputs)
+      // truthfully reads as Default — the engine skips it there too.
+      const appWide = style.value.defaults?.variant
+      return appWide && supported.includes(appWide) ? appWide : 'default'
+    },
+    set: (value: any) => {
+      const defaults = style.value.defaults || {}
+
+      // Picking Default under an app-wide variant must actually win: the
+      // engine skips 'default' entries, so the app-wide value explodes
+      // into the OTHER groups (where they support it) and disappears.
+      if (value === 'default' && defaults.variant) {
+        const variants: Record<string, any> = {}
+        for (const field of variantGroupFields) {
+          if (field.key === group) continue
+          const existing = defaults.variants?.[field.key]
+          if (existing && existing !== 'default') {
+            variants[field.key] = existing
+          } else if (field.items.some(item => item.value === defaults.variant)) {
+            variants[field.key] = defaults.variant
+          }
+        }
+        const next = { ...defaults, variants }
+        delete next.variant
+        setStyle({ defaults: next })
+        return
+      }
+
+      setStyle({ defaults: { ...defaults, variants: { ...defaults.variants, [group]: value } } })
+    }
+  })
+}
+
+const groupVariants = Object.fromEntries(variantGroupFields.map(field => [field.key, groupVariantModel(field.key)])) as Record<VariantGroup, ReturnType<typeof groupVariantModel>>
+
+// Primary IS the stock default — one entry, tagged, storing 'default'
+// (an explicit 'primary' would export a no-op override).
+const defaultColorItems = [
+  { label: 'Primary', value: 'default', chip: { color: 'primary' as any }, defaultTag: true },
+  ...['secondary', 'success', 'info', 'warning', 'error', 'neutral'].map(value => ({
+    label: capitalize(value),
+    value,
+    chip: { color: value as any }
+  }))
+]
+
+function groupColorModel(group: VariantGroup) {
+  return computed({
+    get: () => style.value.defaults?.colors?.[group] || 'default',
+    set: (value: any) => setStyle({ defaults: { ...style.value.defaults, colors: { ...style.value.defaults?.colors, [group]: value } } })
+  })
+}
+
+const groupColors = Object.fromEntries(variantGroupFields.map(field => [field.key, groupColorModel(field.key)])) as Record<VariantGroup, ReturnType<typeof groupColorModel>>
+</script>
+
+<template>
+  <ThemeStudioSection
+    label="Defaults"
+    :default-open="false"
+    class="p-4"
+    :section-key="variantGroupFields.map(field => field.key)"
+  >
+    <div class="flex flex-col gap-3">
+      <div v-for="field in variantGroupFields" :key="field.key" class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium text-muted select-none">{{ field.label }}</span>
+
+        <div class="flex flex-col gap-1.5">
+          <div class="flex items-center gap-2">
+            <span class="text-xs text-muted w-13 shrink-0 select-none">Variant</span>
+
+            <UPopover v-model:open="variantGridOpen[field.key]" :content="{ side: 'bottom', align: 'start' }" class="flex-1">
+              <UButton
+                size="sm"
+                color="neutral"
+                variant="subtle"
+                block
+                icon="i-lucide-layers"
+                trailing-icon="i-lucide-chevron-down"
+                :ui="{ label: 'flex-1 text-left' }"
+                :aria-label="`${field.label} variant`"
+              >
+                {{ field.items.find(item => item.value === (groupVariants[field.key].value === 'default' ? field.stock : groupVariants[field.key].value))?.label }}<span v-if="groupVariants[field.key].value === 'default'" class="text-dimmed font-normal">&nbsp;(Default)</span>
+              </UButton>
+
+              <template #content>
+                <!-- each cell renders IN the variant it picks -->
+                <div class="w-64 p-2 grid grid-cols-2 gap-1">
+                  <UButton
+                    v-for="item in field.items"
+                    :key="item.value"
+                    size="sm"
+                    block
+                    :color="(groupVariants[field.key].value === item.value || (groupVariants[field.key].value === 'default' && item.value === field.stock)) ? 'primary' : 'neutral'"
+                    :variant="RENDERABLE_VARIANTS.includes(item.value) ? (item.value as any) : 'subtle'"
+                    :class="[item.value === 'none' && 'opacity-60', 'min-w-0']"
+                    @click="groupVariants[field.key].value = (item.value === field.stock ? 'default' : item.value); variantGridOpen[field.key] = false"
+                  >
+                    <!-- opacity, not a color: text-dimmed would fight the variant's own text color -->
+                    <span class="truncate">{{ item.label }}<span v-if="item.value === field.stock" class="opacity-70 font-normal">&nbsp;(Default)</span></span>
+                  </UButton>
+                </div>
+              </template>
+            </UPopover>
+          </div>
+
+          <div v-if="field.hasColor" class="flex items-center gap-2">
+            <span class="text-xs text-muted w-13 shrink-0 select-none">Color</span>
+
+            <ThemeStudioDefaultSelect
+              v-model="groupColors[field.key].value"
+              :items="defaultColorItems"
+              class="flex-1"
+              :aria-label="`${field.label} color`"
+            >
+              <template #leading>
+                <UChip
+                  :color="(groupColors[field.key].value === 'default' ? 'primary' : groupColors[field.key].value) as any"
+                  inset
+                  standalone
+                />
+              </template>
+            </ThemeStudioDefaultSelect>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ThemeStudioSection>
+</template>
diff --git a/docs/app/components/theme-studio/ThemeStudioControlsGeneral.vue b/docs/app/components/theme-studio/ThemeStudioControlsGeneral.vue
index a575f52434..38ac7eb8a5 100644
--- a/docs/app/components/theme-studio/ThemeStudioControlsGeneral.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControlsGeneral.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { themeIcons, FONT_WEIGHT_DEFAULTS } from '../../utils/theme'
-import type { VariantGroup } from '../../utils/theme-engine'
+import { themeIcons, iconSetSamples, FONT_WEIGHT_DEFAULTS } from '../../utils/theme'
 
 const {
   radius,
@@ -137,12 +136,6 @@ const iconPreviews = computed(() => {
   return SAMPLE_ICON_KEYS.map(key => set[key]).filter((name): name is string => !!name).slice(0, 20)
 })
 
-/** A short strip of a set's own glyphs for its listbox row. */
-function iconSetSamples(setName: string): string[] {
-  const set = (themeIcons as Record<string, Record<string, string>>)[setName] || {}
-  return ['search', 'check', 'warning', 'light', 'dark', 'star', 'folder', 'upload'].map(key => set[key]).filter((name): name is string => !!name)
-}
-
 /* ------------------------------------------------------------- defaults -- */
 
 // MD is the stock default — one deduped entry storing 'default'
@@ -154,85 +147,6 @@ const defaultSizeItems = [
   { label: 'XL', value: 'xl' }
 ]
 
-// Per-group default variants, each offering only what its components support;
-// the app-wide `variant` shows through as the fallback.
-const variantItems = (values: string[]) => values.map(value => ({ label: capitalize(value), value }))
-
-/** Variant names UButton can render itself — the rest (none) fall back. */
-const RENDERABLE_VARIANTS = ['solid', 'outline', 'soft', 'subtle', 'ghost', 'link']
-
-/** Variant grid popovers close on pick — one open flag per group. */
-const variantGridOpen = reactive<Record<string, boolean>>({ buttons: false, panels: false, inputs: false })
-
-// `stock` is the library's own default variant — its cell wears the
-// "(Default)" tag and picking it clears the override instead of pinning.
-const variantGroupFields = [
-  { key: 'buttons' as const, label: 'Button Defaults', hasColor: true, stock: 'solid', items: variantItems(['solid', 'outline', 'soft', 'subtle', 'ghost', 'link']) },
-  { key: 'panels' as const, label: 'Card Defaults', hasColor: false, stock: 'outline', items: variantItems(['solid', 'outline', 'soft', 'subtle']) },
-  { key: 'inputs' as const, label: 'Input Defaults', hasColor: true, stock: 'outline', items: variantItems(['outline', 'soft', 'subtle', 'ghost', 'none']) }
-]
-
-function groupVariantModel(group: VariantGroup) {
-  const supported = variantGroupFields.find(field => field.key === group)!.items.map(item => item.value)
-  return computed({
-    get: () => {
-      const own = style.value.defaults?.variants?.[group]
-      if (own && own !== 'default') return own
-      // An app-wide value this group can't express (e.g. solid inputs)
-      // truthfully reads as Default — the engine skips it there too.
-      const appWide = style.value.defaults?.variant
-      return appWide && supported.includes(appWide) ? appWide : 'default'
-    },
-    set: (value: any) => {
-      const defaults = style.value.defaults || {}
-
-      // Picking Default under an app-wide variant must actually win: the
-      // engine skips 'default' entries, so the app-wide value explodes
-      // into the OTHER groups (where they support it) and disappears.
-      if (value === 'default' && defaults.variant) {
-        const variants: Record<string, any> = {}
-        for (const field of variantGroupFields) {
-          if (field.key === group) continue
-          const existing = defaults.variants?.[field.key]
-          if (existing && existing !== 'default') {
-            variants[field.key] = existing
-          } else if (field.items.some(item => item.value === defaults.variant)) {
-            variants[field.key] = defaults.variant
-          }
-        }
-        const next = { ...defaults, variants }
-        delete next.variant
-        setStyle({ defaults: next })
-        return
-      }
-
-      setStyle({ defaults: { ...defaults, variants: { ...defaults.variants, [group]: value } } })
-    }
-  })
-}
-
-const groupVariants = Object.fromEntries(variantGroupFields.map(field => [field.key, groupVariantModel(field.key)])) as Record<VariantGroup, ReturnType<typeof groupVariantModel>>
-
-// Primary IS the stock default — one entry, tagged, storing 'default'
-// (an explicit 'primary' would export a no-op override).
-const defaultColorItems = [
-  { label: 'Primary', value: 'default', chip: { color: 'primary' as any }, defaultTag: true },
-  ...['secondary', 'success', 'info', 'warning', 'error', 'neutral'].map(value => ({
-    label: capitalize(value),
-    value,
-    chip: { color: value as any }
-  }))
-]
-
-function groupColorModel(group: VariantGroup) {
-  return computed({
-    get: () => style.value.defaults?.colors?.[group] || 'default',
-    set: (value: any) => setStyle({ defaults: { ...style.value.defaults, colors: { ...style.value.defaults?.colors, [group]: value } } })
-  })
-}
-
-const groupColors = Object.fromEntries(variantGroupFields.map(field => [field.key, groupColorModel(field.key)])) as Record<VariantGroup, ReturnType<typeof groupColorModel>>
-
 const defaultSize = computed({
   // legacy saved prefs may still pin 'md' explicitly — it IS the default
   get: () => {
@@ -448,77 +362,5 @@ const defaultSize = computed({
         </div>
       </div>
     </ThemeStudioSection>
-
-    <USeparator />
-
-    <template v-for="field in variantGroupFields" :key="field.key">
-      <ThemeStudioSection
-        :label="field.label"
-        :default-open="false"
-        class="p-4"
-        :section-key="field.key"
-      >
-        <div class="flex flex-col gap-1.5">
-          <div class="flex items-center gap-2">
-            <span class="text-xs text-muted w-13 shrink-0 select-none">Variant</span>
-
-            <UPopover v-model:open="variantGridOpen[field.key]" :content="{ side: 'bottom', align: 'start' }" class="flex-1">
-              <UButton
-                size="sm"
-                color="neutral"
-                variant="subtle"
-                block
-                icon="i-lucide-layers"
-                trailing-icon="i-lucide-chevron-down"
-                :ui="{ label: 'flex-1 text-left' }"
-                :aria-label="`${field.label} variant`"
-              >
-                {{ field.items.find(item => item.value === (groupVariants[field.key].value === 'default' ? field.stock : groupVariants[field.key].value))?.label }}<span v-if="groupVariants[field.key].value === 'default'" class="text-dimmed font-normal">&nbsp;(Default)</span>
-              </UButton>
-
-              <template #content>
-                <!-- each cell renders IN the variant it picks -->
-                <div class="w-64 p-2 grid grid-cols-2 gap-1">
-                  <UButton
-                    v-for="item in field.items"
-                    :key="item.value"
-                    size="sm"
-                    block
-                    :color="(groupVariants[field.key].value === item.value || (groupVariants[field.key].value === 'default' && item.value === field.stock)) ? 'primary' : 'neutral'"
-                    :variant="RENDERABLE_VARIANTS.includes(item.value) ? (item.value as any) : 'subtle'"
-                    :class="[item.value === 'none' && 'opacity-60', 'min-w-0']"
-                    @click="groupVariants[field.key].value = (item.value === field.stock ? 'default' : item.value); variantGridOpen[field.key] = false"
-                  >
-                    <!-- opacity, not a color: text-dimmed would fight the variant's own text color -->
-                    <span class="truncate">{{ item.label }}<span v-if="item.value === field.stock" class="opacity-70 font-normal">&nbsp;(Default)</span></span>
-                  </UButton>
-                </div>
-              </template>
-            </UPopover>
-          </div>
-
-          <div v-if="field.hasColor" class="flex items-center gap-2">
-            <span class="text-xs text-muted w-13 shrink-0 select-none">Color</span>
-
-            <ThemeStudioDefaultSelect
-              v-model="groupColors[field.key].value"
-              :items="defaultColorItems"
-              class="flex-1"
-              :aria-label="`${field.label} color`"
-            >
-              <template #leading>
-                <UChip
-                  :color="(groupColors[field.key].value === 'default' ? 'primary' : groupColors[field.key].value) as any"
-                  inset
-                  standalone
-                />
-              </template>
-            </ThemeStudioDefaultSelect>
-          </div>
-        </div>
-      </ThemeStudioSection>
-
-      <USeparator v-if="field.key !== 'inputs'" />
-    </template>
   </div>
 </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioFontPicker.vue b/docs/app/components/theme-studio/ThemeStudioFontPicker.vue
index 4ebb5066cd..2adfa4c148 100644
--- a/docs/app/components/theme-studio/ThemeStudioFontPicker.vue
+++ b/docs/app/components/theme-studio/ThemeStudioFontPicker.vue
@@ -7,7 +7,7 @@
  */
 import { watchDebounced } from '@vueuse/core'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   /** The curated families offered before the user searches. */
   curated: readonly string[]
   /** The value that wears the (Default) tag. */
@@ -16,7 +16,11 @@ const props = defineProps<{
   inherit?: boolean
   icon?: string
   ariaLabel?: string
-}>()
+  /** Trigger size — panels use the default, the studio toolbar goes bigger. */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+}>(), {
+  size: 'sm'
+})
 
 const model = defineModel<string>({ required: true })
 
@@ -69,7 +73,7 @@ const emptyLabel = computed(() => {
     <UButton
       color="neutral"
       variant="subtle"
-      size="sm"
+      :size="size"
       block
       :icon="icon"
       trailing-icon="i-lucide-chevron-down"
diff --git a/docs/app/components/theme-studio/ThemeStudioListPicker.vue b/docs/app/components/theme-studio/ThemeStudioListPicker.vue
index 15fb5a4414..0bbc18b7ad 100644
--- a/docs/app/components/theme-studio/ThemeStudioListPicker.vue
+++ b/docs/app/components/theme-studio/ThemeStudioListPicker.vue
@@ -10,11 +10,15 @@ export interface ListPickerItem {
   [key: string]: unknown
 }
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   items: ListPickerItem[]
   icon?: string
   ariaLabel?: string
-}>()
+  /** Trigger size — panels use the default, the studio toolbar goes bigger. */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+}>(), {
+  size: 'sm'
+})
 
 const model = defineModel<string>({ required: true })
 
@@ -27,7 +31,7 @@ const selected = computed(() => props.items.find(item => item.value === model.va
     <UButton
       color="neutral"
       variant="subtle"
-      size="sm"
+      :size="size"
       block
       :icon="icon"
       trailing-icon="i-lucide-chevron-down"
diff --git a/docs/app/components/theme-studio/ThemeStudioPicker.vue b/docs/app/components/theme-studio/ThemeStudioPicker.vue
index 00138e1721..8e78cb52f3 100644
--- a/docs/app/components/theme-studio/ThemeStudioPicker.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPicker.vue
@@ -1,13 +1,25 @@
 <script setup lang="ts">
 /**
- * The header's slim theme popover: presets and quick color pickers for
- * fast theming from any page, with the full studio one click away.
+ * The header's slim theme popover: the settings reached for constantly —
+ * preset, colors, font, icons, radius — for fast theming from any page,
+ * with reset and export beside them and the full studio one click away.
  */
+import { iconSetSamples } from '../../utils/theme'
+
 const route = useRoute()
 const { track } = useAnalytics()
 const studioIcons = useStudioIcons()
+const { fonts, font, icon, icons, radius, hasCSSChanges, hasConfigChanges, resetTheme } = useTheme()
 
 const open = ref(false)
+const shareOpen = ref(false)
+
+// The persisted theme is client-only — gate the dirty-driven affordances on
+// mount so hydration doesn't adopt a disabled= that never lifts.
+const mounted = ref(false)
+onMounted(() => (mounted.value = true))
+
+const dirty = computed(() => mounted.value && (hasCSSChanges.value || hasConfigChanges.value))
 
 watch(open, (isOpen) => {
   if (isOpen) {
@@ -15,14 +27,33 @@ watch(open, (isOpen) => {
   }
 })
 
+// the font rows render in their own faces — load them when the popover
+// first opens rather than on every page load
+const fontsLoaded = ref(false)
+watch(open, (isOpen) => {
+  if (isOpen && !fontsLoaded.value) {
+    fontsLoaded.value = true
+    loadFontPreviews(fonts)
+  }
+})
+
 const aliases = [
   { alias: 'primary', label: 'Primary' },
   { alias: 'neutral', label: 'Neutral' }
 ] as const
+
+function openExport() {
+  open.value = false
+  shareOpen.value = true
+}
 </script>
 
 <template>
-  <UPopover v-model:open="open" :ui="{ content: 'w-64 p-3 flex flex-col gap-3' }">
+  <UPopover
+    v-model:open="open"
+    :content="{ onInteractOutside: keepPanels }"
+    :ui="{ content: 'w-72 p-3 flex flex-col gap-3' }"
+  >
     <UTooltip text="Theme">
       <UButton
         :icon="studioIcons.themes"
@@ -36,39 +67,119 @@ const aliases = [
     </UTooltip>
 
     <template #content>
-      <span class="text-xs font-semibold text-muted">Theme</span>
+      <div class="flex items-center justify-between gap-2">
+        <span class="text-xs font-semibold text-muted">Theme</span>
+
+        <UTooltip :text="dirty ? 'Reset theme' : 'Nothing to reset'">
+          <UButton
+            :icon="studioIcons.reset"
+            size="xs"
+            :color="dirty ? 'primary' : 'neutral'"
+            variant="ghost"
+            :disabled="!dirty"
+            aria-label="Reset theme"
+            @click="resetTheme()"
+          />
+        </UTooltip>
+      </div>
 
-      <!-- Preset leads its row like the colors below it, so all three
-           controls share one left edge. -->
+      <!-- Every row leads with a w-13 label — the same column the studio's
+           slider rows use, so Radius lines up with the pickers above it. -->
       <div class="flex flex-col gap-2">
         <div class="flex items-center gap-2">
-          <span class="text-xs text-muted w-14 shrink-0">Preset</span>
+          <span class="text-xs text-muted w-13 shrink-0 select-none">Preset</span>
 
           <ThemeStudioPresetMenu size="sm" :random="false" class="flex-1 min-w-0" />
         </div>
 
         <div v-for="{ alias, label } in aliases" :key="alias" class="flex items-center gap-2">
-          <span class="text-xs text-muted w-14 shrink-0">{{ label }}</span>
+          <span class="text-xs text-muted w-13 shrink-0 select-none">{{ label }}</span>
 
           <ThemeStudioColorMenu :alias="alias" class="flex-1 min-w-0" />
         </div>
+
+        <div class="flex items-center gap-2">
+          <span class="text-xs text-muted w-13 shrink-0 select-none">Font</span>
+
+          <ThemeStudioFontPicker
+            v-model="font"
+            :curated="fonts"
+            default-value="Public Sans"
+            icon="i-lucide-type"
+            aria-label="Font"
+            class="flex-1 min-w-0"
+          />
+        </div>
+
+        <div class="flex items-center gap-2">
+          <span class="text-xs text-muted w-13 shrink-0 select-none">Icons</span>
+
+          <ThemeStudioListPicker
+            v-model="icon"
+            :items="icons"
+            :icon="icons.find(entry => entry.value === icon)?.icon"
+            aria-label="Icon set"
+            class="flex-1 min-w-0"
+          >
+            <!-- every set previews a strip of its own glyphs -->
+            <template #item-description="{ item }">
+              <span class="flex items-center gap-1.5 pt-0.5">
+                <UIcon
+                  v-for="name in iconSetSamples(item.value)"
+                  :key="name"
+                  :name="name"
+                  class="size-3.5 text-muted"
+                />
+              </span>
+            </template>
+          </ThemeStudioListPicker>
+        </div>
+
+        <ThemeStudioSliderRow
+          v-model="radius"
+          label="Radius"
+          :min="0"
+          :max="0.5"
+          :step="0.125"
+        />
       </div>
 
-      <template v-if="route.path !== '/theme'">
+      <template v-if="dirty || route.path !== '/theme'">
         <USeparator />
 
-        <UButton
-          label="Edit theme"
-          :icon="studioIcons.themes"
-          trailing-icon="i-lucide-arrow-right"
-          color="neutral"
-          variant="subtle"
-          size="sm"
-          block
-          to="/theme"
-          @click="open = false"
-        />
+        <div class="flex items-center gap-2">
+          <!-- Export only once there's something to export. -->
+          <UButton
+            v-if="dirty"
+            label="Export"
+            :icon="studioIcons.export"
+            color="neutral"
+            variant="subtle"
+            size="sm"
+            :block="route.path === '/theme'"
+            :class="route.path !== '/theme' && 'flex-1 min-w-0'"
+            @click="openExport"
+          />
+
+          <UButton
+            v-if="route.path !== '/theme'"
+            label="Edit theme"
+            :icon="studioIcons.themes"
+            trailing-icon="i-lucide-arrow-right"
+            color="neutral"
+            variant="subtle"
+            size="sm"
+            :block="!dirty"
+            :class="dirty && 'flex-1 min-w-0'"
+            to="/theme"
+            @click="open = false"
+          />
+        </div>
       </template>
     </template>
   </UPopover>
+
+  <!-- outside the popover: opening the modal dismisses it, which would
+       unmount a modal nested inside -->
+  <ThemeStudioShareModal v-model:open="shareOpen" mode="export" />
 </template>
diff --git a/docs/app/components/theme-studio/ThemeStudioSection.vue b/docs/app/components/theme-studio/ThemeStudioSection.vue
index 789335bf8f..89d5fba1d0 100644
--- a/docs/app/components/theme-studio/ThemeStudioSection.vue
+++ b/docs/app/components/theme-studio/ThemeStudioSection.vue
@@ -14,13 +14,20 @@ const props = withDefaults(defineProps<{
   helpTo?: string
   defaultOpen?: boolean
   /**
-   * Names the ThemeDoc section this fold owns — the header then carries a
-   * reset button enabled while the section diverges from the baseline
+   * Names the ThemeDoc section(s) this fold owns — the header then carries a
+   * reset button enabled while any of them diverges from the baseline
    * preset, wired straight to the studio's sectionDirty/resetSection.
    */
-  sectionKey?: SectionKey
+  sectionKey?: SectionKey | SectionKey[]
+  /**
+   * Off renders the header and content without the fold. Only the panel's
+   * top-level sections collapse; a fold inside a fold hides content behind
+   * two clicks and reads as a menu that keeps going.
+   */
+  collapsible?: boolean
 }>(), {
-  defaultOpen: true
+  defaultOpen: true,
+  collapsible: true
 })
 
 const { sectionDirty, resetSection } = useThemeStudio()
@@ -32,15 +39,20 @@ const slots = defineSlots<{
   actions: () => any
 }>()
 
-const open = ref(props.defaultOpen)
+// Static sections are always open — the fold is what `collapsible` removes.
+const open = ref(props.collapsible ? props.defaultOpen : true)
 </script>
 
 <template>
-  <UCollapsible v-model:open="open">
+  <!-- Static sections keep the same shell, disabled and pinned open, so the
+       header/content markup below has one shape. -->
+  <UCollapsible v-model:open="open" :disabled="!collapsible">
     <div class="flex items-center gap-1">
       <!-- Leading chevron: the disclosure cue that tells a fold trigger
-           apart from a select (whose chevron trails). -->
+           apart from a select (whose chevron trails). Static sections get a
+           plain label — nothing to disclose. -->
       <UButton
+        v-if="collapsible"
         :label="label"
         :icon="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
         color="neutral"
@@ -50,6 +62,8 @@ const open = ref(props.defaultOpen)
         class="justify-start flex-1"
       />
 
+      <span v-else class="flex-1 text-xs font-medium text-muted select-none px-2">{{ label }}</span>
+
       <UTooltip text="Docs">
         <UButton
           v-if="helpTo"
diff --git a/docs/app/components/theme-studio/ThemeStudioTokenShades.vue b/docs/app/components/theme-studio/ThemeStudioTokenShades.vue
index 2ed3018ca8..fe58c7c595 100644
--- a/docs/app/components/theme-studio/ThemeStudioTokenShades.vue
+++ b/docs/app/components/theme-studio/ThemeStudioTokenShades.vue
@@ -3,10 +3,13 @@ import { TOKEN_GROUPS } from '../../utils/theme-engine'
 import type { ColorAlias, TokenGroup } from '../../utils/theme-engine'
 
 /**
- * Per-mode shade sliders for the semantic tokens of one ramp, grouped and
- * folded. Shared by the Colors panel (background/text on neutral) and the
- * Style panel's Borders section (the border group), so a token group can live
- * next to whichever control it belongs with.
+ * Per-mode shade sliders for the semantic tokens of one ramp, grouped under
+ * plain headings. Shared by the Colors panel (background/text on neutral) and
+ * the Style panel's Borders section (the border group), so a token group can
+ * live next to whichever control it belongs with.
+ *
+ * The whole strip already sits behind its section's "Adjust shades" toggle —
+ * folding the groups inside it too would be a third click for a slider.
  */
 const props = defineProps<{
   alias: ColorAlias
@@ -17,48 +20,33 @@ const props = defineProps<{
 const { rampChip } = useThemeStudio()
 const { shadeLadder, sections } = useTokenShades(props.alias)
 
-// Groups fold individually — all closed by default so the panel opens compact.
 const tokenGroups = TOKEN_GROUPS
   .filter(group => !props.groups || props.groups.includes(group.key))
   .map(group => ({ ...group, sections: sections.filter(section => section.group === group.key) }))
   .filter(group => group.sections.length)
-const openGroups = reactive<Record<string, boolean>>({})
 </script>
 
 <template>
-  <div class="flex flex-col gap-1 pt-2">
-    <UCollapsible v-for="tokenGroup in tokenGroups" :key="tokenGroup.key" v-model:open="openGroups[tokenGroup.key]">
-      <UButton
-        :label="tokenGroup.label"
-        :icon="openGroups[tokenGroup.key] ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
-        color="neutral"
-        variant="ghost"
-        size="sm"
-        block
-        :active="openGroups[tokenGroup.key]"
-        active-variant="subtle"
-        class="justify-start"
-      />
+  <div class="flex flex-col gap-3 pt-2">
+    <div v-for="tokenGroup in tokenGroups" :key="tokenGroup.key" class="flex flex-col gap-2">
+      <!-- group heading only when there's more than one to tell apart -->
+      <span v-if="tokenGroups.length > 1" class="text-xs font-medium text-muted select-none">{{ tokenGroup.label }}</span>
 
-      <template #content>
-        <div class="flex flex-col gap-3 pt-2 pb-1 px-1">
-          <div v-for="section in tokenGroup.sections" :key="section.token" class="flex flex-col gap-1.5">
-            <span class="text-xs text-muted select-none">{{ section.label }}</span>
+      <div v-for="section in tokenGroup.sections" :key="section.token" class="flex flex-col gap-1.5 px-1">
+        <span class="text-xs text-muted select-none">{{ section.label }}</span>
 
-            <ThemeStudioSliderRow
-              v-for="(slider, modeName) in section.sliders"
-              :key="modeName"
-              v-model="slider.model.value"
-              :mode="modeName"
-              :chip="rampChip(section.ramp)"
-              :ladder="shadeLadder"
-              resettable
-              :dirty="slider.dirty.value"
-              @reset="slider.reset()"
-            />
-          </div>
-        </div>
-      </template>
-    </UCollapsible>
+        <ThemeStudioSliderRow
+          v-for="(slider, modeName) in section.sliders"
+          :key="modeName"
+          v-model="slider.model.value"
+          :mode="modeName"
+          :chip="rampChip(section.ramp)"
+          :ladder="shadeLadder"
+          resettable
+          :dirty="slider.dirty.value"
+          @reset="slider.reset()"
+        />
+      </div>
+    </div>
   </div>
 </template>
diff --git a/docs/app/composables/useThemeStudio.ts b/docs/app/composables/useThemeStudio.ts
index 2ee637a198..b6c884e74e 100644
--- a/docs/app/composables/useThemeStudio.ts
+++ b/docs/app/composables/useThemeStudio.ts
@@ -473,8 +473,12 @@ export function useThemeStudio() {
    */
   const baselineDoc = computed(() => presets.find(preset => preset.id === activePreset.value)?.doc ?? { version: 1 as const })
 
-  function sectionDirty(key: SectionKey) {
-    return computed(() => sectionFingerprint(theme.currentDoc(), key) !== sectionFingerprint(baselineDoc.value, key))
+  /** One key, or several when a fold owns more than one slice (Defaults). */
+  function sectionDirty(key: SectionKey | SectionKey[]) {
+    const keys = Array.isArray(key) ? key : [key]
+    return computed(() => keys.some(entry =>
+      sectionFingerprint(theme.currentDoc(), entry) !== sectionFingerprint(baselineDoc.value, entry)
+    ))
   }
 
   function groupDirty(group: keyof typeof SECTION_GROUPS) {
@@ -483,7 +487,10 @@ export function useThemeStudio() {
     ))
   }
 
-  function resetSection(key: SectionKey) {
+  function resetSection(key: SectionKey | SectionKey[]) {
+    // several slices splice in one pass — one applyDoc, so a multi-key fold
+    // costs one history entry rather than one per slice
+    const keys = Array.isArray(key) ? key : [key]
     // currentDoc embeds reactive slices — structuredClone chokes on Vue
     // proxies, so round-trip to plain JSON first (history does the same)
     const plain = JSON.parse(JSON.stringify(theme.currentDoc())) as ThemeDoc
@@ -495,12 +502,12 @@ export function useThemeStudio() {
     // (a reset colour section drops to a stock name, so isCustomPalette filters
     // it out) or the editor would silently refit the untouched ramp.
     const preservedPp = JSON.parse(JSON.stringify(paletteParams.value)) as typeof paletteParams.value
-    applyDoc(mergeSection(plain, baselineDoc.value, key))
+    applyDoc(keys.reduce((doc, entry) => mergeSection(doc, baselineDoc.value, entry), plain))
     setPaletteParams(Object.fromEntries(
       Object.entries(preservedPp).filter(([alias]) => isCustomPalette(alias))
     ))
     setActivePreset(preserved)
-    track('Theme Section Reset', { section: key })
+    track('Theme Section Reset', { section: keys.join(',') })
   }
 
   /** For flows that replace the whole doc outside a preset (imports). */
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 0f17a8b221..4c428baef3 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { iconSetSamples } from '../utils/theme'
+
 const { track } = useAnalytics()
-const { resetTheme, icon: iconSet } = useTheme()
+const { resetTheme, icon: iconSet, fonts, font, icons, blackAsPrimary } = useTheme()
 
 // Toolbar skins to the applied icon pack; import/chevron reuse the standard
 // semantic keys off appConfig.ui.icons.
@@ -22,6 +24,8 @@ onMounted(() => {
   mounted.value = true
   track('Theme Studio Opened')
   align(snapshot())
+  // the toolbar's font rows render in their own faces
+  loadFontPreviews(fonts)
 })
 
 // Debounced capture folds slider-drag bursts into single history steps; the
@@ -42,12 +46,21 @@ function toggleColorMode() {
 }
 
 const appConfig = useAppConfig()
-const { style, groupDirty, presets, activePreset, applyPreset } = useThemeStudio()
+const { groupDirty, presets, activePreset, applyPreset, primaryChip, neutralChip } = useThemeStudio()
+
+/**
+ * The Colors trigger wears the two colours it owns, so the toolbar reports
+ * the current primary and neutral without being opened — the same job the
+ * font and icon pickers do by showing their values.
+ */
+const colorDots = computed(() => [
+  blackAsPrimary.value ? undefined : `var(--color-${primaryChip.value}-500)`,
+  `var(--color-${neutralChip.value}-500)`
+])
 
 /** "Changed from preset" dot per settings tab. */
 const groupDirtyFlags = {
   colors: groupDirty('colors'),
-  general: groupDirty('general'),
   style: groupDirty('style')
 }
 
@@ -68,24 +81,6 @@ function resetToBaseline() {
   else resetTheme()
 }
 
-// Mode tabs follow the default size setting, one step down — full size reads
-// too big next to the buttons.
-const SIZE_LADDER = ['xs', 'sm', 'md', 'lg', 'xl'] as const
-const modeTabsSize = computed(() => {
-  const base = style.value.defaults?.size
-  const index = SIZE_LADDER.indexOf((!base || base === 'default' ? 'md' : base) as typeof SIZE_LADDER[number])
-  return SIZE_LADDER[Math.max(0, index - 2)]
-})
-
-const modeTabItems = computed(() => [
-  { value: 'light', icon: appConfig.ui.icons.light },
-  { value: 'dark', icon: appConfig.ui.icons.dark }
-])
-const modeTab = computed({
-  get: () => (colorMode.value === 'dark' ? 'dark' : 'light'),
-  set: (value: string) => (colorMode.preference = value)
-})
-
 defineShortcuts({
   meta_z: undo,
   meta_shift_z: redo,
@@ -119,7 +114,6 @@ onUnmounted(() => {
 
 const settingGroups = [
   { label: 'Colors', value: 'colors' },
-  { label: 'General', value: 'general' },
   { label: 'Style', value: 'style' }
 ] as const
 
@@ -140,7 +134,7 @@ watch(fullscreen, (on) => {
 })
 onUnmounted(() => window.removeEventListener('mousemove', onPointerNear))
 
-const openPanels = reactive({ presets: false, colors: false, general: false, style: false, view: false })
+const openPanels = reactive({ presets: false, colors: false, style: false, view: false })
 const toolbarPinned = computed(() => nearBottom.value || Object.values(openPanels).some(Boolean))
 
 /** The shared import/export modal — the two toolbar buttons pick its mode. */
@@ -198,7 +192,22 @@ const shareMode = ref<'import' | 'export'>('export')
                   color="neutral"
                   variant="subtle"
                   :trailing-icon="appConfig.ui.icons.chevronDown"
-                />
+                >
+                  <template v-if="settingGroup.value === 'colors'" #leading>
+                    <!-- overlapped like an avatar stack; the ring is the
+                         button's own surface, so it cuts rather than outlines -->
+                    <span class="flex items-center -space-x-1">
+                      <!-- black-as-primary has no ramp variable to point at -->
+                      <span
+                        v-for="(dot, index) in colorDots"
+                        :key="index"
+                        class="inline-block size-3 rounded-full ring-2 ring-(--ui-bg-elevated)"
+                        :class="!dot && 'bg-black dark:bg-white'"
+                        :style="dot ? { backgroundColor: dot } : undefined"
+                      />
+                    </span>
+                  </template>
+                </UButton>
               </UChip>
 
               <template #content>
@@ -206,27 +215,42 @@ const shareMode = ref<'import' | 'export'>('export')
               </template>
             </UPopover>
 
-            <UTooltip text="Color mode" :kbds="['ctrl', 'shift', 'D']">
-              <!-- mounted-gated: the preference is client-only and tabs
-                   would hydrate on the server's fallback -->
-              <UTabs
-                v-if="mounted"
-                v-model="modeTab"
-                data-keep-panels
-                :items="modeTabItems"
-                :content="false"
-                :size="modeTabsSize"
-                color="primary"
-                class="shrink-0"
-                :ui="{
-                  /* match the toolbar's subtle buttons — their ring is the
-                     stock variant, not themed, so the pill needs its own */
-                  list: 'ring ring-accented ring-inset rounded-md',
-                  indicator: 'rounded-sm'
-                }"
+            <!-- Type and icons ride the toolbar rather than a panel: they're
+                 the two people reach for most, and the pickers preview
+                 themselves, so seeing them costs no clicks. The wrappers
+                 carry the width — UPopover's root renders no element. -->
+            <div class="w-48 shrink-0" data-keep-panels>
+              <ThemeStudioFontPicker
+                v-model="font"
+                :curated="fonts"
+                default-value="Public Sans"
+                icon="i-lucide-type"
+                size="md"
+                aria-label="Font"
               />
-              <span v-else class="shrink-0 w-17" />
-            </UTooltip>
+            </div>
+
+            <div class="w-40 shrink-0" data-keep-panels>
+              <ThemeStudioListPicker
+                v-model="iconSet"
+                :items="icons"
+                :icon="icons.find(entry => entry.value === iconSet)?.icon"
+                size="md"
+                aria-label="Icon set"
+              >
+                <!-- every set previews a strip of its own glyphs -->
+                <template #item-description="{ item }">
+                  <span class="flex items-center gap-1.5 pt-0.5">
+                    <UIcon
+                      v-for="name in iconSetSamples(item.value)"
+                      :key="name"
+                      :name="name"
+                      class="size-3.5 text-muted"
+                    />
+                  </span>
+                </template>
+              </ThemeStudioListPicker>
+            </div>
 
             <span class="flex-1" />
 
diff --git a/docs/app/utils/theme-engine/sections.ts b/docs/app/utils/theme-engine/sections.ts
index 01486d66e6..b5ab1a1fab 100644
--- a/docs/app/utils/theme-engine/sections.ts
+++ b/docs/app/utils/theme-engine/sections.ts
@@ -18,10 +18,12 @@ export type SectionKey
     | 'font' | 'icons' | 'scale' | 'buttons' | 'panels' | 'inputs'
     | 'shadow' | 'innerShadow' | 'borders'
 
-export const SECTION_GROUPS: Record<'colors' | 'general' | 'style', SectionKey[]> = {
+export const SECTION_GROUPS: Record<'colors' | 'style', SectionKey[]> = {
   colors: ['primary', 'neutral', 'semantic'],
-  general: ['font', 'icons', 'scale', 'buttons', 'panels', 'inputs'],
-  style: ['shadow', 'innerShadow', 'borders']
+  // Everything that isn't colour: type, icons, scale, per-component defaults
+  // and the shadow/border treatments. One group — the General/Style split
+  // only ever chopped a long list in half.
+  style: ['font', 'icons', 'scale', 'shadow', 'innerShadow', 'borders', 'buttons', 'panels', 'inputs']
 }
 
 /** Which color section a semantic token (or token shade) belongs to. */
diff --git a/docs/app/utils/theme.ts b/docs/app/utils/theme.ts
index 0ff9e092b5..3cc47e08a4 100644
--- a/docs/app/utils/theme.ts
+++ b/docs/app/utils/theme.ts
@@ -433,6 +433,17 @@ export const themeIcons = {
 
 export type ThemeIcons = keyof typeof themeIcons
 
+/**
+ * A short strip of a set's own glyphs, for previewing it in a picker row —
+ * these eight differ enough between packs to tell them apart at a glance.
+ */
+export function iconSetSamples(setName: string): string[] {
+  const set = (themeIcons as Record<string, Record<string, string>>)[setName] || {}
+  return ['search', 'check', 'warning', 'light', 'dark', 'star', 'folder', 'upload']
+    .map(key => set[key])
+    .filter((name): name is string => !!name)
+}
+
 /**
  * Glyphs for the studio's own chrome (toolbar controls, the header Ask-AI
  * button, the theme-picker/preset button), per icon pack, so the chrome skins

From c80708963dfd36806b2552ed413b5376db01384b Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 2 Aug 2026 03:00:33 +0200
Subject: [PATCH 179/185] fix(theme-studio): truncate picker labels, and apply
 the saved icon pack
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The picker triggers set `truncate` on the button's label slot, but the
label is a flex child with the default min-width:auto — it can't shrink
below its content, so the text pushed the button wide instead of
clipping. min-w-0 lets it. ThemeStudioFontPicker only appeared to work
because its inner span truncates against whatever width the outer
resolved to.

Separately: a saved icon pack survived a reload everywhere except the
studio's own chrome, which came back Lucide while the dropdown correctly
named the saved pack. The pack is client-only state, so useStudioIcons
put the FIRST client render at odds with the server's Lucide, and Vue
only warns about a mismatched class — it doesn't patch it. The chrome
kept the server's glyphs until something else forced a re-render.
Resolving after mount agrees with SSR first, so the swap is a real
update. Predates this branch's feedback pass; confirmed against 21938e33f.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DBnE22R8HET4djqk1v5F41
---
 .../theme-studio/ThemeStudioFontPicker.vue           |  4 ++--
 .../theme-studio/ThemeStudioListPicker.vue           |  2 +-
 docs/app/composables/useStudioIcons.ts               | 12 +++++++++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioFontPicker.vue b/docs/app/components/theme-studio/ThemeStudioFontPicker.vue
index 2adfa4c148..344543400f 100644
--- a/docs/app/components/theme-studio/ThemeStudioFontPicker.vue
+++ b/docs/app/components/theme-studio/ThemeStudioFontPicker.vue
@@ -77,13 +77,13 @@ const emptyLabel = computed(() => {
       block
       :icon="icon"
       trailing-icon="i-lucide-chevron-down"
-      :ui="{ label: 'flex-1 text-left truncate' }"
+      :ui="{ label: 'flex-1 min-w-0 text-left truncate' }"
       :aria-label="ariaLabel"
     >
       <span
         class="truncate"
         :style="model === 'inherit' ? undefined : { fontFamily: `'${model}', sans-serif` }"
-      >{{ model === 'inherit' ? 'Inherit base' : model }}<span v-if="model === defaultValue" class="text-dimmed font-normal">&nbsp;(Default)</span></span>
+      >{{ model === 'inherit' ? 'Inherit base' : model }}</span>
     </UButton>
 
     <template #content>
diff --git a/docs/app/components/theme-studio/ThemeStudioListPicker.vue b/docs/app/components/theme-studio/ThemeStudioListPicker.vue
index 0bbc18b7ad..b5e092864a 100644
--- a/docs/app/components/theme-studio/ThemeStudioListPicker.vue
+++ b/docs/app/components/theme-studio/ThemeStudioListPicker.vue
@@ -35,7 +35,7 @@ const selected = computed(() => props.items.find(item => item.value === model.va
       block
       :icon="icon"
       trailing-icon="i-lucide-chevron-down"
-      :ui="{ label: 'flex-1 text-left truncate' }"
+      :ui="{ label: 'flex-1 min-w-0 text-left truncate' }"
       :aria-label="ariaLabel"
     >
       <slot name="trigger" :selected="selected">
diff --git a/docs/app/composables/useStudioIcons.ts b/docs/app/composables/useStudioIcons.ts
index 51c37e7a52..6768c8b458 100644
--- a/docs/app/composables/useStudioIcons.ts
+++ b/docs/app/composables/useStudioIcons.ts
@@ -10,7 +10,17 @@ import { studioIcons, STUDIO_EXTRA_DEFAULTS, studioExtraOverrides } from '../uti
  */
 export function useStudioIcons() {
   const { icon } = useTheme()
-  return toReactive(computed(() => studioIcons[icon.value as keyof typeof studioIcons] ?? studioIcons.lucide))
+  // The pack is client-only state, so rendering it straight away puts the
+  // FIRST client render at odds with the server's lucide — and Vue only warns
+  // about a mismatched class, it doesn't patch it. The chrome would then keep
+  // the server's glyphs until something else forced a re-render, which is why
+  // a persisted pack survived a reload everywhere except here. Resolving after
+  // mount agrees with SSR first, so the swap is a real update.
+  const mounted = ref(false)
+  onMounted(() => (mounted.value = true))
+  return toReactive(computed(() => (mounted.value
+    ? studioIcons[icon.value as keyof typeof studioIcons] ?? studioIcons.lucide
+    : studioIcons.lucide)))
 }
 
 /**

From 55884e6f931e28845a09fd22069021e51cc29308 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 2 Aug 2026 03:06:04 +0200
Subject: [PATCH 180/185] fix(theme-studio): apply the saved icon pack to
 appConfig after hydration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous commit fixed only the studio's own chrome. The semantic
icons — search, sun, moon, upload, every appConfig.ui.icons key — still
came back Lucide on reload, because the plugin's restore has the same
flaw one level up: it assigned appConfig.ui.icons during plugin setup,
so the first client render disagreed with the server's stock pack, and
Vue won't patch a mismatched class.

Deferring the assignment to onNuxtReady makes it an ordinary reactive
update, which does repaint. Colors don't need this — their FOUC scripts
rewrite the style tags before first paint — but icon names compile into
element classes, which no pre-paint script can reach.

Measured on /theme with tabler saved: reload went from 36 tabler / 46
lucide to 46 / 36, matching the live state before the reload, and the
page's hydration warnings dropped from 13 to 3. The Lucide names that
remain are content-authored literals and packs with no override for a
given extra key, which fall back to Lucide by design.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DBnE22R8HET4djqk1v5F41
---
 docs/app/plugins/theme.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/docs/app/plugins/theme.ts b/docs/app/plugins/theme.ts
index fcedf689ff..c0f4efb1b6 100644
--- a/docs/app/plugins/theme.ts
+++ b/docs/app/plugins/theme.ts
@@ -15,8 +15,16 @@ export default defineNuxtPlugin({
       const neutral = localStorage.getItem('nuxt-ui-neutral')
       if (neutral) appConfig.ui.colors.neutral = neutral
 
+      // Deferred past hydration on purpose. Icon names compile into element
+      // CLASSES, and Vue only warns about a class that disagrees with the
+      // server — it never patches it. Assigning here (pre-hydration) makes the
+      // first client render disagree with the server's stock pack, so the
+      // saved pack was silently dropped on every reload. After hydration it's
+      // an ordinary reactive update, which does repaint. Colors don't need
+      // this: their FOUC scripts rewrite the style tags before first paint.
       const icons = localStorage.getItem('nuxt-ui-icons')
-      if (icons) appConfig.ui.icons = themeIcons[icons as keyof typeof themeIcons] as any
+      const pack = icons ? themeIcons[icons as keyof typeof themeIcons] : undefined
+      if (pack) onNuxtReady(() => (appConfig.ui.icons = pack as any))
 
       function restoreState<T>(key: string) {
         try {

From eba3087663bf03703a46a369146ead2b2dd28137 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 2 Aug 2026 03:12:32 +0200
Subject: [PATCH 181/185] fix(theme-studio): gate the icon pack at its source;
 quieter picker triggers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The pack's own brand glyph on the icon picker still came back Lucide: it
renders `icons.find(...)` off `icon`, which is a third thing derived from
client-only state on the first render — same unpatched class mismatch as
the chrome and appConfig before it. Rather than gate a third call site,
`icon` now reports the stock pack until mounted, so every reader inherits
that. The per-call gate in useStudioIcons goes away as redundant, and
`_iconSet` stays ungated so dirty checks still see the real value.

Picker triggers get quieter: the font trigger drops its inline family
(the page already renders in the picked font, so it inherits), and the
"(Default)" tag leaves the variant, size and colour triggers. The tag
earns its place in a list, where it names which option is stock; on a
trigger it only pads the value you just picked. Every list keeps it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DBnE22R8HET4djqk1v5F41
---
 .../theme-studio/ThemeStudioControlsDefaults.vue   |  4 +++-
 .../theme-studio/ThemeStudioDefaultSelect.vue      |  9 +++++----
 .../theme-studio/ThemeStudioFontPicker.vue         |  7 +++----
 docs/app/composables/useStudioIcons.ts             | 14 +++-----------
 docs/app/composables/useTheme.ts                   | 11 ++++++++++-
 5 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControlsDefaults.vue b/docs/app/components/theme-studio/ThemeStudioControlsDefaults.vue
index 432ca12f55..4f5fbe4842 100644
--- a/docs/app/components/theme-studio/ThemeStudioControlsDefaults.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControlsDefaults.vue
@@ -115,7 +115,9 @@ const groupColors = Object.fromEntries(variantGroupFields.map(field => [field.ke
                 :ui="{ label: 'flex-1 text-left' }"
                 :aria-label="`${field.label} variant`"
               >
-                {{ field.items.find(item => item.value === (groupVariants[field.key].value === 'default' ? field.stock : groupVariants[field.key].value))?.label }}<span v-if="groupVariants[field.key].value === 'default'" class="text-dimmed font-normal">&nbsp;(Default)</span>
+                <!-- the tag stays in the grid below, where it names the stock
+                     option; here it only pads the value you picked -->
+                {{ field.items.find(item => item.value === (groupVariants[field.key].value === 'default' ? field.stock : groupVariants[field.key].value))?.label }}
               </UButton>
 
               <template #content>
diff --git a/docs/app/components/theme-studio/ThemeStudioDefaultSelect.vue b/docs/app/components/theme-studio/ThemeStudioDefaultSelect.vue
index cc1c611028..49120d36a3 100644
--- a/docs/app/components/theme-studio/ThemeStudioDefaultSelect.vue
+++ b/docs/app/components/theme-studio/ThemeStudioDefaultSelect.vue
@@ -2,9 +2,10 @@
 import type { ChipProps } from '@nuxt/ui'
 
 /**
- * A USelect whose stock choice is deduped into a single tagged entry —
- * the item carrying `defaultTag` renders a muted "(Default)" suffix in
- * both the trigger and the list.
+ * A USelect whose stock choice is deduped into a single tagged entry — the
+ * item carrying `defaultTag` renders a muted "(Default)" suffix in the LIST,
+ * where it tells you which option is the stock one. The trigger shows the
+ * plain label: there it only lengthens the value you already picked.
  */
 export interface DefaultSelectItem {
   label: string
@@ -44,7 +45,7 @@ function asItem(item: unknown) {
     </template>
 
     <template #default>
-      {{ selected?.label }}<span v-if="selected?.defaultTag" class="text-dimmed">&nbsp;(Default)</span>
+      {{ selected?.label }}
     </template>
 
     <template #item-label="{ item }">
diff --git a/docs/app/components/theme-studio/ThemeStudioFontPicker.vue b/docs/app/components/theme-studio/ThemeStudioFontPicker.vue
index 344543400f..0df00e1ab1 100644
--- a/docs/app/components/theme-studio/ThemeStudioFontPicker.vue
+++ b/docs/app/components/theme-studio/ThemeStudioFontPicker.vue
@@ -80,10 +80,9 @@ const emptyLabel = computed(() => {
       :ui="{ label: 'flex-1 min-w-0 text-left truncate' }"
       :aria-label="ariaLabel"
     >
-      <span
-        class="truncate"
-        :style="model === 'inherit' ? undefined : { fontFamily: `'${model}', sans-serif` }"
-      >{{ model === 'inherit' ? 'Inherit base' : model }}</span>
+      <!-- no inline family: the page already renders in the picked font, so
+           the trigger inherits it. The rows below still set their own. -->
+      <span class="truncate">{{ model === 'inherit' ? 'Inherit base' : model }}</span>
     </UButton>
 
     <template #content>
diff --git a/docs/app/composables/useStudioIcons.ts b/docs/app/composables/useStudioIcons.ts
index 6768c8b458..165ef07f6c 100644
--- a/docs/app/composables/useStudioIcons.ts
+++ b/docs/app/composables/useStudioIcons.ts
@@ -9,18 +9,10 @@ import { studioIcons, STUDIO_EXTRA_DEFAULTS, studioExtraOverrides } from '../uti
  * directly in both script and templates.
  */
 export function useStudioIcons() {
+  // `icon` already reports the stock pack until mounted (see useTheme), so the
+  // chrome inherits that hydration-safety for free.
   const { icon } = useTheme()
-  // The pack is client-only state, so rendering it straight away puts the
-  // FIRST client render at odds with the server's lucide — and Vue only warns
-  // about a mismatched class, it doesn't patch it. The chrome would then keep
-  // the server's glyphs until something else forced a re-render, which is why
-  // a persisted pack survived a reload everywhere except here. Resolving after
-  // mount agrees with SSR first, so the swap is a real update.
-  const mounted = ref(false)
-  onMounted(() => (mounted.value = true))
-  return toReactive(computed(() => (mounted.value
-    ? studioIcons[icon.value as keyof typeof studioIcons] ?? studioIcons.lucide
-    : studioIcons.lucide)))
+  return toReactive(computed(() => studioIcons[icon.value as keyof typeof studioIcons] ?? studioIcons.lucide))
 }
 
 /**
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 31d11fd564..54477464fc 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -242,9 +242,18 @@ export function useTheme() {
     icon: 'i-tabler-brand-tabler',
     value: 'tabler'
   }]
+  // The saved pack is client-only, so anything rendered FROM it — the studio
+  // chrome, a picker's own brand glyph — would differ from the server on the
+  // first client render, and Vue only warns about a mismatched class, it never
+  // patches it. Reporting the stock pack until mounted keeps that first render
+  // honest; the flip afterwards is an ordinary update, which does repaint.
+  // Writes are unaffected, and `_iconSet` stays ungated for dirty checks.
+  const iconMounted = ref(false)
+  onMounted(() => (iconMounted.value = true))
+
   const icon = computed({
     get() {
-      return _iconSet.value
+      return iconMounted.value ? _iconSet.value : 'lucide'
     },
     set(option) {
       _iconSet.value = option

From 7a8dddfab6dc470d1b28b90941460973e46deb8d Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 2 Aug 2026 03:22:54 +0200
Subject: [PATCH 182/185] feat(theme-studio): Options panel with a pack-aware
 icon, accented triggers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

"Style" becomes "Options" — the panel holds type, scale and per-component
defaults as well as the treatments — and gains a leading glyph. That glyph
joins the studioIcons table so it skins with the applied pack like the
rest of the chrome; all nine names verified against the Iconify API.

Picker triggers accent their leading icon with text-primary, the
treatment upstream's theme picker already used, so the toolbar's four
controls read as a set. Colors keeps its swatch dots instead.

Also the real truncation fix: `ui.label` was never reaching these
triggers at all. UButton only applies it to the span it renders for the
`label` PROP, and both pickers pass their text through the default slot,
so the classes landed on nothing and a long name — "Material Symbols" —
wrapped to two lines. They now carry flex-1/min-w-0/truncate on their own
span, which is why ThemeStudioFontPicker appeared to work all along.

Includes the toolbar width tuning from the working tree.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DBnE22R8HET4djqk1v5F41
---
 .../theme-studio/ThemeStudioFontPicker.vue    |  8 +++++---
 .../theme-studio/ThemeStudioListPicker.vue    | 11 ++++++----
 .../theme-studio/ThemeStudioPresetMenu.vue    |  1 +
 docs/app/pages/theme.vue                      | 15 +++++++++-----
 docs/app/utils/theme.ts                       | 20 ++++++++++---------
 5 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioFontPicker.vue b/docs/app/components/theme-studio/ThemeStudioFontPicker.vue
index 0df00e1ab1..994c7f8fae 100644
--- a/docs/app/components/theme-studio/ThemeStudioFontPicker.vue
+++ b/docs/app/components/theme-studio/ThemeStudioFontPicker.vue
@@ -77,12 +77,14 @@ const emptyLabel = computed(() => {
       block
       :icon="icon"
       trailing-icon="i-lucide-chevron-down"
-      :ui="{ label: 'flex-1 min-w-0 text-left truncate' }"
+      :ui="{ leadingIcon: 'text-primary' }"
       :aria-label="ariaLabel"
     >
-      <!-- no inline family: the page already renders in the picked font, so
+      <!-- Classes here rather than `ui.label` — UButton only applies that to
+           the span it renders for the `label` PROP, never a default slot.
+           No inline family: the page already renders in the picked font, so
            the trigger inherits it. The rows below still set their own. -->
-      <span class="truncate">{{ model === 'inherit' ? 'Inherit base' : model }}</span>
+      <span class="flex-1 min-w-0 text-left truncate">{{ model === 'inherit' ? 'Inherit base' : model }}</span>
     </UButton>
 
     <template #content>
diff --git a/docs/app/components/theme-studio/ThemeStudioListPicker.vue b/docs/app/components/theme-studio/ThemeStudioListPicker.vue
index b5e092864a..2a6fc8fb6c 100644
--- a/docs/app/components/theme-studio/ThemeStudioListPicker.vue
+++ b/docs/app/components/theme-studio/ThemeStudioListPicker.vue
@@ -35,12 +35,15 @@ const selected = computed(() => props.items.find(item => item.value === model.va
       block
       :icon="icon"
       trailing-icon="i-lucide-chevron-down"
-      :ui="{ label: 'flex-1 min-w-0 text-left truncate' }"
+      :ui="{ leadingIcon: 'text-primary' }"
       :aria-label="ariaLabel"
     >
-      <slot name="trigger" :selected="selected">
-        {{ selected?.label }}
-      </slot>
+      <!-- The classes live on this span, not `ui.label`: UButton only applies
+           that to the span it renders for the `label` PROP, so a default-slot
+           trigger never sees it and a long name wraps instead of clipping. -->
+      <span class="flex-1 min-w-0 text-left truncate">
+        <slot name="trigger" :selected="selected">{{ selected?.label }}</slot>
+      </span>
     </UButton>
 
     <template #content>
diff --git a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
index efca31f642..4b61a7ca40 100644
--- a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
@@ -109,6 +109,7 @@ const presetLabel = computed(() => {
         variant="subtle"
         :size="size"
         block
+        :ui="{ leadingIcon: 'text-primary' }"
       />
 
       <template #content>
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 4c428baef3..dbb63e6fec 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -112,9 +112,11 @@ onUnmounted(() => {
   capture(snapshot())
 })
 
+// `style` stays the doc/section key; the label is what people read, and
+// "Options" is honest about a panel holding type, scale and defaults too.
 const settingGroups = [
   { label: 'Colors', value: 'colors' },
-  { label: 'Style', value: 'style' }
+  { label: 'Options', value: 'style' }
 ] as const
 
 // Fullscreen reveal via mousemove, not a hover overlay (it would eat clicks on
@@ -178,7 +180,7 @@ const shareMode = ref<'import' | 'export'>('export')
               toolbarPinned ? 'translate-y-0' : 'translate-y-[calc(100%+6px)] group-hover:translate-y-0 group-focus-within:translate-y-0'
             ] : 'border-t border-default'"
           >
-            <ThemeStudioPresetMenu v-model:open="openPanels.presets" keep-panels class="w-56 shrink-0" />
+            <ThemeStudioPresetMenu v-model:open="openPanels.presets" keep-panels class="w-52 shrink-0" />
 
             <UPopover
               v-for="settingGroup in settingGroups"
@@ -191,12 +193,15 @@ const shareMode = ref<'import' | 'export'>('export')
                   :label="settingGroup.label"
                   color="neutral"
                   variant="subtle"
+                  :icon="settingGroup.value === 'colors' ? undefined : studioIcons.options"
                   :trailing-icon="appConfig.ui.icons.chevronDown"
+                  :ui="{ leadingIcon: 'text-primary' }"
                 >
+                  <!-- Colors leads with its own swatches instead of a glyph -->
                   <template v-if="settingGroup.value === 'colors'" #leading>
                     <!-- overlapped like an avatar stack; the ring is the
                          button's own surface, so it cuts rather than outlines -->
-                    <span class="flex items-center -space-x-1">
+                    <span class="flex items-center -space-x-0.5">
                       <!-- black-as-primary has no ramp variable to point at -->
                       <span
                         v-for="(dot, index) in colorDots"
@@ -219,7 +224,7 @@ const shareMode = ref<'import' | 'export'>('export')
                  the two people reach for most, and the pickers preview
                  themselves, so seeing them costs no clicks. The wrappers
                  carry the width — UPopover's root renders no element. -->
-            <div class="w-48 shrink-0" data-keep-panels>
+            <div class="w-40 shrink-0" data-keep-panels>
               <ThemeStudioFontPicker
                 v-model="font"
                 :curated="fonts"
@@ -230,7 +235,7 @@ const shareMode = ref<'import' | 'export'>('export')
               />
             </div>
 
-            <div class="w-40 shrink-0" data-keep-panels>
+            <div class="w-32 shrink-0" data-keep-panels>
               <ThemeStudioListPicker
                 v-model="iconSet"
                 :items="icons"
diff --git a/docs/app/utils/theme.ts b/docs/app/utils/theme.ts
index 3cc47e08a4..1c3551c6eb 100644
--- a/docs/app/utils/theme.ts
+++ b/docs/app/utils/theme.ts
@@ -465,20 +465,22 @@ export const studioIcons: Record<ThemeIcons, {
   assistant: string
   /** Theme-picker + preset-menu button. */
   themes: string
+  /** The studio toolbar's Options panel trigger. */
+  options: string
   /** Preset-menu randomize die. Packs without a die use their shuffle glyph. */
   dice: string
 }> = {
-  lucide: { undo: 'i-lucide-undo-2', redo: 'i-lucide-redo-2', reset: 'i-lucide-rotate-ccw', export: 'i-lucide-download', fullscreen: 'i-lucide-maximize', exitFullscreen: 'i-lucide-minimize', assistant: 'i-lucide-bot-message-square', themes: 'i-lucide-swatch-book', dice: 'i-lucide-dices' },
-  bootstrap: { undo: 'i-bi-arrow-90deg-left', redo: 'i-bi-arrow-90deg-right', reset: 'i-bi-arrow-counterclockwise', export: 'i-bi-download', fullscreen: 'i-bi-fullscreen', exitFullscreen: 'i-bi-fullscreen-exit', assistant: 'i-bi-robot', themes: 'i-bi-palette', dice: 'i-bi-dice-5' },
-  heroicons: { undo: 'i-heroicons-arrow-uturn-left', redo: 'i-heroicons-arrow-uturn-right', reset: 'i-heroicons-arrow-path', export: 'i-heroicons-arrow-down-tray', fullscreen: 'i-heroicons-arrows-pointing-out', exitFullscreen: 'i-heroicons-arrows-pointing-in', assistant: 'i-heroicons-sparkles', themes: 'i-heroicons-swatch', dice: 'i-heroicons-arrows-right-left' },
-  iconoir: { undo: 'i-iconoir-undo', redo: 'i-iconoir-redo', reset: 'i-iconoir-refresh-double', export: 'i-iconoir-download', fullscreen: 'i-iconoir-expand', exitFullscreen: 'i-iconoir-collapse', assistant: 'i-iconoir-magic-wand', themes: 'i-iconoir-palette', dice: 'i-iconoir-shuffle' },
-  material: { undo: 'i-material-symbols-undo', redo: 'i-material-symbols-redo', reset: 'i-material-symbols-refresh', export: 'i-material-symbols-download', fullscreen: 'i-material-symbols-fullscreen', exitFullscreen: 'i-material-symbols-fullscreen-exit', assistant: 'i-material-symbols-robot', themes: 'i-material-symbols-palette', dice: 'i-material-symbols-shuffle' },
-  phosphor: { undo: 'i-ph-arrow-arc-left', redo: 'i-ph-arrow-arc-right', reset: 'i-ph-arrow-counter-clockwise', export: 'i-ph-download', fullscreen: 'i-ph-arrows-out', exitFullscreen: 'i-ph-arrows-in', assistant: 'i-ph-robot', themes: 'i-ph-palette', dice: 'i-ph-shuffle' },
-  remix: { undo: 'i-ri-arrow-go-back-line', redo: 'i-ri-arrow-go-forward-line', reset: 'i-ri-restart-line', export: 'i-ri-download-line', fullscreen: 'i-ri-fullscreen-line', exitFullscreen: 'i-ri-fullscreen-exit-line', assistant: 'i-ri-robot-2-line', themes: 'i-ri-palette-line', dice: 'i-ri-dice-line' },
-  tabler: { undo: 'i-tabler-arrow-back-up', redo: 'i-tabler-arrow-forward-up', reset: 'i-tabler-refresh', export: 'i-tabler-download', fullscreen: 'i-tabler-maximize', exitFullscreen: 'i-tabler-minimize', assistant: 'i-tabler-robot', themes: 'i-tabler-palette', dice: 'i-tabler-dice' },
+  lucide: { undo: 'i-lucide-undo-2', redo: 'i-lucide-redo-2', reset: 'i-lucide-rotate-ccw', export: 'i-lucide-download', fullscreen: 'i-lucide-maximize', exitFullscreen: 'i-lucide-minimize', assistant: 'i-lucide-bot-message-square', themes: 'i-lucide-swatch-book', options: 'i-lucide-sliders-horizontal', dice: 'i-lucide-dices' },
+  bootstrap: { undo: 'i-bi-arrow-90deg-left', redo: 'i-bi-arrow-90deg-right', reset: 'i-bi-arrow-counterclockwise', export: 'i-bi-download', fullscreen: 'i-bi-fullscreen', exitFullscreen: 'i-bi-fullscreen-exit', assistant: 'i-bi-robot', themes: 'i-bi-palette', options: 'i-bi-sliders', dice: 'i-bi-dice-5' },
+  heroicons: { undo: 'i-heroicons-arrow-uturn-left', redo: 'i-heroicons-arrow-uturn-right', reset: 'i-heroicons-arrow-path', export: 'i-heroicons-arrow-down-tray', fullscreen: 'i-heroicons-arrows-pointing-out', exitFullscreen: 'i-heroicons-arrows-pointing-in', assistant: 'i-heroicons-sparkles', themes: 'i-heroicons-swatch', options: 'i-heroicons-adjustments-horizontal', dice: 'i-heroicons-arrows-right-left' },
+  iconoir: { undo: 'i-iconoir-undo', redo: 'i-iconoir-redo', reset: 'i-iconoir-refresh-double', export: 'i-iconoir-download', fullscreen: 'i-iconoir-expand', exitFullscreen: 'i-iconoir-collapse', assistant: 'i-iconoir-magic-wand', themes: 'i-iconoir-palette', options: 'i-iconoir-settings', dice: 'i-iconoir-shuffle' },
+  material: { undo: 'i-material-symbols-undo', redo: 'i-material-symbols-redo', reset: 'i-material-symbols-refresh', export: 'i-material-symbols-download', fullscreen: 'i-material-symbols-fullscreen', exitFullscreen: 'i-material-symbols-fullscreen-exit', assistant: 'i-material-symbols-robot', themes: 'i-material-symbols-palette', options: 'i-material-symbols-tune', dice: 'i-material-symbols-shuffle' },
+  phosphor: { undo: 'i-ph-arrow-arc-left', redo: 'i-ph-arrow-arc-right', reset: 'i-ph-arrow-counter-clockwise', export: 'i-ph-download', fullscreen: 'i-ph-arrows-out', exitFullscreen: 'i-ph-arrows-in', assistant: 'i-ph-robot', themes: 'i-ph-palette', options: 'i-ph-sliders-horizontal', dice: 'i-ph-shuffle' },
+  remix: { undo: 'i-ri-arrow-go-back-line', redo: 'i-ri-arrow-go-forward-line', reset: 'i-ri-restart-line', export: 'i-ri-download-line', fullscreen: 'i-ri-fullscreen-line', exitFullscreen: 'i-ri-fullscreen-exit-line', assistant: 'i-ri-robot-2-line', themes: 'i-ri-palette-line', options: 'i-ri-equalizer-line', dice: 'i-ri-dice-line' },
+  tabler: { undo: 'i-tabler-arrow-back-up', redo: 'i-tabler-arrow-forward-up', reset: 'i-tabler-refresh', export: 'i-tabler-download', fullscreen: 'i-tabler-maximize', exitFullscreen: 'i-tabler-minimize', assistant: 'i-tabler-robot', themes: 'i-tabler-palette', options: 'i-tabler-adjustments-horizontal', dice: 'i-tabler-dice' },
   // Pixel pack has no `themes`/`palette` glyph, so `colors-swatch` stands in
   // for the swatch-book.
-  pixelarticons: { undo: 'i-pixelarticons-undo', redo: 'i-pixelarticons-redo', reset: 'i-pixelarticons-reload', export: 'i-pixelarticons-download', fullscreen: 'i-pixelarticons-viewport-wide', exitFullscreen: 'i-pixelarticons-viewport-narrow', assistant: 'i-pixelarticons-robot', themes: 'i-pixelarticons-colors-swatch', dice: 'i-pixelarticons-dice' }
+  pixelarticons: { undo: 'i-pixelarticons-undo', redo: 'i-pixelarticons-redo', reset: 'i-pixelarticons-reload', export: 'i-pixelarticons-download', fullscreen: 'i-pixelarticons-viewport-wide', exitFullscreen: 'i-pixelarticons-viewport-narrow', assistant: 'i-pixelarticons-robot', themes: 'i-pixelarticons-colors-swatch', options: 'i-pixelarticons-sliders', dice: 'i-pixelarticons-dice' }
 }
 
 /**

From 0ccf22b27de3467291cf8e66c0421a5381088965 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 2 Aug 2026 03:27:39 +0200
Subject: [PATCH 183/185] refactor(theme-studio): preset button wears its
 preset; toolbar sheds the pickers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The preset trigger now shows the applied preset's own glyph — the same
one its row wears in the listbox, so 8-bit gets the space invader — and
keeps the swatch book for a theme with no preset behind it (and before
mount, where the pack is still client-only). It's also the only trigger
with an accented leading icon now; font, icons and Options go back to
inheriting, so the accent points at one thing.

Font and icons leave the /theme toolbar. They stay in the header popover,
where the quick knobs live, and in the Options panel's own Font and Icons
sections — the toolbar was carrying a third copy. Their `size` prop goes
with them: nothing passed it once the toolbar stopped.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DBnE22R8HET4djqk1v5F41
---
 .../theme-studio/ThemeStudioFontPicker.vue    | 11 ++---
 .../theme-studio/ThemeStudioListPicker.vue    | 11 ++---
 .../theme-studio/ThemeStudioPresetMenu.vue    | 15 +++++--
 docs/app/pages/theme.vue                      | 44 +------------------
 4 files changed, 19 insertions(+), 62 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioFontPicker.vue b/docs/app/components/theme-studio/ThemeStudioFontPicker.vue
index 994c7f8fae..c763562dcd 100644
--- a/docs/app/components/theme-studio/ThemeStudioFontPicker.vue
+++ b/docs/app/components/theme-studio/ThemeStudioFontPicker.vue
@@ -7,7 +7,7 @@
  */
 import { watchDebounced } from '@vueuse/core'
 
-const props = withDefaults(defineProps<{
+const props = defineProps<{
   /** The curated families offered before the user searches. */
   curated: readonly string[]
   /** The value that wears the (Default) tag. */
@@ -16,11 +16,7 @@ const props = withDefaults(defineProps<{
   inherit?: boolean
   icon?: string
   ariaLabel?: string
-  /** Trigger size — panels use the default, the studio toolbar goes bigger. */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-}>(), {
-  size: 'sm'
-})
+}>()
 
 const model = defineModel<string>({ required: true })
 
@@ -73,11 +69,10 @@ const emptyLabel = computed(() => {
     <UButton
       color="neutral"
       variant="subtle"
-      :size="size"
+      size="sm"
       block
       :icon="icon"
       trailing-icon="i-lucide-chevron-down"
-      :ui="{ leadingIcon: 'text-primary' }"
       :aria-label="ariaLabel"
     >
       <!-- Classes here rather than `ui.label` — UButton only applies that to
diff --git a/docs/app/components/theme-studio/ThemeStudioListPicker.vue b/docs/app/components/theme-studio/ThemeStudioListPicker.vue
index 2a6fc8fb6c..d03acb3816 100644
--- a/docs/app/components/theme-studio/ThemeStudioListPicker.vue
+++ b/docs/app/components/theme-studio/ThemeStudioListPicker.vue
@@ -10,15 +10,11 @@ export interface ListPickerItem {
   [key: string]: unknown
 }
 
-const props = withDefaults(defineProps<{
+const props = defineProps<{
   items: ListPickerItem[]
   icon?: string
   ariaLabel?: string
-  /** Trigger size — panels use the default, the studio toolbar goes bigger. */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-}>(), {
-  size: 'sm'
-})
+}>()
 
 const model = defineModel<string>({ required: true })
 
@@ -31,11 +27,10 @@ const selected = computed(() => props.items.find(item => item.value === model.va
     <UButton
       color="neutral"
       variant="subtle"
-      :size="size"
+      size="sm"
       block
       :icon="icon"
       trailing-icon="i-lucide-chevron-down"
-      :ui="{ leadingIcon: 'text-primary' }"
       :aria-label="ariaLabel"
     >
       <!-- The classes live on this span, not `ui.label`: UButton only applies
diff --git a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
index 4b61a7ca40..a293208e66 100644
--- a/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
+++ b/docs/app/components/theme-studio/ThemeStudioPresetMenu.vue
@@ -87,11 +87,20 @@ onUnmounted(clearRollTimers)
 
 // Edits deliberately don't clear the preset name (the dirty dots carry
 // divergence); 'Custom' only when preset-less but diverged from stock.
+const activeEntry = computed(() => (mounted.value
+  ? presets.find(preset => preset.id === selectedPreset.value)
+  : undefined))
+
 const presetLabel = computed(() => {
   if (!mounted.value) return 'Presets'
-  const active = presets.find(preset => preset.id === selectedPreset.value)
-  return active ? active.name : 'Custom'
+  return activeEntry.value ? activeEntry.value.name : 'Custom'
 })
+
+/**
+ * The same glyph its row wears in the listbox; the swatch book stands in for
+ * a theme with no preset behind it (and before mount).
+ */
+const presetIcon = computed(() => activeEntry.value?.icon ?? studioIcons.themes)
 </script>
 
 <template>
@@ -103,7 +112,7 @@ const presetLabel = computed(() => {
     >
       <UButton
         :label="presetLabel"
-        :icon="studioIcons.themes"
+        :icon="presetIcon"
         :trailing-icon="appConfig.ui.icons.chevronDown"
         color="neutral"
         variant="subtle"
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index dbb63e6fec..e7489d3138 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { iconSetSamples } from '../utils/theme'
-
 const { track } = useAnalytics()
-const { resetTheme, icon: iconSet, fonts, font, icons, blackAsPrimary } = useTheme()
+const { resetTheme, icon: iconSet, blackAsPrimary } = useTheme()
 
 // Toolbar skins to the applied icon pack; import/chevron reuse the standard
 // semantic keys off appConfig.ui.icons.
@@ -24,8 +22,6 @@ onMounted(() => {
   mounted.value = true
   track('Theme Studio Opened')
   align(snapshot())
-  // the toolbar's font rows render in their own faces
-  loadFontPreviews(fonts)
 })
 
 // Debounced capture folds slider-drag bursts into single history steps; the
@@ -195,7 +191,6 @@ const shareMode = ref<'import' | 'export'>('export')
                   variant="subtle"
                   :icon="settingGroup.value === 'colors' ? undefined : studioIcons.options"
                   :trailing-icon="appConfig.ui.icons.chevronDown"
-                  :ui="{ leadingIcon: 'text-primary' }"
                 >
                   <!-- Colors leads with its own swatches instead of a glyph -->
                   <template v-if="settingGroup.value === 'colors'" #leading>
@@ -220,43 +215,6 @@ const shareMode = ref<'import' | 'export'>('export')
               </template>
             </UPopover>
 
-            <!-- Type and icons ride the toolbar rather than a panel: they're
-                 the two people reach for most, and the pickers preview
-                 themselves, so seeing them costs no clicks. The wrappers
-                 carry the width — UPopover's root renders no element. -->
-            <div class="w-40 shrink-0" data-keep-panels>
-              <ThemeStudioFontPicker
-                v-model="font"
-                :curated="fonts"
-                default-value="Public Sans"
-                icon="i-lucide-type"
-                size="md"
-                aria-label="Font"
-              />
-            </div>
-
-            <div class="w-32 shrink-0" data-keep-panels>
-              <ThemeStudioListPicker
-                v-model="iconSet"
-                :items="icons"
-                :icon="icons.find(entry => entry.value === iconSet)?.icon"
-                size="md"
-                aria-label="Icon set"
-              >
-                <!-- every set previews a strip of its own glyphs -->
-                <template #item-description="{ item }">
-                  <span class="flex items-center gap-1.5 pt-0.5">
-                    <UIcon
-                      v-for="name in iconSetSamples(item.value)"
-                      :key="name"
-                      :name="name"
-                      class="size-3.5 text-muted"
-                    />
-                  </span>
-                </template>
-              </ThemeStudioListPicker>
-            </div>
-
             <span class="flex-1" />
 
             <!-- desktop's switcher lives in the header; this one covers

From a2ba282aff8206c8e7216cf646aa90518c04c136 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 2 Aug 2026 03:28:53 +0200
Subject: [PATCH 184/185] fix(theme-studio): adjust UContainer class for
 fullscreen handling

Updated the UContainer class in theme.vue to ensure proper padding when fullscreen is enabled. The change removes redundant padding classes while maintaining responsive design across different screen sizes.
---
 docs/app/pages/theme.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index e7489d3138..53481c4667 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -143,7 +143,7 @@ const shareMode = ref<'import' | 'export'>('export')
 <template>
   <!-- page tint composites on the app root's bg-default (nuxt.config rootAttrs) -->
   <main class="bg-elevated/25">
-    <UContainer :class="fullscreen && 'max-w-none px-0 sm:px-0 lg:px-0'">
+    <UContainer :class="fullscreen && 'max-w-none'" class="px-0 sm:px-0 lg:px-0">
       <!-- structured borders like /releases: border-x rails, no floating card -->
       <div class="flex flex-col w-full bg-default" :class="fullscreen ? 'h-dvh' : 'h-[calc(100dvh-var(--ui-header-height))] border-x border-default'">
         <!-- [contain:paint]: Chromium won't clip nested composited layers by

From 179d17c2086b07ff80d8882189b79876813eb554 Mon Sep 17 00:00:00 2001
From: Mike Newbon <michael.newbon@gmail.com>
Date: Sun, 2 Aug 2026 03:37:39 +0200
Subject: [PATCH 185/185] refactor(theme-studio): Defaults groups reuse the
 static section primitive
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The three groups inside Defaults were hand-rolled markup — a bare label
span and its own spacing — while the aliases nested under Semantic go
through ThemeStudioSection in static mode. Same font and colour, but the
section indents its label px-2 and spaces content pt-2, so the two nested
groups didn't line up with each other.

They now use the same primitive, so a nested group looks like a nested
group wherever it appears.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DBnE22R8HET4djqk1v5F41
---
 .../theme-studio/ThemeStudioControlsDefaults.vue    | 13 +++++++++----
 docs/app/pages/theme.vue                            |  2 +-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/docs/app/components/theme-studio/ThemeStudioControlsDefaults.vue b/docs/app/components/theme-studio/ThemeStudioControlsDefaults.vue
index 4f5fbe4842..9818b9a20f 100644
--- a/docs/app/components/theme-studio/ThemeStudioControlsDefaults.vue
+++ b/docs/app/components/theme-studio/ThemeStudioControlsDefaults.vue
@@ -97,9 +97,14 @@ const groupColors = Object.fromEntries(variantGroupFields.map(field => [field.ke
     :section-key="variantGroupFields.map(field => field.key)"
   >
     <div class="flex flex-col gap-3">
-      <div v-for="field in variantGroupFields" :key="field.key" class="flex flex-col gap-1.5">
-        <span class="text-xs font-medium text-muted select-none">{{ field.label }}</span>
-
+      <!-- Static sections, like the aliases nested under Semantic — same
+           primitive, so the group labels indent and space identically. -->
+      <ThemeStudioSection
+        v-for="field in variantGroupFields"
+        :key="field.key"
+        :label="field.label"
+        :collapsible="false"
+      >
         <div class="flex flex-col gap-1.5">
           <div class="flex items-center gap-2">
             <span class="text-xs text-muted w-13 shrink-0 select-none">Variant</span>
@@ -160,7 +165,7 @@ const groupColors = Object.fromEntries(variantGroupFields.map(field => [field.ke
             </ThemeStudioDefaultSelect>
           </div>
         </div>
-      </div>
+      </ThemeStudioSection>
     </div>
   </ThemeStudioSection>
 </template>
diff --git a/docs/app/pages/theme.vue b/docs/app/pages/theme.vue
index 53481c4667..097ea4b1f9 100644
--- a/docs/app/pages/theme.vue
+++ b/docs/app/pages/theme.vue
@@ -165,7 +165,7 @@ const shareMode = ref<'import' | 'export'>('export')
         <!-- In fullscreen the toolbar floats over the bottom edge at
              UContainer's own recipe (edges line up with other pages); only
              the strip catches the pointer so the preview stays clickable. -->
-        <div :class="fullscreen ? 'group fixed bottom-0 inset-x-0 z-50 pointer-events-none w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8' : 'shrink-0'">
+        <div :class="fullscreen ? 'group fixed bottom-0 inset-x-0 z-50 pointer-events-none w-full max-w-(--ui-container) mx-auto ' : 'shrink-0'">
           <!-- thin touch affordance only — mouse reveal is proximity-driven -->
           <div v-if="fullscreen" class="absolute bottom-0 inset-x-0 h-2 pointer-events-auto" />