docs(theme): add theme studio

docs/app/app.vue

@@ -1,8 +1,20 @@
 <script setup lang="ts">
 const route = useRoute()
+
 const appConfig = useAppConfig()
 const { style, link, color } = useTheme()
 
+const colorMode = useColorMode()
+
+// Bare `d`, site-wide since the color mode button sits in the header on every
+// page. defineShortcuts disables single-key bindings while an input or a
+// contenteditable is focused, so it never eats a typed 'd'. Reads `.value`,
+// not `.preference`, so toggling out of `system` flips away from what's
+// currently on screen rather than to it.
+defineShortcuts({
+  d: () => (colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark')
+})
+
 const { data: navigation } = await useFetch('/api/navigation.json')
 
 useHead({
@@ -32,6 +44,8 @@ useFaviconFromTheme()
 const { rootNavigation, navigationByFramework } = useNavigation(navigation)
 
 provide('navigation', rootNavigation)
+
+const showLayout = computed(() => !route.path.startsWith('/examples') && route.path !== '/theme')
 </script>
 
 <template>
@@ -40,7 +54,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="showLayout">
           <!-- <Banner /> -->
 
           <Header />
@@ -50,7 +64,7 @@ provide('navigation', rootNavigation)
           <NuxtPage />
         </NuxtLayout>
 
-        <template v-if="!route.path.startsWith('/examples')">
+        <template v-if="showLayout">
           <Footer />
         </template>
       </div>

docs/app/assets/css/main.css

@@ -12,6 +12,10 @@
   --container-8xl: 90rem;
 
   --font-sans: 'Public Sans', sans-serif;
+  /* Tailwind's preflight wires --font-sans and --font-mono itself, nothing
+     consumes --font-serif. Defaulting it to the body stack keeps the heading
+     rule below inert until the studio sets a serif of its own. */
+  --font-serif: var(--font-sans);
 
   --color-green-50: #EFFDF5;
   --color-green-100: #D9FBE8;
@@ -30,6 +34,28 @@
   --ui-container: var(--container-8xl);
 }
 
+/* The live counterpart of the export's heading rule, until v5 ships
+   --ui-font-heading. In `base` so `font-mono` on an h1 still wins. */
+@layer base {
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-serif);
+  }
+}
+
+/* The theme studio floats its preview on a canvas recessed BEHIND the card,
+   so the two modes run opposite ways: a step down from white in light, past
+   --ui-bg in dark. Unlayered, to outrank the bg-default utility the Nuxt root
+   carries, and pointed at the neutral ramp so a themed palette reaches it. */
+body.theme-studio,
+body.theme-studio #__nuxt {
+  background-color: var(--ui-color-neutral-100);
+}
+
+.dark body.theme-studio,
+.dark body.theme-studio #__nuxt {
+  background-color: var(--ui-color-neutral-950);
+}
+
 html[data-framework="nuxt"] .vue-only,
 html[data-framework="vue"] .nuxt-only {
   display: none;

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(' ')

docs/app/components/chat/Chat.vue

@@ -14,6 +14,9 @@ const { open, messages } = useChat()
 const { open: searchOpen } = useContentSearch()
 const { framework } = useFrameworks()
 const { resetTheme, applyThemeSettings, hasCSSChanges, hasConfigChanges } = useTheme()
+// A preset is a whole ThemeDoc, so it rides applyDoc (reset, style axis, class
+// bundle) rather than the settings channel applyTheme uses.
+const { presets, applyPreset } = useThemeStudio()
 
 const hasThemeChanges = computed(() => hasCSSChanges.value || hasConfigChanges.value)
 
@@ -32,6 +35,13 @@ function processThemeToolCalls() {
       if (name === 'applyTheme' && part.input) {
         _themeApplied.add(part.toolCallId)
         applyThemeSettings(part.input as DocsChatTools['applyTheme']['input'])
+      } else if (name === 'applyPreset' && part.input) {
+        _themeApplied.add(part.toolCallId)
+        const { preset: id } = part.input as DocsChatTools['applyPreset']['input']
+        // The model picks from an enum, but a renamed preset in a stale
+        // conversation would still resolve to nothing.
+        const preset = presets.find(entry => entry.id === id)
+        if (preset) applyPreset(preset)
       } else if (name === 'resetTheme') {
         _themeApplied.add(part.toolCallId)
         resetTheme()
@@ -129,6 +139,9 @@ function getToolMessage(state: ToolState, toolName: string, input: Record<string
     'getComponentTheme': `${readVerb} ${upperName(input.componentName || '')} theme`,
     'getThemeGuide': `${readVerb} theme guide`,
     'applyTheme': `${applyVerb} theme changes`,
+    // the preset's own name, upperName is for camelCase component ids and
+    // would render 'nuxt-ui' as 'NuxtUi'
+    'applyPreset': `${applyVerb} ${presets.find(preset => preset.id === input.preset)?.name ?? input.preset} preset`,
     'resetTheme': `${state === 'output-available' ? 'Reset' : 'Resetting'} theme to defaults`
   }[toolName] || `${searchVerb} ${toolName}`
 }
@@ -154,6 +167,7 @@ function getToolIcon(part: ToolPart): string {
     'getComponentTheme': 'i-lucide-file-text',
     'getThemeGuide': 'i-lucide-palette',
     'applyTheme': 'i-lucide-palette',
+    'applyPreset': 'i-lucide-palette',
     'resetTheme': 'i-lucide-palette'
   }
 
@@ -242,7 +256,7 @@ defineShortcuts({
           icon="i-lucide-rotate-ccw"
           color="neutral"
           variant="ghost"
-          @click="resetTheme"
+          @click="resetTheme()"
         />
       </UTooltip>
 

docs/app/components/content/IconsTheme.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import json5 from 'json5'
-import { themeIcons } from '../../utils/theme'
+import { themeIcons } from '../../utils/theme/icons'
 
 const { icon: iconSet } = useTheme()
 

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) {
@@ -39,13 +42,17 @@ function toggleChat() {
         <UButton
           color="neutral"
           variant="ghost"
-          icon="i-lucide-bot-message-square"
+          :icon="studioIcons.assistant"
           aria-label="Ask AI for help"
           @click="toggleChat"
         />
       </UTooltip>
 
-      <ThemePicker />
+      <ThemeStudioPicker />
+
+      <UTooltip text="Color mode">
+        <UColorModeButton variant="ghost" />
+      </UTooltip>
 
       <UTooltip text="Open on GitHub" class="hidden lg:flex">
         <UButton

docs/app/components/playground/Playground.vue

@@ -0,0 +1,96 @@
+<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, the Theme Studio's grid view, laid
+// 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 },
+  { 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 }
+]
+
+// 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>
+  <UScrollArea
+    ref="scrollArea"
+    :items="visibleTiles"
+    :virtualize="{
+      lanes,
+      gap: 16,
+      estimateSize: 360,
+      paddingStart: 24,
+      paddingEnd: 24,
+      overscan: 0,
+      getItemKey: (index: number) => visibleTiles[index]!.name
+    }"
+    class="playground-grid h-full px-4 sm:px-6"
+  >
+    <template #default="{ item }">
+      <PlaygroundCard>
+        <component :is="item.component" />
+      </PlaygroundCard>
+    </template>
+  </UScrollArea>
+</template>

docs/app/components/playground/PlaygroundAnalytics.vue

@@ -0,0 +1,39 @@
+<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>
+
+<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="extra.trendingUp">
+        +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>

docs/app/components/playground/PlaygroundAnnouncement.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+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="appConfig.ui.icons.arrowRight"
+        @click="toast.add({ title: 'Observability Plus' })"
+      />
+    </div>
+  </div>
+</template>