From cba49ae12a662302ecdc2f05e00f85cbb45ca66b Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 11 Feb 2026 22:50:19 -0600
Subject: [PATCH 01/39] docs(editor): add v0 REPL editor page

Vue REPL with Monaco editor, @vuetify/v0 import map,
and fullscreen layout. Initial working layout with
h-screen + absolute positioning for proper sizing.
---
 apps/docs/src/data/editor-defaults.ts | 124 +++++++++++++++++++++++
 apps/docs/src/pages/editor.vue        | 136 ++++++++++++++++++++++++++
 knip.json                             |   4 +
 3 files changed, 264 insertions(+)
 create mode 100644 apps/docs/src/data/editor-defaults.ts
 create mode 100644 apps/docs/src/pages/editor.vue

diff --git a/apps/docs/src/data/editor-defaults.ts b/apps/docs/src/data/editor-defaults.ts
new file mode 100644
index 000000000..1ce728e3d
--- /dev/null
+++ b/apps/docs/src/data/editor-defaults.ts
@@ -0,0 +1,124 @@
+export const DEFAULT_CODE = `<script setup lang="ts">
+  import { createStep } from '@vuetify/v0'
+  import { computed } from 'vue'
+
+  const steps = [
+    { id: 'cart', label: 'Cart', icon: '1' },
+    { id: 'shipping', label: 'Shipping', icon: '2' },
+    { id: 'payment', label: 'Payment', icon: '3', disabled: true },
+    { id: 'review', label: 'Review', icon: '4' },
+    { id: 'confirm', label: 'Confirm', icon: '5' },
+  ]
+
+  const stepper = createStep()
+  stepper.onboard(steps.map((s, i) => ({ id: s.id, value: i, disabled: s.disabled })))
+  stepper.first()
+
+  const currentIndex = computed(() => stepper.selectedIndex.value)
+  const isFirst = computed(() => currentIndex.value === 0)
+  const isLast = computed(() => currentIndex.value === stepper.size - 1)
+</script>
+
+<template>
+  <div style="max-width: 480px; margin: 0 auto; padding: 32px 16px; font-family: sans-serif;">
+    <!-- Stepper Track -->
+    <div style="position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px;">
+      <!-- Background Line -->
+      <div style="position: absolute; top: 20px; left: 0; right: 0; height: 2px; background: #e0e0e0;" />
+
+      <!-- Progress Line -->
+      <div
+        :style="{
+          position: 'absolute',
+          top: '20px',
+          left: 0,
+          height: '2px',
+          background: '#1867c0',
+          transition: 'width 0.4s ease',
+          width: (currentIndex / (steps.length - 1)) * 100 + '%',
+        }"
+      />
+
+      <!-- Steps -->
+      <div
+        v-for="(step, i) in steps"
+        :key="step.id"
+        style="position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; cursor: pointer;"
+        @click="!step.disabled && stepper.select(step.id)"
+      >
+        <div
+          :style="{
+            width: '40px',
+            height: '40px',
+            borderRadius: '50%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '14px',
+            fontWeight: 600,
+            transition: 'all 0.3s',
+            background: i <= currentIndex ? '#1867c0' : '#fff',
+            color: i <= currentIndex ? '#fff' : '#888',
+            border: i <= currentIndex ? 'none' : step.disabled ? '2px dashed #ccc' : '2px solid #e0e0e0',
+            transform: i === currentIndex ? 'scale(1.15)' : 'scale(0.9)',
+            boxShadow: i === currentIndex ? '0 0 0 4px rgba(24, 103, 192, 0.2)' : 'none',
+            opacity: step.disabled ? 0.5 : 1,
+          }"
+        >
+          <span v-if="i < currentIndex">&#10003;</span>
+          <span v-else>{{ step.icon }}</span>
+        </div>
+
+        <span
+          :style="{
+            marginTop: '8px',
+            fontSize: '12px',
+            fontWeight: 500,
+            color: i === currentIndex ? '#1867c0' : '#888',
+            textDecoration: step.disabled ? 'line-through' : 'none',
+            opacity: step.disabled ? 0.5 : 1,
+          }"
+        >
+          {{ step.label }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Controls -->
+    <div style="display: flex; align-items: center; justify-content: center; gap: 8px;">
+      <button
+        :disabled="isFirst"
+        :style="{ padding: '6px 12px', fontSize: '13px', borderRadius: '4px', border: '1px solid #e0e0e0', background: '#fff', cursor: isFirst ? 'not-allowed' : 'pointer', opacity: isFirst ? 0.4 : 1 }"
+        @click="stepper.first()"
+      >
+        First
+      </button>
+      <button
+        :disabled="isFirst"
+        :style="{ padding: '6px 16px', fontSize: '13px', borderRadius: '4px', border: 'none', background: isFirst ? '#e3f2fd' : '#bbdefb', color: '#1867c0', cursor: isFirst ? 'not-allowed' : 'pointer', opacity: isFirst ? 0.4 : 1 }"
+        @click="stepper.prev()"
+      >
+        Prev
+      </button>
+      <button
+        :disabled="isLast"
+        :style="{ padding: '6px 16px', fontSize: '13px', borderRadius: '4px', border: 'none', background: '#1867c0', color: '#fff', cursor: isLast ? 'not-allowed' : 'pointer', opacity: isLast ? 0.4 : 1 }"
+        @click="stepper.next()"
+      >
+        Next
+      </button>
+      <button
+        :disabled="isLast"
+        :style="{ padding: '6px 12px', fontSize: '13px', borderRadius: '4px', border: '1px solid #e0e0e0', background: '#fff', cursor: isLast ? 'not-allowed' : 'pointer', opacity: isLast ? 0.4 : 1 }"
+        @click="stepper.last()"
+      >
+        Last
+      </button>
+    </div>
+
+    <p style="margin-top: 24px; text-align: center; font-size: 12px; color: #888;">
+      Step {{ currentIndex + 1 }} of {{ stepper.size }} · Payment step is disabled (auto-skipped)
+    </p>
+  </div>
+</template>
+`
diff --git a/apps/docs/src/pages/editor.vue b/apps/docs/src/pages/editor.vue
new file mode 100644
index 000000000..2ca4d2479
--- /dev/null
+++ b/apps/docs/src/pages/editor.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+  import { useHead } from '@unhead/vue'
+  import { definePage } from 'unplugin-vue-router/runtime'
+
+  // Framework
+  import { useTheme } from '@vuetify/v0'
+
+  // Utilities
+  import { Repl, useStore, useVueImportMap } from '@vue/repl'
+  import Monaco from '@vue/repl/monaco-editor'
+  import { computed, onMounted, ref, shallowRef } from 'vue'
+  import '@vue/repl/style.css'
+
+  // Data
+  import { DEFAULT_CODE } from '@/data/editor-defaults'
+
+  definePage({
+    meta: {
+      layout: 'fullscreen',
+      level: 1,
+    },
+  })
+
+  useHead({
+    title: 'Editor - Vuetify0',
+    meta: [
+      { key: 'description', name: 'description', content: 'Interactive code editor for @vuetify/v0 composables and components' },
+    ],
+  })
+
+  const theme = useTheme()
+  const isDark = computed(() => theme.isDark.value)
+  const replTheme = computed(() => isDark.value ? 'dark' : 'light')
+
+  const { importMap: builtinImportMap, vueVersion } = useVueImportMap({
+    runtimeDev: 'https://cdn.jsdelivr.net/npm/@vue/runtime-dom/dist/runtime-dom.esm-browser.js',
+    runtimeProd: 'https://cdn.jsdelivr.net/npm/@vue/runtime-dom/dist/runtime-dom.esm-browser.prod.js',
+    serverRenderer: 'https://cdn.jsdelivr.net/npm/@vue/server-renderer/dist/server-renderer.esm-browser.js',
+  })
+
+  const importMap = computed(() => ({
+    imports: {
+      ...builtinImportMap.value?.imports,
+      '@vuetify/v0': 'https://esm.sh/@vuetify/v0',
+    },
+  }))
+
+  const store = useStore({
+    builtinImportMap: importMap,
+    vueVersion,
+    showOutput: ref(true),
+  })
+
+  const isReady = shallowRef(false)
+
+  onMounted(() => {
+    store.setFiles({ 'App.vue': DEFAULT_CODE }, 'App.vue')
+    isReady.value = true
+  })
+</script>
+
+<template>
+  <div class="h-screen flex flex-col">
+    <div class="flex items-center justify-between px-4 py-2 border-b border-divider">
+      <RouterLink
+        class="flex items-center gap-2 text-on-surface no-underline text-sm font-medium"
+        to="/"
+      >
+        <span class="text-lg">←</span>
+        <span>Back</span>
+      </RouterLink>
+
+      <span class="text-sm font-semibold text-on-surface">v0 Editor</span>
+
+      <div class="w-16" />
+    </div>
+
+    <div v-if="isReady" class="editor-repl" :class="{ dark: isDark }">
+      <Repl
+        :auto-resize="true"
+        :clear-console="true"
+        :editor="Monaco"
+        layout="horizontal"
+        :preview-theme="true"
+        :show-compile-output="false"
+        :show-import-map="false"
+        :show-ts-config="false"
+        :store="store"
+        :theme="replTheme"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .editor-repl {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .editor-repl :deep(.vue-repl) {
+    position: absolute;
+    inset: 0;
+    --color-branding: var(--v0-primary);
+    --color-branding-dark: var(--v0-primary);
+  }
+
+  /* Hide file tabs (single file mode) */
+  .editor-repl :deep(.tab-buttons) {
+    display: none !important;
+  }
+
+  /* Hide editor floating toggles (auto-save / show error) */
+  .editor-repl :deep(.editor-floating) {
+    display: none !important;
+  }
+
+  /* Give editor panel more space */
+  .editor-repl :deep(.left) {
+    flex: 1.2 !important;
+  }
+
+  .editor-repl :deep(.right) {
+    flex: 0.8 !important;
+  }
+
+  /* Dark theme overrides for @vue/repl */
+  .editor-repl.dark :deep(.vue-repl) {
+    --bg: #1a1a1a;
+    --bg-soft: #242424;
+    --border: #383838;
+    --text-light: #aaa;
+  }
+</style>
diff --git a/knip.json b/knip.json
index 2b83edcb5..3fb0d7621 100644
--- a/knip.json
+++ b/knip.json
@@ -32,8 +32,12 @@
         "src/components/docs/DocsBrowserSupport.vue",
         "src/skillz/tours/**/index.ts",
         "src/stores/skillz.ts",
+        "src/data/**",
         "src/examples/**"
       ],
+      "ignoreDependencies": [
+        "@vue/repl"
+      ],
       "paths": {
         "@/*": [
           "src/*"

From cb756e8771491761720422906bd9ff3753acef6e Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 12 Feb 2026 11:15:03 -0600
Subject: [PATCH 02/39] docs(editor): add v0 theme and UnoCSS runtime to REPL
 editor

Set up multi-file REPL matching Vuetify Play's v0 template: main.ts
with createThemePlugin, uno.config.ts with presetWind4 runtime and
v0 color token mapping. Updated default example to use UnoCSS utility
classes. Added scrollbar-gutter override for fullscreen layout.
---
 apps/docs/src/data/editor-defaults.ts | 183 +++++++++++++++++++-------
 apps/docs/src/layouts/fullscreen.vue  |  91 +------------
 apps/docs/src/pages/editor.vue        | 117 +++++++++-------
 3 files changed, 214 insertions(+), 177 deletions(-)

diff --git a/apps/docs/src/data/editor-defaults.ts b/apps/docs/src/data/editor-defaults.ts
index 1ce728e3d..16bbfb244 100644
--- a/apps/docs/src/data/editor-defaults.ts
+++ b/apps/docs/src/data/editor-defaults.ts
@@ -1,3 +1,119 @@
+// ── Template files (matching Vuetify Play's v0 template) ────────────────
+
+export const MAIN_TS = `import { createApp } from 'vue'
+import App from './App.vue'
+import { createThemePlugin } from '@vuetify/v0'
+import './uno.config.ts'
+
+const theme = createThemePlugin({
+  default: 'light',
+  themes: {
+    light: {
+      dark: false,
+      colors: {
+        'primary': '#3b82f6',
+        'secondary': '#64748b',
+        'accent': '#6366f1',
+        'error': '#ef4444',
+        'info': '#1867c0',
+        'success': '#22c55e',
+        'warning': '#f59e0b',
+        'background': '#ffffff',
+        'surface': '#ffffff',
+        'surface-tint': '#f5f5f5',
+        'surface-variant': '#e8e8e8',
+        'divider': '#e0e0e0',
+        'on-primary': '#ffffff',
+        'on-secondary': '#ffffff',
+        'on-accent': '#1a1a1a',
+        'on-error': '#ffffff',
+        'on-info': '#ffffff',
+        'on-success': '#1a1a1a',
+        'on-warning': '#1a1a1a',
+        'on-background': '#212121',
+        'on-surface': '#212121',
+        'on-surface-variant': '#666666',
+      },
+    },
+    dark: {
+      dark: true,
+      colors: {
+        'primary': '#c4b5fd',
+        'secondary': '#94a3b8',
+        'accent': '#c084fc',
+        'error': '#f87171',
+        'info': '#38bdf8',
+        'success': '#4ade80',
+        'warning': '#fb923c',
+        'background': '#121212',
+        'surface': '#1a1a1a',
+        'surface-tint': '#2a2a2a',
+        'surface-variant': '#1e1e1e',
+        'divider': '#404040',
+        'on-primary': '#1a1a1a',
+        'on-secondary': '#ffffff',
+        'on-accent': '#ffffff',
+        'on-error': '#1a1a1a',
+        'on-info': '#1a1a1a',
+        'on-success': '#1a1a1a',
+        'on-warning': '#1a1a1a',
+        'on-background': '#e0e0e0',
+        'on-surface': '#e0e0e0',
+        'on-surface-variant': '#a0a0a0',
+      },
+    },
+  },
+})
+
+const app = createApp(App)
+app.use(theme)
+app.mount('#app')
+`
+
+export const UNO_CONFIG_TS = `// @ts-expect-error - esm.sh import
+import defineConfig from 'https://esm.sh/@unocss/runtime'
+// @ts-expect-error - esm.sh import
+import presetWind4 from 'https://esm.sh/@unocss/preset-wind4'
+
+defineConfig({
+  defaults: {
+    presets: [presetWind4()],
+    theme: {
+      colors: {
+        'primary': 'var(--v0-primary)',
+        'secondary': 'var(--v0-secondary)',
+        'accent': 'var(--v0-accent)',
+        'error': 'var(--v0-error)',
+        'info': 'var(--v0-info)',
+        'success': 'var(--v0-success)',
+        'warning': 'var(--v0-warning)',
+        'background': 'var(--v0-background)',
+        'surface': 'var(--v0-surface)',
+        'surface-tint': 'var(--v0-surface-tint)',
+        'surface-variant': 'var(--v0-surface-variant)',
+        'divider': 'var(--v0-divider)',
+        'pre': 'var(--v0-pre)',
+        'on-primary': 'var(--v0-on-primary)',
+        'on-secondary': 'var(--v0-on-secondary)',
+        'on-accent': 'var(--v0-on-accent)',
+        'on-error': 'var(--v0-on-error)',
+        'on-info': 'var(--v0-on-info)',
+        'on-success': 'var(--v0-on-success)',
+        'on-warning': 'var(--v0-on-warning)',
+        'on-background': 'var(--v0-on-background)',
+        'on-surface': 'var(--v0-on-surface)',
+        'on-surface-variant': 'var(--v0-on-surface-variant)',
+      },
+      borderColor: {
+        DEFAULT: 'var(--v0-divider)',
+      },
+    },
+  },
+})
+`
+
+// ── Default App.vue ─────────────────────────────────────────────────────
+
 export const DEFAULT_CODE = `<script setup lang="ts">
   import { createStep } from '@vuetify/v0'
   import { computed } from 'vue'
@@ -20,64 +136,43 @@ export const DEFAULT_CODE = `<script setup lang="ts">
 </script>
 
 <template>
-  <div style="max-width: 480px; margin: 0 auto; padding: 32px 16px; font-family: sans-serif;">
+  <div class="max-w-md mx-auto p-8 font-sans min-h-screen bg-background text-on-background">
     <!-- Stepper Track -->
-    <div style="position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px;">
+    <div class="relative flex items-center justify-between mb-12">
       <!-- Background Line -->
-      <div style="position: absolute; top: 20px; left: 0; right: 0; height: 2px; background: #e0e0e0;" />
+      <div class="absolute top-5 left-0 right-0 h-0.5 bg-divider" />
 
       <!-- Progress Line -->
       <div
-        :style="{
-          position: 'absolute',
-          top: '20px',
-          left: 0,
-          height: '2px',
-          background: '#1867c0',
-          transition: 'width 0.4s ease',
-          width: (currentIndex / (steps.length - 1)) * 100 + '%',
-        }"
+        class="absolute top-5 left-0 h-0.5 bg-primary transition-all duration-400"
+        :style="{ width: (currentIndex / (steps.length - 1)) * 100 + '%' }"
       />
 
       <!-- Steps -->
       <div
         v-for="(step, i) in steps"
         :key="step.id"
-        style="position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; cursor: pointer;"
+        class="relative z-1 flex flex-col items-center cursor-pointer"
         @click="!step.disabled && stepper.select(step.id)"
       >
         <div
-          :style="{
-            width: '40px',
-            height: '40px',
-            borderRadius: '50%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontSize: '14px',
-            fontWeight: 600,
-            transition: 'all 0.3s',
-            background: i <= currentIndex ? '#1867c0' : '#fff',
-            color: i <= currentIndex ? '#fff' : '#888',
-            border: i <= currentIndex ? 'none' : step.disabled ? '2px dashed #ccc' : '2px solid #e0e0e0',
-            transform: i === currentIndex ? 'scale(1.15)' : 'scale(0.9)',
-            boxShadow: i === currentIndex ? '0 0 0 4px rgba(24, 103, 192, 0.2)' : 'none',
-            opacity: step.disabled ? 0.5 : 1,
-          }"
+          class="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold transition-all duration-300"
+          :class="[
+            i <= currentIndex ? 'bg-primary text-on-primary' : step.disabled ? 'bg-surface border-2 border-dashed border-divider' : 'bg-surface border-2 border-solid border-divider',
+            i === currentIndex ? 'scale-115 shadow-[0_0_0_4px_rgba(59,130,246,0.2)]' : 'scale-90',
+            step.disabled ? 'opacity-50' : '',
+          ]"
         >
           <span v-if="i < currentIndex">&#10003;</span>
           <span v-else>{{ step.icon }}</span>
         </div>
 
         <span
-          :style="{
-            marginTop: '8px',
-            fontSize: '12px',
-            fontWeight: 500,
-            color: i === currentIndex ? '#1867c0' : '#888',
-            textDecoration: step.disabled ? 'line-through' : 'none',
-            opacity: step.disabled ? 0.5 : 1,
-          }"
+          class="mt-2 text-xs font-medium"
+          :class="[
+            i === currentIndex ? 'text-primary' : 'text-on-surface-variant',
+            step.disabled ? 'line-through opacity-50' : '',
+          ]"
         >
           {{ step.label }}
         </span>
@@ -85,38 +180,38 @@ export const DEFAULT_CODE = `<script setup lang="ts">
     </div>
 
     <!-- Controls -->
-    <div style="display: flex; align-items: center; justify-content: center; gap: 8px;">
+    <div class="flex items-center justify-center gap-2">
       <button
+        class="px-3 py-1.5 text-sm rounded border border-solid border-divider bg-surface cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
         :disabled="isFirst"
-        :style="{ padding: '6px 12px', fontSize: '13px', borderRadius: '4px', border: '1px solid #e0e0e0', background: '#fff', cursor: isFirst ? 'not-allowed' : 'pointer', opacity: isFirst ? 0.4 : 1 }"
         @click="stepper.first()"
       >
         First
       </button>
       <button
+        class="px-4 py-1.5 text-sm rounded border-none bg-surface-tint text-primary cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
         :disabled="isFirst"
-        :style="{ padding: '6px 16px', fontSize: '13px', borderRadius: '4px', border: 'none', background: isFirst ? '#e3f2fd' : '#bbdefb', color: '#1867c0', cursor: isFirst ? 'not-allowed' : 'pointer', opacity: isFirst ? 0.4 : 1 }"
         @click="stepper.prev()"
       >
         Prev
       </button>
       <button
+        class="px-4 py-1.5 text-sm rounded border-none bg-primary text-on-primary cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
         :disabled="isLast"
-        :style="{ padding: '6px 16px', fontSize: '13px', borderRadius: '4px', border: 'none', background: '#1867c0', color: '#fff', cursor: isLast ? 'not-allowed' : 'pointer', opacity: isLast ? 0.4 : 1 }"
         @click="stepper.next()"
       >
         Next
       </button>
       <button
+        class="px-3 py-1.5 text-sm rounded border border-solid border-divider bg-surface cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
         :disabled="isLast"
-        :style="{ padding: '6px 12px', fontSize: '13px', borderRadius: '4px', border: '1px solid #e0e0e0', background: '#fff', cursor: isLast ? 'not-allowed' : 'pointer', opacity: isLast ? 0.4 : 1 }"
         @click="stepper.last()"
       >
         Last
       </button>
     </div>
 
-    <p style="margin-top: 24px; text-align: center; font-size: 12px; color: #888;">
+    <p class="mt-6 text-center text-xs text-on-surface-variant">
       Step {{ currentIndex + 1 }} of {{ stepper.size }} · Payment step is disabled (auto-skipped)
     </p>
   </div>
diff --git a/apps/docs/src/layouts/fullscreen.vue b/apps/docs/src/layouts/fullscreen.vue
index 86ecb3687..dfd1e4459 100644
--- a/apps/docs/src/layouts/fullscreen.vue
+++ b/apps/docs/src/layouts/fullscreen.vue
@@ -1,108 +1,27 @@
 <script setup lang="ts">
-  // Framework
-  import { useBreakpoints } from '@vuetify/v0'
-
   // Composables
   import { createLevelFilter } from '@/composables/useLevelFilter'
   import { createNavConfig } from '@/composables/useNavConfig'
-  import { useNavigation } from '@/composables/useNavigation'
-  import { useScrollLock } from '@/composables/useScrollLock'
-  import { useSettings } from '@/composables/useSettings'
-
-  // Utilities
-  import { computed, defineAsyncComponent, toRef } from 'vue'
 
   // Stores
   import { useAppStore } from '@/stores/app'
 
-  const AppSettingsSheet = defineAsyncComponent(() => import('@/components/app/AppSettingsSheet.vue'))
-  const DocsSearch = defineAsyncComponent(() => import('@/components/docs/DocsSearch.vue'))
-
   const app = useAppStore()
   const levelFilter = createLevelFilter(() => app.nav)
   levelFilter.provide()
 
-  // Capture ?features= param even on fullscreen pages
   const navConfig = createNavConfig(levelFilter.filteredNav)
   navConfig.provide()
-
-  const breakpoints = useBreakpoints()
-  const navigation = useNavigation()
-  const settings = useSettings()
-
-  const fadeTransition = toRef(() => settings.prefersReducedMotion.value ? undefined : 'fade')
-  const slideTransition = toRef(() => settings.prefersReducedMotion.value ? undefined : 'slide')
-
-  const isModalOpen = computed(() => settings.isOpen.value)
-  const isMobileNavOpen = toRef(() => navigation.isOpen.value && !breakpoints.mdAndUp.value)
-
-  useScrollLock(settings.isOpen)
-  useScrollLock(isMobileNavOpen)
 </script>
 
 <template>
-  <div>
-    <a
-      class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:px-4 focus:py-2 focus:bg-primary focus:text-on-primary focus:rounded"
-      href="#main-content"
-    >
-      Skip to main content
-    </a>
-
-    <div class="flex flex-col min-h-[calc(100vh-72px)]" :inert="isModalOpen || undefined">
-      <AppBanner />
-      <AppNav />
-      <AppBar />
-      <main id="main-content" class="flex-1 flex flex-col">
-        <router-view />
-      </main>
-    </div>
-
-    <!-- Mobile nav backdrop -->
-    <Transition :name="fadeTransition">
-      <div
-        v-if="isMobileNavOpen"
-        class="fixed inset-0 bg-black/30 z-9"
-        @click="navigation.close()"
-      />
-    </Transition>
-
-    <!-- Settings backdrop -->
-    <Transition :name="fadeTransition">
-      <div
-        v-if="settings.isOpen.value"
-        class="fixed inset-0 bg-black/30 z-40"
-        @click="settings.close"
-      />
-    </Transition>
-
-    <!-- Settings sheet -->
-    <Transition :name="slideTransition">
-      <AppSettingsSheet v-if="settings.isOpen.value" />
-    </Transition>
-
-    <DocsSearch />
+  <div class="fixed inset-0 z-10 flex flex-col bg-background" data-layout="fullscreen">
+    <router-view />
   </div>
 </template>
 
-<style scoped>
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 0.2s ease;
-  }
-
-  .fade-enter-from,
-  .fade-leave-to {
-    opacity: 0;
-  }
-
-  .slide-enter-active,
-  .slide-leave-active {
-    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  .slide-enter-from,
-  .slide-leave-to {
-    transform: translateX(100%);
+<style>
+  html:has([data-layout="fullscreen"]) {
+    scrollbar-gutter: auto;
   }
 </style>
diff --git a/apps/docs/src/pages/editor.vue b/apps/docs/src/pages/editor.vue
index 2ca4d2479..45b9b89ad 100644
--- a/apps/docs/src/pages/editor.vue
+++ b/apps/docs/src/pages/editor.vue
@@ -8,11 +8,11 @@
   // Utilities
   import { Repl, useStore, useVueImportMap } from '@vue/repl'
   import Monaco from '@vue/repl/monaco-editor'
-  import { computed, onMounted, ref, shallowRef } from 'vue'
+  import { computed, onMounted, shallowRef } from 'vue'
   import '@vue/repl/style.css'
 
   // Data
-  import { DEFAULT_CODE } from '@/data/editor-defaults'
+  import { DEFAULT_CODE, MAIN_TS, UNO_CONFIG_TS } from '@/data/editor-defaults'
 
   definePage({
     meta: {
@@ -28,10 +28,12 @@
     ],
   })
 
+  // ── Theme ──────────────────────────────────────────────────────────────
   const theme = useTheme()
   const isDark = computed(() => theme.isDark.value)
   const replTheme = computed(() => isDark.value ? 'dark' : 'light')
 
+  // ── REPL Setup ─────────────────────────────────────────────────────────
   const { importMap: builtinImportMap, vueVersion } = useVueImportMap({
     runtimeDev: 'https://cdn.jsdelivr.net/npm/@vue/runtime-dom/dist/runtime-dom.esm-browser.js',
     runtimeProd: 'https://cdn.jsdelivr.net/npm/@vue/runtime-dom/dist/runtime-dom.esm-browser.prod.js',
@@ -41,77 +43,87 @@
   const importMap = computed(() => ({
     imports: {
       ...builtinImportMap.value?.imports,
-      '@vuetify/v0': 'https://esm.sh/@vuetify/v0',
+      '@vuetify/v0': 'https://cdn.jsdelivr.net/npm/@vuetify/v0@latest/dist/index.mjs',
     },
   }))
 
   const store = useStore({
     builtinImportMap: importMap,
     vueVersion,
-    showOutput: ref(true),
+    showOutput: shallowRef(true),
   })
 
   const isReady = shallowRef(false)
 
-  onMounted(() => {
-    store.setFiles({ 'App.vue': DEFAULT_CODE }, 'App.vue')
+  onMounted(async () => {
+    await store.setFiles(
+      {
+        'src/main.ts': MAIN_TS,
+        'src/uno.config.ts': UNO_CONFIG_TS,
+        'src/App.vue': DEFAULT_CODE,
+      },
+      'src/main.ts',
+    )
+    store.setActive('src/App.vue')
     isReady.value = true
   })
 </script>
 
 <template>
   <div class="h-screen flex flex-col">
-    <div class="flex items-center justify-between px-4 py-2 border-b border-divider">
-      <RouterLink
-        class="flex items-center gap-2 text-on-surface no-underline text-sm font-medium"
-        to="/"
-      >
-        <span class="text-lg">←</span>
-        <span>Back</span>
-      </RouterLink>
-
-      <span class="text-sm font-semibold text-on-surface">v0 Editor</span>
-
-      <div class="w-16" />
-    </div>
-
-    <div v-if="isReady" class="editor-repl" :class="{ dark: isDark }">
-      <Repl
-        :auto-resize="true"
-        :clear-console="true"
-        :editor="Monaco"
-        layout="horizontal"
-        :preview-theme="true"
-        :show-compile-output="false"
-        :show-import-map="false"
-        :show-ts-config="false"
-        :store="store"
-        :theme="replTheme"
-      />
-    </div>
+    <!-- Header -->
+    <header class="flex items-center justify-between h-[48px] px-3 border-b border-divider bg-surface">
+      <div class="flex items-center gap-3">
+        <RouterLink
+          aria-label="Back to docs"
+          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors no-underline text-on-surface"
+          title="Back to docs"
+          to="/"
+        >
+          <AppIcon icon="arrow-left" :size="18" />
+        </RouterLink>
+
+        <span class="text-sm font-semibold text-on-surface">v0 Editor</span>
+      </div>
+
+      <AppThemeToggle />
+    </header>
+
+    <!-- REPL Editor -->
+    <Transition name="fade">
+      <div v-if="isReady" class="editor-repl flex-1 min-h-0 p-2" :class="{ dark: isDark }">
+        <Repl
+          :auto-resize="true"
+          :clear-console="true"
+          :editor="Monaco"
+          layout="horizontal"
+          :preview-theme="true"
+          :show-compile-output="false"
+          :show-import-map="false"
+          :show-ts-config="false"
+          :store="store"
+          :theme="replTheme"
+        />
+      </div>
+    </Transition>
   </div>
 </template>
 
 <style scoped>
   .editor-repl {
     position: relative;
-    flex: 1;
-    min-height: 0;
     overflow: hidden;
   }
 
   .editor-repl :deep(.vue-repl) {
-    position: absolute;
-    inset: 0;
+    height: 100%;
+    border-radius: 8px;
+    border: 1px solid var(--v0-divider);
+    overflow: hidden;
     --color-branding: var(--v0-primary);
     --color-branding-dark: var(--v0-primary);
   }
 
-  /* Hide file tabs (single file mode) */
-  .editor-repl :deep(.tab-buttons) {
-    display: none !important;
-  }
-
   /* Hide editor floating toggles (auto-save / show error) */
   .editor-repl :deep(.editor-floating) {
     display: none !important;
@@ -128,9 +140,20 @@
 
   /* Dark theme overrides for @vue/repl */
   .editor-repl.dark :deep(.vue-repl) {
-    --bg: #1a1a1a;
-    --bg-soft: #242424;
-    --border: #383838;
-    --text-light: #aaa;
+    --bg: var(--v0-background);
+    --bg-soft: var(--v0-surface);
+    --border: var(--v0-divider);
+    --text-light: var(--v0-on-surface-variant);
+  }
+
+  /* Fade on mount */
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.2s;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
   }
 </style>

From 11906491fbed97aba7bcf465bb52270bd10e49b6 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 12 Feb 2026 12:00:51 -0600
Subject: [PATCH 03/39] docs(editor): add @vue/repl dependency and fix preview
 layout

Move pt-[72px] padding from App.vue to default/home layouts so
fullscreen layout stays flush. Reset preview iframe body margin
and widen default stepper example.
---
 apps/docs/package.json                |  1 +
 apps/docs/src/App.vue                 |  2 +-
 apps/docs/src/data/editor-defaults.ts |  2 +-
 apps/docs/src/layouts/default.vue     |  2 +-
 apps/docs/src/layouts/home.vue        |  2 +-
 apps/docs/src/pages/editor.vue        |  3 +++
 apps/docs/src/typed-router.d.ts       | 13 +++++++++++++
 apps/docs/vite.config.ts              |  5 ++++-
 pnpm-lock.yaml                        | 12 ++++++++++++
 pnpm-workspace.yaml                   |  1 +
 10 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/apps/docs/package.json b/apps/docs/package.json
index 547007cee..686992078 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -38,6 +38,7 @@
     "@mdi/js": "catalog:",
     "@octokit/core": "catalog:",
     "@unhead/addons": "catalog:",
+    "@vue/repl": "catalog:",
     "@vuetify/paper": "workspace:*",
     "@vuetify/v0": "workspace:*",
     "fflate": "catalog:",
diff --git a/apps/docs/src/App.vue b/apps/docs/src/App.vue
index 3268d2ba5..8dcfe16af 100644
--- a/apps/docs/src/App.vue
+++ b/apps/docs/src/App.vue
@@ -61,7 +61,7 @@
 <template>
   <div v-if="showMesh" aria-hidden="true" class="mesh-bg mesh-bg-top" />
   <div v-if="showMesh" aria-hidden="true" class="mesh-bg mesh-bg-bottom" :class="{ visible: showBottomMesh }" />
-  <main class="min-h-screen pt-[72px] text-on-background" :class="{ 'dot-grid': settings.showDotGrid.value }">
+  <main class="min-h-screen text-on-background" :class="{ 'dot-grid': settings.showDotGrid.value }">
     <router-view />
   </main>
 
diff --git a/apps/docs/src/data/editor-defaults.ts b/apps/docs/src/data/editor-defaults.ts
index 16bbfb244..8eabd04bb 100644
--- a/apps/docs/src/data/editor-defaults.ts
+++ b/apps/docs/src/data/editor-defaults.ts
@@ -136,7 +136,7 @@ export const DEFAULT_CODE = `<script setup lang="ts">
 </script>
 
 <template>
-  <div class="max-w-md mx-auto p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
     <!-- Stepper Track -->
     <div class="relative flex items-center justify-between mb-12">
       <!-- Background Line -->
diff --git a/apps/docs/src/layouts/default.vue b/apps/docs/src/layouts/default.vue
index 983014491..71a207811 100644
--- a/apps/docs/src/layouts/default.vue
+++ b/apps/docs/src/layouts/default.vue
@@ -70,7 +70,7 @@
       Skip to main content
     </a>
 
-    <div class="min-h-[calc(100vh-72px)] flex flex-col" :inert="isModalOpen || undefined">
+    <div class="min-h-[calc(100vh-72px)] pt-[72px] flex flex-col" :inert="isModalOpen || undefined">
       <AppBanner />
       <AppNav />
       <AppBar />
diff --git a/apps/docs/src/layouts/home.vue b/apps/docs/src/layouts/home.vue
index 96d63e73d..6e68d81bd 100644
--- a/apps/docs/src/layouts/home.vue
+++ b/apps/docs/src/layouts/home.vue
@@ -23,7 +23,7 @@
 </script>
 
 <template>
-  <div>
+  <div class="pt-[72px]">
     <AppBanner />
     <AppBar />
     <AppHomePage />
diff --git a/apps/docs/src/pages/editor.vue b/apps/docs/src/pages/editor.vue
index 45b9b89ad..1ba5becda 100644
--- a/apps/docs/src/pages/editor.vue
+++ b/apps/docs/src/pages/editor.vue
@@ -53,6 +53,8 @@
     showOutput: shallowRef(true),
   })
 
+  const previewHead = '<style>body{margin:0}#app{min-height:100vh}</style>'
+
   const isReady = shallowRef(false)
 
   onMounted(async () => {
@@ -97,6 +99,7 @@
           :clear-console="true"
           :editor="Monaco"
           layout="horizontal"
+          :preview-options="{ headHTML: previewHead }"
           :preview-theme="true"
           :show-compile-output="false"
           :show-import-map="false"
diff --git a/apps/docs/src/typed-router.d.ts b/apps/docs/src/typed-router.d.ts
index 4f4752818..af7dda32f 100644
--- a/apps/docs/src/typed-router.d.ts
+++ b/apps/docs/src/typed-router.d.ts
@@ -443,6 +443,13 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/editor': RouteRecordInfo<
+      '/editor',
+      '/editor',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     '/guide/': RouteRecordInfo<
       '/guide/',
       '/guide',
@@ -1040,6 +1047,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/editor.vue': {
+      routes:
+        | '/editor'
+      views:
+        | never
+    }
     'src/pages/guide/index.md': {
       routes:
         | '/guide/'
diff --git a/apps/docs/vite.config.ts b/apps/docs/vite.config.ts
index 66f0b6971..5a73f2af0 100644
--- a/apps/docs/vite.config.ts
+++ b/apps/docs/vite.config.ts
@@ -112,6 +112,9 @@ export default defineConfig({
     '__VUE_PROD_DEVTOOLS__': 'false',
     '__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': 'false',
   },
+  optimizeDeps: {
+    exclude: ['@vue/repl'],
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('src', import.meta.url)),
@@ -125,7 +128,7 @@ export default defineConfig({
   },
   server: {
     fs: {
-      allow: ['../packages/*', '.'],
+      allow: ['../packages/*', '.', '../../node_modules'],
     },
   },
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0e5e5276a..fd6df5982 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -48,6 +48,9 @@ catalogs:
     '@vitest/coverage-v8':
       specifier: ^4.0.16
       version: 4.0.16
+    '@vue/repl':
+      specifier: ^4.7.1
+      version: 4.7.1
     '@vue/test-utils':
       specifier: ^2.4.6
       version: 2.4.6
@@ -286,6 +289,9 @@ importers:
       '@unhead/addons':
         specifier: 'catalog:'
         version: 2.0.19(rollup@2.79.2)
+      '@vue/repl':
+        specifier: 'catalog:'
+        version: 4.7.1
       '@vuetify/paper':
         specifier: workspace:*
         version: link:../../packages/paper
@@ -2689,6 +2695,9 @@ packages:
   '@vue/reactivity@3.5.26':
     resolution: {integrity: sha512-9EnYB1/DIiUYYnzlnUBgwU32NNvLp/nhxLXeWRhHUEeWNTn1ECxX8aGO7RTXeX6PPcxe3LLuNBFoJbV4QZ+CFQ==}
 
+  '@vue/repl@4.7.1':
+    resolution: {integrity: sha512-8w5Z3cyqBJ5ufzXO2eut2stzb7aX/ZnSva2d3ee8eEINEB7FG2JYwc14eAHHHGGuoXOGN5v4cyb5ti/YZGcwlg==}
+
   '@vue/runtime-core@3.5.24':
     resolution: {integrity: sha512-RYP/byyKDgNIqfX/gNb2PB55dJmM97jc9wyF3jK7QUInYKypK2exmZMNwnjueWwGceEkP6NChd3D2ZVEp9undQ==}
 
@@ -4020,6 +4029,7 @@ packages:
   glob@11.1.0:
     resolution: {integrity: sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==}
     engines: {node: 20 || >=22}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
   globals@11.12.0:
@@ -8905,6 +8915,8 @@ snapshots:
     dependencies:
       '@vue/shared': 3.5.26
 
+  '@vue/repl@4.7.1': {}
+
   '@vue/runtime-core@3.5.24':
     dependencies:
       '@vue/reactivity': 3.5.24
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 130f1bbbf..e0a3b5335 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -21,6 +21,7 @@ catalog:
   '@unhead/vue': 2.0.19
   '@vitest/coverage-v8': ^4.0.16
   '@vue/test-utils': ^2.4.6
+  '@vue/repl': ^4.7.1
   '@vue/tsconfig': ^0.8.1
   '@vuetify/github-releaser': ^4.0.3
   bumpp: ^10.3.2

From 1c7ad343e4d1b8b906971d504eb436679ba7d0e9 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 12 Feb 2026 21:25:38 -0600
Subject: [PATCH 04/39] docs(editor): add file tree sidebar with CRUD, tabs,
 and breadcrumbs

---
 apps/docs/src/components.d.ts                 |   3 +
 .../components/editor/EditorBreadcrumbs.vue   |  54 ++++
 .../src/components/editor/EditorFileTree.vue  | 287 ++++++++++++++++++
 .../docs/src/components/editor/EditorTabs.vue |  40 +++
 apps/docs/src/pages/editor.vue                |  79 +++--
 apps/docs/src/plugins/icons.ts                |  17 ++
 6 files changed, 457 insertions(+), 23 deletions(-)
 create mode 100644 apps/docs/src/components/editor/EditorBreadcrumbs.vue
 create mode 100644 apps/docs/src/components/editor/EditorFileTree.vue
 create mode 100644 apps/docs/src/components/editor/EditorTabs.vue

diff --git a/apps/docs/src/components.d.ts b/apps/docs/src/components.d.ts
index 4387b7b2a..1b8d5eb65 100644
--- a/apps/docs/src/components.d.ts
+++ b/apps/docs/src/components.d.ts
@@ -121,6 +121,9 @@ declare module 'vue' {
     DocsSkeleton: typeof import('./components/docs/DocsSkeleton.vue')['default']
     DocsSkillToggle: typeof import('./components/docs/meta/DocsSkillToggle.vue')['default']
     DocsToc: typeof import('./components/docs/DocsToc.vue')['default']
+    EditorBreadcrumbs: typeof import('./components/editor/EditorBreadcrumbs.vue')['default']
+    EditorFileTree: typeof import('./components/editor/EditorFileTree.vue')['default']
+    EditorTabs: typeof import('./components/editor/EditorTabs.vue')['default']
     HomeAiFirst: typeof import('./components/home/HomeAiFirst.vue')['default']
     HomeArchitecture: typeof import('./components/home/HomeArchitecture.vue')['default']
     HomeAskDialog: typeof import('./components/home/HomeAskDialog.vue')['default']
diff --git a/apps/docs/src/components/editor/EditorBreadcrumbs.vue b/apps/docs/src/components/editor/EditorBreadcrumbs.vue
new file mode 100644
index 000000000..f7e71ab1e
--- /dev/null
+++ b/apps/docs/src/components/editor/EditorBreadcrumbs.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+  // Framework
+  import { Breadcrumbs } from '@vuetify/v0'
+
+  // Utilities
+  import { computed } from 'vue'
+
+  // Types
+  import type { ReplStore } from '@vue/repl'
+
+  const props = defineProps<{
+    store: ReplStore
+  }>()
+
+  const segments = computed(() => {
+    return props.store.activeFile.filename.split('/')
+  })
+</script>
+
+<template>
+  <Breadcrumbs.Root
+    as="div"
+    class="flex items-center min-h-[24px] px-3 border-b border-divider bg-surface text-xs"
+    label="File path"
+  >
+    <Breadcrumbs.List class="flex items-center gap-1.5">
+      <template
+        v-for="(segment, i) in segments"
+        :key="i"
+      >
+        <Breadcrumbs.Divider v-if="i > 0">
+          <span class="text-on-surface-variant opacity-40">/</span>
+        </Breadcrumbs.Divider>
+
+        <Breadcrumbs.Item :text="segment">
+          <Breadcrumbs.Page
+            v-if="i === segments.length - 1"
+            class="text-on-surface-variant"
+          >
+            {{ segment }}
+          </Breadcrumbs.Page>
+
+          <Breadcrumbs.Link
+            v-else
+            as="span"
+            class="text-on-surface-variant cursor-default"
+          >
+            {{ segment }}
+          </Breadcrumbs.Link>
+        </Breadcrumbs.Item>
+      </template>
+    </Breadcrumbs.List>
+  </Breadcrumbs.Root>
+</template>
diff --git a/apps/docs/src/components/editor/EditorFileTree.vue b/apps/docs/src/components/editor/EditorFileTree.vue
new file mode 100644
index 000000000..41af74f16
--- /dev/null
+++ b/apps/docs/src/components/editor/EditorFileTree.vue
@@ -0,0 +1,287 @@
+<script setup lang="ts">
+  // Framework
+  import { createNested, useProxyRegistry } from '@vuetify/v0'
+
+  // Utilities
+  import { computed, nextTick, shallowRef } from 'vue'
+
+  // Types
+  import type { ReplStore } from '@vue/repl'
+
+  const props = defineProps<{
+    store: ReplStore
+  }>()
+
+  const tree = createNested()
+
+  tree.onboard([
+    {
+      id: 'src',
+      value: 'src',
+      children: [
+        { id: 'src/App.vue', value: 'App.vue' },
+      ],
+    },
+    {
+      id: 'project',
+      value: 'project',
+      children: [
+        { id: 'src/main.ts', value: 'main.ts' },
+        { id: 'src/uno.config.ts', value: 'uno.config.ts' },
+        { id: 'import-map.json', value: 'import-map.json' },
+        { id: 'tsconfig.json', value: 'tsconfig.json' },
+      ],
+    },
+  ])
+
+  tree.open('src')
+
+  const proxy = useProxyRegistry(tree)
+  const activeFile = computed(() => props.store.activeFile.filename)
+
+  // ── CRUD State ─────────────────────────────────────────────────────────
+  const creating = shallowRef<string | null>(null)
+  const creatingType = shallowRef<'file' | 'folder'>('file')
+  const pending = shallowRef('')
+  const input = shallowRef<HTMLInputElement | null>(null)
+  const targetFolder = shallowRef('src')
+
+  const PROTECTED = new Set(['src/App.vue', 'src/main.ts', 'src/uno.config.ts', 'import-map.json', 'tsconfig.json', 'src', 'project'])
+  const VALID_EXT = /\.(vue|jsx?|tsx?|css|json)$/
+
+  function isFile (id: string) {
+    return VALID_EXT.test(id)
+  }
+
+  const EXT_ICONS: Record<string, { icon: string, color: string }> = {
+    vue: { icon: 'lang-vue', color: '#4FC08D' },
+    ts: { icon: 'lang-ts', color: '#3179c7' },
+    tsx: { icon: 'lang-ts', color: '#3179c7' },
+    js: { icon: 'lang-js', color: '#d3b62a' },
+    jsx: { icon: 'lang-js', color: '#d3b62a' },
+    css: { icon: 'lang-css', color: '#1572B6' },
+    json: { icon: 'lang-json', color: '#a57b39' },
+  }
+
+  function fileExt (id: string) {
+    const ext = id.split('.').pop()
+    return ext ? EXT_ICONS[ext] : undefined
+  }
+
+  // ── Tree helpers ───────────────────────────────────────────────────────
+  function getVisibleNodes (parentId?: string): string[] {
+    const ids = parentId
+      ? tree.children.get(parentId) ?? []
+      : tree.roots.value.map(r => r.id)
+
+    return (ids as string[]).flatMap(id => {
+      const result = [id]
+      if (!isFile(id) && tree.opened(id)) {
+        result.push(...getVisibleNodes(id))
+      }
+      return result
+    })
+  }
+
+  const visibleNodes = computed(() => {
+    void proxy.keys.length
+    return getVisibleNodes()
+  })
+
+  // ID after which the inline input should render (last visible descendant of creating folder)
+  const inputAfter = computed(() => {
+    const folder = creating.value
+    if (!folder) return null
+
+    const nodes = visibleNodes.value
+    const folderIdx = nodes.indexOf(folder)
+    if (folderIdx === -1) return null
+
+    let lastIdx = folderIdx
+    for (let i = folderIdx + 1; i < nodes.length; i++) {
+      if (tree.hasAncestor(nodes[i], folder)) {
+        lastIdx = i
+      } else {
+        break
+      }
+    }
+    return nodes[lastIdx]
+  })
+
+  function onClick (id: string) {
+    if (isFile(id)) {
+      props.store.setActive(id)
+      targetFolder.value = (tree.parents.get(id) as string) ?? 'src'
+    } else {
+      tree.flip(id)
+      targetFolder.value = id
+    }
+  }
+
+  // ── CRUD Operations ────────────────────────────────────────────────────
+  function add (type: 'file' | 'folder') {
+    creating.value = targetFolder.value
+    creatingType.value = type
+    pending.value = ''
+    tree.open(targetFolder.value)
+    nextTick(() => input.value?.focus())
+  }
+
+  function confirm () {
+    const raw = pending.value.trim()
+    const folder = creating.value
+    const type = creatingType.value
+
+    cancel()
+
+    if (!raw || !folder) return
+
+    const segments = raw.split('/').filter(Boolean)
+    const last = segments.pop()!
+    let parentId = folder
+
+    // Validate based on creation type
+    if (type === 'file' && !VALID_EXT.test(last)) return
+
+    // Create intermediate folders
+    for (const seg of segments) {
+      const folderId = `${parentId}/${seg}`
+      if (!tree.has(folderId)) {
+        tree.register({ id: folderId, value: seg, parentId })
+      }
+      tree.open(folderId)
+      parentId = folderId
+    }
+
+    const itemId = `${parentId}/${last}`
+    if (tree.has(itemId)) return
+
+    tree.register({ id: itemId, value: last, parentId })
+
+    if (type === 'file') {
+      props.store.addFile(itemId)
+      props.store.setActive(itemId)
+    } else {
+      tree.open(itemId)
+    }
+  }
+
+  function cancel () {
+    creating.value = null
+    pending.value = ''
+  }
+
+  function deletable (id: string): boolean {
+    if (PROTECTED.has(id)) return false
+    if (tree.hasAncestor(id, 'project')) return false
+    if (!isFile(id) && (tree.children.get(id)?.length ?? 0) > 0) return false
+    return true
+  }
+
+  function remove (id: string) {
+    const wasActive = activeFile.value === id
+
+    if (isFile(id)) {
+      props.store.deleteFile(id)
+    }
+
+    tree.unregister(id)
+
+    if (wasActive) {
+      props.store.setActive('src/App.vue')
+    }
+  }
+</script>
+
+<template>
+  <nav class="w-[200px] border-r border-divider bg-surface overflow-y-auto shrink-0">
+    <div class="flex items-center justify-between px-3 py-2">
+      <span class="text-xs font-semibold text-on-surface-variant uppercase tracking-wide">Files</span>
+
+      <div class="flex items-center gap-1">
+        <button
+          class="opacity-50 hover:opacity-100 transition-opacity"
+          title="New file"
+          @click="add('file')"
+        >
+          <AppIcon icon="file-plus" :size="14" />
+        </button>
+
+        <button
+          class="opacity-50 hover:opacity-100 transition-opacity"
+          title="New folder"
+          @click="add('folder')"
+        >
+          <AppIcon icon="folder-plus" :size="14" />
+        </button>
+      </div>
+    </div>
+
+    <template
+      v-for="id in visibleNodes"
+      :key="id"
+    >
+      <div
+        class="group/row flex items-center gap-1.5 py-1 pr-2 text-sm cursor-pointer select-none hover:bg-surface-tint transition-colors"
+        :class="isFile(id) && id === activeFile ? 'opacity-100 bg-surface-tint' : 'opacity-80'"
+        :style="{ paddingLeft: `${tree.getDepth(id) * 12 + 8}px` }"
+        @click="onClick(id)"
+      >
+        <template v-if="!isFile(id)">
+          <AppIcon
+            class="transition-transform duration-150"
+            :class="{ 'rotate-90': tree.opened(id) }"
+            icon="chevron-right"
+            :size="14"
+          />
+          <AppIcon
+            :icon="tree.opened(id) ? 'folder-open' : 'folder'"
+            :size="14"
+          />
+        </template>
+        <template v-else>
+          <span class="w-[14px]" />
+          <AppIcon
+            v-if="fileExt(id)"
+            :icon="fileExt(id)!.icon"
+            :size="14"
+            :style="{ color: fileExt(id)!.color }"
+          />
+          <span v-else class="w-[14px]" />
+        </template>
+
+        <span class="flex-1 truncate" :class="isFile(id) ? 'opacity-80' : 'font-medium opacity-60'">
+          {{ tree.get(id)?.value }}
+        </span>
+
+        <!-- Delete item -->
+        <button
+          v-if="deletable(id)"
+          class="shrink-0 opacity-0 group-hover/row:opacity-60 hover:!opacity-100 transition-opacity"
+          title="Delete"
+          @click.stop="remove(id)"
+        >
+          <AppIcon icon="close" :size="14" />
+        </button>
+      </div>
+
+      <!-- Inline input at bottom of folder children -->
+      <div
+        v-if="inputAfter === id"
+        class="flex items-center gap-1.5 py-1 pr-2"
+        :style="{ paddingLeft: `${(tree.getDepth(creating!) + 1) * 12 + 8}px` }"
+      >
+        <span class="w-[14px]" />
+        <input
+          :ref="el => input = el as HTMLInputElement"
+          v-model="pending"
+          class="flex-1 min-w-0 bg-transparent text-sm text-on-surface outline-none border-b border-primary"
+          :placeholder="creatingType === 'file' ? 'filename.vue' : 'folder-name'"
+          @blur="confirm"
+          @keydown.enter="confirm"
+          @keydown.esc="cancel"
+        >
+      </div>
+    </template>
+  </nav>
+</template>
diff --git a/apps/docs/src/components/editor/EditorTabs.vue b/apps/docs/src/components/editor/EditorTabs.vue
new file mode 100644
index 000000000..b21aec946
--- /dev/null
+++ b/apps/docs/src/components/editor/EditorTabs.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+  // Utilities
+  import { computed } from 'vue'
+
+  // Types
+  import type { ReplStore } from '@vue/repl'
+
+  const props = defineProps<{
+    store: ReplStore
+  }>()
+
+  const PROJECT_FILES = new Set(['import-map.json', 'tsconfig.json', 'src/main.ts', 'src/uno.config.ts'])
+
+  const tabs = computed(() => {
+    return Object.values(props.store.files)
+      .filter(f => !f.hidden && !PROJECT_FILES.has(f.filename))
+      .map(f => ({
+        id: f.filename,
+        label: f.filename.split('/').pop()!,
+      }))
+  })
+
+  const activeFile = computed(() => props.store.activeFile.filename)
+</script>
+
+<template>
+  <div class="flex items-end gap-px overflow-x-auto border-b border-divider bg-surface-variant/30">
+    <button
+      v-for="tab in tabs"
+      :key="tab.id"
+      class="shrink-0 px-3 py-1.5 text-xs transition-colors border-b-2 cursor-pointer"
+      :class="tab.id === activeFile
+        ? 'text-on-surface border-primary bg-surface'
+        : 'text-on-surface-variant border-transparent hover:text-on-surface hover:bg-surface-tint'"
+      @click="store.setActive(tab.id)"
+    >
+      {{ tab.label }}
+    </button>
+  </div>
+</template>
diff --git a/apps/docs/src/pages/editor.vue b/apps/docs/src/pages/editor.vue
index 1ba5becda..3b4fb26cc 100644
--- a/apps/docs/src/pages/editor.vue
+++ b/apps/docs/src/pages/editor.vue
@@ -5,6 +5,11 @@
   // Framework
   import { useTheme } from '@vuetify/v0'
 
+  // Components
+  import EditorBreadcrumbs from '@/components/editor/EditorBreadcrumbs.vue'
+  import EditorFileTree from '@/components/editor/EditorFileTree.vue'
+  import EditorTabs from '@/components/editor/EditorTabs.vue'
+
   // Utilities
   import { Repl, useStore, useVueImportMap } from '@vue/repl'
   import Monaco from '@vue/repl/monaco-editor'
@@ -56,6 +61,7 @@
   const previewHead = '<style>body{margin:0}#app{min-height:100vh}</style>'
 
   const isReady = shallowRef(false)
+  const sidebarOpen = shallowRef(true)
 
   onMounted(async () => {
     await store.setFiles(
@@ -66,6 +72,8 @@
       },
       'src/main.ts',
     )
+    store.files['src/main.ts']!.hidden = true
+    store.files['src/uno.config.ts']!.hidden = true
     store.setActive('src/App.vue')
     isReady.value = true
   })
@@ -88,25 +96,46 @@
         <span class="text-sm font-semibold text-on-surface">v0 Editor</span>
       </div>
 
-      <AppThemeToggle />
+      <div class="flex items-center gap-2">
+        <button
+          aria-label="Toggle sidebar"
+          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+          title="Toggle sidebar"
+          @click="sidebarOpen = !sidebarOpen"
+        >
+          <AppIcon icon="menu" :size="18" />
+        </button>
+
+        <AppThemeToggle />
+      </div>
     </header>
 
     <!-- REPL Editor -->
     <Transition name="fade">
       <div v-if="isReady" class="editor-repl flex-1 min-h-0 p-2" :class="{ dark: isDark }">
-        <Repl
-          :auto-resize="true"
-          :clear-console="true"
-          :editor="Monaco"
-          layout="horizontal"
-          :preview-options="{ headHTML: previewHead }"
-          :preview-theme="true"
-          :show-compile-output="false"
-          :show-import-map="false"
-          :show-ts-config="false"
-          :store="store"
-          :theme="replTheme"
-        />
+        <div class="editor-wrapper">
+          <EditorFileTree v-if="sidebarOpen" :store="store" />
+
+          <div class="editor-repl-container flex flex-col">
+            <EditorTabs :store="store" />
+            <EditorBreadcrumbs :store="store" />
+
+            <Repl
+              :auto-resize="true"
+              class="flex-1 min-h-0"
+              :clear-console="true"
+              :editor="Monaco"
+              layout="horizontal"
+              :preview-options="{ headHTML: previewHead }"
+              :preview-theme="true"
+              :show-compile-output="false"
+              :show-import-map="false"
+              :show-ts-config="false"
+              :store="store"
+              :theme="replTheme"
+            />
+          </div>
+        </div>
       </div>
     </Transition>
   </div>
@@ -114,15 +143,23 @@
 
 <style scoped>
   .editor-repl {
-    position: relative;
     overflow: hidden;
   }
 
-  .editor-repl :deep(.vue-repl) {
+  .editor-wrapper {
+    display: flex;
     height: 100%;
     border-radius: 8px;
     border: 1px solid var(--v0-divider);
     overflow: hidden;
+  }
+
+  .editor-repl-container {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .editor-repl :deep(.vue-repl) {
     --color-branding: var(--v0-primary);
     --color-branding-dark: var(--v0-primary);
   }
@@ -132,13 +169,9 @@
     display: none !important;
   }
 
-  /* Give editor panel more space */
-  .editor-repl :deep(.left) {
-    flex: 1.2 !important;
-  }
-
-  .editor-repl :deep(.right) {
-    flex: 0.8 !important;
+  /* Hide REPL's built-in file tabs */
+  .editor-repl :deep(.file-selector) {
+    display: none !important;
   }
 
   /* Dark theme overrides for @vue/repl */
diff --git a/apps/docs/src/plugins/icons.ts b/apps/docs/src/plugins/icons.ts
index f52979142..6f3b711bc 100644
--- a/apps/docs/src/plugins/icons.ts
+++ b/apps/docs/src/plugins/icons.ts
@@ -22,6 +22,7 @@ import {
   mdiChevronUp,
   mdiCircleOutline,
   mdiClose,
+  mdiCodeJson,
   mdiCodeTags,
   mdiCog,
   mdiCompassOutline,
@@ -32,10 +33,16 @@ import {
   mdiDevTo,
   mdiDotsGrid,
   mdiGradientVertical,
+  mdiLanguageCss3,
+  mdiLanguageJavascript,
   mdiDownload,
   mdiEye,
   mdiEyeOffOutline,
   mdiFirefox,
+  mdiFilePlusOutline,
+  mdiFolderOpenOutline,
+  mdiFolderOutline,
+  mdiFolderPlusOutline,
   mdiFolderZipOutline,
   mdiFormatListBulleted,
   mdiFormatPaint,
@@ -87,6 +94,7 @@ import {
   mdiTune,
   mdiWeatherNight,
   mdiWeatherSunny,
+  mdiVuejs,
   mdiWrap,
   mdiWrapDisabled,
 } from '@mdi/js'
@@ -183,6 +191,15 @@ export const [useIconContext, provideIconContext, context] = createTokensContext
     'map': mdiMap,
     'telescope': mdiTelescope,
     'download': mdiDownload,
+    'file-plus': mdiFilePlusOutline,
+    'folder-plus': mdiFolderPlusOutline,
+    'lang-vue': mdiVuejs,
+    'lang-ts': mdiLanguageTypescript,
+    'lang-js': mdiLanguageJavascript,
+    'lang-css': mdiLanguageCss3,
+    'lang-json': mdiCodeJson,
+    'folder': mdiFolderOutline,
+    'folder-open': mdiFolderOpenOutline,
     'folder-zip': mdiFolderZipOutline,
     'create': mdiCreation,
     'toc': mdiFormatListBulleted,

From 47100f12df8a0b7d742de464fd7a2d3cb7ac05d1 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 13 Feb 2026 15:11:09 -0600
Subject: [PATCH 05/39] docs(editor): improve load performance, fix FOUC, and
 add tab management

Lazy-load example files in EditorExamples to reduce editor chunk size.
Prefetch @vue/repl and Monaco from docs layout during idle time so the
editor page loads from HTTP cache. Fix flash of unstyled content by
hiding #app until after mount and setting theme-aware body background.
Add tab close buttons, sync nested file edits to flat aliases, fix
kebab-case component names, and replace header with Vuetify Play logo.
---
 .../src/components/editor/EditorExamples.vue  | 141 ++++++++++++++++++
 .../src/components/editor/EditorFileTree.vue  |  78 ++++++++--
 .../docs/src/components/editor/EditorTabs.vue |  46 +++++-
 apps/docs/src/composables/editorLink.ts       | 114 ++++++++++++++
 apps/docs/src/data/editor-defaults.ts         |  13 +-
 apps/docs/src/layouts/default.vue             |  14 ++
 apps/docs/src/pages/editor.vue                | 139 +++++++++++++++--
 7 files changed, 518 insertions(+), 27 deletions(-)
 create mode 100644 apps/docs/src/components/editor/EditorExamples.vue
 create mode 100644 apps/docs/src/composables/editorLink.ts

diff --git a/apps/docs/src/components/editor/EditorExamples.vue b/apps/docs/src/components/editor/EditorExamples.vue
new file mode 100644
index 000000000..933dec4e8
--- /dev/null
+++ b/apps/docs/src/components/editor/EditorExamples.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+  const raw = import.meta.glob('@/examples/**/*.{vue,ts,js}', {
+    query: '?raw',
+    import: 'default',
+  }) as Record<string, () => Promise<string>>
+
+  interface ExampleFile {
+    filename: string
+    loader: () => Promise<string>
+  }
+
+  interface ExampleDir {
+    dir: string
+    label: string
+    files: ExampleFile[]
+  }
+
+  interface ExampleCategory {
+    label: string
+    dirs: ExampleDir[]
+  }
+
+  const emit = defineEmits<{
+    select: [files: Record<string, string>]
+  }>()
+
+  // Parse paths and group by directory (no code loaded yet)
+  const dirMap = new Map<string, ExampleFile[]>()
+
+  for (const [key, loader] of Object.entries(raw)) {
+    const marker = '/examples/'
+    const idx = key.indexOf(marker)
+    if (idx === -1) continue
+
+    const relPath = key.slice(idx + marker.length)
+    const lastSlash = relPath.lastIndexOf('/')
+    const dir = lastSlash === -1 ? '' : relPath.slice(0, lastSlash)
+    const filename = lastSlash === -1 ? relPath : relPath.slice(lastSlash + 1)
+
+    if (!dirMap.has(dir)) dirMap.set(dir, [])
+    dirMap.get(dir)!.push({ filename, loader })
+  }
+
+  // Build categories
+  const ORDER = ['components', 'composables', 'guide']
+
+  const categories: ExampleCategory[] = (() => {
+    const grouped = new Map<string, ExampleDir[]>()
+
+    for (const [dir, files] of dirMap) {
+      if (!files.some(f => f.filename.endsWith('.vue'))) continue
+
+      const parts = dir.split('/')
+      const topLevel = parts[0]
+      const label = parts.slice(1).join(' / ')
+
+      if (!grouped.has(topLevel)) grouped.set(topLevel, [])
+      grouped.get(topLevel)!.push({ dir, label: label || dir, files })
+    }
+
+    return ORDER
+      .filter(cat => grouped.has(cat))
+      .map(cat => ({
+        label: cat.charAt(0).toUpperCase() + cat.slice(1),
+        dirs: grouped.get(cat)!.toSorted((a, b) => a.label.localeCompare(b.label)),
+      }))
+  })()
+
+  function generateAppWrapper (entryPath: string): string {
+    const baseName = entryPath.split('/').pop()!.replace(/\.vue$/, '')
+    const pascalName = baseName.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join('')
+    return [
+      '<' + `script setup lang="ts">`,
+      `  import ${pascalName} from './${entryPath}'`,
+      '</' + 'script>',
+      '',
+      '<template>',
+      '  <div class="p-4">',
+      `    <${pascalName} />`,
+      '  </div>',
+      '</template>',
+      '',
+    ].join('\n')
+  }
+
+  async function select (dir: ExampleDir) {
+    // Load all file contents in parallel
+    const loaded = await Promise.all(
+      dir.files.map(async f => ({
+        filename: f.filename,
+        code: await f.loader(),
+      })),
+    )
+
+    const result: Record<string, string> = {}
+
+    // Use the last directory segment as the nested folder name
+    // e.g. 'components/dialog' → 'dialog'
+    const parts = dir.dir.split('/')
+    const folder = parts.at(-1)
+
+    for (const file of loaded) {
+      result[`src/${folder}/${file.filename}`] = file.code
+    }
+
+    // Generate App.vue wrapper if none exists
+    const hasAppVue = loaded.some(f => f.filename.toLowerCase() === 'app.vue')
+    if (!hasAppVue) {
+      const vueFiles = loaded.filter(f => f.filename.endsWith('.vue'))
+      const entry = vueFiles.find(f => /^[a-z]/.test(f.filename)) ?? vueFiles[0]
+      if (entry) {
+        result['src/App.vue'] = generateAppWrapper(`${folder}/${entry.filename}`)
+      }
+    }
+
+    emit('select', result)
+  }
+</script>
+
+<template>
+  <div class="max-h-[400px] overflow-y-auto py-1">
+    <div v-for="cat in categories" :key="cat.label" class="mb-1">
+      <div class="px-3 py-1.5 text-xs font-semibold text-on-surface-variant uppercase tracking-wide">
+        {{ cat.label }}
+      </div>
+
+      <button
+        v-for="item in cat.dirs"
+        :key="item.dir"
+        class="w-full text-left px-3 py-1.5 text-sm text-on-surface opacity-80 hover:opacity-100 hover:bg-surface-tint transition-colors cursor-pointer"
+        @click="select(item)"
+      >
+        {{ item.label }}
+
+        <span v-if="item.files.length > 1" class="text-xs text-on-surface-variant">
+          {{ item.files.length }} files
+        </span>
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/components/editor/EditorFileTree.vue b/apps/docs/src/components/editor/EditorFileTree.vue
index 41af74f16..d9b101709 100644
--- a/apps/docs/src/components/editor/EditorFileTree.vue
+++ b/apps/docs/src/components/editor/EditorFileTree.vue
@@ -14,28 +14,86 @@
 
   const tree = createNested()
 
+  // Derive tree from store.files so it works with any loaded file set
+  const BUILT_IN_PROJECT = ['import-map.json', 'tsconfig.json']
+
+  // Build nested tree structure from file paths
+  // e.g. 'src/pagination/basic.vue' → src > pagination > basic.vue
+  const srcFiles: string[] = []
+  const projectFiles: string[] = []
+
+  for (const [filename, file] of Object.entries(props.store.files)) {
+    if (BUILT_IN_PROJECT.includes(filename)) continue
+
+    if (file.hidden) {
+      projectFiles.push(filename)
+    } else {
+      srcFiles.push(filename)
+    }
+  }
+
+  function buildChildren (files: string[], root: string) {
+    const folders = new Set<string>()
+    const direct: { id: string, value: string }[] = []
+
+    for (const filepath of files) {
+      // Strip root prefix (e.g. 'src/' → 'pagination/basic.vue')
+      const rel = filepath.startsWith(root + '/') ? filepath.slice(root.length + 1) : filepath
+      const slashIdx = rel.indexOf('/')
+
+      if (slashIdx === -1) {
+        // Direct child file
+        direct.push({ id: filepath, value: rel })
+      } else {
+        // Nested — collect intermediate folder
+        folders.add(rel.slice(0, slashIdx))
+      }
+    }
+
+    const children: { id: string, value: string, children?: ReturnType<typeof buildChildren> }[] = []
+
+    // Add folders first (sorted)
+    for (const folder of [...folders].toSorted()) {
+      const folderId = `${root}/${folder}`
+      const nested = files.filter(f => f.startsWith(folderId + '/'))
+      children.push({
+        id: folderId,
+        value: folder,
+        children: buildChildren(nested, folderId),
+      })
+    }
+
+    // Then direct files
+    children.push(...direct)
+    return children
+  }
+
   tree.onboard([
     {
       id: 'src',
       value: 'src',
-      children: [
-        { id: 'src/App.vue', value: 'App.vue' },
-      ],
+      children: buildChildren(srcFiles, 'src'),
     },
     {
       id: 'project',
       value: 'project',
       children: [
-        { id: 'src/main.ts', value: 'main.ts' },
-        { id: 'src/uno.config.ts', value: 'uno.config.ts' },
-        { id: 'import-map.json', value: 'import-map.json' },
-        { id: 'tsconfig.json', value: 'tsconfig.json' },
+        ...projectFiles.map(f => ({ id: f, value: f.split('/').pop()! })),
+        ...BUILT_IN_PROJECT.map(f => ({ id: f, value: f })),
       ],
     },
   ])
 
   tree.open('src')
 
+  // Auto-open all nested folders under src
+  for (const id of tree.keys()) {
+    const s = id as string
+    if (s.startsWith('src/') && !/\.\w+$/.test(s)) {
+      tree.open(id)
+    }
+  }
+
   const proxy = useProxyRegistry(tree)
   const activeFile = computed(() => props.store.activeFile.filename)
 
@@ -224,7 +282,7 @@
       <div
         class="group/row flex items-center gap-1.5 py-1 pr-2 text-sm cursor-pointer select-none hover:bg-surface-tint transition-colors"
         :class="isFile(id) && id === activeFile ? 'opacity-100 bg-surface-tint' : 'opacity-80'"
-        :style="{ paddingLeft: `${tree.getDepth(id) * 12 + 8}px` }"
+        :style="{ paddingLeft: `${tree.getDepth(id) * 8 + 8}px` }"
         @click="onClick(id)"
       >
         <template v-if="!isFile(id)">
@@ -257,7 +315,7 @@
         <!-- Delete item -->
         <button
           v-if="deletable(id)"
-          class="shrink-0 opacity-0 group-hover/row:opacity-60 hover:!opacity-100 transition-opacity"
+          class="shrink-0 inline-flex items-center justify-center opacity-0 group-hover/row:opacity-60 hover:!opacity-100 transition-opacity"
           title="Delete"
           @click.stop="remove(id)"
         >
@@ -269,7 +327,7 @@
       <div
         v-if="inputAfter === id"
         class="flex items-center gap-1.5 py-1 pr-2"
-        :style="{ paddingLeft: `${(tree.getDepth(creating!) + 1) * 12 + 8}px` }"
+        :style="{ paddingLeft: `${(tree.getDepth(creating!) + 1) * 8 + 8}px` }"
       >
         <span class="w-[14px]" />
         <input
diff --git a/apps/docs/src/components/editor/EditorTabs.vue b/apps/docs/src/components/editor/EditorTabs.vue
index b21aec946..9b8335b5d 100644
--- a/apps/docs/src/components/editor/EditorTabs.vue
+++ b/apps/docs/src/components/editor/EditorTabs.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   // Utilities
-  import { computed } from 'vue'
+  import { computed, shallowRef, watch } from 'vue'
 
   // Types
   import type { ReplStore } from '@vue/repl'
@@ -10,10 +10,11 @@
   }>()
 
   const PROJECT_FILES = new Set(['import-map.json', 'tsconfig.json', 'src/main.ts', 'src/uno.config.ts'])
+  const closedTabs = shallowRef(new Set<string>())
 
   const tabs = computed(() => {
     return Object.values(props.store.files)
-      .filter(f => !f.hidden && !PROJECT_FILES.has(f.filename))
+      .filter(f => !f.hidden && !PROJECT_FILES.has(f.filename) && !closedTabs.value.has(f.filename))
       .map(f => ({
         id: f.filename,
         label: f.filename.split('/').pop()!,
@@ -21,20 +22,53 @@
   })
 
   const activeFile = computed(() => props.store.activeFile.filename)
+
+  // Re-open tab when file is activated from tree
+  watch(activeFile, file => {
+    if (closedTabs.value.has(file)) {
+      const next = new Set(closedTabs.value)
+      next.delete(file)
+      closedTabs.value = next
+    }
+  })
+
+  function closeTab (id: string) {
+    // Find next tab before modifying state
+    const idx = tabs.value.findIndex(t => t.id === id)
+    const nextTab = tabs.value[idx + 1] ?? tabs.value[idx - 1]
+
+    const next = new Set(closedTabs.value)
+    next.add(id)
+    closedTabs.value = next
+
+    // If closing the active file, switch to another tab
+    if (id === activeFile.value && nextTab) {
+      props.store.setActive(nextTab.id)
+    }
+  }
 </script>
 
 <template>
   <div class="flex items-end gap-px overflow-x-auto border-b border-divider bg-surface-variant/30">
-    <button
+    <div
       v-for="tab in tabs"
       :key="tab.id"
-      class="shrink-0 px-3 py-1.5 text-xs transition-colors border-b-2 cursor-pointer"
+      class="group/tab shrink-0 flex items-center gap-1 pl-3 pr-1 py-1.5 text-xs transition-colors border-b-2 cursor-pointer"
       :class="tab.id === activeFile
         ? 'text-on-surface border-primary bg-surface'
         : 'text-on-surface-variant border-transparent hover:text-on-surface hover:bg-surface-tint'"
       @click="store.setActive(tab.id)"
     >
-      {{ tab.label }}
-    </button>
+      <span>{{ tab.label }}</span>
+
+      <button
+        v-if="tabs.length > 1"
+        aria-label="Close tab"
+        class="inline-flex items-center justify-center size-4 rounded-sm opacity-0 group-hover/tab:opacity-60 hover:!opacity-100 hover:bg-surface-variant focus-visible:opacity-100 focus-visible:outline-1 focus-visible:outline-primary transition-opacity"
+        @click.stop="closeTab(tab.id)"
+      >
+        <AppIcon icon="close" :size="12" />
+      </button>
+    </div>
   </div>
 </template>
diff --git a/apps/docs/src/composables/editorLink.ts b/apps/docs/src/composables/editorLink.ts
new file mode 100644
index 000000000..264badf54
--- /dev/null
+++ b/apps/docs/src/composables/editorLink.ts
@@ -0,0 +1,114 @@
+import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
+
+export interface EditorFile {
+  name: string
+  code: string
+}
+
+function utoa (data: string): string {
+  const buffer = strToU8(data)
+  const zipped = zlibSync(buffer, { level: 9 })
+  const binary = strFromU8(zipped, true)
+  return btoa(binary)
+}
+
+function atou (base64: string): string {
+  const binary = atob(base64)
+  const buffer = strToU8(binary, true)
+  const unzipped = unzlibSync(buffer)
+  return strFromU8(unzipped)
+}
+
+/**
+ * Detect which file is the entry point for a multi-file example.
+ */
+function detectEntryFile (files: EditorFile[]): EditorFile | undefined {
+  const vueFiles = files.filter(f => f.name.endsWith('.vue'))
+
+  const entryNames = ['index.vue', 'App.vue', 'example.vue', 'main.vue']
+  for (const name of entryNames) {
+    const found = vueFiles.find(f => f.name.toLowerCase() === name.toLowerCase())
+    if (found) return found
+  }
+
+  for (const file of vueFiles) {
+    const importsOthers = files.some(other =>
+      other !== file && file.code.includes(`./${other.name.replace(/\.\w+$/, '')}`),
+    )
+    if (importsOthers) return file
+  }
+
+  return vueFiles.at(-1)
+}
+
+/**
+ * Generate an App.vue wrapper that imports and renders the entry component.
+ */
+function generateAppWrapper (entryPath: string): string {
+  const baseName = entryPath.split('/').pop()!.replace(/\.vue$/, '')
+  const pascalName = baseName.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join('')
+
+  return `<script setup lang="ts">
+  import ${pascalName} from './${entryPath}'
+</script>
+
+<template>
+  <div class="p-4">
+    <${pascalName} />
+  </div>
+</template>
+`
+}
+
+/**
+ * Build the src/-prefixed file record that loadExample expects.
+ * When dir is provided, files are nested: src/{dir}/{name}
+ */
+function buildEditorFiles (inputFiles: EditorFile[], dir?: string): Record<string, string> {
+  const files: Record<string, string> = {}
+  const prefix = dir ? `src/${dir}` : 'src'
+
+  for (const file of inputFiles) {
+    const path = file.name.startsWith('src/') ? file.name : `${prefix}/${file.name}`
+    files[path] = file.code
+  }
+
+  const hasAppVue = inputFiles.some(f => f.name.toLowerCase() === 'app.vue')
+  if (!hasAppVue) {
+    const entryFile = detectEntryFile(inputFiles)
+    if (entryFile) {
+      const entryPath = dir ? `${dir}/${entryFile.name}` : entryFile.name
+      files['src/App.vue'] = generateAppWrapper(entryPath)
+    }
+  }
+
+  return files
+}
+
+/**
+ * Get editor URL for a single file.
+ */
+export function useEditorLink (code: string, fileName = 'Example.vue'): string {
+  return useEditorLinkMulti([{ name: fileName, code }])
+}
+
+/**
+ * Get editor URL for multiple files.
+ * When dir is provided, files are nested under src/{dir}/.
+ */
+export function useEditorLinkMulti (inputFiles: EditorFile[], dir?: string): string {
+  const files = buildEditorFiles(inputFiles, dir)
+  const hash = utoa(JSON.stringify(files))
+  return `/editor#${hash}`
+}
+
+/**
+ * Decode an editor hash back to a file record.
+ */
+export function decodeEditorHash (hash: string): Record<string, string> | null {
+  try {
+    return JSON.parse(atou(hash))
+  } catch {
+    return null
+  }
+}
diff --git a/apps/docs/src/data/editor-defaults.ts b/apps/docs/src/data/editor-defaults.ts
index 8eabd04bb..4d0a8a5e0 100644
--- a/apps/docs/src/data/editor-defaults.ts
+++ b/apps/docs/src/data/editor-defaults.ts
@@ -1,12 +1,13 @@
 // ── Template files (matching Vuetify Play's v0 template) ────────────────
 
-export const MAIN_TS = `import { createApp } from 'vue'
+export function createMainTs (defaultTheme: 'light' | 'dark' = 'light'): string {
+  return `import { createApp } from 'vue'
 import App from './App.vue'
 import { createThemePlugin } from '@vuetify/v0'
 import './uno.config.ts'
 
 const theme = createThemePlugin({
-  default: 'light',
+  default: '${defaultTheme}',
   themes: {
     light: {
       dark: false,
@@ -68,7 +69,15 @@ const theme = createThemePlugin({
 const app = createApp(App)
 app.use(theme)
 app.mount('#app')
+
+// Reveal after UnoCSS runtime processes initial styles
+requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    document.getElementById('app')!.style.opacity = '1'
+  })
+})
 `
+}
 
 export const UNO_CONFIG_TS = `// @ts-expect-error - esm.sh import
 import defineConfig from 'https://esm.sh/@unocss/runtime'
diff --git a/apps/docs/src/layouts/default.vue b/apps/docs/src/layouts/default.vue
index 71a207811..4522d8f98 100644
--- a/apps/docs/src/layouts/default.vue
+++ b/apps/docs/src/layouts/default.vue
@@ -59,6 +59,20 @@
     if (!IN_BROWSER) return
     document.body.style.overflow = ''
   })
+
+  // Prefetch editor dependencies during idle time so
+  // "Open in Editor" (new tab) loads from HTTP cache
+  if (IN_BROWSER) {
+    function prefetchEditor () {
+      import('@vue/repl').catch(() => {})
+      import('@vue/repl/monaco-editor').catch(() => {})
+    }
+    if (typeof requestIdleCallback === 'function') {
+      requestIdleCallback(prefetchEditor)
+    } else {
+      setTimeout(prefetchEditor, 3000)
+    }
+  }
 </script>
 
 <template>
diff --git a/apps/docs/src/pages/editor.vue b/apps/docs/src/pages/editor.vue
index 3b4fb26cc..366cf6cc3 100644
--- a/apps/docs/src/pages/editor.vue
+++ b/apps/docs/src/pages/editor.vue
@@ -7,17 +7,21 @@
 
   // Components
   import EditorBreadcrumbs from '@/components/editor/EditorBreadcrumbs.vue'
+  import EditorExamples from '@/components/editor/EditorExamples.vue'
   import EditorFileTree from '@/components/editor/EditorFileTree.vue'
   import EditorTabs from '@/components/editor/EditorTabs.vue'
 
+  // Composables
+  import { decodeEditorHash } from '@/composables/editorLink'
+
   // Utilities
   import { Repl, useStore, useVueImportMap } from '@vue/repl'
   import Monaco from '@vue/repl/monaco-editor'
-  import { computed, onMounted, shallowRef } from 'vue'
   import '@vue/repl/style.css'
+  import { computed, onMounted, shallowRef, watchEffect } from 'vue'
 
   // Data
-  import { DEFAULT_CODE, MAIN_TS, UNO_CONFIG_TS } from '@/data/editor-defaults'
+  import { createMainTs, DEFAULT_CODE, UNO_CONFIG_TS } from '@/data/editor-defaults'
 
   definePage({
     meta: {
@@ -58,24 +62,111 @@
     showOutput: shallowRef(true),
   })
 
-  const previewHead = '<style>body{margin:0}#app{min-height:100vh}</style>'
+  // Wind4 preflight reset + @property defaults.
+  // The UnoCSS runtime doesn't inject preflights or @property rules,
+  // so we provide the essential reset and opacity defaults that
+  // color-mix() based utilities (border-divider, bg-surface, etc.) rely on.
+  const previewHead = computed(() => `<style>
+    @property --un-border-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
+    @property --un-bg-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
+    @property --un-text-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
+    @property --un-shadow-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
+    @property --un-ring-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
+    @property --un-divide-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
+    @property --un-border-style { syntax: "*"; inherits: false; initial-value: solid }
+    *, ::before, ::after, ::backdrop { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid }
+    html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; -webkit-tap-highlight-color: transparent }
+    body { margin: 0; background-color: ${isDark.value ? '#121212' : '#ffffff'} }
+    #app { min-height: 100vh; opacity: 0; transition: opacity 0.15s }
+    button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer }
+    *:focus-visible { outline: 2px solid var(--v0-primary); outline-offset: 2px }
+    dialog::backdrop { background: rgb(0 0 0 / 0.3) }
+  </style>`)
 
   const isReady = shallowRef(false)
   const sidebarOpen = shallowRef(true)
+  const showExamples = shallowRef(false)
+  const fileTreeKey = shallowRef(0)
+
+  // Map nested file paths to their flat alias paths (e.g. src/dir/Foo.vue → src/Foo.vue)
+  // so edits to nested files propagate to the alias the REPL uses for imports
+  const aliasMap = shallowRef(new Map<string, string>())
 
   onMounted(async () => {
+    const hash = window.location.hash.slice(1)
+    const decoded = hash ? decodeEditorHash(hash) : null
+
+    if (decoded) {
+      history.replaceState(null, '', window.location.pathname)
+      await loadExample(decoded)
+    } else {
+      await store.setFiles(
+        {
+          'src/main.ts': createMainTs(isDark.value ? 'dark' : 'light'),
+          'src/uno.config.ts': UNO_CONFIG_TS,
+          'src/App.vue': DEFAULT_CODE,
+        },
+        'src/main.ts',
+      )
+      store.files['src/main.ts']!.hidden = true
+      store.files['src/uno.config.ts']!.hidden = true
+      store.setActive('src/App.vue')
+    }
+
+    isReady.value = true
+  })
+
+  async function loadExample (files: Record<string, string>) {
+    showExamples.value = false
+
+    // Create hidden flat aliases for nested files so the REPL's runtime
+    // import resolution works. The REPL resolves all `./X` as `src/X`,
+    // so `src/dir/Foo.vue` needs a hidden `src/Foo.vue` alias.
+    const aliases: Record<string, string> = {}
+    const nextAliasMap = new Map<string, string>()
+
+    for (const [path, code] of Object.entries(files)) {
+      const rel = path.replace(/^src\//, '')
+      const parts = rel.split('/')
+      if (parts.length > 1) {
+        const flatPath = `src/${parts.at(-1)}`
+        if (!files[flatPath]) {
+          aliases[flatPath] = code
+          nextAliasMap.set(path, flatPath)
+        }
+      }
+    }
+
+    aliasMap.value = nextAliasMap
+
     await store.setFiles(
       {
-        'src/main.ts': MAIN_TS,
+        'src/main.ts': createMainTs(isDark.value ? 'dark' : 'light'),
         'src/uno.config.ts': UNO_CONFIG_TS,
-        'src/App.vue': DEFAULT_CODE,
+        ...files,
+        ...aliases,
       },
       'src/main.ts',
     )
     store.files['src/main.ts']!.hidden = true
     store.files['src/uno.config.ts']!.hidden = true
-    store.setActive('src/App.vue')
-    isReady.value = true
+    for (const key of Object.keys(aliases)) {
+      if (store.files[key]) store.files[key]!.hidden = true
+    }
+
+    // Activate the first user file, not the generated App.vue wrapper
+    const userFile = Object.keys(files).find(f => f !== 'src/App.vue') ?? 'src/App.vue'
+    store.setActive(userFile)
+    fileTreeKey.value++
+  }
+
+  // Sync edits from nested files to their flat aliases
+  watchEffect(() => {
+    const file = store.activeFile
+    const flatPath = aliasMap.value.get(file.filename)
+    if (flatPath && store.files[flatPath]) {
+      store.files[flatPath]!.code = file.code
+    }
   })
 </script>
 
@@ -93,10 +184,40 @@
           <AppIcon icon="arrow-left" :size="18" />
         </RouterLink>
 
-        <span class="text-sm font-semibold text-on-surface">v0 Editor</span>
+        <img
+          alt="Vuetify Play"
+          class="h-8"
+          :src="isDark
+            ? 'https://vuetifyjs.b-cdn.net/docs/images/one/logos/vplay-logo-dark.svg'
+            : 'https://vuetifyjs.b-cdn.net/docs/images/one/logos/vplay-logo-light.svg'"
+        >
       </div>
 
       <div class="flex items-center gap-2">
+        <div class="relative">
+          <button
+            aria-label="Load example"
+            class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+            title="Load example"
+            @click="showExamples = !showExamples"
+          >
+            <AppIcon icon="examples" :size="18" />
+          </button>
+
+          <div
+            v-if="showExamples"
+            class="fixed inset-0 z-40"
+            @click="showExamples = false"
+          />
+
+          <div
+            v-if="showExamples"
+            class="absolute top-full right-0 mt-1 w-[280px] bg-surface border border-divider rounded-lg shadow-lg z-50"
+          >
+            <EditorExamples @select="loadExample" />
+          </div>
+        </div>
+
         <button
           aria-label="Toggle sidebar"
           class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
@@ -114,7 +235,7 @@
     <Transition name="fade">
       <div v-if="isReady" class="editor-repl flex-1 min-h-0 p-2" :class="{ dark: isDark }">
         <div class="editor-wrapper">
-          <EditorFileTree v-if="sidebarOpen" :store="store" />
+          <EditorFileTree v-if="sidebarOpen" :key="fileTreeKey" :store="store" />
 
           <div class="editor-repl-container flex flex-col">
             <EditorTabs :store="store" />

From 5466fedaa9d3da45a9cefc44f6908fbbcdd80bfd Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 13 Feb 2026 20:53:01 -0600
Subject: [PATCH 06/39] docs(editor): resizable file panel, tab close
 improvements, and polish

- Add draggable resize handle for file panel using v0 useToggleScope/useEventListener
- Persist sidebar width to localStorage via useStorage
- Add Ctrl+B hotkey to toggle file panel (useHotkey)
- Allow closing all tabs, show "Open file" button when empty
- Hide breadcrumbs and REPL when no tabs open
- Use vuetify-play icon for "Open in Editor" buttons
- Skip hidden alias files from project folder in file tree
- Add lang="ts" to new .vue file boilerplate
- Double-click resize handle resets to default width
- Stabilize previewOptions as computed to prevent re-renders during resize
- Preserve URL hash for shareable editor links
- Fix editor-container height to fill available space
---
 .../src/components/docs/DocsCodeActions.vue   | 18 +++--
 apps/docs/src/components/docs/DocsExample.vue | 24 ++++--
 .../src/components/editor/EditorFileTree.vue  | 11 ++-
 .../docs/src/components/editor/EditorTabs.vue | 58 ++++++++-----
 apps/docs/src/pages/editor.vue                | 81 ++++++++++++++++---
 5 files changed, 149 insertions(+), 43 deletions(-)

diff --git a/apps/docs/src/components/docs/DocsCodeActions.vue b/apps/docs/src/components/docs/DocsCodeActions.vue
index 82b355bd4..7d87f767c 100644
--- a/apps/docs/src/components/docs/DocsCodeActions.vue
+++ b/apps/docs/src/components/docs/DocsCodeActions.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
   // Composables
   import { getBinUrl } from '@/composables/bin'
-  import { usePlayground } from '@/composables/playground'
+  import { useEditorLink } from '@/composables/editorLink'
   import { useClipboard } from '@/composables/useClipboard'
 
   const props = defineProps<{
     code: string
     language?: string
+    fileName?: string
     title?: string
     binTitle?: string
     playground?: boolean
@@ -28,8 +29,13 @@
     window.open(url, '_blank')
   }
 
-  function openInPlayground () {
-    const url = usePlayground(props.code)
+  function openInEditor () {
+    let name = props.fileName
+    // Ensure the file has a proper extension (e.g. "Anatomy" → "Anatomy.vue")
+    if (name && !/\.\w+$/.test(name)) {
+      name = `${name}.${props.language || 'vue'}`
+    }
+    const url = useEditorLink(props.code, name)
     window.open(url, '_blank')
   }
 </script>
@@ -38,11 +44,11 @@
   <div class="flex gap-1">
     <AppIconButton
       v-if="playground"
-      aria-label="Open in Vuetify Play"
+      aria-label="Open in Editor"
       icon="vuetify-play"
-      title="Open in Vuetify Play"
+      title="Open in Editor"
       type="button"
-      @click="openInPlayground"
+      @click="openInEditor"
     />
 
     <AppIconButton
diff --git a/apps/docs/src/components/docs/DocsExample.vue b/apps/docs/src/components/docs/DocsExample.vue
index cf0ef5b0c..fe48b219f 100644
--- a/apps/docs/src/components/docs/DocsExample.vue
+++ b/apps/docs/src/components/docs/DocsExample.vue
@@ -7,7 +7,7 @@
 
   // Composables
   import { getMultiFileBinUrl } from '@/composables/bin'
-  import { usePlaygroundMulti } from '@/composables/playground'
+  import { useEditorLinkMulti } from '@/composables/editorLink'
   import { useExamples } from '@/composables/useExamples'
 
   // Utilities
@@ -153,10 +153,20 @@
     props.file?.split('/').pop() || (props.filePath ? `${props.filePath.split('/').pop()}.vue` : ''),
   )
 
-  function openAllInPlayground () {
-    if (!displayFiles.value?.length) return
-    const files = displayFiles.value.map(f => ({ name: f.name, code: f.code }))
-    const url = usePlaygroundMulti(files)
+  // Extract the feature directory from the example path
+  // e.g. 'components/pagination/basic' → 'pagination'
+  const exampleDir = computed(() => {
+    const path = props.filePath ?? props.filePaths?.[0]
+    if (!path) return undefined
+    const parts = path.split('/')
+    return parts.length >= 2 ? parts.at(-2) : undefined
+  })
+
+  function openAllInEditor () {
+    if (!resolvedFiles.value?.length) return
+    // Reverse so dependencies compile before the files that import them
+    const files = resolvedFiles.value.toReversed().map(f => ({ name: f.name, code: f.code }))
+    const url = useEditorLinkMulti(files, exampleDir.value)
     window.open(url, '_blank')
   }
 
@@ -293,9 +303,9 @@
             <div class="ml-auto flex items-center gap-1">
               <button
                 class="size-[30px] rounded text-on-surface-variant hover:bg-surface-variant transition-colors inline-flex items-center justify-center"
-                title="Open in Playground"
+                title="Open in Editor"
                 type="button"
-                @click="openAllInPlayground"
+                @click="openAllInEditor"
               >
                 <AppIcon icon="vuetify-play" :size="16" />
               </button>
diff --git a/apps/docs/src/components/editor/EditorFileTree.vue b/apps/docs/src/components/editor/EditorFileTree.vue
index d9b101709..0479793bf 100644
--- a/apps/docs/src/components/editor/EditorFileTree.vue
+++ b/apps/docs/src/components/editor/EditorFileTree.vue
@@ -22,11 +22,15 @@
   const srcFiles: string[] = []
   const projectFiles: string[] = []
 
+  const HIDDEN_PROJECT = new Set(['src/main.ts', 'src/uno.config.ts'])
+
   for (const [filename, file] of Object.entries(props.store.files)) {
     if (BUILT_IN_PROJECT.includes(filename)) continue
 
     if (file.hidden) {
-      projectFiles.push(filename)
+      // Only show known infrastructure files in the project folder,
+      // skip alias files created for REPL import resolution
+      if (HIDDEN_PROJECT.has(filename)) projectFiles.push(filename)
     } else {
       srcFiles.push(filename)
     }
@@ -218,6 +222,9 @@
 
     if (type === 'file') {
       props.store.addFile(itemId)
+      if (itemId.endsWith('.vue')) {
+        props.store.files[itemId]!.code = '<script setup lang="ts"><\/script>\n\n<template>\n  <div>\n    <slot />\n  </div>\n</template>\n'
+      }
       props.store.setActive(itemId)
     } else {
       tree.open(itemId)
@@ -252,7 +259,7 @@
 </script>
 
 <template>
-  <nav class="w-[200px] border-r border-divider bg-surface overflow-y-auto shrink-0">
+  <nav class="border-r border-divider bg-surface overflow-y-auto shrink-0">
     <div class="flex items-center justify-between px-3 py-2">
       <span class="text-xs font-semibold text-on-surface-variant uppercase tracking-wide">Files</span>
 
diff --git a/apps/docs/src/components/editor/EditorTabs.vue b/apps/docs/src/components/editor/EditorTabs.vue
index 9b8335b5d..0212cf81c 100644
--- a/apps/docs/src/components/editor/EditorTabs.vue
+++ b/apps/docs/src/components/editor/EditorTabs.vue
@@ -21,6 +21,9 @@
       }))
   })
 
+  const hasTabs = computed(() => tabs.value.length > 0)
+  defineExpose({ hasTabs })
+
   const activeFile = computed(() => props.store.activeFile.filename)
 
   // Re-open tab when file is activated from tree
@@ -32,6 +35,13 @@
     }
   })
 
+  function openFile (id: string) {
+    const next = new Set(closedTabs.value)
+    next.delete(id)
+    closedTabs.value = next
+    props.store.setActive(id)
+  }
+
   function closeTab (id: string) {
     // Find next tab before modifying state
     const idx = tabs.value.findIndex(t => t.id === id)
@@ -50,25 +60,35 @@
 
 <template>
   <div class="flex items-end gap-px overflow-x-auto border-b border-divider bg-surface-variant/30">
-    <div
-      v-for="tab in tabs"
-      :key="tab.id"
-      class="group/tab shrink-0 flex items-center gap-1 pl-3 pr-1 py-1.5 text-xs transition-colors border-b-2 cursor-pointer"
-      :class="tab.id === activeFile
-        ? 'text-on-surface border-primary bg-surface'
-        : 'text-on-surface-variant border-transparent hover:text-on-surface hover:bg-surface-tint'"
-      @click="store.setActive(tab.id)"
-    >
-      <span>{{ tab.label }}</span>
-
-      <button
-        v-if="tabs.length > 1"
-        aria-label="Close tab"
-        class="inline-flex items-center justify-center size-4 rounded-sm opacity-0 group-hover/tab:opacity-60 hover:!opacity-100 hover:bg-surface-variant focus-visible:opacity-100 focus-visible:outline-1 focus-visible:outline-primary transition-opacity"
-        @click.stop="closeTab(tab.id)"
+    <template v-if="hasTabs">
+      <div
+        v-for="tab in tabs"
+        :key="tab.id"
+        class="group/tab shrink-0 flex items-center gap-1 pl-3 pr-1 py-1.5 text-xs transition-colors border-b-2 cursor-pointer"
+        :class="tab.id === activeFile
+          ? 'text-on-surface border-primary bg-surface'
+          : 'text-on-surface-variant border-transparent hover:text-on-surface hover:bg-surface-tint'"
+        @click="store.setActive(tab.id)"
       >
-        <AppIcon icon="close" :size="12" />
-      </button>
-    </div>
+        <span>{{ tab.label }}</span>
+
+        <button
+          aria-label="Close tab"
+          class="inline-flex items-center justify-center size-4 rounded-sm opacity-0 group-hover/tab:opacity-60 hover:!opacity-100 hover:bg-surface-variant focus-visible:opacity-100 focus-visible:outline-1 focus-visible:outline-primary transition-opacity"
+          @click.stop="closeTab(tab.id)"
+        >
+          <AppIcon icon="close" :size="12" />
+        </button>
+      </div>
+    </template>
+
+    <button
+      v-else
+      class="flex items-center gap-1.5 px-3 py-1.5 text-xs text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer"
+      @click="openFile('src/App.vue')"
+    >
+      <AppIcon icon="file-plus" :size="14" />
+      <span>Open file</span>
+    </button>
   </div>
 </template>
diff --git a/apps/docs/src/pages/editor.vue b/apps/docs/src/pages/editor.vue
index 366cf6cc3..59ee30c16 100644
--- a/apps/docs/src/pages/editor.vue
+++ b/apps/docs/src/pages/editor.vue
@@ -3,7 +3,7 @@
   import { definePage } from 'unplugin-vue-router/runtime'
 
   // Framework
-  import { useTheme } from '@vuetify/v0'
+  import { useEventListener, useHotkey, useStorage, useTheme, useToggleScope } from '@vuetify/v0'
 
   // Components
   import EditorBreadcrumbs from '@/components/editor/EditorBreadcrumbs.vue'
@@ -83,10 +83,40 @@
     dialog::backdrop { background: rgb(0 0 0 / 0.3) }
   </style>`)
 
+  const previewOptions = computed(() => ({ headHTML: previewHead.value }))
+
   const isReady = shallowRef(false)
   const sidebarOpen = shallowRef(true)
+  useHotkey('ctrl+b', () => {
+    sidebarOpen.value = !sidebarOpen.value
+  }, { inputs: true })
   const showExamples = shallowRef(false)
   const fileTreeKey = shallowRef(0)
+  const editorTabs = shallowRef<InstanceType<typeof EditorTabs> | null>(null)
+  const hasTabs = computed(() => editorTabs.value?.hasTabs ?? true)
+
+  // ── Sidebar resize ─────────────────────────────────────────────────────
+  const storage = useStorage()
+  const sidebarWidth = storage.get<number>('editor-sidebar-width', 250)
+  const isResizing = shallowRef(false)
+  const resizeStartX = shallowRef(0)
+  const resizeStartWidth = shallowRef(0)
+
+  function onResizeStart (e: PointerEvent) {
+    e.preventDefault()
+    resizeStartX.value = e.clientX
+    resizeStartWidth.value = sidebarWidth.value
+    isResizing.value = true
+  }
+
+  useToggleScope(() => isResizing.value, () => {
+    useEventListener(document, 'pointermove', (e: PointerEvent) => {
+      sidebarWidth.value = Math.max(140, Math.min(400, resizeStartWidth.value + e.clientX - resizeStartX.value))
+    })
+    useEventListener(document, 'pointerup', () => {
+      isResizing.value = false
+    })
+  })
 
   // Map nested file paths to their flat alias paths (e.g. src/dir/Foo.vue → src/Foo.vue)
   // so edits to nested files propagate to the alias the REPL uses for imports
@@ -97,7 +127,6 @@
     const decoded = hash ? decodeEditorHash(hash) : null
 
     if (decoded) {
-      history.replaceState(null, '', window.location.pathname)
       await loadExample(decoded)
     } else {
       await store.setFiles(
@@ -233,21 +262,36 @@
 
     <!-- REPL Editor -->
     <Transition name="fade">
-      <div v-if="isReady" class="editor-repl flex-1 min-h-0 p-2" :class="{ dark: isDark }">
-        <div class="editor-wrapper">
-          <EditorFileTree v-if="sidebarOpen" :key="fileTreeKey" :store="store" />
+      <div v-if="isReady" class="editor-repl flex-1 min-h-0 px-2 pt-2" :class="{ dark: isDark }">
+        <div class="editor-wrapper" :class="{ 'select-none': isResizing }">
+          <EditorFileTree
+            v-if="sidebarOpen"
+            :key="fileTreeKey"
+            :store="store"
+            :style="{ width: `${sidebarWidth}px` }"
+          />
+
+          <div
+            v-if="sidebarOpen"
+            class="editor-resize-handle"
+            :class="{ 'editor-resize-handle--active': isResizing }"
+            @dblclick="sidebarWidth = 250"
+            @pointerdown="onResizeStart"
+          />
 
           <div class="editor-repl-container flex flex-col">
-            <EditorTabs :store="store" />
-            <EditorBreadcrumbs :store="store" />
+            <EditorTabs ref="editorTabs" :store="store" />
+            <EditorBreadcrumbs v-if="hasTabs" :store="store" />
 
             <Repl
+              v-show="hasTabs"
               :auto-resize="true"
               class="flex-1 min-h-0"
+              :class="{ 'pointer-events-none': isResizing }"
               :clear-console="true"
               :editor="Monaco"
               layout="horizontal"
-              :preview-options="{ headHTML: previewHead }"
+              :preview-options="previewOptions"
               :preview-theme="true"
               :show-compile-output="false"
               :show-import-map="false"
@@ -270,11 +314,25 @@
   .editor-wrapper {
     display: flex;
     height: 100%;
-    border-radius: 8px;
+    border-radius: 8px 8px 0 0;
     border: 1px solid var(--v0-divider);
+    border-bottom: none;
     overflow: hidden;
   }
 
+  .editor-resize-handle {
+    width: 4px;
+    cursor: col-resize;
+    background: transparent;
+    transition: background 0.15s;
+    flex-shrink: 0;
+  }
+
+  .editor-resize-handle:hover,
+  .editor-resize-handle--active {
+    background: var(--v0-primary);
+  }
+
   .editor-repl-container {
     flex: 1;
     min-width: 0;
@@ -285,6 +343,11 @@
     --color-branding-dark: var(--v0-primary);
   }
 
+  /* Ensure editor fills available height */
+  .editor-repl :deep(.editor-container) {
+    height: 100%;
+  }
+
   /* Hide editor floating toggles (auto-save / show error) */
   .editor-repl :deep(.editor-floating) {
     display: none !important;

From 49e83fcfafa8b9d503371ec6f6c390b9682164e0 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 13 Feb 2026 22:09:25 -0600
Subject: [PATCH 07/39] docs(editor): extract composables, lazy-load fflate,
 and improve UX

Extract useEditorFiles and useFileTreeCrud composables to reduce
component complexity. Lazy-load fflate to remove ~13KB from the shared
docs bundle. Replace backdrop overlay with useClickOutside + Escape
key support. Consolidate infrastructure file constants, deduplicate
generateAppWrapper, alphabetize file tree, and guard activeFile access.
---
 apps/docs/src/components.d.ts                 |   1 +
 .../src/components/docs/DocsCodeActions.vue   |   4 +-
 apps/docs/src/components/docs/DocsExample.vue |   4 +-
 .../components/editor/EditorBreadcrumbs.vue   |   2 +-
 .../src/components/editor/EditorExamples.vue  |  49 +++---
 .../src/components/editor/EditorFileTree.vue  | 145 +++---------------
 .../docs/src/components/editor/EditorTabs.vue |  78 +++++-----
 apps/docs/src/composables/editorLink.ts       |  51 +++---
 apps/docs/src/composables/useEditorFiles.ts   |  98 ++++++++++++
 apps/docs/src/composables/useFileTreeCrud.ts  | 127 +++++++++++++++
 apps/docs/src/data/editor-defaults.ts         |   8 +
 apps/docs/src/pages/editor.vue                | 126 +++------------
 12 files changed, 384 insertions(+), 309 deletions(-)
 create mode 100644 apps/docs/src/composables/useEditorFiles.ts
 create mode 100644 apps/docs/src/composables/useFileTreeCrud.ts

diff --git a/apps/docs/src/components.d.ts b/apps/docs/src/components.d.ts
index 1b8d5eb65..bd9a2ffac 100644
--- a/apps/docs/src/components.d.ts
+++ b/apps/docs/src/components.d.ts
@@ -122,6 +122,7 @@ declare module 'vue' {
     DocsSkillToggle: typeof import('./components/docs/meta/DocsSkillToggle.vue')['default']
     DocsToc: typeof import('./components/docs/DocsToc.vue')['default']
     EditorBreadcrumbs: typeof import('./components/editor/EditorBreadcrumbs.vue')['default']
+    EditorExamples: typeof import('./components/editor/EditorExamples.vue')['default']
     EditorFileTree: typeof import('./components/editor/EditorFileTree.vue')['default']
     EditorTabs: typeof import('./components/editor/EditorTabs.vue')['default']
     HomeAiFirst: typeof import('./components/home/HomeAiFirst.vue')['default']
diff --git a/apps/docs/src/components/docs/DocsCodeActions.vue b/apps/docs/src/components/docs/DocsCodeActions.vue
index 7d87f767c..fd94d3f48 100644
--- a/apps/docs/src/components/docs/DocsCodeActions.vue
+++ b/apps/docs/src/components/docs/DocsCodeActions.vue
@@ -29,13 +29,13 @@
     window.open(url, '_blank')
   }
 
-  function openInEditor () {
+  async function openInEditor () {
     let name = props.fileName
     // Ensure the file has a proper extension (e.g. "Anatomy" → "Anatomy.vue")
     if (name && !/\.\w+$/.test(name)) {
       name = `${name}.${props.language || 'vue'}`
     }
-    const url = useEditorLink(props.code, name)
+    const url = await useEditorLink(props.code, name)
     window.open(url, '_blank')
   }
 </script>
diff --git a/apps/docs/src/components/docs/DocsExample.vue b/apps/docs/src/components/docs/DocsExample.vue
index fe48b219f..127735edd 100644
--- a/apps/docs/src/components/docs/DocsExample.vue
+++ b/apps/docs/src/components/docs/DocsExample.vue
@@ -162,11 +162,11 @@
     return parts.length >= 2 ? parts.at(-2) : undefined
   })
 
-  function openAllInEditor () {
+  async function openAllInEditor () {
     if (!resolvedFiles.value?.length) return
     // Reverse so dependencies compile before the files that import them
     const files = resolvedFiles.value.toReversed().map(f => ({ name: f.name, code: f.code }))
-    const url = useEditorLinkMulti(files, exampleDir.value)
+    const url = await useEditorLinkMulti(files, exampleDir.value)
     window.open(url, '_blank')
   }
 
diff --git a/apps/docs/src/components/editor/EditorBreadcrumbs.vue b/apps/docs/src/components/editor/EditorBreadcrumbs.vue
index f7e71ab1e..917a0f9ce 100644
--- a/apps/docs/src/components/editor/EditorBreadcrumbs.vue
+++ b/apps/docs/src/components/editor/EditorBreadcrumbs.vue
@@ -13,7 +13,7 @@
   }>()
 
   const segments = computed(() => {
-    return props.store.activeFile.filename.split('/')
+    return props.store.activeFile?.filename?.split('/') ?? []
   })
 </script>
 
diff --git a/apps/docs/src/components/editor/EditorExamples.vue b/apps/docs/src/components/editor/EditorExamples.vue
index 933dec4e8..0329d2382 100644
--- a/apps/docs/src/components/editor/EditorExamples.vue
+++ b/apps/docs/src/components/editor/EditorExamples.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+  // Composables
+  import { generateAppWrapper } from '@/composables/editorLink'
+
   const raw = import.meta.glob('@/examples/**/*.{vue,ts,js}', {
     query: '?raw',
     import: 'default',
@@ -41,6 +44,15 @@
     dirMap.get(dir)!.push({ filename, loader })
   }
 
+  // Directories with non-vue helpers or PascalCase .vue files are
+  // multi-file examples (e.g. create-context/ with context.ts + NotificationConsumer.vue).
+  // Directories with only lowercase .vue files contain standalone examples.
+  function isMultiFileExample (files: ExampleFile[]) {
+    return files.some(f =>
+      !f.filename.endsWith('.vue') || /^[A-Z]/.test(f.filename),
+    )
+  }
+
   // Build categories
   const ORDER = ['components', 'composables', 'guide']
 
@@ -52,10 +64,24 @@
 
       const parts = dir.split('/')
       const topLevel = parts[0]
-      const label = parts.slice(1).join(' / ')
+      const dirLabel = parts.slice(1).join(' / ')
 
       if (!grouped.has(topLevel)) grouped.set(topLevel, [])
-      grouped.get(topLevel)!.push({ dir, label: label || dir, files })
+
+      if (isMultiFileExample(files)) {
+        // Group all files as one example entry
+        grouped.get(topLevel)!.push({ dir, label: dirLabel || dir, files })
+      } else {
+        // Each .vue file is its own example entry
+        for (const file of files) {
+          const name = file.filename.replace(/\.vue$/, '')
+          grouped.get(topLevel)!.push({
+            dir,
+            label: dirLabel ? `${dirLabel} / ${name}` : name,
+            files: [file],
+          })
+        }
+      }
     }
 
     return ORDER
@@ -66,23 +92,6 @@
       }))
   })()
 
-  function generateAppWrapper (entryPath: string): string {
-    const baseName = entryPath.split('/').pop()!.replace(/\.vue$/, '')
-    const pascalName = baseName.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join('')
-    return [
-      '<' + `script setup lang="ts">`,
-      `  import ${pascalName} from './${entryPath}'`,
-      '</' + 'script>',
-      '',
-      '<template>',
-      '  <div class="p-4">',
-      `    <${pascalName} />`,
-      '  </div>',
-      '</template>',
-      '',
-    ].join('\n')
-  }
-
   async function select (dir: ExampleDir) {
     // Load all file contents in parallel
     const loaded = await Promise.all(
@@ -126,7 +135,7 @@
 
       <button
         v-for="item in cat.dirs"
-        :key="item.dir"
+        :key="item.label"
         class="w-full text-left px-3 py-1.5 text-sm text-on-surface opacity-80 hover:opacity-100 hover:bg-surface-tint transition-colors cursor-pointer"
         @click="select(item)"
       >
diff --git a/apps/docs/src/components/editor/EditorFileTree.vue b/apps/docs/src/components/editor/EditorFileTree.vue
index 0479793bf..075ad2fbe 100644
--- a/apps/docs/src/components/editor/EditorFileTree.vue
+++ b/apps/docs/src/components/editor/EditorFileTree.vue
@@ -2,12 +2,18 @@
   // Framework
   import { createNested, useProxyRegistry } from '@vuetify/v0'
 
+  // Composables
+  import { useFileTreeCrud } from '@/composables/useFileTreeCrud'
+
   // Utilities
-  import { computed, nextTick, shallowRef } from 'vue'
+  import { computed } from 'vue'
 
   // Types
   import type { ReplStore } from '@vue/repl'
 
+  // Data
+  import { INFRASTRUCTURE_FILES, REPL_BUILTIN_FILES } from '@/data/editor-defaults'
+
   const props = defineProps<{
     store: ReplStore
   }>()
@@ -15,22 +21,22 @@
   const tree = createNested()
 
   // Derive tree from store.files so it works with any loaded file set
-  const BUILT_IN_PROJECT = ['import-map.json', 'tsconfig.json']
-
   // Build nested tree structure from file paths
   // e.g. 'src/pagination/basic.vue' → src > pagination > basic.vue
   const srcFiles: string[] = []
   const projectFiles: string[] = []
 
-  const HIDDEN_PROJECT = new Set(['src/main.ts', 'src/uno.config.ts'])
-
   for (const [filename, file] of Object.entries(props.store.files)) {
-    if (BUILT_IN_PROJECT.includes(filename)) continue
+    if (REPL_BUILTIN_FILES.includes(filename as typeof REPL_BUILTIN_FILES[number])) continue
 
     if (file.hidden) {
-      // Only show known infrastructure files in the project folder,
-      // skip alias files created for REPL import resolution
-      if (HIDDEN_PROJECT.has(filename)) projectFiles.push(filename)
+      // Show main.ts under src/, other infrastructure files under /
+      if (filename === 'src/main.ts') {
+        srcFiles.push(filename)
+      } else if (INFRASTRUCTURE_FILES.has(filename)) {
+        projectFiles.push(filename)
+      }
+      // Skip alias files created for REPL import resolution
     } else {
       srcFiles.push(filename)
     }
@@ -67,8 +73,8 @@
       })
     }
 
-    // Then direct files
-    children.push(...direct)
+    // Then direct files (sorted)
+    children.push(...direct.toSorted((a, b) => a.value.localeCompare(b.value)))
     return children
   }
 
@@ -79,11 +85,11 @@
       children: buildChildren(srcFiles, 'src'),
     },
     {
-      id: 'project',
-      value: 'project',
+      id: '/',
+      value: '/',
       children: [
         ...projectFiles.map(f => ({ id: f, value: f.split('/').pop()! })),
-        ...BUILT_IN_PROJECT.map(f => ({ id: f, value: f })),
+        ...REPL_BUILTIN_FILES.map(f => ({ id: f, value: f })),
       ],
     },
   ])
@@ -99,36 +105,12 @@
   }
 
   const proxy = useProxyRegistry(tree)
-  const activeFile = computed(() => props.store.activeFile.filename)
-
-  // ── CRUD State ─────────────────────────────────────────────────────────
-  const creating = shallowRef<string | null>(null)
-  const creatingType = shallowRef<'file' | 'folder'>('file')
-  const pending = shallowRef('')
-  const input = shallowRef<HTMLInputElement | null>(null)
-  const targetFolder = shallowRef('src')
+  const activeFile = computed(() => props.store.activeFile?.filename)
 
-  const PROTECTED = new Set(['src/App.vue', 'src/main.ts', 'src/uno.config.ts', 'import-map.json', 'tsconfig.json', 'src', 'project'])
-  const VALID_EXT = /\.(vue|jsx?|tsx?|css|json)$/
-
-  function isFile (id: string) {
-    return VALID_EXT.test(id)
-  }
-
-  const EXT_ICONS: Record<string, { icon: string, color: string }> = {
-    vue: { icon: 'lang-vue', color: '#4FC08D' },
-    ts: { icon: 'lang-ts', color: '#3179c7' },
-    tsx: { icon: 'lang-ts', color: '#3179c7' },
-    js: { icon: 'lang-js', color: '#d3b62a' },
-    jsx: { icon: 'lang-js', color: '#d3b62a' },
-    css: { icon: 'lang-css', color: '#1572B6' },
-    json: { icon: 'lang-json', color: '#a57b39' },
-  }
-
-  function fileExt (id: string) {
-    const ext = id.split('.').pop()
-    return ext ? EXT_ICONS[ext] : undefined
-  }
+  const {
+    creating, creatingType, pending, input, targetFolder,
+    isFile, fileExt, add, confirm, cancel, deletable, remove,
+  } = useFileTreeCrud(tree, props.store)
 
   // ── Tree helpers ───────────────────────────────────────────────────────
   function getVisibleNodes (parentId?: string): string[] {
@@ -179,83 +161,6 @@
       targetFolder.value = id
     }
   }
-
-  // ── CRUD Operations ────────────────────────────────────────────────────
-  function add (type: 'file' | 'folder') {
-    creating.value = targetFolder.value
-    creatingType.value = type
-    pending.value = ''
-    tree.open(targetFolder.value)
-    nextTick(() => input.value?.focus())
-  }
-
-  function confirm () {
-    const raw = pending.value.trim()
-    const folder = creating.value
-    const type = creatingType.value
-
-    cancel()
-
-    if (!raw || !folder) return
-
-    const segments = raw.split('/').filter(Boolean)
-    const last = segments.pop()!
-    let parentId = folder
-
-    // Validate based on creation type
-    if (type === 'file' && !VALID_EXT.test(last)) return
-
-    // Create intermediate folders
-    for (const seg of segments) {
-      const folderId = `${parentId}/${seg}`
-      if (!tree.has(folderId)) {
-        tree.register({ id: folderId, value: seg, parentId })
-      }
-      tree.open(folderId)
-      parentId = folderId
-    }
-
-    const itemId = `${parentId}/${last}`
-    if (tree.has(itemId)) return
-
-    tree.register({ id: itemId, value: last, parentId })
-
-    if (type === 'file') {
-      props.store.addFile(itemId)
-      if (itemId.endsWith('.vue')) {
-        props.store.files[itemId]!.code = '<script setup lang="ts"><\/script>\n\n<template>\n  <div>\n    <slot />\n  </div>\n</template>\n'
-      }
-      props.store.setActive(itemId)
-    } else {
-      tree.open(itemId)
-    }
-  }
-
-  function cancel () {
-    creating.value = null
-    pending.value = ''
-  }
-
-  function deletable (id: string): boolean {
-    if (PROTECTED.has(id)) return false
-    if (tree.hasAncestor(id, 'project')) return false
-    if (!isFile(id) && (tree.children.get(id)?.length ?? 0) > 0) return false
-    return true
-  }
-
-  function remove (id: string) {
-    const wasActive = activeFile.value === id
-
-    if (isFile(id)) {
-      props.store.deleteFile(id)
-    }
-
-    tree.unregister(id)
-
-    if (wasActive) {
-      props.store.setActive('src/App.vue')
-    }
-  }
 </script>
 
 <template>
diff --git a/apps/docs/src/components/editor/EditorTabs.vue b/apps/docs/src/components/editor/EditorTabs.vue
index 0212cf81c..fa4c18031 100644
--- a/apps/docs/src/components/editor/EditorTabs.vue
+++ b/apps/docs/src/components/editor/EditorTabs.vue
@@ -5,29 +5,37 @@
   // Types
   import type { ReplStore } from '@vue/repl'
 
+  // Data
+  import { INFRASTRUCTURE_FILES } from '@/data/editor-defaults'
+
   const props = defineProps<{
     store: ReplStore
   }>()
 
-  const PROJECT_FILES = new Set(['import-map.json', 'tsconfig.json', 'src/main.ts', 'src/uno.config.ts'])
-  const closedTabs = shallowRef(new Set<string>())
+  // Start with only the active file's tab open
+  const initialClosed = new Set<string>()
+  const active = props.store.activeFile.filename
+  for (const f of Object.values(props.store.files)) {
+    if (!f.hidden && !INFRASTRUCTURE_FILES.has(f.filename) && f.filename !== active) {
+      initialClosed.add(f.filename)
+    }
+  }
+  const closedTabs = shallowRef(initialClosed)
 
   const tabs = computed(() => {
     return Object.values(props.store.files)
-      .filter(f => !f.hidden && !PROJECT_FILES.has(f.filename) && !closedTabs.value.has(f.filename))
+      .filter(f => !f.hidden && !INFRASTRUCTURE_FILES.has(f.filename) && !closedTabs.value.has(f.filename))
       .map(f => ({
         id: f.filename,
         label: f.filename.split('/').pop()!,
       }))
   })
 
-  const hasTabs = computed(() => tabs.value.length > 0)
-  defineExpose({ hasTabs })
-
-  const activeFile = computed(() => props.store.activeFile.filename)
+  const activeFile = computed(() => props.store.activeFile?.filename)
 
   // Re-open tab when file is activated from tree
   watch(activeFile, file => {
+    if (!file) return
     if (closedTabs.value.has(file)) {
       const next = new Set(closedTabs.value)
       next.delete(file)
@@ -35,13 +43,6 @@
     }
   })
 
-  function openFile (id: string) {
-    const next = new Set(closedTabs.value)
-    next.delete(id)
-    closedTabs.value = next
-    props.store.setActive(id)
-  }
-
   function closeTab (id: string) {
     // Find next tab before modifying state
     const idx = tabs.value.findIndex(t => t.id === id)
@@ -60,35 +61,28 @@
 
 <template>
   <div class="flex items-end gap-px overflow-x-auto border-b border-divider bg-surface-variant/30">
-    <template v-if="hasTabs">
-      <div
-        v-for="tab in tabs"
-        :key="tab.id"
-        class="group/tab shrink-0 flex items-center gap-1 pl-3 pr-1 py-1.5 text-xs transition-colors border-b-2 cursor-pointer"
-        :class="tab.id === activeFile
+    <div
+      v-for="tab in tabs"
+      :key="tab.id"
+      class="group/tab shrink-0 flex items-center gap-1 pl-3 py-1.5 text-xs transition-colors border-b-2 cursor-pointer"
+      :class="[
+        tab.id === activeFile
           ? 'text-on-surface border-primary bg-surface'
-          : 'text-on-surface-variant border-transparent hover:text-on-surface hover:bg-surface-tint'"
-        @click="store.setActive(tab.id)"
-      >
-        <span>{{ tab.label }}</span>
-
-        <button
-          aria-label="Close tab"
-          class="inline-flex items-center justify-center size-4 rounded-sm opacity-0 group-hover/tab:opacity-60 hover:!opacity-100 hover:bg-surface-variant focus-visible:opacity-100 focus-visible:outline-1 focus-visible:outline-primary transition-opacity"
-          @click.stop="closeTab(tab.id)"
-        >
-          <AppIcon icon="close" :size="12" />
-        </button>
-      </div>
-    </template>
-
-    <button
-      v-else
-      class="flex items-center gap-1.5 px-3 py-1.5 text-xs text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer"
-      @click="openFile('src/App.vue')"
+          : 'text-on-surface-variant border-transparent hover:text-on-surface hover:bg-surface-tint',
+        tabs.length > 1 ? 'pr-1' : 'pr-3',
+      ]"
+      @click="store.setActive(tab.id)"
     >
-      <AppIcon icon="file-plus" :size="14" />
-      <span>Open file</span>
-    </button>
+      <span>{{ tab.label }}</span>
+
+      <button
+        v-if="tabs.length > 1"
+        aria-label="Close tab"
+        class="inline-flex items-center justify-center size-4 rounded-sm opacity-0 group-hover/tab:opacity-60 hover:!opacity-100 hover:bg-surface-variant focus-visible:opacity-100 focus-visible:outline-1 focus-visible:outline-primary transition-opacity"
+        @click.stop="closeTab(tab.id)"
+      >
+        <AppIcon icon="close" :size="12" />
+      </button>
+    </div>
   </div>
 </template>
diff --git a/apps/docs/src/composables/editorLink.ts b/apps/docs/src/composables/editorLink.ts
index 264badf54..6dab1c369 100644
--- a/apps/docs/src/composables/editorLink.ts
+++ b/apps/docs/src/composables/editorLink.ts
@@ -1,18 +1,26 @@
-import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
-
 export interface EditorFile {
   name: string
   code: string
 }
 
-function utoa (data: string): string {
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+let _fflate: typeof import('fflate') | undefined
+
+async function loadFflate () {
+  if (!_fflate) _fflate = await import('fflate')
+  return _fflate
+}
+
+async function utoa (data: string): Promise<string> {
+  const { strToU8, strFromU8, zlibSync } = await loadFflate()
   const buffer = strToU8(data)
   const zipped = zlibSync(buffer, { level: 9 })
   const binary = strFromU8(zipped, true)
   return btoa(binary)
 }
 
-function atou (base64: string): string {
+async function atou (base64: string): Promise<string> {
+  const { strToU8, strFromU8, unzlibSync } = await loadFflate()
   const binary = atob(base64)
   const buffer = strToU8(binary, true)
   const unzipped = unzlibSync(buffer)
@@ -44,20 +52,21 @@ function detectEntryFile (files: EditorFile[]): EditorFile | undefined {
 /**
  * Generate an App.vue wrapper that imports and renders the entry component.
  */
-function generateAppWrapper (entryPath: string): string {
+export function generateAppWrapper (entryPath: string): string {
   const baseName = entryPath.split('/').pop()!.replace(/\.vue$/, '')
   const pascalName = baseName.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join('')
-
-  return `<script setup lang="ts">
-  import ${pascalName} from './${entryPath}'
-</script>
-
-<template>
-  <div class="p-4">
-    <${pascalName} />
-  </div>
-</template>
-`
+  return [
+    '<' + `script setup lang="ts">`,
+    `  import ${pascalName} from './${entryPath}'`,
+    '</' + 'script>',
+    '',
+    '<template>',
+    '  <div class="p-4">',
+    `    <${pascalName} />`,
+    '  </div>',
+    '</template>',
+    '',
+  ].join('\n')
 }
 
 /**
@@ -88,7 +97,7 @@ function buildEditorFiles (inputFiles: EditorFile[], dir?: string): Record<strin
 /**
  * Get editor URL for a single file.
  */
-export function useEditorLink (code: string, fileName = 'Example.vue'): string {
+export async function useEditorLink (code: string, fileName = 'Example.vue'): Promise<string> {
   return useEditorLinkMulti([{ name: fileName, code }])
 }
 
@@ -96,18 +105,18 @@ export function useEditorLink (code: string, fileName = 'Example.vue'): string {
  * Get editor URL for multiple files.
  * When dir is provided, files are nested under src/{dir}/.
  */
-export function useEditorLinkMulti (inputFiles: EditorFile[], dir?: string): string {
+export async function useEditorLinkMulti (inputFiles: EditorFile[], dir?: string): Promise<string> {
   const files = buildEditorFiles(inputFiles, dir)
-  const hash = utoa(JSON.stringify(files))
+  const hash = await utoa(JSON.stringify(files))
   return `/editor#${hash}`
 }
 
 /**
  * Decode an editor hash back to a file record.
  */
-export function decodeEditorHash (hash: string): Record<string, string> | null {
+export async function decodeEditorHash (hash: string): Promise<Record<string, string> | null> {
   try {
-    return JSON.parse(atou(hash))
+    return JSON.parse(await atou(hash))
   } catch {
     return null
   }
diff --git a/apps/docs/src/composables/useEditorFiles.ts b/apps/docs/src/composables/useEditorFiles.ts
new file mode 100644
index 000000000..719eb8b5f
--- /dev/null
+++ b/apps/docs/src/composables/useEditorFiles.ts
@@ -0,0 +1,98 @@
+// Composables
+import { decodeEditorHash } from '@/composables/editorLink'
+
+// Utilities
+import { onMounted, shallowRef, watchEffect } from 'vue'
+
+// Types
+import type { ReplStore } from '@vue/repl'
+
+import { createMainTs, DEFAULT_CODE, UNO_CONFIG_TS } from '@/data/editor-defaults'
+
+export function useEditorFiles (store: ReplStore, isDark: () => boolean) {
+  const isReady = shallowRef(false)
+  const fileTreeKey = shallowRef(0)
+
+  // Map nested file paths to their flat alias paths (e.g. src/dir/Foo.vue → src/Foo.vue)
+  // so edits to nested files propagate to the alias the REPL uses for imports
+  const aliasMap = shallowRef(new Map<string, string>())
+
+  onMounted(async () => {
+    const hash = window.location.hash.slice(1)
+    const decoded = hash ? await decodeEditorHash(hash) : null
+
+    if (decoded) {
+      await loadExample(decoded)
+    } else {
+      const theme = isDark() ? 'dark' : 'light'
+      await store.setFiles(
+        {
+          'src/main.ts': createMainTs(theme),
+          'src/uno.config.ts': UNO_CONFIG_TS,
+          'src/App.vue': DEFAULT_CODE,
+        },
+        'src/main.ts',
+      )
+      store.files['src/main.ts']!.hidden = true
+      store.files['src/uno.config.ts']!.hidden = true
+      store.setActive('src/App.vue')
+    }
+
+    isReady.value = true
+  })
+
+  async function loadExample (files: Record<string, string>) {
+    // Create hidden flat aliases for nested files so the REPL's runtime
+    // import resolution works. The REPL resolves all `./X` as `src/X`,
+    // so `src/dir/Foo.vue` needs a hidden `src/Foo.vue` alias.
+    const aliases: Record<string, string> = {}
+    const nextAliasMap = new Map<string, string>()
+
+    for (const [path, code] of Object.entries(files)) {
+      const rel = path.replace(/^src\//, '')
+      const parts = rel.split('/')
+      if (parts.length > 1) {
+        const flatPath = `src/${parts.at(-1)}`
+        if (!files[flatPath]) {
+          aliases[flatPath] = code
+          nextAliasMap.set(path, flatPath)
+        }
+      }
+    }
+
+    aliasMap.value = nextAliasMap
+
+    const theme = isDark() ? 'dark' : 'light'
+    await store.setFiles(
+      {
+        'src/main.ts': createMainTs(theme),
+        'src/uno.config.ts': UNO_CONFIG_TS,
+        ...files,
+        ...aliases,
+      },
+      'src/main.ts',
+    )
+    store.files['src/main.ts']!.hidden = true
+    store.files['src/uno.config.ts']!.hidden = true
+    for (const key of Object.keys(aliases)) {
+      if (store.files[key]) store.files[key]!.hidden = true
+    }
+
+    // Activate the first user file, not the generated App.vue wrapper
+    const userFile = Object.keys(files).find(f => f !== 'src/App.vue') ?? 'src/App.vue'
+    store.setActive(userFile)
+    fileTreeKey.value++
+  }
+
+  // Sync edits from nested files to their flat aliases
+  watchEffect(() => {
+    const file = store.activeFile
+    if (!file) return
+    const flatPath = aliasMap.value.get(file.filename)
+    if (flatPath && store.files[flatPath]) {
+      store.files[flatPath]!.code = file.code
+    }
+  })
+
+  return { isReady, fileTreeKey, loadExample }
+}
diff --git a/apps/docs/src/composables/useFileTreeCrud.ts b/apps/docs/src/composables/useFileTreeCrud.ts
new file mode 100644
index 000000000..1c9980db9
--- /dev/null
+++ b/apps/docs/src/composables/useFileTreeCrud.ts
@@ -0,0 +1,127 @@
+// Utilities
+import { nextTick, shallowRef } from 'vue'
+
+// Types
+import type { ReplStore } from '@vue/repl'
+import type { NestedContext } from '@vuetify/v0'
+
+const PROTECTED = new Set(['src/App.vue', 'src/main.ts', 'src/uno.config.ts', 'import-map.json', 'tsconfig.json', 'src', '/'])
+const VALID_EXT = /\.(vue|jsx?|tsx?|css|json)$/
+
+const EXT_ICONS: Record<string, { icon: string, color: string }> = {
+  vue: { icon: 'lang-vue', color: '#4FC08D' },
+  ts: { icon: 'lang-ts', color: '#3179c7' },
+  tsx: { icon: 'lang-ts', color: '#3179c7' },
+  js: { icon: 'lang-js', color: '#d3b62a' },
+  jsx: { icon: 'lang-js', color: '#d3b62a' },
+  css: { icon: 'lang-css', color: '#1572B6' },
+  json: { icon: 'lang-json', color: '#a57b39' },
+}
+
+export function useFileTreeCrud (tree: NestedContext, store: ReplStore) {
+  const creating = shallowRef<string | null>(null)
+  const creatingType = shallowRef<'file' | 'folder'>('file')
+  const pending = shallowRef('')
+  const input = shallowRef<HTMLInputElement | null>(null)
+  const targetFolder = shallowRef('src')
+
+  function isFile (id: string) {
+    return VALID_EXT.test(id)
+  }
+
+  function fileExt (id: string) {
+    const ext = id.split('.').pop()
+    return ext ? EXT_ICONS[ext] : undefined
+  }
+
+  function add (type: 'file' | 'folder') {
+    creating.value = targetFolder.value
+    creatingType.value = type
+    pending.value = ''
+    tree.open(targetFolder.value)
+    nextTick(() => input.value?.focus())
+  }
+
+  function confirm () {
+    const raw = pending.value.trim()
+    const folder = creating.value
+    const type = creatingType.value
+
+    cancel()
+
+    if (!raw || !folder) return
+
+    const segments = raw.split('/').filter(Boolean)
+    const last = segments.pop()!
+    let parentId = folder
+
+    // Validate based on creation type
+    if (type === 'file' && !VALID_EXT.test(last)) return
+
+    // Create intermediate folders
+    for (const seg of segments) {
+      const folderId = `${parentId}/${seg}`
+      if (!tree.has(folderId)) {
+        tree.register({ id: folderId, value: seg, parentId })
+      }
+      tree.open(folderId)
+      parentId = folderId
+    }
+
+    const itemId = `${parentId}/${last}`
+    if (tree.has(itemId)) return
+
+    tree.register({ id: itemId, value: last, parentId })
+
+    if (type === 'file') {
+      store.addFile(itemId)
+      if (itemId.endsWith('.vue')) {
+        store.files[itemId]!.code = '<script setup lang="ts"><' + '/script>\n\n<template>\n  <div>\n    <slot />\n  </div>\n</template>\n'
+      }
+      store.setActive(itemId)
+    } else {
+      tree.open(itemId)
+    }
+  }
+
+  function cancel () {
+    creating.value = null
+    pending.value = ''
+  }
+
+  function deletable (id: string): boolean {
+    if (PROTECTED.has(id)) return false
+    if (tree.hasAncestor(id, '/')) return false
+    if (!isFile(id) && (tree.children.get(id)?.length ?? 0) > 0) return false
+    return true
+  }
+
+  function remove (id: string) {
+    const wasActive = store.activeFile?.filename === id
+
+    if (isFile(id)) {
+      store.deleteFile(id)
+    }
+
+    tree.unregister(id)
+
+    if (wasActive) {
+      store.setActive('src/App.vue')
+    }
+  }
+
+  return {
+    creating,
+    creatingType,
+    pending,
+    input,
+    targetFolder,
+    isFile,
+    fileExt,
+    add,
+    confirm,
+    cancel,
+    deletable,
+    remove,
+  }
+}
diff --git a/apps/docs/src/data/editor-defaults.ts b/apps/docs/src/data/editor-defaults.ts
index 4d0a8a5e0..d9194db23 100644
--- a/apps/docs/src/data/editor-defaults.ts
+++ b/apps/docs/src/data/editor-defaults.ts
@@ -1,3 +1,11 @@
+// ── Infrastructure file constants ────────────────────────────────────────
+
+/** Files generated by the editor infrastructure (not user-created) */
+export const INFRASTRUCTURE_FILES = new Set(['import-map.json', 'tsconfig.json', 'src/main.ts', 'src/uno.config.ts'])
+
+/** Subset of infrastructure files shown in the "project" folder of the file tree */
+export const REPL_BUILTIN_FILES = ['import-map.json', 'tsconfig.json'] as const
+
 // ── Template files (matching Vuetify Play's v0 template) ────────────────
 
 export function createMainTs (defaultTheme: 'light' | 'dark' = 'light'): string {
diff --git a/apps/docs/src/pages/editor.vue b/apps/docs/src/pages/editor.vue
index 59ee30c16..e1f2f8bf5 100644
--- a/apps/docs/src/pages/editor.vue
+++ b/apps/docs/src/pages/editor.vue
@@ -3,7 +3,7 @@
   import { definePage } from 'unplugin-vue-router/runtime'
 
   // Framework
-  import { useEventListener, useHotkey, useStorage, useTheme, useToggleScope } from '@vuetify/v0'
+  import { clamp, useClickOutside, useEventListener, useHotkey, useStorage, useTheme, useToggleScope } from '@vuetify/v0'
 
   // Components
   import EditorBreadcrumbs from '@/components/editor/EditorBreadcrumbs.vue'
@@ -12,16 +12,13 @@
   import EditorTabs from '@/components/editor/EditorTabs.vue'
 
   // Composables
-  import { decodeEditorHash } from '@/composables/editorLink'
+  import { useEditorFiles } from '@/composables/useEditorFiles'
 
   // Utilities
   import { Repl, useStore, useVueImportMap } from '@vue/repl'
   import Monaco from '@vue/repl/monaco-editor'
   import '@vue/repl/style.css'
-  import { computed, onMounted, shallowRef, watchEffect } from 'vue'
-
-  // Data
-  import { createMainTs, DEFAULT_CODE, UNO_CONFIG_TS } from '@/data/editor-defaults'
+  import { computed, shallowRef, useTemplateRef } from 'vue'
 
   definePage({
     meta: {
@@ -85,15 +82,29 @@
 
   const previewOptions = computed(() => ({ headHTML: previewHead.value }))
 
-  const isReady = shallowRef(false)
+  // ── Editor files ─────────────────────────────────────────────────────
+  const { isReady, fileTreeKey, loadExample: _loadExample } = useEditorFiles(store, () => isDark.value)
+
   const sidebarOpen = shallowRef(true)
   useHotkey('ctrl+b', () => {
     sidebarOpen.value = !sidebarOpen.value
   }, { inputs: true })
   const showExamples = shallowRef(false)
-  const fileTreeKey = shallowRef(0)
-  const editorTabs = shallowRef<InstanceType<typeof EditorTabs> | null>(null)
-  const hasTabs = computed(() => editorTabs.value?.hasTabs ?? true)
+  const examplesContainer = useTemplateRef<HTMLElement>('examplesContainer')
+
+  useToggleScope(() => showExamples.value, () => {
+    useClickOutside(examplesContainer, () => {
+      showExamples.value = false
+    })
+    useHotkey('escape', () => {
+      showExamples.value = false
+    })
+  })
+
+  async function loadExample (files: Record<string, string>) {
+    showExamples.value = false
+    await _loadExample(files)
+  }
 
   // ── Sidebar resize ─────────────────────────────────────────────────────
   const storage = useStorage()
@@ -111,92 +122,12 @@
 
   useToggleScope(() => isResizing.value, () => {
     useEventListener(document, 'pointermove', (e: PointerEvent) => {
-      sidebarWidth.value = Math.max(140, Math.min(400, resizeStartWidth.value + e.clientX - resizeStartX.value))
+      sidebarWidth.value = clamp(resizeStartWidth.value + e.clientX - resizeStartX.value, 140, 400)
     })
     useEventListener(document, 'pointerup', () => {
       isResizing.value = false
     })
   })
-
-  // Map nested file paths to their flat alias paths (e.g. src/dir/Foo.vue → src/Foo.vue)
-  // so edits to nested files propagate to the alias the REPL uses for imports
-  const aliasMap = shallowRef(new Map<string, string>())
-
-  onMounted(async () => {
-    const hash = window.location.hash.slice(1)
-    const decoded = hash ? decodeEditorHash(hash) : null
-
-    if (decoded) {
-      await loadExample(decoded)
-    } else {
-      await store.setFiles(
-        {
-          'src/main.ts': createMainTs(isDark.value ? 'dark' : 'light'),
-          'src/uno.config.ts': UNO_CONFIG_TS,
-          'src/App.vue': DEFAULT_CODE,
-        },
-        'src/main.ts',
-      )
-      store.files['src/main.ts']!.hidden = true
-      store.files['src/uno.config.ts']!.hidden = true
-      store.setActive('src/App.vue')
-    }
-
-    isReady.value = true
-  })
-
-  async function loadExample (files: Record<string, string>) {
-    showExamples.value = false
-
-    // Create hidden flat aliases for nested files so the REPL's runtime
-    // import resolution works. The REPL resolves all `./X` as `src/X`,
-    // so `src/dir/Foo.vue` needs a hidden `src/Foo.vue` alias.
-    const aliases: Record<string, string> = {}
-    const nextAliasMap = new Map<string, string>()
-
-    for (const [path, code] of Object.entries(files)) {
-      const rel = path.replace(/^src\//, '')
-      const parts = rel.split('/')
-      if (parts.length > 1) {
-        const flatPath = `src/${parts.at(-1)}`
-        if (!files[flatPath]) {
-          aliases[flatPath] = code
-          nextAliasMap.set(path, flatPath)
-        }
-      }
-    }
-
-    aliasMap.value = nextAliasMap
-
-    await store.setFiles(
-      {
-        'src/main.ts': createMainTs(isDark.value ? 'dark' : 'light'),
-        'src/uno.config.ts': UNO_CONFIG_TS,
-        ...files,
-        ...aliases,
-      },
-      'src/main.ts',
-    )
-    store.files['src/main.ts']!.hidden = true
-    store.files['src/uno.config.ts']!.hidden = true
-    for (const key of Object.keys(aliases)) {
-      if (store.files[key]) store.files[key]!.hidden = true
-    }
-
-    // Activate the first user file, not the generated App.vue wrapper
-    const userFile = Object.keys(files).find(f => f !== 'src/App.vue') ?? 'src/App.vue'
-    store.setActive(userFile)
-    fileTreeKey.value++
-  }
-
-  // Sync edits from nested files to their flat aliases
-  watchEffect(() => {
-    const file = store.activeFile
-    const flatPath = aliasMap.value.get(file.filename)
-    if (flatPath && store.files[flatPath]) {
-      store.files[flatPath]!.code = file.code
-    }
-  })
 </script>
 
 <template>
@@ -223,7 +154,7 @@
       </div>
 
       <div class="flex items-center gap-2">
-        <div class="relative">
+        <div ref="examplesContainer" class="relative">
           <button
             aria-label="Load example"
             class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
@@ -233,12 +164,6 @@
             <AppIcon icon="examples" :size="18" />
           </button>
 
-          <div
-            v-if="showExamples"
-            class="fixed inset-0 z-40"
-            @click="showExamples = false"
-          />
-
           <div
             v-if="showExamples"
             class="absolute top-full right-0 mt-1 w-[280px] bg-surface border border-divider rounded-lg shadow-lg z-50"
@@ -280,11 +205,10 @@
           />
 
           <div class="editor-repl-container flex flex-col">
-            <EditorTabs ref="editorTabs" :store="store" />
-            <EditorBreadcrumbs v-if="hasTabs" :store="store" />
+            <EditorTabs :store="store" />
+            <EditorBreadcrumbs :store="store" />
 
             <Repl
-              v-show="hasTabs"
               :auto-resize="true"
               class="flex-1 min-h-0"
               :class="{ 'pointer-events-none': isResizing }"

From ec3c5278553e6f59a7b2802c87ca0c6cd2c5eb76 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 13 Feb 2026 22:31:38 -0600
Subject: [PATCH 08/39] docs(editor): show main.ts under src, rename project to
 /, tab ordering fixes

---
 .../docs/src/components/editor/EditorTabs.vue | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/apps/docs/src/components/editor/EditorTabs.vue b/apps/docs/src/components/editor/EditorTabs.vue
index fa4c18031..f11064aad 100644
--- a/apps/docs/src/components/editor/EditorTabs.vue
+++ b/apps/docs/src/components/editor/EditorTabs.vue
@@ -12,19 +12,36 @@
     store: ReplStore
   }>()
 
+  function isTabbable (f: { filename: string, hidden?: boolean }) {
+    if (f.filename === 'src/main.ts') return true
+    if (INFRASTRUCTURE_FILES.has(f.filename)) return false
+    if (f.hidden) return false
+    return true
+  }
+
   // Start with only the active file's tab open
   const initialClosed = new Set<string>()
   const active = props.store.activeFile.filename
   for (const f of Object.values(props.store.files)) {
-    if (!f.hidden && !INFRASTRUCTURE_FILES.has(f.filename) && f.filename !== active) {
+    if (isTabbable(f) && f.filename !== active) {
       initialClosed.add(f.filename)
     }
   }
   const closedTabs = shallowRef(initialClosed)
 
+  // Track tab open order so new tabs appear at the end
+  const tabOrder = shallowRef<string[]>([active])
+
   const tabs = computed(() => {
-    return Object.values(props.store.files)
-      .filter(f => !f.hidden && !INFRASTRUCTURE_FILES.has(f.filename) && !closedTabs.value.has(f.filename))
+    const open = Object.values(props.store.files)
+      .filter(f => isTabbable(f) && !closedTabs.value.has(f.filename))
+    const order = tabOrder.value
+    return open
+      .toSorted((a, b) => {
+        const ai = order.indexOf(a.filename)
+        const bi = order.indexOf(b.filename)
+        return (ai === -1 ? Infinity : ai) - (bi === -1 ? Infinity : bi)
+      })
       .map(f => ({
         id: f.filename,
         label: f.filename.split('/').pop()!,
@@ -41,6 +58,9 @@
       next.delete(file)
       closedTabs.value = next
     }
+    if (!tabOrder.value.includes(file)) {
+      tabOrder.value = [...tabOrder.value, file]
+    }
   })
 
   function closeTab (id: string) {

From 596da67735b2c5a9ff22336e1fcc21aca7dc99e2 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 13 Feb 2026 22:34:49 -0600
Subject: [PATCH 09/39] docs(editor): remove old playground composable and
 update UI references

Replace Vuetify Play references with v0 Editor, add editor/examples
icons, pass fileName prop to code panes, and delete unused playground.ts.
---
 .../components/docs/DocsExampleCodePane.vue   |   1 +
 apps/docs/src/components/docs/DocsMarkup.vue  |   1 +
 apps/docs/src/composables/playground.ts       | 121 ------------------
 .../pages/guide/essentials/using-the-docs.md  |   2 +-
 apps/docs/src/plugins/icons.ts                |   3 +
 5 files changed, 6 insertions(+), 122 deletions(-)
 delete mode 100644 apps/docs/src/composables/playground.ts

diff --git a/apps/docs/src/components/docs/DocsExampleCodePane.vue b/apps/docs/src/components/docs/DocsExampleCodePane.vue
index 0c1ba896b..7ec5dfd18 100644
--- a/apps/docs/src/components/docs/DocsExampleCodePane.vue
+++ b/apps/docs/src/components/docs/DocsExampleCodePane.vue
@@ -106,6 +106,7 @@
         v-model:wrap="lineWrap"
         bin
         :code="code"
+        :file-name="fileName"
         :language="language"
         :playground="showPlayground"
         show-copy
diff --git a/apps/docs/src/components/docs/DocsMarkup.vue b/apps/docs/src/components/docs/DocsMarkup.vue
index b875a26b0..f7f3a01d8 100644
--- a/apps/docs/src/components/docs/DocsMarkup.vue
+++ b/apps/docs/src/components/docs/DocsMarkup.vue
@@ -65,6 +65,7 @@
           bin
           :bin-title="binTitle"
           :code="decodedCode"
+          :file-name="title"
           :language
           :playground
           show-copy
diff --git a/apps/docs/src/composables/playground.ts b/apps/docs/src/composables/playground.ts
deleted file mode 100644
index f042be82a..000000000
--- a/apps/docs/src/composables/playground.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * Creates a Vuetify Play link using the native v0 template.
- *
- * @remarks
- * Uses the 'vuetify0' template in Vuetify Play which provides:
- * - UnoCSS runtime with Wind4 preset
- * - Import map for @vuetify/v0
- * - Proper main.ts setup
- */
-
-import { strFromU8, strToU8, zlibSync } from 'fflate'
-
-// Utilities
-import { version as vueVersion } from 'vue'
-
-export interface PlaygroundFile {
-  name: string
-  code: string
-}
-
-function utoa (data: string): string {
-  const buffer = strToU8(data)
-  const zipped = zlibSync(buffer, { level: 9 })
-  const binary = strFromU8(zipped, true)
-  return btoa(binary)
-}
-
-/**
- * Get playground URL for a single file (convenience wrapper)
- */
-export function usePlayground (code: string): string {
-  return usePlaygroundMulti([{ name: 'App.vue', code }])
-}
-
-/**
- * Detect which file is the entry point for a multi-file example.
- * Priority: index.vue > App.vue > example.vue > main.vue > file that imports others
- */
-function detectEntryFile (files: PlaygroundFile[]): PlaygroundFile | undefined {
-  const vueFiles = files.filter(f => f.name.endsWith('.vue'))
-
-  // Check for conventional entry point names
-  const entryNames = ['index.vue', 'App.vue', 'example.vue', 'main.vue']
-  for (const name of entryNames) {
-    const found = vueFiles.find(f => f.name.toLowerCase() === name.toLowerCase())
-    if (found) return found
-  }
-
-  // Find file that imports other example files (likely the entry point)
-  for (const file of vueFiles) {
-    const importsOthers = files.some(other =>
-      other !== file && file.code.includes(`./${other.name.replace(/\.\w+$/, '')}`),
-    )
-    if (importsOthers) return file
-  }
-
-  // Fall back to last Vue file (often examples are ordered with entry last)
-  return vueFiles.at(-1)
-}
-
-/**
- * Generate an App.vue wrapper that imports and renders the entry component
- */
-function generateAppWrapper (entryFile: PlaygroundFile): string {
-  const componentName = entryFile.name.replace(/\.vue$/, '')
-  const pascalName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
-
-  return `<script setup lang="ts">
-import ${pascalName} from './${entryFile.name}'
-</script>
-
-<template>
-  <${pascalName} />
-</template>
-`
-}
-
-/**
- * Get playground URL for multiple files
- *
- * @param inputFiles - Array of files with name and code
- * @param activeFile - Which file to show as active (defaults to first file)
- */
-export function usePlaygroundMulti (
-  inputFiles: PlaygroundFile[],
-  activeFile?: string,
-): string {
-  // Convert to playground format (prefixed with src/)
-  const files: Record<string, string> = {}
-  for (const file of inputFiles) {
-    const path = file.name.startsWith('src/') ? file.name : `src/${file.name}`
-    files[path] = file.code
-  }
-
-  // If no App.vue exists, generate one that wraps the entry file
-  const hasAppVue = inputFiles.some(f => f.name.toLowerCase() === 'app.vue')
-  if (!hasAppVue) {
-    const entryFile = detectEntryFile(inputFiles)
-    if (entryFile) {
-      files['src/App.vue'] = generateAppWrapper(entryFile)
-    }
-  }
-
-  // Determine active file (show the entry/App.vue)
-  const active = activeFile
-    ? (activeFile.startsWith('src/') ? activeFile : `src/${activeFile}`)
-    : 'src/App.vue'
-
-  // Hash format: [files, vueVersion, vuetifyVersion, appendJson, activeFile, routerEnabled, template, deps]
-  const hash = utoa(JSON.stringify([
-    files,
-    vueVersion,
-    null, // vuetifyVersion - not used for v0
-    true, // appendJson - merge with template files
-    active,
-    false, // routerEnabled
-    'vuetify0', // template ID
-  ]))
-
-  return `https://play.vuetifyjs.com#${hash}`
-}
diff --git a/apps/docs/src/pages/guide/essentials/using-the-docs.md b/apps/docs/src/pages/guide/essentials/using-the-docs.md
index c67655ee5..d62d5d9f7 100644
--- a/apps/docs/src/pages/guide/essentials/using-the-docs.md
+++ b/apps/docs/src/pages/guide/essentials/using-the-docs.md
@@ -266,7 +266,7 @@ Hover over the code block to reveal action buttons:
 
 | Button | Action |
 |--------|--------|
-| <span class="whitespace-nowrap"><AppIcon icon="vuetify-play" :size="16" class="inline-block align-text-bottom" /> **Play**</span> | Open in Vuetify Play with full editing environment |
+| <span class="whitespace-nowrap"><AppIcon icon="editor" :size="16" class="inline-block align-text-bottom" /> **Editor**</span> | Open in the v0 Editor with full editing environment |
 | <span class="whitespace-nowrap"><AppIcon icon="vuetify-bin" :size="16" class="inline-block align-text-bottom" /> **Bin**</span> | Open in Vuetify Bin for sharing |
 | <span class="whitespace-nowrap"><AppIcon icon="wrap" :size="16" class="inline-block align-text-bottom" /> **Wrap**</span> | Toggle line wrapping for long lines |
 | <span class="whitespace-nowrap"><AppIcon icon="copy" :size="16" class="inline-block align-text-bottom" /> **Copy**</span> | Copy code to clipboard (checkmark confirms success) |
diff --git a/apps/docs/src/plugins/icons.ts b/apps/docs/src/plugins/icons.ts
index 6f3b711bc..42b00c1e6 100644
--- a/apps/docs/src/plugins/icons.ts
+++ b/apps/docs/src/plugins/icons.ts
@@ -9,6 +9,7 @@ import {
   mdiArrowLeft,
   mdiArrowUp,
   mdiBeaker,
+  mdiBookOpenOutline,
   mdiBookOpenPageVariant,
   mdiBug,
   mdiCalendar,
@@ -211,6 +212,8 @@ export const [useIconContext, provideIconContext, context] = createTokensContext
     'split': mdiUnfoldMoreVertical,
     'beaker': mdiBeaker,
     'dots-grid': mdiDotsGrid,
+    'editor': mdiCodeTags,
+    'examples': mdiBookOpenOutline,
     'gradient': mdiGradientVertical,
     'chrome': mdiGoogleChrome,
     'firefox': mdiFirefox,

From 9bf240d55db6bffdadac22086a47c6ed0840601d Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 13 Feb 2026 22:50:55 -0600
Subject: [PATCH 10/39] docs(editor): add layout toggle and hide file panel on
 mobile

---
 apps/docs/src/pages/editor.vue | 23 ++++++++++++++++++-----
 apps/docs/src/plugins/icons.ts |  4 ++++
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/apps/docs/src/pages/editor.vue b/apps/docs/src/pages/editor.vue
index e1f2f8bf5..e8f0f1e28 100644
--- a/apps/docs/src/pages/editor.vue
+++ b/apps/docs/src/pages/editor.vue
@@ -3,7 +3,7 @@
   import { definePage } from 'unplugin-vue-router/runtime'
 
   // Framework
-  import { clamp, useClickOutside, useEventListener, useHotkey, useStorage, useTheme, useToggleScope } from '@vuetify/v0'
+  import { clamp, useBreakpoints, useClickOutside, useEventListener, useHotkey, useStorage, useTheme, useToggleScope } from '@vuetify/v0'
 
   // Components
   import EditorBreadcrumbs from '@/components/editor/EditorBreadcrumbs.vue'
@@ -85,6 +85,8 @@
   // ── Editor files ─────────────────────────────────────────────────────
   const { isReady, fileTreeKey, loadExample: _loadExample } = useEditorFiles(store, () => isDark.value)
 
+  const breakpoints = useBreakpoints()
+  const isDesktop = computed(() => breakpoints.mdAndUp.value)
   const sidebarOpen = shallowRef(true)
   useHotkey('ctrl+b', () => {
     sidebarOpen.value = !sidebarOpen.value
@@ -106,8 +108,9 @@
     await _loadExample(files)
   }
 
-  // ── Sidebar resize ─────────────────────────────────────────────────────
+  // ── Persistent settings ────────────────────────────────────────────────
   const storage = useStorage()
+  const replLayout = storage.get<'horizontal' | 'vertical'>('editor-layout', 'horizontal')
   const sidebarWidth = storage.get<number>('editor-sidebar-width', 250)
   const isResizing = shallowRef(false)
   const resizeStartX = shallowRef(0)
@@ -173,6 +176,16 @@
         </div>
 
         <button
+          aria-label="Toggle layout"
+          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+          :title="replLayout === 'horizontal' ? 'Switch to vertical layout' : 'Switch to horizontal layout'"
+          @click="replLayout = replLayout === 'horizontal' ? 'vertical' : 'horizontal'"
+        >
+          <AppIcon :icon="replLayout === 'horizontal' ? 'layout-vertical' : 'layout-horizontal'" :size="18" />
+        </button>
+
+        <button
+          v-if="isDesktop"
           aria-label="Toggle sidebar"
           class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
           title="Toggle sidebar"
@@ -190,14 +203,14 @@
       <div v-if="isReady" class="editor-repl flex-1 min-h-0 px-2 pt-2" :class="{ dark: isDark }">
         <div class="editor-wrapper" :class="{ 'select-none': isResizing }">
           <EditorFileTree
-            v-if="sidebarOpen"
+            v-if="sidebarOpen && isDesktop"
             :key="fileTreeKey"
             :store="store"
             :style="{ width: `${sidebarWidth}px` }"
           />
 
           <div
-            v-if="sidebarOpen"
+            v-if="sidebarOpen && isDesktop"
             class="editor-resize-handle"
             :class="{ 'editor-resize-handle--active': isResizing }"
             @dblclick="sidebarWidth = 250"
@@ -214,7 +227,7 @@
               :class="{ 'pointer-events-none': isResizing }"
               :clear-console="true"
               :editor="Monaco"
-              layout="horizontal"
+              :layout="replLayout"
               :preview-options="previewOptions"
               :preview-theme="true"
               :show-compile-output="false"
diff --git a/apps/docs/src/plugins/icons.ts b/apps/docs/src/plugins/icons.ts
index 42b00c1e6..4011d3783 100644
--- a/apps/docs/src/plugins/icons.ts
+++ b/apps/docs/src/plugins/icons.ts
@@ -95,6 +95,8 @@ import {
   mdiTune,
   mdiWeatherNight,
   mdiWeatherSunny,
+  mdiViewSplitHorizontal,
+  mdiViewSplitVertical,
   mdiVuejs,
   mdiWrap,
   mdiWrapDisabled,
@@ -214,6 +216,8 @@ export const [useIconContext, provideIconContext, context] = createTokensContext
     'dots-grid': mdiDotsGrid,
     'editor': mdiCodeTags,
     'examples': mdiBookOpenOutline,
+    'layout-horizontal': mdiViewSplitVertical,
+    'layout-vertical': mdiViewSplitHorizontal,
     'gradient': mdiGradientVertical,
     'chrome': mdiGoogleChrome,
     'firefox': mdiFirefox,

From 996d7b7b86395f81ac7a8f7a81a11fb40bba8950 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sat, 14 Feb 2026 22:00:24 -0600
Subject: [PATCH 11/39] docs(editor): mobile file panel with stack overlay and
 global scrim

Add Scrim to fullscreen layout for stack coordination. On mobile,
file tree opens as a fixed overlay with proper z-index from useStack.
Syncs sidebar state with breakpoint changes.
---
 apps/docs/src/layouts/fullscreen.vue |  5 +++
 apps/docs/src/pages/editor.vue       | 62 ++++++++++++++++++++++------
 2 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/apps/docs/src/layouts/fullscreen.vue b/apps/docs/src/layouts/fullscreen.vue
index dfd1e4459..99db18eff 100644
--- a/apps/docs/src/layouts/fullscreen.vue
+++ b/apps/docs/src/layouts/fullscreen.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+  // Framework
+  import { Scrim } from '@vuetify/v0'
+
   // Composables
   import { createLevelFilter } from '@/composables/useLevelFilter'
   import { createNavConfig } from '@/composables/useNavConfig'
@@ -17,6 +20,8 @@
 <template>
   <div class="fixed inset-0 z-10 flex flex-col bg-background" data-layout="fullscreen">
     <router-view />
+
+    <Scrim class="fixed inset-0 bg-black/30 transition-opacity" :teleport="false" />
   </div>
 </template>
 
diff --git a/apps/docs/src/pages/editor.vue b/apps/docs/src/pages/editor.vue
index e8f0f1e28..3f0b4720b 100644
--- a/apps/docs/src/pages/editor.vue
+++ b/apps/docs/src/pages/editor.vue
@@ -3,7 +3,7 @@
   import { definePage } from 'unplugin-vue-router/runtime'
 
   // Framework
-  import { clamp, useBreakpoints, useClickOutside, useEventListener, useHotkey, useStorage, useTheme, useToggleScope } from '@vuetify/v0'
+  import { clamp, useBreakpoints, useClickOutside, useEventListener, useHotkey, useStack, useStorage, useTheme, useToggleScope } from '@vuetify/v0'
 
   // Components
   import EditorBreadcrumbs from '@/components/editor/EditorBreadcrumbs.vue'
@@ -18,7 +18,7 @@
   import { Repl, useStore, useVueImportMap } from '@vue/repl'
   import Monaco from '@vue/repl/monaco-editor'
   import '@vue/repl/style.css'
-  import { computed, shallowRef, useTemplateRef } from 'vue'
+  import { computed, shallowRef, useTemplateRef, watch } from 'vue'
 
   definePage({
     meta: {
@@ -88,6 +88,21 @@
   const breakpoints = useBreakpoints()
   const isDesktop = computed(() => breakpoints.mdAndUp.value)
   const sidebarOpen = shallowRef(true)
+  watch(isDesktop, v => {
+    sidebarOpen.value = v
+  })
+
+  const stack = useStack()
+  const ticket = stack.register({
+    onDismiss: () => {
+      sidebarOpen.value = false
+    },
+  })
+  watch(() => sidebarOpen.value && !isDesktop.value, open => {
+    if (open) ticket.select()
+    else ticket.unselect()
+  })
+
   useHotkey('ctrl+b', () => {
     sidebarOpen.value = !sidebarOpen.value
   }, { inputs: true })
@@ -176,6 +191,7 @@
         </div>
 
         <button
+          v-if="isDesktop"
           aria-label="Toggle layout"
           class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
           :title="replLayout === 'horizontal' ? 'Switch to vertical layout' : 'Switch to horizontal layout'"
@@ -184,6 +200,16 @@
           <AppIcon :icon="replLayout === 'horizontal' ? 'layout-vertical' : 'layout-horizontal'" :size="18" />
         </button>
 
+        <button
+          v-if="!isDesktop"
+          aria-label="Toggle files"
+          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+          title="Toggle files"
+          @click="sidebarOpen = !sidebarOpen"
+        >
+          <AppIcon icon="folder" :size="18" />
+        </button>
+
         <button
           v-if="isDesktop"
           aria-label="Toggle sidebar"
@@ -202,19 +228,31 @@
     <Transition name="fade">
       <div v-if="isReady" class="editor-repl flex-1 min-h-0 px-2 pt-2" :class="{ dark: isDark }">
         <div class="editor-wrapper" :class="{ 'select-none': isResizing }">
+          <!-- Desktop: inline sidebar -->
+          <template v-if="isDesktop">
+            <EditorFileTree
+              v-if="sidebarOpen"
+              :key="fileTreeKey"
+              :store="store"
+              :style="{ width: `${sidebarWidth}px` }"
+            />
+
+            <div
+              v-if="sidebarOpen"
+              class="editor-resize-handle"
+              :class="{ 'editor-resize-handle--active': isResizing }"
+              @dblclick="sidebarWidth = 250"
+              @pointerdown="onResizeStart"
+            />
+          </template>
+
+          <!-- Mobile: fixed overlay -->
           <EditorFileTree
-            v-if="sidebarOpen && isDesktop"
+            v-if="!isDesktop && sidebarOpen"
             :key="fileTreeKey"
+            class="fixed top-0 bottom-0 left-0 w-[260px]"
             :store="store"
-            :style="{ width: `${sidebarWidth}px` }"
-          />
-
-          <div
-            v-if="sidebarOpen && isDesktop"
-            class="editor-resize-handle"
-            :class="{ 'editor-resize-handle--active': isResizing }"
-            @dblclick="sidebarWidth = 250"
-            @pointerdown="onResizeStart"
+            :style="{ zIndex: ticket.zIndex.value }"
           />
 
           <div class="editor-repl-container flex flex-col">

From 44ef39cd565e6db0a426d55cb8deb0b86aef784b Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 15 Feb 2026 10:34:13 -0600
Subject: [PATCH 12/39] docs(editor): add tutorial system with markdown
 instructions panel

---
 apps/docs/src/components.d.ts                 |   1 +
 .../components/editor/EditorMarkdownPanel.vue | 125 ++++++++
 apps/docs/src/composables/useEditorStore.ts   |  67 +++++
 apps/docs/src/composables/useTutorial.ts      | 134 +++++++++
 apps/docs/src/pages/editor.tutorial.[id].vue  | 270 ++++++++++++++++++
 apps/docs/src/pages/editor.vue                |  55 +---
 .../src/tutorials/getting-started/meta.json   |   4 +
 .../tutorials/getting-started/step-1/App.vue  |  27 ++
 .../getting-started/step-1/README.md          |  17 ++
 .../tutorials/getting-started/step-2/App.vue  |  83 ++++++
 .../getting-started/step-2/README.md          |  25 ++
 .../tutorials/getting-started/step-3/App.vue  | 101 +++++++
 .../getting-started/step-3/README.md          |  32 +++
 apps/docs/src/tutorials/index.ts              |  80 ++++++
 apps/docs/src/typed-router.d.ts               |  13 +
 knip.json                                     |   3 +-
 16 files changed, 993 insertions(+), 44 deletions(-)
 create mode 100644 apps/docs/src/components/editor/EditorMarkdownPanel.vue
 create mode 100644 apps/docs/src/composables/useEditorStore.ts
 create mode 100644 apps/docs/src/composables/useTutorial.ts
 create mode 100644 apps/docs/src/pages/editor.tutorial.[id].vue
 create mode 100644 apps/docs/src/tutorials/getting-started/meta.json
 create mode 100644 apps/docs/src/tutorials/getting-started/step-1/App.vue
 create mode 100644 apps/docs/src/tutorials/getting-started/step-1/README.md
 create mode 100644 apps/docs/src/tutorials/getting-started/step-2/App.vue
 create mode 100644 apps/docs/src/tutorials/getting-started/step-2/README.md
 create mode 100644 apps/docs/src/tutorials/getting-started/step-3/App.vue
 create mode 100644 apps/docs/src/tutorials/getting-started/step-3/README.md
 create mode 100644 apps/docs/src/tutorials/index.ts

diff --git a/apps/docs/src/components.d.ts b/apps/docs/src/components.d.ts
index bd9a2ffac..02b0292fa 100644
--- a/apps/docs/src/components.d.ts
+++ b/apps/docs/src/components.d.ts
@@ -124,6 +124,7 @@ declare module 'vue' {
     EditorBreadcrumbs: typeof import('./components/editor/EditorBreadcrumbs.vue')['default']
     EditorExamples: typeof import('./components/editor/EditorExamples.vue')['default']
     EditorFileTree: typeof import('./components/editor/EditorFileTree.vue')['default']
+    EditorMarkdownPanel: typeof import('./components/editor/EditorMarkdownPanel.vue')['default']
     EditorTabs: typeof import('./components/editor/EditorTabs.vue')['default']
     HomeAiFirst: typeof import('./components/home/HomeAiFirst.vue')['default']
     HomeArchitecture: typeof import('./components/home/HomeArchitecture.vue')['default']
diff --git a/apps/docs/src/components/editor/EditorMarkdownPanel.vue b/apps/docs/src/components/editor/EditorMarkdownPanel.vue
new file mode 100644
index 000000000..f0d6e1ef3
--- /dev/null
+++ b/apps/docs/src/components/editor/EditorMarkdownPanel.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+  const props = defineProps<{
+    html: string
+    stepLabel: string
+    isFirst: boolean
+    isLast: boolean
+  }>()
+
+  const emit = defineEmits<{
+    prev: []
+    next: []
+  }>()
+</script>
+
+<template>
+  <div class="flex flex-col h-full overflow-hidden">
+    <!-- Header -->
+    <div class="flex items-center justify-between px-4 py-2 border-b border-divider bg-surface shrink-0">
+      <span class="text-xs font-semibold text-on-surface-variant uppercase tracking-wide">Tutorial</span>
+      <span class="text-xs text-on-surface-variant">{{ props.stepLabel }}</span>
+    </div>
+
+    <!-- Markdown content -->
+    <div class="flex-1 overflow-y-auto px-5 py-4">
+      <div class="markdown-body tutorial-markdown" v-html="props.html" />
+    </div>
+
+    <!-- Step navigation -->
+    <div class="flex items-center justify-between px-4 py-3 border-t border-divider bg-surface shrink-0">
+      <button
+        class="px-3 py-1.5 text-sm rounded bg-surface-tint text-on-surface disabled:opacity-40 transition-colors hover:bg-surface-variant"
+        :disabled="props.isFirst"
+        @click="emit('prev')"
+      >
+        <span class="flex items-center gap-1">
+          <AppIcon icon="left" :size="14" />
+          Previous
+        </span>
+      </button>
+
+      <button
+        class="px-3 py-1.5 text-sm rounded bg-primary text-on-primary disabled:opacity-40 transition-colors"
+        :disabled="props.isLast"
+        @click="emit('next')"
+      >
+        <span class="flex items-center gap-1">
+          Next
+          <AppIcon icon="right" :size="14" />
+        </span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .tutorial-markdown {
+    font-size: 0.9rem;
+    line-height: 1.7;
+  }
+
+  .tutorial-markdown :deep(h1) {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: var(--v0-on-surface);
+  }
+
+  .tutorial-markdown :deep(h2) {
+    font-size: 1.15rem;
+    font-weight: 600;
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+    color: var(--v0-on-surface);
+  }
+
+  .tutorial-markdown :deep(p) {
+    margin-bottom: 0.75rem;
+    color: var(--v0-on-surface-variant);
+  }
+
+  .tutorial-markdown :deep(ul),
+  .tutorial-markdown :deep(ol) {
+    margin-bottom: 0.75rem;
+    padding-left: 1.25rem;
+    color: var(--v0-on-surface-variant);
+  }
+
+  .tutorial-markdown :deep(li) {
+    margin-bottom: 0.25rem;
+  }
+
+  .tutorial-markdown :deep(code) {
+    font-size: 0.85em;
+    padding: 0.15em 0.4em;
+    border-radius: 4px;
+    background: var(--v0-surface-tint);
+    color: var(--v0-primary);
+  }
+
+  .tutorial-markdown :deep(pre) {
+    margin-bottom: 0.75rem;
+    border-radius: 8px;
+    overflow-x: auto;
+  }
+
+  .tutorial-markdown :deep(pre code) {
+    padding: 0;
+    background: transparent;
+    color: inherit;
+  }
+
+  .tutorial-markdown :deep(strong) {
+    color: var(--v0-on-surface);
+    font-weight: 600;
+  }
+
+  .tutorial-markdown :deep(a) {
+    color: var(--v0-primary);
+    text-decoration: none;
+  }
+
+  .tutorial-markdown :deep(a:hover) {
+    text-decoration: underline;
+  }
+</style>
diff --git a/apps/docs/src/composables/useEditorStore.ts b/apps/docs/src/composables/useEditorStore.ts
new file mode 100644
index 000000000..fc149fb2c
--- /dev/null
+++ b/apps/docs/src/composables/useEditorStore.ts
@@ -0,0 +1,67 @@
+// Utilities
+import { useStore, useVueImportMap } from '@vue/repl'
+import { computed, shallowRef } from 'vue'
+
+// Types
+import type { ReplStore } from '@vue/repl'
+import type { ComputedRef } from 'vue'
+
+export interface EditorStoreReturn {
+  store: ReplStore
+  isDark: ComputedRef<boolean>
+  replTheme: ComputedRef<'dark' | 'light'>
+  previewOptions: ComputedRef<{ headHTML: string }>
+}
+
+export function useEditorStore (isDark: ComputedRef<boolean>): EditorStoreReturn {
+  const replTheme = computed(() => isDark.value ? 'dark' : 'light')
+
+  const { importMap: builtinImportMap, vueVersion } = useVueImportMap({
+    runtimeDev: 'https://cdn.jsdelivr.net/npm/@vue/runtime-dom/dist/runtime-dom.esm-browser.js',
+    runtimeProd: 'https://cdn.jsdelivr.net/npm/@vue/runtime-dom/dist/runtime-dom.esm-browser.prod.js',
+    serverRenderer: 'https://cdn.jsdelivr.net/npm/@vue/server-renderer/dist/server-renderer.esm-browser.js',
+  })
+
+  const importMap = computed(() => ({
+    imports: {
+      ...builtinImportMap.value?.imports,
+      '@vuetify/v0': 'https://cdn.jsdelivr.net/npm/@vuetify/v0@latest/dist/index.mjs',
+    },
+  }))
+
+  const store = useStore({
+    builtinImportMap: importMap,
+    vueVersion,
+    showOutput: shallowRef(true),
+  })
+
+  // Wind4 preflight reset + @property defaults.
+  // The UnoCSS runtime doesn't inject preflights or @property rules,
+  // so we provide the essential reset and opacity defaults that
+  // color-mix() based utilities (border-divider, bg-surface, etc.) rely on.
+  const previewHead = computed(() => `<style>
+    @property --un-border-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
+    @property --un-bg-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
+    @property --un-text-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
+    @property --un-shadow-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
+    @property --un-ring-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
+    @property --un-divide-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
+    @property --un-border-style { syntax: "*"; inherits: false; initial-value: solid }
+    *, ::before, ::after, ::backdrop { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid }
+    html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; -webkit-tap-highlight-color: transparent }
+    body { margin: 0; background-color: ${isDark.value ? '#121212' : '#ffffff'} }
+    #app { min-height: 100vh; opacity: 0; transition: opacity 0.15s }
+    button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer }
+    *:focus-visible { outline: 2px solid var(--v0-primary); outline-offset: 2px }
+    dialog::backdrop { background: rgb(0 0 0 / 0.3) }
+  </style>`)
+
+  const previewOptions = computed(() => ({ headHTML: previewHead.value }))
+
+  return {
+    store,
+    isDark,
+    replTheme,
+    previewOptions,
+  }
+}
diff --git a/apps/docs/src/composables/useTutorial.ts b/apps/docs/src/composables/useTutorial.ts
new file mode 100644
index 000000000..56fa8fcaf
--- /dev/null
+++ b/apps/docs/src/composables/useTutorial.ts
@@ -0,0 +1,134 @@
+// Framework
+import { createStep, useTheme } from '@vuetify/v0'
+
+// Composables
+import { useEditorStore } from '@/composables/useEditorStore'
+import { useMarkdown } from '@/composables/useMarkdown'
+
+// Utilities
+import { computed, onMounted, shallowRef, watch } from 'vue'
+
+// Types
+import type { ReplStore } from '@vue/repl'
+import type { ComputedRef, ShallowRef } from 'vue'
+
+import { createMainTs, UNO_CONFIG_TS } from '@/data/editor-defaults'
+// Tutorials
+import { getTutorial } from '@/tutorials'
+
+export interface UseTutorialReturn {
+  store: ReplStore
+  isDark: ComputedRef<boolean>
+  replTheme: ComputedRef<'dark' | 'light'>
+  previewOptions: ComputedRef<{ headHTML: string }>
+  markdown: ShallowRef<string>
+  html: ShallowRef<string>
+  stepLabel: ComputedRef<string>
+  totalSteps: ComputedRef<number>
+  currentStep: ComputedRef<number>
+  isFirst: ComputedRef<boolean>
+  isLast: ComputedRef<boolean>
+  isReady: ShallowRef<boolean>
+  fileTreeKey: ShallowRef<number>
+  nextStep: () => void
+  prevStep: () => void
+}
+
+export function useTutorial (tutorialId: ComputedRef<string>): UseTutorialReturn {
+  const theme = useTheme()
+  const isDark = computed(() => theme.isDark.value)
+
+  const { store, replTheme, previewOptions } = useEditorStore(isDark)
+
+  const markdown = shallowRef('')
+  const { html } = useMarkdown(markdown)
+  const isReady = shallowRef(false)
+  const fileTreeKey = shallowRef(0)
+
+  const stepper = createStep()
+  const totalSteps = computed(() => stepper.size)
+  const currentStep = computed(() => (stepper.selectedIndex.value ?? 0) + 1)
+  const stepLabel = computed(() => `Step ${currentStep.value} of ${totalSteps.value}`)
+  const isFirst = computed(() => stepper.selectedIndex.value === 0)
+  const isLast = computed(() => stepper.selectedIndex.value === stepper.size - 1)
+
+  function nextStep () {
+    stepper.next()
+  }
+
+  function prevStep () {
+    stepper.prev()
+  }
+
+  async function loadStep (stepIndex: number) {
+    const tutorial = getTutorial(tutorialId.value)
+    if (!tutorial || !tutorial.steps[stepIndex]) return
+
+    const step = tutorial.steps[stepIndex]
+
+    // Load markdown
+    markdown.value = await step.markdown()
+
+    // Load code files
+    const files: Record<string, string> = {}
+    for (const [path, loader] of Object.entries(step.files)) {
+      files[path] = await loader()
+    }
+
+    const currentTheme = isDark.value ? 'dark' : 'light'
+    await store.setFiles(
+      {
+        'src/main.ts': createMainTs(currentTheme),
+        'src/uno.config.ts': UNO_CONFIG_TS,
+        ...files,
+      },
+      'src/main.ts',
+    )
+    store.files['src/main.ts']!.hidden = true
+    store.files['src/uno.config.ts']!.hidden = true
+
+    const firstFile = Object.keys(files)[0] ?? 'src/App.vue'
+    store.setActive(firstFile)
+    fileTreeKey.value++
+  }
+
+  // React to step changes
+  watch(() => stepper.selectedIndex.value, async index => {
+    if (index != null) {
+      await loadStep(index)
+    }
+  })
+
+  onMounted(async () => {
+    const tutorial = getTutorial(tutorialId.value)
+    if (!tutorial || tutorial.steps.length === 0) return
+
+    // Register steps
+    stepper.onboard(
+      tutorial.steps.map((_, i) => ({ id: `step-${i + 1}`, value: i })),
+    )
+    stepper.first()
+
+    // Load first step
+    await loadStep(0)
+    isReady.value = true
+  })
+
+  return {
+    store,
+    isDark,
+    replTheme,
+    previewOptions,
+    markdown,
+    html,
+    stepLabel,
+    totalSteps,
+    currentStep,
+    isFirst,
+    isLast,
+    isReady,
+    fileTreeKey,
+    nextStep,
+    prevStep,
+  }
+}
diff --git a/apps/docs/src/pages/editor.tutorial.[id].vue b/apps/docs/src/pages/editor.tutorial.[id].vue
new file mode 100644
index 000000000..cf7a89c07
--- /dev/null
+++ b/apps/docs/src/pages/editor.tutorial.[id].vue
@@ -0,0 +1,270 @@
+<script setup lang="ts">
+  import { useHead } from '@unhead/vue'
+  import { definePage } from 'unplugin-vue-router/runtime'
+
+  // Framework
+  import { useBreakpoints } from '@vuetify/v0'
+
+  // Components
+  import EditorBreadcrumbs from '@/components/editor/EditorBreadcrumbs.vue'
+  import EditorFileTree from '@/components/editor/EditorFileTree.vue'
+  import EditorMarkdownPanel from '@/components/editor/EditorMarkdownPanel.vue'
+  import EditorTabs from '@/components/editor/EditorTabs.vue'
+
+  // Composables
+  import { useParams } from '@/composables/useRoute'
+  import { useTutorial } from '@/composables/useTutorial'
+
+  // Utilities
+  import { Repl, Sandbox } from '@vue/repl'
+  import Monaco from '@vue/repl/monaco-editor'
+  import '@vue/repl/style.css'
+  import { computed, shallowRef, watch } from 'vue'
+
+  definePage({
+    meta: {
+      layout: 'fullscreen',
+    },
+  })
+
+  const params = useParams<{ id: string }>()
+  const tutorialId = computed(() => params.value.id)
+
+  const {
+    store,
+    isDark,
+    replTheme,
+    previewOptions,
+    html,
+    stepLabel,
+    isFirst,
+    isLast,
+    isReady,
+    fileTreeKey,
+    nextStep,
+    prevStep,
+  } = useTutorial(tutorialId)
+
+  // Hide the Repl's built-in preview — we render Sandbox separately
+  store.showOutput = false
+
+  useHead({
+    title: computed(() => `Tutorial - Vuetify0`),
+  })
+
+  const breakpoints = useBreakpoints()
+  const isDesktop = computed(() => breakpoints.mdAndUp.value)
+  const sidebarOpen = shallowRef(true)
+  watch(isDesktop, v => {
+    sidebarOpen.value = v
+  })
+</script>
+
+<template>
+  <div class="h-screen flex flex-col">
+    <!-- Header -->
+    <header class="flex items-center justify-between h-[48px] px-3 border-b border-divider bg-surface shrink-0">
+      <div class="flex items-center gap-3">
+        <RouterLink
+          aria-label="Back to editor"
+          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors no-underline text-on-surface"
+          title="Back to editor"
+          to="/editor"
+        >
+          <AppIcon icon="arrow-left" :size="18" />
+        </RouterLink>
+
+        <span class="text-sm font-medium text-on-surface">Tutorial</span>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          v-if="!isDesktop"
+          aria-label="Toggle files"
+          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+          title="Toggle files"
+          @click="sidebarOpen = !sidebarOpen"
+        >
+          <AppIcon icon="folder" :size="18" />
+        </button>
+
+        <button
+          v-if="isDesktop"
+          aria-label="Toggle sidebar"
+          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+          title="Toggle sidebar"
+          @click="sidebarOpen = !sidebarOpen"
+        >
+          <AppIcon icon="menu" :size="18" />
+        </button>
+
+        <AppThemeToggle />
+      </div>
+    </header>
+
+    <!-- Tutorial layout -->
+    <Transition name="fade">
+      <div v-if="isReady" class="tutorial-layout flex-1 min-h-0" :class="{ dark: isDark }">
+        <!-- Markdown panel -->
+        <div class="tutorial-markdown-panel border-r border-divider">
+          <EditorMarkdownPanel
+            :html="html"
+            :is-first="isFirst"
+            :is-last="isLast"
+            :step-label="stepLabel"
+            @next="nextStep"
+            @prev="prevStep"
+          />
+        </div>
+
+        <!-- Editor area (Repl with hidden preview) -->
+        <div class="tutorial-editor-area flex flex-col min-w-0 border-b border-divider">
+          <div class="flex min-h-0 flex-1">
+            <EditorFileTree
+              v-if="sidebarOpen && isDesktop"
+              :key="fileTreeKey"
+              class="w-[200px]"
+              :store="store"
+            />
+
+            <div class="tutorial-repl-wrapper flex flex-col flex-1 min-w-0 editor-repl" :class="{ dark: isDark }">
+              <EditorTabs :store="store" />
+              <EditorBreadcrumbs :store="store" />
+
+              <Repl
+                :auto-resize="true"
+                class="flex-1 min-h-0"
+                :clear-console="true"
+                :editor="Monaco"
+                layout="horizontal"
+                :preview-options="previewOptions"
+                :show-compile-output="false"
+                :show-import-map="false"
+                :show-ts-config="false"
+                :store="store"
+                :theme="replTheme"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- Preview area (standalone Sandbox) -->
+        <div class="tutorial-preview-area min-w-0 editor-repl" :class="{ dark: isDark }">
+          <Sandbox
+            :clear-console="false"
+            :preview-options="previewOptions"
+            :show="true"
+            :store="store"
+            :theme="replTheme"
+          />
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+  .tutorial-layout {
+    display: grid;
+    grid-template-columns: 350px 1fr;
+    grid-template-rows: 1fr 1fr;
+    overflow: hidden;
+  }
+
+  .tutorial-markdown-panel {
+    grid-row: 1 / -1;
+    grid-column: 1;
+    overflow: hidden;
+  }
+
+  .tutorial-editor-area {
+    grid-row: 1;
+    grid-column: 2;
+  }
+
+  .tutorial-preview-area {
+    grid-row: 2;
+    grid-column: 2;
+  }
+
+  /* Reuse REPL theme variables */
+  .editor-repl :deep(.vue-repl) {
+    --color-branding: var(--v0-primary);
+    --color-branding-dark: var(--v0-primary);
+  }
+
+  .editor-repl.dark :deep(.vue-repl) {
+    --bg: var(--v0-background);
+    --bg-soft: var(--v0-surface);
+    --border: var(--v0-divider);
+    --text-light: var(--v0-on-surface-variant);
+  }
+
+  /* Hide REPL's built-in file tabs */
+  .editor-repl :deep(.file-selector) {
+    display: none !important;
+  }
+
+  /* Hide editor floating toggles */
+  .editor-repl :deep(.editor-floating) {
+    display: none !important;
+  }
+
+  /* Hide the Repl's preview pane — we render Sandbox separately */
+  .tutorial-repl-wrapper :deep(.split-pane .right) {
+    display: none !important;
+  }
+
+  .tutorial-repl-wrapper :deep(.split-pane .left) {
+    width: 100% !important;
+  }
+
+  /* Hide the SplitPane divider */
+  .tutorial-repl-wrapper :deep(.split-pane .divider) {
+    display: none !important;
+  }
+
+  /* Sandbox fills container */
+  .tutorial-preview-area :deep(.vue-repl),
+  .tutorial-preview-area :deep(.iframe-container),
+  .tutorial-preview-area :deep(iframe) {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Fade on mount */
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.2s;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  @media (max-width: 768px) {
+    .tutorial-layout {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto 1fr 1fr;
+    }
+
+    .tutorial-markdown-panel {
+      grid-row: 1;
+      grid-column: 1;
+      max-height: 40vh;
+      border-right: none;
+      border-bottom: 1px solid var(--v0-divider);
+    }
+
+    .tutorial-editor-area {
+      grid-row: 2;
+      grid-column: 1;
+    }
+
+    .tutorial-preview-area {
+      grid-row: 3;
+      grid-column: 1;
+    }
+  }
+</style>
diff --git a/apps/docs/src/pages/editor.vue b/apps/docs/src/pages/editor.vue
index 3f0b4720b..ec09932a7 100644
--- a/apps/docs/src/pages/editor.vue
+++ b/apps/docs/src/pages/editor.vue
@@ -13,9 +13,10 @@
 
   // Composables
   import { useEditorFiles } from '@/composables/useEditorFiles'
+  import { useEditorStore } from '@/composables/useEditorStore'
 
   // Utilities
-  import { Repl, useStore, useVueImportMap } from '@vue/repl'
+  import { Repl } from '@vue/repl'
   import Monaco from '@vue/repl/monaco-editor'
   import '@vue/repl/style.css'
   import { computed, shallowRef, useTemplateRef, watch } from 'vue'
@@ -37,50 +38,9 @@
   // ── Theme ──────────────────────────────────────────────────────────────
   const theme = useTheme()
   const isDark = computed(() => theme.isDark.value)
-  const replTheme = computed(() => isDark.value ? 'dark' : 'light')
 
   // ── REPL Setup ─────────────────────────────────────────────────────────
-  const { importMap: builtinImportMap, vueVersion } = useVueImportMap({
-    runtimeDev: 'https://cdn.jsdelivr.net/npm/@vue/runtime-dom/dist/runtime-dom.esm-browser.js',
-    runtimeProd: 'https://cdn.jsdelivr.net/npm/@vue/runtime-dom/dist/runtime-dom.esm-browser.prod.js',
-    serverRenderer: 'https://cdn.jsdelivr.net/npm/@vue/server-renderer/dist/server-renderer.esm-browser.js',
-  })
-
-  const importMap = computed(() => ({
-    imports: {
-      ...builtinImportMap.value?.imports,
-      '@vuetify/v0': 'https://cdn.jsdelivr.net/npm/@vuetify/v0@latest/dist/index.mjs',
-    },
-  }))
-
-  const store = useStore({
-    builtinImportMap: importMap,
-    vueVersion,
-    showOutput: shallowRef(true),
-  })
-
-  // Wind4 preflight reset + @property defaults.
-  // The UnoCSS runtime doesn't inject preflights or @property rules,
-  // so we provide the essential reset and opacity defaults that
-  // color-mix() based utilities (border-divider, bg-surface, etc.) rely on.
-  const previewHead = computed(() => `<style>
-    @property --un-border-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
-    @property --un-bg-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
-    @property --un-text-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
-    @property --un-shadow-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
-    @property --un-ring-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
-    @property --un-divide-opacity { syntax: "<percentage>"; inherits: false; initial-value: 100% }
-    @property --un-border-style { syntax: "*"; inherits: false; initial-value: solid }
-    *, ::before, ::after, ::backdrop { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid }
-    html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; -webkit-tap-highlight-color: transparent }
-    body { margin: 0; background-color: ${isDark.value ? '#121212' : '#ffffff'} }
-    #app { min-height: 100vh; opacity: 0; transition: opacity 0.15s }
-    button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer }
-    *:focus-visible { outline: 2px solid var(--v0-primary); outline-offset: 2px }
-    dialog::backdrop { background: rgb(0 0 0 / 0.3) }
-  </style>`)
-
-  const previewOptions = computed(() => ({ headHTML: previewHead.value }))
+  const { store, replTheme, previewOptions } = useEditorStore(isDark)
 
   // ── Editor files ─────────────────────────────────────────────────────
   const { isReady, fileTreeKey, loadExample: _loadExample } = useEditorFiles(store, () => isDark.value)
@@ -172,6 +132,15 @@
       </div>
 
       <div class="flex items-center gap-2">
+        <RouterLink
+          aria-label="Tutorial"
+          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors no-underline text-on-surface"
+          title="Tutorial"
+          to="/editor/tutorial/getting-started"
+        >
+          <AppIcon icon="book" :size="18" />
+        </RouterLink>
+
         <div ref="examplesContainer" class="relative">
           <button
             aria-label="Load example"
diff --git a/apps/docs/src/tutorials/getting-started/meta.json b/apps/docs/src/tutorials/getting-started/meta.json
new file mode 100644
index 000000000..2b3211c16
--- /dev/null
+++ b/apps/docs/src/tutorials/getting-started/meta.json
@@ -0,0 +1,4 @@
+{
+  "title": "Getting Started",
+  "description": "Build an interactive counter with @vuetify/v0 composables"
+}
diff --git a/apps/docs/src/tutorials/getting-started/step-1/App.vue b/apps/docs/src/tutorials/getting-started/step-1/App.vue
new file mode 100644
index 000000000..50a4fb1d9
--- /dev/null
+++ b/apps/docs/src/tutorials/getting-started/step-1/App.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+  // Utilities
+  import { shallowRef } from 'vue'
+
+  const count = shallowRef(0)
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-4">
+      Hello, v0!
+    </h1>
+
+    <p class="text-on-surface-variant mb-6">
+      This is your first v0 component. Try editing this text!
+    </p>
+
+    <div class="flex items-center gap-4">
+      <button
+        class="px-4 py-2 rounded bg-primary text-on-primary font-medium"
+        @click="count++"
+      >
+        Count: {{ count }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/tutorials/getting-started/step-1/README.md b/apps/docs/src/tutorials/getting-started/step-1/README.md
new file mode 100644
index 000000000..33b1fcb5c
--- /dev/null
+++ b/apps/docs/src/tutorials/getting-started/step-1/README.md
@@ -0,0 +1,17 @@
+# Your first component
+
+Welcome to the **@vuetify/v0** tutorial! This interactive guide will walk you through building components with headless composables.
+
+## What is v0?
+
+`@vuetify/v0` provides **headless** Vue 3 composables — logic-only building blocks with no opinions on styling. You bring your own design system.
+
+## The editor
+
+On the right, you can see a code editor (top) and a live preview (bottom). The code you write is compiled and rendered in real-time.
+
+## Let's start
+
+Right now, the editor shows a simple Vue component with a heading. In the next step, we'll add interactivity using `createStep` — a composable for building step-based navigation.
+
+Try editing the text in `App.vue` and watch the preview update instantly!
diff --git a/apps/docs/src/tutorials/getting-started/step-2/App.vue b/apps/docs/src/tutorials/getting-started/step-2/App.vue
new file mode 100644
index 000000000..efd016453
--- /dev/null
+++ b/apps/docs/src/tutorials/getting-started/step-2/App.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+  // Framework
+  import { createStep } from '@vuetify/v0'
+
+  // Utilities
+  import { computed } from 'vue'
+
+  const steps = [
+    { id: 'intro', label: 'Introduction' },
+    { id: 'setup', label: 'Setup' },
+    { id: 'finish', label: 'Finish' },
+  ]
+
+  const stepper = createStep()
+  stepper.onboard(steps.map((s, i) => ({ id: s.id, value: i })))
+  stepper.first()
+
+  const currentIndex = computed(() => stepper.selectedIndex.value)
+  const currentLabel = computed(() => steps[currentIndex.value]?.label)
+  const isFirst = computed(() => currentIndex.value === 0)
+  const isLast = computed(() => currentIndex.value === steps.length - 1)
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-6">
+      Step Navigator
+    </h1>
+
+    <!-- Step indicators -->
+    <div class="flex items-center gap-2 mb-8">
+      <div
+        v-for="(step, i) in steps"
+        :key="step.id"
+        class="flex items-center gap-2"
+      >
+        <div
+          class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold transition-all"
+          :class="i <= currentIndex
+            ? 'bg-primary text-on-primary'
+            : 'bg-surface-tint text-on-surface-variant'"
+        >
+          {{ i + 1 }}
+        </div>
+        <span
+          class="text-sm"
+          :class="i === currentIndex ? 'text-primary font-medium' : 'text-on-surface-variant'"
+        >
+          {{ step.label }}
+        </span>
+        <span v-if="i < steps.length - 1" class="text-divider mx-1">—</span>
+      </div>
+    </div>
+
+    <!-- Current step content -->
+    <div class="p-6 rounded-lg bg-surface-tint mb-6">
+      <p class="text-lg">
+        Currently on: <strong>{{ currentLabel }}</strong>
+      </p>
+      <p class="text-sm text-on-surface-variant mt-2">
+        Step {{ currentIndex + 1 }} of {{ steps.length }}
+      </p>
+    </div>
+
+    <!-- Navigation -->
+    <div class="flex gap-2">
+      <button
+        class="px-4 py-2 rounded bg-surface-tint text-on-surface disabled:opacity-40"
+        :disabled="isFirst"
+        @click="stepper.prev()"
+      >
+        Previous
+      </button>
+      <button
+        class="px-4 py-2 rounded bg-primary text-on-primary disabled:opacity-40"
+        :disabled="isLast"
+        @click="stepper.next()"
+      >
+        Next
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/tutorials/getting-started/step-2/README.md b/apps/docs/src/tutorials/getting-started/step-2/README.md
new file mode 100644
index 000000000..13d7e44c5
--- /dev/null
+++ b/apps/docs/src/tutorials/getting-started/step-2/README.md
@@ -0,0 +1,25 @@
+# Adding step navigation
+
+Now let's use `createStep` — a composable for building wizards, carousels, and any step-based UI.
+
+## What is createStep?
+
+`createStep` extends single-selection with navigation methods:
+
+- `first()` / `last()` — jump to boundaries
+- `next()` / `prev()` — move sequentially
+- Automatically **skips disabled** items
+- Supports **circular** navigation
+
+## How it works
+
+1. Call `createStep()` to create a stepper instance
+2. Register items with `onboard()` — each item gets an `id` and `value`
+3. Use `first()` to select the initial step
+4. Navigate with `next()`, `prev()`, etc.
+
+## Try it
+
+The code now imports `createStep` and sets up a 3-step wizard. Click the **Next** and **Previous** buttons in the preview to navigate between steps.
+
+Notice how `selectedValue` reactively updates as you navigate!
diff --git a/apps/docs/src/tutorials/getting-started/step-3/App.vue b/apps/docs/src/tutorials/getting-started/step-3/App.vue
new file mode 100644
index 000000000..dc4fe3730
--- /dev/null
+++ b/apps/docs/src/tutorials/getting-started/step-3/App.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+  // Framework
+  import { createStep } from '@vuetify/v0'
+
+  // Utilities
+  import { computed } from 'vue'
+
+  const steps = [
+    { id: 'cart', label: 'Cart', icon: '1' },
+    { id: 'shipping', label: 'Shipping', icon: '2' },
+    { id: 'payment', label: 'Payment', icon: '3', disabled: true },
+    { id: 'review', label: 'Review', icon: '4' },
+    { id: 'confirm', label: 'Confirm', icon: '5' },
+  ]
+
+  const stepper = createStep()
+  stepper.onboard(steps.map((s, i) => ({ id: s.id, value: i, disabled: s.disabled })))
+  stepper.first()
+
+  const currentIndex = computed(() => stepper.selectedIndex.value)
+  const isFirst = computed(() => currentIndex.value === 0)
+  const isLast = computed(() => currentIndex.value === stepper.size - 1)
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <!-- Stepper Track -->
+    <div class="relative flex items-center justify-between mb-12">
+      <div class="absolute top-5 left-0 right-0 h-0.5 bg-divider" />
+      <div
+        class="absolute top-5 left-0 h-0.5 bg-primary transition-all duration-400"
+        :style="{ width: (currentIndex / (steps.length - 1)) * 100 + '%' }"
+      />
+
+      <div
+        v-for="(step, i) in steps"
+        :key="step.id"
+        class="relative z-1 flex flex-col items-center cursor-pointer"
+        @click="!step.disabled && stepper.select(step.id)"
+      >
+        <div
+          class="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold transition-all duration-300"
+          :class="[
+            i <= currentIndex ? 'bg-primary text-on-primary' : step.disabled ? 'bg-surface border-2 border-dashed border-divider' : 'bg-surface border-2 border-solid border-divider',
+            i === currentIndex ? 'scale-115 shadow-[0_0_0_4px_rgba(59,130,246,0.2)]' : 'scale-90',
+            step.disabled ? 'opacity-50' : '',
+          ]"
+        >
+          <span v-if="i < currentIndex">&#10003;</span>
+          <span v-else>{{ step.icon }}</span>
+        </div>
+
+        <span
+          class="mt-2 text-xs font-medium"
+          :class="[
+            i === currentIndex ? 'text-primary' : 'text-on-surface-variant',
+            step.disabled ? 'line-through opacity-50' : '',
+          ]"
+        >
+          {{ step.label }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Controls -->
+    <div class="flex items-center justify-center gap-2">
+      <button
+        class="px-3 py-1.5 text-sm rounded border border-solid border-divider bg-surface disabled:opacity-40"
+        :disabled="isFirst"
+        @click="stepper.first()"
+      >
+        First
+      </button>
+      <button
+        class="px-4 py-1.5 text-sm rounded bg-surface-tint text-primary disabled:opacity-40"
+        :disabled="isFirst"
+        @click="stepper.prev()"
+      >
+        Prev
+      </button>
+      <button
+        class="px-4 py-1.5 text-sm rounded bg-primary text-on-primary disabled:opacity-40"
+        :disabled="isLast"
+        @click="stepper.next()"
+      >
+        Next
+      </button>
+      <button
+        class="px-3 py-1.5 text-sm rounded border border-solid border-divider bg-surface disabled:opacity-40"
+        :disabled="isLast"
+        @click="stepper.last()"
+      >
+        Last
+      </button>
+    </div>
+
+    <p class="mt-6 text-center text-xs text-on-surface-variant">
+      Step {{ currentIndex + 1 }} of {{ stepper.size }} · Payment step is disabled (auto-skipped)
+    </p>
+  </div>
+</template>
diff --git a/apps/docs/src/tutorials/getting-started/step-3/README.md b/apps/docs/src/tutorials/getting-started/step-3/README.md
new file mode 100644
index 000000000..f7ab6cb7a
--- /dev/null
+++ b/apps/docs/src/tutorials/getting-started/step-3/README.md
@@ -0,0 +1,32 @@
+# Disabled steps and skipping
+
+`createStep` can handle **disabled items** automatically. When you call `next()` or `prev()`, disabled steps are skipped.
+
+## Adding disabled steps
+
+Pass `disabled: true` in the ticket input to mark a step as disabled:
+
+```ts
+stepper.onboard([
+  { id: 'a', value: 0 },
+  { id: 'b', value: 1, disabled: true },
+  { id: 'c', value: 2 },
+])
+```
+
+When navigating from step A, calling `next()` will skip step B and land on step C.
+
+## What changed
+
+In this step, we added a **Payment** step that is disabled. Try navigating through the steps — notice how Payment is automatically skipped!
+
+## What's next
+
+This is just the beginning. `@vuetify/v0` provides many more composables:
+
+- **createSelection** — multi-select state management
+- **createGroup** — tri-state selection with mixed states
+- **useTheme** — reactive theme switching
+- **createForm** — async form validation
+
+Explore the [documentation](/) to learn more!
diff --git a/apps/docs/src/tutorials/index.ts b/apps/docs/src/tutorials/index.ts
new file mode 100644
index 000000000..78d6be93e
--- /dev/null
+++ b/apps/docs/src/tutorials/index.ts
@@ -0,0 +1,80 @@
+// Types
+export interface TutorialMeta {
+  title: string
+  description: string
+}
+
+export interface TutorialStep {
+  markdown: () => Promise<string>
+  files: Record<string, () => Promise<string>>
+}
+
+export interface Tutorial {
+  id: string
+  meta: TutorialMeta
+  steps: TutorialStep[]
+}
+
+// Discover all tutorials via import.meta.glob
+const metas = import.meta.glob<TutorialMeta>('./*/meta.json', { eager: true, import: 'default' })
+const markdowns = import.meta.glob<string>('./**/step-*/README.md', { query: '?raw', import: 'default' })
+const codeFiles = import.meta.glob<string>('./**/step-*/**/*.{vue,ts,js}', { query: '?raw', import: 'default' })
+
+function parseTutorialId (path: string): string {
+  // './getting-started/meta.json' → 'getting-started'
+  return path.split('/')[1]
+}
+
+function parseStepNumber (path: string): number {
+  // './getting-started/step-1/README.md' → 1
+  const match = path.match(/step-(\d+)/)
+  return match ? Number(match[1]) : 0
+}
+
+function getTutorials (): Tutorial[] {
+  const tutorials: Tutorial[] = []
+
+  for (const [metaPath, meta] of Object.entries(metas)) {
+    const id = parseTutorialId(metaPath)
+    const stepsMap = new Map<number, TutorialStep>()
+
+    // Collect markdown files for this tutorial
+    for (const [mdPath, loader] of Object.entries(markdowns)) {
+      if (!mdPath.startsWith(`./${id}/`)) continue
+      const stepNum = parseStepNumber(mdPath)
+      if (stepsMap.has(stepNum)) {
+        stepsMap.get(stepNum)!.markdown = loader
+      } else {
+        stepsMap.set(stepNum, { markdown: loader, files: {} })
+      }
+    }
+
+    // Collect code files for this tutorial
+    for (const [codePath, loader] of Object.entries(codeFiles)) {
+      if (!codePath.startsWith(`./${id}/`)) continue
+      const stepNum = parseStepNumber(codePath)
+      // Extract the file path relative to the step directory
+      // './getting-started/step-1/App.vue' → 'src/App.vue'
+      const fileName = codePath.replace(new RegExp(String.raw`^\./${id}/step-${stepNum}/`), '')
+      const replPath = `src/${fileName}`
+
+      if (!stepsMap.has(stepNum)) {
+        stepsMap.set(stepNum, { markdown: () => Promise.resolve(''), files: {} })
+      }
+      stepsMap.get(stepNum)!.files[replPath] = loader
+    }
+
+    // Sort steps by number
+    const steps = [...stepsMap.entries()]
+      .toSorted(([a], [b]) => a - b)
+      .map(([, step]) => step)
+
+    tutorials.push({ id, meta, steps })
+  }
+
+  return tutorials
+}
+
+export function getTutorial (id: string): Tutorial | undefined {
+  return getTutorials().find(t => t.id === id)
+}
diff --git a/apps/docs/src/typed-router.d.ts b/apps/docs/src/typed-router.d.ts
index fa53ef8e9..fcc4255a0 100644
--- a/apps/docs/src/typed-router.d.ts
+++ b/apps/docs/src/typed-router.d.ts
@@ -464,6 +464,13 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/editor.tutorial.[id]': RouteRecordInfo<
+      '/editor.tutorial.[id]',
+      '/editor/tutorial/:id',
+      { id: ParamValue<true> },
+      { id: ParamValue<false> },
+      | never
+    >,
     '/guide/': RouteRecordInfo<
       '/guide/',
       '/guide',
@@ -1079,6 +1086,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/editor.tutorial.[id].vue': {
+      routes:
+        | '/editor.tutorial.[id]'
+      views:
+        | never
+    }
     'src/pages/guide/index.md': {
       routes:
         | '/guide/'
diff --git a/knip.json b/knip.json
index 3fb0d7621..559e19ae6 100644
--- a/knip.json
+++ b/knip.json
@@ -33,7 +33,8 @@
         "src/skillz/tours/**/index.ts",
         "src/stores/skillz.ts",
         "src/data/**",
-        "src/examples/**"
+        "src/examples/**",
+        "src/tutorials/**"
       ],
       "ignoreDependencies": [
         "@vue/repl"

From 3d83a045cc508633a18c5d2bf176ca991702957d Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 15 Feb 2026 12:28:02 -0600
Subject: [PATCH 13/39] docs(editor): resizable tutorial panels, step
 preloading, and markdown hydration

Replace CSS Grid with nested flexbox and add three draggable resize handles
(markdown width, editor/preview split, file tree width) with persistent storage.
Optimize step transitions by preloading all tutorial steps in background and
using RAF-throttled pointer events. Hydrate v-html code fences and callouts
into DocsMarkup/DocsCallout components matching the docs site styling.
---
 .../components/editor/EditorMarkdownPanel.vue |  97 +++++++-
 apps/docs/src/composables/useTutorial.ts      |  60 ++++-
 apps/docs/src/pages/editor.tutorial.[id].vue  | 227 +++++++++++++-----
 .../getting-started/step-1/README.md          |   2 +-
 4 files changed, 305 insertions(+), 81 deletions(-)

diff --git a/apps/docs/src/components/editor/EditorMarkdownPanel.vue b/apps/docs/src/components/editor/EditorMarkdownPanel.vue
index f0d6e1ef3..990aeda44 100644
--- a/apps/docs/src/components/editor/EditorMarkdownPanel.vue
+++ b/apps/docs/src/components/editor/EditorMarkdownPanel.vue
@@ -1,4 +1,15 @@
 <script setup lang="ts">
+  // Framework
+  import { useTheme } from '@vuetify/v0'
+
+  // Components
+  import DocsCallout from '@/components/docs/DocsCallout.vue'
+  import DocsMarkup from '@/components/docs/DocsMarkup.vue'
+
+  // Utilities
+  import { decodeBase64 } from '@/utilities/decodeBase64'
+  import { computed, getCurrentInstance, h, nextTick, onBeforeUnmount, render, useTemplateRef, watch } from 'vue'
+
   const props = defineProps<{
     html: string
     stepLabel: string
@@ -10,6 +21,72 @@
     prev: []
     next: []
   }>()
+
+  const theme = useTheme()
+  const dataTheme = computed(() => theme.isDark.value ? 'dark' : 'light')
+
+  // ── Dynamic component mounting ───────────────────────────────────────
+  const contentRef = useTemplateRef<HTMLElement>('content')
+  const appContext = getCurrentInstance()?.appContext
+  const mountedWrappers = new Set<HTMLElement>()
+
+  watch(() => props.html, async () => {
+    await nextTick()
+    mountMarkupComponents()
+    mountAlertComponents()
+  })
+
+  onBeforeUnmount(() => {
+    for (const wrapper of mountedWrappers) {
+      render(null, wrapper)
+    }
+    mountedWrappers.clear()
+  })
+
+  function mountMarkupComponents () {
+    if (!contentRef.value) return
+
+    for (const el of contentRef.value.querySelectorAll<HTMLElement>('[data-markup]')) {
+      const code = el.dataset.code
+      const language = el.dataset.language
+      if (!code) continue
+
+      const highlighted = el.innerHTML
+      const wrapper = document.createElement('div')
+      el.replaceWith(wrapper)
+      mountedWrappers.add(wrapper)
+
+      const vnode = h(DocsMarkup, {
+        code,
+        language,
+      }, {
+        default: () => h('div', { innerHTML: highlighted }),
+      })
+      vnode.appContext = appContext ?? null
+      render(vnode, wrapper)
+    }
+  }
+
+  function mountAlertComponents () {
+    if (!contentRef.value) return
+
+    for (const el of contentRef.value.querySelectorAll<HTMLElement>('[data-alert]')) {
+      const type = el.dataset.type as 'tip' | 'info' | 'warning' | 'error'
+      const encodedContent = el.dataset.content
+      if (!type || !encodedContent) continue
+
+      const content = decodeBase64(encodedContent)
+      const wrapper = document.createElement('div')
+      el.replaceWith(wrapper)
+      mountedWrappers.add(wrapper)
+
+      const vnode = h(DocsCallout, { type }, {
+        default: () => h('div', { innerHTML: content }),
+      })
+      vnode.appContext = appContext ?? null
+      render(vnode, wrapper)
+    }
+  }
 </script>
 
 <template>
@@ -22,7 +99,7 @@
 
     <!-- Markdown content -->
     <div class="flex-1 overflow-y-auto px-5 py-4">
-      <div class="markdown-body tutorial-markdown" v-html="props.html" />
+      <div ref="content" class="markdown-body tutorial-markdown" :data-theme="dataTheme" v-html="props.html" />
     </div>
 
     <!-- Step navigation -->
@@ -97,18 +174,15 @@
     color: var(--v0-primary);
   }
 
-  .tutorial-markdown :deep(pre) {
-    margin-bottom: 0.75rem;
-    border-radius: 8px;
-    overflow-x: auto;
-  }
-
   .tutorial-markdown :deep(pre code) {
-    padding: 0;
     background: transparent;
     color: inherit;
   }
 
+  .tutorial-markdown :deep(.docs-markup) {
+    margin: 0.75rem 0;
+  }
+
   .tutorial-markdown :deep(strong) {
     color: var(--v0-on-surface);
     font-weight: 600;
@@ -123,3 +197,10 @@
     text-decoration: underline;
   }
 </style>
+
+<style>
+  /* Unscoped — targets imperatively mounted DocsMarkup components */
+  .tutorial-markdown .docs-markup .shiki code {
+    padding: 0.75rem 1rem 1rem;
+  }
+</style>
diff --git a/apps/docs/src/composables/useTutorial.ts b/apps/docs/src/composables/useTutorial.ts
index 56fa8fcaf..a4c0c5feb 100644
--- a/apps/docs/src/composables/useTutorial.ts
+++ b/apps/docs/src/composables/useTutorial.ts
@@ -60,34 +60,71 @@ export function useTutorial (tutorialId: ComputedRef<string>): UseTutorialReturn
     stepper.prev()
   }
 
-  async function loadStep (stepIndex: number) {
+  // ── Step preloading ──────────────────────────────────────────────────
+  const stepCache = new Map<number, { md: string, files: Record<string, string> }>()
+
+  async function preloadSteps () {
     const tutorial = getTutorial(tutorialId.value)
-    if (!tutorial || !tutorial.steps[stepIndex]) return
+    if (!tutorial) return
+
+    await Promise.all(tutorial.steps.map(async (step, i) => {
+      if (stepCache.has(i)) return
+      const fileEntries = Object.entries(step.files)
+      const [md, ...fileContents] = await Promise.all([
+        step.markdown(),
+        ...fileEntries.map(([, loader]) => loader()),
+      ])
+      const files: Record<string, string> = {}
+      for (const [j, fileEntry] of fileEntries.entries()) {
+        files[fileEntry[0]] = fileContents[j]
+      }
+      stepCache.set(i, { md, files })
+    }))
+  }
 
-    const step = tutorial.steps[stepIndex]
+  async function resolveStep (stepIndex: number): Promise<{ md: string, files: Record<string, string> } | undefined> {
+    const cached = stepCache.get(stepIndex)
+    if (cached) return cached
 
-    // Load markdown
-    markdown.value = await step.markdown()
+    const tutorial = getTutorial(tutorialId.value)
+    if (!tutorial || !tutorial.steps[stepIndex]) return
 
-    // Load code files
+    const step = tutorial.steps[stepIndex]
+    const fileEntries = Object.entries(step.files)
+    const [md, ...fileContents] = await Promise.all([
+      step.markdown(),
+      ...fileEntries.map(([, loader]) => loader()),
+    ])
     const files: Record<string, string> = {}
-    for (const [path, loader] of Object.entries(step.files)) {
-      files[path] = await loader()
+    for (const [i, fileEntry] of fileEntries.entries()) {
+      files[fileEntry[0]] = fileContents[i]
     }
+    const result = { md, files }
+    stepCache.set(stepIndex, result)
+    return result
+  }
+
+  // ── Step loading ─────────────────────────────────────────────────────
+  async function loadStep (stepIndex: number) {
+    const data = await resolveStep(stepIndex)
+    if (!data) return
+
+    // Update markdown immediately
+    markdown.value = data.md
 
     const currentTheme = isDark.value ? 'dark' : 'light'
     await store.setFiles(
       {
         'src/main.ts': createMainTs(currentTheme),
         'src/uno.config.ts': UNO_CONFIG_TS,
-        ...files,
+        ...data.files,
       },
       'src/main.ts',
     )
     store.files['src/main.ts']!.hidden = true
     store.files['src/uno.config.ts']!.hidden = true
 
-    const firstFile = Object.keys(files)[0] ?? 'src/App.vue'
+    const firstFile = Object.keys(data.files)[0] ?? 'src/App.vue'
     store.setActive(firstFile)
     fileTreeKey.value++
   }
@@ -112,6 +149,9 @@ export function useTutorial (tutorialId: ComputedRef<string>): UseTutorialReturn
     // Load first step
     await loadStep(0)
     isReady.value = true
+
+    // Preload remaining steps in background
+    preloadSteps()
   })
 
   return {
diff --git a/apps/docs/src/pages/editor.tutorial.[id].vue b/apps/docs/src/pages/editor.tutorial.[id].vue
index cf7a89c07..44b55b865 100644
--- a/apps/docs/src/pages/editor.tutorial.[id].vue
+++ b/apps/docs/src/pages/editor.tutorial.[id].vue
@@ -3,7 +3,7 @@
   import { definePage } from 'unplugin-vue-router/runtime'
 
   // Framework
-  import { useBreakpoints } from '@vuetify/v0'
+  import { clamp, useBreakpoints, useDocumentEventListener, useStorage, useToggleScope } from '@vuetify/v0'
 
   // Components
   import EditorBreadcrumbs from '@/components/editor/EditorBreadcrumbs.vue'
@@ -19,7 +19,7 @@
   import { Repl, Sandbox } from '@vue/repl'
   import Monaco from '@vue/repl/monaco-editor'
   import '@vue/repl/style.css'
-  import { computed, shallowRef, watch } from 'vue'
+  import { computed, shallowRef, type ShallowRef, watch } from 'vue'
 
   definePage({
     meta: {
@@ -58,6 +58,80 @@
   watch(isDesktop, v => {
     sidebarOpen.value = v
   })
+
+  // ── Resizable panels ────────────────────────────────────────────────
+  const storage = useStorage()
+
+  function useResizeHandle (options: {
+    storageKey: string
+    defaultValue: number
+    min: number
+    max: number
+    direction: 'horizontal' | 'vertical'
+  }): {
+    size: ShallowRef<number>
+    isResizing: ShallowRef<boolean>
+    onPointerDown: (e: PointerEvent) => void
+    reset: () => void
+  } {
+    const stored = storage.get<number>(options.storageKey, options.defaultValue)
+    const size = shallowRef(stored.value)
+    const isResizing = shallowRef(false)
+    const startPos = shallowRef(0)
+    const startSize = shallowRef(0)
+    const containerSize = shallowRef(0)
+
+    function onPointerDown (e: PointerEvent) {
+      e.preventDefault()
+      startPos.value = options.direction === 'horizontal' ? e.clientX : e.clientY
+      startSize.value = size.value
+      if (options.direction === 'vertical') {
+        containerSize.value = (e.target as HTMLElement).parentElement?.offsetHeight ?? 1
+      }
+      isResizing.value = true
+    }
+
+    let rafId = 0
+
+    useToggleScope(() => isResizing.value, () => {
+      useDocumentEventListener('pointermove', (e: PointerEvent) => {
+        if (rafId) return
+        rafId = requestAnimationFrame(() => {
+          const pos = options.direction === 'horizontal' ? e.clientX : e.clientY
+          const delta = pos - startPos.value
+          size.value = options.direction === 'vertical' ? clamp(startSize.value + (delta / containerSize.value) * 100, options.min, options.max) : clamp(startSize.value + delta, options.min, options.max)
+          rafId = 0
+        })
+      })
+      useDocumentEventListener('pointerup', () => {
+        if (rafId) cancelAnimationFrame(rafId)
+        rafId = 0
+        stored.value = size.value
+        isResizing.value = false
+      })
+    })
+
+    function reset () {
+      size.value = options.defaultValue
+      stored.value = options.defaultValue
+    }
+
+    return { size, isResizing, onPointerDown, reset }
+  }
+
+  const markdownHandle = useResizeHandle({
+    storageKey: 'tutorial-markdown-width', defaultValue: 350, min: 200, max: 600, direction: 'horizontal',
+  })
+  const splitHandle = useResizeHandle({
+    storageKey: 'tutorial-split-percent', defaultValue: 50, min: 20, max: 80, direction: 'vertical',
+  })
+  const fileTreeHandle = useResizeHandle({
+    storageKey: 'tutorial-filetree-width', defaultValue: 200, min: 140, max: 400, direction: 'horizontal',
+  })
+
+  const anyResizing = computed(() =>
+    markdownHandle.isResizing.value || splitHandle.isResizing.value || fileTreeHandle.isResizing.value,
+  )
 </script>
 
 <template>
@@ -104,9 +178,20 @@
 
     <!-- Tutorial layout -->
     <Transition name="fade">
-      <div v-if="isReady" class="tutorial-layout flex-1 min-h-0" :class="{ dark: isDark }">
+      <div
+        v-if="isReady"
+        class="flex-1 min-h-0 flex overflow-hidden"
+        :class="[
+          { dark: isDark, 'select-none': anyResizing },
+          isDesktop ? 'flex-row' : 'flex-col',
+        ]"
+      >
         <!-- Markdown panel -->
-        <div class="tutorial-markdown-panel border-r border-divider">
+        <div
+          class="tutorial-markdown-panel overflow-hidden shrink-0"
+          :class="isDesktop ? 'border-r border-divider' : 'border-b border-divider max-h-[40vh]'"
+          :style="isDesktop ? { width: `${markdownHandle.size.value}px` } : undefined"
+        >
           <EditorMarkdownPanel
             :html="html"
             :is-first="isFirst"
@@ -117,17 +202,43 @@
           />
         </div>
 
-        <!-- Editor area (Repl with hidden preview) -->
-        <div class="tutorial-editor-area flex flex-col min-w-0 border-b border-divider">
-          <div class="flex min-h-0 flex-1">
+        <!-- Markdown ↔ Right column handle -->
+        <div
+          v-if="isDesktop"
+          class="tutorial-resize-handle tutorial-resize-handle--col"
+          :class="{ 'tutorial-resize-handle--active': markdownHandle.isResizing.value }"
+          @dblclick="markdownHandle.reset()"
+          @pointerdown="markdownHandle.onPointerDown"
+        />
+
+        <!-- Right column -->
+        <div class="flex flex-col flex-1 min-w-0 min-h-0">
+          <!-- Editor area -->
+          <div
+            class="flex min-h-0 min-w-0 overflow-hidden"
+            :style="isDesktop ? { height: `${splitHandle.size.value}%` } : { flex: '1' }"
+          >
             <EditorFileTree
               v-if="sidebarOpen && isDesktop"
               :key="fileTreeKey"
-              class="w-[200px]"
+              class="shrink-0"
               :store="store"
+              :style="{ width: `${fileTreeHandle.size.value}px` }"
+            />
+
+            <!-- File tree ↔ Editor handle -->
+            <div
+              v-if="sidebarOpen && isDesktop"
+              class="tutorial-resize-handle tutorial-resize-handle--col"
+              :class="{ 'tutorial-resize-handle--active': fileTreeHandle.isResizing.value }"
+              @dblclick="fileTreeHandle.reset()"
+              @pointerdown="fileTreeHandle.onPointerDown"
             />
 
-            <div class="tutorial-repl-wrapper flex flex-col flex-1 min-w-0 editor-repl" :class="{ dark: isDark }">
+            <div
+              class="tutorial-repl-wrapper flex flex-col flex-1 min-w-0 editor-repl"
+              :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
+            >
               <EditorTabs :store="store" />
               <EditorBreadcrumbs :store="store" />
 
@@ -146,17 +257,29 @@
               />
             </div>
           </div>
-        </div>
 
-        <!-- Preview area (standalone Sandbox) -->
-        <div class="tutorial-preview-area min-w-0 editor-repl" :class="{ dark: isDark }">
-          <Sandbox
-            :clear-console="false"
-            :preview-options="previewOptions"
-            :show="true"
-            :store="store"
-            :theme="replTheme"
+          <!-- Editor ↔ Preview handle -->
+          <div
+            v-if="isDesktop"
+            class="tutorial-resize-handle tutorial-resize-handle--row"
+            :class="{ 'tutorial-resize-handle--active': splitHandle.isResizing.value }"
+            @dblclick="splitHandle.reset()"
+            @pointerdown="splitHandle.onPointerDown"
           />
+
+          <!-- Preview area -->
+          <div
+            class="tutorial-preview flex-1 min-w-0 min-h-0 editor-repl overflow-hidden"
+            :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
+          >
+            <Sandbox
+              :clear-console="false"
+              :preview-options="previewOptions"
+              :show="true"
+              :store="store"
+              :theme="replTheme"
+            />
+          </div>
         </div>
       </div>
     </Transition>
@@ -164,31 +287,31 @@
 </template>
 
 <style scoped>
-  .tutorial-layout {
-    display: grid;
-    grid-template-columns: 350px 1fr;
-    grid-template-rows: 1fr 1fr;
-    overflow: hidden;
+  /* Resize handles */
+  .tutorial-resize-handle {
+    flex-shrink: 0;
+    background: transparent;
+    transition: background 0.15s;
   }
 
-  .tutorial-markdown-panel {
-    grid-row: 1 / -1;
-    grid-column: 1;
-    overflow: hidden;
+  .tutorial-resize-handle:hover,
+  .tutorial-resize-handle--active {
+    background: var(--v0-primary);
   }
 
-  .tutorial-editor-area {
-    grid-row: 1;
-    grid-column: 2;
+  .tutorial-resize-handle--col {
+    width: 4px;
+    cursor: col-resize;
   }
 
-  .tutorial-preview-area {
-    grid-row: 2;
-    grid-column: 2;
+  .tutorial-resize-handle--row {
+    height: 4px;
+    cursor: row-resize;
   }
 
-  /* Reuse REPL theme variables */
+  /* REPL theme variables */
   .editor-repl :deep(.vue-repl) {
+    --header-height: 0px;
     --color-branding: var(--v0-primary);
     --color-branding-dark: var(--v0-primary);
   }
@@ -225,13 +348,18 @@
   }
 
   /* Sandbox fills container */
-  .tutorial-preview-area :deep(.vue-repl),
-  .tutorial-preview-area :deep(.iframe-container),
-  .tutorial-preview-area :deep(iframe) {
+  .editor-repl :deep(.vue-repl),
+  .editor-repl :deep(.iframe-container),
+  .editor-repl :deep(iframe) {
     width: 100%;
     height: 100%;
   }
 
+  /* Match iframe bg to preview body to prevent flash between steps */
+  .tutorial-preview :deep(iframe) {
+    background-color: var(--v0-background) !important;
+  }
+
   /* Fade on mount */
   .fade-enter-active,
   .fade-leave-active {
@@ -242,29 +370,4 @@
   .fade-leave-to {
     opacity: 0;
   }
-
-  @media (max-width: 768px) {
-    .tutorial-layout {
-      grid-template-columns: 1fr;
-      grid-template-rows: auto 1fr 1fr;
-    }
-
-    .tutorial-markdown-panel {
-      grid-row: 1;
-      grid-column: 1;
-      max-height: 40vh;
-      border-right: none;
-      border-bottom: 1px solid var(--v0-divider);
-    }
-
-    .tutorial-editor-area {
-      grid-row: 2;
-      grid-column: 1;
-    }
-
-    .tutorial-preview-area {
-      grid-row: 3;
-      grid-column: 1;
-    }
-  }
 </style>
diff --git a/apps/docs/src/tutorials/getting-started/step-1/README.md b/apps/docs/src/tutorials/getting-started/step-1/README.md
index 33b1fcb5c..2dd02e871 100644
--- a/apps/docs/src/tutorials/getting-started/step-1/README.md
+++ b/apps/docs/src/tutorials/getting-started/step-1/README.md
@@ -14,4 +14,4 @@ On the right, you can see a code editor (top) and a live preview (bottom). The c
 
 Right now, the editor shows a simple Vue component with a heading. In the next step, we'll add interactivity using `createStep` — a composable for building step-based navigation.
 
-Try editing the text in `App.vue` and watch the preview update instantly!
+> [!TIP] Try editing the text in `App.vue` and watch the preview update instantly!

From ca5c5f20ef94ad3013ec4493a84fb789c6a37a3e Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 15 Feb 2026 12:35:39 -0600
Subject: [PATCH 14/39] docs(editor): move tutorials into skillz directory

---
 apps/docs/src/composables/useTutorial.ts                        | 2 +-
 apps/docs/src/{ => skillz}/tutorials/getting-started/meta.json  | 0
 .../src/{ => skillz}/tutorials/getting-started/step-1/App.vue   | 0
 .../src/{ => skillz}/tutorials/getting-started/step-1/README.md | 0
 .../src/{ => skillz}/tutorials/getting-started/step-2/App.vue   | 0
 .../src/{ => skillz}/tutorials/getting-started/step-2/README.md | 0
 .../src/{ => skillz}/tutorials/getting-started/step-3/App.vue   | 0
 .../src/{ => skillz}/tutorials/getting-started/step-3/README.md | 0
 apps/docs/src/{ => skillz}/tutorials/index.ts                   | 0
 knip.json                                                       | 2 +-
 10 files changed, 2 insertions(+), 2 deletions(-)
 rename apps/docs/src/{ => skillz}/tutorials/getting-started/meta.json (100%)
 rename apps/docs/src/{ => skillz}/tutorials/getting-started/step-1/App.vue (100%)
 rename apps/docs/src/{ => skillz}/tutorials/getting-started/step-1/README.md (100%)
 rename apps/docs/src/{ => skillz}/tutorials/getting-started/step-2/App.vue (100%)
 rename apps/docs/src/{ => skillz}/tutorials/getting-started/step-2/README.md (100%)
 rename apps/docs/src/{ => skillz}/tutorials/getting-started/step-3/App.vue (100%)
 rename apps/docs/src/{ => skillz}/tutorials/getting-started/step-3/README.md (100%)
 rename apps/docs/src/{ => skillz}/tutorials/index.ts (100%)

diff --git a/apps/docs/src/composables/useTutorial.ts b/apps/docs/src/composables/useTutorial.ts
index a4c0c5feb..f627f7ec9 100644
--- a/apps/docs/src/composables/useTutorial.ts
+++ b/apps/docs/src/composables/useTutorial.ts
@@ -14,7 +14,7 @@ import type { ComputedRef, ShallowRef } from 'vue'
 
 import { createMainTs, UNO_CONFIG_TS } from '@/data/editor-defaults'
 // Tutorials
-import { getTutorial } from '@/tutorials'
+import { getTutorial } from '@/skillz/tutorials'
 
 export interface UseTutorialReturn {
   store: ReplStore
diff --git a/apps/docs/src/tutorials/getting-started/meta.json b/apps/docs/src/skillz/tutorials/getting-started/meta.json
similarity index 100%
rename from apps/docs/src/tutorials/getting-started/meta.json
rename to apps/docs/src/skillz/tutorials/getting-started/meta.json
diff --git a/apps/docs/src/tutorials/getting-started/step-1/App.vue b/apps/docs/src/skillz/tutorials/getting-started/step-1/App.vue
similarity index 100%
rename from apps/docs/src/tutorials/getting-started/step-1/App.vue
rename to apps/docs/src/skillz/tutorials/getting-started/step-1/App.vue
diff --git a/apps/docs/src/tutorials/getting-started/step-1/README.md b/apps/docs/src/skillz/tutorials/getting-started/step-1/README.md
similarity index 100%
rename from apps/docs/src/tutorials/getting-started/step-1/README.md
rename to apps/docs/src/skillz/tutorials/getting-started/step-1/README.md
diff --git a/apps/docs/src/tutorials/getting-started/step-2/App.vue b/apps/docs/src/skillz/tutorials/getting-started/step-2/App.vue
similarity index 100%
rename from apps/docs/src/tutorials/getting-started/step-2/App.vue
rename to apps/docs/src/skillz/tutorials/getting-started/step-2/App.vue
diff --git a/apps/docs/src/tutorials/getting-started/step-2/README.md b/apps/docs/src/skillz/tutorials/getting-started/step-2/README.md
similarity index 100%
rename from apps/docs/src/tutorials/getting-started/step-2/README.md
rename to apps/docs/src/skillz/tutorials/getting-started/step-2/README.md
diff --git a/apps/docs/src/tutorials/getting-started/step-3/App.vue b/apps/docs/src/skillz/tutorials/getting-started/step-3/App.vue
similarity index 100%
rename from apps/docs/src/tutorials/getting-started/step-3/App.vue
rename to apps/docs/src/skillz/tutorials/getting-started/step-3/App.vue
diff --git a/apps/docs/src/tutorials/getting-started/step-3/README.md b/apps/docs/src/skillz/tutorials/getting-started/step-3/README.md
similarity index 100%
rename from apps/docs/src/tutorials/getting-started/step-3/README.md
rename to apps/docs/src/skillz/tutorials/getting-started/step-3/README.md
diff --git a/apps/docs/src/tutorials/index.ts b/apps/docs/src/skillz/tutorials/index.ts
similarity index 100%
rename from apps/docs/src/tutorials/index.ts
rename to apps/docs/src/skillz/tutorials/index.ts
diff --git a/knip.json b/knip.json
index 559e19ae6..72e6d1f9f 100644
--- a/knip.json
+++ b/knip.json
@@ -34,7 +34,7 @@
         "src/stores/skillz.ts",
         "src/data/**",
         "src/examples/**",
-        "src/tutorials/**"
+        "src/skillz/tutorials/**"
       ],
       "ignoreDependencies": [
         "@vue/repl"

From dfc4417cf7441fa014e6a1fc7cd190e1ad13e69e Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 15 Feb 2026 13:44:03 -0600
Subject: [PATCH 15/39] docs(editor): sync preview theme when doc site theme
 toggles

---
 apps/docs/src/composables/useTutorial.ts | 36 ++++++++++++++++++------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/apps/docs/src/composables/useTutorial.ts b/apps/docs/src/composables/useTutorial.ts
index f627f7ec9..e1f72fc75 100644
--- a/apps/docs/src/composables/useTutorial.ts
+++ b/apps/docs/src/composables/useTutorial.ts
@@ -6,21 +6,24 @@ import { useEditorStore } from '@/composables/useEditorStore'
 import { useMarkdown } from '@/composables/useMarkdown'
 
 // Utilities
+import { compileFile } from '@vue/repl'
 import { computed, onMounted, shallowRef, watch } from 'vue'
 
 // Types
+import type { StepOptions, TutorialMeta } from '@/skillz/tutorials'
 import type { ReplStore } from '@vue/repl'
 import type { ComputedRef, ShallowRef } from 'vue'
 
 import { createMainTs, UNO_CONFIG_TS } from '@/data/editor-defaults'
 // Tutorials
-import { getTutorial } from '@/skillz/tutorials'
+import { getTutorial, parseStepOptions } from '@/skillz/tutorials'
 
 export interface UseTutorialReturn {
   store: ReplStore
   isDark: ComputedRef<boolean>
   replTheme: ComputedRef<'dark' | 'light'>
   previewOptions: ComputedRef<{ headHTML: string }>
+  meta: ComputedRef<TutorialMeta | undefined>
   markdown: ShallowRef<string>
   html: ShallowRef<string>
   stepLabel: ComputedRef<string>
@@ -30,6 +33,7 @@ export interface UseTutorialReturn {
   isLast: ComputedRef<boolean>
   isReady: ShallowRef<boolean>
   fileTreeKey: ShallowRef<number>
+  stepOptions: ShallowRef<StepOptions>
   nextStep: () => void
   prevStep: () => void
 }
@@ -40,10 +44,12 @@ export function useTutorial (tutorialId: ComputedRef<string>): UseTutorialReturn
 
   const { store, replTheme, previewOptions } = useEditorStore(isDark)
 
+  const meta = computed(() => getTutorial(tutorialId.value)?.meta)
   const markdown = shallowRef('')
   const { html } = useMarkdown(markdown)
   const isReady = shallowRef(false)
   const fileTreeKey = shallowRef(0)
+  const stepOptions = shallowRef<StepOptions>({})
 
   const stepper = createStep()
   const totalSteps = computed(() => stepper.size)
@@ -61,7 +67,7 @@ export function useTutorial (tutorialId: ComputedRef<string>): UseTutorialReturn
   }
 
   // ── Step preloading ──────────────────────────────────────────────────
-  const stepCache = new Map<number, { md: string, files: Record<string, string> }>()
+  const stepCache = new Map<number, { md: string, files: Record<string, string>, options: StepOptions }>()
 
   async function preloadSteps () {
     const tutorial = getTutorial(tutorialId.value)
@@ -70,19 +76,20 @@ export function useTutorial (tutorialId: ComputedRef<string>): UseTutorialReturn
     await Promise.all(tutorial.steps.map(async (step, i) => {
       if (stepCache.has(i)) return
       const fileEntries = Object.entries(step.files)
-      const [md, ...fileContents] = await Promise.all([
+      const [rawMd, ...fileContents] = await Promise.all([
         step.markdown(),
         ...fileEntries.map(([, loader]) => loader()),
       ])
+      const { body, options } = parseStepOptions(rawMd)
       const files: Record<string, string> = {}
       for (const [j, fileEntry] of fileEntries.entries()) {
         files[fileEntry[0]] = fileContents[j]
       }
-      stepCache.set(i, { md, files })
+      stepCache.set(i, { md: body, files, options })
     }))
   }
 
-  async function resolveStep (stepIndex: number): Promise<{ md: string, files: Record<string, string> } | undefined> {
+  async function resolveStep (stepIndex: number): Promise<{ md: string, files: Record<string, string>, options: StepOptions } | undefined> {
     const cached = stepCache.get(stepIndex)
     if (cached) return cached
 
@@ -91,15 +98,16 @@ export function useTutorial (tutorialId: ComputedRef<string>): UseTutorialReturn
 
     const step = tutorial.steps[stepIndex]
     const fileEntries = Object.entries(step.files)
-    const [md, ...fileContents] = await Promise.all([
+    const [rawMd, ...fileContents] = await Promise.all([
       step.markdown(),
       ...fileEntries.map(([, loader]) => loader()),
     ])
+    const { body, options } = parseStepOptions(rawMd)
     const files: Record<string, string> = {}
     for (const [i, fileEntry] of fileEntries.entries()) {
       files[fileEntry[0]] = fileContents[i]
     }
-    const result = { md, files }
+    const result = { md: body, files, options }
     stepCache.set(stepIndex, result)
     return result
   }
@@ -109,8 +117,9 @@ export function useTutorial (tutorialId: ComputedRef<string>): UseTutorialReturn
     const data = await resolveStep(stepIndex)
     if (!data) return
 
-    // Update markdown immediately
+    // Update markdown and options immediately
     markdown.value = data.md
+    stepOptions.value = data.options
 
     const currentTheme = isDark.value ? 'dark' : 'light'
     await store.setFiles(
@@ -136,6 +145,15 @@ export function useTutorial (tutorialId: ComputedRef<string>): UseTutorialReturn
     }
   })
 
+  // Sync theme into the preview's main.ts when toggled
+  watch(isDark, async () => {
+    if (!isReady.value) return
+    const file = store.files['src/main.ts']
+    if (!file) return
+    file.code = createMainTs(isDark.value ? 'dark' : 'light')
+    await compileFile(store, file)
+  })
+
   onMounted(async () => {
     const tutorial = getTutorial(tutorialId.value)
     if (!tutorial || tutorial.steps.length === 0) return
@@ -159,6 +177,7 @@ export function useTutorial (tutorialId: ComputedRef<string>): UseTutorialReturn
     isDark,
     replTheme,
     previewOptions,
+    meta,
     markdown,
     html,
     stepLabel,
@@ -168,6 +187,7 @@ export function useTutorial (tutorialId: ComputedRef<string>): UseTutorialReturn
     isLast,
     isReady,
     fileTreeKey,
+    stepOptions,
     nextStep,
     prevStep,
   }

From 669f58af64b55f1e65f3cc0f5dc4c9f924b4429b Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 15 Feb 2026 13:54:43 -0600
Subject: [PATCH 16/39] docs(editor): wrap vue tutorial code fences in template
 tags

---
 .../tutorials/vue-basics/step-3/README.md     | 36 ++++++++++++++++++
 .../tutorials/vue-basics/step-5/README.md     | 38 +++++++++++++++++++
 .../tutorials/vue-basics/step-6/README.md     | 32 ++++++++++++++++
 .../tutorials/vue-basics/step-7/README.md     | 38 +++++++++++++++++++
 4 files changed, 144 insertions(+)
 create mode 100644 apps/docs/src/skillz/tutorials/vue-basics/step-3/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-basics/step-5/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-basics/step-6/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-basics/step-7/README.md

diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-3/README.md b/apps/docs/src/skillz/tutorials/vue-basics/step-3/README.md
new file mode 100644
index 000000000..e6e5e8cf2
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-3/README.md
@@ -0,0 +1,36 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Event handling
+
+Vue uses `@` (shorthand for `v-on`) to listen for DOM events. This is how you'll wire up user interactions to v0 state changes.
+
+```vue
+<template>
+  <button @click="count++">
+    Clicked {{ count }} times
+  </button>
+</template>
+```
+
+You can use inline expressions or call a function:
+
+```vue
+<script setup>
+  import { ref } from 'vue'
+
+  const count = ref(0)
+
+  function increment() {
+    count.value++
+  }
+</script>
+```
+
+Notice that inside `<script setup>`, you access the ref with `.value`. Vue only auto-unwraps refs in templates.
+
+## Try it
+
+Click the button in the preview. Then try adding a **Reset** button that sets `count.value = 0`.
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-5/README.md b/apps/docs/src/skillz/tutorials/vue-basics/step-5/README.md
new file mode 100644
index 000000000..776974f09
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-5/README.md
@@ -0,0 +1,38 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Conditional rendering
+
+Vue provides directives to **conditionally render** elements. You'll see `v-if` throughout v0 examples to show and hide UI based on composable state.
+
+## v-if / v-else
+
+```vue
+<template>
+  <p v-if="loggedIn">Welcome back!</p>
+  <p v-else>Please log in.</p>
+</template>
+```
+
+`v-if` completely **adds or removes** the element from the DOM.
+
+## v-show
+
+```vue
+<template>
+  <p v-show="visible">I'm toggled with CSS</p>
+</template>
+```
+
+`v-show` always renders the element but toggles `display: none`. Use it when something toggles frequently.
+
+## Rule of thumb
+
+- **`v-if`** — for conditions that rarely change (cheaper initial render)
+- **`v-show`** — for things that toggle often (cheaper subsequent toggles)
+
+## Try it
+
+Click the toggle button to switch states. Try changing `v-if` to `v-show` and inspect the DOM to see the difference.
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-6/README.md b/apps/docs/src/skillz/tutorials/vue-basics/step-6/README.md
new file mode 100644
index 000000000..4d51cfcf1
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-6/README.md
@@ -0,0 +1,32 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# List rendering
+
+`v-for` renders a list of items from an array. v0 composables like `createSelection` and `createStep` work with arrays of items, so you'll use this pattern often.
+
+```vue
+<template>
+  <ul>
+    <li v-for="item in items" :key="item.id">
+      {{ item.text }}
+    </li>
+  </ul>
+</template>
+```
+
+The `:key` binding gives Vue a **stable identity** for each element so it can efficiently update the DOM when the list changes. Always provide a unique key.
+
+## Reactivity
+
+Since `items` is reactive, pushing to or splicing from the array automatically updates the rendered list:
+
+```js
+items.value.push({ id: 3, text: 'New item' })
+```
+
+## Try it
+
+Type in the input and click **Add** to add items. Try implementing a remove button on each item.
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-7/README.md b/apps/docs/src/skillz/tutorials/vue-basics/step-7/README.md
new file mode 100644
index 000000000..3485b832a
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-7/README.md
@@ -0,0 +1,38 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Form inputs
+
+Vue's `v-model` directive creates **two-way bindings** between form inputs and reactive state. v0's `useProxyModel` builds on this same concept for component props.
+
+```vue
+<template>
+  <input v-model="message">
+  <p>You typed: {{ message }}</p>
+</template>
+```
+
+`v-model` works on `<input>`, `<textarea>`, `<select>`, and custom components. It's syntactic sugar for binding `:value` and listening for `@input` events.
+
+## Modifiers
+
+- **`.trim`** — automatically trims whitespace
+- **`.number`** — casts the value to a number
+- **`.lazy`** — syncs on `change` instead of `input`
+
+```vue
+<template>
+  <input v-model.trim="name">
+  <input v-model.number="age" type="number">
+</template>
+```
+
+## Try it
+
+Try typing, selecting, and toggling — watch how all the values stay in sync in the summary below.
+
+## What's next
+
+Now that you're familiar with Vue's fundamentals, you're ready to explore v0's composables. These building blocks use the same refs, computed properties, and template directives you just practiced — but handle the complex state management for you.

From 6727c202b2c05cbf1803719aea8cefb956125818 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 17 Feb 2026 16:13:40 -0600
Subject: [PATCH 17/39] docs(editor): tutorial landing pages, level grouping,
 and card improvements

---
 apps/docs/src/components/skillz/SkillCard.vue | 12 +++-
 .../src/components/skillz/SkillCardDeck.vue   | 36 ++++++-----
 .../components/skillz/SkillPrerequisites.vue  |  2 +-
 apps/docs/src/pages/skillz.[id].vue           | 16 +++--
 apps/docs/src/skillz/tutorials/index.ts       | 59 ++++++++++++++++++-
 .../src/skillz/tutorials/vue-basics/meta.json | 18 ++++++
 apps/docs/src/stores/skillz.ts                | 11 +++-
 apps/docs/src/types/skill.ts                  | 11 ++--
 8 files changed, 133 insertions(+), 32 deletions(-)
 create mode 100644 apps/docs/src/skillz/tutorials/vue-basics/meta.json

diff --git a/apps/docs/src/components/skillz/SkillCard.vue b/apps/docs/src/components/skillz/SkillCard.vue
index 1e87cecd0..270b86b9f 100644
--- a/apps/docs/src/components/skillz/SkillCard.vue
+++ b/apps/docs/src/components/skillz/SkillCard.vue
@@ -9,6 +9,8 @@
   // Types
   import type { SkillMeta } from '@/types/skill'
 
+  import { SKILL_TRACK_META } from '@/types/skill'
+
   // Stores
   import { useSkillzStore } from '@/stores/skillz'
 
@@ -19,6 +21,10 @@
   const store = useSkillzStore()
   const done = computed(() => store.completed(props.skill.id))
   const isLocked = computed(() => store.locked(props.skill.id))
+  const href = computed(() => {
+    if (isLocked.value) return undefined
+    return `/skillz/${props.skill.id}`
+  })
 </script>
 
 <template>
@@ -27,7 +33,7 @@
     :class="{ 'border-success': done }"
     :disabled="isLocked"
     hoverable
-    :to="isLocked ? undefined : `/skillz/${skill.id}`"
+    :to="href"
   >
     <div class="flex justify-between items-center mb-2">
       <div class="flex items-center gap-2">
@@ -47,7 +53,9 @@
       <SkillPrerequisites class="mb-3" :prerequisites="skill.prerequisites" />
 
       <div class="flex justify-between items-center text-xs text-on-surface-variant">
-        <SkillCategoryTags :categories="skill.categories" />
+        <span class="px-2 py-1 text-[10px] font-medium tracking-wide rounded-lg bg-surface-variant-60 text-on-surface-variant border border-divider-50">
+          {{ SKILL_TRACK_META[skill.track].label }}
+        </span>
         <SkillDuration :minutes="skill.minutes" />
       </div>
     </div>
diff --git a/apps/docs/src/components/skillz/SkillCardDeck.vue b/apps/docs/src/components/skillz/SkillCardDeck.vue
index 25066d77b..987c319e9 100644
--- a/apps/docs/src/components/skillz/SkillCardDeck.vue
+++ b/apps/docs/src/components/skillz/SkillCardDeck.vue
@@ -6,37 +6,43 @@
   import { computed } from 'vue'
 
   // Types
-  import type { SkillMeta, SkillTrack } from '@/types/skill'
+  import type { SkillLevel, SkillMeta } from '@/types/skill'
 
-  import { SKILL_TRACK_META } from '@/types/skill'
+  import { SKILL_LEVEL_META } from '@/types/skill'
+
+  // Stores
+  import { useSkillzStore } from '@/stores/skillz'
 
   const props = defineProps<{
     items: SkillMeta[]
   }>()
 
-  // Group skills by track
-  const tracks: SkillTrack[] = ['essentials', 'fundamentals', 'features', 'integration']
+  const store = useSkillzStore()
+
+  // Group skills by level, available first then locked
+  const levels: SkillLevel[] = [1, 2, 3]
 
-  const skillsByTrack = computed(() => {
-    return tracks.map(track => ({
-      track,
-      meta: SKILL_TRACK_META[track],
+  const skillsByLevel = computed(() => {
+    return levels.map(level => ({
+      level,
+      meta: SKILL_LEVEL_META[level],
       skills: props.items
-        .filter(s => s.track === track)
+        .filter(s => s.level === level)
         .toSorted((a, b) => {
-          const levelDiff = a.level - b.level
-          if (levelDiff !== 0) return levelDiff
+          const aLocked = store.locked(a.id) ? 1 : 0
+          const bLocked = store.locked(b.id) ? 1 : 0
+          if (aLocked !== bLocked) return aLocked - bLocked
           return a.order - b.order
         }),
-    })).filter(t => t.skills.length > 0)
+    })).filter(g => g.skills.length > 0)
   })
 </script>
 
 <template>
-  <div v-if="skillsByTrack.length > 0" class="mt-8 flex flex-col gap-10">
-    <div v-for="{ track, meta, skills } in skillsByTrack" :key="track">
+  <div v-if="skillsByLevel.length > 0" class="mt-8 flex flex-col gap-10">
+    <div v-for="{ level, meta, skills } in skillsByLevel" :key="level">
       <h2 class="m-0 mb-1 text-xl">{{ meta.label }}</h2>
-      <p class="m-0 mb-4 text-sm text-on-surface-variant">{{ meta.description }}</p>
+      <p class="m-0 mb-4 text-sm text-on-surface-variant">{{ meta.title }}</p>
       <div class="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4">
         <SkillCard v-for="skill in skills" :key="skill.id" :skill="skill" />
       </div>
diff --git a/apps/docs/src/components/skillz/SkillPrerequisites.vue b/apps/docs/src/components/skillz/SkillPrerequisites.vue
index 899837671..d9b4c2432 100644
--- a/apps/docs/src/components/skillz/SkillPrerequisites.vue
+++ b/apps/docs/src/components/skillz/SkillPrerequisites.vue
@@ -12,7 +12,7 @@
 <template>
   <div v-if="prerequisites.length > 0" class="skill-prerequisites" :class="`skill-prerequisites--${variant}`">
     <span class="skill-prerequisites__label">
-      {{ variant === 'box' ? 'Prerequisites:' : 'Requires:' }}
+      {{ variant === 'box' ? 'Prerequisites: ' : 'Requires: ' }}
     </span>
     <template v-if="variant === 'box'">
       <RouterLink
diff --git a/apps/docs/src/pages/skillz.[id].vue b/apps/docs/src/pages/skillz.[id].vue
index 6059f8161..59e780aeb 100644
--- a/apps/docs/src/pages/skillz.[id].vue
+++ b/apps/docs/src/pages/skillz.[id].vue
@@ -25,7 +25,6 @@
 
   definePage({
     meta: {
-      layout: 'fullscreen',
       level: 1,
     },
   })
@@ -39,7 +38,10 @@
   const search = useSearch()
   const breakpoints = useBreakpoints()
   const router = useRouter()
-  const tour = computed(() => discovery.tours.get(params.value.id))
+  const tour = computed(() => {
+    return discovery.tours.get(params.value.id)
+      ?? store.items.find(s => s.id === params.value.id)
+  })
 
   const done = computed(() => store.steps(params.value.id))
   const progress = computed(() => store.get(params.value.id))
@@ -50,10 +52,10 @@
     return 'Resume'
   })
 
-  // Find next tour in the same track by order
+  // Find next skill in the same track by order
   const nextTour = computed(() => {
     if (!tour.value) return null
-    return discovery.tours.values()
+    return store.items
       .filter(t => t.track === tour.value!.track && t.order > tour.value!.order)
       .toSorted((a, b) => a.order - b.order)[0] ?? null
   })
@@ -71,6 +73,12 @@
     const currentTour = tour.value
     if (!currentTour) return
 
+    // Tutorials navigate directly to the editor
+    if (currentTour.mode === 'tutorial' && currentTour.tutorialRoute) {
+      await router.push(currentTour.tutorialRoute)
+      return
+    }
+
     await router.push(currentTour.startRoute)
 
     store.start(currentTour.id, {
diff --git a/apps/docs/src/skillz/tutorials/index.ts b/apps/docs/src/skillz/tutorials/index.ts
index 78d6be93e..8deccd72d 100644
--- a/apps/docs/src/skillz/tutorials/index.ts
+++ b/apps/docs/src/skillz/tutorials/index.ts
@@ -1,7 +1,22 @@
 // Types
+import type { SkillMeta } from '@/types/skill'
+
 export interface TutorialMeta {
   title: string
   description: string
+  level: 1 | 2 | 3
+  track: string
+  categories: string[]
+  order: number
+  minutes: number
+  prerequisites?: string[]
+  steps?: string[]
+}
+
+export interface StepOptions {
+  hideFiles?: boolean
+  hideTabs?: boolean
+  hideBreadcrumbs?: boolean
 }
 
 export interface TutorialStep {
@@ -21,12 +36,12 @@ const markdowns = import.meta.glob<string>('./**/step-*/README.md', { query: '?r
 const codeFiles = import.meta.glob<string>('./**/step-*/**/*.{vue,ts,js}', { query: '?raw', import: 'default' })
 
 function parseTutorialId (path: string): string {
-  // './getting-started/meta.json' → 'getting-started'
+  // './vue-basics/meta.json' → 'vue-basics'
   return path.split('/')[1]
 }
 
 function parseStepNumber (path: string): number {
-  // './getting-started/step-1/README.md' → 1
+  // './vue-basics/step-1/README.md' → 1
   const match = path.match(/step-(\d+)/)
   return match ? Number(match[1]) : 0
 }
@@ -54,7 +69,7 @@ function getTutorials (): Tutorial[] {
       if (!codePath.startsWith(`./${id}/`)) continue
       const stepNum = parseStepNumber(codePath)
       // Extract the file path relative to the step directory
-      // './getting-started/step-1/App.vue' → 'src/App.vue'
+      // './vue-basics/step-1/App.vue' → 'src/App.vue'
       const fileName = codePath.replace(new RegExp(String.raw`^\./${id}/step-${stepNum}/`), '')
       const replPath = `src/${fileName}`
 
@@ -75,6 +90,44 @@ function getTutorials (): Tutorial[] {
   return tutorials
 }
 
+export function parseStepOptions (raw: string): { body: string, options: StepOptions } {
+  const match = raw.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/)
+  if (!match) return { body: raw, options: {} }
+
+  const options: StepOptions = {}
+  for (const line of match[1].split('\n')) {
+    const [key, val] = line.split(':').map(s => s.trim())
+    if (key === 'hideFiles' || key === 'hideTabs' || key === 'hideBreadcrumbs') {
+      options[key] = val === 'true'
+    }
+  }
+  return { body: match[2], options }
+}
+
 export function getTutorial (id: string): Tutorial | undefined {
   return getTutorials().find(t => t.id === id)
 }
+
+export function getTutorialSkills (): SkillMeta[] {
+  return getTutorials().map(t => ({
+    mode: 'tutorial' as const,
+    id: t.id,
+    name: t.meta.title,
+    level: t.meta.level,
+    track: t.meta.track,
+    categories: t.meta.categories,
+    order: t.meta.order,
+    prerequisites: t.meta.prerequisites ?? [],
+    description: t.meta.description,
+    minutes: t.meta.minutes,
+    startRoute: `/skillz/${t.id}`,
+    tutorialRoute: `/skillz/tutorial/${t.id}`,
+    steps: t.steps.map((_, i) => ({
+      id: `step-${i + 1}`,
+      title: `Step ${i + 1}`,
+      task: '',
+      hint: '',
+      learn: t.meta.steps?.[i] ?? `Step ${i + 1}`,
+    })),
+  }))
+}
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/meta.json b/apps/docs/src/skillz/tutorials/vue-basics/meta.json
new file mode 100644
index 000000000..dad26307a
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-basics/meta.json
@@ -0,0 +1,18 @@
+{
+  "title": "Vue Basics",
+  "description": "Build a contact card while learning Vue 3 fundamentals — refs, events, computed, directives, and v-model",
+  "level": 1,
+  "track": "essentials",
+  "categories": [],
+  "order": 10,
+  "minutes": 15,
+  "steps": [
+    "Understand single-file components and templates",
+    "Make data dynamic with shallowRef",
+    "Handle click events and toggle state",
+    "Derive values with computed properties",
+    "Conditionally show and hide content",
+    "Render lists with v-for",
+    "Bind form inputs with v-model"
+  ]
+}
diff --git a/apps/docs/src/stores/skillz.ts b/apps/docs/src/stores/skillz.ts
index 3a8909576..da3ba00fe 100644
--- a/apps/docs/src/stores/skillz.ts
+++ b/apps/docs/src/stores/skillz.ts
@@ -11,6 +11,9 @@ import { computed, shallowRef } from 'vue'
 // Types
 import type { DiscoveryStepTicket } from '@/composables/useDiscovery'
 
+// Tutorials
+import { getTutorialSkills } from '@/skillz/tutorials'
+
 export type ProgressStatus = 'not-started' | 'in-progress' | 'completed'
 
 export interface TourProgress {
@@ -58,8 +61,8 @@ export const useSkillzStore = defineStore('skillz', () => {
   }
 
   function missing (id: string): string[] {
-    const tour = discovery.tours.get(id)
-    return tour?.prerequisites?.filter(p => !completed(p)) ?? []
+    const skill = discovery.tours.get(id) ?? tutorialSkills.find(s => s.id === id)
+    return skill?.prerequisites?.filter(p => !completed(p)) ?? []
   }
 
   function locked (id: string): boolean {
@@ -178,7 +181,8 @@ export const useSkillzStore = defineStore('skillz', () => {
     discovery.complete()
   }
 
-  const items = computed(() => discovery.tours.values())
+  const tutorialSkills = getTutorialSkills()
+  const items = computed(() => [...discovery.tours.values(), ...tutorialSkills])
   const done = computed(() => active.value ? steps(active.value) : [])
 
   // Find any tour that was started but not completed (and not currently active)
@@ -198,6 +202,7 @@ export const useSkillzStore = defineStore('skillz', () => {
     start,
     stop,
     complete,
+    finish,
     reset,
     dismiss,
 
diff --git a/apps/docs/src/types/skill.ts b/apps/docs/src/types/skill.ts
index 4c27b5cde..c00d26830 100644
--- a/apps/docs/src/types/skill.ts
+++ b/apps/docs/src/types/skill.ts
@@ -2,7 +2,7 @@
 export type SkillLevel = 1 | 2 | 3
 
 /** Skill interaction mode */
-export type SkillMode = 'guided' | 'interactive'
+export type SkillMode = 'guided' | 'interactive' | 'tutorial'
 
 /** Keys that advance to next step */
 export type SkillStepNext =
@@ -38,6 +38,8 @@ export interface SkillMeta {
   description: string
   minutes: number
   startRoute: string
+  /** Route to the tutorial editor (tutorials only) */
+  tutorialRoute?: string
   /** Route to navigate to after tour completion */
   completeRoute?: string
   steps: SkillStep[]
@@ -55,14 +57,15 @@ export type SkillCategory =
   // | 'library-building' // Build your own library (plugins, adapters, extending v0)
 
 export const SKILL_LEVEL_META: Record<SkillLevel, { label: string, icon: string, color: string, title: string }> = {
-  1: { label: 'Beginner', icon: 'level-beginner', color: 'var(--v0-success)', title: 'Beginner experience level' },
-  2: { label: 'Intermediate', icon: 'level-intermediate', color: 'var(--v0-info)', title: 'Intermediate experience level' },
-  3: { label: 'Advanced', icon: 'level-advanced', color: 'var(--v0-warning)', title: 'Advanced experience level' },
+  1: { label: 'Beginner', icon: 'level-beginner', color: 'var(--v0-success)', title: 'Start here — learn the docs, Vue fundamentals, and your first v0 components' },
+  2: { label: 'Intermediate', icon: 'level-intermediate', color: 'var(--v0-info)', title: 'Go deeper — watchers, lifecycle hooks, component composition, and real-world patterns' },
+  3: { label: 'Advanced', icon: 'level-advanced', color: 'var(--v0-warning)', title: 'Master the system — composables, generics, scoped slots, and library-grade abstractions' },
 }
 
 export const SKILL_MODE_META: Record<SkillMode, { label: string, icon: string, color: string, description: string }> = {
   guided: { label: 'Guided', icon: 'compass', color: 'var(--v0-primary)', description: 'A passive walkthrough. Just click next to continue.' },
   interactive: { label: 'Interactive', icon: 'keyboard', color: 'var(--v0-accent)', description: 'Hands-on practice. Complete tasks to progress.' },
+  tutorial: { label: 'Tutorial', icon: 'code', color: '#64748b', description: 'Learn by coding in a live editor with step-by-step instructions.' },
 }
 
 export const SKILL_TRACK_META: Record<SkillTrack, { label: string, description: string }> = {

From 510f12a50dcb2c4152af27ae17c1ac52a0b1ab77 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 17 Feb 2026 16:17:21 -0600
Subject: [PATCH 18/39] docs(editor): editor refactors, tutorial content, and
 skillz routing

- Consolidate tutorial route into skillz.tutorial.[id].vue
- Remove deprecated getting-started tutorial
- Add vue-basics, vue-intermediate, vue-advanced, and v0-basics tutorial content
- Improve editor file tree, tabs, and markdown panel
- Add SkillzBadge and SkillzComplete components
- Update typed-router and component declarations
---
 apps/docs/build/markdown.ts                   |   6 +-
 apps/docs/src/components.d.ts                 |   2 +
 .../src/components/docs/DocsDiscoveryStep.vue |  26 +-
 .../docs/src/components/docs/calloutConfig.ts |   7 +-
 .../src/components/editor/EditorExamples.vue  |   2 +-
 .../src/components/editor/EditorFileTree.vue  | 226 +++++++----
 .../components/editor/EditorMarkdownPanel.vue |  16 +-
 .../docs/src/components/editor/EditorTabs.vue |  47 ++-
 apps/docs/src/components/skillz/SkillCard.vue |   3 +-
 .../src/components/skillz/SkillCardDeck.vue   |   3 +-
 .../src/components/skillz/SkillzBadge.vue     |  33 ++
 .../src/components/skillz/SkillzComplete.vue  |  57 +++
 apps/docs/src/composables/editorLink.ts       |  12 +-
 apps/docs/src/composables/useEditorFiles.ts   |  13 +-
 apps/docs/src/composables/useEditorStore.ts   |  10 +-
 apps/docs/src/composables/useMarkdown.ts      |   4 +-
 apps/docs/src/composables/useTutorial.ts      |   6 +-
 apps/docs/src/pages/editor.vue                |  52 ++-
 ...rial.[id].vue => skillz.tutorial.[id].vue} | 251 +++++++-----
 .../tutorials/getting-started/meta.json       |   4 -
 .../tutorials/getting-started/step-1/App.vue  |  27 --
 .../getting-started/step-1/README.md          |  17 -
 .../tutorials/getting-started/step-2/App.vue  |  83 ----
 .../getting-started/step-2/README.md          |  25 --
 .../tutorials/getting-started/step-3/App.vue  | 101 -----
 .../getting-started/step-3/README.md          |  32 --
 .../src/skillz/tutorials/v0-basics/meta.json  |  10 +
 .../skillz/tutorials/v0-basics/step-1/App.vue |  60 +++
 .../tutorials/v0-basics/step-1/README.md      |  43 ++
 .../skillz/tutorials/v0-basics/step-2/App.vue |  80 ++++
 .../tutorials/v0-basics/step-2/README.md      |  47 +++
 .../skillz/tutorials/v0-basics/step-3/App.vue | 172 ++++++++
 .../tutorials/v0-basics/step-3/README.md      |  45 +++
 .../skillz/tutorials/v0-basics/step-4/App.vue | 244 ++++++++++++
 .../tutorials/v0-basics/step-4/README.md      |  50 +++
 .../skillz/tutorials/v0-basics/step-5/App.vue | 245 ++++++++++++
 .../tutorials/v0-basics/step-5/README.md      |  40 ++
 .../v0-basics/step-5/SettingsSection.vue      | 108 +++++
 .../skillz/tutorials/v0-basics/step-6/App.vue | 267 +++++++++++++
 .../v0-basics/step-6/ConfirmDialog.vue        |  50 +++
 .../tutorials/v0-basics/step-6/README.md      |  40 ++
 .../v0-basics/step-6/SettingsSection.vue      | 108 +++++
 .../skillz/tutorials/v0-basics/step-7/App.vue | 329 ++++++++++++++++
 .../v0-basics/step-7/ConfirmDialog.vue        |  52 +++
 .../tutorials/v0-basics/step-7/README.md      |  43 ++
 .../v0-basics/step-7/SettingsSection.vue      | 132 +++++++
 .../skillz/tutorials/v0-basics/step-8/App.vue | 370 ++++++++++++++++++
 .../v0-basics/step-8/ConfirmDialog.vue        |  52 +++
 .../tutorials/v0-basics/step-8/README.md      |  37 ++
 .../v0-basics/step-8/SettingsSection.vue      | 132 +++++++
 .../skillz/tutorials/vue-advanced/meta.json   |  10 +
 .../tutorials/vue-advanced/step-1/App.vue     |  79 ++++
 .../tutorials/vue-advanced/step-1/README.md   |  41 ++
 .../vue-advanced/step-1/useCounter.ts         |  20 +
 .../tutorials/vue-advanced/step-2/App.vue     |  77 ++++
 .../tutorials/vue-advanced/step-2/README.md   |  41 ++
 .../tutorials/vue-advanced/step-2/useList.ts  |  20 +
 .../tutorials/vue-advanced/step-3/App.vue     |  76 ++++
 .../tutorials/vue-advanced/step-3/README.md   |  42 ++
 .../vue-advanced/step-3/usePolling.ts         |  46 +++
 .../tutorials/vue-advanced/step-4/App.vue     |  54 +++
 .../tutorials/vue-advanced/step-4/README.md   |  29 ++
 .../vue-advanced/step-4/SelectableList.vue    |  31 ++
 .../tutorials/vue-advanced/step-5/App.vue     |  72 ++++
 .../tutorials/vue-advanced/step-5/README.md   |  46 +++
 .../vue-advanced/step-5/SearchInput.vue       |  30 ++
 .../vue-advanced/step-5/SelectableList.vue    |  24 ++
 .../tutorials/vue-advanced/step-6/App.vue     |  70 ++++
 .../tutorials/vue-advanced/step-6/README.md   |  42 ++
 .../vue-advanced/step-6/SelectableList.vue    |  27 ++
 .../tutorials/vue-advanced/step-7/App.vue     | 121 ++++++
 .../tutorials/vue-advanced/step-7/README.md   |  36 ++
 .../vue-advanced/step-7/SelectableList.vue    |  29 ++
 .../vue-advanced/step-7/useFilter.ts          |  26 ++
 .../tutorials/vue-advanced/step-7/useList.ts  |  20 +
 .../tutorials/vue-basics/step-1/App.vue       |  20 +
 .../tutorials/vue-basics/step-1/README.md     |  28 ++
 .../tutorials/vue-basics/step-2/App.vue       |  29 ++
 .../tutorials/vue-basics/step-2/README.md     |  38 ++
 .../tutorials/vue-basics/step-3/App.vue       |  42 ++
 .../tutorials/vue-basics/step-3/README.md     |  41 +-
 .../tutorials/vue-basics/step-4/App.vue       |  57 +++
 .../tutorials/vue-basics/step-4/README.md     |  41 ++
 .../tutorials/vue-basics/step-5/App.vue       |  79 ++++
 .../tutorials/vue-basics/step-5/README.md     |  32 +-
 .../tutorials/vue-basics/step-6/App.vue       | 115 ++++++
 .../tutorials/vue-basics/step-6/README.md     |  39 +-
 .../tutorials/vue-basics/step-7/App.vue       | 183 +++++++++
 .../tutorials/vue-basics/step-7/README.md     |  34 +-
 .../tutorials/vue-intermediate/meta.json      |  10 +
 .../tutorials/vue-intermediate/step-1/App.vue |  93 +++++
 .../vue-intermediate/step-1/README.md         |  54 +++
 .../tutorials/vue-intermediate/step-2/App.vue | 129 ++++++
 .../vue-intermediate/step-2/README.md         |  46 +++
 .../tutorials/vue-intermediate/step-3/App.vue |  80 ++++
 .../vue-intermediate/step-3/README.md         |  48 +++
 .../tutorials/vue-intermediate/step-4/App.vue | 100 +++++
 .../vue-intermediate/step-4/README.md         |  52 +++
 .../tutorials/vue-intermediate/step-5/App.vue |  89 +++++
 .../step-5/NotificationItem.vue               |  29 ++
 .../vue-intermediate/step-5/README.md         |  52 +++
 .../tutorials/vue-intermediate/step-6/App.vue | 111 ++++++
 .../step-6/NotificationItem.vue               |  54 +++
 .../vue-intermediate/step-6/README.md         |  47 +++
 .../tutorials/vue-intermediate/step-7/App.vue | 128 ++++++
 .../step-7/NotificationCard.vue               |  33 ++
 .../step-7/NotificationItem.vue               |  46 +++
 .../vue-intermediate/step-7/README.md         |  59 +++
 .../tutorials/vue-intermediate/step-8/App.vue | 147 +++++++
 .../step-8/NotificationCard.vue               |  47 +++
 .../step-8/NotificationItem.vue               |  57 +++
 .../vue-intermediate/step-8/README.md         |  51 +++
 apps/docs/src/typed-router.d.ts               |  26 +-
 113 files changed, 6690 insertions(+), 606 deletions(-)
 create mode 100644 apps/docs/src/components/skillz/SkillzBadge.vue
 create mode 100644 apps/docs/src/components/skillz/SkillzComplete.vue
 rename apps/docs/src/pages/{editor.tutorial.[id].vue => skillz.tutorial.[id].vue} (60%)
 delete mode 100644 apps/docs/src/skillz/tutorials/getting-started/meta.json
 delete mode 100644 apps/docs/src/skillz/tutorials/getting-started/step-1/App.vue
 delete mode 100644 apps/docs/src/skillz/tutorials/getting-started/step-1/README.md
 delete mode 100644 apps/docs/src/skillz/tutorials/getting-started/step-2/App.vue
 delete mode 100644 apps/docs/src/skillz/tutorials/getting-started/step-2/README.md
 delete mode 100644 apps/docs/src/skillz/tutorials/getting-started/step-3/App.vue
 delete mode 100644 apps/docs/src/skillz/tutorials/getting-started/step-3/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/meta.json
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-1/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-1/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-2/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-2/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-3/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-3/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-4/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-4/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-5/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-5/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-5/SettingsSection.vue
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-6/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-6/ConfirmDialog.vue
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-6/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-6/SettingsSection.vue
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-7/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-7/ConfirmDialog.vue
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-7/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-7/SettingsSection.vue
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-8/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-8/ConfirmDialog.vue
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-8/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/v0-basics/step-8/SettingsSection.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/meta.json
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-1/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-1/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-1/useCounter.ts
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-2/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-2/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-2/useList.ts
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-3/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-3/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-3/usePolling.ts
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-4/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-4/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-4/SelectableList.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-5/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-5/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-5/SearchInput.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-5/SelectableList.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-6/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-6/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-6/SelectableList.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-7/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-7/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-7/SelectableList.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-7/useFilter.ts
 create mode 100644 apps/docs/src/skillz/tutorials/vue-advanced/step-7/useList.ts
 create mode 100644 apps/docs/src/skillz/tutorials/vue-basics/step-1/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-basics/step-1/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-basics/step-2/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-basics/step-2/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-basics/step-3/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-basics/step-4/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-basics/step-4/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-basics/step-5/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-basics/step-6/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-basics/step-7/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/meta.json
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-1/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-1/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-2/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-2/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-3/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-3/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-4/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-4/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-5/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-5/NotificationItem.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-5/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-6/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-6/NotificationItem.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-6/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-7/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-7/NotificationCard.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-7/NotificationItem.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-7/README.md
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-8/App.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-8/NotificationCard.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-8/NotificationItem.vue
 create mode 100644 apps/docs/src/skillz/tutorials/vue-intermediate/step-8/README.md

diff --git a/apps/docs/build/markdown.ts b/apps/docs/build/markdown.ts
index 4418ecf2e..7fb521e6f 100644
--- a/apps/docs/build/markdown.ts
+++ b/apps/docs/build/markdown.ts
@@ -256,7 +256,7 @@ export default async function MarkdownPlugin () {
         // Look ahead: blockquote_open -> paragraph_open -> inline
         const inlineToken = tokens[index + 2]
         if (inlineToken?.type === 'inline' && inlineToken.content) {
-          const match = inlineToken.content.match(/^\[!(TIP|INFO|WARNING|ERROR|ASKAI|DISCORD|TOUR)\]\s*(.*)/)
+          const match = inlineToken.content.match(/^\[!(TIP|INFO|WARNING|ERROR|ASKAI|DISCORD|TOUR|TRY)\]\s*(.*)/)
           if (match) {
             const type = match[1].toLowerCase()
             env._calloutType = type
@@ -292,8 +292,8 @@ export default async function MarkdownPlugin () {
             if (inlineToken.children?.length) {
               const firstChild = inlineToken.children[0]
               if (firstChild?.type === 'text') {
-                // Only TIP|INFO|WARNING|ERROR reach here - ASKAI, DISCORD, TOUR return early with cleared content
-                firstChild.content = firstChild.content.replace(/^\[!(TIP|INFO|WARNING|ERROR)\]\s*/, '')
+                // Only TIP|INFO|WARNING|ERROR|TRY reach here - ASKAI, DISCORD, TOUR return early with cleared content
+                firstChild.content = firstChild.content.replace(/^\[!(TIP|INFO|WARNING|ERROR|TRY)\]\s*/, '')
               }
             }
 
diff --git a/apps/docs/src/components.d.ts b/apps/docs/src/components.d.ts
index 02b0292fa..6312b9cbf 100644
--- a/apps/docs/src/components.d.ts
+++ b/apps/docs/src/components.d.ts
@@ -147,6 +147,8 @@ declare module 'vue' {
     SkillMetadata: typeof import('./components/skillz/SkillMetadata.vue')['default']
     SkillModeBadge: typeof import('./components/skillz/SkillModeBadge.vue')['default']
     SkillPrerequisites: typeof import('./components/skillz/SkillPrerequisites.vue')['default']
+    SkillzBadge: typeof import('./components/skillz/SkillzBadge.vue')['default']
+    SkillzComplete: typeof import('./components/skillz/SkillzComplete.vue')['default']
     SkillzResume: typeof import('./components/skillz/SkillzResume.vue')['default']
     SkillzTour: typeof import('./components/skillz/SkillzTour.vue')['default']
   }
diff --git a/apps/docs/src/components/docs/DocsDiscoveryStep.vue b/apps/docs/src/components/docs/DocsDiscoveryStep.vue
index 80e7a2954..295a43c39 100644
--- a/apps/docs/src/components/docs/DocsDiscoveryStep.vue
+++ b/apps/docs/src/components/docs/DocsDiscoveryStep.vue
@@ -25,6 +25,7 @@
   // Components
   import AppBurst from '@/components/app/AppBurst.vue'
   import { Discovery } from '@/components/discovery'
+  import SkillzBadge from '@/components/skillz/SkillzBadge.vue'
 
   // Composables
   import { useDiscovery } from '@/composables/useDiscovery'
@@ -32,9 +33,6 @@
   // Utilities
   import { computed, onBeforeUnmount, useAttrs, useTemplateRef, watch } from 'vue'
 
-  // Types
-  import { SKILL_LEVEL_META } from '@/types/skill'
-
   defineOptions({ name: 'DocsDiscoveryStep', inheritAttrs: false })
 
   const props = defineProps<DocsDiscoveryStepProps>()
@@ -51,11 +49,7 @@
   const attrs = useAttrs()
   const discovery = useDiscovery()
 
-  const levelMeta = computed(() => {
-    // const tour = discovery.tours.selected.value
-    // if (!tour) return null
-    return SKILL_LEVEL_META[discovery.tours.selectedItem.value?.level || '']
-  })
+  const tourLevel = computed(() => discovery.tours.selectedItem.value?.level)
 
   const isLastStep = computed(() => {
     const index = discovery.steps.selectedIndex.value
@@ -96,14 +90,7 @@
     >
       <!-- Header -->
       <div v-if="!isLastStep" class="flex justify-between items-center mb-4">
-        <span
-          class="skillz-badge inline-flex items-center gap-1 text-xs font-bold uppercase tracking-wide px-2 py-1 rounded"
-          :style="levelMeta ? { '--level-color': levelMeta.color } : undefined"
-          :title="levelMeta ? `${levelMeta.label} level` : undefined"
-        >
-          SKILLZ
-          <AppIcon v-if="levelMeta" :icon="levelMeta.icon" :size="14" />
-        </span>
+        <SkillzBadge :level="tourLevel" />
 
         <Discovery.Progress class="text-xs text-on-surface-variant" />
       </div>
@@ -162,10 +149,3 @@
     </Discovery.Content>
   </Discovery.Root>
 </template>
-
-<style scoped>
-.skillz-badge {
-  background: color-mix(in srgb, var(--level-color, var(--v0-primary)) 15%, transparent);
-  color: var(--level-color, var(--v0-primary));
-}
-</style>
diff --git a/apps/docs/src/components/docs/calloutConfig.ts b/apps/docs/src/components/docs/calloutConfig.ts
index 2973a9907..9652613eb 100644
--- a/apps/docs/src/components/docs/calloutConfig.ts
+++ b/apps/docs/src/components/docs/calloutConfig.ts
@@ -9,7 +9,7 @@ export interface CalloutConfig {
   classes: string
 }
 
-export type CalloutType = 'tip' | 'info' | 'warning' | 'error' | 'askai' | 'discord' | 'tour'
+export type CalloutType = 'tip' | 'info' | 'warning' | 'error' | 'askai' | 'discord' | 'tour' | 'try'
 
 const CALLOUT_CONFIG: Record<CalloutType, CalloutConfig> = {
   tip: {
@@ -47,6 +47,11 @@ const CALLOUT_CONFIG: Record<CalloutType, CalloutConfig> = {
     title: 'Interactive Tour',
     classes: 'bg-tour-10 border-tour-50 text-tour cursor-pointer hover:bg-tour-20 transition-colors',
   },
+  try: {
+    icon: 'code',
+    title: 'Try it',
+    classes: 'bg-accent-10 border-accent-50 text-accent',
+  },
 }
 
 const DEFAULT_CALLOUT_CONFIG: CalloutConfig = {
diff --git a/apps/docs/src/components/editor/EditorExamples.vue b/apps/docs/src/components/editor/EditorExamples.vue
index 0329d2382..60f7d1780 100644
--- a/apps/docs/src/components/editor/EditorExamples.vue
+++ b/apps/docs/src/components/editor/EditorExamples.vue
@@ -106,7 +106,7 @@
     // Use the last directory segment as the nested folder name
     // e.g. 'components/dialog' → 'dialog'
     const parts = dir.dir.split('/')
-    const folder = parts.at(-1)
+    const folder = parts.at(-1) ?? dir.dir
 
     for (const file of loaded) {
       result[`src/${folder}/${file.filename}`] = file.code
diff --git a/apps/docs/src/components/editor/EditorFileTree.vue b/apps/docs/src/components/editor/EditorFileTree.vue
index 075ad2fbe..86c7914a5 100644
--- a/apps/docs/src/components/editor/EditorFileTree.vue
+++ b/apps/docs/src/components/editor/EditorFileTree.vue
@@ -6,7 +6,7 @@
   import { useFileTreeCrud } from '@/composables/useFileTreeCrud'
 
   // Utilities
-  import { computed } from 'vue'
+  import { computed, nextTick, useTemplateRef } from 'vue'
 
   // Types
   import type { ReplStore } from '@vue/repl'
@@ -98,8 +98,8 @@
 
   // Auto-open all nested folders under src
   for (const id of tree.keys()) {
-    const s = id as string
-    if (s.startsWith('src/') && !/\.\w+$/.test(s)) {
+    if (typeof id !== 'string') continue
+    if (id.startsWith('src/') && !/\.\w+$/.test(id)) {
       tree.open(id)
     }
   }
@@ -118,10 +118,10 @@
       ? tree.children.get(parentId) ?? []
       : tree.roots.value.map(r => r.id)
 
-    return (ids as string[]).flatMap(id => {
-      const result = [id]
-      if (!isFile(id) && tree.opened(id)) {
-        result.push(...getVisibleNodes(id))
+    return (ids as readonly (string | number)[]).flatMap(id => {
+      const result = [String(id)]
+      if (!isFile(String(id)) && tree.opened(id)) {
+        result.push(...getVisibleNodes(String(id)))
       }
       return result
     })
@@ -129,6 +129,7 @@
 
   const visibleNodes = computed(() => {
     void proxy.keys.length
+    void tree.openedIds.size
     return getVisibleNodes()
   })
 
@@ -152,24 +153,93 @@
     return nodes[lastIdx]
   })
 
-  function onClick (id: string) {
+  const treeEl = useTemplateRef<HTMLElement>('treeEl')
+
+  function activate (id: string) {
     if (isFile(id)) {
       props.store.setActive(id)
-      targetFolder.value = (tree.parents.get(id) as string) ?? 'src'
+      const parent = tree.parents.get(id)
+      targetFolder.value = (typeof parent === 'string' ? parent : null) ?? 'src'
     } else {
       tree.flip(id)
       targetFolder.value = id
     }
   }
+
+  function focusNode (id: string) {
+    nextTick(() => {
+      const el = treeEl.value?.querySelector(`[data-id="${CSS.escape(id)}"]`) as HTMLElement | null
+      el?.focus()
+    })
+  }
+
+  function onKeydown (e: KeyboardEvent, id: string) {
+    const nodes = visibleNodes.value
+    const idx = nodes.indexOf(id)
+
+    switch (e.key) {
+      case 'ArrowDown': {
+        e.preventDefault()
+        const next = nodes[idx + 1]
+        if (next) focusNode(next)
+        break
+      }
+      case 'ArrowUp': {
+        e.preventDefault()
+        const prev = nodes[idx - 1]
+        if (prev) focusNode(prev)
+        break
+      }
+      case 'ArrowRight': {
+        e.preventDefault()
+        if (!isFile(id)) {
+          if (tree.opened(id)) {
+            const first = nodes[idx + 1]
+            if (first && tree.hasAncestor(first, id)) focusNode(first)
+          } else {
+            tree.open(id)
+          }
+        }
+        break
+      }
+      case 'ArrowLeft': {
+        e.preventDefault()
+        if (!isFile(id) && tree.opened(id)) {
+          tree.close(id)
+        } else {
+          const parent = tree.parents.get(id)
+          if (typeof parent === 'string' && parent !== 'src') focusNode(parent)
+        }
+        break
+      }
+      case 'Enter':
+      case ' ': {
+        e.preventDefault()
+        activate(id)
+        break
+      }
+      case 'Home': {
+        e.preventDefault()
+        if (nodes.length > 0) focusNode(nodes[0])
+        break
+      }
+      case 'End': {
+        e.preventDefault()
+        if (nodes.length > 0) focusNode(nodes.at(-1))
+        break
+      }
+    }
+  }
 </script>
 
 <template>
-  <nav class="border-r border-divider bg-surface overflow-y-auto shrink-0">
+  <nav ref="treeEl" aria-label="File browser" class="border-r border-divider bg-surface overflow-y-auto shrink-0">
     <div class="flex items-center justify-between px-3 py-2">
       <span class="text-xs font-semibold text-on-surface-variant uppercase tracking-wide">Files</span>
 
       <div class="flex items-center gap-1">
         <button
+          aria-label="New file"
           class="opacity-50 hover:opacity-100 transition-opacity"
           title="New file"
           @click="add('file')"
@@ -178,6 +248,7 @@
         </button>
 
         <button
+          aria-label="New folder"
           class="opacity-50 hover:opacity-100 transition-opacity"
           title="New folder"
           @click="add('folder')"
@@ -187,71 +258,80 @@
       </div>
     </div>
 
-    <template
-      v-for="id in visibleNodes"
-      :key="id"
-    >
-      <div
-        class="group/row flex items-center gap-1.5 py-1 pr-2 text-sm cursor-pointer select-none hover:bg-surface-tint transition-colors"
-        :class="isFile(id) && id === activeFile ? 'opacity-100 bg-surface-tint' : 'opacity-80'"
-        :style="{ paddingLeft: `${tree.getDepth(id) * 8 + 8}px` }"
-        @click="onClick(id)"
+    <div aria-label="Project files" role="tree">
+      <template
+        v-for="(id, index) in visibleNodes"
+        :key="id"
       >
-        <template v-if="!isFile(id)">
-          <AppIcon
-            class="transition-transform duration-150"
-            :class="{ 'rotate-90': tree.opened(id) }"
-            icon="chevron-right"
-            :size="14"
-          />
-          <AppIcon
-            :icon="tree.opened(id) ? 'folder-open' : 'folder'"
-            :size="14"
-          />
-        </template>
-        <template v-else>
-          <span class="w-[14px]" />
-          <AppIcon
-            v-if="fileExt(id)"
-            :icon="fileExt(id)!.icon"
-            :size="14"
-            :style="{ color: fileExt(id)!.color }"
-          />
-          <span v-else class="w-[14px]" />
-        </template>
-
-        <span class="flex-1 truncate" :class="isFile(id) ? 'opacity-80' : 'font-medium opacity-60'">
-          {{ tree.get(id)?.value }}
-        </span>
-
-        <!-- Delete item -->
-        <button
-          v-if="deletable(id)"
-          class="shrink-0 inline-flex items-center justify-center opacity-0 group-hover/row:opacity-60 hover:!opacity-100 transition-opacity"
-          title="Delete"
-          @click.stop="remove(id)"
+        <div
+          :aria-expanded="!isFile(id) ? tree.opened(id) : undefined"
+          :aria-selected="isFile(id) && id === activeFile ? true : undefined"
+          class="group/row flex items-center gap-1.5 py-1 pr-2 text-sm cursor-pointer select-none hover:bg-surface-tint transition-colors"
+          :class="isFile(id) && id === activeFile ? 'opacity-100 bg-surface-tint' : 'opacity-80'"
+          :data-id="id"
+          role="treeitem"
+          :style="{ paddingLeft: `${tree.getDepth(id) * 8 + 8}px` }"
+          :tabindex="index === 0 ? 0 : -1"
+          @click="activate(id)"
+          @keydown="onKeydown($event, id)"
         >
-          <AppIcon icon="close" :size="14" />
-        </button>
-      </div>
-
-      <!-- Inline input at bottom of folder children -->
-      <div
-        v-if="inputAfter === id"
-        class="flex items-center gap-1.5 py-1 pr-2"
-        :style="{ paddingLeft: `${(tree.getDepth(creating!) + 1) * 8 + 8}px` }"
-      >
-        <span class="w-[14px]" />
-        <input
-          :ref="el => input = el as HTMLInputElement"
-          v-model="pending"
-          class="flex-1 min-w-0 bg-transparent text-sm text-on-surface outline-none border-b border-primary"
-          :placeholder="creatingType === 'file' ? 'filename.vue' : 'folder-name'"
-          @blur="confirm"
-          @keydown.enter="confirm"
-          @keydown.esc="cancel"
+          <template v-if="!isFile(id)">
+            <AppIcon
+              class="transition-transform duration-150"
+              :class="{ 'rotate-90': tree.opened(id) }"
+              icon="chevron-right"
+              :size="14"
+            />
+            <AppIcon
+              :icon="tree.opened(id) ? 'folder-open' : 'folder'"
+              :size="14"
+            />
+          </template>
+          <template v-else>
+            <span class="w-[14px]" />
+            <AppIcon
+              v-if="fileExt(id)"
+              :icon="fileExt(id)!.icon"
+              :size="14"
+              :style="{ color: fileExt(id)!.color }"
+            />
+            <span v-else class="w-[14px]" />
+          </template>
+
+          <span class="flex-1 truncate" :class="isFile(id) ? 'opacity-80' : 'font-medium opacity-60'">
+            {{ tree.get(id)?.value }}
+          </span>
+
+          <!-- Delete item -->
+          <button
+            v-if="deletable(id)"
+            :aria-label="`Delete ${tree.get(id)?.value}`"
+            class="shrink-0 inline-flex items-center justify-center opacity-0 group-hover/row:opacity-60 hover:!opacity-100 transition-opacity"
+            title="Delete"
+            @click.stop="remove(id)"
+          >
+            <AppIcon icon="close" :size="14" />
+          </button>
+        </div>
+
+        <!-- Inline input at bottom of folder children -->
+        <div
+          v-if="inputAfter === id"
+          class="flex items-center gap-1.5 py-1 pr-2"
+          :style="{ paddingLeft: `${(tree.getDepth(creating!) + 1) * 8 + 8}px` }"
         >
-      </div>
-    </template>
+          <span class="w-[14px]" />
+          <input
+            :ref="el => input = el as HTMLInputElement"
+            v-model="pending"
+            class="flex-1 min-w-0 bg-transparent text-sm text-on-surface outline-none border-b border-primary"
+            :placeholder="creatingType === 'file' ? 'filename.vue' : 'folder-name'"
+            @blur="confirm"
+            @keydown.enter="confirm"
+            @keydown.esc="cancel"
+          >
+        </div>
+      </template>
+    </div>
   </nav>
 </template>
diff --git a/apps/docs/src/components/editor/EditorMarkdownPanel.vue b/apps/docs/src/components/editor/EditorMarkdownPanel.vue
index 990aeda44..4a110816b 100644
--- a/apps/docs/src/components/editor/EditorMarkdownPanel.vue
+++ b/apps/docs/src/components/editor/EditorMarkdownPanel.vue
@@ -5,16 +5,21 @@
   // Components
   import DocsCallout from '@/components/docs/DocsCallout.vue'
   import DocsMarkup from '@/components/docs/DocsMarkup.vue'
+  import SkillzBadge from '@/components/skillz/SkillzBadge.vue'
 
   // Utilities
   import { decodeBase64 } from '@/utilities/decodeBase64'
   import { computed, getCurrentInstance, h, nextTick, onBeforeUnmount, render, useTemplateRef, watch } from 'vue'
 
+  // Types
+  import type { SkillLevel } from '@/types/skill'
+
   const props = defineProps<{
     html: string
     stepLabel: string
     isFirst: boolean
     isLast: boolean
+    level?: SkillLevel
   }>()
 
   const emit = defineEmits<{
@@ -27,11 +32,13 @@
 
   // ── Dynamic component mounting ───────────────────────────────────────
   const contentRef = useTemplateRef<HTMLElement>('content')
+  const scrollRef = useTemplateRef<HTMLElement>('scroll')
   const appContext = getCurrentInstance()?.appContext
   const mountedWrappers = new Set<HTMLElement>()
 
   watch(() => props.html, async () => {
     await nextTick()
+    scrollRef.value?.scrollTo(0, 0)
     mountMarkupComponents()
     mountAlertComponents()
   })
@@ -71,7 +78,7 @@
     if (!contentRef.value) return
 
     for (const el of contentRef.value.querySelectorAll<HTMLElement>('[data-alert]')) {
-      const type = el.dataset.type as 'tip' | 'info' | 'warning' | 'error'
+      const type = el.dataset.type as 'tip' | 'info' | 'warning' | 'error' | 'try'
       const encodedContent = el.dataset.content
       if (!type || !encodedContent) continue
 
@@ -93,12 +100,12 @@
   <div class="flex flex-col h-full overflow-hidden">
     <!-- Header -->
     <div class="flex items-center justify-between px-4 py-2 border-b border-divider bg-surface shrink-0">
-      <span class="text-xs font-semibold text-on-surface-variant uppercase tracking-wide">Tutorial</span>
+      <SkillzBadge :level="props.level" />
       <span class="text-xs text-on-surface-variant">{{ props.stepLabel }}</span>
     </div>
 
     <!-- Markdown content -->
-    <div class="flex-1 overflow-y-auto px-5 py-4">
+    <div ref="scroll" class="flex-1 overflow-y-auto px-5 py-4">
       <div ref="content" class="markdown-body tutorial-markdown" :data-theme="dataTheme" v-html="props.html" />
     </div>
 
@@ -116,8 +123,7 @@
       </button>
 
       <button
-        class="px-3 py-1.5 text-sm rounded bg-primary text-on-primary disabled:opacity-40 transition-colors"
-        :disabled="props.isLast"
+        class="px-3 py-1.5 text-sm rounded bg-primary text-on-primary transition-colors"
         @click="emit('next')"
       >
         <span class="flex items-center gap-1">
diff --git a/apps/docs/src/components/editor/EditorTabs.vue b/apps/docs/src/components/editor/EditorTabs.vue
index f11064aad..bf2e32a8e 100644
--- a/apps/docs/src/components/editor/EditorTabs.vue
+++ b/apps/docs/src/components/editor/EditorTabs.vue
@@ -66,7 +66,7 @@
   function closeTab (id: string) {
     // Find next tab before modifying state
     const idx = tabs.value.findIndex(t => t.id === id)
-    const nextTab = tabs.value[idx + 1] ?? tabs.value[idx - 1]
+    const nextTab = tabs.value[idx + 1] ?? tabs.value[idx - 1] ?? tabs.value[0]
 
     const next = new Set(closedTabs.value)
     next.add(id)
@@ -77,13 +77,48 @@
       props.store.setActive(nextTab.id)
     }
   }
+
+  function onTabKeydown (e: KeyboardEvent, index: number) {
+    const list = tabs.value
+    let target: number | null = null
+
+    switch (e.key) {
+      case 'ArrowRight': {
+        target = (index + 1) % list.length
+        break
+      }
+      case 'ArrowLeft': {
+        target = (index - 1 + list.length) % list.length
+        break
+      }
+      case 'Home': {
+        target = 0
+        break
+      }
+      case 'End': {
+        target = list.length - 1
+        break
+      }
+      default: {
+        return
+      }
+    }
+
+    e.preventDefault()
+    props.store.setActive(list[target].id)
+  }
 </script>
 
 <template>
-  <div class="flex items-end gap-px overflow-x-auto border-b border-divider bg-surface-variant/30">
+  <div
+    aria-label="Open files"
+    class="flex items-end gap-px overflow-x-auto border-b border-divider bg-surface-variant/30"
+    role="tablist"
+  >
     <div
-      v-for="tab in tabs"
+      v-for="(tab, index) in tabs"
       :key="tab.id"
+      :aria-selected="tab.id === activeFile"
       class="group/tab shrink-0 flex items-center gap-1 pl-3 py-1.5 text-xs transition-colors border-b-2 cursor-pointer"
       :class="[
         tab.id === activeFile
@@ -91,14 +126,18 @@
           : 'text-on-surface-variant border-transparent hover:text-on-surface hover:bg-surface-tint',
         tabs.length > 1 ? 'pr-1' : 'pr-3',
       ]"
+      role="tab"
+      :tabindex="tab.id === activeFile ? 0 : -1"
       @click="store.setActive(tab.id)"
+      @keydown="onTabKeydown($event, index)"
     >
       <span>{{ tab.label }}</span>
 
       <button
         v-if="tabs.length > 1"
-        aria-label="Close tab"
+        :aria-label="`Close ${tab.label}`"
         class="inline-flex items-center justify-center size-4 rounded-sm opacity-0 group-hover/tab:opacity-60 hover:!opacity-100 hover:bg-surface-variant focus-visible:opacity-100 focus-visible:outline-1 focus-visible:outline-primary transition-opacity"
+        tabindex="-1"
         @click.stop="closeTab(tab.id)"
       >
         <AppIcon icon="close" :size="12" />
diff --git a/apps/docs/src/components/skillz/SkillCard.vue b/apps/docs/src/components/skillz/SkillCard.vue
index 270b86b9f..a78d7b121 100644
--- a/apps/docs/src/components/skillz/SkillCard.vue
+++ b/apps/docs/src/components/skillz/SkillCard.vue
@@ -9,10 +9,9 @@
   // Types
   import type { SkillMeta } from '@/types/skill'
 
-  import { SKILL_TRACK_META } from '@/types/skill'
-
   // Stores
   import { useSkillzStore } from '@/stores/skillz'
+  import { SKILL_TRACK_META } from '@/types/skill'
 
   const props = defineProps<{
     skill: SkillMeta
diff --git a/apps/docs/src/components/skillz/SkillCardDeck.vue b/apps/docs/src/components/skillz/SkillCardDeck.vue
index 987c319e9..3babb6249 100644
--- a/apps/docs/src/components/skillz/SkillCardDeck.vue
+++ b/apps/docs/src/components/skillz/SkillCardDeck.vue
@@ -8,10 +8,9 @@
   // Types
   import type { SkillLevel, SkillMeta } from '@/types/skill'
 
-  import { SKILL_LEVEL_META } from '@/types/skill'
-
   // Stores
   import { useSkillzStore } from '@/stores/skillz'
+  import { SKILL_LEVEL_META } from '@/types/skill'
 
   const props = defineProps<{
     items: SkillMeta[]
diff --git a/apps/docs/src/components/skillz/SkillzBadge.vue b/apps/docs/src/components/skillz/SkillzBadge.vue
new file mode 100644
index 000000000..f767bb90d
--- /dev/null
+++ b/apps/docs/src/components/skillz/SkillzBadge.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+  // Utilities
+  import { computed } from 'vue'
+
+  // Types
+  import type { SkillLevel } from '@/types/skill'
+
+  import { SKILL_LEVEL_META } from '@/types/skill'
+
+  const props = defineProps<{
+    level?: SkillLevel
+  }>()
+
+  const levelMeta = computed(() => props.level ? SKILL_LEVEL_META[props.level] : undefined)
+</script>
+
+<template>
+  <span
+    class="skillz-badge inline-flex items-center gap-1 text-xs font-bold uppercase tracking-wide px-2 py-1 rounded"
+    :style="levelMeta ? { '--level-color': levelMeta.color } : undefined"
+    :title="levelMeta ? `${levelMeta.label} level` : undefined"
+  >
+    SKILLZ
+    <AppIcon v-if="levelMeta" :icon="levelMeta.icon" :size="14" />
+  </span>
+</template>
+
+<style scoped>
+.skillz-badge {
+  background: color-mix(in srgb, var(--level-color, var(--v0-primary)) 15%, transparent);
+  color: var(--level-color, var(--v0-primary));
+}
+</style>
diff --git a/apps/docs/src/components/skillz/SkillzComplete.vue b/apps/docs/src/components/skillz/SkillzComplete.vue
new file mode 100644
index 000000000..9de0b21b4
--- /dev/null
+++ b/apps/docs/src/components/skillz/SkillzComplete.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+  // Components
+  import AppBurst from '@/components/app/AppBurst.vue'
+
+  // Utilities
+  import { onMounted, useTemplateRef } from 'vue'
+
+  defineProps<{
+    title: string
+    description: string
+  }>()
+
+  const emit = defineEmits<{
+    back: []
+    complete: []
+  }>()
+
+  const burstRef = useTemplateRef<InstanceType<typeof AppBurst>>('burst')
+
+  onMounted(() => {
+    setTimeout(() => burstRef.value?.trigger(), 300)
+  })
+</script>
+
+<template>
+  <div class="p-4 bg-surface border border-divider rounded-xl shadow-xl max-w-xs">
+    <div class="flex justify-center mb-2">
+      <AppBurst ref="burst" disabled emoji="🎉" :size="64" />
+    </div>
+
+    <h2 class="text-lg font-semibold text-on-surface mb-1 text-center">
+      {{ title }}
+    </h2>
+
+    <p class="text-sm text-on-surface-variant text-center mb-8">
+      {{ description }}
+    </p>
+
+    <div class="flex gap-2">
+      <div class="ml-auto flex gap-2">
+        <button
+          class="px-3 py-1.5 text-sm text-on-surface-variant hover:text-on-surface"
+          @click="emit('back')"
+        >
+          Back
+        </button>
+
+        <button
+          class="px-3 py-1.5 text-sm rounded-lg bg-primary text-on-primary hover:bg-primary/90 transition-colors"
+          @click="emit('complete')"
+        >
+          Complete
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/composables/editorLink.ts b/apps/docs/src/composables/editorLink.ts
index 6dab1c369..4fedbaa4e 100644
--- a/apps/docs/src/composables/editorLink.ts
+++ b/apps/docs/src/composables/editorLink.ts
@@ -111,12 +111,22 @@ export async function useEditorLinkMulti (inputFiles: EditorFile[], dir?: string
   return `/editor#${hash}`
 }
 
+function isFileRecord (v: unknown): v is Record<string, string> {
+  return (
+    typeof v === 'object'
+    && v !== null
+    && !Array.isArray(v)
+    && Object.values(v as Record<string, unknown>).every(x => typeof x === 'string')
+  )
+}
+
 /**
  * Decode an editor hash back to a file record.
  */
 export async function decodeEditorHash (hash: string): Promise<Record<string, string> | null> {
   try {
-    return JSON.parse(await atou(hash))
+    const parsed: unknown = JSON.parse(await atou(hash))
+    return isFileRecord(parsed) ? parsed : null
   } catch {
     return null
   }
diff --git a/apps/docs/src/composables/useEditorFiles.ts b/apps/docs/src/composables/useEditorFiles.ts
index 719eb8b5f..56726f51b 100644
--- a/apps/docs/src/composables/useEditorFiles.ts
+++ b/apps/docs/src/composables/useEditorFiles.ts
@@ -2,7 +2,7 @@
 import { decodeEditorHash } from '@/composables/editorLink'
 
 // Utilities
-import { onMounted, shallowRef, watchEffect } from 'vue'
+import { onMounted, shallowRef, watch } from 'vue'
 
 // Types
 import type { ReplStore } from '@vue/repl'
@@ -85,12 +85,11 @@ export function useEditorFiles (store: ReplStore, isDark: () => boolean) {
   }
 
   // Sync edits from nested files to their flat aliases
-  watchEffect(() => {
-    const file = store.activeFile
-    if (!file) return
-    const flatPath = aliasMap.value.get(file.filename)
-    if (flatPath && store.files[flatPath]) {
-      store.files[flatPath]!.code = file.code
+  watch(() => store.activeFile?.code, code => {
+    if (code === undefined) return
+    const flatPath = aliasMap.value.get(store.activeFile.filename)
+    if (flatPath && store.files[flatPath] && store.files[flatPath].code !== code) {
+      store.files[flatPath].code = code
     }
   })
 
diff --git a/apps/docs/src/composables/useEditorStore.ts b/apps/docs/src/composables/useEditorStore.ts
index fc149fb2c..88bb6d5ab 100644
--- a/apps/docs/src/composables/useEditorStore.ts
+++ b/apps/docs/src/composables/useEditorStore.ts
@@ -4,16 +4,15 @@ import { computed, shallowRef } from 'vue'
 
 // Types
 import type { ReplStore } from '@vue/repl'
-import type { ComputedRef } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 
 export interface EditorStoreReturn {
   store: ReplStore
-  isDark: ComputedRef<boolean>
   replTheme: ComputedRef<'dark' | 'light'>
   previewOptions: ComputedRef<{ headHTML: string }>
 }
 
-export function useEditorStore (isDark: ComputedRef<boolean>): EditorStoreReturn {
+export function useEditorStore (isDark: Readonly<Ref<boolean>>): EditorStoreReturn {
   const replTheme = computed(() => isDark.value ? 'dark' : 'light')
 
   const { importMap: builtinImportMap, vueVersion } = useVueImportMap({
@@ -49,8 +48,8 @@ export function useEditorStore (isDark: ComputedRef<boolean>): EditorStoreReturn
     @property --un-border-style { syntax: "*"; inherits: false; initial-value: solid }
     *, ::before, ::after, ::backdrop { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid }
     html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; -webkit-tap-highlight-color: transparent }
-    body { margin: 0; background-color: ${isDark.value ? '#121212' : '#ffffff'} }
-    #app { min-height: 100vh; opacity: 0; transition: opacity 0.15s }
+    body { margin: 0; background-color: var(--v0-background, ${isDark.value ? '#121212' : '#ffffff'}) }
+    #app { min-height: 100vh; opacity: 0 }
     button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer }
     *:focus-visible { outline: 2px solid var(--v0-primary); outline-offset: 2px }
     dialog::backdrop { background: rgb(0 0 0 / 0.3) }
@@ -60,7 +59,6 @@ export function useEditorStore (isDark: ComputedRef<boolean>): EditorStoreReturn
 
   return {
     store,
-    isDark,
     replTheme,
     previewOptions,
   }
diff --git a/apps/docs/src/composables/useMarkdown.ts b/apps/docs/src/composables/useMarkdown.ts
index 42c377219..6aed402c6 100644
--- a/apps/docs/src/composables/useMarkdown.ts
+++ b/apps/docs/src/composables/useMarkdown.ts
@@ -55,14 +55,14 @@ function getMarked (hl: Highlighter): Marked {
         return `<div class="overflow-x-auto mb-4"><table>${thead}${tbody}</table></div>`
       },
       blockquote ({ raw }) {
-        // GitHub-style callouts: > [!TIP], > [!INFO], > [!WARNING], > [!ERROR]
+        // GitHub-style callouts: > [!TIP], > [!INFO], > [!WARNING], > [!ERROR], > [!TRY]
         const innerContent = raw
           .split('\n')
           .map(line => line.replace(/^>\s?/, ''))
           .join('\n')
           .trim()
 
-        const match = innerContent.match(/^\[!(TIP|INFO|WARNING|ERROR)\]\s*([\s\S]*)/)
+        const match = innerContent.match(/^\[!(TIP|INFO|WARNING|ERROR|TRY)\]\s*([\s\S]*)/)
         if (match) {
           const type = match[1].toLowerCase()
           const content = match[2].trim()
diff --git a/apps/docs/src/composables/useTutorial.ts b/apps/docs/src/composables/useTutorial.ts
index e1f72fc75..41fbb35f3 100644
--- a/apps/docs/src/composables/useTutorial.ts
+++ b/apps/docs/src/composables/useTutorial.ts
@@ -12,7 +12,7 @@ import { computed, onMounted, shallowRef, watch } from 'vue'
 // Types
 import type { StepOptions, TutorialMeta } from '@/skillz/tutorials'
 import type { ReplStore } from '@vue/repl'
-import type { ComputedRef, ShallowRef } from 'vue'
+import type { ComputedRef, Ref, ShallowRef } from 'vue'
 
 import { createMainTs, UNO_CONFIG_TS } from '@/data/editor-defaults'
 // Tutorials
@@ -20,7 +20,7 @@ import { getTutorial, parseStepOptions } from '@/skillz/tutorials'
 
 export interface UseTutorialReturn {
   store: ReplStore
-  isDark: ComputedRef<boolean>
+  isDark: Readonly<Ref<boolean>>
   replTheme: ComputedRef<'dark' | 'light'>
   previewOptions: ComputedRef<{ headHTML: string }>
   meta: ComputedRef<TutorialMeta | undefined>
@@ -40,7 +40,7 @@ export interface UseTutorialReturn {
 
 export function useTutorial (tutorialId: ComputedRef<string>): UseTutorialReturn {
   const theme = useTheme()
-  const isDark = computed(() => theme.isDark.value)
+  const isDark = theme.isDark
 
   const { store, replTheme, previewOptions } = useEditorStore(isDark)
 
diff --git a/apps/docs/src/pages/editor.vue b/apps/docs/src/pages/editor.vue
index ec09932a7..3ce39bc82 100644
--- a/apps/docs/src/pages/editor.vue
+++ b/apps/docs/src/pages/editor.vue
@@ -19,7 +19,7 @@
   import { Repl } from '@vue/repl'
   import Monaco from '@vue/repl/monaco-editor'
   import '@vue/repl/style.css'
-  import { computed, shallowRef, useTemplateRef, watch } from 'vue'
+  import { shallowRef, useTemplateRef, watch } from 'vue'
 
   definePage({
     meta: {
@@ -37,7 +37,7 @@
 
   // ── Theme ──────────────────────────────────────────────────────────────
   const theme = useTheme()
-  const isDark = computed(() => theme.isDark.value)
+  const isDark = theme.isDark
 
   // ── REPL Setup ─────────────────────────────────────────────────────────
   const { store, replTheme, previewOptions } = useEditorStore(isDark)
@@ -46,7 +46,7 @@
   const { isReady, fileTreeKey, loadExample: _loadExample } = useEditorFiles(store, () => isDark.value)
 
   const breakpoints = useBreakpoints()
-  const isDesktop = computed(() => breakpoints.mdAndUp.value)
+  const isDesktop = breakpoints.mdAndUp
   const sidebarOpen = shallowRef(true)
   watch(isDesktop, v => {
     sidebarOpen.value = v
@@ -68,13 +68,16 @@
   }, { inputs: true })
   const showExamples = shallowRef(false)
   const examplesContainer = useTemplateRef<HTMLElement>('examplesContainer')
+  const examplesButton = useTemplateRef<HTMLButtonElement>('examplesButton')
 
   useToggleScope(() => showExamples.value, () => {
     useClickOutside(examplesContainer, () => {
       showExamples.value = false
+      examplesButton.value?.focus()
     })
     useHotkey('escape', () => {
       showExamples.value = false
+      examplesButton.value?.focus()
     })
   })
 
@@ -136,13 +139,16 @@
           aria-label="Tutorial"
           class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors no-underline text-on-surface"
           title="Tutorial"
-          to="/editor/tutorial/getting-started"
+          to="/skillz/tutorial/vue-basics"
         >
           <AppIcon icon="book" :size="18" />
         </RouterLink>
 
         <div ref="examplesContainer" class="relative">
           <button
+            ref="examplesButton"
+            :aria-expanded="showExamples"
+            aria-haspopup="listbox"
             aria-label="Load example"
             class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
             title="Load example"
@@ -153,7 +159,9 @@
 
           <div
             v-if="showExamples"
+            aria-label="Examples"
             class="absolute top-full right-0 mt-1 w-[280px] bg-surface border border-divider rounded-lg shadow-lg z-50"
+            role="listbox"
           >
             <EditorExamples @select="loadExample" />
           </div>
@@ -161,7 +169,7 @@
 
         <button
           v-if="isDesktop"
-          aria-label="Toggle layout"
+          :aria-label="replLayout === 'horizontal' ? 'Switch to vertical layout' : 'Switch to horizontal layout'"
           class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
           :title="replLayout === 'horizontal' ? 'Switch to vertical layout' : 'Switch to horizontal layout'"
           @click="replLayout = replLayout === 'horizontal' ? 'vertical' : 'horizontal'"
@@ -171,7 +179,8 @@
 
         <button
           v-if="!isDesktop"
-          aria-label="Toggle files"
+          :aria-expanded="sidebarOpen"
+          :aria-label="sidebarOpen ? 'Close file browser' : 'Open file browser'"
           class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
           title="Toggle files"
           @click="sidebarOpen = !sidebarOpen"
@@ -181,7 +190,8 @@
 
         <button
           v-if="isDesktop"
-          aria-label="Toggle sidebar"
+          :aria-expanded="sidebarOpen"
+          :aria-label="sidebarOpen ? 'Close sidebar' : 'Open sidebar'"
           class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
           title="Toggle sidebar"
           @click="sidebarOpen = !sidebarOpen"
@@ -216,15 +226,31 @@
           </template>
 
           <!-- Mobile: fixed overlay -->
-          <EditorFileTree
+          <div
             v-if="!isDesktop && sidebarOpen"
-            :key="fileTreeKey"
-            class="fixed top-0 bottom-0 left-0 w-[260px]"
-            :store="store"
+            aria-label="File browser"
+            class="fixed top-0 bottom-0 left-0 w-[260px] flex flex-col bg-surface"
+            role="dialog"
             :style="{ zIndex: ticket.zIndex.value }"
-          />
+          >
+            <div class="flex items-center justify-end px-2 py-1">
+              <button
+                aria-label="Close file browser"
+                class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+                @click="sidebarOpen = false"
+              >
+                <AppIcon icon="close" :size="18" />
+              </button>
+            </div>
+
+            <EditorFileTree
+              :key="fileTreeKey"
+              class="flex-1 min-h-0"
+              :store="store"
+            />
+          </div>
 
-          <div class="editor-repl-container flex flex-col">
+          <div class="editor-repl-container flex flex-col" :inert="!isDesktop && sidebarOpen ? true : undefined">
             <EditorTabs :store="store" />
             <EditorBreadcrumbs :store="store" />
 
diff --git a/apps/docs/src/pages/editor.tutorial.[id].vue b/apps/docs/src/pages/skillz.tutorial.[id].vue
similarity index 60%
rename from apps/docs/src/pages/editor.tutorial.[id].vue
rename to apps/docs/src/pages/skillz.tutorial.[id].vue
index 44b55b865..19067a098 100644
--- a/apps/docs/src/pages/editor.tutorial.[id].vue
+++ b/apps/docs/src/pages/skillz.tutorial.[id].vue
@@ -3,13 +3,14 @@
   import { definePage } from 'unplugin-vue-router/runtime'
 
   // Framework
-  import { clamp, useBreakpoints, useDocumentEventListener, useStorage, useToggleScope } from '@vuetify/v0'
+  import { clamp, useBreakpoints, useDocumentEventListener, useStack, useStorage, useToggleScope } from '@vuetify/v0'
 
   // Components
   import EditorBreadcrumbs from '@/components/editor/EditorBreadcrumbs.vue'
   import EditorFileTree from '@/components/editor/EditorFileTree.vue'
   import EditorMarkdownPanel from '@/components/editor/EditorMarkdownPanel.vue'
   import EditorTabs from '@/components/editor/EditorTabs.vue'
+  import SkillzComplete from '@/components/skillz/SkillzComplete.vue'
 
   // Composables
   import { useParams } from '@/composables/useRoute'
@@ -18,8 +19,12 @@
   // Utilities
   import { Repl, Sandbox } from '@vue/repl'
   import Monaco from '@vue/repl/monaco-editor'
-  import '@vue/repl/style.css'
   import { computed, shallowRef, type ShallowRef, watch } from 'vue'
+  import '@vue/repl/style.css'
+  import { useRouter } from 'vue-router'
+
+  // Stores
+  import { useSkillzStore } from '@/stores/skillz'
 
   definePage({
     meta: {
@@ -35,21 +40,31 @@
     isDark,
     replTheme,
     previewOptions,
+    meta,
     html,
     stepLabel,
     isFirst,
     isLast,
     isReady,
     fileTreeKey,
+    stepOptions,
     nextStep,
     prevStep,
   } = useTutorial(tutorialId)
 
+  function onNext () {
+    if (isLast.value) {
+      onComplete()
+    } else {
+      nextStep()
+    }
+  }
+
   // Hide the Repl's built-in preview — we render Sandbox separately
   store.showOutput = false
 
   useHead({
-    title: computed(() => `Tutorial - Vuetify0`),
+    title: computed(() => meta.value ? `${meta.value.title} - Vuetify0` : 'Tutorial - Vuetify0'),
   })
 
   const breakpoints = useBreakpoints()
@@ -132,6 +147,28 @@
   const anyResizing = computed(() =>
     markdownHandle.isResizing.value || splitHandle.isResizing.value || fileTreeHandle.isResizing.value,
   )
+
+  // ── Completion ──────────────────────────────────────────────────────
+  const skillz = useSkillzStore()
+  const stack = useStack()
+  const showComplete = shallowRef(false)
+  const router = useRouter()
+
+  const ticket = stack.register({
+    onDismiss: () => {
+      showComplete.value = false
+    },
+  })
+
+  watch(showComplete, open => {
+    if (open) ticket.select()
+    else ticket.unselect()
+  })
+
+  function onComplete () {
+    skillz.finish(tutorialId.value)
+    showComplete.value = true
+  }
 </script>
 
 <template>
@@ -140,15 +177,15 @@
     <header class="flex items-center justify-between h-[48px] px-3 border-b border-divider bg-surface shrink-0">
       <div class="flex items-center gap-3">
         <RouterLink
-          aria-label="Back to editor"
+          aria-label="Back to Skillz"
           class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors no-underline text-on-surface"
-          title="Back to editor"
-          to="/editor"
+          title="Back to Skillz"
+          to="/skillz"
         >
           <AppIcon icon="arrow-left" :size="18" />
         </RouterLink>
 
-        <span class="text-sm font-medium text-on-surface">Tutorial</span>
+        <span class="text-sm font-medium text-on-surface">{{ meta?.title ?? 'Tutorial' }}</span>
       </div>
 
       <div class="flex items-center gap-2">
@@ -177,112 +214,126 @@
     </header>
 
     <!-- Tutorial layout -->
-    <Transition name="fade">
+    <div
+      v-if="isReady"
+      class="flex-1 min-h-0 flex overflow-hidden"
+      :class="[
+        { dark: isDark, 'select-none': anyResizing },
+        isDesktop ? 'flex-row' : 'flex-col',
+      ]"
+    >
+      <!-- Markdown panel -->
       <div
-        v-if="isReady"
-        class="flex-1 min-h-0 flex overflow-hidden"
-        :class="[
-          { dark: isDark, 'select-none': anyResizing },
-          isDesktop ? 'flex-row' : 'flex-col',
-        ]"
+        class="tutorial-markdown-panel overflow-hidden shrink-0"
+        :class="isDesktop ? 'border-r border-divider' : 'border-b border-divider max-h-[40vh]'"
+        :style="isDesktop ? { width: `${markdownHandle.size.value}px` } : undefined"
       >
-        <!-- Markdown panel -->
+        <EditorMarkdownPanel
+          :html="html"
+          :is-first="isFirst"
+          :is-last="isLast"
+          :level="meta?.level"
+          :step-label="stepLabel"
+          @next="onNext"
+          @prev="prevStep"
+        />
+      </div>
+
+      <!-- Markdown ↔ Right column handle -->
+      <div
+        v-if="isDesktop"
+        class="tutorial-resize-handle tutorial-resize-handle--col"
+        :class="{ 'tutorial-resize-handle--active': markdownHandle.isResizing.value }"
+        @dblclick="markdownHandle.reset()"
+        @pointerdown="markdownHandle.onPointerDown"
+      />
+
+      <!-- Right column -->
+      <div class="flex flex-col flex-1 min-w-0 min-h-0">
+        <!-- Editor area -->
         <div
-          class="tutorial-markdown-panel overflow-hidden shrink-0"
-          :class="isDesktop ? 'border-r border-divider' : 'border-b border-divider max-h-[40vh]'"
-          :style="isDesktop ? { width: `${markdownHandle.size.value}px` } : undefined"
+          class="flex min-h-0 min-w-0 overflow-hidden"
+          :style="isDesktop ? { height: `${splitHandle.size.value}%` } : { flex: '1' }"
         >
-          <EditorMarkdownPanel
-            :html="html"
-            :is-first="isFirst"
-            :is-last="isLast"
-            :step-label="stepLabel"
-            @next="nextStep"
-            @prev="prevStep"
+          <EditorFileTree
+            v-if="sidebarOpen && isDesktop && !stepOptions.hideFiles"
+            :key="fileTreeKey"
+            class="shrink-0"
+            :store="store"
+            :style="{ width: `${fileTreeHandle.size.value}px` }"
           />
-        </div>
-
-        <!-- Markdown ↔ Right column handle -->
-        <div
-          v-if="isDesktop"
-          class="tutorial-resize-handle tutorial-resize-handle--col"
-          :class="{ 'tutorial-resize-handle--active': markdownHandle.isResizing.value }"
-          @dblclick="markdownHandle.reset()"
-          @pointerdown="markdownHandle.onPointerDown"
-        />
-
-        <!-- Right column -->
-        <div class="flex flex-col flex-1 min-w-0 min-h-0">
-          <!-- Editor area -->
-          <div
-            class="flex min-h-0 min-w-0 overflow-hidden"
-            :style="isDesktop ? { height: `${splitHandle.size.value}%` } : { flex: '1' }"
-          >
-            <EditorFileTree
-              v-if="sidebarOpen && isDesktop"
-              :key="fileTreeKey"
-              class="shrink-0"
-              :store="store"
-              :style="{ width: `${fileTreeHandle.size.value}px` }"
-            />
-
-            <!-- File tree ↔ Editor handle -->
-            <div
-              v-if="sidebarOpen && isDesktop"
-              class="tutorial-resize-handle tutorial-resize-handle--col"
-              :class="{ 'tutorial-resize-handle--active': fileTreeHandle.isResizing.value }"
-              @dblclick="fileTreeHandle.reset()"
-              @pointerdown="fileTreeHandle.onPointerDown"
-            />
-
-            <div
-              class="tutorial-repl-wrapper flex flex-col flex-1 min-w-0 editor-repl"
-              :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
-            >
-              <EditorTabs :store="store" />
-              <EditorBreadcrumbs :store="store" />
-
-              <Repl
-                :auto-resize="true"
-                class="flex-1 min-h-0"
-                :clear-console="true"
-                :editor="Monaco"
-                layout="horizontal"
-                :preview-options="previewOptions"
-                :show-compile-output="false"
-                :show-import-map="false"
-                :show-ts-config="false"
-                :store="store"
-                :theme="replTheme"
-              />
-            </div>
-          </div>
 
-          <!-- Editor ↔ Preview handle -->
+          <!-- File tree ↔ Editor handle -->
           <div
-            v-if="isDesktop"
-            class="tutorial-resize-handle tutorial-resize-handle--row"
-            :class="{ 'tutorial-resize-handle--active': splitHandle.isResizing.value }"
-            @dblclick="splitHandle.reset()"
-            @pointerdown="splitHandle.onPointerDown"
+            v-if="sidebarOpen && isDesktop && !stepOptions.hideFiles"
+            class="tutorial-resize-handle tutorial-resize-handle--col"
+            :class="{ 'tutorial-resize-handle--active': fileTreeHandle.isResizing.value }"
+            @dblclick="fileTreeHandle.reset()"
+            @pointerdown="fileTreeHandle.onPointerDown"
           />
 
-          <!-- Preview area -->
           <div
-            class="tutorial-preview flex-1 min-w-0 min-h-0 editor-repl overflow-hidden"
+            class="tutorial-repl-wrapper flex flex-col flex-1 min-w-0 editor-repl"
             :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
           >
-            <Sandbox
-              :clear-console="false"
+            <EditorTabs v-if="!stepOptions.hideTabs" :store="store" />
+            <EditorBreadcrumbs v-if="!stepOptions.hideBreadcrumbs" :store="store" />
+
+            <Repl
+              :auto-resize="true"
+              class="flex-1 min-h-0"
+              :clear-console="true"
+              :editor="Monaco"
+              :editor-options="{ monacoOptions: { padding: { top: 16 } } }"
+              layout="horizontal"
               :preview-options="previewOptions"
-              :show="true"
+              :show-compile-output="false"
+              :show-import-map="false"
+              :show-ts-config="false"
               :store="store"
               :theme="replTheme"
             />
           </div>
         </div>
+
+        <!-- Editor ↔ Preview handle -->
+        <div
+          v-if="isDesktop"
+          class="tutorial-resize-handle tutorial-resize-handle--row"
+          :class="{ 'tutorial-resize-handle--active': splitHandle.isResizing.value }"
+          @dblclick="splitHandle.reset()"
+          @pointerdown="splitHandle.onPointerDown"
+        />
+
+        <!-- Preview area -->
+        <div
+          class="tutorial-preview flex-1 min-w-0 min-h-0 editor-repl overflow-hidden border-t border-divider"
+          :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
+        >
+          <Sandbox
+            :clear-console="false"
+            :preview-options="previewOptions"
+            :show="true"
+            :store="store"
+            :theme="replTheme"
+          />
+        </div>
       </div>
-    </Transition>
+    </div>
+
+    <!-- Completion overlay -->
+    <div
+      v-if="showComplete"
+      class="fixed inset-0 flex items-center justify-center"
+      :style="{ zIndex: ticket.zIndex.value }"
+    >
+      <SkillzComplete
+        description="You've learned the Vue fundamentals that power every v0 composable. Go explore — or dive into another tutorial when you're ready."
+        title="Tutorial Complete"
+        @back="showComplete = false"
+        @complete="router.push('/skillz')"
+      />
+    </div>
   </div>
 </template>
 
@@ -360,14 +411,10 @@
     background-color: var(--v0-background) !important;
   }
 
-  /* Fade on mount */
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 0.2s;
+  /* Disable @vue/repl's built-in fade transition on preview iframe */
+  .tutorial-preview :deep(.fade-enter-active),
+  .tutorial-preview :deep(.fade-leave-active) {
+    transition: none !important;
   }
 
-  .fade-enter-from,
-  .fade-leave-to {
-    opacity: 0;
-  }
 </style>
diff --git a/apps/docs/src/skillz/tutorials/getting-started/meta.json b/apps/docs/src/skillz/tutorials/getting-started/meta.json
deleted file mode 100644
index 2b3211c16..000000000
--- a/apps/docs/src/skillz/tutorials/getting-started/meta.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "title": "Getting Started",
-  "description": "Build an interactive counter with @vuetify/v0 composables"
-}
diff --git a/apps/docs/src/skillz/tutorials/getting-started/step-1/App.vue b/apps/docs/src/skillz/tutorials/getting-started/step-1/App.vue
deleted file mode 100644
index 50a4fb1d9..000000000
--- a/apps/docs/src/skillz/tutorials/getting-started/step-1/App.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-  // Utilities
-  import { shallowRef } from 'vue'
-
-  const count = shallowRef(0)
-</script>
-
-<template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
-    <h1 class="text-2xl font-bold mb-4">
-      Hello, v0!
-    </h1>
-
-    <p class="text-on-surface-variant mb-6">
-      This is your first v0 component. Try editing this text!
-    </p>
-
-    <div class="flex items-center gap-4">
-      <button
-        class="px-4 py-2 rounded bg-primary text-on-primary font-medium"
-        @click="count++"
-      >
-        Count: {{ count }}
-      </button>
-    </div>
-  </div>
-</template>
diff --git a/apps/docs/src/skillz/tutorials/getting-started/step-1/README.md b/apps/docs/src/skillz/tutorials/getting-started/step-1/README.md
deleted file mode 100644
index 2dd02e871..000000000
--- a/apps/docs/src/skillz/tutorials/getting-started/step-1/README.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Your first component
-
-Welcome to the **@vuetify/v0** tutorial! This interactive guide will walk you through building components with headless composables.
-
-## What is v0?
-
-`@vuetify/v0` provides **headless** Vue 3 composables — logic-only building blocks with no opinions on styling. You bring your own design system.
-
-## The editor
-
-On the right, you can see a code editor (top) and a live preview (bottom). The code you write is compiled and rendered in real-time.
-
-## Let's start
-
-Right now, the editor shows a simple Vue component with a heading. In the next step, we'll add interactivity using `createStep` — a composable for building step-based navigation.
-
-> [!TIP] Try editing the text in `App.vue` and watch the preview update instantly!
diff --git a/apps/docs/src/skillz/tutorials/getting-started/step-2/App.vue b/apps/docs/src/skillz/tutorials/getting-started/step-2/App.vue
deleted file mode 100644
index efd016453..000000000
--- a/apps/docs/src/skillz/tutorials/getting-started/step-2/App.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<script setup lang="ts">
-  // Framework
-  import { createStep } from '@vuetify/v0'
-
-  // Utilities
-  import { computed } from 'vue'
-
-  const steps = [
-    { id: 'intro', label: 'Introduction' },
-    { id: 'setup', label: 'Setup' },
-    { id: 'finish', label: 'Finish' },
-  ]
-
-  const stepper = createStep()
-  stepper.onboard(steps.map((s, i) => ({ id: s.id, value: i })))
-  stepper.first()
-
-  const currentIndex = computed(() => stepper.selectedIndex.value)
-  const currentLabel = computed(() => steps[currentIndex.value]?.label)
-  const isFirst = computed(() => currentIndex.value === 0)
-  const isLast = computed(() => currentIndex.value === steps.length - 1)
-</script>
-
-<template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
-    <h1 class="text-2xl font-bold mb-6">
-      Step Navigator
-    </h1>
-
-    <!-- Step indicators -->
-    <div class="flex items-center gap-2 mb-8">
-      <div
-        v-for="(step, i) in steps"
-        :key="step.id"
-        class="flex items-center gap-2"
-      >
-        <div
-          class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold transition-all"
-          :class="i <= currentIndex
-            ? 'bg-primary text-on-primary'
-            : 'bg-surface-tint text-on-surface-variant'"
-        >
-          {{ i + 1 }}
-        </div>
-        <span
-          class="text-sm"
-          :class="i === currentIndex ? 'text-primary font-medium' : 'text-on-surface-variant'"
-        >
-          {{ step.label }}
-        </span>
-        <span v-if="i < steps.length - 1" class="text-divider mx-1">—</span>
-      </div>
-    </div>
-
-    <!-- Current step content -->
-    <div class="p-6 rounded-lg bg-surface-tint mb-6">
-      <p class="text-lg">
-        Currently on: <strong>{{ currentLabel }}</strong>
-      </p>
-      <p class="text-sm text-on-surface-variant mt-2">
-        Step {{ currentIndex + 1 }} of {{ steps.length }}
-      </p>
-    </div>
-
-    <!-- Navigation -->
-    <div class="flex gap-2">
-      <button
-        class="px-4 py-2 rounded bg-surface-tint text-on-surface disabled:opacity-40"
-        :disabled="isFirst"
-        @click="stepper.prev()"
-      >
-        Previous
-      </button>
-      <button
-        class="px-4 py-2 rounded bg-primary text-on-primary disabled:opacity-40"
-        :disabled="isLast"
-        @click="stepper.next()"
-      >
-        Next
-      </button>
-    </div>
-  </div>
-</template>
diff --git a/apps/docs/src/skillz/tutorials/getting-started/step-2/README.md b/apps/docs/src/skillz/tutorials/getting-started/step-2/README.md
deleted file mode 100644
index 13d7e44c5..000000000
--- a/apps/docs/src/skillz/tutorials/getting-started/step-2/README.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Adding step navigation
-
-Now let's use `createStep` — a composable for building wizards, carousels, and any step-based UI.
-
-## What is createStep?
-
-`createStep` extends single-selection with navigation methods:
-
-- `first()` / `last()` — jump to boundaries
-- `next()` / `prev()` — move sequentially
-- Automatically **skips disabled** items
-- Supports **circular** navigation
-
-## How it works
-
-1. Call `createStep()` to create a stepper instance
-2. Register items with `onboard()` — each item gets an `id` and `value`
-3. Use `first()` to select the initial step
-4. Navigate with `next()`, `prev()`, etc.
-
-## Try it
-
-The code now imports `createStep` and sets up a 3-step wizard. Click the **Next** and **Previous** buttons in the preview to navigate between steps.
-
-Notice how `selectedValue` reactively updates as you navigate!
diff --git a/apps/docs/src/skillz/tutorials/getting-started/step-3/App.vue b/apps/docs/src/skillz/tutorials/getting-started/step-3/App.vue
deleted file mode 100644
index dc4fe3730..000000000
--- a/apps/docs/src/skillz/tutorials/getting-started/step-3/App.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<script setup lang="ts">
-  // Framework
-  import { createStep } from '@vuetify/v0'
-
-  // Utilities
-  import { computed } from 'vue'
-
-  const steps = [
-    { id: 'cart', label: 'Cart', icon: '1' },
-    { id: 'shipping', label: 'Shipping', icon: '2' },
-    { id: 'payment', label: 'Payment', icon: '3', disabled: true },
-    { id: 'review', label: 'Review', icon: '4' },
-    { id: 'confirm', label: 'Confirm', icon: '5' },
-  ]
-
-  const stepper = createStep()
-  stepper.onboard(steps.map((s, i) => ({ id: s.id, value: i, disabled: s.disabled })))
-  stepper.first()
-
-  const currentIndex = computed(() => stepper.selectedIndex.value)
-  const isFirst = computed(() => currentIndex.value === 0)
-  const isLast = computed(() => currentIndex.value === stepper.size - 1)
-</script>
-
-<template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
-    <!-- Stepper Track -->
-    <div class="relative flex items-center justify-between mb-12">
-      <div class="absolute top-5 left-0 right-0 h-0.5 bg-divider" />
-      <div
-        class="absolute top-5 left-0 h-0.5 bg-primary transition-all duration-400"
-        :style="{ width: (currentIndex / (steps.length - 1)) * 100 + '%' }"
-      />
-
-      <div
-        v-for="(step, i) in steps"
-        :key="step.id"
-        class="relative z-1 flex flex-col items-center cursor-pointer"
-        @click="!step.disabled && stepper.select(step.id)"
-      >
-        <div
-          class="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold transition-all duration-300"
-          :class="[
-            i <= currentIndex ? 'bg-primary text-on-primary' : step.disabled ? 'bg-surface border-2 border-dashed border-divider' : 'bg-surface border-2 border-solid border-divider',
-            i === currentIndex ? 'scale-115 shadow-[0_0_0_4px_rgba(59,130,246,0.2)]' : 'scale-90',
-            step.disabled ? 'opacity-50' : '',
-          ]"
-        >
-          <span v-if="i < currentIndex">&#10003;</span>
-          <span v-else>{{ step.icon }}</span>
-        </div>
-
-        <span
-          class="mt-2 text-xs font-medium"
-          :class="[
-            i === currentIndex ? 'text-primary' : 'text-on-surface-variant',
-            step.disabled ? 'line-through opacity-50' : '',
-          ]"
-        >
-          {{ step.label }}
-        </span>
-      </div>
-    </div>
-
-    <!-- Controls -->
-    <div class="flex items-center justify-center gap-2">
-      <button
-        class="px-3 py-1.5 text-sm rounded border border-solid border-divider bg-surface disabled:opacity-40"
-        :disabled="isFirst"
-        @click="stepper.first()"
-      >
-        First
-      </button>
-      <button
-        class="px-4 py-1.5 text-sm rounded bg-surface-tint text-primary disabled:opacity-40"
-        :disabled="isFirst"
-        @click="stepper.prev()"
-      >
-        Prev
-      </button>
-      <button
-        class="px-4 py-1.5 text-sm rounded bg-primary text-on-primary disabled:opacity-40"
-        :disabled="isLast"
-        @click="stepper.next()"
-      >
-        Next
-      </button>
-      <button
-        class="px-3 py-1.5 text-sm rounded border border-solid border-divider bg-surface disabled:opacity-40"
-        :disabled="isLast"
-        @click="stepper.last()"
-      >
-        Last
-      </button>
-    </div>
-
-    <p class="mt-6 text-center text-xs text-on-surface-variant">
-      Step {{ currentIndex + 1 }} of {{ stepper.size }} · Payment step is disabled (auto-skipped)
-    </p>
-  </div>
-</template>
diff --git a/apps/docs/src/skillz/tutorials/getting-started/step-3/README.md b/apps/docs/src/skillz/tutorials/getting-started/step-3/README.md
deleted file mode 100644
index f7ab6cb7a..000000000
--- a/apps/docs/src/skillz/tutorials/getting-started/step-3/README.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# Disabled steps and skipping
-
-`createStep` can handle **disabled items** automatically. When you call `next()` or `prev()`, disabled steps are skipped.
-
-## Adding disabled steps
-
-Pass `disabled: true` in the ticket input to mark a step as disabled:
-
-```ts
-stepper.onboard([
-  { id: 'a', value: 0 },
-  { id: 'b', value: 1, disabled: true },
-  { id: 'c', value: 2 },
-])
-```
-
-When navigating from step A, calling `next()` will skip step B and land on step C.
-
-## What changed
-
-In this step, we added a **Payment** step that is disabled. Try navigating through the steps — notice how Payment is automatically skipped!
-
-## What's next
-
-This is just the beginning. `@vuetify/v0` provides many more composables:
-
-- **createSelection** — multi-select state management
-- **createGroup** — tri-state selection with mixed states
-- **useTheme** — reactive theme switching
-- **createForm** — async form validation
-
-Explore the [documentation](/) to learn more!
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/meta.json b/apps/docs/src/skillz/tutorials/v0-basics/meta.json
new file mode 100644
index 000000000..1cd19b382
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/meta.json
@@ -0,0 +1,10 @@
+{
+  "title": "v0 Basics",
+  "description": "Build a settings panel with headless components — Tabs, Checkbox, Radio, ExpansionPanel, and Dialog styled with UnoCSS",
+  "level": 1,
+  "track": "fundamentals",
+  "categories": [],
+  "order": 10,
+  "minutes": 15,
+  "prerequisites": ["vue-basics"]
+}
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-1/App.vue b/apps/docs/src/skillz/tutorials/v0-basics/step-1/App.vue
new file mode 100644
index 000000000..d942905d6
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-1/App.vue
@@ -0,0 +1,60 @@
+<script setup>
+  // Framework
+  import { Single } from '@vuetify/v0'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const selected = ref('apple')
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-6">
+      Headless Selection
+    </h1>
+
+    <p class="text-sm text-on-surface-variant mb-4">
+      Pick your favorite fruit:
+    </p>
+
+    <Single.Root v-model="selected" class="flex gap-3">
+      <Single.Item v-slot="{ isSelected }" value="apple">
+        <button
+          class="px-4 py-2 rounded-lg border border-solid border-divider transition-colors"
+          :class="isSelected
+            ? 'bg-primary text-on-primary border-primary'
+            : 'bg-surface text-on-surface hover:bg-surface-tint'"
+        >
+          Apple {{ isSelected ? '✓' : '' }}
+        </button>
+      </Single.Item>
+
+      <Single.Item v-slot="{ isSelected }" value="banana">
+        <button
+          class="px-4 py-2 rounded-lg border border-solid border-divider transition-colors"
+          :class="isSelected
+            ? 'bg-primary text-on-primary border-primary'
+            : 'bg-surface text-on-surface hover:bg-surface-tint'"
+        >
+          Banana {{ isSelected ? '✓' : '' }}
+        </button>
+      </Single.Item>
+
+      <Single.Item v-slot="{ isSelected }" value="cherry">
+        <button
+          class="px-4 py-2 rounded-lg border border-solid border-divider transition-colors"
+          :class="isSelected
+            ? 'bg-primary text-on-primary border-primary'
+            : 'bg-surface text-on-surface hover:bg-surface-tint'"
+        >
+          Cherry {{ isSelected ? '✓' : '' }}
+        </button>
+      </Single.Item>
+    </Single.Root>
+
+    <p class="mt-4 text-sm text-on-surface-variant">
+      Selected: <strong class="text-on-surface">{{ selected }}</strong>
+    </p>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-1/README.md b/apps/docs/src/skillz/tutorials/v0-basics/step-1/README.md
new file mode 100644
index 000000000..fdbbbb264
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-1/README.md
@@ -0,0 +1,43 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# What is headless?
+
+v0 components are **headless** — they manage behavior, accessibility, and state, but ship zero CSS. You provide every pixel of the visuals using regular HTML and utility classes.
+
+## Compound components
+
+Headless components use a **compound pattern**: a parent `Root` manages state, and child components participate in it. They communicate through Vue's provide/inject — no prop drilling needed.
+
+```vue
+<template>
+  <Single.Root v-model="selected">
+    <Single.Item value="apple">Apple</Single.Item>
+    <Single.Item value="banana">Banana</Single.Item>
+  </Single.Root>
+</template>
+```
+
+`Single.Root` tracks which item is selected. Each `Single.Item` registers itself and handles clicks. But neither renders any styling — that part is yours.
+
+## Slot props
+
+Child components expose **slot props** like `isSelected` so you can style them conditionally:
+
+```vue
+<template>
+  <Single.Item value="apple" #default="{ isSelected }">
+    <div :class="isSelected ? 'bg-primary text-on-primary' : 'bg-surface'">
+      Apple
+    </div>
+  </Single.Item>
+</template>
+```
+
+## Try it
+
+The editor shows a `Single` component with three fruit options. Click them and watch the selection state change. Try adding a fourth option or changing the styling classes.
+
+> [!TIP] This is the core mental model of v0: components provide behavior through slot props, you provide the visuals. Zero CSS ships with v0 — every pixel is yours.
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-2/App.vue b/apps/docs/src/skillz/tutorials/v0-basics/step-2/App.vue
new file mode 100644
index 000000000..38dc3b69f
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-2/App.vue
@@ -0,0 +1,80 @@
+<script setup>
+  // Framework
+  import { Tabs } from '@vuetify/v0'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const activeTab = ref('general')
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-6">
+      Settings
+    </h1>
+
+    <div class="max-w-lg rounded-lg border border-solid border-divider bg-surface">
+      <Tabs.Root v-model="activeTab">
+        <Tabs.List class="flex border-b border-solid border-divider">
+          <Tabs.Item v-slot="{ isSelected }" value="general">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              General
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="notifications">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Notifications
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="privacy">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Privacy
+            </button>
+          </Tabs.Item>
+        </Tabs.List>
+
+        <Tabs.Panel class="p-4" value="general">
+          <h2 class="text-lg font-semibold mb-2">General Settings</h2>
+
+          <p class="text-sm text-on-surface-variant">
+            Configure your display name, language, and appearance preferences.
+          </p>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="notifications">
+          <h2 class="text-lg font-semibold mb-2">Notification Preferences</h2>
+
+          <p class="text-sm text-on-surface-variant">
+            Choose which notifications you want to receive.
+          </p>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="privacy">
+          <h2 class="text-lg font-semibold mb-2">Privacy Settings</h2>
+
+          <p class="text-sm text-on-surface-variant">
+            Control who can see your profile and activity.
+          </p>
+        </Tabs.Panel>
+      </Tabs.Root>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-2/README.md b/apps/docs/src/skillz/tutorials/v0-basics/step-2/README.md
new file mode 100644
index 000000000..915198b69
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-2/README.md
@@ -0,0 +1,47 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Tabs for navigation
+
+`Tabs` is a compound component for building tabbed interfaces. It handles keyboard navigation, ARIA roles, and panel switching — you handle the look.
+
+## Structure
+
+```vue
+<template>
+  <Tabs.Root v-model="activeTab">
+    <Tabs.List>
+      <Tabs.Item value="general">General</Tabs.Item>
+      <Tabs.Item value="notifications">Notifications</Tabs.Item>
+    </Tabs.List>
+
+    <Tabs.Panel value="general">General content</Tabs.Panel>
+    <Tabs.Panel value="notifications">Notifications content</Tabs.Panel>
+  </Tabs.Root>
+</template>
+```
+
+- **`Tabs.Root`** — provides context and manages active tab
+- **`Tabs.List`** — container with `tablist` role and arrow-key navigation
+- **`Tabs.Item`** — individual tab trigger with `tab` role
+- **`Tabs.Panel`** — content shown when its matching tab is active
+
+## Tab items expose slot props
+
+Just like `Single.Item`, each `Tabs.Item` exposes `isSelected` so you can conditionally style the active tab:
+
+```vue
+<template>
+  <Tabs.Item value="general" #default="{ isSelected }">
+    <span :class="isSelected ? 'border-b-2 border-primary' : ''">
+      General
+    </span>
+  </Tabs.Item>
+</template>
+```
+
+## Try it
+
+The settings panel now has three tabs. Click between them to switch content. Try adding a fourth tab called "Security" with its own panel, or try adding the `disabled` prop to a tab.
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-3/App.vue b/apps/docs/src/skillz/tutorials/v0-basics/step-3/App.vue
new file mode 100644
index 000000000..fdca1d402
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-3/App.vue
@@ -0,0 +1,172 @@
+<script setup>
+  // Framework
+  import { Tabs, Checkbox } from '@vuetify/v0'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const activeTab = ref('notifications')
+  const notifications = ref(['email', 'updates'])
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-6">
+      Settings
+    </h1>
+
+    <div class="max-w-lg rounded-lg border border-solid border-divider bg-surface">
+      <Tabs.Root v-model="activeTab">
+        <Tabs.List class="flex border-b border-solid border-divider">
+          <Tabs.Item v-slot="{ isSelected }" value="general">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              General
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="notifications">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Notifications
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="privacy">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Privacy
+            </button>
+          </Tabs.Item>
+        </Tabs.List>
+
+        <Tabs.Panel class="p-4" value="general">
+          <h2 class="text-lg font-semibold mb-2">General Settings</h2>
+
+          <p class="text-sm text-on-surface-variant">
+            Configure your display name, language, and appearance preferences.
+          </p>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="notifications">
+          <h2 class="text-lg font-semibold mb-2">Notification Preferences</h2>
+
+          <Checkbox.Group v-model="notifications" class="mt-4 space-y-3">
+            <Checkbox.SelectAll v-slot="{ isSelected }">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator v-slot="{ isMixed }">
+                    <span v-if="isMixed">−</span>
+                    <span v-else>✓</span>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm font-medium">Select all</span>
+              </label>
+            </Checkbox.SelectAll>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="email">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Email notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="push">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Push notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="updates">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Product updates</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="marketing">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Marketing emails</span>
+              </label>
+            </Checkbox.Root>
+          </Checkbox.Group>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="privacy">
+          <h2 class="text-lg font-semibold mb-2">Privacy Settings</h2>
+
+          <p class="text-sm text-on-surface-variant">
+            Control who can see your profile and activity.
+          </p>
+        </Tabs.Panel>
+      </Tabs.Root>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-3/README.md b/apps/docs/src/skillz/tutorials/v0-basics/step-3/README.md
new file mode 100644
index 000000000..64f7aa1a1
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-3/README.md
@@ -0,0 +1,45 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Checkboxes for settings
+
+`Checkbox` provides tri-state checkbox controls with group support. Like all v0 components, it handles ARIA attributes and keyboard interaction while you style the visuals.
+
+## Group and Root
+
+```vue
+<template>
+  <Checkbox.Group v-model="selected">
+    <Checkbox.Root value="email">
+      <Checkbox.Indicator>✓</Checkbox.Indicator>
+      Email notifications
+    </Checkbox.Root>
+  </Checkbox.Group>
+</template>
+```
+
+- **`Checkbox.Group`** — manages an array of selected values
+- **`Checkbox.Root`** — individual checkbox with `value` prop, renders as a button
+- **`Checkbox.Indicator`** — only renders its content when checked
+
+## SelectAll with mixed state
+
+`Checkbox.SelectAll` binds to the group's aggregate state. When some (but not all) items are checked, the indicator receives `isMixed`:
+
+```vue
+<template>
+  <Checkbox.SelectAll>
+    <Checkbox.Indicator v-slot="{ isMixed }">
+      <span v-if="isMixed">−</span>
+      <span v-else>✓</span>
+    </Checkbox.Indicator>
+    Select all
+  </Checkbox.SelectAll>
+</template>
+```
+
+## Try it
+
+The Notifications tab now has checkboxes. Try checking a few, then add a `Checkbox.SelectAll` above the list. Watch the indicator change between check, dash, and empty as you toggle items.
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-4/App.vue b/apps/docs/src/skillz/tutorials/v0-basics/step-4/App.vue
new file mode 100644
index 000000000..f6b5bf3f3
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-4/App.vue
@@ -0,0 +1,244 @@
+<script setup>
+  // Framework
+  import { Tabs, Checkbox, Radio } from '@vuetify/v0'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const activeTab = ref('privacy')
+  const notifications = ref(['email', 'updates'])
+  const visibility = ref('friends')
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-6">
+      Settings
+    </h1>
+
+    <div class="max-w-lg rounded-lg border border-solid border-divider bg-surface">
+      <Tabs.Root v-model="activeTab">
+        <Tabs.List class="flex border-b border-solid border-divider">
+          <Tabs.Item v-slot="{ isSelected }" value="general">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              General
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="notifications">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Notifications
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="privacy">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Privacy
+            </button>
+          </Tabs.Item>
+        </Tabs.List>
+
+        <Tabs.Panel class="p-4" value="general">
+          <h2 class="text-lg font-semibold mb-2">General Settings</h2>
+
+          <p class="text-sm text-on-surface-variant">
+            Configure your display name, language, and appearance preferences.
+          </p>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="notifications">
+          <h2 class="text-lg font-semibold mb-2">Notification Preferences</h2>
+
+          <Checkbox.Group v-model="notifications" class="mt-4 space-y-3">
+            <Checkbox.SelectAll v-slot="{ isSelected }">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator v-slot="{ isMixed }">
+                    <span v-if="isMixed">−</span>
+                    <span v-else>✓</span>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm font-medium">Select all</span>
+              </label>
+            </Checkbox.SelectAll>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="email">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Email notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="push">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Push notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="updates">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Product updates</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="marketing">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Marketing emails</span>
+              </label>
+            </Checkbox.Root>
+          </Checkbox.Group>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="privacy">
+          <h2 class="text-lg font-semibold mb-2">Privacy Settings</h2>
+
+          <p class="text-sm text-on-surface-variant mb-4">
+            Who can see your profile?
+          </p>
+
+          <Radio.Group v-model="visibility" class="space-y-3" mandatory>
+            <Radio.Root v-slot="{ isSelected }" value="public">
+              <label
+                class="flex items-center gap-3 p-4 rounded-lg border border-solid cursor-pointer transition-colors"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-colors"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div>
+                  <p class="text-sm font-medium">Public</p>
+                  <p class="text-xs text-on-surface-variant">Anyone can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="friends">
+              <label
+                class="flex items-center gap-3 p-4 rounded-lg border border-solid cursor-pointer transition-colors"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-colors"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div>
+                  <p class="text-sm font-medium">Friends only</p>
+                  <p class="text-xs text-on-surface-variant">Only approved friends can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="private">
+              <label
+                class="flex items-center gap-3 p-4 rounded-lg border border-solid cursor-pointer transition-colors"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-colors"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div>
+                  <p class="text-sm font-medium">Private</p>
+                  <p class="text-xs text-on-surface-variant">Nobody can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+          </Radio.Group>
+        </Tabs.Panel>
+      </Tabs.Root>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-4/README.md b/apps/docs/src/skillz/tutorials/v0-basics/step-4/README.md
new file mode 100644
index 000000000..4cfc707be
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-4/README.md
@@ -0,0 +1,50 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Radio groups
+
+`Radio` provides single-selection radio button controls. Unlike `Single`, radio groups are specifically designed for form inputs — they render proper ARIA radio roles and support form submission.
+
+## Group and Root
+
+```vue
+<template>
+  <Radio.Group v-model="visibility" mandatory>
+    <Radio.Root value="public">
+      <Radio.Indicator>●</Radio.Indicator>
+      Public
+    </Radio.Root>
+
+    <Radio.Root value="private">
+      <Radio.Indicator>●</Radio.Indicator>
+      Private
+    </Radio.Root>
+  </Radio.Group>
+</template>
+```
+
+- **`Radio.Group`** — manages which radio is selected, supports `mandatory` prop
+- **`Radio.Root`** — individual radio button with `value`, renders as a button
+- **`Radio.Indicator`** — only renders its content when this radio is selected
+
+## Card-style radios
+
+Since v0 is headless, you can style radios as full cards instead of tiny circles:
+
+```vue
+<template>
+  <Radio.Root value="public" #default="{ isSelected }">
+    <div :class="isSelected ? 'border-primary bg-surface-tint' : 'border-divider'">
+      <Radio.Indicator>●</Radio.Indicator>
+      <strong>Public</strong>
+      <p>Visible to everyone</p>
+    </div>
+  </Radio.Root>
+</template>
+```
+
+## Try it
+
+The Privacy tab now has radio cards for visibility settings. Try adding the `mandatory` prop to `Radio.Group` to prevent deselection, or add a `watch` on `visibility` to show a toast message when it changes.
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-5/App.vue b/apps/docs/src/skillz/tutorials/v0-basics/step-5/App.vue
new file mode 100644
index 000000000..0aedbf21b
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-5/App.vue
@@ -0,0 +1,245 @@
+<script setup>
+  // Framework
+  import { Tabs, Checkbox, Radio } from '@vuetify/v0'
+
+  // Components
+  import SettingsSection from './SettingsSection.vue'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const activeTab = ref('general')
+  const notifications = ref(['email', 'updates'])
+  const visibility = ref('friends')
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-6">
+      Settings
+    </h1>
+
+    <div class="max-w-lg rounded-lg border border-solid border-divider bg-surface">
+      <Tabs.Root v-model="activeTab">
+        <Tabs.List class="flex border-b border-solid border-divider">
+          <Tabs.Item v-slot="{ isSelected }" value="general">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              General
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="notifications">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Notifications
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="privacy">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Privacy
+            </button>
+          </Tabs.Item>
+        </Tabs.List>
+
+        <Tabs.Panel class="p-4" value="general">
+          <h2 class="text-lg font-semibold mb-3">General Settings</h2>
+
+          <SettingsSection />
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="notifications">
+          <h2 class="text-lg font-semibold mb-2">Notification Preferences</h2>
+
+          <Checkbox.Group v-model="notifications" class="mt-4 space-y-3">
+            <Checkbox.SelectAll v-slot="{ isSelected }">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator v-slot="{ isMixed }">
+                    <span v-if="isMixed">−</span>
+                    <span v-else>✓</span>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm font-medium">Select all</span>
+              </label>
+            </Checkbox.SelectAll>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="email">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Email notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="push">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Push notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="updates">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Product updates</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="marketing">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Marketing emails</span>
+              </label>
+            </Checkbox.Root>
+          </Checkbox.Group>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="privacy">
+          <h2 class="text-lg font-semibold mb-2">Privacy Settings</h2>
+
+          <p class="text-sm text-on-surface-variant mb-4">
+            Who can see your profile?
+          </p>
+
+          <Radio.Group v-model="visibility" class="space-y-3" mandatory>
+            <Radio.Root v-slot="{ isSelected }" value="public">
+              <label
+                class="flex items-center gap-3 p-4 rounded-lg border border-solid cursor-pointer transition-colors"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-colors"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div>
+                  <p class="text-sm font-medium">Public</p>
+                  <p class="text-xs text-on-surface-variant">Anyone can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="friends">
+              <label
+                class="flex items-center gap-3 p-4 rounded-lg border border-solid cursor-pointer transition-colors"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-colors"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div>
+                  <p class="text-sm font-medium">Friends only</p>
+                  <p class="text-xs text-on-surface-variant">Only approved friends can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="private">
+              <label
+                class="flex items-center gap-3 p-4 rounded-lg border border-solid cursor-pointer transition-colors"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-colors"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div>
+                  <p class="text-sm font-medium">Private</p>
+                  <p class="text-xs text-on-surface-variant">Nobody can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+          </Radio.Group>
+        </Tabs.Panel>
+      </Tabs.Root>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-5/README.md b/apps/docs/src/skillz/tutorials/v0-basics/step-5/README.md
new file mode 100644
index 000000000..d1aceb054
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-5/README.md
@@ -0,0 +1,40 @@
+---
+hideFiles: false
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Expansion panels
+
+`ExpansionPanel` creates collapsible sections — perfect for organizing dense settings into scannable groups.
+
+## Structure
+
+```vue
+<template>
+  <ExpansionPanel.Root>
+    <ExpansionPanel.Item value="appearance">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator>Appearance</ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        Theme and color settings...
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+  </ExpansionPanel.Root>
+</template>
+```
+
+- **`ExpansionPanel.Root`** — manages which panels are open, supports `multiple` prop
+- **`ExpansionPanel.Item`** — wraps a single collapsible section
+- **`ExpansionPanel.Header`** — non-collapsible header area
+- **`ExpansionPanel.Activator`** — clickable trigger that toggles the panel
+- **`ExpansionPanel.Content`** — collapsible content area
+
+## Extracting components
+
+Notice the file list on the left — we've extracted `SettingsSection.vue` to keep the General tab clean. This is a normal Vue pattern: break large templates into smaller, focused components.
+
+## Try it
+
+Try switching `ExpansionPanel.Root` to `multiple` mode so several sections can be open at once. You could also add a "Collapse all" button that resets the model to an empty array.
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-5/SettingsSection.vue b/apps/docs/src/skillz/tutorials/v0-basics/step-5/SettingsSection.vue
new file mode 100644
index 000000000..9e27c3bda
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-5/SettingsSection.vue
@@ -0,0 +1,108 @@
+<script setup>
+  // Framework
+  import { ExpansionPanel } from '@vuetify/v0'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const expanded = ref('appearance')
+</script>
+
+<template>
+  <ExpansionPanel.Root v-model="expanded">
+    <ExpansionPanel.Item value="appearance">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-3 text-sm font-medium text-left transition-colors hover:bg-surface-tint rounded-lg"
+          >
+            <span>Appearance</span>
+            <span
+              class="transition-transform duration-200"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-3 pb-3 space-y-3">
+          <div>
+            <label class="block text-xs text-on-surface-variant mb-1">Theme</label>
+
+            <select class="w-full px-3 py-2 rounded border border-solid border-divider bg-background text-on-surface text-sm">
+              <option>System</option>
+              <option>Light</option>
+              <option>Dark</option>
+            </select>
+          </div>
+
+          <div>
+            <label class="block text-xs text-on-surface-variant mb-1">Font size</label>
+
+            <select class="w-full px-3 py-2 rounded border border-solid border-divider bg-background text-on-surface text-sm">
+              <option>Small</option>
+              <option selected>Medium</option>
+              <option>Large</option>
+            </select>
+          </div>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+
+    <ExpansionPanel.Item value="language">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-3 text-sm font-medium text-left transition-colors hover:bg-surface-tint rounded-lg"
+          >
+            <span>Language</span>
+            <span
+              class="transition-transform duration-200"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-3 pb-3">
+          <label class="block text-xs text-on-surface-variant mb-1">Display language</label>
+
+          <select class="w-full px-3 py-2 rounded border border-solid border-divider bg-background text-on-surface text-sm">
+            <option>English</option>
+            <option>Spanish</option>
+            <option>French</option>
+            <option>Japanese</option>
+          </select>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+
+    <ExpansionPanel.Item value="data">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-3 text-sm font-medium text-left transition-colors hover:bg-surface-tint rounded-lg"
+          >
+            <span>Data & Storage</span>
+            <span
+              class="transition-transform duration-200"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-3 pb-3 space-y-2">
+          <p class="text-xs text-on-surface-variant">Cache size: 24 MB</p>
+
+          <button class="px-3 py-1.5 text-xs rounded bg-error text-on-error">
+            Clear cache
+          </button>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+  </ExpansionPanel.Root>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-6/App.vue b/apps/docs/src/skillz/tutorials/v0-basics/step-6/App.vue
new file mode 100644
index 000000000..518e1a30d
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-6/App.vue
@@ -0,0 +1,267 @@
+<script setup>
+  // Framework
+  import { Tabs, Checkbox, Radio } from '@vuetify/v0'
+
+  // Components
+  import ConfirmDialog from './ConfirmDialog.vue'
+  import SettingsSection from './SettingsSection.vue'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const activeTab = ref('general')
+  const notifications = ref(['email', 'updates'])
+  const visibility = ref('friends')
+
+  function handleReset () {
+    notifications.value = []
+    visibility.value = 'friends'
+    activeTab.value = 'general'
+  }
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-6">
+      Settings
+    </h1>
+
+    <div class="max-w-lg rounded-lg border border-solid border-divider bg-surface">
+      <Tabs.Root v-model="activeTab">
+        <Tabs.List class="flex border-b border-solid border-divider">
+          <Tabs.Item v-slot="{ isSelected }" value="general">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              General
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="notifications">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Notifications
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="privacy">
+            <button
+              class="px-4 py-3 text-sm font-medium border-b-2 border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary text-on-surface'
+                : 'border-transparent text-on-surface-variant hover:text-on-surface'"
+            >
+              Privacy
+            </button>
+          </Tabs.Item>
+        </Tabs.List>
+
+        <Tabs.Panel class="p-4" value="general">
+          <h2 class="text-lg font-semibold mb-3">General Settings</h2>
+
+          <SettingsSection />
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="notifications">
+          <h2 class="text-lg font-semibold mb-2">Notification Preferences</h2>
+
+          <Checkbox.Group v-model="notifications" class="mt-4 space-y-3">
+            <Checkbox.SelectAll v-slot="{ isSelected }">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator v-slot="{ isMixed }">
+                    <span v-if="isMixed">−</span>
+                    <span v-else>✓</span>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm font-medium">Select all</span>
+              </label>
+            </Checkbox.SelectAll>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="email">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Email notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="push">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Push notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="updates">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Product updates</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="marketing">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-colors"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>✓</Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Marketing emails</span>
+              </label>
+            </Checkbox.Root>
+          </Checkbox.Group>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="privacy">
+          <h2 class="text-lg font-semibold mb-2">Privacy Settings</h2>
+
+          <p class="text-sm text-on-surface-variant mb-4">
+            Who can see your profile?
+          </p>
+
+          <Radio.Group v-model="visibility" class="space-y-3" mandatory>
+            <Radio.Root v-slot="{ isSelected }" value="public">
+              <label
+                class="flex items-center gap-3 p-4 rounded-lg border border-solid cursor-pointer transition-colors"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-colors"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div>
+                  <p class="text-sm font-medium">Public</p>
+                  <p class="text-xs text-on-surface-variant">Anyone can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="friends">
+              <label
+                class="flex items-center gap-3 p-4 rounded-lg border border-solid cursor-pointer transition-colors"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-colors"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div>
+                  <p class="text-sm font-medium">Friends only</p>
+                  <p class="text-xs text-on-surface-variant">Only approved friends can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="private">
+              <label
+                class="flex items-center gap-3 p-4 rounded-lg border border-solid cursor-pointer transition-colors"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-colors"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div>
+                  <p class="text-sm font-medium">Private</p>
+                  <p class="text-xs text-on-surface-variant">Nobody can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+          </Radio.Group>
+        </Tabs.Panel>
+      </Tabs.Root>
+
+      <div class="p-4 border-t border-solid border-divider">
+        <ConfirmDialog
+          confirm-label="Reset"
+          message="This will reset all settings to their default values. This action cannot be undone."
+          title="Reset Settings"
+          @confirm="handleReset"
+        >
+          <template #activator>
+            <button class="px-4 py-2 text-sm rounded border border-solid border-error text-error hover:bg-error hover:text-on-error transition-colors">
+              Reset settings
+            </button>
+          </template>
+        </ConfirmDialog>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-6/ConfirmDialog.vue b/apps/docs/src/skillz/tutorials/v0-basics/step-6/ConfirmDialog.vue
new file mode 100644
index 000000000..c15ec4ff3
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-6/ConfirmDialog.vue
@@ -0,0 +1,50 @@
+<script setup>
+  // Framework
+  import { Dialog } from '@vuetify/v0'
+
+  defineProps({
+    title: { type: String, default: 'Confirm' },
+    message: { type: String, default: 'Are you sure?' },
+    confirmLabel: { type: String, default: 'Confirm' },
+    cancelLabel: { type: String, default: 'Cancel' },
+  })
+
+  const emit = defineEmits(['confirm'])
+</script>
+
+<template>
+  <Dialog.Root>
+    <Dialog.Activator>
+      <slot name="activator" />
+    </Dialog.Activator>
+
+    <Dialog.Content
+      class="rounded-lg border border-solid border-divider bg-surface p-6 max-w-sm w-full shadow-lg"
+    >
+      <Dialog.Title class="text-lg font-semibold text-on-surface mb-2">
+        {{ title }}
+      </Dialog.Title>
+
+      <Dialog.Description class="text-sm text-on-surface-variant mb-6">
+        {{ message }}
+      </Dialog.Description>
+
+      <div class="flex justify-end gap-3">
+        <Dialog.Close>
+          <button class="px-4 py-2 text-sm rounded border border-solid border-divider text-on-surface hover:bg-surface-tint transition-colors">
+            {{ cancelLabel }}
+          </button>
+        </Dialog.Close>
+
+        <Dialog.Close>
+          <button
+            class="px-4 py-2 text-sm rounded bg-error text-on-error transition-colors"
+            @click="emit('confirm')"
+          >
+            {{ confirmLabel }}
+          </button>
+        </Dialog.Close>
+      </div>
+    </Dialog.Content>
+  </Dialog.Root>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-6/README.md b/apps/docs/src/skillz/tutorials/v0-basics/step-6/README.md
new file mode 100644
index 000000000..8d60b574b
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-6/README.md
@@ -0,0 +1,40 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: true
+---
+# Dialog for confirmation
+
+`Dialog` creates accessible modal dialogs using the native `<dialog>` element. It manages focus trapping, escape-to-close, and ARIA labeling.
+
+## Structure
+
+```vue
+<template>
+  <Dialog.Root>
+    <Dialog.Activator>Open</Dialog.Activator>
+
+    <Dialog.Content>
+      <Dialog.Title>Are you sure?</Dialog.Title>
+      <Dialog.Description>This action cannot be undone.</Dialog.Description>
+
+      <Dialog.Close>Cancel</Dialog.Close>
+    </Dialog.Content>
+  </Dialog.Root>
+</template>
+```
+
+- **`Dialog.Root`** — manages open/closed state
+- **`Dialog.Activator`** — button that opens the dialog
+- **`Dialog.Content`** — the modal container (native `<dialog>`)
+- **`Dialog.Title`** — accessible label for the dialog
+- **`Dialog.Description`** — accessible description
+- **`Dialog.Close`** — button that closes the dialog
+
+## Extracting a reusable dialog
+
+Check the `ConfirmDialog.vue` file — it wraps the dialog pattern into a reusable component that accepts a title, message, and emits a `confirm` event.
+
+## Try it
+
+Click "Reset settings" at the bottom of the panel to open the confirmation dialog. Try adding a second "Delete account" dialog that requires the user to type "DELETE" before the confirm button enables.
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-6/SettingsSection.vue b/apps/docs/src/skillz/tutorials/v0-basics/step-6/SettingsSection.vue
new file mode 100644
index 000000000..9e27c3bda
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-6/SettingsSection.vue
@@ -0,0 +1,108 @@
+<script setup>
+  // Framework
+  import { ExpansionPanel } from '@vuetify/v0'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const expanded = ref('appearance')
+</script>
+
+<template>
+  <ExpansionPanel.Root v-model="expanded">
+    <ExpansionPanel.Item value="appearance">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-3 text-sm font-medium text-left transition-colors hover:bg-surface-tint rounded-lg"
+          >
+            <span>Appearance</span>
+            <span
+              class="transition-transform duration-200"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-3 pb-3 space-y-3">
+          <div>
+            <label class="block text-xs text-on-surface-variant mb-1">Theme</label>
+
+            <select class="w-full px-3 py-2 rounded border border-solid border-divider bg-background text-on-surface text-sm">
+              <option>System</option>
+              <option>Light</option>
+              <option>Dark</option>
+            </select>
+          </div>
+
+          <div>
+            <label class="block text-xs text-on-surface-variant mb-1">Font size</label>
+
+            <select class="w-full px-3 py-2 rounded border border-solid border-divider bg-background text-on-surface text-sm">
+              <option>Small</option>
+              <option selected>Medium</option>
+              <option>Large</option>
+            </select>
+          </div>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+
+    <ExpansionPanel.Item value="language">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-3 text-sm font-medium text-left transition-colors hover:bg-surface-tint rounded-lg"
+          >
+            <span>Language</span>
+            <span
+              class="transition-transform duration-200"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-3 pb-3">
+          <label class="block text-xs text-on-surface-variant mb-1">Display language</label>
+
+          <select class="w-full px-3 py-2 rounded border border-solid border-divider bg-background text-on-surface text-sm">
+            <option>English</option>
+            <option>Spanish</option>
+            <option>French</option>
+            <option>Japanese</option>
+          </select>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+
+    <ExpansionPanel.Item value="data">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-3 text-sm font-medium text-left transition-colors hover:bg-surface-tint rounded-lg"
+          >
+            <span>Data & Storage</span>
+            <span
+              class="transition-transform duration-200"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-3 pb-3 space-y-2">
+          <p class="text-xs text-on-surface-variant">Cache size: 24 MB</p>
+
+          <button class="px-3 py-1.5 text-xs rounded bg-error text-on-error">
+            Clear cache
+          </button>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+  </ExpansionPanel.Root>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-7/App.vue b/apps/docs/src/skillz/tutorials/v0-basics/step-7/App.vue
new file mode 100644
index 000000000..29021bfe8
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-7/App.vue
@@ -0,0 +1,329 @@
+<script setup>
+  // Framework
+  import { Tabs, Checkbox, Radio } from '@vuetify/v0'
+
+  // Components
+  import ConfirmDialog from './ConfirmDialog.vue'
+  import SettingsSection from './SettingsSection.vue'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const activeTab = ref('general')
+  const notifications = ref(['email', 'updates'])
+  const visibility = ref('friends')
+
+  function handleReset () {
+    notifications.value = []
+    visibility.value = 'friends'
+    activeTab.value = 'general'
+  }
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-6">
+      Settings
+    </h1>
+
+    <div class="max-w-lg rounded-xl border border-solid border-divider bg-surface shadow-sm">
+      <Tabs.Root v-model="activeTab">
+        <Tabs.List class="flex border-b border-solid border-divider">
+          <Tabs.Item v-slot="{ isSelected }" value="general">
+            <button
+              class="relative px-4 py-3.5 text-sm font-medium transition-colors"
+              :class="isSelected
+                ? 'text-on-surface'
+                : 'text-on-surface-variant hover:text-on-surface'"
+            >
+              General
+              <span
+                v-if="isSelected"
+                class="absolute bottom-0 left-2 right-2 h-0.5 bg-primary rounded-full"
+              />
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="notifications">
+            <button
+              class="relative px-4 py-3.5 text-sm font-medium transition-colors"
+              :class="isSelected
+                ? 'text-on-surface'
+                : 'text-on-surface-variant hover:text-on-surface'"
+            >
+              Notifications
+              <span
+                v-if="isSelected"
+                class="absolute bottom-0 left-2 right-2 h-0.5 bg-primary rounded-full"
+              />
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="privacy">
+            <button
+              class="relative px-4 py-3.5 text-sm font-medium transition-colors"
+              :class="isSelected
+                ? 'text-on-surface'
+                : 'text-on-surface-variant hover:text-on-surface'"
+            >
+              Privacy
+              <span
+                v-if="isSelected"
+                class="absolute bottom-0 left-2 right-2 h-0.5 bg-primary rounded-full"
+              />
+            </button>
+          </Tabs.Item>
+        </Tabs.List>
+
+        <Tabs.Panel class="p-4" value="general">
+          <h2 class="text-lg font-semibold mb-3">General Settings</h2>
+
+          <SettingsSection />
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="notifications">
+          <h2 class="text-lg font-semibold mb-2">Notification Preferences</h2>
+
+          <Checkbox.Group v-model="notifications" class="mt-4 space-y-2">
+            <Checkbox.SelectAll v-slot="{ isSelected }">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator v-slot="{ isMixed }">
+                    <svg v-if="isMixed" class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                      <path d="M2.5 6h7" stroke="currentColor" stroke-linecap="round" stroke-width="2" />
+                    </svg>
+                    <svg v-else class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm font-medium">Select all</span>
+              </label>
+            </Checkbox.SelectAll>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="email">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>
+                    <svg class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Email notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="push">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>
+                    <svg class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Push notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="updates">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>
+                    <svg class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Product updates</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="marketing">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>
+                    <svg class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Marketing emails</span>
+              </label>
+            </Checkbox.Root>
+          </Checkbox.Group>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="privacy">
+          <h2 class="text-lg font-semibold mb-2">Privacy Settings</h2>
+
+          <p class="text-sm text-on-surface-variant mb-4">
+            Who can see your profile?
+          </p>
+
+          <Radio.Group v-model="visibility" class="space-y-2" mandatory>
+            <Radio.Root v-slot="{ isSelected }" value="public">
+              <label
+                class="flex items-center gap-3 p-4 rounded-xl border border-solid cursor-pointer transition-all duration-150"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint shadow-sm'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-all duration-150"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div class="flex-1">
+                  <p class="text-sm font-medium">Public</p>
+                  <p class="text-xs text-on-surface-variant">Anyone can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="friends">
+              <label
+                class="flex items-center gap-3 p-4 rounded-xl border border-solid cursor-pointer transition-all duration-150"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint shadow-sm'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-all duration-150"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div class="flex-1">
+                  <p class="text-sm font-medium">Friends only</p>
+                  <p class="text-xs text-on-surface-variant">Only approved friends can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="private">
+              <label
+                class="flex items-center gap-3 p-4 rounded-xl border border-solid cursor-pointer transition-all duration-150"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint shadow-sm'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-all duration-150"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div class="flex-1">
+                  <p class="text-sm font-medium">Private</p>
+                  <p class="text-xs text-on-surface-variant">Nobody can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+          </Radio.Group>
+        </Tabs.Panel>
+      </Tabs.Root>
+
+      <div class="p-4 border-t border-solid border-divider">
+        <ConfirmDialog
+          confirm-label="Reset"
+          message="This will reset all settings to their default values. This action cannot be undone."
+          title="Reset Settings"
+          @confirm="handleReset"
+        >
+          <template #activator>
+            <button class="px-4 py-2 text-sm font-medium rounded-lg border border-solid border-error text-error hover:bg-error hover:text-on-error transition-colors">
+              Reset settings
+            </button>
+          </template>
+        </ConfirmDialog>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-7/ConfirmDialog.vue b/apps/docs/src/skillz/tutorials/v0-basics/step-7/ConfirmDialog.vue
new file mode 100644
index 000000000..1653ba45a
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-7/ConfirmDialog.vue
@@ -0,0 +1,52 @@
+<script setup>
+  // Framework
+  import { Dialog } from '@vuetify/v0'
+
+  defineProps({
+    title: { type: String, default: 'Confirm' },
+    message: { type: String, default: 'Are you sure?' },
+    confirmLabel: { type: String, default: 'Confirm' },
+    cancelLabel: { type: String, default: 'Cancel' },
+  })
+
+  const emit = defineEmits(['confirm'])
+</script>
+
+<template>
+  <Dialog.Root>
+    <Dialog.Activator>
+      <slot name="activator" />
+    </Dialog.Activator>
+
+    <Dialog.Content
+      class="rounded-xl border border-solid border-divider bg-surface p-0 max-w-sm w-full shadow-xl"
+    >
+      <div class="p-6">
+        <Dialog.Title class="text-lg font-semibold text-on-surface mb-1">
+          {{ title }}
+        </Dialog.Title>
+
+        <Dialog.Description class="text-sm text-on-surface-variant leading-relaxed">
+          {{ message }}
+        </Dialog.Description>
+      </div>
+
+      <div class="flex justify-end gap-3 px-6 py-4 border-t border-solid border-divider bg-surface-tint rounded-b-xl">
+        <Dialog.Close>
+          <button class="px-4 py-2 text-sm font-medium rounded-lg border border-solid border-divider text-on-surface hover:bg-surface transition-colors">
+            {{ cancelLabel }}
+          </button>
+        </Dialog.Close>
+
+        <Dialog.Close>
+          <button
+            class="px-4 py-2 text-sm font-medium rounded-lg bg-error text-on-error hover:opacity-90 transition-opacity"
+            @click="emit('confirm')"
+          >
+            {{ confirmLabel }}
+          </button>
+        </Dialog.Close>
+      </div>
+    </Dialog.Content>
+  </Dialog.Root>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-7/README.md b/apps/docs/src/skillz/tutorials/v0-basics/step-7/README.md
new file mode 100644
index 000000000..4a3b326ac
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-7/README.md
@@ -0,0 +1,43 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: true
+---
+# Slot props for styling
+
+You've already used `isSelected` and `isChecked` in previous steps. Now let's explore how slot props enable **sophisticated conditional styling** across all v0 components.
+
+## Every component exposes state
+
+Each v0 component provides slot props that describe its current state:
+
+| Component | Slot Props |
+|-----------|-----------|
+| `Single.Item` | `isSelected`, `select` |
+| `Tabs.Item` | `isSelected` |
+| `Checkbox.Root` | `isSelected` |
+| `Checkbox.Indicator` | `isMixed` |
+| `Radio.Root` | `isSelected` |
+| `ExpansionPanel.Activator` | `isSelected` |
+
+## Combining slot props with transitions
+
+Since you control all the markup, you can add CSS transitions, animations, and transforms directly:
+
+```vue
+<template>
+  <ExpansionPanel.Activator #default="{ isSelected }">
+    <button class="flex items-center gap-2">
+      <span
+        class="transition-transform duration-200"
+        :class="isSelected ? 'rotate-180' : ''"
+      >▾</span>
+      Section title
+    </button>
+  </ExpansionPanel.Activator>
+</template>
+```
+
+## Try it
+
+This step refines the styling across every component. Notice the smoother transitions on tabs, the refined checkbox and radio indicators, and the polished expansion panel animations. Try styling the `isMixed` indicator on `Checkbox.SelectAll` as a dash icon instead of text.
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-7/SettingsSection.vue b/apps/docs/src/skillz/tutorials/v0-basics/step-7/SettingsSection.vue
new file mode 100644
index 000000000..1c8151963
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-7/SettingsSection.vue
@@ -0,0 +1,132 @@
+<script setup>
+  // Framework
+  import { ExpansionPanel } from '@vuetify/v0'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const expanded = ref('appearance')
+</script>
+
+<template>
+  <ExpansionPanel.Root v-model="expanded" class="divide-y divide-divider">
+    <ExpansionPanel.Item value="appearance">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-4 text-sm font-medium text-left transition-colors"
+            :class="isSelected ? 'text-on-surface' : 'text-on-surface-variant hover:text-on-surface'"
+          >
+            <div class="flex items-center gap-3">
+              <span class="w-8 h-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center text-xs">
+                Th
+              </span>
+              <span>Appearance</span>
+            </div>
+
+            <span
+              class="transition-transform duration-300 ease-out text-on-surface-variant"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-4 pb-4 space-y-3">
+          <div>
+            <label class="block text-xs font-medium text-on-surface-variant mb-1.5">Theme</label>
+
+            <select class="w-full px-3 py-2 rounded-lg border border-solid border-divider bg-background text-on-surface text-sm focus:border-primary focus:outline-none transition-colors">
+              <option>System</option>
+              <option>Light</option>
+              <option>Dark</option>
+            </select>
+          </div>
+
+          <div>
+            <label class="block text-xs font-medium text-on-surface-variant mb-1.5">Font size</label>
+
+            <select class="w-full px-3 py-2 rounded-lg border border-solid border-divider bg-background text-on-surface text-sm focus:border-primary focus:outline-none transition-colors">
+              <option>Small</option>
+              <option selected>Medium</option>
+              <option>Large</option>
+            </select>
+          </div>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+
+    <ExpansionPanel.Item value="language">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-4 text-sm font-medium text-left transition-colors"
+            :class="isSelected ? 'text-on-surface' : 'text-on-surface-variant hover:text-on-surface'"
+          >
+            <div class="flex items-center gap-3">
+              <span class="w-8 h-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center text-xs">
+                La
+              </span>
+              <span>Language</span>
+            </div>
+
+            <span
+              class="transition-transform duration-300 ease-out text-on-surface-variant"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-4 pb-4">
+          <label class="block text-xs font-medium text-on-surface-variant mb-1.5">Display language</label>
+
+          <select class="w-full px-3 py-2 rounded-lg border border-solid border-divider bg-background text-on-surface text-sm focus:border-primary focus:outline-none transition-colors">
+            <option>English</option>
+            <option>Spanish</option>
+            <option>French</option>
+            <option>Japanese</option>
+          </select>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+
+    <ExpansionPanel.Item value="data">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-4 text-sm font-medium text-left transition-colors"
+            :class="isSelected ? 'text-on-surface' : 'text-on-surface-variant hover:text-on-surface'"
+          >
+            <div class="flex items-center gap-3">
+              <span class="w-8 h-8 rounded-lg bg-error/10 text-error flex items-center justify-center text-xs">
+                Da
+              </span>
+              <span>Data & Storage</span>
+            </div>
+
+            <span
+              class="transition-transform duration-300 ease-out text-on-surface-variant"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-4 pb-4 space-y-3">
+          <div class="flex items-center justify-between">
+            <span class="text-sm text-on-surface-variant">Cache size</span>
+            <span class="text-sm font-medium">24 MB</span>
+          </div>
+
+          <button class="px-3 py-1.5 text-xs font-medium rounded-lg bg-error text-on-error hover:opacity-90 transition-opacity">
+            Clear cache
+          </button>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+  </ExpansionPanel.Root>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-8/App.vue b/apps/docs/src/skillz/tutorials/v0-basics/step-8/App.vue
new file mode 100644
index 000000000..700cf4a1a
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-8/App.vue
@@ -0,0 +1,370 @@
+<script setup>
+  // Framework
+  import { Tabs, Checkbox, Radio, createStorage } from '@vuetify/v0'
+
+  // Components
+  import ConfirmDialog from './ConfirmDialog.vue'
+  import SettingsSection from './SettingsSection.vue'
+
+  // Utilities
+  import { ref, watch } from 'vue'
+
+  const storage = createStorage({ prefix: 'settings:' })
+
+  const activeTab = ref('general')
+  const notifications = storage.get('notifications', ['email', 'updates'])
+  const visibility = storage.get('visibility', 'friends')
+  const saved = ref(false)
+
+  function handleReset () {
+    notifications.value = []
+    visibility.value = 'friends'
+    activeTab.value = 'general'
+    showToast('Settings reset to defaults')
+  }
+
+  function showToast (_message) {
+    saved.value = true
+    setTimeout(() => {
+      saved.value = false
+    }, 2000)
+  }
+
+  watch(notifications, () => showToast('Settings saved'), { deep: true })
+  watch(visibility, () => showToast('Settings saved'))
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="text-2xl font-bold">
+        Settings
+      </h1>
+
+      <Transition name="fade">
+        <span
+          v-if="saved"
+          class="text-xs font-medium text-success px-3 py-1.5 rounded-full bg-success/10"
+        >
+          Saved
+        </span>
+      </Transition>
+    </div>
+
+    <div class="max-w-lg rounded-xl border border-solid border-divider bg-surface shadow-sm">
+      <Tabs.Root v-model="activeTab">
+        <Tabs.List class="flex border-b border-solid border-divider">
+          <Tabs.Item v-slot="{ isSelected }" value="general">
+            <button
+              class="relative px-4 py-3.5 text-sm font-medium transition-colors"
+              :class="isSelected
+                ? 'text-on-surface'
+                : 'text-on-surface-variant hover:text-on-surface'"
+            >
+              General
+              <span
+                v-if="isSelected"
+                class="absolute bottom-0 left-2 right-2 h-0.5 bg-primary rounded-full"
+              />
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="notifications">
+            <button
+              class="relative px-4 py-3.5 text-sm font-medium transition-colors"
+              :class="isSelected
+                ? 'text-on-surface'
+                : 'text-on-surface-variant hover:text-on-surface'"
+            >
+              Notifications
+              <span
+                v-if="isSelected"
+                class="absolute bottom-0 left-2 right-2 h-0.5 bg-primary rounded-full"
+              />
+            </button>
+          </Tabs.Item>
+
+          <Tabs.Item v-slot="{ isSelected }" value="privacy">
+            <button
+              class="relative px-4 py-3.5 text-sm font-medium transition-colors"
+              :class="isSelected
+                ? 'text-on-surface'
+                : 'text-on-surface-variant hover:text-on-surface'"
+            >
+              Privacy
+              <span
+                v-if="isSelected"
+                class="absolute bottom-0 left-2 right-2 h-0.5 bg-primary rounded-full"
+              />
+            </button>
+          </Tabs.Item>
+        </Tabs.List>
+
+        <Tabs.Panel class="p-4" value="general">
+          <h2 class="text-lg font-semibold mb-3">General Settings</h2>
+
+          <SettingsSection />
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="notifications">
+          <h2 class="text-lg font-semibold mb-2">Notification Preferences</h2>
+
+          <Checkbox.Group v-model="notifications" class="mt-4 space-y-2">
+            <Checkbox.SelectAll v-slot="{ isSelected }">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator v-slot="{ isMixed }">
+                    <svg v-if="isMixed" class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                      <path d="M2.5 6h7" stroke="currentColor" stroke-linecap="round" stroke-width="2" />
+                    </svg>
+                    <svg v-else class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm font-medium">Select all</span>
+              </label>
+            </Checkbox.SelectAll>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="email">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>
+                    <svg class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Email notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="push">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>
+                    <svg class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Push notifications</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="updates">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>
+                    <svg class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Product updates</span>
+              </label>
+            </Checkbox.Root>
+
+            <Checkbox.Root v-slot="{ isSelected }" value="marketing">
+              <label
+                class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-150"
+                :class="isSelected ? 'bg-surface-tint' : 'hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded border border-solid flex items-center justify-center text-xs transition-all duration-150"
+                  :class="isSelected
+                    ? 'bg-primary border-primary text-on-primary scale-105'
+                    : 'border-divider bg-surface'"
+                >
+                  <Checkbox.Indicator>
+                    <svg class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                      <path
+                        d="M2 6l3 3 5-6"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </Checkbox.Indicator>
+                </span>
+
+                <span class="text-sm">Marketing emails</span>
+              </label>
+            </Checkbox.Root>
+          </Checkbox.Group>
+        </Tabs.Panel>
+
+        <Tabs.Panel class="p-4" value="privacy">
+          <h2 class="text-lg font-semibold mb-2">Privacy Settings</h2>
+
+          <p class="text-sm text-on-surface-variant mb-4">
+            Who can see your profile?
+          </p>
+
+          <Radio.Group v-model="visibility" class="space-y-2" mandatory>
+            <Radio.Root v-slot="{ isSelected }" value="public">
+              <label
+                class="flex items-center gap-3 p-4 rounded-xl border border-solid cursor-pointer transition-all duration-150"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint shadow-sm'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-all duration-150"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div class="flex-1">
+                  <p class="text-sm font-medium">Public</p>
+                  <p class="text-xs text-on-surface-variant">Anyone can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="friends">
+              <label
+                class="flex items-center gap-3 p-4 rounded-xl border border-solid cursor-pointer transition-all duration-150"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint shadow-sm'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-all duration-150"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div class="flex-1">
+                  <p class="text-sm font-medium">Friends only</p>
+                  <p class="text-xs text-on-surface-variant">Only approved friends can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+
+            <Radio.Root v-slot="{ isSelected }" value="private">
+              <label
+                class="flex items-center gap-3 p-4 rounded-xl border border-solid cursor-pointer transition-all duration-150"
+                :class="isSelected
+                  ? 'border-primary bg-surface-tint shadow-sm'
+                  : 'border-divider hover:bg-surface-tint'"
+              >
+                <span
+                  class="w-5 h-5 rounded-full border-2 border-solid flex items-center justify-center transition-all duration-150"
+                  :class="isSelected ? 'border-primary' : 'border-divider'"
+                >
+                  <Radio.Indicator>
+                    <span class="w-2.5 h-2.5 rounded-full bg-primary block" />
+                  </Radio.Indicator>
+                </span>
+
+                <div class="flex-1">
+                  <p class="text-sm font-medium">Private</p>
+                  <p class="text-xs text-on-surface-variant">Nobody can see your profile</p>
+                </div>
+              </label>
+            </Radio.Root>
+          </Radio.Group>
+        </Tabs.Panel>
+      </Tabs.Root>
+
+      <div class="p-4 border-t border-solid border-divider flex items-center justify-between">
+        <ConfirmDialog
+          confirm-label="Reset"
+          message="This will reset all settings to their default values. This action cannot be undone."
+          title="Reset Settings"
+          @confirm="handleReset"
+        >
+          <template #activator>
+            <button class="px-4 py-2 text-sm font-medium rounded-lg border border-solid border-error text-error hover:bg-error hover:text-on-error transition-colors">
+              Reset settings
+            </button>
+          </template>
+        </ConfirmDialog>
+
+        <p class="text-xs text-on-surface-variant">
+          Settings auto-save to localStorage
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.3s ease;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+</style>
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-8/ConfirmDialog.vue b/apps/docs/src/skillz/tutorials/v0-basics/step-8/ConfirmDialog.vue
new file mode 100644
index 000000000..1653ba45a
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-8/ConfirmDialog.vue
@@ -0,0 +1,52 @@
+<script setup>
+  // Framework
+  import { Dialog } from '@vuetify/v0'
+
+  defineProps({
+    title: { type: String, default: 'Confirm' },
+    message: { type: String, default: 'Are you sure?' },
+    confirmLabel: { type: String, default: 'Confirm' },
+    cancelLabel: { type: String, default: 'Cancel' },
+  })
+
+  const emit = defineEmits(['confirm'])
+</script>
+
+<template>
+  <Dialog.Root>
+    <Dialog.Activator>
+      <slot name="activator" />
+    </Dialog.Activator>
+
+    <Dialog.Content
+      class="rounded-xl border border-solid border-divider bg-surface p-0 max-w-sm w-full shadow-xl"
+    >
+      <div class="p-6">
+        <Dialog.Title class="text-lg font-semibold text-on-surface mb-1">
+          {{ title }}
+        </Dialog.Title>
+
+        <Dialog.Description class="text-sm text-on-surface-variant leading-relaxed">
+          {{ message }}
+        </Dialog.Description>
+      </div>
+
+      <div class="flex justify-end gap-3 px-6 py-4 border-t border-solid border-divider bg-surface-tint rounded-b-xl">
+        <Dialog.Close>
+          <button class="px-4 py-2 text-sm font-medium rounded-lg border border-solid border-divider text-on-surface hover:bg-surface transition-colors">
+            {{ cancelLabel }}
+          </button>
+        </Dialog.Close>
+
+        <Dialog.Close>
+          <button
+            class="px-4 py-2 text-sm font-medium rounded-lg bg-error text-on-error hover:opacity-90 transition-opacity"
+            @click="emit('confirm')"
+          >
+            {{ confirmLabel }}
+          </button>
+        </Dialog.Close>
+      </div>
+    </Dialog.Content>
+  </Dialog.Root>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-8/README.md b/apps/docs/src/skillz/tutorials/v0-basics/step-8/README.md
new file mode 100644
index 000000000..de1283747
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-8/README.md
@@ -0,0 +1,37 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: false
+---
+# The complete panel
+
+You've learned six v0 components: `Single`, `Tabs`, `Checkbox`, `Radio`, `ExpansionPanel`, and `Dialog`. Now let's bring them all together into a polished settings panel with persistent storage.
+
+## Persisting state with createStorage
+
+v0 provides `createStorage` for reactive localStorage that syncs automatically:
+
+```vue
+<script setup>
+  import { createStorage } from '@vuetify/v0'
+
+  const storage = createStorage()
+  const notifications = storage.get('notifications', ['email'])
+</script>
+```
+
+The returned ref syncs with localStorage on every change. Refresh the page and your settings persist.
+
+## Composing components
+
+The power of headless components shines when you compose them together. Each component handles its own behavior and accessibility — you just arrange them into the layout you want. No fighting with opinionated styling or override hacks.
+
+## Try it
+
+Try changing some settings and refreshing the preview — your choices persist through `createStorage`. You could also add a theme radio using `useTheme` from v0 to toggle between light and dark mode.
+
+## What's next
+
+You've built a fully interactive, accessible settings panel using nothing but headless components and utility classes. Every component handles keyboard navigation, ARIA attributes, and state management. You handled every pixel of the styling.
+
+> [!TIP] Every pixel is yours. Every behavior is v0's. You've just built a complete, accessible settings panel using headless components that adapt to any design system.
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-8/SettingsSection.vue b/apps/docs/src/skillz/tutorials/v0-basics/step-8/SettingsSection.vue
new file mode 100644
index 000000000..1c8151963
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-8/SettingsSection.vue
@@ -0,0 +1,132 @@
+<script setup>
+  // Framework
+  import { ExpansionPanel } from '@vuetify/v0'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const expanded = ref('appearance')
+</script>
+
+<template>
+  <ExpansionPanel.Root v-model="expanded" class="divide-y divide-divider">
+    <ExpansionPanel.Item value="appearance">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-4 text-sm font-medium text-left transition-colors"
+            :class="isSelected ? 'text-on-surface' : 'text-on-surface-variant hover:text-on-surface'"
+          >
+            <div class="flex items-center gap-3">
+              <span class="w-8 h-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center text-xs">
+                Th
+              </span>
+              <span>Appearance</span>
+            </div>
+
+            <span
+              class="transition-transform duration-300 ease-out text-on-surface-variant"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-4 pb-4 space-y-3">
+          <div>
+            <label class="block text-xs font-medium text-on-surface-variant mb-1.5">Theme</label>
+
+            <select class="w-full px-3 py-2 rounded-lg border border-solid border-divider bg-background text-on-surface text-sm focus:border-primary focus:outline-none transition-colors">
+              <option>System</option>
+              <option>Light</option>
+              <option>Dark</option>
+            </select>
+          </div>
+
+          <div>
+            <label class="block text-xs font-medium text-on-surface-variant mb-1.5">Font size</label>
+
+            <select class="w-full px-3 py-2 rounded-lg border border-solid border-divider bg-background text-on-surface text-sm focus:border-primary focus:outline-none transition-colors">
+              <option>Small</option>
+              <option selected>Medium</option>
+              <option>Large</option>
+            </select>
+          </div>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+
+    <ExpansionPanel.Item value="language">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-4 text-sm font-medium text-left transition-colors"
+            :class="isSelected ? 'text-on-surface' : 'text-on-surface-variant hover:text-on-surface'"
+          >
+            <div class="flex items-center gap-3">
+              <span class="w-8 h-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center text-xs">
+                La
+              </span>
+              <span>Language</span>
+            </div>
+
+            <span
+              class="transition-transform duration-300 ease-out text-on-surface-variant"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-4 pb-4">
+          <label class="block text-xs font-medium text-on-surface-variant mb-1.5">Display language</label>
+
+          <select class="w-full px-3 py-2 rounded-lg border border-solid border-divider bg-background text-on-surface text-sm focus:border-primary focus:outline-none transition-colors">
+            <option>English</option>
+            <option>Spanish</option>
+            <option>French</option>
+            <option>Japanese</option>
+          </select>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+
+    <ExpansionPanel.Item value="data">
+      <ExpansionPanel.Header>
+        <ExpansionPanel.Activator v-slot="{ isSelected }">
+          <button
+            class="w-full flex items-center justify-between p-4 text-sm font-medium text-left transition-colors"
+            :class="isSelected ? 'text-on-surface' : 'text-on-surface-variant hover:text-on-surface'"
+          >
+            <div class="flex items-center gap-3">
+              <span class="w-8 h-8 rounded-lg bg-error/10 text-error flex items-center justify-center text-xs">
+                Da
+              </span>
+              <span>Data & Storage</span>
+            </div>
+
+            <span
+              class="transition-transform duration-300 ease-out text-on-surface-variant"
+              :class="isSelected ? 'rotate-180' : ''"
+            >▾</span>
+          </button>
+        </ExpansionPanel.Activator>
+      </ExpansionPanel.Header>
+
+      <ExpansionPanel.Content>
+        <div class="px-4 pb-4 space-y-3">
+          <div class="flex items-center justify-between">
+            <span class="text-sm text-on-surface-variant">Cache size</span>
+            <span class="text-sm font-medium">24 MB</span>
+          </div>
+
+          <button class="px-3 py-1.5 text-xs font-medium rounded-lg bg-error text-on-error hover:opacity-90 transition-opacity">
+            Clear cache
+          </button>
+        </div>
+      </ExpansionPanel.Content>
+    </ExpansionPanel.Item>
+  </ExpansionPanel.Root>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/meta.json b/apps/docs/src/skillz/tutorials/vue-advanced/meta.json
new file mode 100644
index 000000000..60d6d915f
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/meta.json
@@ -0,0 +1,10 @@
+{
+  "title": "Vue Advanced",
+  "description": "Build composables from scratch — shallowRef, effectScope, generics, defineModel, and scoped slots demystified",
+  "level": 3,
+  "track": "essentials",
+  "categories": [],
+  "order": 30,
+  "minutes": 15,
+  "prerequisites": ["vue-intermediate"]
+}
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-1/App.vue b/apps/docs/src/skillz/tutorials/vue-advanced/step-1/App.vue
new file mode 100644
index 000000000..35c49d3ad
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-1/App.vue
@@ -0,0 +1,79 @@
+<script setup>
+  // Composables
+  import { useCounter } from './useCounter'
+
+  const counterA = useCounter()
+  const counterB = useCounter()
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-6">
+      Your First Composable
+    </h1>
+
+    <div class="grid grid-cols-2 gap-6">
+      <div class="p-4 rounded-lg border border-solid border-divider bg-surface">
+        <h2 class="text-lg font-bold text-on-surface mb-3">Counter A</h2>
+
+        <p class="text-3xl font-bold text-primary mb-4">
+          {{ counterA.count.value }}
+        </p>
+
+        <div class="flex gap-2">
+          <button
+            class="px-3 py-1.5 rounded bg-primary text-on-primary font-medium"
+            @click="counterA.increment"
+          >
+            +
+          </button>
+
+          <button
+            class="px-3 py-1.5 rounded bg-primary text-on-primary font-medium"
+            @click="counterA.decrement"
+          >
+            -
+          </button>
+
+          <button
+            class="px-3 py-1.5 rounded border border-solid border-divider text-on-surface-variant font-medium"
+            @click="counterA.reset"
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+
+      <div class="p-4 rounded-lg border border-solid border-divider bg-surface">
+        <h2 class="text-lg font-bold text-on-surface mb-3">Counter B</h2>
+
+        <p class="text-3xl font-bold text-primary mb-4">
+          {{ counterB.count.value }}
+        </p>
+
+        <div class="flex gap-2">
+          <button
+            class="px-3 py-1.5 rounded bg-primary text-on-primary font-medium"
+            @click="counterB.increment"
+          >
+            +
+          </button>
+
+          <button
+            class="px-3 py-1.5 rounded bg-primary text-on-primary font-medium"
+            @click="counterB.decrement"
+          >
+            -
+          </button>
+
+          <button
+            class="px-3 py-1.5 rounded border border-solid border-divider text-on-surface-variant font-medium"
+            @click="counterB.reset"
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-1/README.md b/apps/docs/src/skillz/tutorials/vue-advanced/step-1/README.md
new file mode 100644
index 000000000..d8c9f1bb4
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-1/README.md
@@ -0,0 +1,41 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: true
+---
+# Your first composable
+
+A **composable** is a function that uses Vue's reactivity to encapsulate and reuse stateful logic. By convention, composable names start with `use`.
+
+## The use* pattern
+
+```ts
+import { ref } from 'vue'
+
+export function useCounter () {
+  const count = ref(0)
+
+  function increment () { count.value++ }
+  function decrement () { count.value-- }
+  function reset () { count.value = 0 }
+
+  return { count, increment, decrement, reset }
+}
+```
+
+Each call creates **independent state** — two components using `useCounter()` each get their own `count`. This is the foundation of composable architecture.
+
+## Try it
+
+The editor shows two independent counter instances side-by-side. Try adding a `max` option so the counter stops incrementing at a limit:
+
+```ts
+export function useCounter (max = Infinity) {
+  // ...
+  function increment () {
+    if (count.value < max) count.value++
+  }
+}
+```
+
+> [!TIP] Every v0 composable follows this exact pattern — a function that returns reactive state and methods. `createSelection`, `createSingle`, `createStep` all work just like your `useCounter`.
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-1/useCounter.ts b/apps/docs/src/skillz/tutorials/vue-advanced/step-1/useCounter.ts
new file mode 100644
index 000000000..d5c8504e8
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-1/useCounter.ts
@@ -0,0 +1,20 @@
+// Utilities
+import { ref } from 'vue'
+
+export function useCounter () {
+  const count = ref(0)
+
+  function increment () {
+    count.value++
+  }
+
+  function decrement () {
+    count.value--
+  }
+
+  function reset () {
+    count.value = 0
+  }
+
+  return { count, increment, decrement, reset }
+}
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-2/App.vue b/apps/docs/src/skillz/tutorials/vue-advanced/step-2/App.vue
new file mode 100644
index 000000000..95e73e846
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-2/App.vue
@@ -0,0 +1,77 @@
+<script setup>
+  // Composables
+  import { useList } from './useList'
+
+  // Utilities
+  import { ref, onUpdated } from 'vue'
+
+  const input = ref('')
+  const renderCount = ref(0)
+  const { items, add, remove, clear } = useList(['Apple', 'Banana', 'Cherry'])
+
+  onUpdated(() => {
+    renderCount.value++
+  })
+
+  function addItem () {
+    if (!input.value.trim()) return
+    add(input.value.trim())
+    input.value = ''
+  }
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-6">
+      shallowRef vs ref
+    </h1>
+
+    <div class="mb-4 p-3 rounded-lg bg-surface-tint text-sm">
+      Render count: <strong class="text-primary">{{ renderCount }}</strong>
+    </div>
+
+    <div class="flex gap-2 mb-6">
+      <input
+        v-model="input"
+        class="flex-1 px-3 py-2 rounded border border-solid border-divider bg-surface text-on-surface"
+        placeholder="Add an item..."
+        @keyup.enter="addItem"
+      >
+
+      <button
+        class="px-4 py-2 rounded bg-primary text-on-primary font-medium"
+        @click="addItem"
+      >
+        Add
+      </button>
+
+      <button
+        class="px-4 py-2 rounded border border-solid border-divider text-on-surface-variant font-medium"
+        @click="clear"
+      >
+        Clear
+      </button>
+    </div>
+
+    <ul class="space-y-2">
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+        class="flex items-center justify-between p-3 rounded-lg bg-surface"
+      >
+        <span class="text-on-surface">{{ item }}</span>
+
+        <button
+          class="text-sm text-error px-2 py-1 rounded hover:bg-surface-tint"
+          @click="remove(index)"
+        >
+          Remove
+        </button>
+      </li>
+    </ul>
+
+    <p v-if="items.length === 0" class="text-on-surface-variant text-sm mt-4">
+      List is empty. Add some items above.
+    </p>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-2/README.md b/apps/docs/src/skillz/tutorials/vue-advanced/step-2/README.md
new file mode 100644
index 000000000..44cf2faeb
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-2/README.md
@@ -0,0 +1,41 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: true
+---
+# shallowRef vs ref
+
+`ref` tracks changes **deeply** — if you have a ref holding an array, Vue watches every element inside it. `shallowRef` only tracks when the `.value` itself is **replaced**, not when its contents mutate.
+
+## Why shallowRef?
+
+For large collections, deep tracking is expensive. With `shallowRef`, you signal changes by replacing the entire value:
+
+```ts
+import { shallowRef } from 'vue'
+
+const items = shallowRef([])
+
+// This does NOT trigger reactivity:
+items.value.push('new')
+
+// This DOES — replace the whole array:
+items.value = [...items.value, 'new']
+```
+
+## triggerRef
+
+If you mutate a `shallowRef` in place, you can manually notify Vue:
+
+```ts
+import { shallowRef, triggerRef } from 'vue'
+
+items.value.push('new')
+triggerRef(items)
+```
+
+## Try it
+
+The editor shows a `useList` composable built with `shallowRef`. A render counter shows how many times the component re-renders. Try swapping `shallowRef` for `ref` in `useList.ts` and observe the difference.
+
+> [!TIP] v0 uses `shallowRef` by default for performance. When you see v0 composable source code, you'll find shallowRef everywhere instead of ref.
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-2/useList.ts b/apps/docs/src/skillz/tutorials/vue-advanced/step-2/useList.ts
new file mode 100644
index 000000000..bc0af6d55
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-2/useList.ts
@@ -0,0 +1,20 @@
+// Utilities
+import { shallowRef, triggerRef } from 'vue'
+
+export function useList<T> (initial: T[] = []) {
+  const items = shallowRef([...initial])
+
+  function add (item: T) {
+    items.value = [...items.value, item]
+  }
+
+  function remove (index: number) {
+    items.value = items.value.filter((_, i) => i !== index)
+  }
+
+  function clear () {
+    items.value = []
+  }
+
+  return { items, add, remove, clear, triggerRef: () => triggerRef(items) }
+}
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-3/App.vue b/apps/docs/src/skillz/tutorials/vue-advanced/step-3/App.vue
new file mode 100644
index 000000000..938552d56
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-3/App.vue
@@ -0,0 +1,76 @@
+<script setup>
+  // Composables
+  import { usePolling } from './usePolling'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const ticks = ref(0)
+  const log = ref([])
+
+  function poll () {
+    ticks.value++
+    const time = new Date().toLocaleTimeString()
+    log.value = [...log.value.slice(-4), `[${time}] Tick #${ticks.value}`]
+  }
+
+  const { isRunning, start, stop, restart } = usePolling(poll, 1000)
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-6">
+      effectScope
+    </h1>
+
+    <div class="mb-4 flex items-center gap-3">
+      <span
+        class="inline-block w-3 h-3 rounded-full"
+        :class="isRunning ? 'bg-success' : 'bg-error'"
+      />
+
+      <span class="text-on-surface-variant">
+        {{ isRunning ? 'Polling active' : 'Polling stopped' }}
+      </span>
+
+      <span class="text-sm text-on-surface-variant">
+        ({{ ticks }} ticks)
+      </span>
+    </div>
+
+    <div class="flex gap-2 mb-6">
+      <button
+        class="px-4 py-2 rounded bg-primary text-on-primary font-medium"
+        :disabled="isRunning"
+        @click="start"
+      >
+        Start
+      </button>
+
+      <button
+        class="px-4 py-2 rounded bg-error text-on-error font-medium"
+        :disabled="!isRunning"
+        @click="stop"
+      >
+        Stop
+      </button>
+
+      <button
+        class="px-4 py-2 rounded border border-solid border-divider text-on-surface-variant font-medium"
+        @click="restart"
+      >
+        Restart
+      </button>
+    </div>
+
+    <div class="p-4 rounded-lg bg-surface font-mono text-sm space-y-1">
+      <p v-if="log.length === 0" class="text-on-surface-variant">
+        Click Start to begin polling...
+      </p>
+
+      <p v-for="(entry, i) in log" :key="i" class="text-on-surface">
+        {{ entry }}
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-3/README.md b/apps/docs/src/skillz/tutorials/vue-advanced/step-3/README.md
new file mode 100644
index 000000000..c5647d865
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-3/README.md
@@ -0,0 +1,42 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: true
+---
+# effectScope
+
+`effectScope()` groups reactive effects (watchers, computed, etc.) so you can **dispose them all at once**. This is essential for composables that set up intervals, listeners, or subscriptions.
+
+## The problem
+
+Without `effectScope`, you'd need to manually track and clean up every watcher and interval:
+
+```ts
+const interval = setInterval(poll, 1000)
+const stopWatch = watch(source, callback)
+
+// Later...
+clearInterval(interval)
+stopWatch()
+```
+
+## The solution
+
+```ts
+import { effectScope } from 'vue'
+
+const scope = effectScope()
+
+scope.run(() => {
+  // Everything created here is grouped
+  watch(source, callback)
+  setInterval(poll, 1000)
+})
+
+// One call disposes everything
+scope.stop()
+```
+
+## Try it
+
+The editor shows a `usePolling` composable that uses `effectScope` to manage a polling interval. Click **Start** to begin, **Stop** to dispose the scope, and **Restart** to create a fresh one. Try adding `pause()` and `resume()` functions that stop and restart the interval without disposing the scope.
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-3/usePolling.ts b/apps/docs/src/skillz/tutorials/vue-advanced/step-3/usePolling.ts
new file mode 100644
index 000000000..9dc459133
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-3/usePolling.ts
@@ -0,0 +1,46 @@
+// Utilities
+import { ref, effectScope } from 'vue'
+
+// Types
+import type { EffectScope } from 'vue'
+
+export function usePolling (fn: () => void, interval = 1000) {
+  const isRunning = ref(false)
+  let scope: EffectScope | null = null
+  let timer: ReturnType<typeof setInterval> | null = null
+
+  function start () {
+    if (isRunning.value) return
+
+    scope = effectScope()
+
+    scope.run(() => {
+      timer = setInterval(fn, interval)
+    })
+
+    isRunning.value = true
+  }
+
+  function stop () {
+    if (!isRunning.value) return
+
+    if (timer) {
+      clearInterval(timer)
+      timer = null
+    }
+
+    if (scope) {
+      scope.stop()
+      scope = null
+    }
+
+    isRunning.value = false
+  }
+
+  function restart () {
+    stop()
+    start()
+  }
+
+  return { isRunning, start, stop, restart }
+}
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-4/App.vue b/apps/docs/src/skillz/tutorials/vue-advanced/step-4/App.vue
new file mode 100644
index 000000000..e2f19f300
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-4/App.vue
@@ -0,0 +1,54 @@
+<script setup>
+  // Components
+  import SelectableList from './SelectableList.vue'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const users = [
+    { id: 1, name: 'Alice', role: 'Engineer' },
+    { id: 2, name: 'Bob', role: 'Designer' },
+    { id: 3, name: 'Carol', role: 'Manager' },
+    { id: 4, name: 'Dan', role: 'Engineer' },
+  ]
+
+  const selectedUser = ref()
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-6">
+      Generics in Components
+    </h1>
+
+    <div class="grid grid-cols-2 gap-6">
+      <div>
+        <h2 class="text-lg font-bold text-on-surface mb-3">Select a user</h2>
+
+        <SelectableList
+          v-model="selectedUser"
+          :items="users"
+          :label="user => user.name"
+        />
+      </div>
+
+      <div>
+        <h2 class="text-lg font-bold text-on-surface mb-3">Details</h2>
+
+        <div v-if="selectedUser" class="p-4 rounded-lg bg-surface-tint">
+          <p class="text-on-background font-medium">
+            {{ selectedUser.name }}
+          </p>
+
+          <p class="text-sm text-on-surface-variant">
+            {{ selectedUser.role }}
+          </p>
+        </div>
+
+        <p v-else class="text-on-surface-variant text-sm">
+          Click a user to see their details.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-4/README.md b/apps/docs/src/skillz/tutorials/vue-advanced/step-4/README.md
new file mode 100644
index 000000000..fc60c670b
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-4/README.md
@@ -0,0 +1,29 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: false
+---
+# Generics in components
+
+Vue supports **TypeScript generics** in `<script setup>` via the `generic` attribute. This lets you build components that preserve type safety for any data shape.
+
+## Generic script tag
+
+```vue
+<script lang="ts" setup generic="T">
+  defineProps<{
+    items: T[]
+    selected?: T
+  }>()
+</script>
+```
+
+When a parent passes `items` as `User[]`, TypeScript infers `T = User` — the `selected` prop is automatically typed as `User | undefined`.
+
+## Why generics?
+
+Without generics, you'd type items as `unknown[]` and lose autocomplete. Generics let the component **adapt to the caller's data type** while keeping full type safety.
+
+## Try it
+
+The editor shows a generic `SelectableList` component. It receives typed items and emits a typed `select` event. Try using it with `{ id: number, name: string }` objects — notice how TypeScript infers the types correctly.
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-4/SelectableList.vue b/apps/docs/src/skillz/tutorials/vue-advanced/step-4/SelectableList.vue
new file mode 100644
index 000000000..e21e069b9
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-4/SelectableList.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup generic="T extends { id: number | string }">
+  defineProps<{
+    items: T[]
+    modelValue?: T
+    label?: (item: T) => string
+  }>()
+
+  const emit = defineEmits<{
+    'update:modelValue': [value: T]
+  }>()
+
+  function select (item: T) {
+    emit('update:modelValue', item)
+  }
+</script>
+
+<template>
+  <ul class="space-y-1">
+    <li v-for="item in items" :key="item.id">
+      <button
+        class="w-full text-left px-3 py-2 rounded transition-colors"
+        :class="modelValue?.id === item.id
+          ? 'bg-primary text-on-primary'
+          : 'bg-surface text-on-surface hover:bg-surface-tint'"
+        @click="select(item)"
+      >
+        {{ label ? label(item) : item.id }}
+      </button>
+    </li>
+  </ul>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-5/App.vue b/apps/docs/src/skillz/tutorials/vue-advanced/step-5/App.vue
new file mode 100644
index 000000000..e757a2e79
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-5/App.vue
@@ -0,0 +1,72 @@
+<script setup>
+  // Components
+  import SearchInput from './SearchInput.vue'
+  import SelectableList from './SelectableList.vue'
+
+  // Utilities
+  import { ref, computed } from 'vue'
+
+  const users = [
+    { id: 1, name: 'Alice', role: 'Engineer' },
+    { id: 2, name: 'Bob', role: 'Designer' },
+    { id: 3, name: 'Carol', role: 'Manager' },
+    { id: 4, name: 'Dan', role: 'Engineer' },
+    { id: 5, name: 'Eve', role: 'Designer' },
+  ]
+
+  const query = ref('')
+  const selectedUser = ref()
+
+  const filtered = computed(() => {
+    if (!query.value) return users
+    const q = query.value.toLowerCase()
+    return users.filter(u => u.name.toLowerCase().includes(q) || u.role.toLowerCase().includes(q))
+  })
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-6">
+      defineModel
+    </h1>
+
+    <div class="grid grid-cols-2 gap-6">
+      <div>
+        <SearchInput v-model="query" class="mb-4" />
+
+        <SelectableList
+          v-model="selectedUser"
+          :items="filtered"
+          :label="user => user.name"
+        />
+
+        <p v-if="filtered.length === 0" class="text-on-surface-variant text-sm mt-3">
+          No results for "{{ query }}"
+        </p>
+      </div>
+
+      <div>
+        <h2 class="text-lg font-bold text-on-surface mb-3">Details</h2>
+
+        <div v-if="selectedUser" class="p-4 rounded-lg bg-surface-tint">
+          <p class="text-on-background font-medium">
+            {{ selectedUser.name }}
+          </p>
+
+          <p class="text-sm text-on-surface-variant">
+            {{ selectedUser.role }}
+          </p>
+        </div>
+
+        <p v-else class="text-on-surface-variant text-sm">
+          Click a user to see details.
+        </p>
+
+        <div class="mt-4 p-3 rounded-lg bg-surface text-sm">
+          <span class="text-on-surface-variant">Debounced query:</span>
+          <strong class="text-on-surface ml-1">{{ query || '(empty)' }}</strong>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-5/README.md b/apps/docs/src/skillz/tutorials/vue-advanced/step-5/README.md
new file mode 100644
index 000000000..4fbbde255
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-5/README.md
@@ -0,0 +1,46 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: false
+---
+# defineModel
+
+`defineModel` is a compiler macro that simplifies **two-way binding** on custom components. Instead of declaring a prop and emit separately, `defineModel` does both in one line.
+
+## Before defineModel
+
+```vue
+<script setup>
+  const props = defineProps(['modelValue'])
+  const emit = defineEmits(['update:modelValue'])
+
+  function update (value) {
+    emit('update:modelValue', value)
+  }
+</script>
+```
+
+## With defineModel
+
+```vue
+<script setup>
+  const model = defineModel()
+</script>
+```
+
+`model` is a ref you can read and write directly. Vue handles the prop/emit plumbing automatically.
+
+## Debounced input
+
+`defineModel` is perfect for input wrappers. The editor shows a `SearchInput` component that debounces its model value — the parent only sees updates after the user stops typing:
+
+```vue
+<script setup>
+  const model = defineModel()
+  // Debounce logic updates model after a delay
+</script>
+```
+
+## Try it
+
+The `SelectableList` now uses `defineModel` instead of manual prop/emit. Try adding `defineModel`'s `.lazy` modifier support or a default value.
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-5/SearchInput.vue b/apps/docs/src/skillz/tutorials/vue-advanced/step-5/SearchInput.vue
new file mode 100644
index 000000000..772fe6935
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-5/SearchInput.vue
@@ -0,0 +1,30 @@
+<script setup>
+  // Utilities
+  import { ref, watch } from 'vue'
+
+  const model = defineModel({ default: '' })
+
+  const internal = ref(model.value)
+  let timeout = null
+
+  watch(internal, val => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      model.value = val
+    }, 300)
+  })
+
+  watch(model, val => {
+    if (val !== internal.value) {
+      internal.value = val
+    }
+  })
+</script>
+
+<template>
+  <input
+    v-model="internal"
+    class="w-full px-3 py-2 rounded border border-solid border-divider bg-surface text-on-surface"
+    placeholder="Search..."
+  >
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-5/SelectableList.vue b/apps/docs/src/skillz/tutorials/vue-advanced/step-5/SelectableList.vue
new file mode 100644
index 000000000..b7beef49b
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-5/SelectableList.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup generic="T extends { id: number | string }">
+  defineProps<{
+    items: T[]
+    label?: (item: T) => string
+  }>()
+
+  const model = defineModel<T>()
+</script>
+
+<template>
+  <ul class="space-y-1">
+    <li v-for="item in items" :key="item.id">
+      <button
+        class="w-full text-left px-3 py-2 rounded transition-colors"
+        :class="model?.id === item.id
+          ? 'bg-primary text-on-primary'
+          : 'bg-surface text-on-surface hover:bg-surface-tint'"
+        @click="model = item"
+      >
+        {{ label ? label(item) : item.id }}
+      </button>
+    </li>
+  </ul>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-6/App.vue b/apps/docs/src/skillz/tutorials/vue-advanced/step-6/App.vue
new file mode 100644
index 000000000..491377f68
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-6/App.vue
@@ -0,0 +1,70 @@
+<script setup>
+  // Components
+  import SelectableList from './SelectableList.vue'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const users = [
+    { id: 1, name: 'Alice', role: 'Engineer' },
+    { id: 2, name: 'Bob', role: 'Designer' },
+    { id: 3, name: 'Carol', role: 'Manager' },
+    { id: 4, name: 'Dan', role: 'Engineer' },
+  ]
+
+  const selectedA = ref()
+  const selectedB = ref()
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-6">
+      Scoped Slots
+    </h1>
+
+    <div class="grid grid-cols-2 gap-6">
+      <div>
+        <h2 class="text-lg font-bold text-on-surface mb-3">Card style</h2>
+
+        <SelectableList v-model="selectedA" :items="users">
+          <template #default="{ item, isSelected, select }">
+            <button
+              class="w-full text-left p-3 rounded-lg border border-solid transition-colors"
+              :class="isSelected
+                ? 'border-primary bg-primary text-on-primary'
+                : 'border-divider bg-surface text-on-surface hover:bg-surface-tint'"
+              @click="select"
+            >
+              <p class="font-medium">{{ item.name }}</p>
+              <p class="text-sm" :class="isSelected ? 'text-on-primary/70' : 'text-on-surface-variant'">
+                {{ item.role }}
+              </p>
+            </button>
+          </template>
+        </SelectableList>
+      </div>
+
+      <div>
+        <h2 class="text-lg font-bold text-on-surface mb-3">Chip style</h2>
+
+        <SelectableList v-model="selectedB" :items="users">
+          <template #default="{ item, isSelected, select }">
+            <button
+              class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium transition-colors"
+              :class="isSelected
+                ? 'bg-primary text-on-primary'
+                : 'bg-surface-tint text-on-surface hover:bg-surface'"
+              @click="select"
+            >
+              <span
+                class="w-2 h-2 rounded-full"
+                :class="isSelected ? 'bg-on-primary' : 'bg-primary'"
+              />
+              {{ item.name }}
+            </button>
+          </template>
+        </SelectableList>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-6/README.md b/apps/docs/src/skillz/tutorials/vue-advanced/step-6/README.md
new file mode 100644
index 000000000..a27e56c5b
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-6/README.md
@@ -0,0 +1,42 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: false
+---
+# Scoped slots
+
+Scoped slots let a child component **pass data back to the parent's template**. The child controls the logic; the parent controls the rendering.
+
+## Slot props
+
+```vue
+<!-- Child: SelectableList.vue -->
+<template>
+  <li v-for="item in items" :key="item.id">
+    <slot :item="item" :is-selected="isSelected(item)" :select="() => select(item)" />
+  </li>
+</template>
+```
+
+```vue
+<!-- Parent: App.vue -->
+<SelectableList :items="users" v-model="selected">
+  <template #default="{ item, isSelected, select }">
+    <button @click="select" :class="{ active: isSelected }">
+      {{ item.name }}
+    </button>
+  </template>
+</SelectableList>
+```
+
+The parent receives `item`, `isSelected`, and `select` as slot props — full control over how each item looks, while the component manages selection state.
+
+## The headless pattern
+
+This is the **headless component** pattern: provide behavior through slot props, leave rendering to the consumer. Two different parents can render the same data completely differently.
+
+## Try it
+
+The editor shows `SelectableList` exposing scoped slots. The App renders two different presentations from the same component. Try adding an `#empty` slot that receives `{ query }` as a prop.
+
+> [!TIP] This IS the headless component pattern. v0's components like `Selection.Root` and `Tabs.Panel` expose slot props that give you full control over rendering.
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-6/SelectableList.vue b/apps/docs/src/skillz/tutorials/vue-advanced/step-6/SelectableList.vue
new file mode 100644
index 000000000..863bde9ea
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-6/SelectableList.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup generic="T extends { id: number | string }">
+  defineProps<{
+    items: T[]
+  }>()
+
+  const model = defineModel<T>()
+
+  function isSelected (item: T) {
+    return model.value?.id === item.id
+  }
+
+  function select (item: T) {
+    model.value = item
+  }
+</script>
+
+<template>
+  <ul class="space-y-1">
+    <li v-for="item in items" :key="item.id">
+      <slot
+        :is-selected="isSelected(item)"
+        :item="item"
+        :select="() => select(item)"
+      />
+    </li>
+  </ul>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-7/App.vue b/apps/docs/src/skillz/tutorials/vue-advanced/step-7/App.vue
new file mode 100644
index 000000000..d807feaf8
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-7/App.vue
@@ -0,0 +1,121 @@
+<script setup>
+  // Components
+  import SelectableList from './SelectableList.vue'
+
+  // Composables
+  import { useFilter } from './useFilter'
+  import { useList } from './useList'
+
+  // Utilities
+  import { ref } from 'vue'
+
+  const { items, add, remove } = useList([
+    { id: 1, name: 'Alice', role: 'Engineer' },
+    { id: 2, name: 'Bob', role: 'Designer' },
+    { id: 3, name: 'Carol', role: 'Manager' },
+    { id: 4, name: 'Dan', role: 'Engineer' },
+    { id: 5, name: 'Eve', role: 'Designer' },
+  ])
+
+  const { query, filtered } = useFilter(items, ['name', 'role'])
+
+  const selected = ref()
+
+  let nextId = 6
+
+  function addUser () {
+    const names = ['Frank', 'Grace', 'Hank', 'Ivy', 'Jack']
+    const roles = ['Engineer', 'Designer', 'Manager', 'Analyst']
+    add({
+      id: nextId++,
+      name: names[Math.floor(Math.random() * names.length)],
+      role: roles[Math.floor(Math.random() * roles.length)],
+    })
+  }
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-6">
+      Putting It Together
+    </h1>
+
+    <div class="grid grid-cols-2 gap-6">
+      <div>
+        <div class="flex gap-2 mb-4">
+          <input
+            v-model="query"
+            class="flex-1 px-3 py-2 rounded border border-solid border-divider bg-surface text-on-surface"
+            placeholder="Search by name or role..."
+          >
+
+          <button
+            class="px-4 py-2 rounded bg-primary text-on-primary font-medium"
+            @click="addUser"
+          >
+            Add
+          </button>
+        </div>
+
+        <SelectableList v-model="selected" :items="filtered">
+          <template #default="{ item, isSelected, select }">
+            <div
+              class="flex items-center justify-between p-3 rounded-lg border border-solid cursor-pointer transition-colors"
+              :class="isSelected
+                ? 'border-primary bg-primary text-on-primary'
+                : 'border-divider bg-surface text-on-surface hover:bg-surface-tint'"
+              @click="select"
+            >
+              <div>
+                <p class="font-medium">{{ item.name }}</p>
+                <p class="text-sm" :class="isSelected ? 'text-on-primary/70' : 'text-on-surface-variant'">
+                  {{ item.role }}
+                </p>
+              </div>
+
+              <button
+                class="text-sm px-2 py-1 rounded"
+                :class="isSelected ? 'text-on-primary/70 hover:text-on-primary' : 'text-error hover:bg-surface-tint'"
+                @click.stop="remove(items.indexOf(item))"
+              >
+                Remove
+              </button>
+            </div>
+          </template>
+
+          <template #empty>
+            <p class="text-on-surface-variant text-sm mt-3">
+              No results for "{{ query }}"
+            </p>
+          </template>
+        </SelectableList>
+
+        <p class="text-sm text-on-surface-variant mt-3">
+          {{ filtered.length }} of {{ items.length }} items
+        </p>
+      </div>
+
+      <div>
+        <h2 class="text-lg font-bold text-on-surface mb-3">Selected</h2>
+
+        <div v-if="selected" class="p-4 rounded-lg bg-surface-tint">
+          <p class="text-on-background font-medium text-lg">
+            {{ selected.name }}
+          </p>
+
+          <p class="text-on-surface-variant">
+            {{ selected.role }}
+          </p>
+
+          <p class="text-sm text-on-surface-variant mt-2">
+            ID: {{ selected.id }}
+          </p>
+        </div>
+
+        <p v-else class="text-on-surface-variant text-sm">
+          Select a user from the list.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-7/README.md b/apps/docs/src/skillz/tutorials/vue-advanced/step-7/README.md
new file mode 100644
index 000000000..3f4d07bb5
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-7/README.md
@@ -0,0 +1,36 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: false
+---
+# Putting it together
+
+Time to compose everything into a real feature: a **searchable, selectable, filterable list**. This combines composables (`useList`, `useFilter`) with a headless component (`SelectableList`) and scoped slots.
+
+## Composing composables
+
+Composables shine when combined. Each handles one concern:
+
+```ts
+const { items, add, remove } = useList(initialData)
+const { filtered, query } = useFilter(items, ['name', 'role'])
+```
+
+Feed `filtered` into `SelectableList` and you have a fully interactive, searchable, selectable list — with each piece independently testable and reusable.
+
+## The architecture
+
+```
+useList          → manages the raw collection
+useFilter        → filters items by search query
+SelectableList   → handles selection + renders via slots
+App.vue          → composes everything together
+```
+
+## Try it
+
+The editor shows the full composition. Try adding keyboard navigation — use `ArrowUp`/`ArrowDown` to move through filtered items, and `Enter` to select.
+
+## What's next
+
+You've built composables, used generics, scoped slots, and composed them into a real feature. These are the exact patterns v0 uses internally. Head to the **v0 Basics** tutorial to see how v0's built-in composables handle all of this for you.
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-7/SelectableList.vue b/apps/docs/src/skillz/tutorials/vue-advanced/step-7/SelectableList.vue
new file mode 100644
index 000000000..b78098a6b
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-7/SelectableList.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup generic="T extends { id: number | string }">
+  defineProps<{
+    items: T[]
+  }>()
+
+  const model = defineModel<T>()
+
+  function isSelected (item: T) {
+    return model.value?.id === item.id
+  }
+
+  function select (item: T) {
+    model.value = item
+  }
+</script>
+
+<template>
+  <ul class="space-y-1">
+    <li v-for="item in items" :key="item.id">
+      <slot
+        :is-selected="isSelected(item)"
+        :item="item"
+        :select="() => select(item)"
+      />
+    </li>
+  </ul>
+
+  <slot v-if="items.length === 0" name="empty" />
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-7/useFilter.ts b/apps/docs/src/skillz/tutorials/vue-advanced/step-7/useFilter.ts
new file mode 100644
index 000000000..f48a3b3fe
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-7/useFilter.ts
@@ -0,0 +1,26 @@
+// Utilities
+import { ref, computed } from 'vue'
+
+// Types
+import type { Ref } from 'vue'
+
+export function useFilter<T extends Record<string, unknown>> (
+  items: Ref<T[]>,
+  keys: (keyof T)[],
+) {
+  const query = ref('')
+
+  const filtered = computed(() => {
+    const q = query.value.toLowerCase().trim()
+    if (!q) return items.value
+
+    return items.value.filter(item =>
+      keys.some(key => {
+        const val = item[key]
+        return typeof val === 'string' && val.toLowerCase().includes(q)
+      }),
+    )
+  })
+
+  return { query, filtered }
+}
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-7/useList.ts b/apps/docs/src/skillz/tutorials/vue-advanced/step-7/useList.ts
new file mode 100644
index 000000000..c33662389
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-advanced/step-7/useList.ts
@@ -0,0 +1,20 @@
+// Utilities
+import { shallowRef } from 'vue'
+
+export function useList<T> (initial: T[] = []) {
+  const items = shallowRef([...initial])
+
+  function add (item: T) {
+    items.value = [...items.value, item]
+  }
+
+  function remove (index: number) {
+    items.value = items.value.filter((_, i) => i !== index)
+  }
+
+  function clear () {
+    items.value = []
+  }
+
+  return { items, add, remove, clear }
+}
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-1/App.vue b/apps/docs/src/skillz/tutorials/vue-basics/step-1/App.vue
new file mode 100644
index 000000000..645d81530
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-1/App.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
+      <div class="flex items-center gap-4 mb-4">
+        <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
+          AC
+        </div>
+
+        <div>
+          <h2 class="text-lg font-bold text-on-surface">Alex Chen</h2>
+          <p class="text-sm text-on-surface-variant">Frontend Developer</p>
+        </div>
+      </div>
+
+      <p class="text-sm text-on-surface-variant">
+        alex.chen@email.com
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-1/README.md b/apps/docs/src/skillz/tutorials/vue-basics/step-1/README.md
new file mode 100644
index 000000000..71a1af982
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-1/README.md
@@ -0,0 +1,28 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Welcome to Vue Basics
+
+Every v0 composable is built on Vue 3. This tutorial walks you through the fundamentals by building a contact card from scratch — adding one new concept per step until you have a fully interactive component.
+
+You'll learn **refs**, **events**, **computed properties**, **conditionals**, **lists**, and **two-way binding** — the same building blocks behind every v0 composable.
+
+## Single-file components
+
+In Vue, you write [single-file components](https://vuejs.org/guide/scaling-up/sfc.html) (SFCs) — `.vue` files that keep template, logic, and styles together in one place:
+
+```vue
+<template>
+  <h1>Hello!</h1>
+</template>
+```
+
+That's a complete component. The `<template>` section contains HTML that Vue renders to the page. No JavaScript needed — at least not yet.
+
+Look at the editor on the right. It contains a static contact card built entirely with a `<template>`. The name, role, and email are all hardcoded directly in the markup. It works, but if anything needs to change, you'd have to edit the HTML by hand every time.
+
+In the next step, we'll fix that by making the data **reactive**.
+
+> [!TRY] Edit the card in the editor — change "Alex Chen" to your name, or swap the role to something else. The preview updates instantly as you type.
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-2/App.vue b/apps/docs/src/skillz/tutorials/vue-basics/step-2/App.vue
new file mode 100644
index 000000000..01ae516c8
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-2/App.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  // Utilities
+  import { shallowRef } from 'vue'
+
+  const name = shallowRef('Alex Chen')
+  const role = shallowRef('Frontend Developer')
+  const email = shallowRef('alex.chen@email.com')
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
+      <div class="flex items-center gap-4 mb-4">
+        <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
+          AC
+        </div>
+
+        <div>
+          <h2 class="text-lg font-bold text-on-surface">{{ name }}</h2>
+          <p class="text-sm text-on-surface-variant">{{ role }}</p>
+        </div>
+      </div>
+
+      <p class="text-sm text-on-surface-variant">
+        {{ email }}
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-2/README.md b/apps/docs/src/skillz/tutorials/vue-basics/step-2/README.md
new file mode 100644
index 000000000..fe13a601e
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-2/README.md
@@ -0,0 +1,38 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Making it dynamic
+
+In step 1, the card was static — values were hardcoded in the HTML. Now we'll make the card **reactive** using Vue's [shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref).
+
+## Refs
+
+A `shallowRef` wraps a value so Vue can **track changes** and update the template automatically:
+
+```vue
+<script setup lang="ts">
+  import { shallowRef } from 'vue'
+
+  const name = shallowRef('Alex Chen')
+</script>
+```
+
+In the template, use double curly braces to display a ref's value. Vue automatically unwraps it — you write `{{ name }}`, not `{{ name.value }}`:
+
+```vue
+<template>
+  <p>{{ name }}</p>
+</template>
+```
+
+In JavaScript however, you access the value with `.value` — this distinction comes up constantly when working with v0.
+
+## Why shallowRef?
+
+Vue also has `ref()`, which deeply tracks nested objects. For simple values like strings, numbers, and booleans, `shallowRef` is more efficient — it only triggers updates when `.value` is replaced, not when properties inside it change. Since primitives are always replaced, there's no downside.
+
+As your app grows, defaulting to `shallowRef` for primitives avoids unnecessary deep reactivity tracking and keeps things fast.
+
+> [!TRY] Add a `city` ref (e.g., `shallowRef('San Francisco')`) and display it below the email. You'll need to add both the ref in `<script setup>` and a `{{ city }}` expression in the template.
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-3/App.vue b/apps/docs/src/skillz/tutorials/vue-basics/step-3/App.vue
new file mode 100644
index 000000000..1816e5189
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-3/App.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+  // Utilities
+  import { shallowRef } from 'vue'
+
+  const name = shallowRef('Alex Chen')
+  const role = shallowRef('Frontend Developer')
+  const email = shallowRef('alex.chen@email.com')
+  const following = shallowRef(false)
+
+  function toggle () {
+    following.value = !following.value
+  }
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
+      <div class="flex items-center gap-4 mb-4">
+        <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
+          AC
+        </div>
+
+        <div>
+          <h2 class="text-lg font-bold text-on-surface">{{ name }}</h2>
+          <p class="text-sm text-on-surface-variant">{{ role }}</p>
+        </div>
+      </div>
+
+      <p class="text-sm text-on-surface-variant mb-4">
+        {{ email }}
+      </p>
+
+      <button
+        class="w-full py-2 rounded font-medium transition-colors"
+        :class="following ? 'bg-surface-tint text-on-surface' : 'bg-primary text-on-primary'"
+        @click="toggle"
+      >
+        {{ following ? 'Following' : 'Follow' }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-3/README.md b/apps/docs/src/skillz/tutorials/vue-basics/step-3/README.md
index e6e5e8cf2..d3aefd55a 100644
--- a/apps/docs/src/skillz/tutorials/vue-basics/step-3/README.md
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-3/README.md
@@ -3,34 +3,43 @@ hideFiles: true
 hideTabs: true
 hideBreadcrumbs: true
 ---
-# Event handling
+# Responding to clicks
 
-Vue uses `@` (shorthand for `v-on`) to listen for DOM events. This is how you'll wire up user interactions to v0 state changes.
+A contact card isn't useful if you can't interact with it. Vue handles DOM events with the [`@` shorthand](https://vuejs.org/guide/essentials/event-handling.html) (short for `v-on:`).
+
+## Event handling
+
+Use `@click` to call a function when an element is clicked:
 
 ```vue
 <template>
-  <button @click="count++">
-    Clicked {{ count }} times
-  </button>
+  <button @click="toggle">Follow</button>
 </template>
 ```
 
-You can use inline expressions or call a function:
+The handler is a regular function declaration in `<script setup>`:
 
 ```vue
-<script setup>
-  import { ref } from 'vue'
-
-  const count = ref(0)
-
-  function increment() {
-    count.value++
+<script setup lang="ts">
+  function toggle () {
+    active.value = !active.value
   }
 </script>
 ```
 
-Notice that inside `<script setup>`, you access the ref with `.value`. Vue only auto-unwraps refs in templates.
+## Dynamic classes
+
+Use [`:class`](https://vuejs.org/guide/essentials/class-and-style.html) (short for `v-bind:class`) to apply classes conditionally:
 
-## Try it
+```vue
+<template>
+  <button
+    :class="active ? 'bg-surface-tint' : 'bg-primary'"
+    @click="toggle"
+  >
+    {{ active ? 'Following' : 'Follow' }}
+  </button>
+</template>
+```
 
-Click the button in the preview. Then try adding a **Reset** button that sets `count.value = 0`.
+> [!TRY] Add a `count` ref that tracks how many times the button has been toggled. Increment it inside `toggle` and display it somewhere on the card.
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-4/App.vue b/apps/docs/src/skillz/tutorials/vue-basics/step-4/App.vue
new file mode 100644
index 000000000..9026d7856
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-4/App.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+  // Utilities
+  import { shallowRef, computed } from 'vue'
+
+  const name = shallowRef('Alex Chen')
+  const role = shallowRef('Frontend Developer')
+  const email = shallowRef('alex.chen@email.com')
+  const following = shallowRef(false)
+  const skills = shallowRef(['Vue', 'TypeScript', 'CSS', 'Node.js'])
+
+  const initials = computed(() => {
+    return name.value
+      .split(' ')
+      .map(p => p[0])
+      .join('')
+      .toUpperCase()
+  })
+
+  const best = computed(() => skills.value[0])
+
+  function toggle () {
+    following.value = !following.value
+  }
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
+      <div class="flex items-center gap-4 mb-4">
+        <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
+          {{ initials }}
+        </div>
+
+        <div>
+          <h2 class="text-lg font-bold text-on-surface">{{ name }}</h2>
+          <p class="text-sm text-on-surface-variant">{{ role }}</p>
+        </div>
+      </div>
+
+      <p class="text-sm text-on-surface-variant mb-2">
+        {{ email }}
+      </p>
+
+      <p class="text-sm text-on-surface-variant mb-4">
+        Top skill: <span class="font-medium text-on-surface">{{ best }}</span>
+      </p>
+
+      <button
+        class="w-full py-2 rounded font-medium transition-colors"
+        :class="following ? 'bg-surface-tint text-on-surface' : 'bg-primary text-on-primary'"
+        @click="toggle"
+      >
+        {{ following ? 'Following' : 'Follow' }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-4/README.md b/apps/docs/src/skillz/tutorials/vue-basics/step-4/README.md
new file mode 100644
index 000000000..b3653e3f5
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-4/README.md
@@ -0,0 +1,41 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Derived data
+
+The avatar still shows hardcoded "AC". What if the name changes? We need a value that **automatically updates** when its dependencies change — that's what [`computed()`](https://vuejs.org/guide/essentials/computed.html) does.
+
+## Computed refs
+
+A `computed` ref derives its value from other refs. It recalculates whenever its dependencies change:
+
+```vue
+<script setup lang="ts">
+  import { shallowRef, computed } from 'vue'
+
+  const name = shallowRef('Alex Chen')
+
+  const initials = computed(() => {
+    return name.value
+      .split(' ')
+      .map(p => p[0])
+      .join('')
+      .toUpperCase()
+  })
+</script>
+```
+
+Now `initials` always reflects the current `name` — change the name and the avatar updates automatically.
+
+We also derive `best` from a skills array:
+
+```vue
+<script setup lang="ts">
+  const skills = shallowRef(['Vue', 'TypeScript', 'CSS'])
+  const best = computed(() => skills.value[0])
+</script>
+```
+
+> [!TRY] Add a `total` computed that returns something like "4 skills" (pluralized). Display it next to "Top skill" in the card.
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-5/App.vue b/apps/docs/src/skillz/tutorials/vue-basics/step-5/App.vue
new file mode 100644
index 000000000..a9bd75dcb
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-5/App.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+  // Utilities
+  import { shallowRef, computed } from 'vue'
+
+  const name = shallowRef('Alex Chen')
+  const role = shallowRef('Frontend Developer')
+  const email = shallowRef('alex.chen@email.com')
+  const following = shallowRef(false)
+  const skills = shallowRef(['Vue', 'TypeScript', 'CSS', 'Node.js'])
+  const open = shallowRef(false)
+
+  const initials = computed(() => {
+    return name.value
+      .split(' ')
+      .map(p => p[0])
+      .join('')
+      .toUpperCase()
+  })
+
+  const best = computed(() => skills.value[0])
+
+  function toggle () {
+    following.value = !following.value
+  }
+
+  function flip () {
+    open.value = !open.value
+  }
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
+      <div class="flex items-center gap-4 mb-4 cursor-pointer" @click="flip">
+        <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
+          {{ initials }}
+        </div>
+
+        <div class="flex-1">
+          <h2 class="text-lg font-bold text-on-surface">{{ name }}</h2>
+          <p class="text-sm text-on-surface-variant">{{ role }}</p>
+        </div>
+
+        <svg
+          class="w-4 h-4 text-on-surface-variant transition-transform duration-200"
+          :class="{ 'rotate-180': open }"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+        >
+          <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </div>
+
+      <div v-if="open">
+        <p class="text-sm text-on-surface-variant mb-2">
+          {{ email }}
+        </p>
+
+        <p class="text-sm text-on-surface-variant mb-4">
+          Top skill: <span class="font-medium text-on-surface">{{ best }}</span>
+        </p>
+
+        <button
+          class="w-full py-2 rounded font-medium transition-colors"
+          :class="following ? 'bg-surface-tint text-on-surface' : 'bg-primary text-on-primary'"
+          @click="toggle"
+        >
+          {{ following ? 'Following' : 'Follow' }}
+        </button>
+      </div>
+
+      <p v-else class="text-sm text-on-surface-variant">
+        Click to expand
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-5/README.md b/apps/docs/src/skillz/tutorials/vue-basics/step-5/README.md
index 776974f09..8f8564887 100644
--- a/apps/docs/src/skillz/tutorials/vue-basics/step-5/README.md
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-5/README.md
@@ -3,36 +3,36 @@ hideFiles: true
 hideTabs: true
 hideBreadcrumbs: true
 ---
-# Conditional rendering
+# Show and hide
 
-Vue provides directives to **conditionally render** elements. You'll see `v-if` throughout v0 examples to show and hide UI based on composable state.
+The contact card is getting crowded. Let's collapse it so it only shows the header by default, and expands to reveal details when clicked.
 
-## v-if / v-else
+## Conditional rendering
+
+[`v-if`](https://vuejs.org/guide/essentials/conditional.html) adds or **removes** elements from the DOM entirely. `v-else` provides the fallback:
 
 ```vue
 <template>
-  <p v-if="loggedIn">Welcome back!</p>
-  <p v-else>Please log in.</p>
+  <div v-if="open">
+    <!-- Full details -->
+  </div>
+
+  <p v-else>Click to expand</p>
 </template>
 ```
 
-`v-if` completely **adds or removes** the element from the DOM.
+When `open` is `false`, the details block doesn't exist in the DOM at all.
 
 ## v-show
 
+There's also `v-show`, which toggles CSS `display` instead of adding/removing from the DOM. Use `v-show` when you toggle something frequently:
+
 ```vue
 <template>
-  <p v-show="visible">I'm toggled with CSS</p>
+  <p v-show="email">{{ email }}</p>
 </template>
 ```
 
-`v-show` always renders the element but toggles `display: none`. Use it when something toggles frequently.
-
-## Rule of thumb
-
-- **`v-if`** — for conditions that rarely change (cheaper initial render)
-- **`v-show`** — for things that toggle often (cheaper subsequent toggles)
-
-## Try it
+The element is always in the DOM — it's just hidden with `display: none`.
 
-Click the toggle button to switch states. Try changing `v-if` to `v-show` and inspect the DOM to see the difference.
+> [!TRY] Try changing `v-if="open"` to `v-show="open"` and inspect the DOM in your browser's dev tools. You'll see the element is always present — just hidden. Then try clearing the email ref to an empty string and add `v-show="email"` to hide the empty email line.
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-6/App.vue b/apps/docs/src/skillz/tutorials/vue-basics/step-6/App.vue
new file mode 100644
index 000000000..4d42786c3
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-6/App.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+  // Utilities
+  import { shallowRef, computed } from 'vue'
+
+  const name = shallowRef('Alex Chen')
+  const role = shallowRef('Frontend Developer')
+  const email = shallowRef('alex.chen@email.com')
+  const following = shallowRef(false)
+  const skills = shallowRef(['Vue', 'TypeScript', 'CSS', 'Node.js'])
+  const open = shallowRef(true)
+  const pending = shallowRef('')
+
+  const initials = computed(() => {
+    return name.value
+      .split(' ')
+      .map(p => p[0])
+      .join('')
+      .toUpperCase()
+  })
+
+  const best = computed(() => skills.value[0])
+
+  function toggle () {
+    following.value = !following.value
+  }
+
+  function flip () {
+    open.value = !open.value
+  }
+
+  function add () {
+    const trimmed = pending.value.trim()
+
+    if (trimmed && !skills.value.includes(trimmed)) {
+      skills.value = [...skills.value, trimmed]
+      pending.value = ''
+    }
+  }
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
+      <div class="flex items-center gap-4 mb-4 cursor-pointer" @click="flip">
+        <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
+          {{ initials }}
+        </div>
+
+        <div class="flex-1">
+          <h2 class="text-lg font-bold text-on-surface">{{ name }}</h2>
+          <p class="text-sm text-on-surface-variant">{{ role }}</p>
+        </div>
+
+        <svg
+          class="w-4 h-4 text-on-surface-variant transition-transform duration-200"
+          :class="{ 'rotate-180': open }"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+        >
+          <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </div>
+
+      <div v-if="open">
+        <p class="text-sm text-on-surface-variant mb-2">
+          {{ email }}
+        </p>
+
+        <p class="text-sm text-on-surface-variant mb-3">
+          Top skill: <span class="font-medium text-on-surface">{{ best }}</span>
+        </p>
+
+        <div class="flex flex-wrap gap-2 mb-4">
+          <span
+            v-for="skill in skills"
+            :key="skill"
+            class="px-3 py-1 rounded-full text-xs font-medium bg-surface-tint text-on-surface"
+          >
+            {{ skill }}
+          </span>
+        </div>
+
+        <div class="flex gap-2 mb-4">
+          <input
+            v-model="pending"
+            class="flex-1 px-3 py-2 rounded border border-solid border-divider bg-surface text-on-surface text-sm"
+            placeholder="Add a skill..."
+            @keyup.enter="add"
+          >
+
+          <button
+            class="px-4 py-2 rounded bg-primary text-on-primary text-sm font-medium"
+            @click="add"
+          >
+            Add
+          </button>
+        </div>
+
+        <button
+          class="w-full py-2 rounded font-medium transition-colors"
+          :class="following ? 'bg-surface-tint text-on-surface' : 'bg-primary text-on-primary'"
+          @click="toggle"
+        >
+          {{ following ? 'Following' : 'Follow' }}
+        </button>
+      </div>
+
+      <p v-else class="text-sm text-on-surface-variant">
+        Click to expand
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-6/README.md b/apps/docs/src/skillz/tutorials/vue-basics/step-6/README.md
index 4d51cfcf1..b15b8a59f 100644
--- a/apps/docs/src/skillz/tutorials/vue-basics/step-6/README.md
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-6/README.md
@@ -3,30 +3,39 @@ hideFiles: true
 hideTabs: true
 hideBreadcrumbs: true
 ---
-# List rendering
+# Rendering lists
 
-`v-for` renders a list of items from an array. v0 composables like `createSelection` and `createStep` work with arrays of items, so you'll use this pattern often.
+The skills array is in our data, but we're only showing the top skill. Let's render them all as chips using [`v-for`](https://vuejs.org/guide/essentials/list.html).
+
+## v-for
+
+`v-for` iterates over an array and renders an element for each item. Always provide a unique `:key`:
 
 ```vue
 <template>
-  <ul>
-    <li v-for="item in items" :key="item.id">
-      {{ item.text }}
-    </li>
-  </ul>
+  <span
+    v-for="item in items"
+    :key="item"
+  >
+    {{ item }}
+  </span>
 </template>
 ```
 
-The `:key` binding gives Vue a **stable identity** for each element so it can efficiently update the DOM when the list changes. Always provide a unique key.
+## Keys matter
 
-## Reactivity
+Vue uses `:key` to track which items changed, were added, or removed. Without keys, Vue reuses elements in place — which causes subtle bugs with stateful content.
 
-Since `items` is reactive, pushing to or splicing from the array automatically updates the rendered list:
+## Array reactivity
 
-```js
-items.value.push({ id: 3, text: 'New item' })
-```
+Vue tracks changes to ref arrays. Methods like `push`, `splice`, and `pop` trigger re-renders automatically:
 
-## Try it
+```vue
+<script setup lang="ts">
+  function add () {
+    skills.value.push('New Skill')
+  }
+</script>
+```
 
-Type in the input and click **Add** to add items. Try implementing a remove button on each item.
+> [!TRY] Add a remove button to each skill chip. You can use `skills.value.splice(index, 1)` to remove an item. Remember that `v-for` also provides the index: `v-for="(item, index) in items"`.
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-7/App.vue b/apps/docs/src/skillz/tutorials/vue-basics/step-7/App.vue
new file mode 100644
index 000000000..3e3aa787c
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-7/App.vue
@@ -0,0 +1,183 @@
+<script setup lang="ts">
+  // Utilities
+  import { shallowRef, computed } from 'vue'
+
+  const name = shallowRef('Alex Chen')
+  const role = shallowRef('Frontend Developer')
+  const email = shallowRef('alex.chen@email.com')
+  const following = shallowRef(false)
+  const skills = shallowRef(['Vue', 'TypeScript', 'CSS', 'Node.js'])
+  const open = shallowRef(true)
+  const pending = shallowRef('')
+  const editing = shallowRef(false)
+  const status = shallowRef('available')
+
+  const initials = computed(() => {
+    return name.value
+      .split(' ')
+      .map(p => p[0])
+      .join('')
+      .toUpperCase()
+  })
+
+  const best = computed(() => skills.value[0])
+
+  const color = computed(() => {
+    const map: Record<string, string> = {
+      available: 'bg-success',
+      busy: 'bg-error',
+      away: 'bg-warning',
+    }
+
+    return map[status.value] || 'bg-surface-tint'
+  })
+
+  function toggle () {
+    following.value = !following.value
+  }
+
+  function flip () {
+    open.value = !open.value
+  }
+
+  function add () {
+    const trimmed = pending.value.trim()
+
+    if (trimmed && !skills.value.includes(trimmed)) {
+      skills.value = [...skills.value, trimmed]
+      pending.value = ''
+    }
+  }
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
+      <div class="flex items-center gap-4 mb-4 cursor-pointer" @click="flip">
+        <div class="relative">
+          <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
+            {{ initials }}
+          </div>
+
+          <div
+            class="absolute bottom-0 right-0 w-3 h-3 rounded-full border-2 border-solid border-surface"
+            :class="color"
+          />
+        </div>
+
+        <div class="flex-1">
+          <h2 class="text-lg font-bold text-on-surface">{{ name }}</h2>
+          <p class="text-sm text-on-surface-variant">{{ role }}</p>
+        </div>
+
+        <svg
+          class="w-4 h-4 text-on-surface-variant transition-transform duration-200"
+          :class="{ 'rotate-180': open }"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+        >
+          <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </div>
+
+      <div v-if="open">
+        <div v-if="editing" class="space-y-3 mb-4">
+          <div>
+            <label class="block text-xs font-medium text-on-surface-variant mb-1">Name</label>
+            <input
+              v-model.trim="name"
+              class="w-full px-3 py-2 rounded border border-solid border-divider bg-surface text-on-surface text-sm"
+            >
+          </div>
+
+          <div>
+            <label class="block text-xs font-medium text-on-surface-variant mb-1">Role</label>
+            <input
+              v-model.trim="role"
+              class="w-full px-3 py-2 rounded border border-solid border-divider bg-surface text-on-surface text-sm"
+            >
+          </div>
+
+          <div>
+            <label class="block text-xs font-medium text-on-surface-variant mb-1">Email</label>
+            <input
+              v-model.trim="email"
+              class="w-full px-3 py-2 rounded border border-solid border-divider bg-surface text-on-surface text-sm"
+            >
+          </div>
+
+          <div>
+            <label class="block text-xs font-medium text-on-surface-variant mb-1">Status</label>
+            <select
+              v-model="status"
+              class="w-full px-3 py-2 rounded border border-solid border-divider bg-surface text-on-surface text-sm"
+            >
+              <option value="available">Available</option>
+              <option value="busy">Busy</option>
+              <option value="away">Away</option>
+            </select>
+          </div>
+        </div>
+
+        <div v-else>
+          <p class="text-sm text-on-surface-variant mb-2">
+            {{ email }}
+          </p>
+
+          <p class="text-sm text-on-surface-variant mb-3">
+            Top skill: <span class="font-medium text-on-surface">{{ best }}</span>
+          </p>
+
+          <div class="flex flex-wrap gap-2 mb-4">
+            <span
+              v-for="skill in skills"
+              :key="skill"
+              class="px-3 py-1 rounded-full text-xs font-medium bg-surface-tint text-on-surface"
+            >
+              {{ skill }}
+            </span>
+          </div>
+
+          <div class="flex gap-2 mb-4">
+            <input
+              v-model="pending"
+              class="flex-1 px-3 py-2 rounded border border-solid border-divider bg-surface text-on-surface text-sm"
+              placeholder="Add a skill..."
+              @keyup.enter="add"
+            >
+
+            <button
+              class="px-4 py-2 rounded bg-primary text-on-primary text-sm font-medium"
+              @click="add"
+            >
+              Add
+            </button>
+          </div>
+        </div>
+
+        <div class="flex gap-2">
+          <button
+            class="flex-1 py-2 rounded font-medium transition-colors"
+            :class="following ? 'bg-surface-tint text-on-surface' : 'bg-primary text-on-primary'"
+            @click="toggle"
+          >
+            {{ following ? 'Following' : 'Follow' }}
+          </button>
+
+          <button
+            class="px-4 py-2 rounded font-medium border border-solid border-divider text-on-surface transition-colors"
+            @click="editing = !editing"
+          >
+            {{ editing ? 'Done' : 'Edit' }}
+          </button>
+        </div>
+      </div>
+
+      <p v-else class="text-sm text-on-surface-variant">
+        Click to expand
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-7/README.md b/apps/docs/src/skillz/tutorials/vue-basics/step-7/README.md
index 3485b832a..e5510a574 100644
--- a/apps/docs/src/skillz/tutorials/vue-basics/step-7/README.md
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-7/README.md
@@ -3,18 +3,22 @@ hideFiles: true
 hideTabs: true
 hideBreadcrumbs: true
 ---
-# Form inputs
+# Two-way binding
 
-Vue's `v-model` directive creates **two-way bindings** between form inputs and reactive state. v0's `useProxyModel` builds on this same concept for component props.
+The card displays data, but there's no way to edit it. Vue's [`v-model`](https://vuejs.org/guide/essentials/forms.html) directive creates a **two-way binding** between form inputs and reactive state.
+
+## v-model
+
+`v-model` is syntactic sugar for binding `:value` and listening for `@input` events:
 
 ```vue
 <template>
-  <input v-model="message">
-  <p>You typed: {{ message }}</p>
+  <input v-model="name">
+  <p>{{ name }}</p>
 </template>
 ```
 
-`v-model` works on `<input>`, `<textarea>`, `<select>`, and custom components. It's syntactic sugar for binding `:value` and listening for `@input` events.
+Type in the input, and the displayed name updates instantly — including the computed initials in the avatar.
 
 ## Modifiers
 
@@ -25,14 +29,26 @@ Vue's `v-model` directive creates **two-way bindings** between form inputs and r
 ```vue
 <template>
   <input v-model.trim="name">
-  <input v-model.number="age" type="number">
 </template>
 ```
 
-## Try it
+## Select elements
 
-Try typing, selecting, and toggling — watch how all the values stay in sync in the summary below.
+`v-model` works on `<select>` too. The bound ref updates to match the selected `<option>` value:
+
+```vue
+<template>
+  <select v-model="status">
+    <option value="available">Available</option>
+    <option value="busy">Busy</option>
+  </select>
+</template>
+```
+
+> [!TRY] Add `.trim` to the name and role inputs. Add a bio `<textarea>` with `v-model` in the edit form.
 
 ## What's next
 
-Now that you're familiar with Vue's fundamentals, you're ready to explore v0's composables. These building blocks use the same refs, computed properties, and template directives you just practiced — but handle the complex state management for you.
+You've built a fully interactive contact card using Vue's core features — refs, events, computed properties, conditionals, lists, and two-way binding. These are the same building blocks that power every v0 composable.
+
+> [!TIP] v0's `useProxyModel` extends this exact `v-model` concept, making it work seamlessly between parent and child components.
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/meta.json b/apps/docs/src/skillz/tutorials/vue-intermediate/meta.json
new file mode 100644
index 000000000..bc76ea837
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/meta.json
@@ -0,0 +1,10 @@
+{
+  "title": "Vue Intermediate",
+  "description": "Build a notification center while mastering watchers, template refs, lifecycle hooks, and component composition",
+  "level": 2,
+  "track": "essentials",
+  "categories": [],
+  "order": 20,
+  "minutes": 15,
+  "prerequisites": ["vue-basics"]
+}
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-1/App.vue b/apps/docs/src/skillz/tutorials/vue-intermediate/step-1/App.vue
new file mode 100644
index 000000000..ba6248975
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-1/App.vue
@@ -0,0 +1,93 @@
+<script setup>
+  // Utilities
+  import { ref, watch } from 'vue'
+
+  const notifications = ref([
+    { id: 1, text: 'Welcome to your notification center!', read: false },
+    { id: 2, text: 'You have a new follower', read: false },
+    { id: 3, text: 'Your post was liked', read: true },
+  ])
+
+  const unreadCount = ref(0)
+  const debugLog = ref([])
+  let nextId = 4
+
+  // Watch the notifications array and update unread count
+  watch(notifications, list => {
+    unreadCount.value = list.filter(n => !n.read).length
+  }, { immediate: true, deep: true })
+
+  function addNotification () {
+    notifications.value.push({
+      id: nextId++,
+      text: `New notification #${nextId - 1}`,
+      read: false,
+    })
+    debugLog.value.push(`Added notification #${nextId - 1}`)
+  }
+
+  function toggleRead (notification) {
+    notification.read = !notification.read
+    debugLog.value.push(`Toggled #${notification.id} → ${notification.read ? 'read' : 'unread'}`)
+  }
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <div class="flex items-center gap-3 mb-6">
+      <h1 class="text-2xl font-bold">
+        Notifications
+      </h1>
+
+      <span
+        v-if="unreadCount > 0"
+        class="px-2 py-0.5 text-xs font-bold rounded-full bg-error text-on-error"
+      >
+        {{ unreadCount }}
+      </span>
+    </div>
+
+    <button
+      class="px-4 py-2 mb-6 rounded font-medium bg-primary text-on-primary"
+      @click="addNotification"
+    >
+      Add notification
+    </button>
+
+    <ul class="space-y-2 mb-8">
+      <li
+        v-for="n in notifications"
+        :key="n.id"
+        class="p-3 rounded-lg cursor-pointer border border-solid border-divider"
+        :class="n.read ? 'bg-surface' : 'bg-surface-tint'"
+        @click="toggleRead(n)"
+      >
+        <div class="flex items-center justify-between">
+          <span :class="n.read ? 'text-on-surface-variant' : 'text-on-background font-medium'">
+            {{ n.text }}
+          </span>
+
+          <span class="text-xs text-on-surface-variant">
+            {{ n.read ? 'read' : 'unread' }}
+          </span>
+        </div>
+      </li>
+    </ul>
+
+    <div class="p-4 rounded-lg bg-surface text-sm">
+      <h2 class="font-bold mb-2 text-on-surface-variant">
+        Debug log
+      </h2>
+
+      <div v-if="debugLog.length === 0" class="text-on-surface-variant">
+        No events yet
+      </div>
+
+      <div v-else class="space-y-1">
+        <p v-for="(entry, i) in debugLog" :key="i" class="text-on-surface-variant">
+          {{ entry }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-1/README.md b/apps/docs/src/skillz/tutorials/vue-intermediate/step-1/README.md
new file mode 100644
index 000000000..8714226b2
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-1/README.md
@@ -0,0 +1,54 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Watching for Changes
+
+Vue's `watch()` function lets you run code **whenever reactive data changes**. It's perfect for side effects like updating a badge count, logging, or syncing with an external system.
+
+## Basic watch
+
+```vue
+<script setup>
+  import { ref, watch } from 'vue'
+
+  const count = ref(0)
+
+  watch(count, (newVal, oldVal) => {
+    console.log(`Changed from ${oldVal} to ${newVal}`)
+  })
+</script>
+```
+
+The callback fires every time `count` changes.
+
+## Immediate watch
+
+By default, `watch` only fires on **changes**. Pass `{ immediate: true }` to also run the callback right away with the current value:
+
+```vue
+<script setup>
+  watch(count, (val) => {
+    document.title = `(${val}) Notifications`
+  }, { immediate: true })
+</script>
+```
+
+## watchEffect
+
+`watchEffect` automatically tracks **every** reactive dependency used inside it — no need to specify a source:
+
+```vue
+<script setup>
+  import { watchEffect } from 'vue'
+
+  watchEffect(() => {
+    console.log(`Count is now ${count.value}`)
+  })
+</script>
+```
+
+## Try it
+
+The notification feed tracks an unread count. Try adding a notification and watch the badge update. Then add a `watchEffect` that logs the current unread count to the debug panel.
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-2/App.vue b/apps/docs/src/skillz/tutorials/vue-intermediate/step-2/App.vue
new file mode 100644
index 000000000..6356afc79
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-2/App.vue
@@ -0,0 +1,129 @@
+<script setup>
+  // Utilities
+  import { ref, watch } from 'vue'
+
+  const notifications = ref([
+    { id: 1, text: 'Server deployed successfully', read: false, dismissed: false },
+    { id: 2, text: 'New comment on your PR', read: false, dismissed: false },
+    { id: 3, text: 'Build failed — check logs', read: false, dismissed: false },
+  ])
+
+  const statusLog = ref([])
+  let nextId = 4
+
+  // Deep watcher tracks read-status changes inside the array
+  watch(notifications, list => {
+    const readCount = list.filter(n => n.read).length
+    const total = list.filter(n => !n.dismissed).length
+    statusLog.value.push(`Status: ${readCount}/${total} read`)
+  }, { deep: true })
+
+  // Watch for new unread notifications and auto-dismiss after 3s
+  watch(() => notifications.value.filter(n => !n.read && !n.dismissed), (unread, _old, onCleanup) => {
+    const timers = unread.map(n => {
+      return setTimeout(() => {
+        n.dismissed = true
+        statusLog.value.push(`Auto-dismissed #${n.id}`)
+      }, 3000)
+    })
+
+    onCleanup(() => {
+      for (const t of timers) clearTimeout(t)
+    })
+  })
+
+  function addNotification () {
+    notifications.value.push({
+      id: nextId,
+      text: `Alert #${nextId}`,
+      read: false,
+      dismissed: false,
+    })
+    nextId++
+  }
+
+  function markAllRead () {
+    for (const n of notifications.value) {
+      if (!n.dismissed) n.read = true
+    }
+    statusLog.value.push('Marked all as read')
+  }
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-6">
+      Deep Watchers
+    </h1>
+
+    <div class="flex gap-3 mb-6">
+      <button
+        class="px-4 py-2 rounded font-medium bg-primary text-on-primary"
+        @click="addNotification"
+      >
+        Add notification
+      </button>
+
+      <button
+        class="px-4 py-2 rounded font-medium bg-surface-tint text-on-background border border-solid border-divider"
+        @click="markAllRead"
+      >
+        Mark all read
+      </button>
+    </div>
+
+    <ul class="space-y-2 mb-8">
+      <li
+        v-for="n in notifications.filter(n => !n.dismissed)"
+        :key="n.id"
+        class="p-3 rounded-lg border border-solid border-divider flex items-center justify-between"
+        :class="n.read ? 'bg-surface' : 'bg-surface-tint'"
+      >
+        <span :class="n.read ? 'text-on-surface-variant' : 'text-on-background font-medium'">
+          {{ n.text }}
+        </span>
+
+        <div class="flex items-center gap-2">
+          <span v-if="!n.read" class="text-xs text-warning">
+            auto-dismiss in 3s
+          </span>
+
+          <button
+            v-if="!n.read"
+            class="text-xs px-2 py-1 rounded bg-success text-on-success"
+            @click="n.read = true"
+          >
+            Mark read
+          </button>
+
+          <span v-else class="text-xs text-on-surface-variant">
+            read
+          </span>
+        </div>
+      </li>
+
+      <li
+        v-if="notifications.filter(n => !n.dismissed).length === 0"
+        class="p-3 rounded-lg bg-surface text-on-surface-variant text-center"
+      >
+        All notifications dismissed
+      </li>
+    </ul>
+
+    <div class="p-4 rounded-lg bg-surface text-sm">
+      <h2 class="font-bold mb-2 text-on-surface-variant">
+        Watcher log
+      </h2>
+
+      <div v-if="statusLog.length === 0" class="text-on-surface-variant">
+        No changes yet
+      </div>
+
+      <div v-else class="space-y-1 max-h-40 overflow-y-auto">
+        <p v-for="(entry, i) in statusLog" :key="i" class="text-on-surface-variant">
+          {{ entry }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-2/README.md b/apps/docs/src/skillz/tutorials/vue-intermediate/step-2/README.md
new file mode 100644
index 000000000..3c5288322
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-2/README.md
@@ -0,0 +1,46 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Deep Watchers
+
+When watching **objects or arrays**, Vue needs to know whether to track nested changes. A deep watcher observes every property at every depth.
+
+## Deep option
+
+```vue
+<script setup>
+  import { ref, watch } from 'vue'
+
+  const user = ref({ name: 'Alice', settings: { theme: 'dark' } })
+
+  watch(user, (val) => {
+    console.log('User changed:', val.settings.theme)
+  }, { deep: true })
+</script>
+```
+
+Without `{ deep: true }`, mutating `user.value.settings.theme` would **not** trigger the watcher.
+
+## Cleanup with onCleanup
+
+Watchers can set up side effects like timers. Use the `onCleanup` callback to tear them down before the next run:
+
+```vue
+<script setup>
+  watch(source, (val, oldVal, onCleanup) => {
+    const timer = setTimeout(() => {
+      // do something after delay
+    }, 3000)
+
+    onCleanup(() => clearTimeout(timer))
+  })
+</script>
+```
+
+This prevents stale timers from piling up when the source changes rapidly.
+
+## Try it
+
+Notifications auto-dismiss after 3 seconds unless you mark them as read first. The deep watcher tracks read-status changes. Try clicking "Mark all read" before the timer expires.
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-3/App.vue b/apps/docs/src/skillz/tutorials/vue-intermediate/step-3/App.vue
new file mode 100644
index 000000000..fbc40cf06
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-3/App.vue
@@ -0,0 +1,80 @@
+<script setup>
+  // Utilities
+  import { ref, watch, nextTick, useTemplateRef } from 'vue'
+
+  const notifications = ref([
+    { id: 1, text: 'Welcome to the notification center!' },
+    { id: 2, text: 'Scroll behavior is now automatic' },
+    { id: 3, text: 'New items appear at the bottom' },
+    { id: 4, text: 'The list scrolls to show them' },
+    { id: 5, text: 'Try adding more notifications' },
+  ])
+
+  const listEl = useTemplateRef('list')
+  let nextId = 6
+
+  // Auto-scroll to bottom when notifications change
+  watch(notifications, async () => {
+    await nextTick()
+    if (listEl.value) {
+      listEl.value.scrollTop = listEl.value.scrollHeight
+    }
+  }, { deep: true })
+
+  function addNotification () {
+    notifications.value.push({
+      id: nextId,
+      text: `Notification #${nextId} just arrived`,
+    })
+    nextId++
+  }
+
+  function scrollToTop () {
+    if (listEl.value) {
+      listEl.value.scrollTop = 0
+    }
+  }
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-6">
+      Template Refs
+    </h1>
+
+    <div class="flex gap-3 mb-6">
+      <button
+        class="px-4 py-2 rounded font-medium bg-primary text-on-primary"
+        @click="addNotification"
+      >
+        Add notification
+      </button>
+
+      <button
+        class="px-4 py-2 rounded font-medium bg-surface-tint text-on-background border border-solid border-divider"
+        @click="scrollToTop"
+      >
+        Scroll to top
+      </button>
+    </div>
+
+    <div
+      ref="list"
+      class="max-h-64 overflow-y-auto rounded-lg border border-solid border-divider"
+    >
+      <ul class="divide-y divide-divider">
+        <li
+          v-for="n in notifications"
+          :key="n.id"
+          class="p-3 bg-surface"
+        >
+          <span class="text-on-surface">{{ n.text }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <p class="mt-4 text-sm text-on-surface-variant">
+      {{ notifications.length }} notifications in the feed
+    </p>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-3/README.md b/apps/docs/src/skillz/tutorials/vue-intermediate/step-3/README.md
new file mode 100644
index 000000000..661282153
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-3/README.md
@@ -0,0 +1,48 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Grabbing DOM Elements
+
+Sometimes you need direct access to a DOM element — for scrolling, measuring, or focusing. Vue's `useTemplateRef()` gives you a reactive reference to an element in your template.
+
+## useTemplateRef
+
+```vue
+<script setup>
+  import { useTemplateRef } from 'vue'
+
+  const listEl = useTemplateRef('list')
+
+  function scrollToBottom () {
+    listEl.value.scrollTop = listEl.value.scrollHeight
+  }
+</script>
+
+<template>
+  <div ref="list" style="overflow: auto; max-height: 200px">
+    <!-- items -->
+  </div>
+</template>
+```
+
+The string you pass to `useTemplateRef()` must match the `ref` attribute in the template.
+
+## Timing
+
+Template refs are `null` until the component mounts. Always check before accessing:
+
+```vue
+<script setup>
+  import { watch } from 'vue'
+
+  watch(listEl, (el) => {
+    if (el) el.focus()
+  })
+</script>
+```
+
+## Try it
+
+New notifications auto-scroll the list to the bottom. Try adding several notifications and then use the "Scroll to top" button to jump back up.
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-4/App.vue b/apps/docs/src/skillz/tutorials/vue-intermediate/step-4/App.vue
new file mode 100644
index 000000000..a8fcc5e65
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-4/App.vue
@@ -0,0 +1,100 @@
+<script setup>
+  // Utilities
+  import { ref, onMounted, onUnmounted } from 'vue'
+
+  const notifications = ref([])
+  const loading = ref(true)
+  const now = ref(Date.now())
+  let timer
+
+  const mockData = [
+    { id: 1, text: 'Deployment complete', createdAt: Date.now() - 120_000 },
+    { id: 2, text: 'New pull request opened', createdAt: Date.now() - 45_000 },
+    { id: 3, text: 'Tests passed on main', createdAt: Date.now() - 10_000 },
+  ]
+
+  function formatTimeAgo (timestamp) {
+    const seconds = Math.floor((now.value - timestamp) / 1000)
+    if (seconds < 60) return `${seconds}s ago`
+    const minutes = Math.floor(seconds / 60)
+    if (minutes < 60) return `${minutes}m ago`
+    return `${Math.floor(minutes / 60)}h ago`
+  }
+
+  // Simulate loading data on mount
+  onMounted(() => {
+    setTimeout(() => {
+      notifications.value = mockData
+      loading.value = false
+    }, 1500)
+
+    // Update "time ago" every second
+    timer = setInterval(() => {
+      now.value = Date.now()
+    }, 1000)
+  })
+
+  // Clean up the interval on unmount
+  onUnmounted(() => {
+    clearInterval(timer)
+  })
+
+  let nextId = 4
+
+  function addNotification () {
+    notifications.value.unshift({
+      id: nextId++,
+      text: `Alert #${nextId - 1}`,
+      createdAt: Date.now(),
+    })
+  }
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-6">
+      Lifecycle Hooks
+    </h1>
+
+    <button
+      class="px-4 py-2 mb-6 rounded font-medium bg-primary text-on-primary"
+      :disabled="loading"
+      @click="addNotification"
+    >
+      Add notification
+    </button>
+
+    <!-- Loading skeleton -->
+    <div v-if="loading" class="space-y-2">
+      <div
+        v-for="i in 3"
+        :key="i"
+        class="h-14 rounded-lg bg-surface-tint animate-pulse"
+      />
+    </div>
+
+    <!-- Loaded notifications -->
+    <ul v-else class="space-y-2">
+      <li
+        v-for="n in notifications"
+        :key="n.id"
+        class="p-3 rounded-lg bg-surface border border-solid border-divider flex items-center justify-between"
+      >
+        <span class="text-on-surface font-medium">
+          {{ n.text }}
+        </span>
+
+        <span class="text-xs text-on-surface-variant whitespace-nowrap ml-4">
+          {{ formatTimeAgo(n.createdAt) }}
+        </span>
+      </li>
+
+      <li
+        v-if="notifications.length === 0"
+        class="p-3 rounded-lg bg-surface text-on-surface-variant text-center"
+      >
+        No notifications yet
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-4/README.md b/apps/docs/src/skillz/tutorials/vue-intermediate/step-4/README.md
new file mode 100644
index 000000000..a2af96e1c
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-4/README.md
@@ -0,0 +1,52 @@
+---
+hideFiles: true
+hideTabs: true
+hideBreadcrumbs: true
+---
+# Lifecycle Hooks
+
+Vue components go through a lifecycle: creation, mounting, updating, and unmounting. **Lifecycle hooks** let you run code at specific stages.
+
+## onMounted
+
+Runs after the component's DOM is ready. Perfect for fetching data or setting up timers:
+
+```vue
+<script setup>
+  import { ref, onMounted } from 'vue'
+
+  const data = ref(null)
+
+  onMounted(async () => {
+    data.value = await fetchData()
+  })
+</script>
+```
+
+## onUnmounted
+
+Runs when the component is removed from the DOM. Use it to clean up timers, listeners, or subscriptions:
+
+```vue
+<script setup>
+  import { onMounted, onUnmounted } from 'vue'
+
+  let interval
+
+  onMounted(() => {
+    interval = setInterval(() => {
+      // update "time ago" display
+    }, 1000)
+  })
+
+  onUnmounted(() => {
+    clearInterval(interval)
+  })
+</script>
+```
+
+Always clean up what you create — leaked timers cause memory issues and unexpected behavior.
+
+## Try it
+
+Notifications load after a brief delay to simulate a network request, showing a loading skeleton. Each notification displays a "time ago" label that updates every second. Try adding an `onBeforeUnmount` log to the debug panel.
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-5/App.vue b/apps/docs/src/skillz/tutorials/vue-intermediate/step-5/App.vue
new file mode 100644
index 000000000..fee3c6efb
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-5/App.vue
@@ -0,0 +1,89 @@
+<script setup>
+  // Components
+  import NotificationItem from './NotificationItem.vue'
+
+  // Utilities
+  import { ref, onMounted } from 'vue'
+
+  const notifications = ref([])
+  const loading = ref(true)
+  const now = ref(Date.now())
+  let _timer
+  let nextId = 4
+
+  const mockData = [
+    { id: 1, text: 'Deployment complete', type: 'success', createdAt: Date.now() - 120_000 },
+    { id: 2, text: 'New pull request opened', type: 'info', createdAt: Date.now() - 45_000 },
+    { id: 3, text: 'Build failed — check logs', type: 'error', createdAt: Date.now() - 10_000 },
+  ]
+
+  function formatTimeAgo (timestamp) {
+    const seconds = Math.floor((now.value - timestamp) / 1000)
+    if (seconds < 60) return `${seconds}s ago`
+    const minutes = Math.floor(seconds / 60)
+    if (minutes < 60) return `${minutes}m ago`
+    return `${Math.floor(minutes / 60)}h ago`
+  }
+
+  onMounted(() => {
+    setTimeout(() => {
+      notifications.value = mockData
+      loading.value = false
+    }, 1500)
+
+    _timer = setInterval(() => {
+      now.value = Date.now()
+    }, 1000)
+  })
+
+  function addNotification () {
+    const types = ['info', 'success', 'warning', 'error']
+    notifications.value.unshift({
+      id: nextId++,
+      text: `Alert #${nextId - 1}`,
+      type: types[Math.floor(Math.random() * types.length)],
+      createdAt: Date.now(),
+    })
+  }
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <h1 class="text-2xl font-bold mb-6">
+      Child Components
+    </h1>
+
+    <button
+      class="px-4 py-2 mb-6 rounded font-medium bg-primary text-on-primary"
+      :disabled="loading"
+      @click="addNotification"
+    >
+      Add notification
+    </button>
+
+    <div v-if="loading" class="space-y-2">
+      <div
+        v-for="i in 3"
+        :key="i"
+        class="h-14 rounded-lg bg-surface-tint animate-pulse"
+      />
+    </div>
+
+    <ul v-else class="space-y-2">
+      <NotificationItem
+        v-for="n in notifications"
+        :key="n.id"
+        :text="n.text"
+        :time="formatTimeAgo(n.createdAt)"
+        :type="n.type"
+      />
+
+      <li
+        v-if="notifications.length === 0"
+        class="p-3 rounded-lg bg-surface text-on-surface-variant text-center"
+      >
+        No notifications
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-5/NotificationItem.vue b/apps/docs/src/skillz/tutorials/vue-intermediate/step-5/NotificationItem.vue
new file mode 100644
index 000000000..5b5ecf3a0
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-5/NotificationItem.vue
@@ -0,0 +1,29 @@
+<script setup>
+  defineProps({
+    text: { type: String, required: true },
+    type: { type: String, default: 'info' },
+    time: { type: String, default: '' },
+  })
+
+  const typeStyles = {
+    info: 'border-l-info',
+    success: 'border-l-success',
+    warning: 'border-l-warning',
+    error: 'border-l-error',
+  }
+</script>
+
+<template>
+  <li
+    class="p-3 rounded-lg bg-surface border border-solid border-divider border-l-3 flex items-center justify-between"
+    :class="typeStyles[type] || typeStyles.info"
+  >
+    <span class="text-on-surface font-medium">
+      {{ text }}
+    </span>
+
+    <span v-if="time" class="text-xs text-on-surface-variant whitespace-nowrap ml-4">
+      {{ time }}
+    </span>
+  </li>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-5/README.md b/apps/docs/src/skillz/tutorials/vue-intermediate/step-5/README.md
new file mode 100644
index 000000000..4006a109f
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-5/README.md
@@ -0,0 +1,52 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: true
+---
+# Child Components
+
+As your UI grows, you'll want to break it into **smaller, reusable pieces**. Vue components accept data from their parent through **props** — declared with `defineProps`.
+
+## defineProps
+
+```vue
+<script setup>
+  const props = defineProps({
+    title: String,
+    urgent: Boolean,
+  })
+</script>
+
+<template>
+  <div :class="{ 'font-bold': urgent }">
+    {{ title }}
+  </div>
+</template>
+```
+
+The parent passes props as attributes:
+
+```vue
+<template>
+  <NotificationItem title="Build failed" urgent />
+</template>
+```
+
+## Prop types
+
+Vue validates props at runtime. Common types: `String`, `Number`, `Boolean`, `Array`, `Object`. You can also set defaults and mark props as required:
+
+```vue
+<script setup>
+  defineProps({
+    text: { type: String, required: true },
+    type: { type: String, default: 'info' },
+  })
+</script>
+```
+
+## Try it
+
+The notification list is now split into `App.vue` and `NotificationItem.vue`. Check both files in the editor. Try adding a `type` prop to `NotificationItem` that changes the accent color based on the notification type (info, success, warning, error).
+
+> [!TIP] v0 components use props just like this. When you write `<Tabs.Item value="home">`, you're passing a prop to a headless component.
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-6/App.vue b/apps/docs/src/skillz/tutorials/vue-intermediate/step-6/App.vue
new file mode 100644
index 000000000..4fa387919
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-6/App.vue
@@ -0,0 +1,111 @@
+<script setup>
+  // Components
+  import NotificationItem from './NotificationItem.vue'
+
+  // Utilities
+  import { ref, onMounted } from 'vue'
+
+  const notifications = ref([])
+  const loading = ref(true)
+  const now = ref(Date.now())
+  let _timer
+  let nextId = 4
+
+  const mockData = [
+    { id: 1, text: 'Deployment complete', type: 'success', read: false, createdAt: Date.now() - 120_000 },
+    { id: 2, text: 'New pull request opened', type: 'info', read: false, createdAt: Date.now() - 45_000 },
+    { id: 3, text: 'Build failed — check logs', type: 'error', read: false, createdAt: Date.now() - 10_000 },
+  ]
+
+  function formatTimeAgo (timestamp) {
+    const seconds = Math.floor((now.value - timestamp) / 1000)
+    if (seconds < 60) return `${seconds}s ago`
+    const minutes = Math.floor(seconds / 60)
+    if (minutes < 60) return `${minutes}m ago`
+    return `${Math.floor(minutes / 60)}h ago`
+  }
+
+  onMounted(() => {
+    setTimeout(() => {
+      notifications.value = mockData
+      loading.value = false
+    }, 1500)
+
+    _timer = setInterval(() => {
+      now.value = Date.now()
+    }, 1000)
+  })
+
+  function addNotification () {
+    const types = ['info', 'success', 'warning', 'error']
+    notifications.value.unshift({
+      id: nextId++,
+      text: `Alert #${nextId - 1}`,
+      type: types[Math.floor(Math.random() * types.length)],
+      read: false,
+      createdAt: Date.now(),
+    })
+  }
+
+  function dismissNotification (id) {
+    notifications.value = notifications.value.filter(n => n.id !== id)
+  }
+
+  function markRead (id) {
+    const n = notifications.value.find(n => n.id === id)
+    if (n) n.read = true
+  }
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <div class="flex items-center gap-3 mb-6">
+      <h1 class="text-2xl font-bold">
+        Emitting Events
+      </h1>
+
+      <span
+        v-if="notifications.some(n => !n.read)"
+        class="px-2 py-0.5 text-xs font-bold rounded-full bg-error text-on-error"
+      >
+        {{ notifications.filter(n => !n.read).length }}
+      </span>
+    </div>
+
+    <button
+      class="px-4 py-2 mb-6 rounded font-medium bg-primary text-on-primary"
+      :disabled="loading"
+      @click="addNotification"
+    >
+      Add notification
+    </button>
+
+    <div v-if="loading" class="space-y-2">
+      <div
+        v-for="i in 3"
+        :key="i"
+        class="h-14 rounded-lg bg-surface-tint animate-pulse"
+      />
+    </div>
+
+    <ul v-else class="space-y-2">
+      <NotificationItem
+        v-for="n in notifications"
+        :key="n.id"
+        :read="n.read"
+        :text="n.text"
+        :time="formatTimeAgo(n.createdAt)"
+        :type="n.type"
+        @dismiss="dismissNotification(n.id)"
+        @mark-read="markRead(n.id)"
+      />
+
+      <li
+        v-if="notifications.length === 0"
+        class="p-3 rounded-lg bg-surface text-on-surface-variant text-center"
+      >
+        No notifications
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-6/NotificationItem.vue b/apps/docs/src/skillz/tutorials/vue-intermediate/step-6/NotificationItem.vue
new file mode 100644
index 000000000..5cc59dd19
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-6/NotificationItem.vue
@@ -0,0 +1,54 @@
+<script setup>
+  defineProps({
+    text: { type: String, required: true },
+    type: { type: String, default: 'info' },
+    read: { type: Boolean, default: false },
+    time: { type: String, default: '' },
+  })
+
+  const emit = defineEmits(['dismiss', 'mark-read'])
+
+  const typeStyles = {
+    info: 'border-l-info',
+    success: 'border-l-success',
+    warning: 'border-l-warning',
+    error: 'border-l-error',
+  }
+</script>
+
+<template>
+  <li
+    class="p-3 rounded-lg border border-solid border-divider border-l-3"
+    :class="[
+      typeStyles[type] || typeStyles.info,
+      read ? 'bg-surface' : 'bg-surface-tint',
+    ]"
+  >
+    <div class="flex items-center justify-between mb-1">
+      <span :class="read ? 'text-on-surface-variant' : 'text-on-surface font-medium'">
+        {{ text }}
+      </span>
+
+      <span v-if="time" class="text-xs text-on-surface-variant whitespace-nowrap ml-4">
+        {{ time }}
+      </span>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        v-if="!read"
+        class="text-xs px-2 py-1 rounded bg-success text-on-success"
+        @click="emit('mark-read')"
+      >
+        Mark read
+      </button>
+
+      <button
+        class="text-xs px-2 py-1 rounded bg-error text-on-error"
+        @click="emit('dismiss')"
+      >
+        Dismiss
+      </button>
+    </div>
+  </li>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-6/README.md b/apps/docs/src/skillz/tutorials/vue-intermediate/step-6/README.md
new file mode 100644
index 000000000..e8ef7f019
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-6/README.md
@@ -0,0 +1,47 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: true
+---
+# Emitting Events
+
+Props flow **down** from parent to child. Events flow **up** from child to parent. Use `defineEmits` to declare the events your component can emit.
+
+## defineEmits
+
+```vue
+<script setup>
+  const emit = defineEmits(['dismiss', 'mark-read'])
+
+  function handleDismiss () {
+    emit('dismiss')
+  }
+</script>
+```
+
+The parent listens with `@`:
+
+```vue
+<template>
+  <NotificationItem
+    @dismiss="removeNotification(n.id)"
+    @mark-read="markAsRead(n.id)"
+  />
+</template>
+```
+
+## Payload
+
+You can pass data with the event:
+
+```vue
+<script setup>
+  const emit = defineEmits(['dismiss'])
+
+  emit('dismiss', { id: 42, reason: 'user action' })
+</script>
+```
+
+## Try it
+
+Each notification now has "Dismiss" and "Mark read" buttons. The child emits events, and the parent handles the state changes. Try adding a `@pin` emit that toggles a pinned state on the notification.
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-7/App.vue b/apps/docs/src/skillz/tutorials/vue-intermediate/step-7/App.vue
new file mode 100644
index 000000000..0b955ba1e
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-7/App.vue
@@ -0,0 +1,128 @@
+<script setup>
+  // Components
+  import NotificationItem from './NotificationItem.vue'
+
+  // Utilities
+  import { ref, onMounted } from 'vue'
+
+  const notifications = ref([])
+  const loading = ref(true)
+  const now = ref(Date.now())
+  let _timer
+  let nextId = 4
+
+  const mockData = [
+    { id: 1, text: 'Deployment complete', type: 'success', read: false, createdAt: Date.now() - 120_000 },
+    { id: 2, text: 'New pull request opened', type: 'info', read: false, createdAt: Date.now() - 45_000 },
+    { id: 3, text: 'Build failed — check logs', type: 'error', read: false, createdAt: Date.now() - 10_000 },
+  ]
+
+  function formatTimeAgo (timestamp) {
+    const seconds = Math.floor((now.value - timestamp) / 1000)
+    if (seconds < 60) return `${seconds}s ago`
+    const minutes = Math.floor(seconds / 60)
+    if (minutes < 60) return `${minutes}m ago`
+    return `${Math.floor(minutes / 60)}h ago`
+  }
+
+  onMounted(() => {
+    setTimeout(() => {
+      notifications.value = mockData
+      loading.value = false
+    }, 1500)
+
+    _timer = setInterval(() => {
+      now.value = Date.now()
+    }, 1000)
+  })
+
+  function addNotification () {
+    const types = ['info', 'success', 'warning', 'error']
+    notifications.value.unshift({
+      id: nextId++,
+      text: `Alert #${nextId - 1}`,
+      type: types[Math.floor(Math.random() * types.length)],
+      read: false,
+      createdAt: Date.now(),
+    })
+  }
+
+  function dismissNotification (id) {
+    notifications.value = notifications.value.filter(n => n.id !== id)
+  }
+
+  function markRead (id) {
+    const n = notifications.value.find(n => n.id === id)
+    if (n) n.read = true
+  }
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <div class="flex items-center gap-3 mb-6">
+      <h1 class="text-2xl font-bold">
+        Slots
+      </h1>
+
+      <span
+        v-if="notifications.some(n => !n.read)"
+        class="px-2 py-0.5 text-xs font-bold rounded-full bg-error text-on-error"
+      >
+        {{ notifications.filter(n => !n.read).length }}
+      </span>
+    </div>
+
+    <button
+      class="px-4 py-2 mb-6 rounded font-medium bg-primary text-on-primary"
+      :disabled="loading"
+      @click="addNotification"
+    >
+      Add notification
+    </button>
+
+    <div v-if="loading" class="space-y-2">
+      <div
+        v-for="i in 3"
+        :key="i"
+        class="h-14 rounded-lg bg-surface-tint animate-pulse"
+      />
+    </div>
+
+    <div v-else class="space-y-2">
+      <NotificationItem
+        v-for="n in notifications"
+        :key="n.id"
+        :read="n.read"
+        :text="n.text"
+        :time="formatTimeAgo(n.createdAt)"
+        :type="n.type"
+        @dismiss="dismissNotification(n.id)"
+        @mark-read="markRead(n.id)"
+      >
+        <template #actions>
+          <button
+            v-if="!n.read"
+            class="text-xs px-2 py-1 rounded bg-success text-on-success"
+            @click="markRead(n.id)"
+          >
+            Mark read
+          </button>
+
+          <button
+            class="text-xs px-2 py-1 rounded bg-error text-on-error"
+            @click="dismissNotification(n.id)"
+          >
+            Dismiss
+          </button>
+        </template>
+      </NotificationItem>
+
+      <div
+        v-if="notifications.length === 0"
+        class="p-3 rounded-lg bg-surface text-on-surface-variant text-center"
+      >
+        No notifications
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-7/NotificationCard.vue b/apps/docs/src/skillz/tutorials/vue-intermediate/step-7/NotificationCard.vue
new file mode 100644
index 000000000..93bc11e06
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-7/NotificationCard.vue
@@ -0,0 +1,33 @@
+<script setup>
+  defineProps({
+    type: { type: String, default: 'info' },
+    read: { type: Boolean, default: false },
+  })
+
+  const typeStyles = {
+    info: 'border-l-info',
+    success: 'border-l-success',
+    warning: 'border-l-warning',
+    error: 'border-l-error',
+  }
+</script>
+
+<template>
+  <div
+    class="p-3 rounded-lg border border-solid border-divider border-l-3"
+    :class="[
+      typeStyles[type] || typeStyles.info,
+      read ? 'bg-surface' : 'bg-surface-tint',
+    ]"
+  >
+    <div class="mb-2">
+      <slot>No notification content</slot>
+    </div>
+
+    <div class="flex gap-2">
+      <slot name="actions">
+        <span class="text-xs text-on-surface-variant">No actions</span>
+      </slot>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-7/NotificationItem.vue b/apps/docs/src/skillz/tutorials/vue-intermediate/step-7/NotificationItem.vue
new file mode 100644
index 000000000..e0672f757
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-7/NotificationItem.vue
@@ -0,0 +1,46 @@
+<script setup>
+  // Components
+  import NotificationCard from './NotificationCard.vue'
+
+  defineProps({
+    text: { type: String, required: true },
+    type: { type: String, default: 'info' },
+    read: { type: Boolean, default: false },
+    time: { type: String, default: '' },
+  })
+
+  defineEmits(['dismiss', 'mark-read'])
+</script>
+
+<template>
+  <NotificationCard :read="read" :type="type">
+    <div class="flex items-center justify-between">
+      <span :class="read ? 'text-on-surface-variant' : 'text-on-surface font-medium'">
+        {{ text }}
+      </span>
+
+      <span v-if="time" class="text-xs text-on-surface-variant whitespace-nowrap ml-4">
+        {{ time }}
+      </span>
+    </div>
+
+    <template #actions>
+      <slot name="actions">
+        <button
+          v-if="!read"
+          class="text-xs px-2 py-1 rounded bg-success text-on-success"
+          @click="$emit('mark-read')"
+        >
+          Mark read
+        </button>
+
+        <button
+          class="text-xs px-2 py-1 rounded bg-error text-on-error"
+          @click="$emit('dismiss')"
+        >
+          Dismiss
+        </button>
+      </slot>
+    </template>
+  </NotificationCard>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-7/README.md b/apps/docs/src/skillz/tutorials/vue-intermediate/step-7/README.md
new file mode 100644
index 000000000..30bf9dbfb
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-7/README.md
@@ -0,0 +1,59 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: false
+---
+# Slots for Flexibility
+
+Props pass **data** to a child. Slots pass **template content**. This lets the parent control what renders inside a child component while the child controls the layout.
+
+## Default slot
+
+```vue
+<!-- NotificationCard.vue -->
+<template>
+  <div class="card">
+    <slot>No content provided</slot>
+  </div>
+</template>
+```
+
+The text inside `<slot>` is **fallback content** — it renders when the parent doesn't provide anything.
+
+## Named slots
+
+Components can have multiple slots. Use `name` to distinguish them:
+
+```vue
+<!-- NotificationCard.vue -->
+<template>
+  <div class="card">
+    <slot />
+    <div class="actions">
+      <slot name="actions">
+        <button>Default action</button>
+      </slot>
+    </div>
+  </div>
+</template>
+```
+
+The parent targets named slots with `#slotName`:
+
+```vue
+<template>
+  <NotificationCard>
+    <p>Notification text</p>
+
+    <template #actions>
+      <button>Custom action</button>
+    </template>
+  </NotificationCard>
+</template>
+```
+
+## Try it
+
+`NotificationCard` wraps each notification with a card layout and an `#actions` slot. Try adding a `#header` slot with a fallback that shows the notification type.
+
+> [!TIP] Slots are v0's primary rendering API. Every headless component exposes slot props that let you control the visual output while v0 handles the behavior.
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-8/App.vue b/apps/docs/src/skillz/tutorials/vue-intermediate/step-8/App.vue
new file mode 100644
index 000000000..9f18188f4
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-8/App.vue
@@ -0,0 +1,147 @@
+<script setup>
+  // Components
+  import NotificationItem from './NotificationItem.vue'
+
+  // Utilities
+  import { ref, provide, onMounted } from 'vue'
+
+  const notifications = ref([])
+  const loading = ref(true)
+  const now = ref(Date.now())
+  let _timer
+  let nextId = 4
+
+  // Theme state — provided to all descendants
+  const compact = ref(false)
+  const accentColor = ref('info')
+
+  provide('notification-theme', {
+    compact,
+    accentColor,
+  })
+
+  const mockData = [
+    { id: 1, text: 'Deployment complete', type: 'success', read: false, createdAt: Date.now() - 120_000 },
+    { id: 2, text: 'New pull request opened', type: 'info', read: false, createdAt: Date.now() - 45_000 },
+    { id: 3, text: 'Build failed — check logs', type: 'error', read: false, createdAt: Date.now() - 10_000 },
+  ]
+
+  const accentOptions = ['info', 'success', 'warning', 'error', 'primary']
+
+  function formatTimeAgo (timestamp) {
+    const seconds = Math.floor((now.value - timestamp) / 1000)
+    if (seconds < 60) return `${seconds}s ago`
+    const minutes = Math.floor(seconds / 60)
+    if (minutes < 60) return `${minutes}m ago`
+    return `${Math.floor(minutes / 60)}h ago`
+  }
+
+  onMounted(() => {
+    setTimeout(() => {
+      notifications.value = mockData
+      loading.value = false
+    }, 1500)
+
+    _timer = setInterval(() => {
+      now.value = Date.now()
+    }, 1000)
+  })
+
+  function addNotification () {
+    const types = ['info', 'success', 'warning', 'error']
+    notifications.value.unshift({
+      id: nextId++,
+      text: `Alert #${nextId - 1}`,
+      type: types[Math.floor(Math.random() * types.length)],
+      read: false,
+      createdAt: Date.now(),
+    })
+  }
+
+  function dismissNotification (id) {
+    notifications.value = notifications.value.filter(n => n.id !== id)
+  }
+
+  function markRead (id) {
+    const n = notifications.value.find(n => n.id === id)
+    if (n) n.read = true
+  }
+</script>
+
+<template>
+  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+    <div class="flex items-center gap-3 mb-6">
+      <h1 class="text-2xl font-bold">
+        Provide / Inject
+      </h1>
+
+      <span
+        v-if="notifications.some(n => !n.read)"
+        class="px-2 py-0.5 text-xs font-bold rounded-full bg-error text-on-error"
+      >
+        {{ notifications.filter(n => !n.read).length }}
+      </span>
+    </div>
+
+    <!-- Theme controls -->
+    <div class="flex flex-wrap items-center gap-4 mb-6 p-4 rounded-lg bg-surface border border-solid border-divider">
+      <label class="flex items-center gap-2 cursor-pointer">
+        <input
+          v-model="compact"
+          class="w-4 h-4"
+          type="checkbox"
+        >
+        <span class="text-sm font-medium">Compact mode</span>
+      </label>
+
+      <div class="flex items-center gap-2">
+        <span class="text-sm font-medium">Accent:</span>
+
+        <select
+          v-model="accentColor"
+          class="px-2 py-1 rounded border border-solid border-divider bg-surface text-on-surface text-sm"
+        >
+          <option v-for="color in accentOptions" :key="color" :value="color">
+            {{ color }}
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <button
+      class="px-4 py-2 mb-6 rounded font-medium bg-primary text-on-primary"
+      :disabled="loading"
+      @click="addNotification"
+    >
+      Add notification
+    </button>
+
+    <div v-if="loading" class="space-y-2">
+      <div
+        v-for="i in 3"
+        :key="i"
+        class="h-14 rounded-lg bg-surface-tint animate-pulse"
+      />
+    </div>
+
+    <div v-else class="space-y-2">
+      <NotificationItem
+        v-for="n in notifications"
+        :key="n.id"
+        :read="n.read"
+        :text="n.text"
+        :time="formatTimeAgo(n.createdAt)"
+        :type="n.type"
+        @dismiss="dismissNotification(n.id)"
+        @mark-read="markRead(n.id)"
+      />
+
+      <div
+        v-if="notifications.length === 0"
+        class="p-3 rounded-lg bg-surface text-on-surface-variant text-center"
+      >
+        No notifications
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-8/NotificationCard.vue b/apps/docs/src/skillz/tutorials/vue-intermediate/step-8/NotificationCard.vue
new file mode 100644
index 000000000..24339eb19
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-8/NotificationCard.vue
@@ -0,0 +1,47 @@
+<script setup>
+  // Utilities
+  import { inject, computed } from 'vue'
+
+  const props = defineProps({
+    type: { type: String, default: 'info' },
+    read: { type: Boolean, default: false },
+  })
+
+  const theme = inject('notification-theme', {
+    compact: false,
+    accentColor: 'info',
+  })
+
+  const borderClass = computed(() => {
+    const color = theme.accentColor?.value || props.type
+    const map = {
+      info: 'border-l-info',
+      success: 'border-l-success',
+      warning: 'border-l-warning',
+      error: 'border-l-error',
+      primary: 'border-l-primary',
+    }
+    return map[color] || map.info
+  })
+</script>
+
+<template>
+  <div
+    class="rounded-lg border border-solid border-divider border-l-3"
+    :class="[
+      borderClass,
+      read ? 'bg-surface' : 'bg-surface-tint',
+      theme.compact?.value ? 'p-2' : 'p-3',
+    ]"
+  >
+    <div :class="theme.compact?.value ? 'mb-1' : 'mb-2'">
+      <slot>No notification content</slot>
+    </div>
+
+    <div class="flex gap-2">
+      <slot name="actions">
+        <span class="text-xs text-on-surface-variant">No actions</span>
+      </slot>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-8/NotificationItem.vue b/apps/docs/src/skillz/tutorials/vue-intermediate/step-8/NotificationItem.vue
new file mode 100644
index 000000000..cf9b8f176
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-8/NotificationItem.vue
@@ -0,0 +1,57 @@
+<script setup>
+  // Components
+  import NotificationCard from './NotificationCard.vue'
+
+  // Utilities
+  import { inject } from 'vue'
+
+  defineProps({
+    text: { type: String, required: true },
+    type: { type: String, default: 'info' },
+    read: { type: Boolean, default: false },
+    time: { type: String, default: '' },
+  })
+
+  defineEmits(['dismiss', 'mark-read'])
+
+  const theme = inject('notification-theme', {
+    compact: false,
+    accentColor: 'info',
+  })
+</script>
+
+<template>
+  <NotificationCard :read="read" :type="type">
+    <div class="flex items-center justify-between">
+      <span
+        :class="[
+          read ? 'text-on-surface-variant' : 'text-on-surface font-medium',
+          theme.compact?.value ? 'text-sm' : '',
+        ]"
+      >
+        {{ text }}
+      </span>
+
+      <span v-if="time" class="text-xs text-on-surface-variant whitespace-nowrap ml-4">
+        {{ time }}
+      </span>
+    </div>
+
+    <template #actions>
+      <button
+        v-if="!read"
+        class="text-xs px-2 py-1 rounded bg-success text-on-success"
+        @click="$emit('mark-read')"
+      >
+        Mark read
+      </button>
+
+      <button
+        class="text-xs px-2 py-1 rounded bg-error text-on-error"
+        @click="$emit('dismiss')"
+      >
+        Dismiss
+      </button>
+    </template>
+  </NotificationCard>
+</template>
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-8/README.md b/apps/docs/src/skillz/tutorials/vue-intermediate/step-8/README.md
new file mode 100644
index 000000000..0675d2b60
--- /dev/null
+++ b/apps/docs/src/skillz/tutorials/vue-intermediate/step-8/README.md
@@ -0,0 +1,51 @@
+---
+hideFiles: false
+hideTabs: false
+hideBreadcrumbs: false
+---
+# Sharing State
+
+Props work great for parent-child communication, but what about deeply nested components? Passing props through every layer is called **prop drilling** — and it gets tedious fast.
+
+## provide / inject
+
+`provide` makes a value available to **all descendants**, no matter how deep. `inject` retrieves it:
+
+```vue
+<!-- Parent -->
+<script setup>
+  import { provide, ref } from 'vue'
+
+  const theme = ref({ compact: false, accent: 'blue' })
+  provide('theme', theme)
+</script>
+```
+
+```vue
+<!-- Any descendant -->
+<script setup>
+  import { inject } from 'vue'
+
+  const theme = inject('theme')
+</script>
+```
+
+## Reactivity
+
+When you provide a `ref`, injecting components **automatically react** to changes. This is what makes provide/inject powerful for shared UI state like themes, locales, or configuration.
+
+## Default values
+
+If no ancestor provides the key, `inject` returns `undefined` unless you pass a default:
+
+```vue
+<script setup>
+  const theme = inject('theme', { compact: false, accent: 'info' })
+</script>
+```
+
+## Try it
+
+The App provides a notification theme (compact mode and accent color). Toggle the settings and watch how `NotificationItem` and `NotificationCard` react — without any props being passed through the tree. Try adding a `showTimestamps` boolean to the provided theme.
+
+> [!TIP] This is exactly how v0 works internally. `createContext` is a type-safe wrapper around provide/inject that ensures components can share state without prop drilling.
diff --git a/apps/docs/src/typed-router.d.ts b/apps/docs/src/typed-router.d.ts
index fcc4255a0..a840df5f7 100644
--- a/apps/docs/src/typed-router.d.ts
+++ b/apps/docs/src/typed-router.d.ts
@@ -464,13 +464,6 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
-    '/editor.tutorial.[id]': RouteRecordInfo<
-      '/editor.tutorial.[id]',
-      '/editor/tutorial/:id',
-      { id: ParamValue<true> },
-      { id: ParamValue<false> },
-      | never
-    >,
     '/guide/': RouteRecordInfo<
       '/guide/',
       '/guide',
@@ -681,6 +674,13 @@ declare module 'vue-router/auto-routes' {
       { id: ParamValue<false> },
       | never
     >,
+    '/skillz.tutorial.[id]': RouteRecordInfo<
+      '/skillz.tutorial.[id]',
+      '/skillz/tutorial/:id',
+      { id: ParamValue<true> },
+      { id: ParamValue<false> },
+      | never
+    >,
     '/storybook/': RouteRecordInfo<
       '/storybook/',
       '/storybook',
@@ -1086,12 +1086,6 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
-    'src/pages/editor.tutorial.[id].vue': {
-      routes:
-        | '/editor.tutorial.[id]'
-      views:
-        | never
-    }
     'src/pages/guide/index.md': {
       routes:
         | '/guide/'
@@ -1272,6 +1266,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/skillz.tutorial.[id].vue': {
+      routes:
+        | '/skillz.tutorial.[id]'
+      views:
+        | never
+    }
     'src/pages/storybook/index.md': {
       routes:
         | '/storybook/'

From 8d69aeb325ea4123b3ef4ef7430fadf945d9f7e2 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 17 Feb 2026 18:17:45 -0600
Subject: [PATCH 19/39] docs(editor): add horizontal drag-scroll carousel for
 skill cards

Add carousel view mode for skill card decks with drag-to-scroll,
CSS fade masks on edges, and right-edge viewport bleed. Persisted
via carousel setting in useSettings.
---
 apps/docs/src/components/skillz/SkillCard.vue |   2 +-
 .../src/components/skillz/SkillCardDeck.vue   | 113 +++++++++++++++++-
 apps/docs/src/composables/useSettings.ts      |  12 +-
 3 files changed, 121 insertions(+), 6 deletions(-)

diff --git a/apps/docs/src/components/skillz/SkillCard.vue b/apps/docs/src/components/skillz/SkillCard.vue
index a78d7b121..eda047314 100644
--- a/apps/docs/src/components/skillz/SkillCard.vue
+++ b/apps/docs/src/components/skillz/SkillCard.vue
@@ -28,7 +28,7 @@
 
 <template>
   <DocsCard
-    class="flex flex-col h-full"
+    class="flex flex-col"
     :class="{ 'border-success': done }"
     :disabled="isLocked"
     hoverable
diff --git a/apps/docs/src/components/skillz/SkillCardDeck.vue b/apps/docs/src/components/skillz/SkillCardDeck.vue
index 3babb6249..f74e39591 100644
--- a/apps/docs/src/components/skillz/SkillCardDeck.vue
+++ b/apps/docs/src/components/skillz/SkillCardDeck.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
+  // Framework
+  import { useResizeObserver } from '@vuetify/v0'
+
   // Components
   import SkillCard from './SkillCard.vue'
 
+  // Composables
+  import { useSettings } from '@/composables/useSettings'
+
   // Utilities
-  import { computed } from 'vue'
+  import { computed, shallowRef, useTemplateRef } from 'vue'
 
   // Types
   import type { SkillLevel, SkillMeta } from '@/types/skill'
@@ -17,6 +23,7 @@
   }>()
 
   const store = useSkillzStore()
+  const { carousel } = useSettings()
 
   // Group skills by level, available first then locked
   const levels: SkillLevel[] = [1, 2, 3]
@@ -35,14 +42,96 @@
         }),
     })).filter(g => g.skills.length > 0)
   })
+
+  // Calculate right offset to extend carousel to viewport edge
+  const deckRef = useTemplateRef<HTMLElement>('deck')
+  const rightOffset = shallowRef(16)
+
+  useResizeObserver(deckRef, () => {
+    if (!deckRef.value) return
+    const rect = deckRef.value.getBoundingClientRect()
+    rightOffset.value = document.documentElement.clientWidth - rect.right
+  })
+
+  // Drag scroll state (non-reactive per-interaction tracking)
+  let activeEl: HTMLElement | null = null
+  let dragStartX = 0
+  let dragScrollLeft = 0
+  let didDrag = false
+  const dragging = shallowRef(false)
+
+  function onPointerDown (e: PointerEvent) {
+    const el = e.currentTarget as HTMLElement
+    activeEl = el
+    dragging.value = true
+    didDrag = false
+    dragStartX = e.pageX - el.offsetLeft
+    dragScrollLeft = el.scrollLeft
+  }
+
+  function onPointerMove (e: PointerEvent) {
+    if (!activeEl || !dragging.value) return
+    e.preventDefault()
+    const x = e.pageX - activeEl.offsetLeft
+    const walk = x - dragStartX
+    if (Math.abs(walk) > 3) didDrag = true
+    activeEl.scrollLeft = dragScrollLeft - walk
+  }
+
+  function onPointerUp () {
+    activeEl = null
+    dragging.value = false
+  }
+
+  // Track which levels have been scrolled (for left fade mask)
+  const scrolledLevels = shallowRef(new Set<SkillLevel>())
+
+  function onScroll (e: Event, level: SkillLevel) {
+    const el = e.currentTarget as HTMLElement
+    const isScrolled = el.scrollLeft > 0
+    if (scrolledLevels.value.has(level) !== isScrolled) {
+      const next = new Set(scrolledLevels.value)
+      if (isScrolled) next.add(level)
+      else next.delete(level)
+      scrolledLevels.value = next
+    }
+  }
+
+  function onClickCapture (e: MouseEvent) {
+    if (didDrag) {
+      e.preventDefault()
+      e.stopPropagation()
+      didDrag = false
+    }
+  }
 </script>
 
 <template>
-  <div v-if="skillsByLevel.length > 0" class="mt-8 flex flex-col gap-10">
+  <div v-if="skillsByLevel.length > 0" ref="deck" class="mt-8 flex flex-col gap-10">
     <div v-for="{ level, meta, skills } in skillsByLevel" :key="level">
       <h2 class="m-0 mb-1 text-xl">{{ meta.label }}</h2>
+
       <p class="m-0 mb-4 text-sm text-on-surface-variant">{{ meta.title }}</p>
-      <div class="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4">
+
+      <!-- Carousel layout -->
+      <div
+        v-if="carousel"
+        class="carousel-scroll flex gap-4 overflow-x-auto touch-pan-x"
+        :class="[dragging ? 'cursor-grabbing select-none' : 'cursor-grab', scrolledLevels.has(level) && 'is-scrolled']"
+        :style="{ marginRight: `-${rightOffset}px`, paddingRight: '1rem' }"
+        @click.capture="onClickCapture"
+        @dragstart.prevent
+        @pointercancel="onPointerUp"
+        @pointerdown="onPointerDown"
+        @pointermove="onPointerMove"
+        @pointerup="onPointerUp"
+        @scroll="onScroll($event, level)"
+      >
+        <SkillCard v-for="skill in skills" :key="skill.id" class="shrink-0 w-[280px]" :skill="skill" />
+      </div>
+
+      <!-- Grid layout -->
+      <div v-else class="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4">
         <SkillCard v-for="skill in skills" :key="skill.id" :skill="skill" />
       </div>
     </div>
@@ -52,3 +141,21 @@
     <p>No skills available yet. Check back soon!</p>
   </div>
 </template>
+
+<style scoped>
+  .carousel-scroll {
+    scrollbar-width: none;
+  }
+
+  .carousel-scroll::-webkit-scrollbar {
+    display: none;
+  }
+
+  .carousel-scroll {
+    mask-image: linear-gradient(to right, black, black calc(100% - 4rem), transparent);
+  }
+
+  .carousel-scroll.is-scrolled {
+    mask-image: linear-gradient(to right, transparent, black 4rem, black calc(100% - 4rem), transparent);
+  }
+</style>
diff --git a/apps/docs/src/composables/useSettings.ts b/apps/docs/src/composables/useSettings.ts
index dfbb957dd..41c424d96 100644
--- a/apps/docs/src/composables/useSettings.ts
+++ b/apps/docs/src/composables/useSettings.ts
@@ -24,6 +24,7 @@ export interface DocSettings {
   showDotGrid: boolean
   showMeshTransition: boolean
   showBgGlass: boolean
+  carousel: boolean
 }
 
 export interface SettingsContext {
@@ -44,6 +45,7 @@ export interface SettingsContext {
   showDotGrid: ShallowRef<boolean>
   showMeshTransition: ShallowRef<boolean>
   showBgGlass: ShallowRef<boolean>
+  carousel: ShallowRef<boolean>
   hasChanges: ShallowRef<boolean>
   open: () => void
   close: () => void
@@ -63,6 +65,7 @@ const DEFAULTS: DocSettings = {
   showDotGrid: true,
   showMeshTransition: true,
   showBgGlass: true,
+  carousel: true,
 }
 
 // Create context
@@ -119,6 +122,7 @@ export function createSettingsContext (): SettingsContext {
   const showDotGrid = shallowRef(DEFAULTS.showDotGrid)
   const showMeshTransition = shallowRef(DEFAULTS.showMeshTransition)
   const showBgGlass = shallowRef(DEFAULTS.showBgGlass)
+  const carousel = shallowRef(DEFAULTS.carousel)
 
   // Load stored preferences
   loadSetting(storage, 'lineWrap', lineWrap)
@@ -132,9 +136,10 @@ export function createSettingsContext (): SettingsContext {
   loadSetting(storage, 'showDotGrid', showDotGrid)
   loadSetting(storage, 'showMeshTransition', showMeshTransition)
   loadSetting(storage, 'showBgGlass', showBgGlass)
+  loadSetting(storage, 'carousel', carousel)
 
   // Persist on change
-  const settings = { lineWrap, reduceMotion, packageManager, showInlineApi, showSkillFilter, showThemeToggle, showSocialLinks, collapsibleNav, showDotGrid, showMeshTransition, showBgGlass }
+  const settings = { lineWrap, reduceMotion, packageManager, showInlineApi, showSkillFilter, showThemeToggle, showSocialLinks, collapsibleNav, showDotGrid, showMeshTransition, showBgGlass, carousel }
   for (const [key, ref] of Object.entries(settings)) {
     watch(ref, val => storage.set(key, val))
   }
@@ -163,7 +168,8 @@ export function createSettingsContext (): SettingsContext {
     collapsibleNav.value !== DEFAULTS.collapsibleNav ||
     showDotGrid.value !== DEFAULTS.showDotGrid ||
     showMeshTransition.value !== DEFAULTS.showMeshTransition ||
-    showBgGlass.value !== DEFAULTS.showBgGlass
+    showBgGlass.value !== DEFAULTS.showBgGlass ||
+    carousel.value !== DEFAULTS.carousel
   ))
 
   // Track trigger element for focus restoration
@@ -204,6 +210,7 @@ export function createSettingsContext (): SettingsContext {
     showDotGrid.value = DEFAULTS.showDotGrid
     showMeshTransition.value = DEFAULTS.showMeshTransition
     showBgGlass.value = DEFAULTS.showBgGlass
+    carousel.value = DEFAULTS.carousel
   }
 
   return {
@@ -222,6 +229,7 @@ export function createSettingsContext (): SettingsContext {
     showDotGrid,
     showMeshTransition,
     showBgGlass,
+    carousel,
     hasChanges,
     open,
     close,

From 96a0bba2cb619e722574cd638ec7c6cec748fb54 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 17 Feb 2026 18:57:53 -0600
Subject: [PATCH 20/39] docs(editor): carousel arrows, keyboard nav, fade
 masks, and a11y improvements

Add hover arrows for click-to-scroll, left/right keyboard navigation
between cards, reactive fade masks based on scroll position, and
focus-visible styles. Replace querySelector usage with useTemplateRef,
add immediate option to useResizeObserver.
---
 apps/docs/src/components/docs/DocsCard.vue    |   2 +-
 .../src/components/skillz/SkillCardDeck.vue   | 166 +++++++++++++++---
 2 files changed, 138 insertions(+), 30 deletions(-)

diff --git a/apps/docs/src/components/docs/DocsCard.vue b/apps/docs/src/components/docs/DocsCard.vue
index dbb7afd03..02300587c 100644
--- a/apps/docs/src/components/docs/DocsCard.vue
+++ b/apps/docs/src/components/docs/DocsCard.vue
@@ -61,7 +61,7 @@
     class="p-4 border border-divider rounded-lg bg-surface no-underline text-inherit transition-[border-color,box-shadow] duration-200"
     :class="{
       'opacity-60 cursor-not-allowed': disabled,
-      'hover:border-primary hover:shadow-md cursor-pointer': isInteractive && !disabled,
+      'hover:border-primary hover:shadow-md cursor-pointer focus-visible:outline-2 focus-visible:outline-primary focus-visible:-outline-offset-2': isInteractive && !disabled,
     }"
     v-bind="linkProps"
   >
diff --git a/apps/docs/src/components/skillz/SkillCardDeck.vue b/apps/docs/src/components/skillz/SkillCardDeck.vue
index f74e39591..c6f00a2e6 100644
--- a/apps/docs/src/components/skillz/SkillCardDeck.vue
+++ b/apps/docs/src/components/skillz/SkillCardDeck.vue
@@ -9,7 +9,7 @@
   import { useSettings } from '@/composables/useSettings'
 
   // Utilities
-  import { computed, shallowRef, useTemplateRef } from 'vue'
+  import { computed, nextTick, onMounted, shallowRef, useTemplateRef, watch } from 'vue'
 
   // Types
   import type { SkillLevel, SkillMeta } from '@/types/skill'
@@ -43,15 +43,18 @@
     })).filter(g => g.skills.length > 0)
   })
 
-  // Calculate right offset to extend carousel to viewport edge
+  // Template refs
   const deckRef = useTemplateRef<HTMLElement>('deck')
+  const scrollerRefs = useTemplateRef<HTMLElement[]>('scrollers')
+
+  // Calculate right offset to extend carousel to viewport edge
   const rightOffset = shallowRef(16)
 
   useResizeObserver(deckRef, () => {
     if (!deckRef.value) return
     const rect = deckRef.value.getBoundingClientRect()
     rightOffset.value = document.documentElement.clientWidth - rect.right
-  })
+  }, { immediate: true })
 
   // Drag scroll state (non-reactive per-interaction tracking)
   let activeEl: HTMLElement | null = null
@@ -83,18 +86,76 @@
     dragging.value = false
   }
 
-  // Track which levels have been scrolled (for left fade mask)
+  // Track scroll state per level (for fade masks and arrow visibility)
   const scrolledLevels = shallowRef(new Set<SkillLevel>())
+  const atEndLevels = shallowRef(new Set<SkillLevel>())
 
-  function onScroll (e: Event, level: SkillLevel) {
-    const el = e.currentTarget as HTMLElement
+  function updateScrollState (el: HTMLElement, level: SkillLevel) {
     const isScrolled = el.scrollLeft > 0
+    const isAtEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1
+
     if (scrolledLevels.value.has(level) !== isScrolled) {
       const next = new Set(scrolledLevels.value)
       if (isScrolled) next.add(level)
       else next.delete(level)
       scrolledLevels.value = next
     }
+
+    if (atEndLevels.value.has(level) !== isAtEnd) {
+      const next = new Set(atEndLevels.value)
+      if (isAtEnd) next.add(level)
+      else next.delete(level)
+      atEndLevels.value = next
+    }
+  }
+
+  function checkAllCarousels () {
+    const scrollers = scrollerRefs.value
+    if (!scrollers) return
+    const levelList = skillsByLevel.value
+    for (const [i, el] of scrollers.entries()) {
+      if (levelList[i]) updateScrollState(el, levelList[i].level)
+    }
+  }
+
+  onMounted(() => nextTick(checkAllCarousels))
+  watch(rightOffset, () => nextTick(checkAllCarousels))
+
+  function maskImage (level: SkillLevel): string | undefined {
+    const left = scrolledLevels.value.has(level)
+    const end = atEndLevels.value.has(level)
+    if (left && end) return 'linear-gradient(to right, transparent, black 4rem)'
+    if (left) return 'linear-gradient(to right, transparent, black 4rem, black calc(100% - 4rem), transparent)'
+    if (!end) return 'linear-gradient(to right, black, black calc(100% - 4rem), transparent)'
+    return undefined
+  }
+
+  function onScroll (e: Event, level: SkillLevel) {
+    updateScrollState(e.currentTarget as HTMLElement, level)
+  }
+
+  function scrollCarousel (level: SkillLevel, direction: -1 | 1) {
+    const index = skillsByLevel.value.findIndex(g => g.level === level)
+    const el = index === -1 ? undefined : scrollerRefs.value?.[index]
+    if (el) {
+      el.scrollBy({ left: direction * 300, behavior: 'smooth' })
+    }
+  }
+
+  function onKeyDown (e: KeyboardEvent) {
+    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return
+
+    const container = e.currentTarget as HTMLElement
+    const focusable = [...container.querySelectorAll<HTMLElement>('a, [tabindex="0"]')]
+    const current = focusable.indexOf(document.activeElement as HTMLElement)
+    if (current === -1) return
+
+    const next = e.key === 'ArrowRight' ? current + 1 : current - 1
+    if (next < 0 || next >= focusable.length) return
+
+    e.preventDefault()
+    focusable[next].focus()
+    focusable[next].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
   }
 
   function onClickCapture (e: MouseEvent) {
@@ -116,18 +177,77 @@
       <!-- Carousel layout -->
       <div
         v-if="carousel"
-        class="carousel-scroll flex gap-4 overflow-x-auto touch-pan-x"
-        :class="[dragging ? 'cursor-grabbing select-none' : 'cursor-grab', scrolledLevels.has(level) && 'is-scrolled']"
+        class="group relative"
         :style="{ marginRight: `-${rightOffset}px`, paddingRight: '1rem' }"
-        @click.capture="onClickCapture"
-        @dragstart.prevent
-        @pointercancel="onPointerUp"
-        @pointerdown="onPointerDown"
-        @pointermove="onPointerMove"
-        @pointerup="onPointerUp"
-        @scroll="onScroll($event, level)"
       >
-        <SkillCard v-for="skill in skills" :key="skill.id" class="shrink-0 w-[280px]" :skill="skill" />
+        <div
+          ref="scrollers"
+          :aria-label="`${meta.label} skills`"
+          class="hide-scrollbar flex gap-4 overflow-x-auto touch-pan-x [scrollbar-width:none]"
+          :class="[dragging ? 'cursor-grabbing select-none' : 'cursor-grab']"
+          role="list"
+          :style="{ maskImage: maskImage(level) }"
+          @click.capture="onClickCapture"
+          @dragstart.prevent
+          @keydown="onKeyDown"
+          @pointercancel="onPointerUp"
+          @pointerdown="onPointerDown"
+          @pointermove="onPointerMove"
+          @pointerup="onPointerUp"
+          @scroll="onScroll($event, level)"
+        >
+          <SkillCard
+            v-for="skill in skills"
+            :key="skill.id"
+            class="shrink-0 w-[280px]"
+            role="listitem"
+            :skill="skill"
+          />
+        </div>
+
+        <!-- Left arrow -->
+        <button
+          v-if="scrolledLevels.has(level)"
+          aria-label="Scroll left"
+          class="absolute left-2 top-50% -translate-y-50% z-1 flex items-center justify-center w-9 h-9 rounded-full border border-divider bg-surface text-on-surface cursor-pointer opacity-0 group-hover:opacity-100 focus-visible:opacity-100 shadow-sm hover:shadow-md transition-[opacity,box-shadow] duration-200"
+          @click="scrollCarousel(level, -1)"
+        >
+          <svg
+            fill="none"
+            height="20"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <polyline points="15 18 9 12 15 6" />
+          </svg>
+        </button>
+
+        <!-- Right arrow -->
+        <button
+          v-if="!atEndLevels.has(level)"
+          aria-label="Scroll right"
+          class="absolute right-2 top-50% -translate-y-50% z-1 flex items-center justify-center w-9 h-9 rounded-full border border-divider bg-surface text-on-surface cursor-pointer opacity-0 group-hover:opacity-100 focus-visible:opacity-100 shadow-sm hover:shadow-md transition-[opacity,box-shadow] duration-200"
+          @click="scrollCarousel(level, 1)"
+        >
+          <svg
+            fill="none"
+            height="20"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+        </button>
       </div>
 
       <!-- Grid layout -->
@@ -143,19 +263,7 @@
 </template>
 
 <style scoped>
-  .carousel-scroll {
-    scrollbar-width: none;
-  }
-
-  .carousel-scroll::-webkit-scrollbar {
+  .hide-scrollbar::-webkit-scrollbar {
     display: none;
   }
-
-  .carousel-scroll {
-    mask-image: linear-gradient(to right, black, black calc(100% - 4rem), transparent);
-  }
-
-  .carousel-scroll.is-scrolled {
-    mask-image: linear-gradient(to right, transparent, black 4rem, black calc(100% - 4rem), transparent);
-  }
 </style>

From ff72d0d7f37e84cd59a698ea3ac6a18c0d0ed147 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 18 Feb 2026 12:35:47 -0600
Subject: [PATCH 21/39] docs(editor): fix tutorial overflow and completion
 redirect

---
 apps/docs/src/pages/skillz.tutorial.[id].vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/docs/src/pages/skillz.tutorial.[id].vue b/apps/docs/src/pages/skillz.tutorial.[id].vue
index 19067a098..4d76d9feb 100644
--- a/apps/docs/src/pages/skillz.tutorial.[id].vue
+++ b/apps/docs/src/pages/skillz.tutorial.[id].vue
@@ -172,7 +172,7 @@
 </script>
 
 <template>
-  <div class="h-screen flex flex-col">
+  <div class="h-screen flex flex-col overflow-hidden">
     <!-- Header -->
     <header class="flex items-center justify-between h-[48px] px-3 border-b border-divider bg-surface shrink-0">
       <div class="flex items-center gap-3">
@@ -331,7 +331,7 @@
         description="You've learned the Vue fundamentals that power every v0 composable. Go explore — or dive into another tutorial when you're ready."
         title="Tutorial Complete"
         @back="showComplete = false"
-        @complete="router.push('/skillz')"
+        @complete="router.push(`/skillz/${tutorialId}`)"
       />
     </div>
   </div>

From fb1982c0f00d5bb9db8876c7b644edfbf6bd77ec Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 18 Feb 2026 13:55:44 -0600
Subject: [PATCH 22/39] docs(editor): prevent sandbox iframe recreation on step
 transitions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace store.setFiles() with incremental in-place file mutations.
store.setFiles() writes to import-map.json, which triggers @vue/repl's
getImportMap() watch → createSandbox() → iframe recreation → volar
language worker restart on every Next/Prev click.

The incremental approach mutates files reactively:
- existing files: update .code in-place, compile only if changed
- new files: store.files[filename] = new ReplFile then pass the Proxy
  (not the raw instance) to compileFile — compileFile destructures
  { compiled } and writes compiled.js; going through the Proxy makes
  the write reactive so updatePreview re-runs correctly
- deleted files: removed from store.files without touching the protected
  import-map.json or tsconfig.json
---
 apps/docs/src/composables/useTutorial.ts | 70 ++++++++++++++++++++----
 1 file changed, 59 insertions(+), 11 deletions(-)

diff --git a/apps/docs/src/composables/useTutorial.ts b/apps/docs/src/composables/useTutorial.ts
index 41fbb35f3..d13a830d8 100644
--- a/apps/docs/src/composables/useTutorial.ts
+++ b/apps/docs/src/composables/useTutorial.ts
@@ -6,7 +6,7 @@ import { useEditorStore } from '@/composables/useEditorStore'
 import { useMarkdown } from '@/composables/useMarkdown'
 
 // Utilities
-import { compileFile } from '@vue/repl'
+import { File as ReplFile, compileFile } from '@vue/repl'
 import { computed, onMounted, shallowRef, watch } from 'vue'
 
 // Types
@@ -113,28 +113,76 @@ export function useTutorial (tutorialId: ComputedRef<string>): UseTutorialReturn
   }
 
   // ── Step loading ─────────────────────────────────────────────────────
+
+  // Files the REPL manages internally — never touch between steps or the
+  // sandbox watch will fire and recreate the iframe.
+  const REPL_PROTECTED = new Set(['import-map.json', 'tsconfig.json'])
+
   async function loadStep (stepIndex: number) {
     const data = await resolveStep(stepIndex)
     if (!data) return
 
-    // Update markdown and options immediately
+    // Update markdown and options immediately (sync, before async compile)
     markdown.value = data.md
     stepOptions.value = data.options
 
     const currentTheme = isDark.value ? 'dark' : 'light'
-    await store.setFiles(
-      {
-        'src/main.ts': createMainTs(currentTheme),
-        'src/uno.config.ts': UNO_CONFIG_TS,
-        ...data.files,
-      },
-      'src/main.ts',
-    )
+
+    // Ensure the sandbox entry point is main.ts, not the default src/App.vue.
+    // updatePreview() reads store.mainFile inside its watchEffect, so setting
+    // this before files are compiled means the sandbox will always bootstrap
+    // from main.ts rather than auto-wrapping App.vue with createApp.
+    store.mainFile = 'src/main.ts'
+
+    // Build normalized next file set (ensure src/ prefix)
+    const nextFiles: Record<string, string> = {}
+    for (const [name, code] of Object.entries({
+      'src/main.ts': createMainTs(currentTheme),
+      'src/uno.config.ts': UNO_CONFIG_TS,
+      ...data.files,
+    })) {
+      nextFiles[name.startsWith('src/') ? name : `src/${name}`] = code
+    }
+
+    // Remove files that belong to the previous step but not this one.
+    // Skipping protected REPL files avoids touching the import map, which
+    // would trigger the Sandbox watch and recreate the iframe.
+    for (const filename of Object.keys(store.files)) {
+      if (REPL_PROTECTED.has(filename)) continue
+      if (!(filename in nextFiles)) delete store.files[filename]
+    }
+
+    // Update existing files in-place or add new ones, compile only what changed.
+    // Mutating .code directly avoids replacing the files reactive object, so
+    // the Sandbox's getImportMap() watch never fires → no iframe recreation →
+    // no volar worker restart.
+    //
+    // IMPORTANT: always pass store.files[filename] (the reactive Proxy) to
+    // compileFile, never the raw ReplFile instance. compileFile destructures
+    // { compiled } from the file parameter — when it writes compiled.js through
+    // a Proxy, Vue tracks the change and re-triggers updatePreview. A raw write
+    // bypasses the Proxy and the preview never updates.
+    const compilePromises: Promise<(string | Error)[]>[] = []
+    for (const [filename, code] of Object.entries(nextFiles)) {
+      const existing = store.files[filename]
+      if (existing) {
+        if (existing.code !== code) {
+          existing.code = code
+          compilePromises.push(compileFile(store, existing))
+        }
+      } else {
+        store.files[filename] = new ReplFile(filename, code)
+        compilePromises.push(compileFile(store, store.files[filename]!))
+      }
+    }
+
     store.files['src/main.ts']!.hidden = true
     store.files['src/uno.config.ts']!.hidden = true
 
+    store.errors = (await Promise.all(compilePromises)).flat()
+
     const firstFile = Object.keys(data.files)[0] ?? 'src/App.vue'
-    store.setActive(firstFile)
+    store.setActive(firstFile.startsWith('src/') ? firstFile : `src/${firstFile}`)
     fileTreeKey.value++
   }
 

From 6967d31fb886a6d5c0f422a814faca521c3e485b Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 18 Feb 2026 15:58:54 -0600
Subject: [PATCH 23/39] docs(editor): tutorial step progress, routing, and
 resume support

- Save step progress to skillz store as user navigates (begin, record, setLastStep)
- Add ?step=N query param support for bookmark, share, and resume
- Resume notification (SkillzResume) now handles tutorial mode with step param
- Back button navigates to /skillz/:id instead of /skillz
- Hide sidebar toggle when stepOptions.hideFiles is true
- Export begin, record, setLastStep from skillz store; extend pendingTour to match tutorials
- Fix SVG width/height lint errors in 5 tutorial step files
---
 apps/docs/src/components.d.ts                 |  1 +
 .../src/components/skillz/SkillzResume.vue    | 13 ++++-
 apps/docs/src/composables/useTutorial.ts      | 38 +++++++++++---
 apps/docs/src/pages/skillz.[id].vue           |  9 +++-
 apps/docs/src/pages/skillz.tutorial.[id].vue  | 37 +++++++++-----
 .../skillz/tutorials/v0-basics/step-7/App.vue | 50 ++++++++++++++++---
 .../skillz/tutorials/v0-basics/step-8/App.vue | 50 ++++++++++++++++---
 .../tutorials/vue-basics/step-5/App.vue       |  2 +
 .../tutorials/vue-basics/step-6/App.vue       |  2 +
 .../tutorials/vue-basics/step-7/App.vue       |  2 +
 apps/docs/src/stores/skillz.ts                | 12 ++++-
 11 files changed, 180 insertions(+), 36 deletions(-)

diff --git a/apps/docs/src/components.d.ts b/apps/docs/src/components.d.ts
index 6312b9cbf..893f92a61 100644
--- a/apps/docs/src/components.d.ts
+++ b/apps/docs/src/components.d.ts
@@ -12,6 +12,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AppAskInline: typeof import('./components/app/AppAskInline.vue')['default']
+    AppBackground: typeof import('./components/app/AppBackground.vue')['default']
     AppBanner: typeof import('./components/app/AppBanner.vue')['default']
     AppBar: typeof import('./components/app/AppBar.vue')['default']
     AppBreadcrumbs: typeof import('./components/app/AppBreadcrumbs.vue')['default']
diff --git a/apps/docs/src/components/skillz/SkillzResume.vue b/apps/docs/src/components/skillz/SkillzResume.vue
index c7a50ad8f..45d3da7f2 100644
--- a/apps/docs/src/components/skillz/SkillzResume.vue
+++ b/apps/docs/src/components/skillz/SkillzResume.vue
@@ -30,7 +30,18 @@
     const pending = store.pendingTour
     if (!pending) return
 
-    const { tour } = pending
+    const { tour, progress } = pending
+
+    if (tour.mode === 'tutorial' && tour.tutorialRoute) {
+      const stepNum = progress.lastStep
+        ? Number.parseInt(progress.lastStep.replace('step-', ''), 10)
+        : 1
+      await router.push({
+        path: tour.tutorialRoute,
+        query: stepNum > 1 ? { step: stepNum } : undefined,
+      })
+      return
+    }
 
     await router.push(tour.startRoute)
 
diff --git a/apps/docs/src/composables/useTutorial.ts b/apps/docs/src/composables/useTutorial.ts
index d13a830d8..8019b0e60 100644
--- a/apps/docs/src/composables/useTutorial.ts
+++ b/apps/docs/src/composables/useTutorial.ts
@@ -17,6 +17,8 @@ import type { ComputedRef, Ref, ShallowRef } from 'vue'
 import { createMainTs, UNO_CONFIG_TS } from '@/data/editor-defaults'
 // Tutorials
 import { getTutorial, parseStepOptions } from '@/skillz/tutorials'
+// Stores
+import { useSkillzStore } from '@/stores/skillz'
 
 export interface UseTutorialReturn {
   store: ReplStore
@@ -36,11 +38,13 @@ export interface UseTutorialReturn {
   stepOptions: ShallowRef<StepOptions>
   nextStep: () => void
   prevStep: () => void
+  complete: () => void
 }
 
-export function useTutorial (tutorialId: ComputedRef<string>): UseTutorialReturn {
+export function useTutorial (tutorialId: ComputedRef<string>, initialStep?: ComputedRef<number>): UseTutorialReturn {
   const theme = useTheme()
   const isDark = theme.isDark
+  const skillz = useSkillzStore()
 
   const { store, replTheme, previewOptions } = useEditorStore(isDark)
 
@@ -66,6 +70,11 @@ export function useTutorial (tutorialId: ComputedRef<string>): UseTutorialReturn
     stepper.prev()
   }
 
+  function complete () {
+    skillz.record(tutorialId.value, `step-${currentStep.value}`)
+    skillz.finish(tutorialId.value)
+  }
+
   // ── Step preloading ──────────────────────────────────────────────────
   const stepCache = new Map<number, { md: string, files: Record<string, string>, options: StepOptions }>()
 
@@ -187,9 +196,15 @@ export function useTutorial (tutorialId: ComputedRef<string>): UseTutorialReturn
   }
 
   // React to step changes
-  watch(() => stepper.selectedIndex.value, async index => {
-    if (index != null) {
-      await loadStep(index)
+  watch(() => stepper.selectedIndex.value, async (newIndex, oldIndex) => {
+    if (newIndex != null) {
+      // Record the previous step as completed when advancing forward
+      if (oldIndex != null && newIndex > oldIndex) {
+        skillz.record(tutorialId.value, `step-${oldIndex + 1}`)
+      }
+      // Track current position so resume can return here
+      skillz.setLastStep(tutorialId.value, `step-${newIndex + 1}`)
+      await loadStep(newIndex)
     }
   })
 
@@ -206,14 +221,22 @@ export function useTutorial (tutorialId: ComputedRef<string>): UseTutorialReturn
     const tutorial = getTutorial(tutorialId.value)
     if (!tutorial || tutorial.steps.length === 0) return
 
+    // Begin progress tracking
+    skillz.begin(tutorialId.value)
+
     // Register steps
     stepper.onboard(
       tutorial.steps.map((_, i) => ({ id: `step-${i + 1}`, value: i })),
     )
-    stepper.first()
 
-    // Load first step
-    await loadStep(0)
+    // Clamp the requested step to valid range (1-indexed from caller)
+    const startIndex = initialStep
+      ? Math.min(Math.max(0, initialStep.value - 1), tutorial.steps.length - 1)
+      : 0
+    stepper.select(`step-${startIndex + 1}`)
+
+    // Load the starting step
+    await loadStep(startIndex)
     isReady.value = true
 
     // Preload remaining steps in background
@@ -238,5 +261,6 @@ export function useTutorial (tutorialId: ComputedRef<string>): UseTutorialReturn
     stepOptions,
     nextStep,
     prevStep,
+    complete,
   }
 }
diff --git a/apps/docs/src/pages/skillz.[id].vue b/apps/docs/src/pages/skillz.[id].vue
index 59e780aeb..cd2b6b577 100644
--- a/apps/docs/src/pages/skillz.[id].vue
+++ b/apps/docs/src/pages/skillz.[id].vue
@@ -75,7 +75,14 @@
 
     // Tutorials navigate directly to the editor
     if (currentTour.mode === 'tutorial' && currentTour.tutorialRoute) {
-      await router.push(currentTour.tutorialRoute)
+      const prog = progress.value
+      const stepNum = prog?.status === 'in-progress' && prog.lastStep
+        ? Number.parseInt(prog.lastStep.replace('step-', ''), 10)
+        : 1
+      await router.push({
+        path: currentTour.tutorialRoute,
+        query: stepNum > 1 ? { step: stepNum } : undefined,
+      })
       return
     }
 
diff --git a/apps/docs/src/pages/skillz.tutorial.[id].vue b/apps/docs/src/pages/skillz.tutorial.[id].vue
index 4d76d9feb..67500389b 100644
--- a/apps/docs/src/pages/skillz.tutorial.[id].vue
+++ b/apps/docs/src/pages/skillz.tutorial.[id].vue
@@ -21,10 +21,7 @@
   import Monaco from '@vue/repl/monaco-editor'
   import { computed, shallowRef, type ShallowRef, watch } from 'vue'
   import '@vue/repl/style.css'
-  import { useRouter } from 'vue-router'
-
-  // Stores
-  import { useSkillzStore } from '@/stores/skillz'
+  import { useRoute, useRouter } from 'vue-router'
 
   definePage({
     meta: {
@@ -32,8 +29,13 @@
     },
   })
 
+  const route = useRoute()
   const params = useParams<{ id: string }>()
   const tutorialId = computed(() => params.value.id)
+  const initialStep = computed(() => {
+    const s = Number.parseInt(String(route.query.step ?? '1'), 10)
+    return Number.isNaN(s) || s < 1 ? 1 : s
+  })
 
   const {
     store,
@@ -43,6 +45,7 @@
     meta,
     html,
     stepLabel,
+    currentStep,
     isFirst,
     isLast,
     isReady,
@@ -50,7 +53,16 @@
     stepOptions,
     nextStep,
     prevStep,
-  } = useTutorial(tutorialId)
+    complete,
+  } = useTutorial(tutorialId, initialStep)
+
+  // Keep ?step query param in sync so refresh/share preserves position
+  watch(currentStep, step => {
+    const current = Number.parseInt(String(route.query.step ?? '1'), 10)
+    if (current !== step) {
+      router.replace({ query: step > 1 ? { step } : undefined })
+    }
+  })
 
   function onNext () {
     if (isLast.value) {
@@ -149,7 +161,6 @@
   )
 
   // ── Completion ──────────────────────────────────────────────────────
-  const skillz = useSkillzStore()
   const stack = useStack()
   const showComplete = shallowRef(false)
   const router = useRouter()
@@ -166,7 +177,7 @@
   })
 
   function onComplete () {
-    skillz.finish(tutorialId.value)
+    complete()
     showComplete.value = true
   }
 </script>
@@ -177,10 +188,10 @@
     <header class="flex items-center justify-between h-[48px] px-3 border-b border-divider bg-surface shrink-0">
       <div class="flex items-center gap-3">
         <RouterLink
-          aria-label="Back to Skillz"
+          aria-label="Back to skill"
           class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors no-underline text-on-surface"
-          title="Back to Skillz"
-          to="/skillz"
+          title="Back to skill"
+          :to="`/skillz/${tutorialId}`"
         >
           <AppIcon icon="arrow-left" :size="18" />
         </RouterLink>
@@ -190,7 +201,7 @@
 
       <div class="flex items-center gap-2">
         <button
-          v-if="!isDesktop"
+          v-if="!isDesktop && !stepOptions.hideFiles"
           aria-label="Toggle files"
           class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
           title="Toggle files"
@@ -200,7 +211,7 @@
         </button>
 
         <button
-          v-if="isDesktop"
+          v-if="isDesktop && !stepOptions.hideFiles"
           aria-label="Toggle sidebar"
           class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
           title="Toggle sidebar"
@@ -249,7 +260,7 @@
       />
 
       <!-- Right column -->
-      <div class="flex flex-col flex-1 min-w-0 min-h-0">
+      <div class="flex flex-col flex-1 min-w-0 min-h-0 bg-background">
         <!-- Editor area -->
         <div
           class="flex min-h-0 min-w-0 overflow-hidden"
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-7/App.vue b/apps/docs/src/skillz/tutorials/v0-basics/step-7/App.vue
index 29021bfe8..e479af316 100644
--- a/apps/docs/src/skillz/tutorials/v0-basics/step-7/App.vue
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-7/App.vue
@@ -97,10 +97,24 @@
                     : 'border-divider bg-surface'"
                 >
                   <Checkbox.Indicator v-slot="{ isMixed }">
-                    <svg v-if="isMixed" class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                    <svg
+                      v-if="isMixed"
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
                       <path d="M2.5 6h7" stroke="currentColor" stroke-linecap="round" stroke-width="2" />
                     </svg>
-                    <svg v-else class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                    <svg
+                      v-else
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
                       <path
                         d="M2 6l3 3 5-6"
                         stroke="currentColor"
@@ -128,7 +142,13 @@
                     : 'border-divider bg-surface'"
                 >
                   <Checkbox.Indicator>
-                    <svg class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
                       <path
                         d="M2 6l3 3 5-6"
                         stroke="currentColor"
@@ -156,7 +176,13 @@
                     : 'border-divider bg-surface'"
                 >
                   <Checkbox.Indicator>
-                    <svg class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
                       <path
                         d="M2 6l3 3 5-6"
                         stroke="currentColor"
@@ -184,7 +210,13 @@
                     : 'border-divider bg-surface'"
                 >
                   <Checkbox.Indicator>
-                    <svg class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
                       <path
                         d="M2 6l3 3 5-6"
                         stroke="currentColor"
@@ -212,7 +244,13 @@
                     : 'border-divider bg-surface'"
                 >
                   <Checkbox.Indicator>
-                    <svg class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
                       <path
                         d="M2 6l3 3 5-6"
                         stroke="currentColor"
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-8/App.vue b/apps/docs/src/skillz/tutorials/v0-basics/step-8/App.vue
index 700cf4a1a..ac24c20f1 100644
--- a/apps/docs/src/skillz/tutorials/v0-basics/step-8/App.vue
+++ b/apps/docs/src/skillz/tutorials/v0-basics/step-8/App.vue
@@ -122,10 +122,24 @@
                     : 'border-divider bg-surface'"
                 >
                   <Checkbox.Indicator v-slot="{ isMixed }">
-                    <svg v-if="isMixed" class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                    <svg
+                      v-if="isMixed"
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
                       <path d="M2.5 6h7" stroke="currentColor" stroke-linecap="round" stroke-width="2" />
                     </svg>
-                    <svg v-else class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                    <svg
+                      v-else
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
                       <path
                         d="M2 6l3 3 5-6"
                         stroke="currentColor"
@@ -153,7 +167,13 @@
                     : 'border-divider bg-surface'"
                 >
                   <Checkbox.Indicator>
-                    <svg class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
                       <path
                         d="M2 6l3 3 5-6"
                         stroke="currentColor"
@@ -181,7 +201,13 @@
                     : 'border-divider bg-surface'"
                 >
                   <Checkbox.Indicator>
-                    <svg class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
                       <path
                         d="M2 6l3 3 5-6"
                         stroke="currentColor"
@@ -209,7 +235,13 @@
                     : 'border-divider bg-surface'"
                 >
                   <Checkbox.Indicator>
-                    <svg class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
                       <path
                         d="M2 6l3 3 5-6"
                         stroke="currentColor"
@@ -237,7 +269,13 @@
                     : 'border-divider bg-surface'"
                 >
                   <Checkbox.Indicator>
-                    <svg class="w-3 h-3" fill="none" viewBox="0 0 12 12">
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                    >
                       <path
                         d="M2 6l3 3 5-6"
                         stroke="currentColor"
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-5/App.vue b/apps/docs/src/skillz/tutorials/vue-basics/step-5/App.vue
index a9bd75dcb..0c3e69538 100644
--- a/apps/docs/src/skillz/tutorials/vue-basics/step-5/App.vue
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-5/App.vue
@@ -45,9 +45,11 @@
           class="w-4 h-4 text-on-surface-variant transition-transform duration-200"
           :class="{ 'rotate-180': open }"
           fill="none"
+          height="16"
           stroke="currentColor"
           stroke-width="2"
           viewBox="0 0 24 24"
+          width="16"
         >
           <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
         </svg>
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-6/App.vue b/apps/docs/src/skillz/tutorials/vue-basics/step-6/App.vue
index 4d42786c3..a2b868c41 100644
--- a/apps/docs/src/skillz/tutorials/vue-basics/step-6/App.vue
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-6/App.vue
@@ -55,9 +55,11 @@
           class="w-4 h-4 text-on-surface-variant transition-transform duration-200"
           :class="{ 'rotate-180': open }"
           fill="none"
+          height="16"
           stroke="currentColor"
           stroke-width="2"
           viewBox="0 0 24 24"
+          width="16"
         >
           <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
         </svg>
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-7/App.vue b/apps/docs/src/skillz/tutorials/vue-basics/step-7/App.vue
index 3e3aa787c..32e09aaf2 100644
--- a/apps/docs/src/skillz/tutorials/vue-basics/step-7/App.vue
+++ b/apps/docs/src/skillz/tutorials/vue-basics/step-7/App.vue
@@ -74,9 +74,11 @@
           class="w-4 h-4 text-on-surface-variant transition-transform duration-200"
           :class="{ 'rotate-180': open }"
           fill="none"
+          height="16"
           stroke="currentColor"
           stroke-width="2"
           viewBox="0 0 24 24"
+          width="16"
         >
           <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
         </svg>
diff --git a/apps/docs/src/stores/skillz.ts b/apps/docs/src/stores/skillz.ts
index da3ba00fe..94ac218a0 100644
--- a/apps/docs/src/stores/skillz.ts
+++ b/apps/docs/src/stores/skillz.ts
@@ -112,6 +112,11 @@ export const useSkillzStore = defineStore('skillz', () => {
     update(id, { status: 'completed', completedAt: Date.now() })
   }
 
+  function setLastStep (id: string, stepId: string): void {
+    if (!data.value.tours[id]) return
+    update(id, { lastStep: stepId })
+  }
+
   function reset (id?: string): void {
     if (id) {
       delete data.value.tours[id]
@@ -185,12 +190,12 @@ export const useSkillzStore = defineStore('skillz', () => {
   const items = computed(() => [...discovery.tours.values(), ...tutorialSkills])
   const done = computed(() => active.value ? steps(active.value) : [])
 
-  // Find any tour that was started but not completed (and not currently active)
+  // Find any skill that was started but not completed (and not currently active)
   const pendingTour = computed(() => {
     if (active.value) return null
     for (const [id, progress] of Object.entries(data.value.tours)) {
       if (progress.status === 'in-progress') {
-        const tour = discovery.tours.get(id)
+        const tour = discovery.tours.get(id) ?? tutorialSkills.find(s => s.id === id)
         if (tour) return { tour, progress }
       }
     }
@@ -205,6 +210,9 @@ export const useSkillzStore = defineStore('skillz', () => {
     finish,
     reset,
     dismiss,
+    begin,
+    record,
+    setLastStep,
 
     // Queries
     get,

From 13d1034e1d8d273f4fcf6eba6cbc21ff6e461f82 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 18 Feb 2026 22:29:01 -0600
Subject: [PATCH 24/39] docs(editor): playground intro panel, url hash state,
 and iframe fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rename editor → playground (/playground route, nav item at order 1.15)
- Add EditorIntroPanel with markdown content, DocsCallout/DocsMarkup
  mounting, close button, and useStorage persistence
- Extract useMarkdownMount composable shared by intro and tutorial panels
- Fix useMarkdown table/callout renderers to parse inline markdown
  (backticks, links, bold) via a separate sync Marked instance
- Add TOUR callout support to useMarkdown + useMarkdownMount
- Encode editor state (files + active file) to URL hash on change;
  restore active file on load; backwards-compat with legacy hash format
- Patch @vue/repl to suppress Symbol(props) injection warn and skip
  internal Sandbox when store.showOutput is false (removes duplicate
  iframe and allow-scripts+allow-same-origin browser warning)
- Back button navigates to previous in-app route via history.state.back
- Replace large DEFAULT_CODE stepper example with simpler tabs demo
---
 apps/docs/build/generate-nav.ts               |   3 +
 apps/docs/src/components.d.ts                 |   2 +
 .../src/components/editor/EditorFileTree.vue  |   6 +-
 .../src/components/editor/EditorIntroPanel.md |  40 ++
 .../components/editor/EditorIntroPanel.vue    |  65 +++
 .../components/editor/EditorMarkdownPanel.vue |  77 +--
 .../src/components/editor/EditorWorkspace.vue | 231 +++++++++
 apps/docs/src/composables/editorLink.ts       |  34 +-
 apps/docs/src/composables/useEditorFiles.ts   |  39 +-
 apps/docs/src/composables/useMarkdown.ts      |  32 +-
 apps/docs/src/composables/useMarkdownMount.ts |  93 ++++
 apps/docs/src/composables/useResizeHandle.ts  |  68 +++
 apps/docs/src/data/editor-defaults.ts         | 106 +----
 apps/docs/src/pages/editor.vue                | 349 --------------
 apps/docs/src/pages/playground.vue            | 440 ++++++++++++++++++
 apps/docs/src/pages/skillz.tutorial.[id].vue  | 251 ++--------
 .../beginner/using-the-editor/index.json      |  72 +++
 .../tours/beginner/using-the-editor/index.ts  |   7 +
 apps/docs/src/typed-router.d.ts               |  26 +-
 patches/@vue__repl@4.7.1.patch                |  30 ++
 pnpm-lock.yaml                                |   9 +-
 pnpm-workspace.yaml                           |   5 +-
 22 files changed, 1229 insertions(+), 756 deletions(-)
 create mode 100644 apps/docs/src/components/editor/EditorIntroPanel.md
 create mode 100644 apps/docs/src/components/editor/EditorIntroPanel.vue
 create mode 100644 apps/docs/src/components/editor/EditorWorkspace.vue
 create mode 100644 apps/docs/src/composables/useMarkdownMount.ts
 create mode 100644 apps/docs/src/composables/useResizeHandle.ts
 delete mode 100644 apps/docs/src/pages/editor.vue
 create mode 100644 apps/docs/src/pages/playground.vue
 create mode 100644 apps/docs/src/skillz/tours/beginner/using-the-editor/index.json
 create mode 100644 apps/docs/src/skillz/tours/beginner/using-the-editor/index.ts
 create mode 100644 patches/@vue__repl@4.7.1.patch

diff --git a/apps/docs/build/generate-nav.ts b/apps/docs/build/generate-nav.ts
index 82ffde0db..53d2244de 100644
--- a/apps/docs/build/generate-nav.ts
+++ b/apps/docs/build/generate-nav.ts
@@ -231,6 +231,9 @@ async function generateNav (): Promise<NavItem[]> {
     pages.get(key)!.push(pageInfo)
   }
 
+  // Inject non-markdown standalone routes (e.g. .vue pages with no backing .md file)
+  standalonePages.push({ item: { name: 'Playground', to: '/playground' }, order: 1.15 })
+
   const nav: NavItem[] = []
   const sectionEntries = Object.entries(SECTIONS).toSorted((a, b) => a[1].order - b[1].order)
   const standalonesSorted = standalonePages.toSorted((a, b) => a.order - b.order)
diff --git a/apps/docs/src/components.d.ts b/apps/docs/src/components.d.ts
index 893f92a61..11dd53aea 100644
--- a/apps/docs/src/components.d.ts
+++ b/apps/docs/src/components.d.ts
@@ -125,8 +125,10 @@ declare module 'vue' {
     EditorBreadcrumbs: typeof import('./components/editor/EditorBreadcrumbs.vue')['default']
     EditorExamples: typeof import('./components/editor/EditorExamples.vue')['default']
     EditorFileTree: typeof import('./components/editor/EditorFileTree.vue')['default']
+    EditorIntroPanel: typeof import('./components/editor/EditorIntroPanel.vue')['default']
     EditorMarkdownPanel: typeof import('./components/editor/EditorMarkdownPanel.vue')['default']
     EditorTabs: typeof import('./components/editor/EditorTabs.vue')['default']
+    EditorWorkspace: typeof import('./components/editor/EditorWorkspace.vue')['default']
     HomeAiFirst: typeof import('./components/home/HomeAiFirst.vue')['default']
     HomeArchitecture: typeof import('./components/home/HomeArchitecture.vue')['default']
     HomeAskDialog: typeof import('./components/home/HomeAskDialog.vue')['default']
diff --git a/apps/docs/src/components/editor/EditorFileTree.vue b/apps/docs/src/components/editor/EditorFileTree.vue
index 86c7914a5..496533d86 100644
--- a/apps/docs/src/components/editor/EditorFileTree.vue
+++ b/apps/docs/src/components/editor/EditorFileTree.vue
@@ -233,7 +233,11 @@
 </script>
 
 <template>
-  <nav ref="treeEl" aria-label="File browser" class="border-r border-divider bg-surface overflow-y-auto shrink-0">
+  <nav
+    ref="treeEl"
+    aria-label="File browser"
+    class="border-r border-divider bg-surface overflow-y-auto shrink-0 h-100%"
+  >
     <div class="flex items-center justify-between px-3 py-2">
       <span class="text-xs font-semibold text-on-surface-variant uppercase tracking-wide">Files</span>
 
diff --git a/apps/docs/src/components/editor/EditorIntroPanel.md b/apps/docs/src/components/editor/EditorIntroPanel.md
new file mode 100644
index 000000000..429c832a3
--- /dev/null
+++ b/apps/docs/src/components/editor/EditorIntroPanel.md
@@ -0,0 +1,40 @@
+# Welcome to Vuetify0!
+
+@vuetify/v0 gives you headless composables — selection, registration, forms, theming — without any markup opinions. You bring the HTML and CSS; v0 handles the logic. This editor is where you build with them: a Monaco-powered workspace with live preview, type checking, and every v0 export ready to import.
+
+## The environment
+
+The editor ships a complete single-file component setup. Your `App.vue` runs inside a Vue 3 app with these already wired in:
+
+- **Monaco editor** with full TypeScript IntelliSense — autocomplete, hover docs, and error checking for every `@vuetify/v0` export
+- **Live preview** that re-renders as you type
+- **UnoCSS runtime** with `presetWind4` (Tailwind v4 syntax) loaded automatically — no config needed
+- **`createThemePlugin`** installed with `light` and `dark` themes; every theme color is defined and reactive to theme switches
+
+> [!TIP] Theme colors work two ways: CSS custom properties (`var(--v0-primary)`) and UnoCSS utilities (`text-primary`, `bg-surface`, `border-divider`). Use the utilities — they're shorter and theme-aware by default.
+
+## Composables
+
+| Category | Composables |
+|---|---|
+| Selection & State | [createSingle](/composables/selection/create-single), [createGroup](/composables/selection/create-group), [createStep](/composables/selection/create-step), [createNested](/composables/selection/create-nested), [useProxyModel](/composables/reactivity/use-proxy-model) |
+| Forms | [createForm](/composables/forms/create-form) |
+| Browser & Events | [useHotkey](/composables/system/use-hotkey), [useEventListener](/composables/system/use-event-listener), [useClickOutside](/composables/system/use-click-outside), [useBreakpoints](/composables/plugins/use-breakpoints), [useStorage](/composables/plugins/use-storage) |
+| Theming | [useTheme](/composables/plugins/use-theme) |
+| Foundation | [createContext](/composables/foundation/create-context), [createRegistry](/composables/registration/create-registry), [createTokens](/composables/registration/create-tokens) |
+
+## Getting started
+
+Open the **examples** menu in the toolbar and load any demo — you'll get a complete, working project with files, imports, and a live preview that updates as you type. Or skip that entirely: open `App.vue` in the editor and start writing a component from scratch. The preview hot-reloads on every keystroke, so you'll see the result before you finish the thought. Either way, you're writing real Vue 3 code against the full v0 API — no stubs, no simulations.
+
+> [!TOUR] using-the-editor
+
+## Tips
+
+- `Ctrl+B` toggles the file tree sidebar on and off
+- **Double-click** any resize handle to snap it back to its default width
+- Switch between **horizontal** and **vertical** layout using the toggle in the toolbar
+- Add new files in the file tree and import them normally — multi-file projects work out of the box
+- The URL updates as you edit — copy it to share exactly what you built
+
+> [!TRY] Build something in the editor, then copy the URL and open it in a new tab — it opens exactly what you built.
diff --git a/apps/docs/src/components/editor/EditorIntroPanel.vue b/apps/docs/src/components/editor/EditorIntroPanel.vue
new file mode 100644
index 000000000..d5d4f2f7e
--- /dev/null
+++ b/apps/docs/src/components/editor/EditorIntroPanel.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+  // Components
+  import AppCloseButton from '@/components/app/AppCloseButton.vue'
+
+  // Composables
+  import { useMarkdown } from '@/composables/useMarkdown'
+  import { useMarkdownMount } from '@/composables/useMarkdownMount'
+
+  // Utilities
+  import { useTemplateRef } from 'vue'
+
+  // Content
+  import introMd from './EditorIntroPanel.md?raw'
+
+  defineEmits<{
+    close: []
+  }>()
+
+  const { html } = useMarkdown(introMd)
+
+  const contentRef = useTemplateRef<HTMLElement>('content')
+  useMarkdownMount(contentRef, html)
+</script>
+
+<template>
+  <div class="relative flex flex-col h-full overflow-hidden">
+    <!-- Header -->
+    <div class="relative z-[1] flex items-center justify-between px-4 py-2.5 border-b border-divider bg-surface shrink-0">
+      <span class="text-sm font-semibold text-on-surface">Getting Started</span>
+      <AppCloseButton label="Close panel" @click="$emit('close')" />
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 overflow-y-auto px-5 py-4">
+      <div ref="content" class="markdown-body intro-content" v-html="html" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  /* Base text — markdown-body doesn't set these for the narrow panel context */
+  .intro-content {
+    font-size: 0.9rem;
+    line-height: 1.7;
+    color: var(--v0-on-surface-variant);
+  }
+
+  /* Smaller headings than markdown-body's defaults (2.25rem / 1.875rem) */
+  .intro-content :deep(h1) {
+    font-size: 1.3rem;
+    margin-bottom: 0.75rem;
+    color: var(--v0-on-surface);
+  }
+
+  .intro-content :deep(h2) {
+    font-size: 1rem;
+    margin-top: 1.25rem;
+    margin-bottom: 0.4rem;
+    color: var(--v0-on-surface);
+  }
+
+  .intro-content :deep(strong) {
+    color: var(--v0-on-surface);
+  }
+</style>
diff --git a/apps/docs/src/components/editor/EditorMarkdownPanel.vue b/apps/docs/src/components/editor/EditorMarkdownPanel.vue
index 4a110816b..bb3cf1a00 100644
--- a/apps/docs/src/components/editor/EditorMarkdownPanel.vue
+++ b/apps/docs/src/components/editor/EditorMarkdownPanel.vue
@@ -3,13 +3,14 @@
   import { useTheme } from '@vuetify/v0'
 
   // Components
-  import DocsCallout from '@/components/docs/DocsCallout.vue'
-  import DocsMarkup from '@/components/docs/DocsMarkup.vue'
+  import { Discovery } from '@/components/discovery'
   import SkillzBadge from '@/components/skillz/SkillzBadge.vue'
 
+  // Composables
+  import { useMarkdownMount } from '@/composables/useMarkdownMount'
+
   // Utilities
-  import { decodeBase64 } from '@/utilities/decodeBase64'
-  import { computed, getCurrentInstance, h, nextTick, onBeforeUnmount, render, useTemplateRef, watch } from 'vue'
+  import { computed, useTemplateRef, watch } from 'vue'
 
   // Types
   import type { SkillLevel } from '@/types/skill'
@@ -33,67 +34,15 @@
   // ── Dynamic component mounting ───────────────────────────────────────
   const contentRef = useTemplateRef<HTMLElement>('content')
   const scrollRef = useTemplateRef<HTMLElement>('scroll')
-  const appContext = getCurrentInstance()?.appContext
-  const mountedWrappers = new Set<HTMLElement>()
 
-  watch(() => props.html, async () => {
-    await nextTick()
-    scrollRef.value?.scrollTo(0, 0)
-    mountMarkupComponents()
-    mountAlertComponents()
-  })
+  // Mounts DocsCallout and DocsMarkup into the placeholder elements produced by useMarkdown
+  const htmlRef = computed(() => props.html)
+  useMarkdownMount(contentRef, htmlRef)
 
-  onBeforeUnmount(() => {
-    for (const wrapper of mountedWrappers) {
-      render(null, wrapper)
-    }
-    mountedWrappers.clear()
+  // Scroll to top on each step transition
+  watch(() => props.html, () => {
+    scrollRef.value?.scrollTo(0, 0)
   })
-
-  function mountMarkupComponents () {
-    if (!contentRef.value) return
-
-    for (const el of contentRef.value.querySelectorAll<HTMLElement>('[data-markup]')) {
-      const code = el.dataset.code
-      const language = el.dataset.language
-      if (!code) continue
-
-      const highlighted = el.innerHTML
-      const wrapper = document.createElement('div')
-      el.replaceWith(wrapper)
-      mountedWrappers.add(wrapper)
-
-      const vnode = h(DocsMarkup, {
-        code,
-        language,
-      }, {
-        default: () => h('div', { innerHTML: highlighted }),
-      })
-      vnode.appContext = appContext ?? null
-      render(vnode, wrapper)
-    }
-  }
-
-  function mountAlertComponents () {
-    if (!contentRef.value) return
-
-    for (const el of contentRef.value.querySelectorAll<HTMLElement>('[data-alert]')) {
-      const type = el.dataset.type as 'tip' | 'info' | 'warning' | 'error' | 'try'
-      const encodedContent = el.dataset.content
-      if (!type || !encodedContent) continue
-
-      const content = decodeBase64(encodedContent)
-      const wrapper = document.createElement('div')
-      el.replaceWith(wrapper)
-      mountedWrappers.add(wrapper)
-
-      const vnode = h(DocsCallout, { type }, {
-        default: () => h('div', { innerHTML: content }),
-      })
-      vnode.appContext = appContext ?? null
-      render(vnode, wrapper)
-    }
-  }
 </script>
 
 <template>
@@ -110,7 +59,7 @@
     </div>
 
     <!-- Step navigation -->
-    <div class="flex items-center justify-between px-4 py-3 border-t border-divider bg-surface shrink-0">
+    <Discovery.Activator as="div" class="flex items-center justify-between px-4 py-3 border-t border-divider bg-surface shrink-0" step="step-nav">
       <button
         class="px-3 py-1.5 text-sm rounded bg-surface-tint text-on-surface disabled:opacity-40 transition-colors hover:bg-surface-variant"
         :disabled="props.isFirst"
@@ -131,7 +80,7 @@
           <AppIcon icon="right" :size="14" />
         </span>
       </button>
-    </div>
+    </Discovery.Activator>
   </div>
 </template>
 
diff --git a/apps/docs/src/components/editor/EditorWorkspace.vue b/apps/docs/src/components/editor/EditorWorkspace.vue
new file mode 100644
index 000000000..1dd28269b
--- /dev/null
+++ b/apps/docs/src/components/editor/EditorWorkspace.vue
@@ -0,0 +1,231 @@
+<script setup lang="ts">
+  // Components
+  import { Discovery } from '@/components/discovery'
+  import EditorBreadcrumbs from '@/components/editor/EditorBreadcrumbs.vue'
+  import EditorFileTree from '@/components/editor/EditorFileTree.vue'
+  import EditorTabs from '@/components/editor/EditorTabs.vue'
+
+  // Composables
+  import { useResizeHandle } from '@/composables/useResizeHandle'
+
+  // Utilities
+  import { Repl, Sandbox } from '@vue/repl'
+  import Monaco from '@vue/repl/monaco-editor'
+  import { computed } from 'vue'
+
+  // Types
+  import type { ReplStore } from '@vue/repl'
+
+  const props = withDefaults(defineProps<{
+    store: ReplStore
+    replTheme: 'dark' | 'light'
+    previewOptions: { headHTML: string }
+    isDark: boolean
+    fileTreeKey: number
+    sidebarOpen: boolean
+    isDesktop: boolean
+    externalResizing?: boolean
+    hideFiles?: boolean
+    hideTabs?: boolean
+    hideBreadcrumbs?: boolean
+  }>(), {
+    externalResizing: false,
+    hideFiles: false,
+    hideTabs: false,
+    hideBreadcrumbs: false,
+  })
+
+  const splitHandle = useResizeHandle({
+    storageKey: 'workspace-split-percent',
+    defaultValue: 50,
+    min: 20,
+    max: 80,
+    direction: 'vertical',
+  })
+
+  const fileTreeHandle = useResizeHandle({
+    storageKey: 'workspace-filetree-width',
+    defaultValue: 200,
+    min: 140,
+    max: 400,
+    direction: 'horizontal',
+  })
+
+  const anyResizing = computed(() =>
+    props.externalResizing || splitHandle.isResizing.value || fileTreeHandle.isResizing.value,
+  )
+
+  const showFileTree = computed(() =>
+    props.sidebarOpen && props.isDesktop && !props.hideFiles,
+  )
+</script>
+
+<template>
+  <div class="flex flex-col flex-1 min-w-0 min-h-0 bg-background">
+    <!-- Editor area -->
+    <div
+      class="flex min-h-0 min-w-0 overflow-hidden"
+      :style="isDesktop ? { height: `${splitHandle.size.value}%` } : { flex: '1' }"
+    >
+      <Discovery.Activator
+        v-if="showFileTree"
+        active-class="rounded-lg"
+        as="div"
+        class="shrink-0"
+        step="file-tree"
+        :style="{ width: `${fileTreeHandle.size.value}px` }"
+      >
+        <EditorFileTree
+          :key="fileTreeKey"
+          :store="store"
+        />
+      </Discovery.Activator>
+
+      <!-- File tree ↔ Editor handle -->
+      <div
+        v-if="showFileTree"
+        class="workspace-resize-handle workspace-resize-handle--col"
+        :class="{ 'workspace-resize-handle--active': fileTreeHandle.isResizing.value }"
+        @dblclick="fileTreeHandle.reset()"
+        @pointerdown="fileTreeHandle.onPointerDown"
+      />
+
+      <Discovery.Activator
+        active-class="rounded-lg"
+        as="div"
+        class="workspace-repl-wrapper flex flex-col flex-1 min-w-0 editor-repl"
+        :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
+        step="editor"
+      >
+        <EditorTabs v-if="!hideTabs" :store="store" />
+        <EditorBreadcrumbs v-if="!hideBreadcrumbs" :store="store" />
+
+        <Repl
+          :auto-resize="true"
+          class="flex-1 min-h-0"
+          :clear-console="true"
+          :editor="Monaco"
+          :editor-options="{ monacoOptions: { padding: { top: 16 } } }"
+          layout="horizontal"
+          :preview-options="previewOptions"
+          :show-compile-output="false"
+          :show-import-map="false"
+          :show-ts-config="false"
+          :store="store"
+          :theme="replTheme"
+        />
+      </Discovery.Activator>
+    </div>
+
+    <!-- Editor ↔ Preview handle -->
+    <div
+      v-if="isDesktop"
+      class="workspace-resize-handle workspace-resize-handle--row"
+      :class="{ 'workspace-resize-handle--active': splitHandle.isResizing.value }"
+      @dblclick="splitHandle.reset()"
+      @pointerdown="splitHandle.onPointerDown"
+    />
+
+    <!-- Preview area -->
+    <Discovery.Activator
+      active-class="rounded-lg"
+      as="div"
+      class="workspace-preview flex-1 min-w-0 min-h-0 editor-repl overflow-hidden"
+      :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
+      step="preview"
+    >
+      <!-- auto-store-init=false: Repl already calls store.init(); a second call
+           from standalone Sandbox would create duplicate watchers (double compilation,
+           double builtinImportMap watches). See patches/@vue__repl@4.7.1.patch. -->
+      <Sandbox
+        :auto-store-init="false"
+        :clear-console="false"
+        :preview-options="previewOptions"
+        :show="true"
+        :store="store"
+        :theme="replTheme"
+      />
+    </Discovery.Activator>
+  </div>
+</template>
+
+<style scoped>
+  /* Resize handles */
+  .workspace-resize-handle {
+    flex-shrink: 0;
+    background: transparent;
+    transition: background 0.15s;
+  }
+
+  .workspace-resize-handle:hover,
+  .workspace-resize-handle--active {
+    background: var(--v0-primary);
+  }
+
+  .workspace-resize-handle--col {
+    width: 4px;
+    cursor: col-resize;
+  }
+
+  .workspace-resize-handle--row {
+    height: 4px;
+    cursor: row-resize;
+  }
+
+  /* REPL theme variables */
+  .editor-repl :deep(.vue-repl) {
+    --header-height: 0px;
+    --color-branding: var(--v0-primary);
+    --color-branding-dark: var(--v0-primary);
+  }
+
+  .editor-repl.dark :deep(.vue-repl) {
+    --bg: var(--v0-background);
+    --bg-soft: var(--v0-surface);
+    --border: var(--v0-divider);
+    --text-light: var(--v0-on-surface-variant);
+  }
+
+  /* Hide REPL's built-in file tabs */
+  .editor-repl :deep(.file-selector) {
+    display: none !important;
+  }
+
+  /* Hide editor floating toggles */
+  .editor-repl :deep(.editor-floating) {
+    display: none !important;
+  }
+
+  /* Hide the Repl's preview pane — we render Sandbox separately */
+  .workspace-repl-wrapper :deep(.split-pane .right) {
+    display: none !important;
+  }
+
+  .workspace-repl-wrapper :deep(.split-pane .left) {
+    width: 100% !important;
+  }
+
+  /* Hide the SplitPane divider */
+  .workspace-repl-wrapper :deep(.split-pane .divider) {
+    display: none !important;
+  }
+
+  /* Sandbox fills container */
+  .editor-repl :deep(.vue-repl),
+  .editor-repl :deep(.iframe-container),
+  .editor-repl :deep(iframe) {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Match iframe bg to preview body to prevent flash */
+  .workspace-preview :deep(iframe) {
+    background-color: var(--v0-background) !important;
+  }
+
+  /* Disable @vue/repl's built-in fade transition on preview iframe */
+  .workspace-preview :deep(.fade-enter-active),
+  .workspace-preview :deep(.fade-leave-active) {
+    transition: none !important;
+  }
+</style>
diff --git a/apps/docs/src/composables/editorLink.ts b/apps/docs/src/composables/editorLink.ts
index 4fedbaa4e..d9ef89787 100644
--- a/apps/docs/src/composables/editorLink.ts
+++ b/apps/docs/src/composables/editorLink.ts
@@ -108,7 +108,7 @@ export async function useEditorLink (code: string, fileName = 'Example.vue'): Pr
 export async function useEditorLinkMulti (inputFiles: EditorFile[], dir?: string): Promise<string> {
   const files = buildEditorFiles(inputFiles, dir)
   const hash = await utoa(JSON.stringify(files))
-  return `/editor#${hash}`
+  return `/playground#${hash}`
 }
 
 function isFileRecord (v: unknown): v is Record<string, string> {
@@ -120,13 +120,39 @@ function isFileRecord (v: unknown): v is Record<string, string> {
   )
 }
 
+export interface EditorHashData {
+  files: Record<string, string>
+  active?: string
+}
+
 /**
- * Decode an editor hash back to a file record.
+ * Encode editor state (files + active filename) to a URL hash string.
  */
-export async function decodeEditorHash (hash: string): Promise<Record<string, string> | null> {
+export async function encodeEditorHash (data: EditorHashData): Promise<string> {
+  return utoa(JSON.stringify(data))
+}
+
+/**
+ * Decode an editor hash back to editor state.
+ * Handles both the current { files, active } format and the legacy plain Record<string, string> format.
+ */
+export async function decodeEditorHash (hash: string): Promise<EditorHashData | null> {
   try {
     const parsed: unknown = JSON.parse(await atou(hash))
-    return isFileRecord(parsed) ? parsed : null
+    if (isFileRecord(parsed)) {
+      // Legacy format: plain file record with no active file
+      return { files: parsed }
+    }
+    if (
+      typeof parsed === 'object'
+      && parsed !== null
+      && 'files' in parsed
+      && isFileRecord((parsed as { files: unknown }).files)
+    ) {
+      const { files, active } = parsed as { files: Record<string, string>, active?: unknown }
+      return { files, active: typeof active === 'string' ? active : undefined }
+    }
+    return null
   } catch {
     return null
   }
diff --git a/apps/docs/src/composables/useEditorFiles.ts b/apps/docs/src/composables/useEditorFiles.ts
index 56726f51b..6befc4b7f 100644
--- a/apps/docs/src/composables/useEditorFiles.ts
+++ b/apps/docs/src/composables/useEditorFiles.ts
@@ -1,13 +1,13 @@
 // Composables
-import { decodeEditorHash } from '@/composables/editorLink'
+import { decodeEditorHash, encodeEditorHash } from '@/composables/editorLink'
 
 // Utilities
-import { onMounted, shallowRef, watch } from 'vue'
+import { onMounted, shallowRef, watch, watchEffect } from 'vue'
 
 // Types
 import type { ReplStore } from '@vue/repl'
 
-import { createMainTs, DEFAULT_CODE, UNO_CONFIG_TS } from '@/data/editor-defaults'
+import { createMainTs, DEFAULT_CODE, INFRASTRUCTURE_FILES, UNO_CONFIG_TS } from '@/data/editor-defaults'
 
 export function useEditorFiles (store: ReplStore, isDark: () => boolean) {
   const isReady = shallowRef(false)
@@ -22,7 +22,7 @@ export function useEditorFiles (store: ReplStore, isDark: () => boolean) {
     const decoded = hash ? await decodeEditorHash(hash) : null
 
     if (decoded) {
-      await loadExample(decoded)
+      await loadExample(decoded.files, decoded.active)
     } else {
       const theme = isDark() ? 'dark' : 'light'
       await store.setFiles(
@@ -41,7 +41,7 @@ export function useEditorFiles (store: ReplStore, isDark: () => boolean) {
     isReady.value = true
   })
 
-  async function loadExample (files: Record<string, string>) {
+  async function loadExample (files: Record<string, string>, activeFile?: string) {
     // Create hidden flat aliases for nested files so the REPL's runtime
     // import resolution works. The REPL resolves all `./X` as `src/X`,
     // so `src/dir/Foo.vue` needs a hidden `src/Foo.vue` alias.
@@ -78,12 +78,37 @@ export function useEditorFiles (store: ReplStore, isDark: () => boolean) {
       if (store.files[key]) store.files[key]!.hidden = true
     }
 
-    // Activate the first user file, not the generated App.vue wrapper
-    const userFile = Object.keys(files).find(f => f !== 'src/App.vue') ?? 'src/App.vue'
+    // Restore active file from hash, fall back to first user file
+    const userFile = (activeFile && store.files[activeFile])
+      ? activeFile
+      : (Object.keys(files).find(f => f !== 'src/App.vue') ?? 'src/App.vue')
     store.setActive(userFile)
     fileTreeKey.value++
   }
 
+  // Once loaded, encode user files to the URL hash on every change so the
+  // URL stays shareable. Debounced to avoid thrashing on every keystroke.
+  let hashTimer: ReturnType<typeof setTimeout> | undefined
+  watch(isReady, ready => {
+    if (!ready) return
+    watchEffect(() => {
+      const files: Record<string, string> = {}
+      for (const [path, file] of Object.entries(store.files)) {
+        // Exclude infrastructure files and generated hidden aliases
+        if (!INFRASTRUCTURE_FILES.has(path) && !file.hidden) {
+          files[path] = file.code // read .code to register reactive dependency
+        }
+      }
+      const active = store.activeFile?.filename // register reactive dependency
+      clearTimeout(hashTimer)
+      hashTimer = setTimeout(async () => {
+        if (Object.keys(files).length === 0) return
+        const hash = await encodeEditorHash({ files, active })
+        history.replaceState(null, '', `#${hash}`)
+      }, 500)
+    })
+  }, { once: true })
+
   // Sync edits from nested files to their flat aliases
   watch(() => store.activeFile?.code, code => {
     if (code === undefined) return
diff --git a/apps/docs/src/composables/useMarkdown.ts b/apps/docs/src/composables/useMarkdown.ts
index 6aed402c6..dbe3d5f92 100644
--- a/apps/docs/src/composables/useMarkdown.ts
+++ b/apps/docs/src/composables/useMarkdown.ts
@@ -36,6 +36,14 @@ export interface UseMarkdownReturn {
 let cachedMarked: Marked | null = null
 let cachedHighlighter: Highlighter | null = null
 
+// Separate synchronous instance used only for parseInline inside the blockquote renderer.
+// The main cachedMarked has async:true, which makes parseInline return a Promise — unusable
+// in a synchronous renderer. This instance is sync-only and has no extensions.
+let syncInlineMarked: Marked | null = null
+function getInlineMarked (): Marked {
+  return syncInlineMarked ??= new Marked({ async: false, gfm: true })
+}
+
 function getMarked (hl: Highlighter): Marked {
   // Return cached if highlighter is the same
   if (cachedMarked && cachedHighlighter === hl) return cachedMarked
@@ -50,23 +58,35 @@ function getMarked (hl: Highlighter): Marked {
   cachedMarked.use({
     renderer: {
       table ({ header, rows }) {
-        const thead = `<thead><tr>${header.map(cell => `<th${cell.align ? ` align="${cell.align}"` : ''}>${cell.text}</th>`).join('')}</tr></thead>`
-        const tbody = `<tbody>${rows.map(row => `<tr>${row.map(cell => `<td${cell.align ? ` align="${cell.align}"` : ''}>${cell.text}</td>`).join('')}</tr>`).join('')}</tbody>`
+        function parse (text: string) {
+          return getInlineMarked().parseInline(text)
+        }
+        const thead = `<thead><tr>${header.map(cell => `<th${cell.align ? ` align="${cell.align}"` : ''}>${parse(cell.text)}</th>`).join('')}</tr></thead>`
+        const tbody = `<tbody>${rows.map(row => `<tr>${row.map(cell => `<td${cell.align ? ` align="${cell.align}"` : ''}>${parse(cell.text)}</td>`).join('')}</tr>`).join('')}</tbody>`
         return `<div class="overflow-x-auto mb-4"><table>${thead}${tbody}</table></div>`
       },
       blockquote ({ raw }) {
-        // GitHub-style callouts: > [!TIP], > [!INFO], > [!WARNING], > [!ERROR], > [!TRY]
+        // GitHub-style callouts: > [!TIP], > [!INFO], > [!WARNING], > [!ERROR], > [!TRY], > [!TOUR]
         const innerContent = raw
           .split('\n')
           .map(line => line.replace(/^>\s?/, ''))
           .join('\n')
           .trim()
 
-        const match = innerContent.match(/^\[!(TIP|INFO|WARNING|ERROR|TRY)\]\s*([\s\S]*)/)
+        const match = innerContent.match(/^\[!(TIP|INFO|WARNING|ERROR|TRY|TOUR)\]\s*([\s\S]*)/)
         if (match) {
           const type = match[1].toLowerCase()
-          const content = match[2].trim()
-          const encodedContent = btoa(unescape(encodeURIComponent(content)))
+          const rest = match[2].trim()
+
+          if (type === 'tour') {
+            // rest is the tour ID — no slot content needed, DocsCallout renders from registry
+            return `<div data-alert data-type="tour" data-tour-id="${rest}"></div>`
+          }
+
+          // Parse inline markdown so backticks, bold, links etc. render correctly in callouts.
+          // Must use the sync instance — cachedMarked has async:true, making parseInline a Promise.
+          const parsedContent = getInlineMarked().parseInline(rest)
+          const encodedContent = btoa(unescape(encodeURIComponent(parsedContent)))
           return `<div data-alert data-type="${type}" data-content="${encodedContent}"></div>`
         }
 
diff --git a/apps/docs/src/composables/useMarkdownMount.ts b/apps/docs/src/composables/useMarkdownMount.ts
new file mode 100644
index 000000000..b775d0382
--- /dev/null
+++ b/apps/docs/src/composables/useMarkdownMount.ts
@@ -0,0 +1,93 @@
+/**
+ * @module useMarkdownMount
+ *
+ * Imperatively mounts DocsCallout and DocsMarkup Vue components into the
+ * placeholder elements emitted by useMarkdown's renderer:
+ *   - [data-alert]  → DocsCallout
+ *   - [data-markup] → DocsMarkup (syntax-highlighted code block)
+ *
+ * Used by any panel that renders useMarkdown's HTML output via v-html and
+ * needs the interactive Vue components to appear in place of the stubs.
+ */
+
+// Components
+import DocsCallout from '@/components/docs/DocsCallout.vue'
+import DocsMarkup from '@/components/docs/DocsMarkup.vue'
+
+// Utilities
+import { decodeBase64 } from '@/utilities/decodeBase64'
+import { getCurrentInstance, h, nextTick, onBeforeUnmount, render, watch } from 'vue'
+
+// Types
+import type { Ref, ShallowRef } from 'vue'
+
+export function useMarkdownMount (
+  contentRef: Readonly<ShallowRef<HTMLElement | null>>,
+  html: Readonly<Ref<string> | ShallowRef<string>>,
+) {
+  const appContext = getCurrentInstance()?.appContext
+  const mountedWrappers = new Set<HTMLElement>()
+
+  function mountMarkupComponents () {
+    if (!contentRef.value) return
+
+    for (const el of contentRef.value.querySelectorAll<HTMLElement>('[data-markup]')) {
+      const code = el.dataset.code
+      const language = el.dataset.language
+      if (!code) continue
+
+      const highlighted = el.innerHTML
+      const wrapper = document.createElement('div')
+      el.replaceWith(wrapper)
+      mountedWrappers.add(wrapper)
+
+      const vnode = h(DocsMarkup, { code, language }, {
+        default: () => h('div', { innerHTML: highlighted }),
+      })
+      vnode.appContext = appContext ?? null
+      render(vnode, wrapper)
+    }
+  }
+
+  function mountAlertComponents () {
+    if (!contentRef.value) return
+
+    for (const el of contentRef.value.querySelectorAll<HTMLElement>('[data-alert]')) {
+      const type = el.dataset.type as 'tip' | 'info' | 'warning' | 'error' | 'try' | 'tour'
+      if (!type) continue
+
+      const wrapper = document.createElement('div')
+      el.replaceWith(wrapper)
+      mountedWrappers.add(wrapper)
+
+      let vnode
+      if (type === 'tour') {
+        const tourId = el.dataset.tourId
+        vnode = h(DocsCallout, { type, tourId })
+      } else {
+        const encodedContent = el.dataset.content
+        if (!encodedContent) continue
+        const content = decodeBase64(encodedContent)
+        vnode = h(DocsCallout, { type }, {
+          default: () => h('div', { innerHTML: content }),
+        })
+      }
+
+      vnode.appContext = appContext ?? null
+      render(vnode, wrapper)
+    }
+  }
+
+  watch(html, async () => {
+    await nextTick()
+    mountMarkupComponents()
+    mountAlertComponents()
+  })
+
+  onBeforeUnmount(() => {
+    for (const wrapper of mountedWrappers) {
+      render(null, wrapper)
+    }
+    mountedWrappers.clear()
+  })
+}
diff --git a/apps/docs/src/composables/useResizeHandle.ts b/apps/docs/src/composables/useResizeHandle.ts
new file mode 100644
index 000000000..0419786a7
--- /dev/null
+++ b/apps/docs/src/composables/useResizeHandle.ts
@@ -0,0 +1,68 @@
+// Framework
+import { clamp, useDocumentEventListener, useStorage, useToggleScope } from '@vuetify/v0'
+
+// Utilities
+import { shallowRef } from 'vue'
+
+interface UseResizeHandleOptions {
+  storageKey: string
+  defaultValue: number
+  min: number
+  max: number
+  direction: 'horizontal' | 'vertical'
+}
+
+interface UseResizeHandleReturn {
+  size: ReturnType<typeof shallowRef<number>>
+  isResizing: ReturnType<typeof shallowRef<boolean>>
+  onPointerDown: (e: PointerEvent) => void
+  reset: () => void
+}
+
+export function useResizeHandle (options: UseResizeHandleOptions): UseResizeHandleReturn {
+  const stored = useStorage().get<number>(options.storageKey, options.defaultValue)
+  const size = shallowRef(stored.value)
+  const isResizing = shallowRef(false)
+  const startPos = shallowRef(0)
+  const startSize = shallowRef(0)
+  const containerSize = shallowRef(0)
+
+  function onPointerDown (e: PointerEvent) {
+    e.preventDefault()
+    startPos.value = options.direction === 'horizontal' ? e.clientX : e.clientY
+    startSize.value = size.value
+    if (options.direction === 'vertical') {
+      containerSize.value = (e.target as HTMLElement).parentElement?.offsetHeight ?? 1
+    }
+    isResizing.value = true
+  }
+
+  let rafId = 0
+
+  useToggleScope(() => isResizing.value, () => {
+    useDocumentEventListener('pointermove', (e: PointerEvent) => {
+      if (rafId) return
+      rafId = requestAnimationFrame(() => {
+        const pos = options.direction === 'horizontal' ? e.clientX : e.clientY
+        const delta = pos - startPos.value
+        size.value = options.direction === 'vertical'
+          ? clamp(startSize.value + (delta / containerSize.value) * 100, options.min, options.max)
+          : clamp(startSize.value + delta, options.min, options.max)
+        rafId = 0
+      })
+    })
+    useDocumentEventListener('pointerup', () => {
+      if (rafId) cancelAnimationFrame(rafId)
+      rafId = 0
+      stored.value = size.value
+      isResizing.value = false
+    })
+  })
+
+  function reset () {
+    size.value = options.defaultValue
+    stored.value = options.defaultValue
+  }
+
+  return { size, isResizing, onPointerDown, reset }
+}
diff --git a/apps/docs/src/data/editor-defaults.ts b/apps/docs/src/data/editor-defaults.ts
index d9194db23..9faac4baf 100644
--- a/apps/docs/src/data/editor-defaults.ts
+++ b/apps/docs/src/data/editor-defaults.ts
@@ -132,104 +132,32 @@ defineConfig({
 // ── Default App.vue ─────────────────────────────────────────────────────
 
 export const DEFAULT_CODE = `<script setup lang="ts">
-  import { createStep } from '@vuetify/v0'
-  import { computed } from 'vue'
+  import { createSingle } from '@vuetify/v0'
 
-  const steps = [
-    { id: 'cart', label: 'Cart', icon: '1' },
-    { id: 'shipping', label: 'Shipping', icon: '2' },
-    { id: 'payment', label: 'Payment', icon: '3', disabled: true },
-    { id: 'review', label: 'Review', icon: '4' },
-    { id: 'confirm', label: 'Confirm', icon: '5' },
-  ]
-
-  const stepper = createStep()
-  stepper.onboard(steps.map((s, i) => ({ id: s.id, value: i, disabled: s.disabled })))
-  stepper.first()
-
-  const currentIndex = computed(() => stepper.selectedIndex.value)
-  const isFirst = computed(() => currentIndex.value === 0)
-  const isLast = computed(() => currentIndex.value === stepper.size - 1)
+  const tabs = ['Overview', 'Details', 'Settings']
+  const active = createSingle()
+  active.onboard(tabs.map(label => ({ id: label, value: label })))
+  active.select('Overview')
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
-    <!-- Stepper Track -->
-    <div class="relative flex items-center justify-between mb-12">
-      <!-- Background Line -->
-      <div class="absolute top-5 left-0 right-0 h-0.5 bg-divider" />
-
-      <!-- Progress Line -->
-      <div
-        class="absolute top-5 left-0 h-0.5 bg-primary transition-all duration-400"
-        :style="{ width: (currentIndex / (steps.length - 1)) * 100 + '%' }"
-      />
-
-      <!-- Steps -->
-      <div
-        v-for="(step, i) in steps"
-        :key="step.id"
-        class="relative z-1 flex flex-col items-center cursor-pointer"
-        @click="!step.disabled && stepper.select(step.id)"
-      >
-        <div
-          class="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold transition-all duration-300"
-          :class="[
-            i <= currentIndex ? 'bg-primary text-on-primary' : step.disabled ? 'bg-surface border-2 border-dashed border-divider' : 'bg-surface border-2 border-solid border-divider',
-            i === currentIndex ? 'scale-115 shadow-[0_0_0_4px_rgba(59,130,246,0.2)]' : 'scale-90',
-            step.disabled ? 'opacity-50' : '',
-          ]"
-        >
-          <span v-if="i < currentIndex">&#10003;</span>
-          <span v-else>{{ step.icon }}</span>
-        </div>
-
-        <span
-          class="mt-2 text-xs font-medium"
-          :class="[
-            i === currentIndex ? 'text-primary' : 'text-on-surface-variant',
-            step.disabled ? 'line-through opacity-50' : '',
-          ]"
-        >
-          {{ step.label }}
-        </span>
-      </div>
-    </div>
-
-    <!-- Controls -->
-    <div class="flex items-center justify-center gap-2">
-      <button
-        class="px-3 py-1.5 text-sm rounded border border-solid border-divider bg-surface cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
-        :disabled="isFirst"
-        @click="stepper.first()"
-      >
-        First
-      </button>
-      <button
-        class="px-4 py-1.5 text-sm rounded border-none bg-surface-tint text-primary cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
-        :disabled="isFirst"
-        @click="stepper.prev()"
-      >
-        Prev
-      </button>
-      <button
-        class="px-4 py-1.5 text-sm rounded border-none bg-primary text-on-primary cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
-        :disabled="isLast"
-        @click="stepper.next()"
-      >
-        Next
-      </button>
+  <div class="p-6 font-sans bg-background text-on-background min-h-screen">
+    <div class="flex border-b border-divider mb-6">
       <button
-        class="px-3 py-1.5 text-sm rounded border border-solid border-divider bg-surface cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
-        :disabled="isLast"
-        @click="stepper.last()"
+        v-for="tab in tabs"
+        :key="tab"
+        class="px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors"
+        :class="active.selected(tab)
+          ? 'text-primary border-primary'
+          : 'text-on-surface-variant border-transparent hover:text-on-surface'"
+        @click="active.select(tab)"
       >
-        Last
+        {{ tab }}
       </button>
     </div>
 
-    <p class="mt-6 text-center text-xs text-on-surface-variant">
-      Step {{ currentIndex + 1 }} of {{ stepper.size }} · Payment step is disabled (auto-skipped)
+    <p class="text-sm text-on-surface-variant">
+      Active tab: <strong class="text-on-surface">{{ active.selectedId.value }}</strong>
     </p>
   </div>
 </template>
diff --git a/apps/docs/src/pages/editor.vue b/apps/docs/src/pages/editor.vue
deleted file mode 100644
index 3ce39bc82..000000000
--- a/apps/docs/src/pages/editor.vue
+++ /dev/null
@@ -1,349 +0,0 @@
-<script setup lang="ts">
-  import { useHead } from '@unhead/vue'
-  import { definePage } from 'unplugin-vue-router/runtime'
-
-  // Framework
-  import { clamp, useBreakpoints, useClickOutside, useEventListener, useHotkey, useStack, useStorage, useTheme, useToggleScope } from '@vuetify/v0'
-
-  // Components
-  import EditorBreadcrumbs from '@/components/editor/EditorBreadcrumbs.vue'
-  import EditorExamples from '@/components/editor/EditorExamples.vue'
-  import EditorFileTree from '@/components/editor/EditorFileTree.vue'
-  import EditorTabs from '@/components/editor/EditorTabs.vue'
-
-  // Composables
-  import { useEditorFiles } from '@/composables/useEditorFiles'
-  import { useEditorStore } from '@/composables/useEditorStore'
-
-  // Utilities
-  import { Repl } from '@vue/repl'
-  import Monaco from '@vue/repl/monaco-editor'
-  import '@vue/repl/style.css'
-  import { shallowRef, useTemplateRef, watch } from 'vue'
-
-  definePage({
-    meta: {
-      layout: 'fullscreen',
-      level: 1,
-    },
-  })
-
-  useHead({
-    title: 'Editor - Vuetify0',
-    meta: [
-      { key: 'description', name: 'description', content: 'Interactive code editor for @vuetify/v0 composables and components' },
-    ],
-  })
-
-  // ── Theme ──────────────────────────────────────────────────────────────
-  const theme = useTheme()
-  const isDark = theme.isDark
-
-  // ── REPL Setup ─────────────────────────────────────────────────────────
-  const { store, replTheme, previewOptions } = useEditorStore(isDark)
-
-  // ── Editor files ─────────────────────────────────────────────────────
-  const { isReady, fileTreeKey, loadExample: _loadExample } = useEditorFiles(store, () => isDark.value)
-
-  const breakpoints = useBreakpoints()
-  const isDesktop = breakpoints.mdAndUp
-  const sidebarOpen = shallowRef(true)
-  watch(isDesktop, v => {
-    sidebarOpen.value = v
-  })
-
-  const stack = useStack()
-  const ticket = stack.register({
-    onDismiss: () => {
-      sidebarOpen.value = false
-    },
-  })
-  watch(() => sidebarOpen.value && !isDesktop.value, open => {
-    if (open) ticket.select()
-    else ticket.unselect()
-  })
-
-  useHotkey('ctrl+b', () => {
-    sidebarOpen.value = !sidebarOpen.value
-  }, { inputs: true })
-  const showExamples = shallowRef(false)
-  const examplesContainer = useTemplateRef<HTMLElement>('examplesContainer')
-  const examplesButton = useTemplateRef<HTMLButtonElement>('examplesButton')
-
-  useToggleScope(() => showExamples.value, () => {
-    useClickOutside(examplesContainer, () => {
-      showExamples.value = false
-      examplesButton.value?.focus()
-    })
-    useHotkey('escape', () => {
-      showExamples.value = false
-      examplesButton.value?.focus()
-    })
-  })
-
-  async function loadExample (files: Record<string, string>) {
-    showExamples.value = false
-    await _loadExample(files)
-  }
-
-  // ── Persistent settings ────────────────────────────────────────────────
-  const storage = useStorage()
-  const replLayout = storage.get<'horizontal' | 'vertical'>('editor-layout', 'horizontal')
-  const sidebarWidth = storage.get<number>('editor-sidebar-width', 250)
-  const isResizing = shallowRef(false)
-  const resizeStartX = shallowRef(0)
-  const resizeStartWidth = shallowRef(0)
-
-  function onResizeStart (e: PointerEvent) {
-    e.preventDefault()
-    resizeStartX.value = e.clientX
-    resizeStartWidth.value = sidebarWidth.value
-    isResizing.value = true
-  }
-
-  useToggleScope(() => isResizing.value, () => {
-    useEventListener(document, 'pointermove', (e: PointerEvent) => {
-      sidebarWidth.value = clamp(resizeStartWidth.value + e.clientX - resizeStartX.value, 140, 400)
-    })
-    useEventListener(document, 'pointerup', () => {
-      isResizing.value = false
-    })
-  })
-</script>
-
-<template>
-  <div class="h-screen flex flex-col">
-    <!-- Header -->
-    <header class="flex items-center justify-between h-[48px] px-3 border-b border-divider bg-surface">
-      <div class="flex items-center gap-3">
-        <RouterLink
-          aria-label="Back to docs"
-          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors no-underline text-on-surface"
-          title="Back to docs"
-          to="/"
-        >
-          <AppIcon icon="arrow-left" :size="18" />
-        </RouterLink>
-
-        <img
-          alt="Vuetify Play"
-          class="h-8"
-          :src="isDark
-            ? 'https://vuetifyjs.b-cdn.net/docs/images/one/logos/vplay-logo-dark.svg'
-            : 'https://vuetifyjs.b-cdn.net/docs/images/one/logos/vplay-logo-light.svg'"
-        >
-      </div>
-
-      <div class="flex items-center gap-2">
-        <RouterLink
-          aria-label="Tutorial"
-          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors no-underline text-on-surface"
-          title="Tutorial"
-          to="/skillz/tutorial/vue-basics"
-        >
-          <AppIcon icon="book" :size="18" />
-        </RouterLink>
-
-        <div ref="examplesContainer" class="relative">
-          <button
-            ref="examplesButton"
-            :aria-expanded="showExamples"
-            aria-haspopup="listbox"
-            aria-label="Load example"
-            class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
-            title="Load example"
-            @click="showExamples = !showExamples"
-          >
-            <AppIcon icon="examples" :size="18" />
-          </button>
-
-          <div
-            v-if="showExamples"
-            aria-label="Examples"
-            class="absolute top-full right-0 mt-1 w-[280px] bg-surface border border-divider rounded-lg shadow-lg z-50"
-            role="listbox"
-          >
-            <EditorExamples @select="loadExample" />
-          </div>
-        </div>
-
-        <button
-          v-if="isDesktop"
-          :aria-label="replLayout === 'horizontal' ? 'Switch to vertical layout' : 'Switch to horizontal layout'"
-          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
-          :title="replLayout === 'horizontal' ? 'Switch to vertical layout' : 'Switch to horizontal layout'"
-          @click="replLayout = replLayout === 'horizontal' ? 'vertical' : 'horizontal'"
-        >
-          <AppIcon :icon="replLayout === 'horizontal' ? 'layout-vertical' : 'layout-horizontal'" :size="18" />
-        </button>
-
-        <button
-          v-if="!isDesktop"
-          :aria-expanded="sidebarOpen"
-          :aria-label="sidebarOpen ? 'Close file browser' : 'Open file browser'"
-          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
-          title="Toggle files"
-          @click="sidebarOpen = !sidebarOpen"
-        >
-          <AppIcon icon="folder" :size="18" />
-        </button>
-
-        <button
-          v-if="isDesktop"
-          :aria-expanded="sidebarOpen"
-          :aria-label="sidebarOpen ? 'Close sidebar' : 'Open sidebar'"
-          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
-          title="Toggle sidebar"
-          @click="sidebarOpen = !sidebarOpen"
-        >
-          <AppIcon icon="menu" :size="18" />
-        </button>
-
-        <AppThemeToggle />
-      </div>
-    </header>
-
-    <!-- REPL Editor -->
-    <Transition name="fade">
-      <div v-if="isReady" class="editor-repl flex-1 min-h-0 px-2 pt-2" :class="{ dark: isDark }">
-        <div class="editor-wrapper" :class="{ 'select-none': isResizing }">
-          <!-- Desktop: inline sidebar -->
-          <template v-if="isDesktop">
-            <EditorFileTree
-              v-if="sidebarOpen"
-              :key="fileTreeKey"
-              :store="store"
-              :style="{ width: `${sidebarWidth}px` }"
-            />
-
-            <div
-              v-if="sidebarOpen"
-              class="editor-resize-handle"
-              :class="{ 'editor-resize-handle--active': isResizing }"
-              @dblclick="sidebarWidth = 250"
-              @pointerdown="onResizeStart"
-            />
-          </template>
-
-          <!-- Mobile: fixed overlay -->
-          <div
-            v-if="!isDesktop && sidebarOpen"
-            aria-label="File browser"
-            class="fixed top-0 bottom-0 left-0 w-[260px] flex flex-col bg-surface"
-            role="dialog"
-            :style="{ zIndex: ticket.zIndex.value }"
-          >
-            <div class="flex items-center justify-end px-2 py-1">
-              <button
-                aria-label="Close file browser"
-                class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
-                @click="sidebarOpen = false"
-              >
-                <AppIcon icon="close" :size="18" />
-              </button>
-            </div>
-
-            <EditorFileTree
-              :key="fileTreeKey"
-              class="flex-1 min-h-0"
-              :store="store"
-            />
-          </div>
-
-          <div class="editor-repl-container flex flex-col" :inert="!isDesktop && sidebarOpen ? true : undefined">
-            <EditorTabs :store="store" />
-            <EditorBreadcrumbs :store="store" />
-
-            <Repl
-              :auto-resize="true"
-              class="flex-1 min-h-0"
-              :class="{ 'pointer-events-none': isResizing }"
-              :clear-console="true"
-              :editor="Monaco"
-              :layout="replLayout"
-              :preview-options="previewOptions"
-              :preview-theme="true"
-              :show-compile-output="false"
-              :show-import-map="false"
-              :show-ts-config="false"
-              :store="store"
-              :theme="replTheme"
-            />
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<style scoped>
-  .editor-repl {
-    overflow: hidden;
-  }
-
-  .editor-wrapper {
-    display: flex;
-    height: 100%;
-    border-radius: 8px 8px 0 0;
-    border: 1px solid var(--v0-divider);
-    border-bottom: none;
-    overflow: hidden;
-  }
-
-  .editor-resize-handle {
-    width: 4px;
-    cursor: col-resize;
-    background: transparent;
-    transition: background 0.15s;
-    flex-shrink: 0;
-  }
-
-  .editor-resize-handle:hover,
-  .editor-resize-handle--active {
-    background: var(--v0-primary);
-  }
-
-  .editor-repl-container {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .editor-repl :deep(.vue-repl) {
-    --color-branding: var(--v0-primary);
-    --color-branding-dark: var(--v0-primary);
-  }
-
-  /* Ensure editor fills available height */
-  .editor-repl :deep(.editor-container) {
-    height: 100%;
-  }
-
-  /* Hide editor floating toggles (auto-save / show error) */
-  .editor-repl :deep(.editor-floating) {
-    display: none !important;
-  }
-
-  /* Hide REPL's built-in file tabs */
-  .editor-repl :deep(.file-selector) {
-    display: none !important;
-  }
-
-  /* Dark theme overrides for @vue/repl */
-  .editor-repl.dark :deep(.vue-repl) {
-    --bg: var(--v0-background);
-    --bg-soft: var(--v0-surface);
-    --border: var(--v0-divider);
-    --text-light: var(--v0-on-surface-variant);
-  }
-
-  /* Fade on mount */
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 0.2s;
-  }
-
-  .fade-enter-from,
-  .fade-leave-to {
-    opacity: 0;
-  }
-</style>
diff --git a/apps/docs/src/pages/playground.vue b/apps/docs/src/pages/playground.vue
new file mode 100644
index 000000000..bcc8f3f50
--- /dev/null
+++ b/apps/docs/src/pages/playground.vue
@@ -0,0 +1,440 @@
+<script setup lang="ts">
+  import { useHead } from '@unhead/vue'
+  import { definePage } from 'unplugin-vue-router/runtime'
+
+  // Framework
+  import { useBreakpoints, useClickOutside, useHotkey, useStack, useStorage, useTheme, useToggleScope } from '@vuetify/v0'
+
+  // Components
+  import { Discovery } from '@/components/discovery'
+  import EditorBreadcrumbs from '@/components/editor/EditorBreadcrumbs.vue'
+  import EditorExamples from '@/components/editor/EditorExamples.vue'
+  import EditorFileTree from '@/components/editor/EditorFileTree.vue'
+  import EditorIntroPanel from '@/components/editor/EditorIntroPanel.vue'
+  import EditorTabs from '@/components/editor/EditorTabs.vue'
+  import EditorWorkspace from '@/components/editor/EditorWorkspace.vue'
+
+  // Composables
+  import { useDiscovery } from '@/composables/useDiscovery'
+  import { useEditorFiles } from '@/composables/useEditorFiles'
+  import { useEditorStore } from '@/composables/useEditorStore'
+  import { useResizeHandle } from '@/composables/useResizeHandle'
+
+  // Utilities
+  import { Repl } from '@vue/repl'
+  import Monaco from '@vue/repl/monaco-editor'
+  import '@vue/repl/style.css'
+  import { computed, shallowRef, useTemplateRef, watch } from 'vue'
+  import { useRouter } from 'vue-router'
+
+  definePage({
+    meta: {
+      layout: 'fullscreen',
+      level: 1,
+    },
+  })
+
+  useHead({
+    title: 'Playground - Vuetify0',
+    meta: [
+      { key: 'description', name: 'description', content: 'Interactive code playground for @vuetify/v0 composables and components' },
+    ],
+  })
+
+  // ── Back navigation ────────────────────────────────────────────────────
+  // Vue Router 4 stores the previous path in history.state.back. Use it so
+  // the back button returns the user to wherever they came from in the app.
+  const router = useRouter()
+  const backTo = computed(() => (router.currentRoute.value.redirectedFrom?.fullPath ?? window.history.state?.back) || '/')
+
+  // ── Theme ──────────────────────────────────────────────────────────────
+  const theme = useTheme()
+  const isDark = theme.isDark
+
+  // ── REPL Setup ─────────────────────────────────────────────────────────
+  const { store, replTheme, previewOptions } = useEditorStore(isDark)
+
+  // ── Editor files ─────────────────────────────────────────────────────
+  const { isReady, fileTreeKey, loadExample: _loadExample } = useEditorFiles(store, () => isDark.value)
+
+  const breakpoints = useBreakpoints()
+  const isDesktop = breakpoints.mdAndUp
+  const sidebarOpen = shallowRef(true)
+  watch(isDesktop, v => {
+    sidebarOpen.value = v
+  })
+
+  const stack = useStack()
+  const ticket = stack.register({
+    onDismiss: () => {
+      sidebarOpen.value = false
+    },
+  })
+  watch(() => sidebarOpen.value && !isDesktop.value, open => {
+    if (open) ticket.select()
+    else ticket.unselect()
+  })
+
+  useHotkey('ctrl+b', () => {
+    sidebarOpen.value = !sidebarOpen.value
+  }, { inputs: true })
+
+  const showExamples = shallowRef(false)
+  const examplesContainer = useTemplateRef<HTMLElement>('examplesContainer')
+  const examplesButton = useTemplateRef<HTMLButtonElement>('examplesButton')
+
+  useToggleScope(() => showExamples.value, () => {
+    useClickOutside(examplesContainer, () => {
+      showExamples.value = false
+      examplesButton.value?.focus()
+    })
+    useHotkey('escape', () => {
+      showExamples.value = false
+      examplesButton.value?.focus()
+    })
+  })
+
+  async function loadExample (files: Record<string, string>) {
+    showExamples.value = false
+    await _loadExample(files)
+  }
+
+  // ── Intro panel ───────────────────────────────────────────────────────
+  const discovery = useDiscovery()
+
+  // ── Persistent settings ────────────────────────────────────────────────
+  const storage = useStorage()
+  const replLayout = storage.get<'horizontal' | 'vertical'>('editor-layout', 'horizontal')
+  const panelOpen = storage.get<boolean>('editor-panel-open', false)
+
+  // Open panel when a tour becomes active or reaches the intro-panel step
+  watch(discovery.isActive, active => {
+    if (active) panelOpen.value = true
+  })
+  watch(discovery.selectedId, id => {
+    if (id === 'intro-panel') panelOpen.value = true
+  })
+
+  // Panel resize (panel mode)
+  const panelHandle = useResizeHandle({
+    storageKey: 'editor-intro-width',
+    defaultValue: 300,
+    min: 200,
+    max: 500,
+    direction: 'horizontal',
+  })
+
+  // Sidebar resize (normal mode, desktop)
+  const sidebarHandle = useResizeHandle({
+    storageKey: 'editor-sidebar-width',
+    defaultValue: 250,
+    min: 140,
+    max: 400,
+    direction: 'horizontal',
+  })
+
+  const isPanelMode = computed(() => isDesktop.value && panelOpen.value)
+
+  // EditorWorkspace renders Sandbox separately. showOutput=false prevents Repl from creating
+  // its internal preview iframe (see patches/@vue__repl@4.7.1.patch), avoiding a duplicate
+  // sandbox and the browser's allow-scripts+allow-same-origin warning.
+  watch(isPanelMode, mode => {
+    store.showOutput = !mode
+  }, { immediate: true })
+</script>
+
+<template>
+  <div class="h-screen flex flex-col">
+    <!-- Header -->
+    <header class="flex items-center justify-between h-[48px] px-3 border-b border-divider bg-surface">
+      <div class="flex items-center gap-3">
+        <RouterLink
+          aria-label="Go back"
+          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors no-underline text-on-surface"
+          title="Go back"
+          :to="backTo"
+        >
+          <AppIcon icon="arrow-left" :size="18" />
+        </RouterLink>
+
+        <img
+          alt="Vuetify Play"
+          class="h-8"
+          :src="isDark
+            ? 'https://vuetifyjs.b-cdn.net/docs/images/one/logos/vplay-logo-dark.svg'
+            : 'https://vuetifyjs.b-cdn.net/docs/images/one/logos/vplay-logo-light.svg'"
+        >
+      </div>
+
+      <div class="flex items-center gap-2">
+        <Discovery.Activator as="span" class="inline-flex rounded" step="panel-toggle">
+          <button
+            :aria-expanded="panelOpen"
+            :aria-label="panelOpen ? 'Close intro panel' : 'Open intro panel'"
+            class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+            :title="panelOpen ? 'Close intro panel' : 'Open intro panel'"
+            @click="panelOpen = !panelOpen"
+          >
+            <AppIcon icon="info" :size="18" />
+          </button>
+        </Discovery.Activator>
+
+        <Discovery.Activator as="div" class="relative rounded" step="examples">
+          <div ref="examplesContainer">
+            <button
+              ref="examplesButton"
+              :aria-expanded="showExamples"
+              aria-haspopup="listbox"
+              aria-label="Load example"
+              class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+              title="Load example"
+              @click="showExamples = !showExamples"
+            >
+              <AppIcon icon="examples" :size="18" />
+            </button>
+
+            <div
+              v-if="showExamples"
+              aria-label="Examples"
+              class="absolute top-full right-0 mt-1 w-[280px] bg-surface border border-divider rounded-lg shadow-lg z-50"
+              role="listbox"
+            >
+              <EditorExamples @select="loadExample" />
+            </div>
+          </div>
+        </Discovery.Activator>
+
+        <button
+          v-if="!isPanelMode"
+          :aria-label="replLayout === 'horizontal' ? 'Switch to vertical layout' : 'Switch to horizontal layout'"
+          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+          :title="replLayout === 'horizontal' ? 'Switch to vertical layout' : 'Switch to horizontal layout'"
+          @click="replLayout = replLayout === 'horizontal' ? 'vertical' : 'horizontal'"
+        >
+          <AppIcon :icon="replLayout === 'horizontal' ? 'layout-vertical' : 'layout-horizontal'" :size="18" />
+        </button>
+
+        <button
+          v-if="!isDesktop"
+          :aria-expanded="sidebarOpen"
+          :aria-label="sidebarOpen ? 'Close file browser' : 'Open file browser'"
+          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+          title="Toggle files"
+          @click="sidebarOpen = !sidebarOpen"
+        >
+          <AppIcon icon="folder" :size="18" />
+        </button>
+
+        <button
+          v-if="isDesktop"
+          :aria-expanded="sidebarOpen"
+          :aria-label="sidebarOpen ? 'Close sidebar' : 'Open sidebar'"
+          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+          title="Toggle sidebar"
+          @click="sidebarOpen = !sidebarOpen"
+        >
+          <AppIcon icon="menu" :size="18" />
+        </button>
+
+        <AppThemeToggle />
+      </div>
+    </header>
+
+    <Transition name="fade">
+      <div v-if="isReady" class="flex-1 min-h-0 overflow-hidden">
+        <!-- Panel mode: intro panel + workspace (tutorial-style split) -->
+        <div
+          v-if="isPanelMode"
+          class="flex h-full"
+          :class="{ 'select-none': panelHandle.isResizing.value }"
+        >
+          <Discovery.Activator
+            active-class="rounded-lg"
+            as="div"
+            class="shrink-0 border-r border-divider"
+            step="intro-panel"
+            :style="{ width: `${panelHandle.size.value}px` }"
+          >
+            <EditorIntroPanel @close="panelOpen = false" />
+          </Discovery.Activator>
+
+          <div
+            class="editor-resize-handle"
+            :class="{ 'editor-resize-handle--active': panelHandle.isResizing.value }"
+            @dblclick="panelHandle.reset()"
+            @pointerdown="panelHandle.onPointerDown"
+          />
+
+          <EditorWorkspace
+            :external-resizing="panelHandle.isResizing.value"
+            :file-tree-key="fileTreeKey"
+            :is-dark="isDark"
+            :is-desktop="isDesktop"
+            :preview-options="previewOptions"
+            :repl-theme="replTheme"
+            :sidebar-open="sidebarOpen"
+            :store="store"
+          />
+        </div>
+
+        <!-- Normal mode: bordered editor with built-in Repl preview -->
+        <div
+          v-else
+          class="editor-repl h-full px-2 pt-2"
+          :class="{ dark: isDark }"
+        >
+          <div
+            class="editor-wrapper"
+            :class="{ 'select-none': sidebarHandle.isResizing.value }"
+          >
+            <!-- Desktop: file tree -->
+            <template v-if="isDesktop">
+              <Discovery.Activator
+                v-if="sidebarOpen"
+                active-class="rounded-lg"
+                as="div"
+                step="file-tree"
+                :style="{ width: `${sidebarHandle.size.value}px` }"
+              >
+                <EditorFileTree
+                  :key="fileTreeKey"
+                  :store="store"
+                />
+              </Discovery.Activator>
+
+              <div
+                v-if="sidebarOpen"
+                class="editor-resize-handle"
+                :class="{ 'editor-resize-handle--active': sidebarHandle.isResizing.value }"
+                @dblclick="sidebarHandle.reset()"
+                @pointerdown="sidebarHandle.onPointerDown"
+              />
+            </template>
+
+            <!-- Mobile: fixed overlay -->
+            <div
+              v-if="!isDesktop && sidebarOpen"
+              aria-label="File browser"
+              class="fixed top-0 bottom-0 left-0 w-[260px] flex flex-col bg-surface"
+              role="dialog"
+              :style="{ zIndex: ticket.zIndex.value }"
+            >
+              <div class="flex items-center justify-end px-2 py-1">
+                <button
+                  aria-label="Close file browser"
+                  class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+                  @click="sidebarOpen = false"
+                >
+                  <AppIcon icon="close" :size="18" />
+                </button>
+              </div>
+
+              <EditorFileTree
+                :key="fileTreeKey"
+                class="flex-1 min-h-0"
+                :store="store"
+              />
+            </div>
+
+            <Discovery.Activator
+              active-class="rounded-lg"
+              as="div"
+              class="editor-repl-container flex flex-col"
+              :inert="!isDesktop && sidebarOpen ? true : undefined"
+              step="editor"
+            >
+              <EditorTabs :store="store" />
+              <EditorBreadcrumbs :store="store" />
+
+              <Repl
+                :auto-resize="true"
+                class="flex-1 min-h-0"
+                :class="{ 'pointer-events-none': sidebarHandle.isResizing.value }"
+                :clear-console="true"
+                :editor="Monaco"
+                :layout="replLayout"
+                :preview-options="previewOptions"
+                :preview-theme="true"
+                :show-compile-output="false"
+                :show-import-map="false"
+                :show-ts-config="false"
+                :store="store"
+                :theme="replTheme"
+              />
+            </Discovery.Activator>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+  /* Panel → workspace resize handle */
+  .editor-resize-handle {
+    width: 4px;
+    cursor: col-resize;
+    background: transparent;
+    transition: background 0.15s;
+    flex-shrink: 0;
+  }
+
+  .editor-resize-handle:hover,
+  .editor-resize-handle--active {
+    background: var(--v0-primary);
+  }
+
+  /* Normal mode: bordered wrapper */
+  .editor-repl {
+    overflow: hidden;
+  }
+
+  .editor-wrapper {
+    display: flex;
+    height: 100%;
+    border-radius: 8px 8px 0 0;
+    border: 1px solid var(--v0-divider);
+    border-bottom: none;
+    overflow: hidden;
+  }
+
+  .editor-repl-container {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .editor-repl :deep(.vue-repl) {
+    --color-branding: var(--v0-primary);
+    --color-branding-dark: var(--v0-primary);
+  }
+
+  .editor-repl :deep(.editor-container) {
+    height: 100%;
+  }
+
+  .editor-repl :deep(.editor-floating) {
+    display: none !important;
+  }
+
+  .editor-repl :deep(.file-selector) {
+    display: none !important;
+  }
+
+  .editor-repl.dark :deep(.vue-repl) {
+    --bg: var(--v0-background);
+    --bg-soft: var(--v0-surface);
+    --border: var(--v0-divider);
+    --text-light: var(--v0-on-surface-variant);
+  }
+
+  /* Fade on mount */
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.2s;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+</style>
diff --git a/apps/docs/src/pages/skillz.tutorial.[id].vue b/apps/docs/src/pages/skillz.tutorial.[id].vue
index 67500389b..53c062bb4 100644
--- a/apps/docs/src/pages/skillz.tutorial.[id].vue
+++ b/apps/docs/src/pages/skillz.tutorial.[id].vue
@@ -3,23 +3,21 @@
   import { definePage } from 'unplugin-vue-router/runtime'
 
   // Framework
-  import { clamp, useBreakpoints, useDocumentEventListener, useStack, useStorage, useToggleScope } from '@vuetify/v0'
+  import { useBreakpoints, useStack } from '@vuetify/v0'
 
   // Components
-  import EditorBreadcrumbs from '@/components/editor/EditorBreadcrumbs.vue'
-  import EditorFileTree from '@/components/editor/EditorFileTree.vue'
+  import { Discovery } from '@/components/discovery'
   import EditorMarkdownPanel from '@/components/editor/EditorMarkdownPanel.vue'
-  import EditorTabs from '@/components/editor/EditorTabs.vue'
+  import EditorWorkspace from '@/components/editor/EditorWorkspace.vue'
   import SkillzComplete from '@/components/skillz/SkillzComplete.vue'
 
   // Composables
+  import { useResizeHandle } from '@/composables/useResizeHandle'
   import { useParams } from '@/composables/useRoute'
   import { useTutorial } from '@/composables/useTutorial'
 
   // Utilities
-  import { Repl, Sandbox } from '@vue/repl'
-  import Monaco from '@vue/repl/monaco-editor'
-  import { computed, shallowRef, type ShallowRef, watch } from 'vue'
+  import { computed, shallowRef, watch } from 'vue'
   import '@vue/repl/style.css'
   import { useRoute, useRouter } from 'vue-router'
 
@@ -72,7 +70,9 @@
     }
   }
 
-  // Hide the Repl's built-in preview — we render Sandbox separately
+  // EditorWorkspace renders Sandbox separately. Setting showOutput=false prevents
+  // the Repl from creating its internal preview iframe (see patches/@vue__repl@4.7.1.patch),
+  // avoiding a duplicate sandbox and the browser's allow-scripts+allow-same-origin warning.
   store.showOutput = false
 
   useHead({
@@ -87,78 +87,9 @@
   })
 
   // ── Resizable panels ────────────────────────────────────────────────
-  const storage = useStorage()
-
-  function useResizeHandle (options: {
-    storageKey: string
-    defaultValue: number
-    min: number
-    max: number
-    direction: 'horizontal' | 'vertical'
-  }): {
-    size: ShallowRef<number>
-    isResizing: ShallowRef<boolean>
-    onPointerDown: (e: PointerEvent) => void
-    reset: () => void
-  } {
-    const stored = storage.get<number>(options.storageKey, options.defaultValue)
-    const size = shallowRef(stored.value)
-    const isResizing = shallowRef(false)
-    const startPos = shallowRef(0)
-    const startSize = shallowRef(0)
-    const containerSize = shallowRef(0)
-
-    function onPointerDown (e: PointerEvent) {
-      e.preventDefault()
-      startPos.value = options.direction === 'horizontal' ? e.clientX : e.clientY
-      startSize.value = size.value
-      if (options.direction === 'vertical') {
-        containerSize.value = (e.target as HTMLElement).parentElement?.offsetHeight ?? 1
-      }
-      isResizing.value = true
-    }
-
-    let rafId = 0
-
-    useToggleScope(() => isResizing.value, () => {
-      useDocumentEventListener('pointermove', (e: PointerEvent) => {
-        if (rafId) return
-        rafId = requestAnimationFrame(() => {
-          const pos = options.direction === 'horizontal' ? e.clientX : e.clientY
-          const delta = pos - startPos.value
-          size.value = options.direction === 'vertical' ? clamp(startSize.value + (delta / containerSize.value) * 100, options.min, options.max) : clamp(startSize.value + delta, options.min, options.max)
-          rafId = 0
-        })
-      })
-      useDocumentEventListener('pointerup', () => {
-        if (rafId) cancelAnimationFrame(rafId)
-        rafId = 0
-        stored.value = size.value
-        isResizing.value = false
-      })
-    })
-
-    function reset () {
-      size.value = options.defaultValue
-      stored.value = options.defaultValue
-    }
-
-    return { size, isResizing, onPointerDown, reset }
-  }
-
   const markdownHandle = useResizeHandle({
     storageKey: 'tutorial-markdown-width', defaultValue: 350, min: 200, max: 600, direction: 'horizontal',
   })
-  const splitHandle = useResizeHandle({
-    storageKey: 'tutorial-split-percent', defaultValue: 50, min: 20, max: 80, direction: 'vertical',
-  })
-  const fileTreeHandle = useResizeHandle({
-    storageKey: 'tutorial-filetree-width', defaultValue: 200, min: 140, max: 400, direction: 'horizontal',
-  })
-
-  const anyResizing = computed(() =>
-    markdownHandle.isResizing.value || splitHandle.isResizing.value || fileTreeHandle.isResizing.value,
-  )
 
   // ── Completion ──────────────────────────────────────────────────────
   const stack = useStack()
@@ -229,14 +160,17 @@
       v-if="isReady"
       class="flex-1 min-h-0 flex overflow-hidden"
       :class="[
-        { dark: isDark, 'select-none': anyResizing },
+        { dark: isDark, 'select-none': markdownHandle.isResizing.value },
         isDesktop ? 'flex-row' : 'flex-col',
       ]"
     >
       <!-- Markdown panel -->
-      <div
+      <Discovery.Activator
+        active-class="rounded-lg"
+        as="div"
         class="tutorial-markdown-panel overflow-hidden shrink-0"
         :class="isDesktop ? 'border-r border-divider' : 'border-b border-divider max-h-[40vh]'"
+        step="instructions"
         :style="isDesktop ? { width: `${markdownHandle.size.value}px` } : undefined"
       >
         <EditorMarkdownPanel
@@ -248,88 +182,31 @@
           @next="onNext"
           @prev="prevStep"
         />
-      </div>
+      </Discovery.Activator>
 
       <!-- Markdown ↔ Right column handle -->
       <div
         v-if="isDesktop"
-        class="tutorial-resize-handle tutorial-resize-handle--col"
+        class="tutorial-resize-handle"
         :class="{ 'tutorial-resize-handle--active': markdownHandle.isResizing.value }"
         @dblclick="markdownHandle.reset()"
         @pointerdown="markdownHandle.onPointerDown"
       />
 
       <!-- Right column -->
-      <div class="flex flex-col flex-1 min-w-0 min-h-0 bg-background">
-        <!-- Editor area -->
-        <div
-          class="flex min-h-0 min-w-0 overflow-hidden"
-          :style="isDesktop ? { height: `${splitHandle.size.value}%` } : { flex: '1' }"
-        >
-          <EditorFileTree
-            v-if="sidebarOpen && isDesktop && !stepOptions.hideFiles"
-            :key="fileTreeKey"
-            class="shrink-0"
-            :store="store"
-            :style="{ width: `${fileTreeHandle.size.value}px` }"
-          />
-
-          <!-- File tree ↔ Editor handle -->
-          <div
-            v-if="sidebarOpen && isDesktop && !stepOptions.hideFiles"
-            class="tutorial-resize-handle tutorial-resize-handle--col"
-            :class="{ 'tutorial-resize-handle--active': fileTreeHandle.isResizing.value }"
-            @dblclick="fileTreeHandle.reset()"
-            @pointerdown="fileTreeHandle.onPointerDown"
-          />
-
-          <div
-            class="tutorial-repl-wrapper flex flex-col flex-1 min-w-0 editor-repl"
-            :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
-          >
-            <EditorTabs v-if="!stepOptions.hideTabs" :store="store" />
-            <EditorBreadcrumbs v-if="!stepOptions.hideBreadcrumbs" :store="store" />
-
-            <Repl
-              :auto-resize="true"
-              class="flex-1 min-h-0"
-              :clear-console="true"
-              :editor="Monaco"
-              :editor-options="{ monacoOptions: { padding: { top: 16 } } }"
-              layout="horizontal"
-              :preview-options="previewOptions"
-              :show-compile-output="false"
-              :show-import-map="false"
-              :show-ts-config="false"
-              :store="store"
-              :theme="replTheme"
-            />
-          </div>
-        </div>
-
-        <!-- Editor ↔ Preview handle -->
-        <div
-          v-if="isDesktop"
-          class="tutorial-resize-handle tutorial-resize-handle--row"
-          :class="{ 'tutorial-resize-handle--active': splitHandle.isResizing.value }"
-          @dblclick="splitHandle.reset()"
-          @pointerdown="splitHandle.onPointerDown"
-        />
-
-        <!-- Preview area -->
-        <div
-          class="tutorial-preview flex-1 min-w-0 min-h-0 editor-repl overflow-hidden border-t border-divider"
-          :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
-        >
-          <Sandbox
-            :clear-console="false"
-            :preview-options="previewOptions"
-            :show="true"
-            :store="store"
-            :theme="replTheme"
-          />
-        </div>
-      </div>
+      <EditorWorkspace
+        :external-resizing="markdownHandle.isResizing.value"
+        :file-tree-key="fileTreeKey"
+        :hide-breadcrumbs="stepOptions.hideBreadcrumbs"
+        :hide-files="stepOptions.hideFiles"
+        :hide-tabs="stepOptions.hideTabs"
+        :is-dark="isDark"
+        :is-desktop="isDesktop"
+        :preview-options="previewOptions"
+        :repl-theme="replTheme"
+        :sidebar-open="sidebarOpen"
+        :store="store"
+      />
     </div>
 
     <!-- Completion overlay -->
@@ -349,83 +226,17 @@
 </template>
 
 <style scoped>
-  /* Resize handles */
+  /* Markdown ↔ right column resize handle */
   .tutorial-resize-handle {
     flex-shrink: 0;
     background: transparent;
     transition: background 0.15s;
+    width: 4px;
+    cursor: col-resize;
   }
 
   .tutorial-resize-handle:hover,
   .tutorial-resize-handle--active {
     background: var(--v0-primary);
   }
-
-  .tutorial-resize-handle--col {
-    width: 4px;
-    cursor: col-resize;
-  }
-
-  .tutorial-resize-handle--row {
-    height: 4px;
-    cursor: row-resize;
-  }
-
-  /* REPL theme variables */
-  .editor-repl :deep(.vue-repl) {
-    --header-height: 0px;
-    --color-branding: var(--v0-primary);
-    --color-branding-dark: var(--v0-primary);
-  }
-
-  .editor-repl.dark :deep(.vue-repl) {
-    --bg: var(--v0-background);
-    --bg-soft: var(--v0-surface);
-    --border: var(--v0-divider);
-    --text-light: var(--v0-on-surface-variant);
-  }
-
-  /* Hide REPL's built-in file tabs */
-  .editor-repl :deep(.file-selector) {
-    display: none !important;
-  }
-
-  /* Hide editor floating toggles */
-  .editor-repl :deep(.editor-floating) {
-    display: none !important;
-  }
-
-  /* Hide the Repl's preview pane — we render Sandbox separately */
-  .tutorial-repl-wrapper :deep(.split-pane .right) {
-    display: none !important;
-  }
-
-  .tutorial-repl-wrapper :deep(.split-pane .left) {
-    width: 100% !important;
-  }
-
-  /* Hide the SplitPane divider */
-  .tutorial-repl-wrapper :deep(.split-pane .divider) {
-    display: none !important;
-  }
-
-  /* Sandbox fills container */
-  .editor-repl :deep(.vue-repl),
-  .editor-repl :deep(.iframe-container),
-  .editor-repl :deep(iframe) {
-    width: 100%;
-    height: 100%;
-  }
-
-  /* Match iframe bg to preview body to prevent flash between steps */
-  .tutorial-preview :deep(iframe) {
-    background-color: var(--v0-background) !important;
-  }
-
-  /* Disable @vue/repl's built-in fade transition on preview iframe */
-  .tutorial-preview :deep(.fade-enter-active),
-  .tutorial-preview :deep(.fade-leave-active) {
-    transition: none !important;
-  }
-
 </style>
diff --git a/apps/docs/src/skillz/tours/beginner/using-the-editor/index.json b/apps/docs/src/skillz/tours/beginner/using-the-editor/index.json
new file mode 100644
index 000000000..1136b48cd
--- /dev/null
+++ b/apps/docs/src/skillz/tours/beginner/using-the-editor/index.json
@@ -0,0 +1,72 @@
+{
+  "mode": "guided",
+  "id": "using-the-editor",
+  "name": "Using the Editor",
+  "level": 1,
+  "track": "essentials",
+  "categories": ["meta"],
+  "order": 1,
+  "prerequisites": [],
+  "description": "Learn how the tutorial editor works before you start coding.",
+  "minutes": 2,
+  "startRoute": "/playground",
+  "steps": [
+    {
+      "id": "welcome",
+      "title": "Welcome to the Editor",
+      "task": "This is where you write and run code. Let's take a quick look at what's here.",
+      "hint": "",
+      "learn": "Understand the editor layout",
+      "noActivator": true
+    },
+    {
+      "id": "panel-toggle",
+      "title": "Intro Panel",
+      "task": "This button opens or closes the getting-started panel. It gives you a quick overview of what the editor offers.",
+      "hint": "",
+      "learn": "Toggle the intro panel",
+      "placement": "bottom"
+    },
+    {
+      "id": "intro-panel",
+      "title": "Getting Started",
+      "task": "The intro panel gives you an overview of the editor's features and links to tutorials.",
+      "hint": "",
+      "learn": "Use the intro panel for orientation",
+      "placement": "right"
+    },
+    {
+      "id": "examples",
+      "title": "Load an Example",
+      "task": "Click here to browse and load example code snippets. A great way to see v0 composables in action.",
+      "hint": "",
+      "learn": "Load examples from the toolbar",
+      "placement": "bottom"
+    },
+    {
+      "id": "file-tree",
+      "title": "Project Files",
+      "task": "Your files live here. Click any file to open it in the editor.",
+      "hint": "",
+      "learn": "Switch between project files",
+      "placement": "right",
+      "skipOnMobile": true
+    },
+    {
+      "id": "editor",
+      "title": "Code Editor",
+      "task": "Write your code on the left. The preview on the right updates instantly as you type.",
+      "hint": "",
+      "learn": "Write code and see it run live",
+      "placement": "left"
+    },
+    {
+      "id": "complete",
+      "title": "Ready to Code",
+      "task": "That's all there is to it. Load an example from the toolbar or start from scratch.",
+      "hint": "",
+      "learn": "Use the editor with confidence",
+      "noActivator": true
+    }
+  ]
+}
diff --git a/apps/docs/src/skillz/tours/beginner/using-the-editor/index.ts b/apps/docs/src/skillz/tours/beginner/using-the-editor/index.ts
new file mode 100644
index 000000000..5d76c705e
--- /dev/null
+++ b/apps/docs/src/skillz/tours/beginner/using-the-editor/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Tour definition for "Using the Editor".
+ * Pure guided tour — no UI state to manage between steps.
+ */
+export function defineTour () {
+  return {}
+}
diff --git a/apps/docs/src/typed-router.d.ts b/apps/docs/src/typed-router.d.ts
index a840df5f7..7094fefb8 100644
--- a/apps/docs/src/typed-router.d.ts
+++ b/apps/docs/src/typed-router.d.ts
@@ -457,13 +457,6 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
-    '/editor': RouteRecordInfo<
-      '/editor',
-      '/editor',
-      Record<never, never>,
-      Record<never, never>,
-      | never
-    >,
     '/guide/': RouteRecordInfo<
       '/guide/',
       '/guide',
@@ -646,6 +639,13 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/playground': RouteRecordInfo<
+      '/playground',
+      '/playground',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     '/releases': RouteRecordInfo<
       '/releases',
       '/releases',
@@ -1080,12 +1080,6 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
-    'src/pages/editor.vue': {
-      routes:
-        | '/editor'
-      views:
-        | never
-    }
     'src/pages/guide/index.md': {
       routes:
         | '/guide/'
@@ -1242,6 +1236,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/playground.vue': {
+      routes:
+        | '/playground'
+      views:
+        | never
+    }
     'src/pages/releases.md': {
       routes:
         | '/releases'
diff --git a/patches/@vue__repl@4.7.1.patch b/patches/@vue__repl@4.7.1.patch
new file mode 100644
index 000000000..ca520e3ac
--- /dev/null
+++ b/patches/@vue__repl@4.7.1.patch
@@ -0,0 +1,30 @@
+diff --git a/dist/vue-repl.js b/dist/vue-repl.js
+index 8443310ab473735513bae339f5e0876ff9b16059..f475486ab57fa22a77c4745ac5d1794f658d9616 100644
+--- a/dist/vue-repl.js
++++ b/dist/vue-repl.js
+@@ -500,7 +500,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+   setup(__props, { expose: __expose }) {
+     const props = __props;
+     const { store, theme, clearConsole, previewOptions } = toRefs(props);
+-    const keyProps = inject(injectKeyProps);
++    const keyProps = inject(injectKeyProps, void 0);
+     if (keyProps === void 0 && props.autoStoreInit) {
+       props.store?.init?.();
+     }
+@@ -1218,14 +1218,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
+             createVNode(EditorContainer, { "editor-component": _ctx.editor }, null, 8, ["editor-component"])
+           ]),
+           [outputSlotName.value]: withCtx(() => [
+-            createVNode(Output, {
++            props.store.showOutput !== false ? createVNode(Output, {
+               ref: "output",
+               "editor-component": _ctx.editor,
+               "show-compile-output": props.showCompileOutput,
+               "show-open-source-map": props.showOpenSourceMap,
+               "show-ssr-output": props.showSsrOutput,
+               ssr: !!props.ssr
+-            }, null, 8, ["editor-component", "show-compile-output", "show-open-source-map", "show-ssr-output", "ssr"])
++            }, null, 8, ["editor-component", "show-compile-output", "show-open-source-map", "show-ssr-output", "ssr"]) : createCommentVNode("", true)
+           ]),
+           _: 2
+         }, 1032, ["layout"])
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fd6df5982..321ef2519 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -210,6 +210,11 @@ overrides:
   '@storybook/vue3-vite>vite': ^7.0.0
   vite: npm:rolldown-vite@^7.3.0
 
+patchedDependencies:
+  '@vue/repl@4.7.1':
+    hash: e26b00f869790271f46936e3539a934b376487e8db9a5a430447e624d3725d45
+    path: patches/@vue__repl@4.7.1.patch
+
 importers:
 
   .:
@@ -291,7 +296,7 @@ importers:
         version: 2.0.19(rollup@2.79.2)
       '@vue/repl':
         specifier: 'catalog:'
-        version: 4.7.1
+        version: 4.7.1(patch_hash=e26b00f869790271f46936e3539a934b376487e8db9a5a430447e624d3725d45)
       '@vuetify/paper':
         specifier: workspace:*
         version: link:../../packages/paper
@@ -8915,7 +8920,7 @@ snapshots:
     dependencies:
       '@vue/shared': 3.5.26
 
-  '@vue/repl@4.7.1': {}
+  '@vue/repl@4.7.1(patch_hash=e26b00f869790271f46936e3539a934b376487e8db9a5a430447e624d3725d45)': {}
 
   '@vue/runtime-core@3.5.24':
     dependencies:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index e0a3b5335..8c7b251a2 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -20,8 +20,8 @@ catalog:
   '@unhead/addons': 2.0.19
   '@unhead/vue': 2.0.19
   '@vitest/coverage-v8': ^4.0.16
-  '@vue/test-utils': ^2.4.6
   '@vue/repl': ^4.7.1
+  '@vue/test-utils': ^2.4.6
   '@vue/tsconfig': ^0.8.1
   '@vuetify/github-releaser': ^4.0.3
   bumpp: ^10.3.2
@@ -88,3 +88,6 @@ overrides:
   '@storybook/builder-vite>vite': ^7.0.0
   '@storybook/vue3-vite>vite': ^7.0.0
   vite: npm:rolldown-vite@^7.3.0
+
+patchedDependencies:
+  '@vue/repl@4.7.1': patches/@vue__repl@4.7.1.patch

From 79129f95ca59f1234d4e8ace542e8b248e6deb98 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 18 Feb 2026 22:51:35 -0600
Subject: [PATCH 25/39] docs(playground): update default example to use
 createSingle with mandatory force

---
 apps/docs/src/data/editor-defaults.ts | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/apps/docs/src/data/editor-defaults.ts b/apps/docs/src/data/editor-defaults.ts
index 9faac4baf..d3bd9554a 100644
--- a/apps/docs/src/data/editor-defaults.ts
+++ b/apps/docs/src/data/editor-defaults.ts
@@ -131,33 +131,36 @@ defineConfig({
 
 // ── Default App.vue ─────────────────────────────────────────────────────
 
-export const DEFAULT_CODE = `<script setup lang="ts">
+export const DEFAULT_CODE = `<script lang="ts" setup>
   import { createSingle } from '@vuetify/v0'
 
-  const tabs = ['Overview', 'Details', 'Settings']
-  const active = createSingle()
-  active.onboard(tabs.map(label => ({ id: label, value: label })))
-  active.select('Overview')
+  const single = createSingle({ mandatory: 'force' })
+
+  single.onboard([
+    { id: 'home', value: 'Home' },
+    { id: 'profile', value: 'Profile' },
+    { id: 'settings', value: 'Settings' },
+  ])
 </script>
 
 <template>
-  <div class="p-6 font-sans bg-background text-on-background min-h-screen">
+  <div class="p-6">
     <div class="flex border-b border-divider mb-6">
       <button
-        v-for="tab in tabs"
-        :key="tab"
+        v-for="tab in single.values()"
+        :key="tab.id"
         class="px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors"
-        :class="active.selected(tab)
+        :class="tab.isSelected.value
           ? 'text-primary border-primary'
           : 'text-on-surface-variant border-transparent hover:text-on-surface'"
-        @click="active.select(tab)"
+        @click="tab.toggle()"
       >
-        {{ tab }}
+        {{ tab.value }}
       </button>
     </div>
 
     <p class="text-sm text-on-surface-variant">
-      Active tab: <strong class="text-on-surface">{{ active.selectedId.value }}</strong>
+      Active tab: <strong class="text-on-surface">{{ single.selectedId.value }}</strong>
     </p>
   </div>
 </template>

From ba2cda2df76ac908e4c9a41d8366daec173e4fb0 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 18 Feb 2026 23:34:54 -0600
Subject: [PATCH 26/39] docs(skillz): redesign resume popup with snooze, level
 badge, progress, and dot grid

---
 .../src/components/skillz/SkillzResume.vue    | 114 +++++++++++++-----
 apps/docs/src/pages/playground.vue            |   6 +-
 apps/docs/src/plugins/icons.ts                |   2 +
 apps/docs/src/stores/skillz.ts                |  19 ++-
 4 files changed, 100 insertions(+), 41 deletions(-)

diff --git a/apps/docs/src/components/skillz/SkillzResume.vue b/apps/docs/src/components/skillz/SkillzResume.vue
index 45d3da7f2..1fd35f0b2 100644
--- a/apps/docs/src/components/skillz/SkillzResume.vue
+++ b/apps/docs/src/components/skillz/SkillzResume.vue
@@ -9,11 +9,13 @@
   import { useSettings } from '@/composables/useSettings'
 
   // Utilities
-  import { toRef } from 'vue'
+  import { computed, toRef } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
 
   // Stores
   import { useSkillzStore } from '@/stores/skillz'
+  // Types
+  import { SKILL_LEVEL_META } from '@/types/skill'
 
   const store = useSkillzStore()
   const route = useRoute()
@@ -26,6 +28,15 @@
   const search = useSearch()
   const settings = useSettings()
 
+  const levelMeta = computed(() => {
+    const level = store.pendingTour?.tour.level ?? 1
+    return SKILL_LEVEL_META[level]
+  })
+
+  const completedCount = computed(() => store.pendingTour?.progress.steps.length ?? 0)
+  const totalCount = computed(() => store.pendingTour?.tour.steps.length ?? 0)
+  const progressPct = computed(() => totalCount.value > 0 ? Math.round(completedCount.value / totalCount.value * 100) : 0)
+
   async function onResume () {
     const pending = store.pendingTour
     if (!pending) return
@@ -62,6 +73,13 @@
       store.dismiss(pending.tour.id)
     }
   }
+
+  function onSnooze () {
+    const pending = store.pendingTour
+    if (pending) {
+      store.snooze(pending.tour.id)
+    }
+  }
 </script>
 
 <template>
@@ -69,28 +87,60 @@
     <Transition name="slide-up">
       <div
         v-if="store.pendingTour && !isSkillzPage"
-        class="fixed top-16 inset-x-0 mx-auto w-max z-50 flex items-center gap-3 px-4 py-3 bg-surface border border-divider rounded-xl shadow-xl"
+        class="fixed top-14 inset-x-0 mx-auto z-50 w-[300px] bg-surface border border-divider rounded-xl shadow-xl overflow-hidden"
       >
-        <span class="text-sm text-on-surface">
-          Continue <strong>{{ store.pendingTour.tour.name }}</strong>?
-        </span>
-
-        <div class="flex gap-2">
-          <button
-            class="px-3 py-1.5 text-sm text-on-surface-variant hover:text-on-surface transition-colors"
-            type="button"
-            @click="onDismiss"
-          >
-            Dismiss
-          </button>
-
-          <button
-            class="px-3 py-1.5 text-sm font-semibold bg-primary text-on-primary rounded-lg hover:brightness-110 transition-[filter]"
-            type="button"
-            @click="onResume"
-          >
-            Resume
-          </button>
+        <AppDotGrid :coverage="50" :density="14" origin="bottom left" />
+
+        <div class="relative p-4">
+          <!-- Title row -->
+          <div class="flex items-start justify-between gap-2 mb-1">
+            <p class="text-xs font-semibold uppercase tracking-wide text-on-surface-variant">
+              Skill in Progress
+            </p>
+            <AppCloseButton label="Dismiss" size="sm" @click="onDismiss" />
+          </div>
+
+          <!-- Tour name -->
+          <p class="text-sm font-semibold text-on-surface leading-snug mb-2">
+            {{ store.pendingTour.tour.name }}
+          </p>
+
+          <!-- Meta row: level · step X of Y · duration -->
+          <div class="flex items-center gap-1.5 text-xs text-on-surface-variant mb-3">
+            <SkillLevelBadge :icon-size="11" :level="store.pendingTour.tour.level" />
+            <span class="opacity-30">·</span>
+            <span>Step {{ completedCount + 1 }} of {{ totalCount }}</span>
+            <span class="opacity-30">·</span>
+            <AppIcon icon="clock" :size="11" />
+            <span>~{{ store.pendingTour.tour.minutes }} min</span>
+          </div>
+
+          <!-- Progress bar -->
+          <div class="h-1 bg-surface-tint rounded-full overflow-hidden mb-4">
+            <div
+              class="h-full rounded-full transition-all duration-300"
+              :style="{ width: `${progressPct}%`, background: levelMeta.color }"
+            />
+          </div>
+
+          <!-- Actions -->
+          <div class="flex items-center justify-between gap-3">
+            <button
+              class="text-xs text-on-surface-variant hover:text-on-surface transition-colors"
+              type="button"
+              @click="onSnooze"
+            >
+              Remind me later
+            </button>
+            <button
+              class="flex items-center gap-1 px-3 py-1.5 text-xs font-semibold bg-primary text-on-primary rounded-lg hover:brightness-110 transition-[filter]"
+              type="button"
+              @click="onResume"
+            >
+              Resume
+              <AppIcon class="opacity-100" icon="chevron-right" :size="13" />
+            </button>
+          </div>
         </div>
       </div>
     </Transition>
@@ -98,14 +148,14 @@
 </template>
 
 <style scoped>
-.slide-up-enter-active,
-.slide-up-leave-active {
-  transition: transform 0.3s ease, opacity 0.3s ease;
-}
-
-.slide-up-enter-from,
-.slide-up-leave-to {
-  transform: translateY(-25%);
-  opacity: 0;
-}
+  .slide-up-enter-active,
+  .slide-up-leave-active {
+    transition: transform 0.25s ease, opacity 0.25s ease;
+  }
+
+  .slide-up-enter-from,
+  .slide-up-leave-to {
+    transform: translateY(-12px);
+    opacity: 0;
+  }
 </style>
diff --git a/apps/docs/src/pages/playground.vue b/apps/docs/src/pages/playground.vue
index bcc8f3f50..072ff1a5d 100644
--- a/apps/docs/src/pages/playground.vue
+++ b/apps/docs/src/pages/playground.vue
@@ -118,9 +118,9 @@
   // Panel resize (panel mode)
   const panelHandle = useResizeHandle({
     storageKey: 'editor-intro-width',
-    defaultValue: 300,
-    min: 200,
-    max: 500,
+    defaultValue: 420,
+    min: 280,
+    max: 600,
     direction: 'horizontal',
   })
 
diff --git a/apps/docs/src/plugins/icons.ts b/apps/docs/src/plugins/icons.ts
index 4011d3783..aeb8a4dbb 100644
--- a/apps/docs/src/plugins/icons.ts
+++ b/apps/docs/src/plugins/icons.ts
@@ -14,6 +14,7 @@ import {
   mdiBug,
   mdiCalendar,
   mdiCalendarClock,
+  mdiClockOutline,
   mdiCheck,
   mdiCheckCircle,
   mdiCheckDecagram,
@@ -184,6 +185,7 @@ export const [useIconContext, provideIconContext, context] = createTokensContext
     'vapor': mdiRocketLaunch,
     'calendar': mdiCalendar,
     'calendar-clock': mdiCalendarClock,
+    'clock': mdiClockOutline,
     'share': mdiShareVariant,
     'check-circle': mdiCheckCircle,
     'check-decagram': mdiCheckDecagram,
diff --git a/apps/docs/src/stores/skillz.ts b/apps/docs/src/stores/skillz.ts
index 94ac218a0..2f5c62df1 100644
--- a/apps/docs/src/stores/skillz.ts
+++ b/apps/docs/src/stores/skillz.ts
@@ -23,6 +23,7 @@ export interface TourProgress {
   lastStep?: string
   startedAt?: number
   completedAt?: number
+  snoozedUntil?: number
 }
 
 export interface SkillzProgress {
@@ -79,6 +80,7 @@ export const useSkillzStore = defineStore('skillz', () => {
       lastStep: existing?.lastStep,
       startedAt: existing?.startedAt,
       completedAt: existing?.completedAt,
+      snoozedUntil: existing?.snoozedUntil,
       ...changes,
     }
   }
@@ -94,6 +96,7 @@ export const useSkillzStore = defineStore('skillz', () => {
     update(id, {
       status: 'in-progress',
       startedAt: data.value.tours[id]?.startedAt ?? Date.now(),
+      snoozedUntil: undefined,
     })
   }
 
@@ -127,10 +130,12 @@ export const useSkillzStore = defineStore('skillz', () => {
   }
 
   function dismiss (id: string): void {
-    const existing = data.value.tours[id]
-    if (existing?.status === 'in-progress') {
-      delete data.value.tours[id]
-    }
+    const { [id]: _, ...rest } = data.value.tours
+    data.value.tours = rest
+  }
+
+  function snooze (id: string): void {
+    update(id, { snoozedUntil: Date.now() + 60 * 60 * 1000 })
   }
 
   // Track current step on enter (for resume)
@@ -190,11 +195,12 @@ export const useSkillzStore = defineStore('skillz', () => {
   const items = computed(() => [...discovery.tours.values(), ...tutorialSkills])
   const done = computed(() => active.value ? steps(active.value) : [])
 
-  // Find any skill that was started but not completed (and not currently active)
+  // Find any skill that was started but not completed (and not currently active or snoozed)
   const pendingTour = computed(() => {
     if (active.value) return null
+    const now = Date.now()
     for (const [id, progress] of Object.entries(data.value.tours)) {
-      if (progress.status === 'in-progress') {
+      if (progress.status === 'in-progress' && !(progress.snoozedUntil && progress.snoozedUntil > now)) {
         const tour = discovery.tours.get(id) ?? tutorialSkills.find(s => s.id === id)
         if (tour) return { tour, progress }
       }
@@ -210,6 +216,7 @@ export const useSkillzStore = defineStore('skillz', () => {
     finish,
     reset,
     dismiss,
+    snooze,
     begin,
     record,
     setLastStep,

From 9e0dbdc67b7e76a1908d17a165995c29c2e676c8 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 18 Feb 2026 23:48:48 -0600
Subject: [PATCH 27/39] chore(EditorIntroPanel): update content

---
 apps/docs/src/components/editor/EditorIntroPanel.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/src/components/editor/EditorIntroPanel.md b/apps/docs/src/components/editor/EditorIntroPanel.md
index 429c832a3..9bc5fef51 100644
--- a/apps/docs/src/components/editor/EditorIntroPanel.md
+++ b/apps/docs/src/components/editor/EditorIntroPanel.md
@@ -1,6 +1,6 @@
 # Welcome to Vuetify0!
 
-@vuetify/v0 gives you headless composables — selection, registration, forms, theming — without any markup opinions. You bring the HTML and CSS; v0 handles the logic. This editor is where you build with them: a Monaco-powered workspace with live preview, type checking, and every v0 export ready to import.
+[@vuetify/v0](https://www.npmjs.com/package/@vuetify/v0) gives you headless composables — selection, registration, forms, theming — without any markup opinions. You bring the HTML and CSS; v0 handles the logic. This editor is where you build with them: a Monaco-powered workspace with live preview, type checking, and every v0 export ready to import.
 
 ## The environment
 

From 1a40f9e681b94f96608e84ac4ff44085f15136ce Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 18 Feb 2026 23:50:29 -0600
Subject: [PATCH 28/39] docs(skillz): separate local UI prefs from synced
 progress data
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move snoozedUntil/dismissed out of TourProgress into a separate
  skillz-prefs localStorage key (LocalSkillzPrefs) — keeps TourProgress
  a clean, server-syncable DTO
- dismiss() now hides the resume popup without wiping progress; reset()
  remains the only way to delete tour data
- Extract SkillzAdapter interface with createLocalAdapter() as the seam
  for future Vuetify One API integration
- Fix: use spread-reassignment (clearPrefs) instead of delete to ensure
  Vue's deep watch persists prefs removals to localStorage
---
 apps/docs/src/stores/skillz.ts | 60 +++++++++++++++++++++++++++-------
 1 file changed, 48 insertions(+), 12 deletions(-)

diff --git a/apps/docs/src/stores/skillz.ts b/apps/docs/src/stores/skillz.ts
index 2f5c62df1..3a95e69de 100644
--- a/apps/docs/src/stores/skillz.ts
+++ b/apps/docs/src/stores/skillz.ts
@@ -10,6 +10,7 @@ import { computed, shallowRef } from 'vue'
 
 // Types
 import type { DiscoveryStepTicket } from '@/composables/useDiscovery'
+import type { Ref } from 'vue'
 
 // Tutorials
 import { getTutorialSkills } from '@/skillz/tutorials'
@@ -23,7 +24,6 @@ export interface TourProgress {
   lastStep?: string
   startedAt?: number
   completedAt?: number
-  snoozedUntil?: number
 }
 
 export interface SkillzProgress {
@@ -31,16 +31,41 @@ export interface SkillzProgress {
   tours: Record<string, TourProgress>
 }
 
+// Local-only UI preferences — never synced to the server
+interface LocalSkillzPrefs {
+  snoozed: Record<string, number> // tourId → snoozedUntil timestamp
+  dismissed: Record<string, boolean> // tourId → hidden from resume popup
+}
+
+// Adapter interface — swap for an API-backed implementation for Vuetify One subscribers
+export interface SkillzAdapter {
+  readonly data: Ref<SkillzProgress>
+}
+
 const VERSION = 1
 
 function defaults (): SkillzProgress {
   return { version: VERSION, tours: {} }
 }
 
+function defaultPrefs (): LocalSkillzPrefs {
+  return { snoozed: {}, dismissed: {} }
+}
+
+function createLocalAdapter (storage: ReturnType<typeof useStorage>): SkillzAdapter {
+  return { data: storage.get<SkillzProgress>('skillz', defaults()) }
+}
+
 export const useSkillzStore = defineStore('skillz', () => {
   const discovery = useDiscovery()
   const storage = useStorage()
-  const data = storage.get<SkillzProgress>('skillz', defaults())
+
+  // Progress data — sourced through adapter for future API integration
+  const adapter = createLocalAdapter(storage)
+  const data = adapter.data
+
+  // UI preferences — always local-only
+  const prefs = storage.get<LocalSkillzPrefs>('skillz-prefs', defaultPrefs())
 
   const active = shallowRef<string | null>(null)
 
@@ -80,11 +105,17 @@ export const useSkillzStore = defineStore('skillz', () => {
       lastStep: existing?.lastStep,
       startedAt: existing?.startedAt,
       completedAt: existing?.completedAt,
-      snoozedUntil: existing?.snoozedUntil,
       ...changes,
     }
   }
 
+  // Spread-reassign to ensure Vue's deep watch detects the removal and persists to localStorage
+  function clearPrefs (id: string): void {
+    const { [id]: _s, ...snoozed } = prefs.value.snoozed
+    const { [id]: _d, ...dismissed } = prefs.value.dismissed
+    prefs.value = { snoozed, dismissed }
+  }
+
   function begin (id: string): void {
     const existing = data.value.tours[id]
 
@@ -93,10 +124,12 @@ export const useSkillzStore = defineStore('skillz', () => {
       delete data.value.tours[id]
     }
 
+    // Clear local UI prefs so the resume popup shows again
+    clearPrefs(id)
+
     update(id, {
       status: 'in-progress',
       startedAt: data.value.tours[id]?.startedAt ?? Date.now(),
-      snoozedUntil: undefined,
     })
   }
 
@@ -123,19 +156,21 @@ export const useSkillzStore = defineStore('skillz', () => {
   function reset (id?: string): void {
     if (id) {
       delete data.value.tours[id]
+      clearPrefs(id)
     } else {
       data.value.tours = {}
       data.value.version = VERSION
+      prefs.value = defaultPrefs()
     }
   }
 
+  // Hides the resume popup without wiping progress — user can still resume from the skillz page
   function dismiss (id: string): void {
-    const { [id]: _, ...rest } = data.value.tours
-    data.value.tours = rest
+    prefs.value.dismissed[id] = true
   }
 
   function snooze (id: string): void {
-    update(id, { snoozedUntil: Date.now() + 60 * 60 * 1000 })
+    prefs.value.snoozed[id] = Date.now() + 60 * 60 * 1000
   }
 
   // Track current step on enter (for resume)
@@ -195,15 +230,16 @@ export const useSkillzStore = defineStore('skillz', () => {
   const items = computed(() => [...discovery.tours.values(), ...tutorialSkills])
   const done = computed(() => active.value ? steps(active.value) : [])
 
-  // Find any skill that was started but not completed (and not currently active or snoozed)
+  // Find any skill that was started but not completed (and not currently active, snoozed, or dismissed)
   const pendingTour = computed(() => {
     if (active.value) return null
     const now = Date.now()
     for (const [id, progress] of Object.entries(data.value.tours)) {
-      if (progress.status === 'in-progress' && !(progress.snoozedUntil && progress.snoozedUntil > now)) {
-        const tour = discovery.tours.get(id) ?? tutorialSkills.find(s => s.id === id)
-        if (tour) return { tour, progress }
-      }
+      if (progress.status !== 'in-progress') continue
+      if (prefs.value.dismissed[id]) continue
+      if (prefs.value.snoozed[id] && prefs.value.snoozed[id] > now) continue
+      const tour = discovery.tours.get(id) ?? tutorialSkills.find(s => s.id === id)
+      if (tour) return { tour, progress }
     }
     return null
   })

From 3bc8f6e580ba0ed4fae6b1d4b67c895a8596d9e4 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 19 Feb 2026 08:47:01 -0600
Subject: [PATCH 29/39] docs(skillz): organize tutorials into level subfolders

Mirrors the tours directory structure by adding beginner/intermediate/advanced
level folders under skillz/tutorials/. Updates glob patterns and path parsing
in index.ts to handle the extra folder depth.
---
 .../{ => advanced}/vue-advanced/meta.json     |  0
 .../vue-advanced/step-1/App.vue               |  0
 .../vue-advanced/step-1/README.md             |  0
 .../vue-advanced/step-1/useCounter.ts         |  0
 .../vue-advanced/step-2/App.vue               |  0
 .../vue-advanced/step-2/README.md             |  0
 .../vue-advanced/step-2/useList.ts            |  0
 .../vue-advanced/step-3/App.vue               |  0
 .../vue-advanced/step-3/README.md             |  0
 .../vue-advanced/step-3/usePolling.ts         |  0
 .../vue-advanced/step-4/App.vue               |  0
 .../vue-advanced/step-4/README.md             |  0
 .../vue-advanced/step-4/SelectableList.vue    |  0
 .../vue-advanced/step-5/App.vue               |  0
 .../vue-advanced/step-5/README.md             |  0
 .../vue-advanced/step-5/SearchInput.vue       |  0
 .../vue-advanced/step-5/SelectableList.vue    |  0
 .../vue-advanced/step-6/App.vue               |  0
 .../vue-advanced/step-6/README.md             |  0
 .../vue-advanced/step-6/SelectableList.vue    |  0
 .../vue-advanced/step-7/App.vue               |  0
 .../vue-advanced/step-7/README.md             |  0
 .../vue-advanced/step-7/SelectableList.vue    |  0
 .../vue-advanced/step-7/useFilter.ts          |  0
 .../vue-advanced/step-7/useList.ts            |  0
 .../{ => beginner}/v0-basics/meta.json        |  0
 .../{ => beginner}/v0-basics/step-1/App.vue   |  0
 .../{ => beginner}/v0-basics/step-1/README.md |  0
 .../{ => beginner}/v0-basics/step-2/App.vue   |  0
 .../{ => beginner}/v0-basics/step-2/README.md |  0
 .../{ => beginner}/v0-basics/step-3/App.vue   |  0
 .../{ => beginner}/v0-basics/step-3/README.md |  0
 .../{ => beginner}/v0-basics/step-4/App.vue   |  0
 .../{ => beginner}/v0-basics/step-4/README.md |  0
 .../{ => beginner}/v0-basics/step-5/App.vue   |  0
 .../{ => beginner}/v0-basics/step-5/README.md |  0
 .../v0-basics/step-5/SettingsSection.vue      |  0
 .../{ => beginner}/v0-basics/step-6/App.vue   |  0
 .../v0-basics/step-6/ConfirmDialog.vue        |  0
 .../{ => beginner}/v0-basics/step-6/README.md |  0
 .../v0-basics/step-6/SettingsSection.vue      |  0
 .../{ => beginner}/v0-basics/step-7/App.vue   |  0
 .../v0-basics/step-7/ConfirmDialog.vue        |  0
 .../{ => beginner}/v0-basics/step-7/README.md |  0
 .../v0-basics/step-7/SettingsSection.vue      |  0
 .../{ => beginner}/v0-basics/step-8/App.vue   |  0
 .../v0-basics/step-8/ConfirmDialog.vue        |  0
 .../{ => beginner}/v0-basics/step-8/README.md |  0
 .../v0-basics/step-8/SettingsSection.vue      |  0
 .../{ => beginner}/vue-basics/meta.json       |  0
 .../{ => beginner}/vue-basics/step-1/App.vue  |  0
 .../vue-basics/step-1/README.md               |  0
 .../{ => beginner}/vue-basics/step-2/App.vue  |  0
 .../vue-basics/step-2/README.md               |  0
 .../{ => beginner}/vue-basics/step-3/App.vue  |  0
 .../vue-basics/step-3/README.md               |  0
 .../{ => beginner}/vue-basics/step-4/App.vue  |  0
 .../vue-basics/step-4/README.md               |  0
 .../{ => beginner}/vue-basics/step-5/App.vue  |  0
 .../vue-basics/step-5/README.md               |  0
 .../{ => beginner}/vue-basics/step-6/App.vue  |  0
 .../vue-basics/step-6/README.md               |  0
 .../{ => beginner}/vue-basics/step-7/App.vue  |  0
 .../vue-basics/step-7/README.md               |  0
 apps/docs/src/skillz/tutorials/index.ts       | 23 ++++++++++++-------
 .../vue-intermediate/meta.json                |  0
 .../vue-intermediate/step-1/App.vue           |  0
 .../vue-intermediate/step-1/README.md         |  0
 .../vue-intermediate/step-2/App.vue           |  0
 .../vue-intermediate/step-2/README.md         |  0
 .../vue-intermediate/step-3/App.vue           |  0
 .../vue-intermediate/step-3/README.md         |  0
 .../vue-intermediate/step-4/App.vue           |  0
 .../vue-intermediate/step-4/README.md         |  0
 .../vue-intermediate/step-5/App.vue           |  0
 .../step-5/NotificationItem.vue               |  0
 .../vue-intermediate/step-5/README.md         |  0
 .../vue-intermediate/step-6/App.vue           |  0
 .../step-6/NotificationItem.vue               |  0
 .../vue-intermediate/step-6/README.md         |  0
 .../vue-intermediate/step-7/App.vue           |  0
 .../step-7/NotificationCard.vue               |  0
 .../step-7/NotificationItem.vue               |  0
 .../vue-intermediate/step-7/README.md         |  0
 .../vue-intermediate/step-8/App.vue           |  0
 .../step-8/NotificationCard.vue               |  0
 .../step-8/NotificationItem.vue               |  0
 .../vue-intermediate/step-8/README.md         |  0
 88 files changed, 15 insertions(+), 8 deletions(-)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/meta.json (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-1/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-1/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-1/useCounter.ts (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-2/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-2/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-2/useList.ts (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-3/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-3/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-3/usePolling.ts (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-4/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-4/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-4/SelectableList.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-5/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-5/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-5/SearchInput.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-5/SelectableList.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-6/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-6/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-6/SelectableList.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-7/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-7/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-7/SelectableList.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-7/useFilter.ts (100%)
 rename apps/docs/src/skillz/tutorials/{ => advanced}/vue-advanced/step-7/useList.ts (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/meta.json (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-1/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-1/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-2/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-2/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-3/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-3/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-4/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-4/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-5/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-5/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-5/SettingsSection.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-6/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-6/ConfirmDialog.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-6/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-6/SettingsSection.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-7/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-7/ConfirmDialog.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-7/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-7/SettingsSection.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-8/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-8/ConfirmDialog.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-8/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/v0-basics/step-8/SettingsSection.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/vue-basics/meta.json (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/vue-basics/step-1/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/vue-basics/step-1/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/vue-basics/step-2/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/vue-basics/step-2/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/vue-basics/step-3/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/vue-basics/step-3/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/vue-basics/step-4/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/vue-basics/step-4/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/vue-basics/step-5/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/vue-basics/step-5/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/vue-basics/step-6/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/vue-basics/step-6/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/vue-basics/step-7/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => beginner}/vue-basics/step-7/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/meta.json (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-1/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-1/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-2/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-2/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-3/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-3/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-4/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-4/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-5/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-5/NotificationItem.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-5/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-6/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-6/NotificationItem.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-6/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-7/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-7/NotificationCard.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-7/NotificationItem.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-7/README.md (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-8/App.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-8/NotificationCard.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-8/NotificationItem.vue (100%)
 rename apps/docs/src/skillz/tutorials/{ => intermediate}/vue-intermediate/step-8/README.md (100%)

diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/meta.json b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/meta.json
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/meta.json
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/meta.json
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-1/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-1/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-1/App.vue
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-1/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-1/README.md b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-1/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-1/README.md
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-1/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-1/useCounter.ts b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-1/useCounter.ts
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-1/useCounter.ts
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-1/useCounter.ts
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-2/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-2/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-2/App.vue
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-2/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-2/README.md b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-2/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-2/README.md
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-2/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-2/useList.ts b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-2/useList.ts
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-2/useList.ts
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-2/useList.ts
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-3/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-3/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-3/App.vue
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-3/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-3/README.md b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-3/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-3/README.md
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-3/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-3/usePolling.ts b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-3/usePolling.ts
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-3/usePolling.ts
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-3/usePolling.ts
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-4/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-4/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-4/App.vue
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-4/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-4/README.md b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-4/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-4/README.md
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-4/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-4/SelectableList.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-4/SelectableList.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-4/SelectableList.vue
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-4/SelectableList.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-5/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-5/App.vue
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-5/README.md b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-5/README.md
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-5/SearchInput.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/SearchInput.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-5/SearchInput.vue
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/SearchInput.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-5/SelectableList.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/SelectableList.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-5/SelectableList.vue
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/SelectableList.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-6/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-6/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-6/App.vue
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-6/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-6/README.md b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-6/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-6/README.md
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-6/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-6/SelectableList.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-6/SelectableList.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-6/SelectableList.vue
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-6/SelectableList.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-7/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-7/App.vue
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-7/README.md b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-7/README.md
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-7/SelectableList.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/SelectableList.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-7/SelectableList.vue
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/SelectableList.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-7/useFilter.ts b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/useFilter.ts
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-7/useFilter.ts
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/useFilter.ts
diff --git a/apps/docs/src/skillz/tutorials/vue-advanced/step-7/useList.ts b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/useList.ts
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-advanced/step-7/useList.ts
rename to apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/useList.ts
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/meta.json b/apps/docs/src/skillz/tutorials/beginner/v0-basics/meta.json
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/meta.json
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/meta.json
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-1/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-1/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-1/App.vue
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-1/App.vue
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-1/README.md b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-1/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-1/README.md
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-1/README.md
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-2/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-2/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-2/App.vue
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-2/App.vue
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-2/README.md b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-2/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-2/README.md
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-2/README.md
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-3/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-3/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-3/App.vue
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-3/App.vue
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-3/README.md b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-3/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-3/README.md
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-3/README.md
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-4/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-4/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-4/App.vue
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-4/App.vue
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-4/README.md b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-4/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-4/README.md
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-4/README.md
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-5/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-5/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-5/App.vue
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-5/App.vue
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-5/README.md b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-5/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-5/README.md
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-5/README.md
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-5/SettingsSection.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-5/SettingsSection.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-5/SettingsSection.vue
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-5/SettingsSection.vue
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-6/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-6/App.vue
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/App.vue
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-6/ConfirmDialog.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/ConfirmDialog.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-6/ConfirmDialog.vue
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/ConfirmDialog.vue
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-6/README.md b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-6/README.md
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/README.md
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-6/SettingsSection.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/SettingsSection.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-6/SettingsSection.vue
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/SettingsSection.vue
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-7/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-7/App.vue
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/App.vue
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-7/ConfirmDialog.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/ConfirmDialog.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-7/ConfirmDialog.vue
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/ConfirmDialog.vue
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-7/README.md b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-7/README.md
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/README.md
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-7/SettingsSection.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/SettingsSection.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-7/SettingsSection.vue
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/SettingsSection.vue
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-8/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-8/App.vue
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/App.vue
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-8/ConfirmDialog.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/ConfirmDialog.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-8/ConfirmDialog.vue
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/ConfirmDialog.vue
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-8/README.md b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-8/README.md
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/README.md
diff --git a/apps/docs/src/skillz/tutorials/v0-basics/step-8/SettingsSection.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/SettingsSection.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/v0-basics/step-8/SettingsSection.vue
rename to apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/SettingsSection.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/meta.json b/apps/docs/src/skillz/tutorials/beginner/vue-basics/meta.json
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-basics/meta.json
rename to apps/docs/src/skillz/tutorials/beginner/vue-basics/meta.json
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-1/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-1/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-basics/step-1/App.vue
rename to apps/docs/src/skillz/tutorials/beginner/vue-basics/step-1/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-1/README.md b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-1/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-basics/step-1/README.md
rename to apps/docs/src/skillz/tutorials/beginner/vue-basics/step-1/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-2/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-2/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-basics/step-2/App.vue
rename to apps/docs/src/skillz/tutorials/beginner/vue-basics/step-2/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-2/README.md b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-2/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-basics/step-2/README.md
rename to apps/docs/src/skillz/tutorials/beginner/vue-basics/step-2/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-3/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-3/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-basics/step-3/App.vue
rename to apps/docs/src/skillz/tutorials/beginner/vue-basics/step-3/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-3/README.md b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-3/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-basics/step-3/README.md
rename to apps/docs/src/skillz/tutorials/beginner/vue-basics/step-3/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-4/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-4/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-basics/step-4/App.vue
rename to apps/docs/src/skillz/tutorials/beginner/vue-basics/step-4/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-4/README.md b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-4/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-basics/step-4/README.md
rename to apps/docs/src/skillz/tutorials/beginner/vue-basics/step-4/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-5/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-5/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-basics/step-5/App.vue
rename to apps/docs/src/skillz/tutorials/beginner/vue-basics/step-5/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-5/README.md b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-5/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-basics/step-5/README.md
rename to apps/docs/src/skillz/tutorials/beginner/vue-basics/step-5/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-6/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-6/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-basics/step-6/App.vue
rename to apps/docs/src/skillz/tutorials/beginner/vue-basics/step-6/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-6/README.md b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-6/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-basics/step-6/README.md
rename to apps/docs/src/skillz/tutorials/beginner/vue-basics/step-6/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-7/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-7/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-basics/step-7/App.vue
rename to apps/docs/src/skillz/tutorials/beginner/vue-basics/step-7/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-basics/step-7/README.md b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-7/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-basics/step-7/README.md
rename to apps/docs/src/skillz/tutorials/beginner/vue-basics/step-7/README.md
diff --git a/apps/docs/src/skillz/tutorials/index.ts b/apps/docs/src/skillz/tutorials/index.ts
index 8deccd72d..bd81bf4f5 100644
--- a/apps/docs/src/skillz/tutorials/index.ts
+++ b/apps/docs/src/skillz/tutorials/index.ts
@@ -31,17 +31,23 @@ export interface Tutorial {
 }
 
 // Discover all tutorials via import.meta.glob
-const metas = import.meta.glob<TutorialMeta>('./*/meta.json', { eager: true, import: 'default' })
+const metas = import.meta.glob<TutorialMeta>('./*/*/meta.json', { eager: true, import: 'default' })
 const markdowns = import.meta.glob<string>('./**/step-*/README.md', { query: '?raw', import: 'default' })
 const codeFiles = import.meta.glob<string>('./**/step-*/**/*.{vue,ts,js}', { query: '?raw', import: 'default' })
 
 function parseTutorialId (path: string): string {
-  // './vue-basics/meta.json' → 'vue-basics'
-  return path.split('/')[1]
+  // './beginner/vue-basics/meta.json' → 'vue-basics'
+  return path.split('/')[2]
+}
+
+function parseTutorialPrefix (path: string): string {
+  // './beginner/vue-basics/meta.json' → './beginner/vue-basics'
+  const parts = path.split('/')
+  return `${parts[0]}/${parts[1]}/${parts[2]}`
 }
 
 function parseStepNumber (path: string): number {
-  // './vue-basics/step-1/README.md' → 1
+  // './beginner/vue-basics/step-1/README.md' → 1
   const match = path.match(/step-(\d+)/)
   return match ? Number(match[1]) : 0
 }
@@ -51,11 +57,12 @@ function getTutorials (): Tutorial[] {
 
   for (const [metaPath, meta] of Object.entries(metas)) {
     const id = parseTutorialId(metaPath)
+    const prefix = parseTutorialPrefix(metaPath)
     const stepsMap = new Map<number, TutorialStep>()
 
     // Collect markdown files for this tutorial
     for (const [mdPath, loader] of Object.entries(markdowns)) {
-      if (!mdPath.startsWith(`./${id}/`)) continue
+      if (!mdPath.startsWith(`${prefix}/`)) continue
       const stepNum = parseStepNumber(mdPath)
       if (stepsMap.has(stepNum)) {
         stepsMap.get(stepNum)!.markdown = loader
@@ -66,11 +73,11 @@ function getTutorials (): Tutorial[] {
 
     // Collect code files for this tutorial
     for (const [codePath, loader] of Object.entries(codeFiles)) {
-      if (!codePath.startsWith(`./${id}/`)) continue
+      if (!codePath.startsWith(`${prefix}/`)) continue
       const stepNum = parseStepNumber(codePath)
       // Extract the file path relative to the step directory
-      // './vue-basics/step-1/App.vue' → 'src/App.vue'
-      const fileName = codePath.replace(new RegExp(String.raw`^\./${id}/step-${stepNum}/`), '')
+      // './beginner/vue-basics/step-1/App.vue' → 'src/App.vue'
+      const fileName = codePath.replace(new RegExp(String.raw`^${prefix}/step-${stepNum}/`), '')
       const replPath = `src/${fileName}`
 
       if (!stepsMap.has(stepNum)) {
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/meta.json b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/meta.json
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/meta.json
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/meta.json
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-1/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-1/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-1/App.vue
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-1/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-1/README.md b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-1/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-1/README.md
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-1/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-2/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-2/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-2/App.vue
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-2/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-2/README.md b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-2/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-2/README.md
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-2/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-3/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-3/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-3/App.vue
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-3/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-3/README.md b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-3/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-3/README.md
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-3/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-4/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-4/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-4/App.vue
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-4/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-4/README.md b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-4/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-4/README.md
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-4/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-5/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-5/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-5/App.vue
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-5/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-5/NotificationItem.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-5/NotificationItem.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-5/NotificationItem.vue
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-5/NotificationItem.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-5/README.md b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-5/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-5/README.md
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-5/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-6/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-6/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-6/App.vue
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-6/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-6/NotificationItem.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-6/NotificationItem.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-6/NotificationItem.vue
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-6/NotificationItem.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-6/README.md b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-6/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-6/README.md
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-6/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-7/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-7/App.vue
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-7/NotificationCard.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/NotificationCard.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-7/NotificationCard.vue
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/NotificationCard.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-7/NotificationItem.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/NotificationItem.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-7/NotificationItem.vue
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/NotificationItem.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-7/README.md b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-7/README.md
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/README.md
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-8/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/App.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-8/App.vue
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/App.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-8/NotificationCard.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/NotificationCard.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-8/NotificationCard.vue
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/NotificationCard.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-8/NotificationItem.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/NotificationItem.vue
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-8/NotificationItem.vue
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/NotificationItem.vue
diff --git a/apps/docs/src/skillz/tutorials/vue-intermediate/step-8/README.md b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/README.md
similarity index 100%
rename from apps/docs/src/skillz/tutorials/vue-intermediate/step-8/README.md
rename to apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/README.md

From 4f8a16bee483abae13f8d3edea8a00d974aced59 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 19 Feb 2026 08:53:59 -0600
Subject: [PATCH 30/39] =?UTF-8?q?docs(skillz):=20rename=20editor=20?=
 =?UTF-8?q?=E2=86=92=20playground=20across=20all=20files=20and=20symbols?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Renames all files, components, composables, storage keys, and CSS classes
from the "editor" naming to "playground" to match the final feature name.
Also renames editorLink composable to usePlaygroundLink per conventions.
---
 apps/docs/src/components.d.ts                 |  7 ++
 .../src/components/docs/DocsCodeActions.vue   |  4 +-
 apps/docs/src/components/docs/DocsExample.vue |  4 +-
 .../PlaygroundBreadcrumbs.vue}                |  0
 .../PlaygroundExamples.vue}                   |  2 +-
 .../PlaygroundFileTree.vue}                   |  2 +-
 .../PlaygroundIntroPanel.md}                  |  0
 .../PlaygroundIntroPanel.vue}                 |  2 +-
 .../PlaygroundMarkdownPanel.vue}              |  0
 .../PlaygroundTabs.vue}                       |  2 +-
 .../PlaygroundWorkspace.vue}                  | 12 +--
 ...seEditorFiles.ts => usePlaygroundFiles.ts} | 10 +-
 .../{editorLink.ts => usePlaygroundLink.ts}   | 20 ++--
 ...seEditorStore.ts => usePlaygroundStore.ts} |  4 +-
 apps/docs/src/composables/useTutorial.ts      |  6 +-
 ...tor-defaults.ts => playground-defaults.ts} |  0
 apps/docs/src/pages/playground.vue            | 80 ++++++++--------
 apps/docs/src/pages/skillz.tutorial.[id].vue  | 10 +-
 .../index.json                                | 18 ++--
 .../index.ts                                  |  0
 apps/docs/src/typed-router.d.ts               | 91 +++++++++++--------
 21 files changed, 147 insertions(+), 127 deletions(-)
 rename apps/docs/src/components/{editor/EditorBreadcrumbs.vue => playground/PlaygroundBreadcrumbs.vue} (100%)
 rename apps/docs/src/components/{editor/EditorExamples.vue => playground/PlaygroundExamples.vue} (98%)
 rename apps/docs/src/components/{editor/EditorFileTree.vue => playground/PlaygroundFileTree.vue} (99%)
 rename apps/docs/src/components/{editor/EditorIntroPanel.md => playground/PlaygroundIntroPanel.md} (100%)
 rename apps/docs/src/components/{editor/EditorIntroPanel.vue => playground/PlaygroundIntroPanel.vue} (96%)
 rename apps/docs/src/components/{editor/EditorMarkdownPanel.vue => playground/PlaygroundMarkdownPanel.vue} (100%)
 rename apps/docs/src/components/{editor/EditorTabs.vue => playground/PlaygroundTabs.vue} (98%)
 rename apps/docs/src/components/{editor/EditorWorkspace.vue => playground/PlaygroundWorkspace.vue} (93%)
 rename apps/docs/src/composables/{useEditorFiles.ts => usePlaygroundFiles.ts} (91%)
 rename apps/docs/src/composables/{editorLink.ts => usePlaygroundLink.ts} (84%)
 rename apps/docs/src/composables/{useEditorStore.ts => usePlaygroundStore.ts} (95%)
 rename apps/docs/src/data/{editor-defaults.ts => playground-defaults.ts} (100%)
 rename apps/docs/src/skillz/tours/beginner/{using-the-editor => using-the-playground}/index.json (81%)
 rename apps/docs/src/skillz/tours/beginner/{using-the-editor => using-the-playground}/index.ts (100%)

diff --git a/apps/docs/src/components.d.ts b/apps/docs/src/components.d.ts
index 3d91881d1..0a9ad32e0 100644
--- a/apps/docs/src/components.d.ts
+++ b/apps/docs/src/components.d.ts
@@ -140,6 +140,13 @@ declare module 'vue' {
     HomeEcosystem: typeof import('./components/home/HomeEcosystem.vue')['default']
     HomeFoundation: typeof import('./components/home/HomeFoundation.vue')['default']
     HomeHero: typeof import('./components/home/HomeHero.vue')['default']
+    PlaygroundBreadcrumbs: typeof import('./components/playground/PlaygroundBreadcrumbs.vue')['default']
+    PlaygroundExamples: typeof import('./components/playground/PlaygroundExamples.vue')['default']
+    PlaygroundFileTree: typeof import('./components/playground/PlaygroundFileTree.vue')['default']
+    PlaygroundIntroPanel: typeof import('./components/playground/PlaygroundIntroPanel.vue')['default']
+    PlaygroundMarkdownPanel: typeof import('./components/playground/PlaygroundMarkdownPanel.vue')['default']
+    PlaygroundTabs: typeof import('./components/playground/PlaygroundTabs.vue')['default']
+    PlaygroundWorkspace: typeof import('./components/playground/PlaygroundWorkspace.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SkillCard: typeof import('./components/skillz/SkillCard.vue')['default']
diff --git a/apps/docs/src/components/docs/DocsCodeActions.vue b/apps/docs/src/components/docs/DocsCodeActions.vue
index fd94d3f48..9cb9c34eb 100644
--- a/apps/docs/src/components/docs/DocsCodeActions.vue
+++ b/apps/docs/src/components/docs/DocsCodeActions.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
   // Composables
   import { getBinUrl } from '@/composables/bin'
-  import { useEditorLink } from '@/composables/editorLink'
   import { useClipboard } from '@/composables/useClipboard'
+  import { usePlaygroundLink } from '@/composables/usePlaygroundLink'
 
   const props = defineProps<{
     code: string
@@ -35,7 +35,7 @@
     if (name && !/\.\w+$/.test(name)) {
       name = `${name}.${props.language || 'vue'}`
     }
-    const url = await useEditorLink(props.code, name)
+    const url = await usePlaygroundLink(props.code, name)
     window.open(url, '_blank')
   }
 </script>
diff --git a/apps/docs/src/components/docs/DocsExample.vue b/apps/docs/src/components/docs/DocsExample.vue
index 127735edd..4394fe36b 100644
--- a/apps/docs/src/components/docs/DocsExample.vue
+++ b/apps/docs/src/components/docs/DocsExample.vue
@@ -7,8 +7,8 @@
 
   // Composables
   import { getMultiFileBinUrl } from '@/composables/bin'
-  import { useEditorLinkMulti } from '@/composables/editorLink'
   import { useExamples } from '@/composables/useExamples'
+  import { usePlaygroundLinkMulti } from '@/composables/usePlaygroundLink'
 
   // Utilities
   import { toKebab } from '@/utilities/strings'
@@ -166,7 +166,7 @@
     if (!resolvedFiles.value?.length) return
     // Reverse so dependencies compile before the files that import them
     const files = resolvedFiles.value.toReversed().map(f => ({ name: f.name, code: f.code }))
-    const url = await useEditorLinkMulti(files, exampleDir.value)
+    const url = await usePlaygroundLinkMulti(files, exampleDir.value)
     window.open(url, '_blank')
   }
 
diff --git a/apps/docs/src/components/editor/EditorBreadcrumbs.vue b/apps/docs/src/components/playground/PlaygroundBreadcrumbs.vue
similarity index 100%
rename from apps/docs/src/components/editor/EditorBreadcrumbs.vue
rename to apps/docs/src/components/playground/PlaygroundBreadcrumbs.vue
diff --git a/apps/docs/src/components/editor/EditorExamples.vue b/apps/docs/src/components/playground/PlaygroundExamples.vue
similarity index 98%
rename from apps/docs/src/components/editor/EditorExamples.vue
rename to apps/docs/src/components/playground/PlaygroundExamples.vue
index 60f7d1780..57ef03c53 100644
--- a/apps/docs/src/components/editor/EditorExamples.vue
+++ b/apps/docs/src/components/playground/PlaygroundExamples.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   // Composables
-  import { generateAppWrapper } from '@/composables/editorLink'
+  import { generateAppWrapper } from '@/composables/usePlaygroundLink'
 
   const raw = import.meta.glob('@/examples/**/*.{vue,ts,js}', {
     query: '?raw',
diff --git a/apps/docs/src/components/editor/EditorFileTree.vue b/apps/docs/src/components/playground/PlaygroundFileTree.vue
similarity index 99%
rename from apps/docs/src/components/editor/EditorFileTree.vue
rename to apps/docs/src/components/playground/PlaygroundFileTree.vue
index 496533d86..c624e925a 100644
--- a/apps/docs/src/components/editor/EditorFileTree.vue
+++ b/apps/docs/src/components/playground/PlaygroundFileTree.vue
@@ -12,7 +12,7 @@
   import type { ReplStore } from '@vue/repl'
 
   // Data
-  import { INFRASTRUCTURE_FILES, REPL_BUILTIN_FILES } from '@/data/editor-defaults'
+  import { INFRASTRUCTURE_FILES, REPL_BUILTIN_FILES } from '@/data/playground-defaults'
 
   const props = defineProps<{
     store: ReplStore
diff --git a/apps/docs/src/components/editor/EditorIntroPanel.md b/apps/docs/src/components/playground/PlaygroundIntroPanel.md
similarity index 100%
rename from apps/docs/src/components/editor/EditorIntroPanel.md
rename to apps/docs/src/components/playground/PlaygroundIntroPanel.md
diff --git a/apps/docs/src/components/editor/EditorIntroPanel.vue b/apps/docs/src/components/playground/PlaygroundIntroPanel.vue
similarity index 96%
rename from apps/docs/src/components/editor/EditorIntroPanel.vue
rename to apps/docs/src/components/playground/PlaygroundIntroPanel.vue
index d5d4f2f7e..d0617da6c 100644
--- a/apps/docs/src/components/editor/EditorIntroPanel.vue
+++ b/apps/docs/src/components/playground/PlaygroundIntroPanel.vue
@@ -10,7 +10,7 @@
   import { useTemplateRef } from 'vue'
 
   // Content
-  import introMd from './EditorIntroPanel.md?raw'
+  import introMd from './PlaygroundIntroPanel.md?raw'
 
   defineEmits<{
     close: []
diff --git a/apps/docs/src/components/editor/EditorMarkdownPanel.vue b/apps/docs/src/components/playground/PlaygroundMarkdownPanel.vue
similarity index 100%
rename from apps/docs/src/components/editor/EditorMarkdownPanel.vue
rename to apps/docs/src/components/playground/PlaygroundMarkdownPanel.vue
diff --git a/apps/docs/src/components/editor/EditorTabs.vue b/apps/docs/src/components/playground/PlaygroundTabs.vue
similarity index 98%
rename from apps/docs/src/components/editor/EditorTabs.vue
rename to apps/docs/src/components/playground/PlaygroundTabs.vue
index bf2e32a8e..8249a703b 100644
--- a/apps/docs/src/components/editor/EditorTabs.vue
+++ b/apps/docs/src/components/playground/PlaygroundTabs.vue
@@ -6,7 +6,7 @@
   import type { ReplStore } from '@vue/repl'
 
   // Data
-  import { INFRASTRUCTURE_FILES } from '@/data/editor-defaults'
+  import { INFRASTRUCTURE_FILES } from '@/data/playground-defaults'
 
   const props = defineProps<{
     store: ReplStore
diff --git a/apps/docs/src/components/editor/EditorWorkspace.vue b/apps/docs/src/components/playground/PlaygroundWorkspace.vue
similarity index 93%
rename from apps/docs/src/components/editor/EditorWorkspace.vue
rename to apps/docs/src/components/playground/PlaygroundWorkspace.vue
index 1dd28269b..f1ed840d8 100644
--- a/apps/docs/src/components/editor/EditorWorkspace.vue
+++ b/apps/docs/src/components/playground/PlaygroundWorkspace.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
   // Components
   import { Discovery } from '@/components/discovery'
-  import EditorBreadcrumbs from '@/components/editor/EditorBreadcrumbs.vue'
-  import EditorFileTree from '@/components/editor/EditorFileTree.vue'
-  import EditorTabs from '@/components/editor/EditorTabs.vue'
+  import PlaygroundBreadcrumbs from '@/components/playground/PlaygroundBreadcrumbs.vue'
+  import PlaygroundFileTree from '@/components/playground/PlaygroundFileTree.vue'
+  import PlaygroundTabs from '@/components/playground/PlaygroundTabs.vue'
 
   // Composables
   import { useResizeHandle } from '@/composables/useResizeHandle'
@@ -75,7 +75,7 @@
         step="file-tree"
         :style="{ width: `${fileTreeHandle.size.value}px` }"
       >
-        <EditorFileTree
+        <PlaygroundFileTree
           :key="fileTreeKey"
           :store="store"
         />
@@ -97,8 +97,8 @@
         :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
         step="editor"
       >
-        <EditorTabs v-if="!hideTabs" :store="store" />
-        <EditorBreadcrumbs v-if="!hideBreadcrumbs" :store="store" />
+        <PlaygroundTabs v-if="!hideTabs" :store="store" />
+        <PlaygroundBreadcrumbs v-if="!hideBreadcrumbs" :store="store" />
 
         <Repl
           :auto-resize="true"
diff --git a/apps/docs/src/composables/useEditorFiles.ts b/apps/docs/src/composables/usePlaygroundFiles.ts
similarity index 91%
rename from apps/docs/src/composables/useEditorFiles.ts
rename to apps/docs/src/composables/usePlaygroundFiles.ts
index 6befc4b7f..644b58c56 100644
--- a/apps/docs/src/composables/useEditorFiles.ts
+++ b/apps/docs/src/composables/usePlaygroundFiles.ts
@@ -1,5 +1,5 @@
 // Composables
-import { decodeEditorHash, encodeEditorHash } from '@/composables/editorLink'
+import { decodePlaygroundHash, encodePlaygroundHash } from '@/composables/usePlaygroundLink'
 
 // Utilities
 import { onMounted, shallowRef, watch, watchEffect } from 'vue'
@@ -7,9 +7,9 @@ import { onMounted, shallowRef, watch, watchEffect } from 'vue'
 // Types
 import type { ReplStore } from '@vue/repl'
 
-import { createMainTs, DEFAULT_CODE, INFRASTRUCTURE_FILES, UNO_CONFIG_TS } from '@/data/editor-defaults'
+import { createMainTs, DEFAULT_CODE, INFRASTRUCTURE_FILES, UNO_CONFIG_TS } from '@/data/playground-defaults'
 
-export function useEditorFiles (store: ReplStore, isDark: () => boolean) {
+export function usePlaygroundFiles (store: ReplStore, isDark: () => boolean) {
   const isReady = shallowRef(false)
   const fileTreeKey = shallowRef(0)
 
@@ -19,7 +19,7 @@ export function useEditorFiles (store: ReplStore, isDark: () => boolean) {
 
   onMounted(async () => {
     const hash = window.location.hash.slice(1)
-    const decoded = hash ? await decodeEditorHash(hash) : null
+    const decoded = hash ? await decodePlaygroundHash(hash) : null
 
     if (decoded) {
       await loadExample(decoded.files, decoded.active)
@@ -103,7 +103,7 @@ export function useEditorFiles (store: ReplStore, isDark: () => boolean) {
       clearTimeout(hashTimer)
       hashTimer = setTimeout(async () => {
         if (Object.keys(files).length === 0) return
-        const hash = await encodeEditorHash({ files, active })
+        const hash = await encodePlaygroundHash({ files, active })
         history.replaceState(null, '', `#${hash}`)
       }, 500)
     })
diff --git a/apps/docs/src/composables/editorLink.ts b/apps/docs/src/composables/usePlaygroundLink.ts
similarity index 84%
rename from apps/docs/src/composables/editorLink.ts
rename to apps/docs/src/composables/usePlaygroundLink.ts
index d9ef89787..c27a919e5 100644
--- a/apps/docs/src/composables/editorLink.ts
+++ b/apps/docs/src/composables/usePlaygroundLink.ts
@@ -1,4 +1,4 @@
-export interface EditorFile {
+export interface PlaygroundFile {
   name: string
   code: string
 }
@@ -30,7 +30,7 @@ async function atou (base64: string): Promise<string> {
 /**
  * Detect which file is the entry point for a multi-file example.
  */
-function detectEntryFile (files: EditorFile[]): EditorFile | undefined {
+function detectEntryFile (files: PlaygroundFile[]): PlaygroundFile | undefined {
   const vueFiles = files.filter(f => f.name.endsWith('.vue'))
 
   const entryNames = ['index.vue', 'App.vue', 'example.vue', 'main.vue']
@@ -73,7 +73,7 @@ export function generateAppWrapper (entryPath: string): string {
  * Build the src/-prefixed file record that loadExample expects.
  * When dir is provided, files are nested: src/{dir}/{name}
  */
-function buildEditorFiles (inputFiles: EditorFile[], dir?: string): Record<string, string> {
+function buildPlaygroundFiles (inputFiles: PlaygroundFile[], dir?: string): Record<string, string> {
   const files: Record<string, string> = {}
   const prefix = dir ? `src/${dir}` : 'src'
 
@@ -97,16 +97,16 @@ function buildEditorFiles (inputFiles: EditorFile[], dir?: string): Record<strin
 /**
  * Get editor URL for a single file.
  */
-export async function useEditorLink (code: string, fileName = 'Example.vue'): Promise<string> {
-  return useEditorLinkMulti([{ name: fileName, code }])
+export async function usePlaygroundLink (code: string, fileName = 'Example.vue'): Promise<string> {
+  return usePlaygroundLinkMulti([{ name: fileName, code }])
 }
 
 /**
  * Get editor URL for multiple files.
  * When dir is provided, files are nested under src/{dir}/.
  */
-export async function useEditorLinkMulti (inputFiles: EditorFile[], dir?: string): Promise<string> {
-  const files = buildEditorFiles(inputFiles, dir)
+export async function usePlaygroundLinkMulti (inputFiles: PlaygroundFile[], dir?: string): Promise<string> {
+  const files = buildPlaygroundFiles(inputFiles, dir)
   const hash = await utoa(JSON.stringify(files))
   return `/playground#${hash}`
 }
@@ -120,7 +120,7 @@ function isFileRecord (v: unknown): v is Record<string, string> {
   )
 }
 
-export interface EditorHashData {
+export interface PlaygroundHashData {
   files: Record<string, string>
   active?: string
 }
@@ -128,7 +128,7 @@ export interface EditorHashData {
 /**
  * Encode editor state (files + active filename) to a URL hash string.
  */
-export async function encodeEditorHash (data: EditorHashData): Promise<string> {
+export async function encodePlaygroundHash (data: PlaygroundHashData): Promise<string> {
   return utoa(JSON.stringify(data))
 }
 
@@ -136,7 +136,7 @@ export async function encodeEditorHash (data: EditorHashData): Promise<string> {
  * Decode an editor hash back to editor state.
  * Handles both the current { files, active } format and the legacy plain Record<string, string> format.
  */
-export async function decodeEditorHash (hash: string): Promise<EditorHashData | null> {
+export async function decodePlaygroundHash (hash: string): Promise<PlaygroundHashData | null> {
   try {
     const parsed: unknown = JSON.parse(await atou(hash))
     if (isFileRecord(parsed)) {
diff --git a/apps/docs/src/composables/useEditorStore.ts b/apps/docs/src/composables/usePlaygroundStore.ts
similarity index 95%
rename from apps/docs/src/composables/useEditorStore.ts
rename to apps/docs/src/composables/usePlaygroundStore.ts
index 88bb6d5ab..614e0b1f3 100644
--- a/apps/docs/src/composables/useEditorStore.ts
+++ b/apps/docs/src/composables/usePlaygroundStore.ts
@@ -6,13 +6,13 @@ import { computed, shallowRef } from 'vue'
 import type { ReplStore } from '@vue/repl'
 import type { ComputedRef, Ref } from 'vue'
 
-export interface EditorStoreReturn {
+export interface PlaygroundStoreReturn {
   store: ReplStore
   replTheme: ComputedRef<'dark' | 'light'>
   previewOptions: ComputedRef<{ headHTML: string }>
 }
 
-export function useEditorStore (isDark: Readonly<Ref<boolean>>): EditorStoreReturn {
+export function usePlaygroundStore (isDark: Readonly<Ref<boolean>>): PlaygroundStoreReturn {
   const replTheme = computed(() => isDark.value ? 'dark' : 'light')
 
   const { importMap: builtinImportMap, vueVersion } = useVueImportMap({
diff --git a/apps/docs/src/composables/useTutorial.ts b/apps/docs/src/composables/useTutorial.ts
index 8019b0e60..7bdd4312b 100644
--- a/apps/docs/src/composables/useTutorial.ts
+++ b/apps/docs/src/composables/useTutorial.ts
@@ -2,8 +2,8 @@
 import { createStep, useTheme } from '@vuetify/v0'
 
 // Composables
-import { useEditorStore } from '@/composables/useEditorStore'
 import { useMarkdown } from '@/composables/useMarkdown'
+import { usePlaygroundStore } from '@/composables/usePlaygroundStore'
 
 // Utilities
 import { File as ReplFile, compileFile } from '@vue/repl'
@@ -14,7 +14,7 @@ import type { StepOptions, TutorialMeta } from '@/skillz/tutorials'
 import type { ReplStore } from '@vue/repl'
 import type { ComputedRef, Ref, ShallowRef } from 'vue'
 
-import { createMainTs, UNO_CONFIG_TS } from '@/data/editor-defaults'
+import { createMainTs, UNO_CONFIG_TS } from '@/data/playground-defaults'
 // Tutorials
 import { getTutorial, parseStepOptions } from '@/skillz/tutorials'
 // Stores
@@ -46,7 +46,7 @@ export function useTutorial (tutorialId: ComputedRef<string>, initialStep?: Comp
   const isDark = theme.isDark
   const skillz = useSkillzStore()
 
-  const { store, replTheme, previewOptions } = useEditorStore(isDark)
+  const { store, replTheme, previewOptions } = usePlaygroundStore(isDark)
 
   const meta = computed(() => getTutorial(tutorialId.value)?.meta)
   const markdown = shallowRef('')
diff --git a/apps/docs/src/data/editor-defaults.ts b/apps/docs/src/data/playground-defaults.ts
similarity index 100%
rename from apps/docs/src/data/editor-defaults.ts
rename to apps/docs/src/data/playground-defaults.ts
diff --git a/apps/docs/src/pages/playground.vue b/apps/docs/src/pages/playground.vue
index 072ff1a5d..80a01b766 100644
--- a/apps/docs/src/pages/playground.vue
+++ b/apps/docs/src/pages/playground.vue
@@ -7,17 +7,17 @@
 
   // Components
   import { Discovery } from '@/components/discovery'
-  import EditorBreadcrumbs from '@/components/editor/EditorBreadcrumbs.vue'
-  import EditorExamples from '@/components/editor/EditorExamples.vue'
-  import EditorFileTree from '@/components/editor/EditorFileTree.vue'
-  import EditorIntroPanel from '@/components/editor/EditorIntroPanel.vue'
-  import EditorTabs from '@/components/editor/EditorTabs.vue'
-  import EditorWorkspace from '@/components/editor/EditorWorkspace.vue'
+  import PlaygroundBreadcrumbs from '@/components/playground/PlaygroundBreadcrumbs.vue'
+  import PlaygroundExamples from '@/components/playground/PlaygroundExamples.vue'
+  import PlaygroundFileTree from '@/components/playground/PlaygroundFileTree.vue'
+  import PlaygroundIntroPanel from '@/components/playground/PlaygroundIntroPanel.vue'
+  import PlaygroundTabs from '@/components/playground/PlaygroundTabs.vue'
+  import PlaygroundWorkspace from '@/components/playground/PlaygroundWorkspace.vue'
 
   // Composables
   import { useDiscovery } from '@/composables/useDiscovery'
-  import { useEditorFiles } from '@/composables/useEditorFiles'
-  import { useEditorStore } from '@/composables/useEditorStore'
+  import { usePlaygroundFiles } from '@/composables/usePlaygroundFiles'
+  import { usePlaygroundStore } from '@/composables/usePlaygroundStore'
   import { useResizeHandle } from '@/composables/useResizeHandle'
 
   // Utilities
@@ -52,10 +52,10 @@
   const isDark = theme.isDark
 
   // ── REPL Setup ─────────────────────────────────────────────────────────
-  const { store, replTheme, previewOptions } = useEditorStore(isDark)
+  const { store, replTheme, previewOptions } = usePlaygroundStore(isDark)
 
   // ── Editor files ─────────────────────────────────────────────────────
-  const { isReady, fileTreeKey, loadExample: _loadExample } = useEditorFiles(store, () => isDark.value)
+  const { isReady, fileTreeKey, loadExample: _loadExample } = usePlaygroundFiles(store, () => isDark.value)
 
   const breakpoints = useBreakpoints()
   const isDesktop = breakpoints.mdAndUp
@@ -104,8 +104,8 @@
 
   // ── Persistent settings ────────────────────────────────────────────────
   const storage = useStorage()
-  const replLayout = storage.get<'horizontal' | 'vertical'>('editor-layout', 'horizontal')
-  const panelOpen = storage.get<boolean>('editor-panel-open', false)
+  const replLayout = storage.get<'horizontal' | 'vertical'>('playground-layout', 'horizontal')
+  const panelOpen = storage.get<boolean>('playground-panel-open', false)
 
   // Open panel when a tour becomes active or reaches the intro-panel step
   watch(discovery.isActive, active => {
@@ -117,7 +117,7 @@
 
   // Panel resize (panel mode)
   const panelHandle = useResizeHandle({
-    storageKey: 'editor-intro-width',
+    storageKey: 'playground-intro-width',
     defaultValue: 420,
     min: 280,
     max: 600,
@@ -126,7 +126,7 @@
 
   // Sidebar resize (normal mode, desktop)
   const sidebarHandle = useResizeHandle({
-    storageKey: 'editor-sidebar-width',
+    storageKey: 'playground-sidebar-width',
     defaultValue: 250,
     min: 140,
     max: 400,
@@ -135,7 +135,7 @@
 
   const isPanelMode = computed(() => isDesktop.value && panelOpen.value)
 
-  // EditorWorkspace renders Sandbox separately. showOutput=false prevents Repl from creating
+  // PlaygroundWorkspace renders Sandbox separately. showOutput=false prevents Repl from creating
   // its internal preview iframe (see patches/@vue__repl@4.7.1.patch), avoiding a duplicate
   // sandbox and the browser's allow-scripts+allow-same-origin warning.
   watch(isPanelMode, mode => {
@@ -199,7 +199,7 @@
               class="absolute top-full right-0 mt-1 w-[280px] bg-surface border border-divider rounded-lg shadow-lg z-50"
               role="listbox"
             >
-              <EditorExamples @select="loadExample" />
+              <PlaygroundExamples @select="loadExample" />
             </div>
           </div>
         </Discovery.Activator>
@@ -255,17 +255,17 @@
             step="intro-panel"
             :style="{ width: `${panelHandle.size.value}px` }"
           >
-            <EditorIntroPanel @close="panelOpen = false" />
+            <PlaygroundIntroPanel @close="panelOpen = false" />
           </Discovery.Activator>
 
           <div
-            class="editor-resize-handle"
-            :class="{ 'editor-resize-handle--active': panelHandle.isResizing.value }"
+            class="playground-resize-handle"
+            :class="{ 'playground-resize-handle--active': panelHandle.isResizing.value }"
             @dblclick="panelHandle.reset()"
             @pointerdown="panelHandle.onPointerDown"
           />
 
-          <EditorWorkspace
+          <PlaygroundWorkspace
             :external-resizing="panelHandle.isResizing.value"
             :file-tree-key="fileTreeKey"
             :is-dark="isDark"
@@ -280,11 +280,11 @@
         <!-- Normal mode: bordered editor with built-in Repl preview -->
         <div
           v-else
-          class="editor-repl h-full px-2 pt-2"
+          class="playground-repl h-full px-2 pt-2"
           :class="{ dark: isDark }"
         >
           <div
-            class="editor-wrapper"
+            class="playground-wrapper"
             :class="{ 'select-none': sidebarHandle.isResizing.value }"
           >
             <!-- Desktop: file tree -->
@@ -296,7 +296,7 @@
                 step="file-tree"
                 :style="{ width: `${sidebarHandle.size.value}px` }"
               >
-                <EditorFileTree
+                <PlaygroundFileTree
                   :key="fileTreeKey"
                   :store="store"
                 />
@@ -304,8 +304,8 @@
 
               <div
                 v-if="sidebarOpen"
-                class="editor-resize-handle"
-                :class="{ 'editor-resize-handle--active': sidebarHandle.isResizing.value }"
+                class="playground-resize-handle"
+                :class="{ 'playground-resize-handle--active': sidebarHandle.isResizing.value }"
                 @dblclick="sidebarHandle.reset()"
                 @pointerdown="sidebarHandle.onPointerDown"
               />
@@ -329,7 +329,7 @@
                 </button>
               </div>
 
-              <EditorFileTree
+              <PlaygroundFileTree
                 :key="fileTreeKey"
                 class="flex-1 min-h-0"
                 :store="store"
@@ -339,12 +339,12 @@
             <Discovery.Activator
               active-class="rounded-lg"
               as="div"
-              class="editor-repl-container flex flex-col"
+              class="playground-repl-container flex flex-col"
               :inert="!isDesktop && sidebarOpen ? true : undefined"
               step="editor"
             >
-              <EditorTabs :store="store" />
-              <EditorBreadcrumbs :store="store" />
+              <PlaygroundTabs :store="store" />
+              <PlaygroundBreadcrumbs :store="store" />
 
               <Repl
                 :auto-resize="true"
@@ -371,7 +371,7 @@
 
 <style scoped>
   /* Panel → workspace resize handle */
-  .editor-resize-handle {
+  .playground-resize-handle {
     width: 4px;
     cursor: col-resize;
     background: transparent;
@@ -379,17 +379,17 @@
     flex-shrink: 0;
   }
 
-  .editor-resize-handle:hover,
-  .editor-resize-handle--active {
+  .playground-resize-handle:hover,
+  .playground-resize-handle--active {
     background: var(--v0-primary);
   }
 
   /* Normal mode: bordered wrapper */
-  .editor-repl {
+  .playground-repl {
     overflow: hidden;
   }
 
-  .editor-wrapper {
+  .playground-wrapper {
     display: flex;
     height: 100%;
     border-radius: 8px 8px 0 0;
@@ -398,29 +398,29 @@
     overflow: hidden;
   }
 
-  .editor-repl-container {
+  .playground-repl-container {
     flex: 1;
     min-width: 0;
   }
 
-  .editor-repl :deep(.vue-repl) {
+  .playground-repl :deep(.vue-repl) {
     --color-branding: var(--v0-primary);
     --color-branding-dark: var(--v0-primary);
   }
 
-  .editor-repl :deep(.editor-container) {
+  .playground-repl :deep(.editor-container) {
     height: 100%;
   }
 
-  .editor-repl :deep(.editor-floating) {
+  .playground-repl :deep(.editor-floating) {
     display: none !important;
   }
 
-  .editor-repl :deep(.file-selector) {
+  .playground-repl :deep(.file-selector) {
     display: none !important;
   }
 
-  .editor-repl.dark :deep(.vue-repl) {
+  .playground-repl.dark :deep(.vue-repl) {
     --bg: var(--v0-background);
     --bg-soft: var(--v0-surface);
     --border: var(--v0-divider);
diff --git a/apps/docs/src/pages/skillz.tutorial.[id].vue b/apps/docs/src/pages/skillz.tutorial.[id].vue
index 53c062bb4..e57cb1cf6 100644
--- a/apps/docs/src/pages/skillz.tutorial.[id].vue
+++ b/apps/docs/src/pages/skillz.tutorial.[id].vue
@@ -7,8 +7,8 @@
 
   // Components
   import { Discovery } from '@/components/discovery'
-  import EditorMarkdownPanel from '@/components/editor/EditorMarkdownPanel.vue'
-  import EditorWorkspace from '@/components/editor/EditorWorkspace.vue'
+  import PlaygroundMarkdownPanel from '@/components/playground/PlaygroundMarkdownPanel.vue'
+  import PlaygroundWorkspace from '@/components/playground/PlaygroundWorkspace.vue'
   import SkillzComplete from '@/components/skillz/SkillzComplete.vue'
 
   // Composables
@@ -70,7 +70,7 @@
     }
   }
 
-  // EditorWorkspace renders Sandbox separately. Setting showOutput=false prevents
+  // PlaygroundWorkspace renders Sandbox separately. Setting showOutput=false prevents
   // the Repl from creating its internal preview iframe (see patches/@vue__repl@4.7.1.patch),
   // avoiding a duplicate sandbox and the browser's allow-scripts+allow-same-origin warning.
   store.showOutput = false
@@ -173,7 +173,7 @@
         step="instructions"
         :style="isDesktop ? { width: `${markdownHandle.size.value}px` } : undefined"
       >
-        <EditorMarkdownPanel
+        <PlaygroundMarkdownPanel
           :html="html"
           :is-first="isFirst"
           :is-last="isLast"
@@ -194,7 +194,7 @@
       />
 
       <!-- Right column -->
-      <EditorWorkspace
+      <PlaygroundWorkspace
         :external-resizing="markdownHandle.isResizing.value"
         :file-tree-key="fileTreeKey"
         :hide-breadcrumbs="stepOptions.hideBreadcrumbs"
diff --git a/apps/docs/src/skillz/tours/beginner/using-the-editor/index.json b/apps/docs/src/skillz/tours/beginner/using-the-playground/index.json
similarity index 81%
rename from apps/docs/src/skillz/tours/beginner/using-the-editor/index.json
rename to apps/docs/src/skillz/tours/beginner/using-the-playground/index.json
index 1136b48cd..7d462b0e2 100644
--- a/apps/docs/src/skillz/tours/beginner/using-the-editor/index.json
+++ b/apps/docs/src/skillz/tours/beginner/using-the-playground/index.json
@@ -1,28 +1,28 @@
 {
   "mode": "guided",
-  "id": "using-the-editor",
-  "name": "Using the Editor",
+  "id": "using-the-playground",
+  "name": "Using the Playground",
   "level": 1,
   "track": "essentials",
   "categories": ["meta"],
   "order": 1,
   "prerequisites": [],
-  "description": "Learn how the tutorial editor works before you start coding.",
+  "description": "Learn how the playground works before you start coding.",
   "minutes": 2,
   "startRoute": "/playground",
   "steps": [
     {
       "id": "welcome",
-      "title": "Welcome to the Editor",
+      "title": "Welcome to the Playground",
       "task": "This is where you write and run code. Let's take a quick look at what's here.",
       "hint": "",
-      "learn": "Understand the editor layout",
+      "learn": "Understand the playground layout",
       "noActivator": true
     },
     {
       "id": "panel-toggle",
       "title": "Intro Panel",
-      "task": "This button opens or closes the getting-started panel. It gives you a quick overview of what the editor offers.",
+      "task": "This button opens or closes the getting-started panel. It gives you a quick overview of what the playground offers.",
       "hint": "",
       "learn": "Toggle the intro panel",
       "placement": "bottom"
@@ -53,8 +53,8 @@
       "skipOnMobile": true
     },
     {
-      "id": "editor",
-      "title": "Code Editor",
+      "id": "playground",
+      "title": "Code Playground",
       "task": "Write your code on the left. The preview on the right updates instantly as you type.",
       "hint": "",
       "learn": "Write code and see it run live",
@@ -65,7 +65,7 @@
       "title": "Ready to Code",
       "task": "That's all there is to it. Load an example from the toolbar or start from scratch.",
       "hint": "",
-      "learn": "Use the editor with confidence",
+      "learn": "Use the playground with confidence",
       "noActivator": true
     }
   ]
diff --git a/apps/docs/src/skillz/tours/beginner/using-the-editor/index.ts b/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts
similarity index 100%
rename from apps/docs/src/skillz/tours/beginner/using-the-editor/index.ts
rename to apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts
diff --git a/apps/docs/src/typed-router.d.ts b/apps/docs/src/typed-router.d.ts
index 7094fefb8..23916a282 100644
--- a/apps/docs/src/typed-router.d.ts
+++ b/apps/docs/src/typed-router.d.ts
@@ -170,6 +170,34 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/composables/data/create-data-table': RouteRecordInfo<
+      '/composables/data/create-data-table',
+      '/composables/data/create-data-table',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/composables/data/create-filter': RouteRecordInfo<
+      '/composables/data/create-filter',
+      '/composables/data/create-filter',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/composables/data/create-pagination': RouteRecordInfo<
+      '/composables/data/create-pagination',
+      '/composables/data/create-pagination',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/composables/data/create-virtual': RouteRecordInfo<
+      '/composables/data/create-virtual',
+      '/composables/data/create-virtual',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     '/composables/forms/create-form': RouteRecordInfo<
       '/composables/forms/create-form',
       '/composables/forms/create-form',
@@ -429,13 +457,6 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
-    '/composables/utilities/create-filter': RouteRecordInfo<
-      '/composables/utilities/create-filter',
-      '/composables/utilities/create-filter',
-      Record<never, never>,
-      Record<never, never>,
-      | never
-    >,
     '/composables/utilities/create-overflow': RouteRecordInfo<
       '/composables/utilities/create-overflow',
       '/composables/utilities/create-overflow',
@@ -443,20 +464,6 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
-    '/composables/utilities/create-pagination': RouteRecordInfo<
-      '/composables/utilities/create-pagination',
-      '/composables/utilities/create-pagination',
-      Record<never, never>,
-      Record<never, never>,
-      | never
-    >,
-    '/composables/utilities/create-virtual': RouteRecordInfo<
-      '/composables/utilities/create-virtual',
-      '/composables/utilities/create-virtual',
-      Record<never, never>,
-      Record<never, never>,
-      | never
-    >,
     '/guide/': RouteRecordInfo<
       '/guide/',
       '/guide',
@@ -834,6 +841,30 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/composables/data/create-data-table.md': {
+      routes:
+        | '/composables/data/create-data-table'
+      views:
+        | never
+    }
+    'src/pages/composables/data/create-filter.md': {
+      routes:
+        | '/composables/data/create-filter'
+      views:
+        | never
+    }
+    'src/pages/composables/data/create-pagination.md': {
+      routes:
+        | '/composables/data/create-pagination'
+      views:
+        | never
+    }
+    'src/pages/composables/data/create-virtual.md': {
+      routes:
+        | '/composables/data/create-virtual'
+      views:
+        | never
+    }
     'src/pages/composables/forms/create-form.md': {
       routes:
         | '/composables/forms/create-form'
@@ -1056,30 +1087,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
-    'src/pages/composables/utilities/create-filter.md': {
-      routes:
-        | '/composables/utilities/create-filter'
-      views:
-        | never
-    }
     'src/pages/composables/utilities/create-overflow.md': {
       routes:
         | '/composables/utilities/create-overflow'
       views:
         | never
     }
-    'src/pages/composables/utilities/create-pagination.md': {
-      routes:
-        | '/composables/utilities/create-pagination'
-      views:
-        | never
-    }
-    'src/pages/composables/utilities/create-virtual.md': {
-      routes:
-        | '/composables/utilities/create-virtual'
-      views:
-        | never
-    }
     'src/pages/guide/index.md': {
       routes:
         | '/guide/'

From 7113c83a2359b50994f194ed03677c50790c0f16 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 19 Feb 2026 08:59:34 -0600
Subject: [PATCH 31/39] docs(skillz): remove redundant base classes from
 tutorial App.vue files

---
 .../src/skillz/tutorials/advanced/vue-advanced/step-1/App.vue   | 2 +-
 .../src/skillz/tutorials/advanced/vue-advanced/step-2/App.vue   | 2 +-
 .../src/skillz/tutorials/advanced/vue-advanced/step-3/App.vue   | 2 +-
 .../src/skillz/tutorials/advanced/vue-advanced/step-4/App.vue   | 2 +-
 .../src/skillz/tutorials/advanced/vue-advanced/step-5/App.vue   | 2 +-
 .../src/skillz/tutorials/advanced/vue-advanced/step-6/App.vue   | 2 +-
 .../src/skillz/tutorials/advanced/vue-advanced/step-7/App.vue   | 2 +-
 .../docs/src/skillz/tutorials/beginner/v0-basics/step-1/App.vue | 2 +-
 .../docs/src/skillz/tutorials/beginner/v0-basics/step-2/App.vue | 2 +-
 .../docs/src/skillz/tutorials/beginner/v0-basics/step-3/App.vue | 2 +-
 .../docs/src/skillz/tutorials/beginner/v0-basics/step-4/App.vue | 2 +-
 .../docs/src/skillz/tutorials/beginner/v0-basics/step-5/App.vue | 2 +-
 .../docs/src/skillz/tutorials/beginner/v0-basics/step-6/App.vue | 2 +-
 .../docs/src/skillz/tutorials/beginner/v0-basics/step-7/App.vue | 2 +-
 .../docs/src/skillz/tutorials/beginner/v0-basics/step-8/App.vue | 2 +-
 .../src/skillz/tutorials/beginner/vue-basics/step-1/App.vue     | 2 +-
 .../src/skillz/tutorials/beginner/vue-basics/step-2/App.vue     | 2 +-
 .../src/skillz/tutorials/beginner/vue-basics/step-3/App.vue     | 2 +-
 .../src/skillz/tutorials/beginner/vue-basics/step-4/App.vue     | 2 +-
 .../src/skillz/tutorials/beginner/vue-basics/step-5/App.vue     | 2 +-
 .../src/skillz/tutorials/beginner/vue-basics/step-6/App.vue     | 2 +-
 .../src/skillz/tutorials/beginner/vue-basics/step-7/App.vue     | 2 +-
 .../tutorials/intermediate/vue-intermediate/step-1/App.vue      | 2 +-
 .../tutorials/intermediate/vue-intermediate/step-2/App.vue      | 2 +-
 .../tutorials/intermediate/vue-intermediate/step-3/App.vue      | 2 +-
 .../tutorials/intermediate/vue-intermediate/step-4/App.vue      | 2 +-
 .../tutorials/intermediate/vue-intermediate/step-5/App.vue      | 2 +-
 .../tutorials/intermediate/vue-intermediate/step-6/App.vue      | 2 +-
 .../tutorials/intermediate/vue-intermediate/step-7/App.vue      | 2 +-
 .../tutorials/intermediate/vue-intermediate/step-8/App.vue      | 2 +-
 30 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-1/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-1/App.vue
index 35c49d3ad..4470ddd73 100644
--- a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-1/App.vue
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-1/App.vue
@@ -7,7 +7,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <h1 class="text-2xl font-bold mb-6">
       Your First Composable
     </h1>
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-2/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-2/App.vue
index 95e73e846..98a0563a6 100644
--- a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-2/App.vue
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-2/App.vue
@@ -21,7 +21,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <h1 class="text-2xl font-bold mb-6">
       shallowRef vs ref
     </h1>
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-3/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-3/App.vue
index 938552d56..37954575e 100644
--- a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-3/App.vue
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-3/App.vue
@@ -18,7 +18,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <h1 class="text-2xl font-bold mb-6">
       effectScope
     </h1>
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-4/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-4/App.vue
index e2f19f300..8c8c5a5f7 100644
--- a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-4/App.vue
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-4/App.vue
@@ -16,7 +16,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <h1 class="text-2xl font-bold mb-6">
       Generics in Components
     </h1>
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/App.vue
index e757a2e79..825db27c7 100644
--- a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/App.vue
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-5/App.vue
@@ -25,7 +25,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <h1 class="text-2xl font-bold mb-6">
       defineModel
     </h1>
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-6/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-6/App.vue
index 491377f68..47517c43f 100644
--- a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-6/App.vue
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-6/App.vue
@@ -17,7 +17,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <h1 class="text-2xl font-bold mb-6">
       Scoped Slots
     </h1>
diff --git a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/App.vue b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/App.vue
index d807feaf8..b69a529a7 100644
--- a/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/App.vue
+++ b/apps/docs/src/skillz/tutorials/advanced/vue-advanced/step-7/App.vue
@@ -35,7 +35,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <h1 class="text-2xl font-bold mb-6">
       Putting It Together
     </h1>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-1/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-1/App.vue
index d942905d6..c50280695 100644
--- a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-1/App.vue
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-1/App.vue
@@ -9,7 +9,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <h1 class="text-2xl font-bold mb-6">
       Headless Selection
     </h1>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-2/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-2/App.vue
index 38dc3b69f..cb3a0dd48 100644
--- a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-2/App.vue
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-2/App.vue
@@ -9,7 +9,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <h1 class="text-2xl font-bold mb-6">
       Settings
     </h1>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-3/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-3/App.vue
index fdca1d402..ddd705928 100644
--- a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-3/App.vue
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-3/App.vue
@@ -10,7 +10,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <h1 class="text-2xl font-bold mb-6">
       Settings
     </h1>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-4/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-4/App.vue
index f6b5bf3f3..8c544e045 100644
--- a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-4/App.vue
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-4/App.vue
@@ -11,7 +11,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <h1 class="text-2xl font-bold mb-6">
       Settings
     </h1>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-5/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-5/App.vue
index 0aedbf21b..4f60ec2ea 100644
--- a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-5/App.vue
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-5/App.vue
@@ -14,7 +14,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <h1 class="text-2xl font-bold mb-6">
       Settings
     </h1>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/App.vue
index 518e1a30d..a03979de2 100644
--- a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/App.vue
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-6/App.vue
@@ -21,7 +21,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <h1 class="text-2xl font-bold mb-6">
       Settings
     </h1>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/App.vue
index e479af316..70bc83688 100644
--- a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/App.vue
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-7/App.vue
@@ -21,7 +21,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <h1 class="text-2xl font-bold mb-6">
       Settings
     </h1>
diff --git a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/App.vue b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/App.vue
index ac24c20f1..4109823f2 100644
--- a/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/App.vue
+++ b/apps/docs/src/skillz/tutorials/beginner/v0-basics/step-8/App.vue
@@ -35,7 +35,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <div class="flex items-center justify-between mb-6">
       <h1 class="text-2xl font-bold">
         Settings
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-1/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-1/App.vue
index 645d81530..df5cca9b8 100644
--- a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-1/App.vue
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-1/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
       <div class="flex items-center gap-4 mb-4">
         <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-2/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-2/App.vue
index 01ae516c8..089b4ba00 100644
--- a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-2/App.vue
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-2/App.vue
@@ -8,7 +8,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
       <div class="flex items-center gap-4 mb-4">
         <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-3/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-3/App.vue
index 1816e5189..fbaa12bc9 100644
--- a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-3/App.vue
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-3/App.vue
@@ -13,7 +13,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
       <div class="flex items-center gap-4 mb-4">
         <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-4/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-4/App.vue
index 9026d7856..bee50d1fc 100644
--- a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-4/App.vue
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-4/App.vue
@@ -24,7 +24,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
       <div class="flex items-center gap-4 mb-4">
         <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-5/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-5/App.vue
index 0c3e69538..4d458b4a1 100644
--- a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-5/App.vue
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-5/App.vue
@@ -29,7 +29,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
       <div class="flex items-center gap-4 mb-4 cursor-pointer" @click="flip">
         <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-6/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-6/App.vue
index a2b868c41..a712a9afc 100644
--- a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-6/App.vue
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-6/App.vue
@@ -39,7 +39,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
       <div class="flex items-center gap-4 mb-4 cursor-pointer" @click="flip">
         <div class="w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg">
diff --git a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-7/App.vue b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-7/App.vue
index 32e09aaf2..597ca7eee 100644
--- a/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-7/App.vue
+++ b/apps/docs/src/skillz/tutorials/beginner/vue-basics/step-7/App.vue
@@ -51,7 +51,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <div class="max-w-sm rounded-lg border border-solid border-divider bg-surface p-6">
       <div class="flex items-center gap-4 mb-4 cursor-pointer" @click="flip">
         <div class="relative">
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-1/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-1/App.vue
index ba6248975..411b313a4 100644
--- a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-1/App.vue
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-1/App.vue
@@ -33,7 +33,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <div class="flex items-center gap-3 mb-6">
       <h1 class="text-2xl font-bold">
         Notifications
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-2/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-2/App.vue
index 6356afc79..b50c13ded 100644
--- a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-2/App.vue
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-2/App.vue
@@ -51,7 +51,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <h1 class="text-2xl font-bold mb-6">
       Deep Watchers
     </h1>
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-3/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-3/App.vue
index fbc40cf06..f62df1b5e 100644
--- a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-3/App.vue
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-3/App.vue
@@ -37,7 +37,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <h1 class="text-2xl font-bold mb-6">
       Template Refs
     </h1>
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-4/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-4/App.vue
index a8fcc5e65..f35fbddf0 100644
--- a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-4/App.vue
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-4/App.vue
@@ -51,7 +51,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <h1 class="text-2xl font-bold mb-6">
       Lifecycle Hooks
     </h1>
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-5/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-5/App.vue
index fee3c6efb..c57f6eb46 100644
--- a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-5/App.vue
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-5/App.vue
@@ -48,7 +48,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <h1 class="text-2xl font-bold mb-6">
       Child Components
     </h1>
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-6/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-6/App.vue
index 4fa387919..26b511d55 100644
--- a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-6/App.vue
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-6/App.vue
@@ -58,7 +58,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <div class="flex items-center gap-3 mb-6">
       <h1 class="text-2xl font-bold">
         Emitting Events
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/App.vue
index 0b955ba1e..f3eb45cca 100644
--- a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/App.vue
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-7/App.vue
@@ -58,7 +58,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <div class="flex items-center gap-3 mb-6">
       <h1 class="text-2xl font-bold">
         Slots
diff --git a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/App.vue b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/App.vue
index 9f18188f4..a2ab5ec7a 100644
--- a/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/App.vue
+++ b/apps/docs/src/skillz/tutorials/intermediate/vue-intermediate/step-8/App.vue
@@ -69,7 +69,7 @@
 </script>
 
 <template>
-  <div class="p-8 font-sans min-h-screen bg-background text-on-background">
+  <div class="p-8">
     <div class="flex items-center gap-3 mb-6">
       <h1 class="text-2xl font-bold">
         Provide / Inject

From 4873ce5941fef35115926fe7a7ef6a1d77f2803e Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 19 Feb 2026 10:11:21 -0600
Subject: [PATCH 32/39] docs(playground): consolidate dual-repl, add Pinia
 store with tour API
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- New stores/playground.ts — Pinia store managing panel/sidebar/examples
  UI state with namespaced control objects (playground.panel.open(), etc.)
- Rename usePlaygroundStore composable → usePlaygroundRepl to avoid
  collision; add PlaygroundContext interface; default showOutput to false
- PlaygroundWorkspace absorbs mobile file-browser overlay (useStack)
  and emits update:sidebarOpen
- playground.vue always renders PlaygroundWorkspace (no more dual
  Repl/WorkSpace mode); all UI state delegated to Pinia store
- skillz.[id].vue passes playground store in tour context
- using-the-playground tour handlers implemented
---
 .../playground/PlaygroundWorkspace.vue        |  48 +++-
 .../src/composables/usePlaygroundStore.ts     |  19 +-
 apps/docs/src/composables/useTutorial.ts      |   4 +-
 apps/docs/src/pages/playground.vue            | 234 +++---------------
 apps/docs/src/pages/skillz.[id].vue           |   3 +
 apps/docs/src/pages/skillz.tutorial.[id].vue  |   6 +-
 .../beginner/using-the-playground/index.ts    |  61 ++++-
 apps/docs/src/stores/playground.ts            |  82 ++++++
 knip.json                                     |   1 +
 9 files changed, 241 insertions(+), 217 deletions(-)
 create mode 100644 apps/docs/src/stores/playground.ts

diff --git a/apps/docs/src/components/playground/PlaygroundWorkspace.vue b/apps/docs/src/components/playground/PlaygroundWorkspace.vue
index f1ed840d8..b4526d210 100644
--- a/apps/docs/src/components/playground/PlaygroundWorkspace.vue
+++ b/apps/docs/src/components/playground/PlaygroundWorkspace.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+  // Framework
+  import { useStack } from '@vuetify/v0'
+
   // Components
   import { Discovery } from '@/components/discovery'
   import PlaygroundBreadcrumbs from '@/components/playground/PlaygroundBreadcrumbs.vue'
@@ -11,7 +14,7 @@
   // Utilities
   import { Repl, Sandbox } from '@vue/repl'
   import Monaco from '@vue/repl/monaco-editor'
-  import { computed } from 'vue'
+  import { computed, watch } from 'vue'
 
   // Types
   import type { ReplStore } from '@vue/repl'
@@ -35,6 +38,10 @@
     hideBreadcrumbs: false,
   })
 
+  const emit = defineEmits<{
+    'update:sidebarOpen': [value: boolean]
+  }>()
+
   const splitHandle = useResizeHandle({
     storageKey: 'workspace-split-percent',
     defaultValue: 50,
@@ -58,10 +65,49 @@
   const showFileTree = computed(() =>
     props.sidebarOpen && props.isDesktop && !props.hideFiles,
   )
+
+  const showMobileOverlay = computed(() =>
+    !props.isDesktop && props.sidebarOpen && !props.hideFiles,
+  )
+
+  // Mobile overlay z-index via stack
+  const stack = useStack()
+  const ticket = stack.register({
+    onDismiss: () => emit('update:sidebarOpen', false),
+  })
+  watch(showMobileOverlay, open => {
+    if (open) ticket.select()
+    else ticket.unselect()
+  })
 </script>
 
 <template>
   <div class="flex flex-col flex-1 min-w-0 min-h-0 bg-background">
+    <!-- Mobile: file browser overlay -->
+    <div
+      v-if="showMobileOverlay"
+      aria-label="File browser"
+      class="fixed top-0 bottom-0 left-0 w-[260px] flex flex-col bg-surface border-r border-divider"
+      role="dialog"
+      :style="{ zIndex: ticket.zIndex.value }"
+    >
+      <div class="flex items-center justify-end px-2 py-1">
+        <button
+          aria-label="Close file browser"
+          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+          @click="emit('update:sidebarOpen', false)"
+        >
+          <AppIcon icon="close" :size="18" />
+        </button>
+      </div>
+
+      <PlaygroundFileTree
+        :key="fileTreeKey"
+        class="flex-1 min-h-0"
+        :store="store"
+      />
+    </div>
+
     <!-- Editor area -->
     <div
       class="flex min-h-0 min-w-0 overflow-hidden"
diff --git a/apps/docs/src/composables/usePlaygroundStore.ts b/apps/docs/src/composables/usePlaygroundStore.ts
index 614e0b1f3..df2807e0f 100644
--- a/apps/docs/src/composables/usePlaygroundStore.ts
+++ b/apps/docs/src/composables/usePlaygroundStore.ts
@@ -4,15 +4,26 @@ import { computed, shallowRef } from 'vue'
 
 // Types
 import type { ReplStore } from '@vue/repl'
-import type { ComputedRef, Ref } from 'vue'
+import type { ComputedRef, Ref, ShallowRef } from 'vue'
 
+export interface PlaygroundContext {
+  store: ReplStore
+  isDark: Readonly<Ref<boolean>>
+  replTheme: ComputedRef<'dark' | 'light'>
+  previewOptions: ComputedRef<{ headHTML: string }>
+  fileTreeKey: ShallowRef<number>
+  sidebarOpen: ShallowRef<boolean>
+  isDesktop: ComputedRef<boolean>
+}
+
+/** @deprecated Use usePlaygroundRepl */
 export interface PlaygroundStoreReturn {
   store: ReplStore
   replTheme: ComputedRef<'dark' | 'light'>
   previewOptions: ComputedRef<{ headHTML: string }>
 }
 
-export function usePlaygroundStore (isDark: Readonly<Ref<boolean>>): PlaygroundStoreReturn {
+export function usePlaygroundRepl (isDark: Readonly<Ref<boolean>>): PlaygroundStoreReturn {
   const replTheme = computed(() => isDark.value ? 'dark' : 'light')
 
   const { importMap: builtinImportMap, vueVersion } = useVueImportMap({
@@ -31,7 +42,9 @@ export function usePlaygroundStore (isDark: Readonly<Ref<boolean>>): PlaygroundS
   const store = useStore({
     builtinImportMap: importMap,
     vueVersion,
-    showOutput: shallowRef(true),
+    // Default false: PlaygroundWorkspace renders Sandbox separately, so the
+    // Repl's built-in preview iframe must stay suppressed to avoid duplicates.
+    showOutput: shallowRef(false),
   })
 
   // Wind4 preflight reset + @property defaults.
diff --git a/apps/docs/src/composables/useTutorial.ts b/apps/docs/src/composables/useTutorial.ts
index 7bdd4312b..d6de16b9f 100644
--- a/apps/docs/src/composables/useTutorial.ts
+++ b/apps/docs/src/composables/useTutorial.ts
@@ -3,7 +3,7 @@ import { createStep, useTheme } from '@vuetify/v0'
 
 // Composables
 import { useMarkdown } from '@/composables/useMarkdown'
-import { usePlaygroundStore } from '@/composables/usePlaygroundStore'
+import { usePlaygroundRepl } from '@/composables/usePlaygroundStore'
 
 // Utilities
 import { File as ReplFile, compileFile } from '@vue/repl'
@@ -46,7 +46,7 @@ export function useTutorial (tutorialId: ComputedRef<string>, initialStep?: Comp
   const isDark = theme.isDark
   const skillz = useSkillzStore()
 
-  const { store, replTheme, previewOptions } = usePlaygroundStore(isDark)
+  const { store, replTheme, previewOptions } = usePlaygroundRepl(isDark)
 
   const meta = computed(() => getTutorial(tutorialId.value)?.meta)
   const markdown = shallowRef('')
diff --git a/apps/docs/src/pages/playground.vue b/apps/docs/src/pages/playground.vue
index 80a01b766..0121b3b2c 100644
--- a/apps/docs/src/pages/playground.vue
+++ b/apps/docs/src/pages/playground.vue
@@ -3,30 +3,29 @@
   import { definePage } from 'unplugin-vue-router/runtime'
 
   // Framework
-  import { useBreakpoints, useClickOutside, useHotkey, useStack, useStorage, useTheme, useToggleScope } from '@vuetify/v0'
+  import { useClickOutside, useHotkey, useTheme, useToggleScope } from '@vuetify/v0'
 
   // Components
   import { Discovery } from '@/components/discovery'
-  import PlaygroundBreadcrumbs from '@/components/playground/PlaygroundBreadcrumbs.vue'
   import PlaygroundExamples from '@/components/playground/PlaygroundExamples.vue'
-  import PlaygroundFileTree from '@/components/playground/PlaygroundFileTree.vue'
   import PlaygroundIntroPanel from '@/components/playground/PlaygroundIntroPanel.vue'
-  import PlaygroundTabs from '@/components/playground/PlaygroundTabs.vue'
   import PlaygroundWorkspace from '@/components/playground/PlaygroundWorkspace.vue'
 
   // Composables
   import { useDiscovery } from '@/composables/useDiscovery'
   import { usePlaygroundFiles } from '@/composables/usePlaygroundFiles'
-  import { usePlaygroundStore } from '@/composables/usePlaygroundStore'
+  import { usePlaygroundRepl } from '@/composables/usePlaygroundStore'
   import { useResizeHandle } from '@/composables/useResizeHandle'
 
   // Utilities
-  import { Repl } from '@vue/repl'
-  import Monaco from '@vue/repl/monaco-editor'
+  import { storeToRefs } from 'pinia'
   import '@vue/repl/style.css'
-  import { computed, shallowRef, useTemplateRef, watch } from 'vue'
+  import { computed, useTemplateRef, watch } from 'vue'
   import { useRouter } from 'vue-router'
 
+  // Stores
+  import { usePlaygroundStore } from '@/stores/playground'
+
   definePage({
     meta: {
       layout: 'fullscreen',
@@ -42,8 +41,6 @@
   })
 
   // ── Back navigation ────────────────────────────────────────────────────
-  // Vue Router 4 stores the previous path in history.state.back. Use it so
-  // the back button returns the user to wherever they came from in the app.
   const router = useRouter()
   const backTo = computed(() => (router.currentRoute.value.redirectedFrom?.fullPath ?? window.history.state?.back) || '/')
 
@@ -52,34 +49,17 @@
   const isDark = theme.isDark
 
   // ── REPL Setup ─────────────────────────────────────────────────────────
-  const { store, replTheme, previewOptions } = usePlaygroundStore(isDark)
+  const { store, replTheme, previewOptions } = usePlaygroundRepl(isDark)
 
   // ── Editor files ─────────────────────────────────────────────────────
   const { isReady, fileTreeKey, loadExample: _loadExample } = usePlaygroundFiles(store, () => isDark.value)
 
-  const breakpoints = useBreakpoints()
-  const isDesktop = breakpoints.mdAndUp
-  const sidebarOpen = shallowRef(true)
-  watch(isDesktop, v => {
-    sidebarOpen.value = v
-  })
-
-  const stack = useStack()
-  const ticket = stack.register({
-    onDismiss: () => {
-      sidebarOpen.value = false
-    },
-  })
-  watch(() => sidebarOpen.value && !isDesktop.value, open => {
-    if (open) ticket.select()
-    else ticket.unselect()
-  })
+  // ── Playground UI state ────────────────────────────────────────────────
+  const pg = usePlaygroundStore()
+  const { sidebarOpen, panelOpen, showExamples, isPanelMode, isDesktop } = storeToRefs(pg)
 
-  useHotkey('ctrl+b', () => {
-    sidebarOpen.value = !sidebarOpen.value
-  }, { inputs: true })
+  useHotkey('ctrl+b', () => pg.sidebar.toggle(), { inputs: true })
 
-  const showExamples = shallowRef(false)
   const examplesContainer = useTemplateRef<HTMLElement>('examplesContainer')
   const examplesButton = useTemplateRef<HTMLButtonElement>('examplesButton')
 
@@ -102,20 +82,15 @@
   // ── Intro panel ───────────────────────────────────────────────────────
   const discovery = useDiscovery()
 
-  // ── Persistent settings ────────────────────────────────────────────────
-  const storage = useStorage()
-  const replLayout = storage.get<'horizontal' | 'vertical'>('playground-layout', 'horizontal')
-  const panelOpen = storage.get<boolean>('playground-panel-open', false)
-
   // Open panel when a tour becomes active or reaches the intro-panel step
   watch(discovery.isActive, active => {
-    if (active) panelOpen.value = true
+    if (active) pg.panel.open()
   })
   watch(discovery.selectedId, id => {
-    if (id === 'intro-panel') panelOpen.value = true
+    if (id === 'intro-panel') pg.panel.open()
   })
 
-  // Panel resize (panel mode)
+  // ── Panel resize (panel mode) ─────────────────────────────────────────
   const panelHandle = useResizeHandle({
     storageKey: 'playground-intro-width',
     defaultValue: 420,
@@ -123,24 +98,6 @@
     max: 600,
     direction: 'horizontal',
   })
-
-  // Sidebar resize (normal mode, desktop)
-  const sidebarHandle = useResizeHandle({
-    storageKey: 'playground-sidebar-width',
-    defaultValue: 250,
-    min: 140,
-    max: 400,
-    direction: 'horizontal',
-  })
-
-  const isPanelMode = computed(() => isDesktop.value && panelOpen.value)
-
-  // PlaygroundWorkspace renders Sandbox separately. showOutput=false prevents Repl from creating
-  // its internal preview iframe (see patches/@vue__repl@4.7.1.patch), avoiding a duplicate
-  // sandbox and the browser's allow-scripts+allow-same-origin warning.
-  watch(isPanelMode, mode => {
-    store.showOutput = !mode
-  }, { immediate: true })
 </script>
 
 <template>
@@ -173,7 +130,7 @@
             :aria-label="panelOpen ? 'Close intro panel' : 'Open intro panel'"
             class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
             :title="panelOpen ? 'Close intro panel' : 'Open intro panel'"
-            @click="panelOpen = !panelOpen"
+            @click="pg.panel.toggle()"
           >
             <AppIcon icon="info" :size="18" />
           </button>
@@ -188,7 +145,7 @@
               aria-label="Load example"
               class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
               title="Load example"
-              @click="showExamples = !showExamples"
+              @click="pg.examples.toggle()"
             >
               <AppIcon icon="examples" :size="18" />
             </button>
@@ -204,23 +161,13 @@
           </div>
         </Discovery.Activator>
 
-        <button
-          v-if="!isPanelMode"
-          :aria-label="replLayout === 'horizontal' ? 'Switch to vertical layout' : 'Switch to horizontal layout'"
-          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
-          :title="replLayout === 'horizontal' ? 'Switch to vertical layout' : 'Switch to horizontal layout'"
-          @click="replLayout = replLayout === 'horizontal' ? 'vertical' : 'horizontal'"
-        >
-          <AppIcon :icon="replLayout === 'horizontal' ? 'layout-vertical' : 'layout-horizontal'" :size="18" />
-        </button>
-
         <button
           v-if="!isDesktop"
           :aria-expanded="sidebarOpen"
           :aria-label="sidebarOpen ? 'Close file browser' : 'Open file browser'"
           class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
           title="Toggle files"
-          @click="sidebarOpen = !sidebarOpen"
+          @click="pg.sidebar.toggle()"
         >
           <AppIcon icon="folder" :size="18" />
         </button>
@@ -231,7 +178,7 @@
           :aria-label="sidebarOpen ? 'Close sidebar' : 'Open sidebar'"
           class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
           title="Toggle sidebar"
-          @click="sidebarOpen = !sidebarOpen"
+          @click="pg.sidebar.toggle()"
         >
           <AppIcon icon="menu" :size="18" />
         </button>
@@ -255,7 +202,7 @@
             step="intro-panel"
             :style="{ width: `${panelHandle.size.value}px` }"
           >
-            <PlaygroundIntroPanel @close="panelOpen = false" />
+            <PlaygroundIntroPanel @close="pg.panel.close()" />
           </Discovery.Activator>
 
           <div
@@ -274,96 +221,22 @@
             :repl-theme="replTheme"
             :sidebar-open="sidebarOpen"
             :store="store"
+            @update:sidebar-open="v => sidebarOpen.value = v"
           />
         </div>
 
-        <!-- Normal mode: bordered editor with built-in Repl preview -->
-        <div
+        <!-- Standard mode: workspace fills the viewport -->
+        <PlaygroundWorkspace
           v-else
-          class="playground-repl h-full px-2 pt-2"
-          :class="{ dark: isDark }"
-        >
-          <div
-            class="playground-wrapper"
-            :class="{ 'select-none': sidebarHandle.isResizing.value }"
-          >
-            <!-- Desktop: file tree -->
-            <template v-if="isDesktop">
-              <Discovery.Activator
-                v-if="sidebarOpen"
-                active-class="rounded-lg"
-                as="div"
-                step="file-tree"
-                :style="{ width: `${sidebarHandle.size.value}px` }"
-              >
-                <PlaygroundFileTree
-                  :key="fileTreeKey"
-                  :store="store"
-                />
-              </Discovery.Activator>
-
-              <div
-                v-if="sidebarOpen"
-                class="playground-resize-handle"
-                :class="{ 'playground-resize-handle--active': sidebarHandle.isResizing.value }"
-                @dblclick="sidebarHandle.reset()"
-                @pointerdown="sidebarHandle.onPointerDown"
-              />
-            </template>
-
-            <!-- Mobile: fixed overlay -->
-            <div
-              v-if="!isDesktop && sidebarOpen"
-              aria-label="File browser"
-              class="fixed top-0 bottom-0 left-0 w-[260px] flex flex-col bg-surface"
-              role="dialog"
-              :style="{ zIndex: ticket.zIndex.value }"
-            >
-              <div class="flex items-center justify-end px-2 py-1">
-                <button
-                  aria-label="Close file browser"
-                  class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
-                  @click="sidebarOpen = false"
-                >
-                  <AppIcon icon="close" :size="18" />
-                </button>
-              </div>
-
-              <PlaygroundFileTree
-                :key="fileTreeKey"
-                class="flex-1 min-h-0"
-                :store="store"
-              />
-            </div>
-
-            <Discovery.Activator
-              active-class="rounded-lg"
-              as="div"
-              class="playground-repl-container flex flex-col"
-              :inert="!isDesktop && sidebarOpen ? true : undefined"
-              step="editor"
-            >
-              <PlaygroundTabs :store="store" />
-              <PlaygroundBreadcrumbs :store="store" />
-
-              <Repl
-                :auto-resize="true"
-                class="flex-1 min-h-0"
-                :class="{ 'pointer-events-none': sidebarHandle.isResizing.value }"
-                :clear-console="true"
-                :editor="Monaco"
-                :layout="replLayout"
-                :preview-options="previewOptions"
-                :preview-theme="true"
-                :show-compile-output="false"
-                :show-import-map="false"
-                :show-ts-config="false"
-                :store="store"
-                :theme="replTheme"
-              />
-            </Discovery.Activator>
-          </div>
-        </div>
+          :file-tree-key="fileTreeKey"
+          :is-dark="isDark"
+          :is-desktop="isDesktop"
+          :preview-options="previewOptions"
+          :repl-theme="replTheme"
+          :sidebar-open="sidebarOpen"
+          :store="store"
+          @update:sidebar-open="v => sidebarOpen.value = v"
+        />
       </div>
     </Transition>
   </div>
@@ -384,49 +257,6 @@
     background: var(--v0-primary);
   }
 
-  /* Normal mode: bordered wrapper */
-  .playground-repl {
-    overflow: hidden;
-  }
-
-  .playground-wrapper {
-    display: flex;
-    height: 100%;
-    border-radius: 8px 8px 0 0;
-    border: 1px solid var(--v0-divider);
-    border-bottom: none;
-    overflow: hidden;
-  }
-
-  .playground-repl-container {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .playground-repl :deep(.vue-repl) {
-    --color-branding: var(--v0-primary);
-    --color-branding-dark: var(--v0-primary);
-  }
-
-  .playground-repl :deep(.editor-container) {
-    height: 100%;
-  }
-
-  .playground-repl :deep(.editor-floating) {
-    display: none !important;
-  }
-
-  .playground-repl :deep(.file-selector) {
-    display: none !important;
-  }
-
-  .playground-repl.dark :deep(.vue-repl) {
-    --bg: var(--v0-background);
-    --bg-soft: var(--v0-surface);
-    --border: var(--v0-divider);
-    --text-light: var(--v0-on-surface-variant);
-  }
-
   /* Fade on mount */
   .fade-enter-active,
   .fade-leave-active {
diff --git a/apps/docs/src/pages/skillz.[id].vue b/apps/docs/src/pages/skillz.[id].vue
index cd2b6b577..7599e5cff 100644
--- a/apps/docs/src/pages/skillz.[id].vue
+++ b/apps/docs/src/pages/skillz.[id].vue
@@ -21,6 +21,7 @@
   import { useRouter } from 'vue-router'
 
   // Stores
+  import { usePlaygroundStore } from '@/stores/playground'
   import { useSkillzStore } from '@/stores/skillz'
 
   definePage({
@@ -33,6 +34,7 @@
   const params = useParams<{ id: string }>()
   const discovery = useDiscovery()
   const store = useSkillzStore()
+  const playground = usePlaygroundStore()
   const ask = useAsk()
   const navigation = useNavigation()
   const search = useSearch()
@@ -94,6 +96,7 @@
         ask,
         breakpoints,
         navigation,
+        playground,
         router,
         search,
         settings,
diff --git a/apps/docs/src/pages/skillz.tutorial.[id].vue b/apps/docs/src/pages/skillz.tutorial.[id].vue
index e57cb1cf6..a2299e088 100644
--- a/apps/docs/src/pages/skillz.tutorial.[id].vue
+++ b/apps/docs/src/pages/skillz.tutorial.[id].vue
@@ -70,11 +70,6 @@
     }
   }
 
-  // PlaygroundWorkspace renders Sandbox separately. Setting showOutput=false prevents
-  // the Repl from creating its internal preview iframe (see patches/@vue__repl@4.7.1.patch),
-  // avoiding a duplicate sandbox and the browser's allow-scripts+allow-same-origin warning.
-  store.showOutput = false
-
   useHead({
     title: computed(() => meta.value ? `${meta.value.title} - Vuetify0` : 'Tutorial - Vuetify0'),
   })
@@ -206,6 +201,7 @@
         :repl-theme="replTheme"
         :sidebar-open="sidebarOpen"
         :store="store"
+        @update:sidebar-open="v => sidebarOpen = v"
       />
     </div>
 
diff --git a/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts b/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts
index 5d76c705e..7bd817980 100644
--- a/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts
+++ b/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts
@@ -1,7 +1,60 @@
+// Types
+import type { PlaygroundControl } from '@/stores/playground'
+
+interface PlaygroundContext {
+  panel: PlaygroundControl
+  sidebar: PlaygroundControl
+  examples: PlaygroundControl
+}
+
+interface TourContext {
+  playground: PlaygroundContext
+}
+
 /**
- * Tour definition for "Using the Editor".
- * Pure guided tour — no UI state to manage between steps.
+ * Tour definition for "Using the Playground".
+ * Opens and closes playground panels so users see each feature in context.
  */
-export function defineTour () {
-  return {}
+export function defineTour ({ playground }: TourContext) {
+  return {
+    handlers: {
+      'welcome': {
+        enter: () => {
+          playground.panel.close()
+          playground.examples.close()
+        },
+      },
+      'panel-toggle': {
+        enter: () => {
+          playground.panel.close()
+          playground.examples.close()
+        },
+      },
+      'intro-panel': {
+        enter: () => playground.panel.open(),
+        back: () => playground.panel.close(),
+      },
+      'examples': {
+        enter: () => {
+          playground.panel.close()
+          playground.examples.close()
+        },
+      },
+      'file-tree': {
+        enter: () => {
+          playground.examples.close()
+          playground.sidebar.open()
+        },
+      },
+      'playground': {
+        enter: () => playground.examples.close(),
+      },
+      'complete': {
+        enter: () => {
+          playground.panel.close()
+          playground.examples.close()
+        },
+      },
+    },
+  }
 }
diff --git a/apps/docs/src/stores/playground.ts b/apps/docs/src/stores/playground.ts
new file mode 100644
index 000000000..c5a1a96be
--- /dev/null
+++ b/apps/docs/src/stores/playground.ts
@@ -0,0 +1,82 @@
+// Framework
+import { useBreakpoints, useStorage } from '@vuetify/v0'
+
+// Utilities
+import { defineStore } from 'pinia'
+import { computed, shallowRef, watch } from 'vue'
+
+export interface PlaygroundControl {
+  open: () => void
+  close: () => void
+  toggle: () => void
+}
+
+export const usePlaygroundStore = defineStore('playground', () => {
+  const storage = useStorage()
+  const breakpoints = useBreakpoints()
+  const isDesktop = breakpoints.mdAndUp
+
+  // Persistent UI preferences
+  const panelOpen = storage.get<boolean>('playground-panel-open', false)
+  const replLayout = storage.get<'horizontal' | 'vertical'>('playground-layout', 'horizontal')
+
+  // Session UI state
+  const sidebarOpen = shallowRef(true)
+  const showExamples = shallowRef(false)
+
+  const isPanelMode = computed(() => isDesktop.value && panelOpen.value)
+
+  // Sync sidebar with desktop breakpoint
+  watch(isDesktop, v => {
+    sidebarOpen.value = v
+  })
+
+  // Namespaced control objects for tour handlers
+  const panel: PlaygroundControl = {
+    open: () => {
+      panelOpen.value = true
+    },
+    close: () => {
+      panelOpen.value = false
+    },
+    toggle: () => {
+      panelOpen.value = !panelOpen.value
+    },
+  }
+
+  const sidebar: PlaygroundControl = {
+    open: () => {
+      sidebarOpen.value = true
+    },
+    close: () => {
+      sidebarOpen.value = false
+    },
+    toggle: () => {
+      sidebarOpen.value = !sidebarOpen.value
+    },
+  }
+
+  const examples: PlaygroundControl = {
+    open: () => {
+      showExamples.value = true
+    },
+    close: () => {
+      showExamples.value = false
+    },
+    toggle: () => {
+      showExamples.value = !showExamples.value
+    },
+  }
+
+  return {
+    isDesktop,
+    sidebarOpen,
+    panelOpen,
+    showExamples,
+    replLayout,
+    isPanelMode,
+    panel,
+    sidebar,
+    examples,
+  }
+})
diff --git a/knip.json b/knip.json
index 72e6d1f9f..9ed86ef56 100644
--- a/knip.json
+++ b/knip.json
@@ -31,6 +31,7 @@
         "src/components/app/AppBrowserIcon.vue",
         "src/components/docs/DocsBrowserSupport.vue",
         "src/skillz/tours/**/index.ts",
+        "src/stores/playground.ts",
         "src/stores/skillz.ts",
         "src/data/**",
         "src/examples/**",

From 392d64485514a88ff70fe7c1b95f0d8617679ddf Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 19 Feb 2026 10:33:50 -0600
Subject: [PATCH 33/39] =?UTF-8?q?docs:=20withDefaults=20=E2=86=92=20Vue=20?=
 =?UTF-8?q?3.5=20destructuring,=20toRef,=20v0=20utilities,=20idle=20callba?=
 =?UTF-8?q?ck?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/app/AppBrowserIcon.vue     |  6 ++--
 apps/docs/src/components/docs/DocsBadge.vue   | 18 ++++-------
 .../components/docs/DocsBrowserSupport.vue    | 26 ++++++++--------
 apps/docs/src/components/docs/DocsExample.vue | 30 +++++++++----------
 .../components/docs/DocsExampleCodePane.vue   | 20 +++++--------
 apps/docs/src/components/docs/DocsMarkup.vue  | 12 ++++----
 .../src/components/docs/DocsProgressBar.vue   |  8 ++---
 .../docs/src/components/docs/DocsSkeleton.vue | 13 ++------
 .../docs/benchmark/BenchmarkExplorer.vue      | 10 +++----
 .../playground/PlaygroundFileTree.vue         | 13 ++++----
 .../playground/PlaygroundIntroPanel.vue       |  4 +--
 .../playground/PlaygroundMarkdownPanel.vue    |  7 ++---
 .../playground/PlaygroundWorkspace.vue        | 18 +++++------
 apps/docs/src/components/skillz/SkillCard.vue |  8 ++---
 .../components/skillz/SkillCategoryTags.vue   |  6 ++--
 .../src/components/skillz/SkillDuration.vue   |  6 ++--
 .../src/components/skillz/SkillLevelBadge.vue | 10 ++-----
 .../src/components/skillz/SkillModeBadge.vue  | 10 ++-----
 .../components/skillz/SkillPrerequisites.vue  |  6 ++--
 .../src/components/skillz/SkillzBadge.vue     |  4 +--
 .../src/components/skillz/SkillzResume.vue    |  2 +-
 .../docs/src/composables/usePlaygroundLink.ts | 12 ++++----
 apps/docs/src/composables/useTutorial.ts      |  3 --
 apps/docs/src/layouts/default.vue             | 10 ++-----
 24 files changed, 102 insertions(+), 160 deletions(-)

diff --git a/apps/docs/src/components/app/AppBrowserIcon.vue b/apps/docs/src/components/app/AppBrowserIcon.vue
index 61da1e1b0..e7b69576e 100644
--- a/apps/docs/src/components/app/AppBrowserIcon.vue
+++ b/apps/docs/src/components/app/AppBrowserIcon.vue
@@ -20,11 +20,9 @@
     size?: number
   }
 
-  const props = withDefaults(defineProps<AppBrowserIconProps>(), {
-    size: 18,
-  })
+  const { browser, size = 18 } = defineProps<AppBrowserIconProps>()
 
-  const config = computed(() => browsers[props.browser])
+  const config = computed(() => browsers[browser])
 </script>
 
 <template>
diff --git a/apps/docs/src/components/docs/DocsBadge.vue b/apps/docs/src/components/docs/DocsBadge.vue
index 50c0d232b..dcef4f7e5 100644
--- a/apps/docs/src/components/docs/DocsBadge.vue
+++ b/apps/docs/src/components/docs/DocsBadge.vue
@@ -6,7 +6,7 @@
    */
   import { computed } from 'vue'
 
-  const props = withDefaults(defineProps<{
+  const { label, icon, color, backgroundOpacity = 15, showIcon = true, showLabel = true, iconSize = 14, shape = 'rounded', title } = defineProps<{
     /** Badge text label */
     label: string
     /** Icon name (optional) */
@@ -25,23 +25,17 @@
     shape?: 'rounded' | 'pill'
     /** Tooltip text */
     title?: string
-  }>(), {
-    backgroundOpacity: 15,
-    showIcon: true,
-    showLabel: true,
-    iconSize: 14,
-    shape: 'rounded',
-  })
+  }>()
 
   const badgeStyle = computed(() => {
-    if (!props.color) return undefined
+    if (!color) return undefined
     return {
-      background: `color-mix(in srgb, ${props.color} ${props.backgroundOpacity}%, transparent)`,
-      color: props.color,
+      background: `color-mix(in srgb, ${color} ${backgroundOpacity}%, transparent)`,
+      color,
     }
   })
 
-  const shapeClass = computed(() => props.shape === 'pill' ? 'rounded-full' : 'rounded')
+  const shapeClass = computed(() => shape === 'pill' ? 'rounded-full' : 'rounded')
 </script>
 
 <template>
diff --git a/apps/docs/src/components/docs/DocsBrowserSupport.vue b/apps/docs/src/components/docs/DocsBrowserSupport.vue
index 113e66e2d..1817060d7 100644
--- a/apps/docs/src/components/docs/DocsBrowserSupport.vue
+++ b/apps/docs/src/components/docs/DocsBrowserSupport.vue
@@ -26,34 +26,32 @@
     anchor?: string
   }
 
-  const props = withDefaults(defineProps<DocsBrowserSupportProps>(), {
-    anchor: undefined,
-  })
+  const { feature, versions, anchor } = defineProps<DocsBrowserSupportProps>()
 
   const browsers = computed(() => {
     const list: { browser: BrowserName, name: string, version: string }[] = []
 
-    if (props.versions.chrome) {
-      list.push({ browser: 'chrome', name: 'Chrome', version: props.versions.chrome })
+    if (versions.chrome) {
+      list.push({ browser: 'chrome', name: 'Chrome', version: versions.chrome })
     }
-    if (props.versions.edge) {
-      list.push({ browser: 'edge', name: 'Edge', version: props.versions.edge })
+    if (versions.edge) {
+      list.push({ browser: 'edge', name: 'Edge', version: versions.edge })
     }
-    if (props.versions.firefox) {
-      list.push({ browser: 'firefox', name: 'Firefox', version: props.versions.firefox })
+    if (versions.firefox) {
+      list.push({ browser: 'firefox', name: 'Firefox', version: versions.firefox })
     }
-    if (props.versions.safari) {
-      list.push({ browser: 'safari', name: 'Safari', version: props.versions.safari })
+    if (versions.safari) {
+      list.push({ browser: 'safari', name: 'Safari', version: versions.safari })
     }
-    if (props.versions.opera) {
-      list.push({ browser: 'opera', name: 'Opera', version: props.versions.opera })
+    if (versions.opera) {
+      list.push({ browser: 'opera', name: 'Opera', version: versions.opera })
     }
 
     return list
   })
 
   const hasLimitedSupport = computed(() => {
-    return !props.versions.safari || props.versions.safari === '—'
+    return !versions.safari || versions.safari === '—'
   })
 </script>
 
diff --git a/apps/docs/src/components/docs/DocsExample.vue b/apps/docs/src/components/docs/DocsExample.vue
index 4394fe36b..c81e15130 100644
--- a/apps/docs/src/components/docs/DocsExample.vue
+++ b/apps/docs/src/components/docs/DocsExample.vue
@@ -24,7 +24,7 @@
     language?: string
   }
 
-  const props = withDefaults(defineProps<{
+  const { file, filePath, filePaths, fileOrders, title, id, code, collapse, files, peek, peekLines = 6 } = defineProps<{
     file?: string
     filePath?: string
     filePaths?: string[]
@@ -36,31 +36,29 @@
     files?: ExampleFile[]
     peek?: boolean
     peekLines?: number
-  }>(), {
-    peekLines: 6,
-  })
+  }>()
 
   // Auto-resolve component and code from filePath(s)
   const examples = useExamples()
   const auto = computed(() => {
-    if (props.filePaths?.length) return examples.resolveMultiple(props.filePaths)
-    if (props.filePath) return examples.resolve(props.filePath)
+    if (filePaths?.length) return examples.resolveMultiple(filePaths)
+    if (filePath) return examples.resolve(filePath)
     return null
   })
 
   const resolvedCode = computed(() =>
-    props.code ?? ('code' in (auto.value || {}) ? (auto.value as { code?: string }).code : undefined),
+    code ?? ('code' in (auto.value || {}) ? (auto.value as { code?: string }).code : undefined),
   )
   const resolvedFiles = computed(() =>
-    props.files ?? ('files' in (auto.value || {}) ? (auto.value as { files?: ExampleFile[] }).files : undefined),
+    files ?? ('files' in (auto.value || {}) ? (auto.value as { files?: ExampleFile[] }).files : undefined),
   )
 
   // Sort files by display order if fileOrders specified
   const displayFiles = computed(() => {
-    const files = resolvedFiles.value
-    if (!files?.length || !props.fileOrders?.some(o => !isUndefined(o))) return files
-    return files
-      .map((f, i) => ({ file: f, order: props.fileOrders![i] ?? Infinity }))
+    const resolvedFilesList = resolvedFiles.value
+    if (!resolvedFilesList?.length || !fileOrders?.some(o => !isUndefined(o))) return resolvedFilesList
+    return resolvedFilesList
+      .map((f, i) => ({ file: f, order: fileOrders![i] ?? Infinity }))
       .toSorted((a, b) => a.order - b.order)
       .map(x => x.file)
   })
@@ -69,7 +67,7 @@
   const hasDescription = computed(() => !!slots.description)
   const descriptionExpanded = ref(false)
 
-  const anchorId = computed(() => props.id ?? (props.title ? `example-${toKebab(props.title)}` : undefined))
+  const anchorId = computed(() => id ?? (title ? `example-${toKebab(title)}` : undefined))
 
   const uid = useId()
   const showCode = ref(false)
@@ -150,13 +148,13 @@
   }
 
   const fileName = computed(() =>
-    props.file?.split('/').pop() || (props.filePath ? `${props.filePath.split('/').pop()}.vue` : ''),
+    file?.split('/').pop() || (filePath ? `${filePath.split('/').pop()}.vue` : ''),
   )
 
   // Extract the feature directory from the example path
   // e.g. 'components/pagination/basic' → 'pagination'
   const exampleDir = computed(() => {
-    const path = props.filePath ?? props.filePaths?.[0]
+    const path = filePath ?? filePaths?.[0]
     if (!path) return undefined
     const parts = path.split('/')
     return parts.length >= 2 ? parts.at(-2) : undefined
@@ -173,7 +171,7 @@
   function openAllInBin () {
     if (!displayFiles.value?.length) return
     const files = displayFiles.value.map(f => ({ name: f.name, code: f.code, language: f.language }))
-    const url = getMultiFileBinUrl(files, props.title)
+    const url = getMultiFileBinUrl(files, title)
     window.open(url, '_blank')
   }
 </script>
diff --git a/apps/docs/src/components/docs/DocsExampleCodePane.vue b/apps/docs/src/components/docs/DocsExampleCodePane.vue
index 7ec5dfd18..e3ed09510 100644
--- a/apps/docs/src/components/docs/DocsExampleCodePane.vue
+++ b/apps/docs/src/components/docs/DocsExampleCodePane.vue
@@ -9,7 +9,7 @@
   // Utilities
   import { computed, onMounted, onScopeDispose, shallowRef, useTemplateRef, watch } from 'vue'
 
-  const props = withDefaults(defineProps<{
+  const { code, language = 'vue', fileName, title, peek, peekLines = 6, showPlayground = true } = defineProps<{
     code: string
     language?: string
     fileName?: string
@@ -17,11 +17,7 @@
     peek?: boolean
     peekLines?: number
     showPlayground?: boolean
-  }>(), {
-    language: 'vue',
-    peekLines: 6,
-    showPlayground: true,
-  })
+  }>()
 
   const expanded = defineModel<boolean>('expanded', { default: false })
 
@@ -41,10 +37,10 @@
   const { highlight: highlightCode } = useCodeHighlighter()
 
   async function highlight () {
-    if (highlightedCode.value || !props.code) return
+    if (highlightedCode.value || !code) return
     isLoading.value = true
     try {
-      const result = await highlightCode({ code: props.code, language: props.language })
+      const result = await highlightCode({ code, language })
       highlightedCode.value = result.html
     } catch (error) {
       logger.error('Failed to highlight code', error)
@@ -65,15 +61,15 @@
   )
 
   // Re-highlight when code changes
-  watch(() => props.code, () => {
+  watch(() => code, () => {
     highlightedCode.value = undefined
     highlight()
   })
 
   // Peek mode
-  const lineCount = computed(() => props.code?.split('\n').length ?? 0)
-  const shouldPeek = computed(() => props.peek && lineCount.value > props.peekLines)
-  const peekHeight = computed(() => `${props.peekLines * 1.5 + 1}rem`)
+  const lineCount = computed(() => code?.split('\n').length ?? 0)
+  const shouldPeek = computed(() => peek && lineCount.value > peekLines)
+  const peekHeight = computed(() => `${peekLines * 1.5 + 1}rem`)
 
   onScopeDispose(() => {
     highlightedCode.value = undefined
diff --git a/apps/docs/src/components/docs/DocsMarkup.vue b/apps/docs/src/components/docs/DocsMarkup.vue
index f7f3a01d8..27d96ebf9 100644
--- a/apps/docs/src/components/docs/DocsMarkup.vue
+++ b/apps/docs/src/components/docs/DocsMarkup.vue
@@ -9,7 +9,7 @@
   import { decodeBase64 } from '@/utilities/decodeBase64'
   import { computed, ref, shallowRef, watch } from 'vue'
 
-  const props = withDefaults(defineProps<{
+  const { code, language, title, binTitle, playground, collapse, collapseLines = 15, hideFilename } = defineProps<{
     code: string // base64 encoded
     language?: string
     title?: string
@@ -18,9 +18,7 @@
     collapse?: boolean
     collapseLines?: number
     hideFilename?: boolean
-  }>(), {
-    collapseLines: 15,
-  })
+  }>()
 
   const theme = useTheme()
   const settings = useSettings()
@@ -33,13 +31,13 @@
     lineWrap.value = val
   })
 
-  const decodedCode = computed(() => decodeBase64(props.code))
+  const decodedCode = computed(() => decodeBase64(code))
 
   // Collapse state
   const expanded = ref(false)
   const lineCount = computed(() => decodedCode.value.split('\n').length)
-  const shouldCollapse = computed(() => props.collapse && lineCount.value > props.collapseLines)
-  const collapsedHeight = computed(() => `${props.collapseLines * 1.5 + 2.5}rem`)
+  const shouldCollapse = computed(() => collapse && lineCount.value > collapseLines)
+  const collapsedHeight = computed(() => `${collapseLines * 1.5 + 2.5}rem`)
 </script>
 
 <template>
diff --git a/apps/docs/src/components/docs/DocsProgressBar.vue b/apps/docs/src/components/docs/DocsProgressBar.vue
index 23fdd032c..dd28aa9e0 100644
--- a/apps/docs/src/components/docs/DocsProgressBar.vue
+++ b/apps/docs/src/components/docs/DocsProgressBar.vue
@@ -2,7 +2,7 @@
   /**
    * Simple progress bar component with percentage label.
    */
-  withDefaults(defineProps<{
+  const { value, color = 'primary', showLabel = true, size = 'sm' } = defineProps<{
     /** Progress value (0-100) */
     value: number
     /** Color variant */
@@ -11,11 +11,7 @@
     showLabel?: boolean
     /** Size variant */
     size?: 'sm' | 'md'
-  }>(), {
-    color: 'primary',
-    showLabel: true,
-    size: 'sm',
-  })
+  }>()
 </script>
 
 <template>
diff --git a/apps/docs/src/components/docs/DocsSkeleton.vue b/apps/docs/src/components/docs/DocsSkeleton.vue
index 1d266d8d9..cee26ad16 100644
--- a/apps/docs/src/components/docs/DocsSkeleton.vue
+++ b/apps/docs/src/components/docs/DocsSkeleton.vue
@@ -3,7 +3,7 @@
    * Reusable loading skeleton component.
    * Renders animated placeholder bars for loading states.
    */
-  withDefaults(defineProps<{
+  const { lines = 3, height = 'h-4', widths = ['w-full'], gap = 'gap-2', 'static': noAnimation = false, direction = 'col' } = defineProps<{
     /** Number of skeleton lines to render */
     lines?: number
     /** Height class (e.g., 'h-4', 'h-6') */
@@ -16,14 +16,7 @@
     static?: boolean
     /** Layout direction */
     direction?: 'row' | 'col'
-  }>(), {
-    lines: 3,
-    height: 'h-4',
-    widths: () => ['w-full'],
-    gap: 'gap-2',
-    static: false,
-    direction: 'col',
-  })
+  }>()
 </script>
 
 <template>
@@ -37,7 +30,7 @@
       :class="[
         height,
         widths[(i - 1) % widths.length],
-        !static && 'animate-pulse',
+        !noAnimation && 'animate-pulse',
       ]"
     />
   </div>
diff --git a/apps/docs/src/components/docs/benchmark/BenchmarkExplorer.vue b/apps/docs/src/components/docs/benchmark/BenchmarkExplorer.vue
index 1b5416d81..11b0189ce 100644
--- a/apps/docs/src/components/docs/benchmark/BenchmarkExplorer.vue
+++ b/apps/docs/src/components/docs/benchmark/BenchmarkExplorer.vue
@@ -5,7 +5,7 @@
   // Utilities
   import { computed, toRef, watch } from 'vue'
 
-  const props = withDefaults(defineProps<{
+  const { composable, hideSummary, collapsed } = defineProps<{
     /** Restrict to a single composable (embed mode) */
     composable?: string
     /** Hide the filter bar */
@@ -14,9 +14,7 @@
     hideSummary?: boolean
     /** Start with groups collapsed */
     collapsed?: boolean
-  }>(), {
-    collapsed: undefined,
-  })
+  }>()
 
   const {
     isLoading,
@@ -28,10 +26,10 @@
     expandedGroups,
     expandAll,
     collapseAll,
-  } = useBenchmarkData({ composable: () => props.composable })
+  } = useBenchmarkData({ composable: () => composable })
 
   // Default expand behavior: expand all when not collapsed
-  const shouldCollapse = computed(() => props.collapsed ?? !!props.composable)
+  const shouldCollapse = computed(() => collapsed ?? !!composable)
 
   // Auto-expand groups when search is active
   watch(toRef(() => filter.query.value), query => {
diff --git a/apps/docs/src/components/playground/PlaygroundFileTree.vue b/apps/docs/src/components/playground/PlaygroundFileTree.vue
index c624e925a..e9288fa9e 100644
--- a/apps/docs/src/components/playground/PlaygroundFileTree.vue
+++ b/apps/docs/src/components/playground/PlaygroundFileTree.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   // Framework
-  import { createNested, useProxyRegistry } from '@vuetify/v0'
+  import { createNested, isString, useProxyRegistry } from '@vuetify/v0'
 
   // Composables
   import { useFileTreeCrud } from '@/composables/useFileTreeCrud'
@@ -98,7 +98,7 @@
 
   // Auto-open all nested folders under src
   for (const id of tree.keys()) {
-    if (typeof id !== 'string') continue
+    if (!isString(id)) continue
     if (id.startsWith('src/') && !/\.\w+$/.test(id)) {
       tree.open(id)
     }
@@ -112,7 +112,6 @@
     isFile, fileExt, add, confirm, cancel, deletable, remove,
   } = useFileTreeCrud(tree, props.store)
 
-  // ── Tree helpers ───────────────────────────────────────────────────────
   function getVisibleNodes (parentId?: string): string[] {
     const ids = parentId
       ? tree.children.get(parentId) ?? []
@@ -153,13 +152,13 @@
     return nodes[lastIdx]
   })
 
-  const treeEl = useTemplateRef<HTMLElement>('treeEl')
+  const treeEl = useTemplateRef<HTMLElement>('tree')
 
   function activate (id: string) {
     if (isFile(id)) {
       props.store.setActive(id)
       const parent = tree.parents.get(id)
-      targetFolder.value = (typeof parent === 'string' ? parent : null) ?? 'src'
+      targetFolder.value = (isString(parent) ? parent : null) ?? 'src'
     } else {
       tree.flip(id)
       targetFolder.value = id
@@ -208,7 +207,7 @@
           tree.close(id)
         } else {
           const parent = tree.parents.get(id)
-          if (typeof parent === 'string' && parent !== 'src') focusNode(parent)
+          if (isString(parent) && parent !== 'src') focusNode(parent)
         }
         break
       }
@@ -234,7 +233,7 @@
 
 <template>
   <nav
-    ref="treeEl"
+    ref="tree"
     aria-label="File browser"
     class="border-r border-divider bg-surface overflow-y-auto shrink-0 h-100%"
   >
diff --git a/apps/docs/src/components/playground/PlaygroundIntroPanel.vue b/apps/docs/src/components/playground/PlaygroundIntroPanel.vue
index d0617da6c..e7f11dc51 100644
--- a/apps/docs/src/components/playground/PlaygroundIntroPanel.vue
+++ b/apps/docs/src/components/playground/PlaygroundIntroPanel.vue
@@ -10,13 +10,13 @@
   import { useTemplateRef } from 'vue'
 
   // Content
-  import introMd from './PlaygroundIntroPanel.md?raw'
+  import PlaygroundIntroPanelRaw from './PlaygroundIntroPanel.md?raw'
 
   defineEmits<{
     close: []
   }>()
 
-  const { html } = useMarkdown(introMd)
+  const { html } = useMarkdown(PlaygroundIntroPanelRaw)
 
   const contentRef = useTemplateRef<HTMLElement>('content')
   useMarkdownMount(contentRef, html)
diff --git a/apps/docs/src/components/playground/PlaygroundMarkdownPanel.vue b/apps/docs/src/components/playground/PlaygroundMarkdownPanel.vue
index bb3cf1a00..dd1fcdae8 100644
--- a/apps/docs/src/components/playground/PlaygroundMarkdownPanel.vue
+++ b/apps/docs/src/components/playground/PlaygroundMarkdownPanel.vue
@@ -10,7 +10,7 @@
   import { useMarkdownMount } from '@/composables/useMarkdownMount'
 
   // Utilities
-  import { computed, useTemplateRef, watch } from 'vue'
+  import { toRef, useTemplateRef, watch } from 'vue'
 
   // Types
   import type { SkillLevel } from '@/types/skill'
@@ -29,14 +29,13 @@
   }>()
 
   const theme = useTheme()
-  const dataTheme = computed(() => theme.isDark.value ? 'dark' : 'light')
+  const dataTheme = toRef(() => theme.isDark.value ? 'dark' : 'light')
 
-  // ── Dynamic component mounting ───────────────────────────────────────
   const contentRef = useTemplateRef<HTMLElement>('content')
   const scrollRef = useTemplateRef<HTMLElement>('scroll')
 
   // Mounts DocsCallout and DocsMarkup into the placeholder elements produced by useMarkdown
-  const htmlRef = computed(() => props.html)
+  const htmlRef = toRef(() => props.html)
   useMarkdownMount(contentRef, htmlRef)
 
   // Scroll to top on each step transition
diff --git a/apps/docs/src/components/playground/PlaygroundWorkspace.vue b/apps/docs/src/components/playground/PlaygroundWorkspace.vue
index b4526d210..6ead78242 100644
--- a/apps/docs/src/components/playground/PlaygroundWorkspace.vue
+++ b/apps/docs/src/components/playground/PlaygroundWorkspace.vue
@@ -19,7 +19,10 @@
   // Types
   import type { ReplStore } from '@vue/repl'
 
-  const props = withDefaults(defineProps<{
+  const {
+    store, replTheme, previewOptions, isDark, fileTreeKey, sidebarOpen, isDesktop,
+    externalResizing = false, hideFiles = false, hideTabs = false, hideBreadcrumbs = false,
+  } = defineProps<{
     store: ReplStore
     replTheme: 'dark' | 'light'
     previewOptions: { headHTML: string }
@@ -31,12 +34,7 @@
     hideFiles?: boolean
     hideTabs?: boolean
     hideBreadcrumbs?: boolean
-  }>(), {
-    externalResizing: false,
-    hideFiles: false,
-    hideTabs: false,
-    hideBreadcrumbs: false,
-  })
+  }>()
 
   const emit = defineEmits<{
     'update:sidebarOpen': [value: boolean]
@@ -59,15 +57,15 @@
   })
 
   const anyResizing = computed(() =>
-    props.externalResizing || splitHandle.isResizing.value || fileTreeHandle.isResizing.value,
+    externalResizing || splitHandle.isResizing.value || fileTreeHandle.isResizing.value,
   )
 
   const showFileTree = computed(() =>
-    props.sidebarOpen && props.isDesktop && !props.hideFiles,
+    sidebarOpen && isDesktop && !hideFiles,
   )
 
   const showMobileOverlay = computed(() =>
-    !props.isDesktop && props.sidebarOpen && !props.hideFiles,
+    !isDesktop && sidebarOpen && !hideFiles,
   )
 
   // Mobile overlay z-index via stack
diff --git a/apps/docs/src/components/skillz/SkillCard.vue b/apps/docs/src/components/skillz/SkillCard.vue
index eda047314..607f51225 100644
--- a/apps/docs/src/components/skillz/SkillCard.vue
+++ b/apps/docs/src/components/skillz/SkillCard.vue
@@ -4,7 +4,7 @@
   import DocsCard from '@/components/docs/DocsCard.vue'
 
   // Utilities
-  import { computed } from 'vue'
+  import { toRef } from 'vue'
 
   // Types
   import type { SkillMeta } from '@/types/skill'
@@ -18,9 +18,9 @@
   }>()
 
   const store = useSkillzStore()
-  const done = computed(() => store.completed(props.skill.id))
-  const isLocked = computed(() => store.locked(props.skill.id))
-  const href = computed(() => {
+  const done = toRef(() => store.completed(props.skill.id))
+  const isLocked = toRef(() => store.locked(props.skill.id))
+  const href = toRef(() => {
     if (isLocked.value) return undefined
     return `/skillz/${props.skill.id}`
   })
diff --git a/apps/docs/src/components/skillz/SkillCategoryTags.vue b/apps/docs/src/components/skillz/SkillCategoryTags.vue
index e55b02e1b..90ca1b415 100644
--- a/apps/docs/src/components/skillz/SkillCategoryTags.vue
+++ b/apps/docs/src/components/skillz/SkillCategoryTags.vue
@@ -4,14 +4,12 @@
 
   import { SKILL_CATEGORY_META } from '@/types/skill'
 
-  withDefaults(defineProps<{
+  const { categories, variant = 'default' } = defineProps<{
     /** Array of category identifiers */
     categories: SkillCategory[]
     /** Visual variant */
     variant?: 'default' | 'compact'
-  }>(), {
-    variant: 'default',
-  })
+  }>()
 </script>
 
 <template>
diff --git a/apps/docs/src/components/skillz/SkillDuration.vue b/apps/docs/src/components/skillz/SkillDuration.vue
index 6ccff79fe..40db54daf 100644
--- a/apps/docs/src/components/skillz/SkillDuration.vue
+++ b/apps/docs/src/components/skillz/SkillDuration.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-  withDefaults(defineProps<{
+  const { minutes, iconSize = 14 } = defineProps<{
     /** Duration in minutes */
     minutes: number
     /** Icon size in pixels */
     iconSize?: number
-  }>(), {
-    iconSize: 14,
-  })
+  }>()
 </script>
 
 <template>
diff --git a/apps/docs/src/components/skillz/SkillLevelBadge.vue b/apps/docs/src/components/skillz/SkillLevelBadge.vue
index 8caf163b4..03d3619e9 100644
--- a/apps/docs/src/components/skillz/SkillLevelBadge.vue
+++ b/apps/docs/src/components/skillz/SkillLevelBadge.vue
@@ -10,7 +10,7 @@
 
   import { SKILL_LEVEL_META } from '@/types/skill'
 
-  const props = withDefaults(defineProps<{
+  const { level, showIcon = true, showLabel = true, iconSize = 14 } = defineProps<{
     /** Skill level (1, 2, or 3) */
     level: SkillLevel
     /** Show the level icon */
@@ -19,13 +19,9 @@
     showLabel?: boolean
     /** Icon size in pixels */
     iconSize?: number
-  }>(), {
-    showIcon: true,
-    showLabel: true,
-    iconSize: 14,
-  })
+  }>()
 
-  const meta = computed(() => SKILL_LEVEL_META[props.level])
+  const meta = computed(() => SKILL_LEVEL_META[level])
 </script>
 
 <template>
diff --git a/apps/docs/src/components/skillz/SkillModeBadge.vue b/apps/docs/src/components/skillz/SkillModeBadge.vue
index 7381f90a0..f35db1eaf 100644
--- a/apps/docs/src/components/skillz/SkillModeBadge.vue
+++ b/apps/docs/src/components/skillz/SkillModeBadge.vue
@@ -10,7 +10,7 @@
 
   import { SKILL_MODE_META } from '@/types/skill'
 
-  const props = withDefaults(defineProps<{
+  const { mode, showIcon = true, showLabel = true, iconSize = 14 } = defineProps<{
     /** Skill mode ('guided' or 'interactive') */
     mode: SkillMode
     /** Show the mode icon */
@@ -19,13 +19,9 @@
     showLabel?: boolean
     /** Icon size in pixels */
     iconSize?: number
-  }>(), {
-    showIcon: true,
-    showLabel: true,
-    iconSize: 14,
-  })
+  }>()
 
-  const meta = computed(() => SKILL_MODE_META[props.mode])
+  const meta = computed(() => SKILL_MODE_META[mode])
 </script>
 
 <template>
diff --git a/apps/docs/src/components/skillz/SkillPrerequisites.vue b/apps/docs/src/components/skillz/SkillPrerequisites.vue
index d9b4c2432..184857e3c 100644
--- a/apps/docs/src/components/skillz/SkillPrerequisites.vue
+++ b/apps/docs/src/components/skillz/SkillPrerequisites.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-  withDefaults(defineProps<{
+  const { prerequisites, variant = 'inline' } = defineProps<{
     /** Array of prerequisite skill IDs */
     prerequisites: string[]
     /** Display variant */
     variant?: 'inline' | 'box'
-  }>(), {
-    variant: 'inline',
-  })
+  }>()
 </script>
 
 <template>
diff --git a/apps/docs/src/components/skillz/SkillzBadge.vue b/apps/docs/src/components/skillz/SkillzBadge.vue
index f767bb90d..e2820cc40 100644
--- a/apps/docs/src/components/skillz/SkillzBadge.vue
+++ b/apps/docs/src/components/skillz/SkillzBadge.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   // Utilities
-  import { computed } from 'vue'
+  import { toRef } from 'vue'
 
   // Types
   import type { SkillLevel } from '@/types/skill'
@@ -11,7 +11,7 @@
     level?: SkillLevel
   }>()
 
-  const levelMeta = computed(() => props.level ? SKILL_LEVEL_META[props.level] : undefined)
+  const levelMeta = toRef(() => props.level ? SKILL_LEVEL_META[props.level] : undefined)
 </script>
 
 <template>
diff --git a/apps/docs/src/components/skillz/SkillzResume.vue b/apps/docs/src/components/skillz/SkillzResume.vue
index 1fd35f0b2..7e50cc1c1 100644
--- a/apps/docs/src/components/skillz/SkillzResume.vue
+++ b/apps/docs/src/components/skillz/SkillzResume.vue
@@ -28,7 +28,7 @@
   const search = useSearch()
   const settings = useSettings()
 
-  const levelMeta = computed(() => {
+  const levelMeta = toRef(() => {
     const level = store.pendingTour?.tour.level ?? 1
     return SKILL_LEVEL_META[level]
   })
diff --git a/apps/docs/src/composables/usePlaygroundLink.ts b/apps/docs/src/composables/usePlaygroundLink.ts
index c27a919e5..cdc4e74ec 100644
--- a/apps/docs/src/composables/usePlaygroundLink.ts
+++ b/apps/docs/src/composables/usePlaygroundLink.ts
@@ -1,3 +1,6 @@
+// Framework
+import { isObject, isString } from '@vuetify/v0'
+
 export interface PlaygroundFile {
   name: string
   code: string
@@ -112,12 +115,7 @@ export async function usePlaygroundLinkMulti (inputFiles: PlaygroundFile[], dir?
 }
 
 function isFileRecord (v: unknown): v is Record<string, string> {
-  return (
-    typeof v === 'object'
-    && v !== null
-    && !Array.isArray(v)
-    && Object.values(v as Record<string, unknown>).every(x => typeof x === 'string')
-  )
+  return isObject(v) && Object.values(v).every(x => isString(x))
 }
 
 export interface PlaygroundHashData {
@@ -150,7 +148,7 @@ export async function decodePlaygroundHash (hash: string): Promise<PlaygroundHas
       && isFileRecord((parsed as { files: unknown }).files)
     ) {
       const { files, active } = parsed as { files: Record<string, string>, active?: unknown }
-      return { files, active: typeof active === 'string' ? active : undefined }
+      return { files, active: isString(active) ? active : undefined }
     }
     return null
   } catch {
diff --git a/apps/docs/src/composables/useTutorial.ts b/apps/docs/src/composables/useTutorial.ts
index d6de16b9f..14b83f59b 100644
--- a/apps/docs/src/composables/useTutorial.ts
+++ b/apps/docs/src/composables/useTutorial.ts
@@ -75,7 +75,6 @@ export function useTutorial (tutorialId: ComputedRef<string>, initialStep?: Comp
     skillz.finish(tutorialId.value)
   }
 
-  // ── Step preloading ──────────────────────────────────────────────────
   const stepCache = new Map<number, { md: string, files: Record<string, string>, options: StepOptions }>()
 
   async function preloadSteps () {
@@ -121,8 +120,6 @@ export function useTutorial (tutorialId: ComputedRef<string>, initialStep?: Comp
     return result
   }
 
-  // ── Step loading ─────────────────────────────────────────────────────
-
   // Files the REPL manages internally — never touch between steps or the
   // sandbox watch will fire and recreate the iframe.
   const REPL_PROTECTED = new Set(['import-map.json', 'tsconfig.json'])
diff --git a/apps/docs/src/layouts/default.vue b/apps/docs/src/layouts/default.vue
index 4522d8f98..3e47b8d60 100644
--- a/apps/docs/src/layouts/default.vue
+++ b/apps/docs/src/layouts/default.vue
@@ -5,6 +5,7 @@
   // Composables
   import { useAsk } from '@/composables/useAsk'
   import { useDiscovery } from '@/composables/useDiscovery'
+  import { useIdleCallback } from '@/composables/useIdleCallback'
   import { createLevelFilter } from '@/composables/useLevelFilter'
   import { createNavConfig } from '@/composables/useNavConfig'
   import { useSearch } from '@/composables/useSearch'
@@ -63,15 +64,10 @@
   // Prefetch editor dependencies during idle time so
   // "Open in Editor" (new tab) loads from HTTP cache
   if (IN_BROWSER) {
-    function prefetchEditor () {
+    useIdleCallback(() => {
       import('@vue/repl').catch(() => {})
       import('@vue/repl/monaco-editor').catch(() => {})
-    }
-    if (typeof requestIdleCallback === 'function') {
-      requestIdleCallback(prefetchEditor)
-    } else {
-      setTimeout(prefetchEditor, 3000)
-    }
+    })
   }
 </script>
 

From 7f5c451ae031f8fc35bf375da7116b4c16e44d45 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 19 Feb 2026 13:20:11 -0600
Subject: [PATCH 34/39] docs(playground): layout toggle, panel mode, and
 workspace fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PlaygroundWorkspace: dual layout branches — panel mode (file tree +
  editor top, preview full-width below) vs standard mode (file tree
  full-height sidebar, togglable vertical/horizontal split)
- Add vertical/horizontal layout toggle button to tab bar in standard mode
- defaultLayout prop pins layout without touching user's stored preference
- Add layout-horizontal/layout-vertical icons (mdiViewSplitVertical/Horizontal)
- PlaygroundFileTree: fix template ref name collision (tree → tree-el)
- PlaygroundBreadcrumbs: move divider style to class prop
- playground.vue: intro panel open/close watcher, panel resize handle
- router.ts: guard querySelector against invalid hash selectors (base64)
- skillz tutorial: misc fixes
---
 apps/docs/src/components.d.ts                 |   1 +
 .../playground/PlaygroundBreadcrumbs.vue      |   7 +-
 .../playground/PlaygroundFileTree.vue         |   4 +-
 .../playground/PlaygroundWorkspace.vue        | 303 ++++++++++++------
 apps/docs/src/pages/playground.vue            |  24 +-
 apps/docs/src/pages/skillz.tutorial.[id].vue  |  22 +-
 apps/docs/src/plugins/icons.ts                |   4 +
 apps/docs/src/plugins/router.ts               |  18 +-
 8 files changed, 245 insertions(+), 138 deletions(-)

diff --git a/apps/docs/src/components.d.ts b/apps/docs/src/components.d.ts
index 0a9ad32e0..cdae02af5 100644
--- a/apps/docs/src/components.d.ts
+++ b/apps/docs/src/components.d.ts
@@ -145,6 +145,7 @@ declare module 'vue' {
     PlaygroundFileTree: typeof import('./components/playground/PlaygroundFileTree.vue')['default']
     PlaygroundIntroPanel: typeof import('./components/playground/PlaygroundIntroPanel.vue')['default']
     PlaygroundMarkdownPanel: typeof import('./components/playground/PlaygroundMarkdownPanel.vue')['default']
+    PlaygroundResizeHandle: typeof import('./components/playground/PlaygroundResizeHandle.vue')['default']
     PlaygroundTabs: typeof import('./components/playground/PlaygroundTabs.vue')['default']
     PlaygroundWorkspace: typeof import('./components/playground/PlaygroundWorkspace.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/apps/docs/src/components/playground/PlaygroundBreadcrumbs.vue b/apps/docs/src/components/playground/PlaygroundBreadcrumbs.vue
index 917a0f9ce..2e3b08290 100644
--- a/apps/docs/src/components/playground/PlaygroundBreadcrumbs.vue
+++ b/apps/docs/src/components/playground/PlaygroundBreadcrumbs.vue
@@ -28,9 +28,10 @@
         v-for="(segment, i) in segments"
         :key="i"
       >
-        <Breadcrumbs.Divider v-if="i > 0">
-          <span class="text-on-surface-variant opacity-40">/</span>
-        </Breadcrumbs.Divider>
+        <Breadcrumbs.Divider
+          v-if="i > 0"
+          class="text-on-surface-variant opacity-40"
+        />
 
         <Breadcrumbs.Item :text="segment">
           <Breadcrumbs.Page
diff --git a/apps/docs/src/components/playground/PlaygroundFileTree.vue b/apps/docs/src/components/playground/PlaygroundFileTree.vue
index e9288fa9e..c2b0b8215 100644
--- a/apps/docs/src/components/playground/PlaygroundFileTree.vue
+++ b/apps/docs/src/components/playground/PlaygroundFileTree.vue
@@ -152,7 +152,7 @@
     return nodes[lastIdx]
   })
 
-  const treeEl = useTemplateRef<HTMLElement>('tree')
+  const treeEl = useTemplateRef<HTMLElement>('tree-el')
 
   function activate (id: string) {
     if (isFile(id)) {
@@ -233,7 +233,7 @@
 
 <template>
   <nav
-    ref="tree"
+    ref="tree-el"
     aria-label="File browser"
     class="border-r border-divider bg-surface overflow-y-auto shrink-0 h-100%"
   >
diff --git a/apps/docs/src/components/playground/PlaygroundWorkspace.vue b/apps/docs/src/components/playground/PlaygroundWorkspace.vue
index 6ead78242..eff41ee5b 100644
--- a/apps/docs/src/components/playground/PlaygroundWorkspace.vue
+++ b/apps/docs/src/components/playground/PlaygroundWorkspace.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
   // Framework
-  import { useStack } from '@vuetify/v0'
+  import { useStack, useStorage } from '@vuetify/v0'
 
   // Components
   import { Discovery } from '@/components/discovery'
   import PlaygroundBreadcrumbs from '@/components/playground/PlaygroundBreadcrumbs.vue'
   import PlaygroundFileTree from '@/components/playground/PlaygroundFileTree.vue'
+  import PlaygroundResizeHandle from '@/components/playground/PlaygroundResizeHandle.vue'
   import PlaygroundTabs from '@/components/playground/PlaygroundTabs.vue'
 
   // Composables
@@ -22,6 +23,7 @@
   const {
     store, replTheme, previewOptions, isDark, fileTreeKey, sidebarOpen, isDesktop,
     externalResizing = false, hideFiles = false, hideTabs = false, hideBreadcrumbs = false,
+    defaultLayout,
   } = defineProps<{
     store: ReplStore
     replTheme: 'dark' | 'light'
@@ -34,13 +36,25 @@
     hideFiles?: boolean
     hideTabs?: boolean
     hideBreadcrumbs?: boolean
+    defaultLayout?: 'vertical' | 'horizontal'
   }>()
 
   const emit = defineEmits<{
     'update:sidebarOpen': [value: boolean]
   }>()
 
-  const splitHandle = useResizeHandle({
+  // Split layout preference — user's persistent choice (standard mode only)
+  const splitLayout = useStorage().get<'vertical' | 'horizontal'>('workspace-split-layout', 'vertical')
+
+  // defaultLayout pins the layout without touching the user's stored preference
+  const isVertical = computed(() => (defaultLayout ?? splitLayout.value) === 'vertical')
+
+  function toggleSplitLayout () {
+    splitLayout.value = isVertical.value ? 'horizontal' : 'vertical'
+  }
+
+  // Vertical split: editor height %, preview fills rest
+  const vSplitHandle = useResizeHandle({
     storageKey: 'workspace-split-percent',
     defaultValue: 50,
     min: 20,
@@ -48,6 +62,17 @@
     direction: 'vertical',
   })
 
+  // Horizontal split: editor width px, preview fills rest
+  const hSplitHandle = useResizeHandle({
+    storageKey: 'workspace-split-h-px',
+    defaultValue: 500,
+    min: 200,
+    max: 1200,
+    direction: 'horizontal',
+  })
+
+  const activeSplitHandle = computed(() => isVertical.value ? vSplitHandle : hSplitHandle)
+
   const fileTreeHandle = useResizeHandle({
     storageKey: 'workspace-filetree-width',
     defaultValue: 200,
@@ -57,7 +82,7 @@
   })
 
   const anyResizing = computed(() =>
-    externalResizing || splitHandle.isResizing.value || fileTreeHandle.isResizing.value,
+    externalResizing || vSplitHandle.isResizing.value || hSplitHandle.isResizing.value || fileTreeHandle.isResizing.value,
   )
 
   const showFileTree = computed(() =>
@@ -80,7 +105,10 @@
 </script>
 
 <template>
-  <div class="flex flex-col flex-1 min-w-0 min-h-0 bg-background">
+  <div
+    class="flex flex-1 min-w-0 min-h-0 h-full bg-background"
+    :class="[defaultLayout === 'vertical' ? 'flex-col' : 'flex-row', { 'select-none': anyResizing }]"
+  >
     <!-- Mobile: file browser overlay -->
     <div
       v-if="showMobileOverlay"
@@ -106,11 +134,101 @@
       />
     </div>
 
-    <!-- Editor area -->
-    <div
-      class="flex min-h-0 min-w-0 overflow-hidden"
-      :style="isDesktop ? { height: `${splitHandle.size.value}%` } : { flex: '1' }"
-    >
+    <!-- ── PANEL LAYOUT: file tree beside editor, preview full-width below ── -->
+    <template v-if="defaultLayout === 'vertical'">
+      <!-- Top row: file tree + editor (heights by vSplitHandle) -->
+      <div
+        class="flex min-h-0 min-w-0 w-full"
+        :style="isDesktop ? { height: `${vSplitHandle.size.value}%` } : { flex: '1' }"
+      >
+        <!-- Desktop: file tree -->
+        <Discovery.Activator
+          v-if="showFileTree"
+          active-class="rounded-lg"
+          as="div"
+          class="shrink-0"
+          step="file-tree"
+          :style="{ width: `${fileTreeHandle.size.value}px` }"
+        >
+          <PlaygroundFileTree
+            :key="fileTreeKey"
+            :store="store"
+          />
+        </Discovery.Activator>
+
+        <!-- File tree ↔ Editor handle -->
+        <PlaygroundResizeHandle
+          v-if="showFileTree"
+          direction="col"
+          :is-resizing="fileTreeHandle.isResizing.value"
+          @dblclick="fileTreeHandle.reset()"
+          @pointerdown="fileTreeHandle.onPointerDown"
+        />
+
+        <!-- Tabs + Editor -->
+        <div class="flex flex-col flex-1 min-w-0 min-h-0">
+          <div v-if="!hideTabs" class="flex items-stretch">
+            <PlaygroundTabs class="flex-1 min-w-0" :store="store" />
+          </div>
+
+          <PlaygroundBreadcrumbs v-if="!hideBreadcrumbs" :store="store" />
+
+          <Discovery.Activator
+            active-class="rounded-lg"
+            as="div"
+            class="workspace-repl-wrapper flex flex-col flex-1 min-h-0 min-w-0 editor-repl"
+            :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
+            step="editor"
+          >
+            <Repl
+              :auto-resize="true"
+              class="flex-1 min-h-0"
+              :clear-console="true"
+              :editor="Monaco"
+              :editor-options="{ monacoOptions: { padding: { top: 16 } } }"
+              layout="horizontal"
+              :preview-options="previewOptions"
+              :show-compile-output="false"
+              :show-import-map="false"
+              :show-ts-config="false"
+              :store="store"
+              :theme="replTheme"
+            />
+          </Discovery.Activator>
+        </div>
+      </div>
+
+      <!-- Top ↔ Preview drag handle (full width) -->
+      <PlaygroundResizeHandle
+        v-if="isDesktop"
+        direction="row"
+        :is-resizing="vSplitHandle.isResizing.value"
+        @dblclick="vSplitHandle.reset()"
+        @pointerdown="vSplitHandle.onPointerDown"
+      />
+
+      <!-- Preview: full width of workspace -->
+      <Discovery.Activator
+        active-class="rounded-lg"
+        as="div"
+        class="workspace-preview flex-1 min-w-0 min-h-0 editor-repl overflow-hidden"
+        :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
+        step="preview"
+      >
+        <Sandbox
+          :auto-store-init="false"
+          :clear-console="false"
+          :preview-options="previewOptions"
+          :show="true"
+          :store="store"
+          :theme="replTheme"
+        />
+      </Discovery.Activator>
+    </template>
+
+    <!-- ── STANDARD LAYOUT: file tree full-height sidebar, toggle split ─── -->
+    <template v-else>
+      <!-- Desktop: file tree sidebar (full height) -->
       <Discovery.Activator
         v-if="showFileTree"
         active-class="rounded-lg"
@@ -125,98 +243,103 @@
         />
       </Discovery.Activator>
 
-      <!-- File tree ↔ Editor handle -->
-      <div
+      <!-- File tree ↔ Content handle -->
+      <PlaygroundResizeHandle
         v-if="showFileTree"
-        class="workspace-resize-handle workspace-resize-handle--col"
-        :class="{ 'workspace-resize-handle--active': fileTreeHandle.isResizing.value }"
+        direction="col"
+        :is-resizing="fileTreeHandle.isResizing.value"
         @dblclick="fileTreeHandle.reset()"
         @pointerdown="fileTreeHandle.onPointerDown"
       />
 
-      <Discovery.Activator
-        active-class="rounded-lg"
-        as="div"
-        class="workspace-repl-wrapper flex flex-col flex-1 min-w-0 editor-repl"
-        :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
-        step="editor"
-      >
-        <PlaygroundTabs v-if="!hideTabs" :store="store" />
-        <PlaygroundBreadcrumbs v-if="!hideBreadcrumbs" :store="store" />
+      <!-- Main content: tabs + editor/preview split -->
+      <div class="flex flex-col flex-1 min-w-0 min-h-0">
+        <!-- Tabs row with layout toggle -->
+        <div v-if="!hideTabs" class="flex items-stretch">
+          <PlaygroundTabs class="flex-1 min-w-0" :store="store" />
+
+          <button
+            class="shrink-0 flex items-center justify-center w-9 border-b border-l border-divider bg-surface-variant/30 hover:bg-surface-tint transition-colors"
+            :title="isVertical ? 'Switch to side-by-side layout' : 'Switch to stacked layout'"
+            @click="toggleSplitLayout"
+          >
+            <AppIcon :icon="isVertical ? 'layout-horizontal' : 'layout-vertical'" :size="16" />
+          </button>
+        </div>
 
-        <Repl
-          :auto-resize="true"
-          class="flex-1 min-h-0"
-          :clear-console="true"
-          :editor="Monaco"
-          :editor-options="{ monacoOptions: { padding: { top: 16 } } }"
-          layout="horizontal"
-          :preview-options="previewOptions"
-          :show-compile-output="false"
-          :show-import-map="false"
-          :show-ts-config="false"
-          :store="store"
-          :theme="replTheme"
-        />
-      </Discovery.Activator>
-    </div>
+        <PlaygroundBreadcrumbs v-if="!hideBreadcrumbs" :store="store" />
 
-    <!-- Editor ↔ Preview handle -->
-    <div
-      v-if="isDesktop"
-      class="workspace-resize-handle workspace-resize-handle--row"
-      :class="{ 'workspace-resize-handle--active': splitHandle.isResizing.value }"
-      @dblclick="splitHandle.reset()"
-      @pointerdown="splitHandle.onPointerDown"
-    />
-
-    <!-- Preview area -->
-    <Discovery.Activator
-      active-class="rounded-lg"
-      as="div"
-      class="workspace-preview flex-1 min-w-0 min-h-0 editor-repl overflow-hidden"
-      :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
-      step="preview"
-    >
-      <!-- auto-store-init=false: Repl already calls store.init(); a second call
-           from standalone Sandbox would create duplicate watchers (double compilation,
-           double builtinImportMap watches). See patches/@vue__repl@4.7.1.patch. -->
-      <Sandbox
-        :auto-store-init="false"
-        :clear-console="false"
-        :preview-options="previewOptions"
-        :show="true"
-        :store="store"
-        :theme="replTheme"
-      />
-    </Discovery.Activator>
+        <!-- Editor + Preview split area -->
+        <div
+          class="flex flex-1 min-h-0 min-w-0 overflow-hidden"
+          :class="isVertical ? 'flex-col' : 'flex-row'"
+        >
+          <!-- Editor -->
+          <Discovery.Activator
+            active-class="rounded-lg"
+            as="div"
+            class="workspace-repl-wrapper flex flex-col min-h-0 min-w-0 editor-repl"
+            :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
+            step="editor"
+            :style="isDesktop
+              ? (isVertical
+                ? { height: `${vSplitHandle.size.value}%` }
+                : { width: `${hSplitHandle.size.value}px` })
+              : { flex: '1' }"
+          >
+            <Repl
+              :auto-resize="true"
+              class="flex-1 min-h-0"
+              :clear-console="true"
+              :editor="Monaco"
+              :editor-options="{ monacoOptions: { padding: { top: 16 } } }"
+              layout="horizontal"
+              :preview-options="previewOptions"
+              :show-compile-output="false"
+              :show-import-map="false"
+              :show-ts-config="false"
+              :store="store"
+              :theme="replTheme"
+            />
+          </Discovery.Activator>
+
+          <!-- Editor ↔ Preview handle -->
+          <PlaygroundResizeHandle
+            v-if="isDesktop"
+            :direction="isVertical ? 'row' : 'col'"
+            :is-resizing="activeSplitHandle.isResizing.value"
+            @dblclick="activeSplitHandle.reset()"
+            @pointerdown="activeSplitHandle.onPointerDown"
+          />
+
+          <!-- Preview -->
+          <Discovery.Activator
+            active-class="rounded-lg"
+            as="div"
+            class="workspace-preview flex-1 min-w-0 min-h-0 editor-repl overflow-hidden"
+            :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
+            step="preview"
+          >
+            <!-- auto-store-init=false: Repl already calls store.init(); a second call
+                 from standalone Sandbox would create duplicate watchers (double compilation,
+                 double builtinImportMap watches). See patches/@vue__repl@4.7.1.patch. -->
+            <Sandbox
+              :auto-store-init="false"
+              :clear-console="false"
+              :preview-options="previewOptions"
+              :show="true"
+              :store="store"
+              :theme="replTheme"
+            />
+          </Discovery.Activator>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
 <style scoped>
-  /* Resize handles */
-  .workspace-resize-handle {
-    flex-shrink: 0;
-    background: transparent;
-    transition: background 0.15s;
-  }
-
-  .workspace-resize-handle:hover,
-  .workspace-resize-handle--active {
-    background: var(--v0-primary);
-  }
-
-  .workspace-resize-handle--col {
-    width: 4px;
-    cursor: col-resize;
-  }
-
-  .workspace-resize-handle--row {
-    height: 4px;
-    cursor: row-resize;
-  }
-
-  /* REPL theme variables */
+/* REPL theme variables */
   .editor-repl :deep(.vue-repl) {
     --header-height: 0px;
     --color-branding: var(--v0-primary);
diff --git a/apps/docs/src/pages/playground.vue b/apps/docs/src/pages/playground.vue
index 0121b3b2c..f83e77554 100644
--- a/apps/docs/src/pages/playground.vue
+++ b/apps/docs/src/pages/playground.vue
@@ -9,6 +9,7 @@
   import { Discovery } from '@/components/discovery'
   import PlaygroundExamples from '@/components/playground/PlaygroundExamples.vue'
   import PlaygroundIntroPanel from '@/components/playground/PlaygroundIntroPanel.vue'
+  import PlaygroundResizeHandle from '@/components/playground/PlaygroundResizeHandle.vue'
   import PlaygroundWorkspace from '@/components/playground/PlaygroundWorkspace.vue'
 
   // Composables
@@ -205,9 +206,9 @@
             <PlaygroundIntroPanel @close="pg.panel.close()" />
           </Discovery.Activator>
 
-          <div
-            class="playground-resize-handle"
-            :class="{ 'playground-resize-handle--active': panelHandle.isResizing.value }"
+          <PlaygroundResizeHandle
+            direction="col"
+            :is-resizing="panelHandle.isResizing.value"
             @dblclick="panelHandle.reset()"
             @pointerdown="panelHandle.onPointerDown"
           />
@@ -215,6 +216,7 @@
           <PlaygroundWorkspace
             :external-resizing="panelHandle.isResizing.value"
             :file-tree-key="fileTreeKey"
+            default-layout="vertical"
             :is-dark="isDark"
             :is-desktop="isDesktop"
             :preview-options="previewOptions"
@@ -243,21 +245,7 @@
 </template>
 
 <style scoped>
-  /* Panel → workspace resize handle */
-  .playground-resize-handle {
-    width: 4px;
-    cursor: col-resize;
-    background: transparent;
-    transition: background 0.15s;
-    flex-shrink: 0;
-  }
-
-  .playground-resize-handle:hover,
-  .playground-resize-handle--active {
-    background: var(--v0-primary);
-  }
-
-  /* Fade on mount */
+/* Fade on mount */
   .fade-enter-active,
   .fade-leave-active {
     transition: opacity 0.2s;
diff --git a/apps/docs/src/pages/skillz.tutorial.[id].vue b/apps/docs/src/pages/skillz.tutorial.[id].vue
index a2299e088..43aabac90 100644
--- a/apps/docs/src/pages/skillz.tutorial.[id].vue
+++ b/apps/docs/src/pages/skillz.tutorial.[id].vue
@@ -8,6 +8,7 @@
   // Components
   import { Discovery } from '@/components/discovery'
   import PlaygroundMarkdownPanel from '@/components/playground/PlaygroundMarkdownPanel.vue'
+  import PlaygroundResizeHandle from '@/components/playground/PlaygroundResizeHandle.vue'
   import PlaygroundWorkspace from '@/components/playground/PlaygroundWorkspace.vue'
   import SkillzComplete from '@/components/skillz/SkillzComplete.vue'
 
@@ -180,10 +181,10 @@
       </Discovery.Activator>
 
       <!-- Markdown ↔ Right column handle -->
-      <div
+      <PlaygroundResizeHandle
         v-if="isDesktop"
-        class="tutorial-resize-handle"
-        :class="{ 'tutorial-resize-handle--active': markdownHandle.isResizing.value }"
+        direction="col"
+        :is-resizing="markdownHandle.isResizing.value"
         @dblclick="markdownHandle.reset()"
         @pointerdown="markdownHandle.onPointerDown"
       />
@@ -221,18 +222,3 @@
   </div>
 </template>
 
-<style scoped>
-  /* Markdown ↔ right column resize handle */
-  .tutorial-resize-handle {
-    flex-shrink: 0;
-    background: transparent;
-    transition: background 0.15s;
-    width: 4px;
-    cursor: col-resize;
-  }
-
-  .tutorial-resize-handle:hover,
-  .tutorial-resize-handle--active {
-    background: var(--v0-primary);
-  }
-</style>
diff --git a/apps/docs/src/plugins/icons.ts b/apps/docs/src/plugins/icons.ts
index 37f7acd65..79fab3804 100644
--- a/apps/docs/src/plugins/icons.ts
+++ b/apps/docs/src/plugins/icons.ts
@@ -39,6 +39,8 @@ import {
   mdiLanguageCss3,
   mdiLanguageJavascript,
   mdiDownload,
+  mdiDragHorizontal,
+  mdiDragVertical,
   mdiEye,
   mdiEyeOffOutline,
   mdiFire,
@@ -200,6 +202,8 @@ export const [useIconContext, provideIconContext, context] = createTokensContext
     'map': mdiMap,
     'telescope': mdiTelescope,
     'download': mdiDownload,
+    'drag-horizontal': mdiDragHorizontal,
+    'drag-vertical': mdiDragVertical,
     'file-plus': mdiFilePlusOutline,
     'folder-plus': mdiFolderPlusOutline,
     'lang-vue': mdiVuejs,
diff --git a/apps/docs/src/plugins/router.ts b/apps/docs/src/plugins/router.ts
index 9a1cf74e8..6a0ae9acb 100644
--- a/apps/docs/src/plugins/router.ts
+++ b/apps/docs/src/plugins/router.ts
@@ -27,14 +27,18 @@ const routerOptions: Omit<RouterOptions, 'history'> = {
     if (to.hash) {
       return new Promise(resolve => {
         setTimeout(() => {
-          const el = document.querySelector(to.hash)
-          if (el) {
-            const top = el.getBoundingClientRect().top + window.scrollY - 80
-            const behavior = getPrefersReducedMotion() ? 'auto' : 'smooth'
-            resolve({ top, behavior })
-          } else {
-            resolve({ top: 0 })
+          try {
+            const el = document.querySelector(to.hash)
+            if (el) {
+              const top = el.getBoundingClientRect().top + window.scrollY - 80
+              const behavior = getPrefersReducedMotion() ? 'auto' : 'smooth'
+              resolve({ top, behavior })
+              return
+            }
+          } catch {
+            // Hash is not a valid CSS selector (e.g. base64 store state)
           }
+          resolve({ top: 0 })
         }, 100)
       })
     }

From feed90f2064e8d5d518ca6d630e1da77a14f7692 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 19 Feb 2026 13:25:17 -0600
Subject: [PATCH 35/39] =?UTF-8?q?docs(playground):=20fix=20stale=20tour=20?=
 =?UTF-8?q?references=20after=20editor=E2=86=92playground=20rename?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/playground/PlaygroundIntroPanel.md     | 2 +-
 .../skillz/tours/beginner/using-the-playground/index.json | 8 ++++----
 .../skillz/tours/beginner/using-the-playground/index.ts   | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/docs/src/components/playground/PlaygroundIntroPanel.md b/apps/docs/src/components/playground/PlaygroundIntroPanel.md
index 9bc5fef51..8bd417afe 100644
--- a/apps/docs/src/components/playground/PlaygroundIntroPanel.md
+++ b/apps/docs/src/components/playground/PlaygroundIntroPanel.md
@@ -27,7 +27,7 @@ The editor ships a complete single-file component setup. Your `App.vue` runs ins
 
 Open the **examples** menu in the toolbar and load any demo — you'll get a complete, working project with files, imports, and a live preview that updates as you type. Or skip that entirely: open `App.vue` in the editor and start writing a component from scratch. The preview hot-reloads on every keystroke, so you'll see the result before you finish the thought. Either way, you're writing real Vue 3 code against the full v0 API — no stubs, no simulations.
 
-> [!TOUR] using-the-editor
+> [!TOUR] using-the-playground
 
 ## Tips
 
diff --git a/apps/docs/src/skillz/tours/beginner/using-the-playground/index.json b/apps/docs/src/skillz/tours/beginner/using-the-playground/index.json
index 7d462b0e2..6dc04d31f 100644
--- a/apps/docs/src/skillz/tours/beginner/using-the-playground/index.json
+++ b/apps/docs/src/skillz/tours/beginner/using-the-playground/index.json
@@ -30,7 +30,7 @@
     {
       "id": "intro-panel",
       "title": "Getting Started",
-      "task": "The intro panel gives you an overview of the editor's features and links to tutorials.",
+      "task": "The intro panel gives you an overview of the playground's features and links to tutorials.",
       "hint": "",
       "learn": "Use the intro panel for orientation",
       "placement": "right"
@@ -53,9 +53,9 @@
       "skipOnMobile": true
     },
     {
-      "id": "playground",
-      "title": "Code Playground",
-      "task": "Write your code on the left. The preview on the right updates instantly as you type.",
+      "id": "editor",
+      "title": "Code Editor",
+      "task": "Write your code here. The preview updates instantly as you type.",
       "hint": "",
       "learn": "Write code and see it run live",
       "placement": "left"
diff --git a/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts b/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts
index 7bd817980..8945af829 100644
--- a/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts
+++ b/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts
@@ -46,7 +46,7 @@ export function defineTour ({ playground }: TourContext) {
           playground.sidebar.open()
         },
       },
-      'playground': {
+      'editor': {
         enter: () => playground.examples.close(),
       },
       'complete': {

From 2c8f87ada4a5936365033f6005a003bb66830e39 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 19 Feb 2026 13:29:22 -0600
Subject: [PATCH 36/39] docs(playground): use Pinia store directly in tour
 instead of injected context

---
 .../beginner/using-the-playground/index.ts     | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts b/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts
index 8945af829..b83606626 100644
--- a/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts
+++ b/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts
@@ -1,21 +1,13 @@
-// Types
-import type { PlaygroundControl } from '@/stores/playground'
-
-interface PlaygroundContext {
-  panel: PlaygroundControl
-  sidebar: PlaygroundControl
-  examples: PlaygroundControl
-}
-
-interface TourContext {
-  playground: PlaygroundContext
-}
+// Stores
+import { usePlaygroundStore } from '@/stores/playground'
 
 /**
  * Tour definition for "Using the Playground".
  * Opens and closes playground panels so users see each feature in context.
  */
-export function defineTour ({ playground }: TourContext) {
+export function defineTour () {
+  const playground = usePlaygroundStore()
+
   return {
     handlers: {
       'welcome': {

From 4da44d8f98f46e7d2a2fc7dc2f47202410b4193f Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 19 Feb 2026 18:58:10 -0600
Subject: [PATCH 37/39] docs(playground): mobile support, tour fixes, and
 resize UX polish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add mobile editor/preview toggle (Code/Preview buttons) with mobileView state
- Mobile intro panel via Teleport + useStack overlay with proper z-index
- File panel starts closed on mobile (immediate watcher on isDesktop)
- Fix tour step order: sidebar-toggle → file-tree → editor → preview → panel/examples
- Add welcome preamble steps to all four beginner tours
- Force center placement for first and last tour steps (DiscoveryContent)
- Delay resume popup 3s to avoid immediate flash
- Remove discovery watches that prevented panel closing on welcome step
- Reset button hidden unless devmode is active (skillz/[id])
- Hide Duration/Reset on mobile; Next button truncates gracefully
- Add padding to skill title when completed medal is shown
- Global grabbing cursor during resize (useResizeHandle)
- Clean up abandoned UnoCSS runtime style elements on recompile
---
 .../components/discovery/DiscoveryContent.vue |   4 +-
 .../playground/PlaygroundResizeHandle.vue     |  41 +++++++
 .../playground/PlaygroundWorkspace.vue        |  31 ++++-
 .../src/components/skillz/SkillzResume.vue    |   9 +-
 apps/docs/src/composables/useResizeHandle.ts  |   2 +
 apps/docs/src/data/playground-defaults.ts     |   5 +
 apps/docs/src/pages/playground.vue            | 114 ++++++++++--------
 apps/docs/src/pages/skillz.[id].vue           |  28 +++--
 apps/docs/src/pages/skillz.tutorial.[id].vue  |   1 -
 .../navigating-by-keyboard/index.json         |   8 ++
 .../tours/beginner/using-search/index.json    |   8 ++
 .../tours/beginner/using-the-docs/index.json  |   8 ++
 .../beginner/using-the-playground/index.json  |  58 ++++++---
 .../beginner/using-the-playground/index.ts    |  32 +++--
 apps/docs/src/stores/playground.ts            |   2 +-
 15 files changed, 253 insertions(+), 98 deletions(-)
 create mode 100644 apps/docs/src/components/playground/PlaygroundResizeHandle.vue

diff --git a/apps/docs/src/components/discovery/DiscoveryContent.vue b/apps/docs/src/components/discovery/DiscoveryContent.vue
index 4ee6e1e43..0a2bb3ea2 100644
--- a/apps/docs/src/components/discovery/DiscoveryContent.vue
+++ b/apps/docs/src/components/discovery/DiscoveryContent.vue
@@ -31,8 +31,8 @@
 
   const breakpoints = useBreakpoints()
   const activePlacement = toRef(() => {
-    // Last step always uses center placement
-    if (discovery.isLast.value) return 'center'
+    // First and last steps always use center placement
+    if (discovery.isFirst.value || discovery.isLast.value) return 'center'
     if (!isNullOrUndefined(placementMobile) && breakpoints.smAndDown.value) return placementMobile
     return placement
   })
diff --git a/apps/docs/src/components/playground/PlaygroundResizeHandle.vue b/apps/docs/src/components/playground/PlaygroundResizeHandle.vue
new file mode 100644
index 000000000..0b267f9c0
--- /dev/null
+++ b/apps/docs/src/components/playground/PlaygroundResizeHandle.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// Utilities
+  import { computed } from 'vue'
+
+  const { direction, isResizing = false } = defineProps<{
+    direction: 'col' | 'row'
+    isResizing?: boolean
+  }>()
+
+  const emit = defineEmits<{
+    pointerdown: [event: PointerEvent]
+    dblclick: []
+  }>()
+
+  const classes = computed(() => ({
+    'w-[4px]': direction === 'col',
+    'cursor-col-resize': direction === 'col' && !isResizing,
+    'h-[4px]': direction === 'row',
+    'cursor-row-resize': direction === 'row' && !isResizing,
+    'bg-primary cursor-grabbing': isResizing,
+  }))
+</script>
+
+<template>
+  <div
+    class="bg-divider relative z-10 hover:bg-primary transition-colors"
+    :class="classes"
+    @dblclick="emit('dblclick')"
+    @pointerdown="emit('pointerdown', $event)"
+  >
+    <span
+      class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 rounded inline-flex items-center justify-center bg-surface text-on-surface border border-divider"
+      :class="direction === 'col' ? 'w-4 h-6' : 'w-6 h-4'"
+    >
+      <AppIcon
+        :icon="direction === 'col' ? 'drag-vertical' : 'drag-horizontal'"
+        :size="16"
+      />
+    </span>
+  </div>
+</template>
diff --git a/apps/docs/src/components/playground/PlaygroundWorkspace.vue b/apps/docs/src/components/playground/PlaygroundWorkspace.vue
index eff41ee5b..f94d2449b 100644
--- a/apps/docs/src/components/playground/PlaygroundWorkspace.vue
+++ b/apps/docs/src/components/playground/PlaygroundWorkspace.vue
@@ -15,7 +15,7 @@
   // Utilities
   import { Repl, Sandbox } from '@vue/repl'
   import Monaco from '@vue/repl/monaco-editor'
-  import { computed, watch } from 'vue'
+  import { computed, shallowRef, watch } from 'vue'
 
   // Types
   import type { ReplStore } from '@vue/repl'
@@ -43,6 +43,9 @@
     'update:sidebarOpen': [value: boolean]
   }>()
 
+  // Mobile: which pane is visible (editor or preview)
+  const mobileView = shallowRef<'editor' | 'preview'>('editor')
+
   // Split layout preference — user's persistent choice (standard mode only)
   const splitLayout = useStorage().get<'vertical' | 'horizontal'>('workspace-split-layout', 'vertical')
 
@@ -101,7 +104,7 @@
   watch(showMobileOverlay, open => {
     if (open) ticket.select()
     else ticket.unselect()
-  })
+  }, { immediate: true })
 </script>
 
 <template>
@@ -254,11 +257,29 @@
 
       <!-- Main content: tabs + editor/preview split -->
       <div class="flex flex-col flex-1 min-w-0 min-h-0">
-        <!-- Tabs row with layout toggle -->
+        <!-- Tabs row with layout toggle (desktop) or code/preview toggle (mobile) -->
         <div v-if="!hideTabs" class="flex items-stretch">
           <PlaygroundTabs class="flex-1 min-w-0" :store="store" />
 
+          <template v-if="!isDesktop">
+            <button
+              class="px-3 text-xs font-medium border-b border-l border-divider transition-colors"
+              :class="mobileView === 'editor' ? 'bg-surface-tint text-on-surface' : 'bg-surface-variant/30 text-on-surface-variant'"
+              @click="mobileView = 'editor'"
+            >
+              Code
+            </button>
+            <button
+              class="px-3 text-xs font-medium border-b border-l border-divider transition-colors"
+              :class="mobileView === 'preview' ? 'bg-surface-tint text-on-surface' : 'bg-surface-variant/30 text-on-surface-variant'"
+              @click="mobileView = 'preview'"
+            >
+              Preview
+            </button>
+          </template>
+
           <button
+            v-else
             class="shrink-0 flex items-center justify-center w-9 border-b border-l border-divider bg-surface-variant/30 hover:bg-surface-tint transition-colors"
             :title="isVertical ? 'Switch to side-by-side layout' : 'Switch to stacked layout'"
             @click="toggleSplitLayout"
@@ -276,6 +297,7 @@
         >
           <!-- Editor -->
           <Discovery.Activator
+            v-show="isDesktop || mobileView === 'editor'"
             active-class="rounded-lg"
             as="div"
             class="workspace-repl-wrapper flex flex-col min-h-0 min-w-0 editor-repl"
@@ -314,6 +336,7 @@
 
           <!-- Preview -->
           <Discovery.Activator
+            v-show="isDesktop || mobileView === 'preview'"
             active-class="rounded-lg"
             as="div"
             class="workspace-preview flex-1 min-w-0 min-h-0 editor-repl overflow-hidden"
@@ -358,7 +381,7 @@
     display: none !important;
   }
 
-  /* Hide editor floating toggles */
+  /* Hide editor floating toggles — we render Sandbox separately */
   .editor-repl :deep(.editor-floating) {
     display: none !important;
   }
diff --git a/apps/docs/src/components/skillz/SkillzResume.vue b/apps/docs/src/components/skillz/SkillzResume.vue
index 7e50cc1c1..3f44bd330 100644
--- a/apps/docs/src/components/skillz/SkillzResume.vue
+++ b/apps/docs/src/components/skillz/SkillzResume.vue
@@ -9,7 +9,7 @@
   import { useSettings } from '@/composables/useSettings'
 
   // Utilities
-  import { computed, toRef } from 'vue'
+  import { computed, onMounted, shallowRef, toRef } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
 
   // Stores
@@ -21,6 +21,11 @@
   const route = useRoute()
   const router = useRouter()
 
+  const isVisible = shallowRef(false)
+  onMounted(() => setTimeout(() => {
+    isVisible.value = true
+  }, 3000))
+
   const isSkillzPage = toRef(() => route.path.startsWith('/skillz/'))
   const ask = useAsk()
   const breakpoints = useBreakpoints()
@@ -86,7 +91,7 @@
   <Teleport to="body">
     <Transition name="slide-up">
       <div
-        v-if="store.pendingTour && !isSkillzPage"
+        v-if="isVisible && store.pendingTour && !isSkillzPage"
         class="fixed top-14 inset-x-0 mx-auto z-50 w-[300px] bg-surface border border-divider rounded-xl shadow-xl overflow-hidden"
       >
         <AppDotGrid :coverage="50" :density="14" origin="bottom left" />
diff --git a/apps/docs/src/composables/useResizeHandle.ts b/apps/docs/src/composables/useResizeHandle.ts
index 0419786a7..e94a0a11a 100644
--- a/apps/docs/src/composables/useResizeHandle.ts
+++ b/apps/docs/src/composables/useResizeHandle.ts
@@ -34,6 +34,7 @@ export function useResizeHandle (options: UseResizeHandleOptions): UseResizeHand
     if (options.direction === 'vertical') {
       containerSize.value = (e.target as HTMLElement).parentElement?.offsetHeight ?? 1
     }
+    document.documentElement.style.cursor = 'grabbing'
     isResizing.value = true
   }
 
@@ -55,6 +56,7 @@ export function useResizeHandle (options: UseResizeHandleOptions): UseResizeHand
       if (rafId) cancelAnimationFrame(rafId)
       rafId = 0
       stored.value = size.value
+      document.documentElement.style.cursor = ''
       isResizing.value = false
     })
   })
diff --git a/apps/docs/src/data/playground-defaults.ts b/apps/docs/src/data/playground-defaults.ts
index d3bd9554a..0ac1e3ba3 100644
--- a/apps/docs/src/data/playground-defaults.ts
+++ b/apps/docs/src/data/playground-defaults.ts
@@ -92,6 +92,11 @@ import defineConfig from 'https://esm.sh/@unocss/runtime'
 // @ts-expect-error - esm.sh import
 import presetWind4 from 'https://esm.sh/@unocss/preset-wind4'
 
+// Each recompile creates a fresh module instance with an empty internal style Map,
+// so the previous runtime's <style> elements are abandoned in the DOM. Remove them
+// before the new instance installs itself to prevent unbounded CSS rule accumulation.
+document.querySelectorAll('[data-unocss-runtime-layer]').forEach(el => el.remove())
+
 defineConfig({
   defaults: {
     presets: [presetWind4()],
diff --git a/apps/docs/src/pages/playground.vue b/apps/docs/src/pages/playground.vue
index f83e77554..25d91a91f 100644
--- a/apps/docs/src/pages/playground.vue
+++ b/apps/docs/src/pages/playground.vue
@@ -3,7 +3,7 @@
   import { definePage } from 'unplugin-vue-router/runtime'
 
   // Framework
-  import { useClickOutside, useHotkey, useTheme, useToggleScope } from '@vuetify/v0'
+  import { useClickOutside, useHotkey, useStack, useTheme, useToggleScope } from '@vuetify/v0'
 
   // Components
   import { Discovery } from '@/components/discovery'
@@ -13,13 +13,11 @@
   import PlaygroundWorkspace from '@/components/playground/PlaygroundWorkspace.vue'
 
   // Composables
-  import { useDiscovery } from '@/composables/useDiscovery'
   import { usePlaygroundFiles } from '@/composables/usePlaygroundFiles'
   import { usePlaygroundRepl } from '@/composables/usePlaygroundStore'
   import { useResizeHandle } from '@/composables/useResizeHandle'
 
   // Utilities
-  import { storeToRefs } from 'pinia'
   import '@vue/repl/style.css'
   import { computed, useTemplateRef, watch } from 'vue'
   import { useRouter } from 'vue-router'
@@ -57,39 +55,37 @@
 
   // ── Playground UI state ────────────────────────────────────────────────
   const pg = usePlaygroundStore()
-  const { sidebarOpen, panelOpen, showExamples, isPanelMode, isDesktop } = storeToRefs(pg)
 
   useHotkey('ctrl+b', () => pg.sidebar.toggle(), { inputs: true })
 
   const examplesContainer = useTemplateRef<HTMLElement>('examplesContainer')
   const examplesButton = useTemplateRef<HTMLButtonElement>('examplesButton')
 
-  useToggleScope(() => showExamples.value, () => {
+  useToggleScope(() => pg.showExamples, () => {
     useClickOutside(examplesContainer, () => {
-      showExamples.value = false
+      pg.showExamples = false
       examplesButton.value?.focus()
     })
     useHotkey('escape', () => {
-      showExamples.value = false
+      pg.showExamples = false
       examplesButton.value?.focus()
     })
   })
 
   async function loadExample (files: Record<string, string>) {
-    showExamples.value = false
+    pg.showExamples = false
     await _loadExample(files)
   }
 
   // ── Intro panel ───────────────────────────────────────────────────────
-  const discovery = useDiscovery()
-
-  // Open panel when a tour becomes active or reaches the intro-panel step
-  watch(discovery.isActive, active => {
-    if (active) pg.panel.open()
-  })
-  watch(discovery.selectedId, id => {
-    if (id === 'intro-panel') pg.panel.open()
+  const stack = useStack()
+  const introPanelTicket = stack.register({
+    onDismiss: () => pg.panel.close(),
   })
+  watch(() => !pg.isDesktop && pg.panelOpen, open => {
+    if (open) introPanelTicket.select()
+    else introPanelTicket.unselect()
+  }, { immediate: true })
 
   // ── Panel resize (panel mode) ─────────────────────────────────────────
   const panelHandle = useResizeHandle({
@@ -127,10 +123,10 @@
       <div class="flex items-center gap-2">
         <Discovery.Activator as="span" class="inline-flex rounded" step="panel-toggle">
           <button
-            :aria-expanded="panelOpen"
-            :aria-label="panelOpen ? 'Close intro panel' : 'Open intro panel'"
+            :aria-expanded="pg.panelOpen"
+            :aria-label="pg.panelOpen ? 'Close intro panel' : 'Open intro panel'"
             class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
-            :title="panelOpen ? 'Close intro panel' : 'Open intro panel'"
+            :title="pg.panelOpen ? 'Close intro panel' : 'Open intro panel'"
             @click="pg.panel.toggle()"
           >
             <AppIcon icon="info" :size="18" />
@@ -141,7 +137,7 @@
           <div ref="examplesContainer">
             <button
               ref="examplesButton"
-              :aria-expanded="showExamples"
+              :aria-expanded="pg.showExamples"
               aria-haspopup="listbox"
               aria-label="Load example"
               class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
@@ -151,48 +147,63 @@
               <AppIcon icon="examples" :size="18" />
             </button>
 
-            <div
-              v-if="showExamples"
+            <Discovery.Activator
+              v-if="pg.showExamples"
               aria-label="Examples"
+              as="div"
               class="absolute top-full right-0 mt-1 w-[280px] bg-surface border border-divider rounded-lg shadow-lg z-50"
               role="listbox"
+              step="examples-menu"
             >
               <PlaygroundExamples @select="loadExample" />
-            </div>
+            </Discovery.Activator>
           </div>
         </Discovery.Activator>
 
-        <button
-          v-if="!isDesktop"
-          :aria-expanded="sidebarOpen"
-          :aria-label="sidebarOpen ? 'Close file browser' : 'Open file browser'"
-          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
-          title="Toggle files"
-          @click="pg.sidebar.toggle()"
-        >
-          <AppIcon icon="folder" :size="18" />
-        </button>
-
-        <button
-          v-if="isDesktop"
-          :aria-expanded="sidebarOpen"
-          :aria-label="sidebarOpen ? 'Close sidebar' : 'Open sidebar'"
-          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
-          title="Toggle sidebar"
-          @click="pg.sidebar.toggle()"
-        >
-          <AppIcon icon="menu" :size="18" />
-        </button>
+        <Discovery.Activator v-if="!pg.isDesktop" as="span" class="inline-flex rounded" step="sidebar-toggle">
+          <button
+            :aria-expanded="pg.sidebarOpen"
+            :aria-label="pg.sidebarOpen ? 'Close file browser' : 'Open file browser'"
+            class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+            title="Toggle files"
+            @click="pg.sidebar.toggle()"
+          >
+            <AppIcon icon="folder" :size="18" />
+          </button>
+        </Discovery.Activator>
+
+        <Discovery.Activator v-if="pg.isDesktop" as="span" class="inline-flex rounded" step="sidebar-toggle">
+          <button
+            :aria-expanded="pg.sidebarOpen"
+            :aria-label="pg.sidebarOpen ? 'Close sidebar' : 'Open sidebar'"
+            class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+            title="Toggle sidebar"
+            @click="pg.sidebar.toggle()"
+          >
+            <AppIcon icon="menu" :size="18" />
+          </button>
+        </Discovery.Activator>
 
         <AppThemeToggle />
       </div>
     </header>
 
+    <!-- Mobile: intro panel overlay (stack managed, covers workspace below header) -->
+    <Teleport to="body">
+      <div
+        v-if="!pg.isDesktop && pg.panelOpen"
+        class="fixed left-0 right-0 bottom-0 bg-surface"
+        :style="{ top: '48px', zIndex: introPanelTicket.zIndex.value }"
+      >
+        <PlaygroundIntroPanel @close="pg.panel.close()" />
+      </div>
+    </Teleport>
+
     <Transition name="fade">
       <div v-if="isReady" class="flex-1 min-h-0 overflow-hidden">
         <!-- Panel mode: intro panel + workspace (tutorial-style split) -->
         <div
-          v-if="isPanelMode"
+          v-if="pg.isPanelMode"
           class="flex h-full"
           :class="{ 'select-none': panelHandle.isResizing.value }"
         >
@@ -214,16 +225,15 @@
           />
 
           <PlaygroundWorkspace
+            default-layout="vertical"
             :external-resizing="panelHandle.isResizing.value"
             :file-tree-key="fileTreeKey"
-            default-layout="vertical"
             :is-dark="isDark"
-            :is-desktop="isDesktop"
+            :is-desktop="pg.isDesktop"
             :preview-options="previewOptions"
             :repl-theme="replTheme"
-            :sidebar-open="sidebarOpen"
+            :sidebar-open="pg.sidebarOpen"
             :store="store"
-            @update:sidebar-open="v => sidebarOpen.value = v"
           />
         </div>
 
@@ -232,12 +242,12 @@
           v-else
           :file-tree-key="fileTreeKey"
           :is-dark="isDark"
-          :is-desktop="isDesktop"
+          :is-desktop="pg.isDesktop"
           :preview-options="previewOptions"
           :repl-theme="replTheme"
-          :sidebar-open="sidebarOpen"
+          :sidebar-open="pg.sidebarOpen"
           :store="store"
-          @update:sidebar-open="v => sidebarOpen.value = v"
+          @update:sidebar-open="v => pg.sidebarOpen = v"
         />
       </div>
     </Transition>
diff --git a/apps/docs/src/pages/skillz.[id].vue b/apps/docs/src/pages/skillz.[id].vue
index 7599e5cff..ae09fe53b 100644
--- a/apps/docs/src/pages/skillz.[id].vue
+++ b/apps/docs/src/pages/skillz.[id].vue
@@ -3,7 +3,7 @@
   import { definePage } from 'unplugin-vue-router/runtime'
 
   // Framework
-  import { useBreakpoints } from '@vuetify/v0'
+  import { useBreakpoints, useFeatures } from '@vuetify/v0'
 
   // Components
   import SkillMasteredBadge from '@/components/skillz/SkillMasteredBadge.vue'
@@ -31,6 +31,7 @@
   })
 
   const settings = useSettings()
+  const devmode = useFeatures().get('devmode')!
   const params = useParams<{ id: string }>()
   const discovery = useDiscovery()
   const store = useSkillzStore()
@@ -131,19 +132,19 @@
     <!-- Skill detail -->
     <template v-else>
       <div class="max-w-3xl mx-auto p-4">
-        <header class="flex flex-wrap justify-between items-center gap-2 mb-4">
+        <header class="flex justify-between items-center gap-2 mb-4">
           <RouterLink class="flex items-center gap-2 text-on-surface-variant no-underline text-sm transition-colors hover:text-on-surface whitespace-nowrap" to="/skillz">
             <span class="text-xl">←</span>
             <span class="hidden sm:inline">Back to Skillz</span>
           </RouterLink>
 
-          <div class="flex items-center gap-4">
-            <SkillDuration class="text-sm text-on-surface-variant" :minutes="tour.minutes" />
+          <div class="flex items-center gap-2 min-w-0">
+            <SkillDuration class="hidden sm:flex text-sm text-on-surface-variant shrink-0" :minutes="tour.minutes" />
 
-            <!-- Reset button (shows when there's progress) -->
+            <!-- Reset button (dev mode only) -->
             <button
-              v-if="progress"
-              class="px-3 py-1.5 text-sm font-medium text-on-surface-variant bg-transparent border border-divider rounded-lg cursor-pointer transition-colors hover:bg-surface-variant hover:text-on-surface whitespace-nowrap"
+              v-if="progress && devmode.isSelected.value"
+              class="hidden sm:block shrink-0 px-3 py-1.5 text-sm font-medium text-on-surface-variant bg-transparent border border-divider rounded-lg cursor-pointer transition-colors hover:bg-surface-variant hover:text-on-surface"
               title="Reset progress"
               @click="onReset()"
             >
@@ -153,23 +154,23 @@
             <!-- Completed with next tour: Next is primary, Restart is secondary -->
             <template v-if="isCompleted && nextTour">
               <button
-                class="px-4 py-1.5 text-sm font-semibold text-on-surface-variant bg-transparent border border-divider rounded-lg cursor-pointer transition-colors hover:bg-surface-variant hover:text-on-surface whitespace-nowrap"
+                class="shrink-0 px-4 py-1.5 text-sm font-semibold text-on-surface-variant bg-transparent border border-divider rounded-lg cursor-pointer transition-colors hover:bg-surface-variant hover:text-on-surface"
                 @click="onClick()"
               >
                 Restart
               </button>
               <button
-                class="px-4 py-1.5 text-sm font-semibold bg-primary text-on-primary border border-primary rounded-lg cursor-pointer transition-[filter] hover:brightness-110 whitespace-nowrap"
+                class="min-w-0 px-4 py-1.5 text-sm font-semibold bg-primary text-on-primary border border-primary rounded-lg cursor-pointer transition-[filter] hover:brightness-110"
                 @click="onClickNext()"
               >
-                Next: {{ nextTour.name }}
+                <span class="block truncate">Next: {{ nextTour.name }}</span>
               </button>
             </template>
 
             <!-- Otherwise: single primary button -->
             <button
               v-else
-              class="px-4 py-1.5 text-sm font-semibold bg-primary text-on-primary border border-primary rounded-lg cursor-pointer transition-[filter] hover:brightness-110"
+              class="shrink-0 px-4 py-1.5 text-sm font-semibold bg-primary text-on-primary border border-primary rounded-lg cursor-pointer transition-[filter] hover:brightness-110"
               @click="onClick()"
             >
               {{ label }}
@@ -198,7 +199,10 @@
             <SkillCategoryTags :categories="tour.categories" />
           </div> -->
 
-          <h1 class="text-2xl font-bold m-0 mb-3 text-on-surface">{{ tour.name }}</h1>
+          <h1
+            class="text-2xl font-bold m-0 mb-3 text-on-surface"
+            :class="isCompleted ? 'pr-20 md:pr-32' : ''"
+          >{{ tour.name }}</h1>
           <p class="text-base text-on-surface-variant m-0 mb-6 leading-relaxed md:pr-26">{{ tour.description }}</p>
 
           <h2 class="text-base font-semibold m-0 mb-4 text-on-surface">You'll learn how to:</h2>
diff --git a/apps/docs/src/pages/skillz.tutorial.[id].vue b/apps/docs/src/pages/skillz.tutorial.[id].vue
index 43aabac90..c8241aa8c 100644
--- a/apps/docs/src/pages/skillz.tutorial.[id].vue
+++ b/apps/docs/src/pages/skillz.tutorial.[id].vue
@@ -221,4 +221,3 @@
     </div>
   </div>
 </template>
-
diff --git a/apps/docs/src/skillz/tours/beginner/navigating-by-keyboard/index.json b/apps/docs/src/skillz/tours/beginner/navigating-by-keyboard/index.json
index 7cdf38ec9..2dde1181e 100644
--- a/apps/docs/src/skillz/tours/beginner/navigating-by-keyboard/index.json
+++ b/apps/docs/src/skillz/tours/beginner/navigating-by-keyboard/index.json
@@ -11,6 +11,14 @@
   "minutes": 2,
   "startRoute": "/introduction/why-vuetify0",
   "steps": [
+    {
+      "id": "welcome",
+      "title": "Navigating by Keyboard",
+      "task": "You can get anywhere in the docs without touching the mouse. This tour walks you through the key shortcuts.",
+      "hint": "",
+      "learn": "Navigate the docs hands-free",
+      "noActivator": true
+    },
     {
       "id": "search",
       "title": "Open Search",
diff --git a/apps/docs/src/skillz/tours/beginner/using-search/index.json b/apps/docs/src/skillz/tours/beginner/using-search/index.json
index 2a3e20cb3..5fac23473 100644
--- a/apps/docs/src/skillz/tours/beginner/using-search/index.json
+++ b/apps/docs/src/skillz/tours/beginner/using-search/index.json
@@ -11,6 +11,14 @@
   "minutes": 2,
   "startRoute": "/introduction/getting-started",
   "steps": [
+    {
+      "id": "welcome",
+      "title": "Using Search",
+      "task": "Search is the fastest way to find anything in the docs — components, composables, guides, and more. Let's see how it works.",
+      "hint": "",
+      "learn": "Get the most out of docs search",
+      "noActivator": true
+    },
     {
       "id": "search",
       "title": "Search Button",
diff --git a/apps/docs/src/skillz/tours/beginner/using-the-docs/index.json b/apps/docs/src/skillz/tours/beginner/using-the-docs/index.json
index a0fa80a54..b3578009b 100644
--- a/apps/docs/src/skillz/tours/beginner/using-the-docs/index.json
+++ b/apps/docs/src/skillz/tours/beginner/using-the-docs/index.json
@@ -11,6 +11,14 @@
   "minutes": 3,
   "startRoute": "/introduction/why-vuetify0",
   "steps": [
+    {
+      "id": "welcome",
+      "title": "Using the Docs",
+      "task": "This tour shows you where everything lives — navigation, search, AI, and settings. Let's walk through it together.",
+      "hint": "",
+      "learn": "Understand the docs layout",
+      "noActivator": true
+    },
     {
       "id": "search",
       "title": "Search",
diff --git a/apps/docs/src/skillz/tours/beginner/using-the-playground/index.json b/apps/docs/src/skillz/tours/beginner/using-the-playground/index.json
index 6dc04d31f..db767a25a 100644
--- a/apps/docs/src/skillz/tours/beginner/using-the-playground/index.json
+++ b/apps/docs/src/skillz/tours/beginner/using-the-playground/index.json
@@ -8,17 +8,52 @@
   "order": 1,
   "prerequisites": [],
   "description": "Learn how the playground works before you start coding.",
-  "minutes": 2,
+  "minutes": 3,
   "startRoute": "/playground",
   "steps": [
     {
       "id": "welcome",
       "title": "Welcome to the Playground",
-      "task": "This is where you write and run code. Let's take a quick look at what's here.",
+      "task": "This is where you write and run code. Let's take a quick tour of what's here.",
       "hint": "",
       "learn": "Understand the playground layout",
       "noActivator": true
     },
+    {
+      "id": "sidebar-toggle",
+      "title": "Toggle File Panel",
+      "task": "Show or hide the file panel with this button — or use Ctrl+B from anywhere in the editor.",
+      "hint": "",
+      "learn": "Toggle the file browser",
+      "placement": "bottom"
+    },
+    {
+      "id": "file-tree",
+      "title": "Project Files",
+      "task": "Your files live here. Click any file to open it in the editor.",
+      "hint": "",
+      "learn": "Switch between project files",
+      "placement": "right",
+      "skipOnMobile": true
+    },
+    {
+      "id": "editor",
+      "title": "Code Editor",
+      "task": "Write your code here. The preview updates instantly as you type.",
+      "hint": "",
+      "learn": "Write code and see it run live",
+      "placement": "right",
+      "placementMobile": "center"
+    },
+    {
+      "id": "preview",
+      "title": "Live Preview",
+      "task": "Your component renders here in real time. No build step — changes appear as you type.",
+      "hint": "",
+      "learn": "See code changes render instantly",
+      "placement": "left",
+      "placementMobile": "center"
+    },
     {
       "id": "panel-toggle",
       "title": "Intro Panel",
@@ -38,26 +73,17 @@
     {
       "id": "examples",
       "title": "Load an Example",
-      "task": "Click here to browse and load example code snippets. A great way to see v0 composables in action.",
+      "task": "Click here to browse and load example code snippets.",
       "hint": "",
       "learn": "Load examples from the toolbar",
       "placement": "bottom"
     },
     {
-      "id": "file-tree",
-      "title": "Project Files",
-      "task": "Your files live here. Click any file to open it in the editor.",
-      "hint": "",
-      "learn": "Switch between project files",
-      "placement": "right",
-      "skipOnMobile": true
-    },
-    {
-      "id": "editor",
-      "title": "Code Editor",
-      "task": "Write your code here. The preview updates instantly as you type.",
+      "id": "examples-menu",
+      "title": "Examples Library",
+      "task": "Browse ready-made examples for every v0 composable. Click one to load it instantly.",
       "hint": "",
-      "learn": "Write code and see it run live",
+      "learn": "Browse and load example projects",
       "placement": "left"
     },
     {
diff --git a/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts b/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts
index b83606626..697cf4e8a 100644
--- a/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts
+++ b/apps/docs/src/skillz/tours/beginner/using-the-playground/index.ts
@@ -14,8 +14,28 @@ export function defineTour () {
         enter: () => {
           playground.panel.close()
           playground.examples.close()
+          playground.sidebar.close()
         },
       },
+      'sidebar-toggle': {
+        enter: () => {
+          playground.panel.close()
+          playground.examples.close()
+        },
+      },
+      'file-tree': {
+        enter: () => {
+          playground.examples.close()
+          playground.sidebar.open()
+        },
+        back: () => playground.sidebar.close(),
+      },
+      'editor': {
+        enter: () => playground.examples.close(),
+      },
+      'preview': {
+        enter: () => playground.examples.close(),
+      },
       'panel-toggle': {
         enter: () => {
           playground.panel.close()
@@ -31,15 +51,11 @@ export function defineTour () {
           playground.panel.close()
           playground.examples.close()
         },
+        back: () => playground.panel.open(),
       },
-      'file-tree': {
-        enter: () => {
-          playground.examples.close()
-          playground.sidebar.open()
-        },
-      },
-      'editor': {
-        enter: () => playground.examples.close(),
+      'examples-menu': {
+        enter: () => playground.examples.open(),
+        back: () => playground.examples.close(),
       },
       'complete': {
         enter: () => {
diff --git a/apps/docs/src/stores/playground.ts b/apps/docs/src/stores/playground.ts
index c5a1a96be..97a667d3e 100644
--- a/apps/docs/src/stores/playground.ts
+++ b/apps/docs/src/stores/playground.ts
@@ -29,7 +29,7 @@ export const usePlaygroundStore = defineStore('playground', () => {
   // Sync sidebar with desktop breakpoint
   watch(isDesktop, v => {
     sidebarOpen.value = v
-  })
+  }, { immediate: true })
 
   // Namespaced control objects for tour handlers
   const panel: PlaygroundControl = {

From 649283b133612f37c850cec1c86c3320831a3ff2 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 19 Feb 2026 20:45:29 -0600
Subject: [PATCH 38/39] docs(playground): fix resize stuttering

- Track latest pointermove position in RAF instead of dropping events;
  reset latestPos on each drag start to prevent stale carryover
- Remove contain-strict toggling during drag (expensive containment
  context churn on every frame)
- Disable Monaco auto-resize during drag to prevent ResizeObserver
  layout thrashing
- Lock overflow-y: scroll on intro panel during panel resize to skip
  browser scrollbar double-pass layout
---
 .../components/playground/PlaygroundIntroPanel.vue   |  6 +++++-
 .../components/playground/PlaygroundWorkspace.vue    | 12 ++++++------
 apps/docs/src/composables/useResizeHandle.ts         |  6 ++++--
 apps/docs/src/pages/playground.vue                   |  2 +-
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/apps/docs/src/components/playground/PlaygroundIntroPanel.vue b/apps/docs/src/components/playground/PlaygroundIntroPanel.vue
index e7f11dc51..8371bf969 100644
--- a/apps/docs/src/components/playground/PlaygroundIntroPanel.vue
+++ b/apps/docs/src/components/playground/PlaygroundIntroPanel.vue
@@ -12,6 +12,10 @@
   // Content
   import PlaygroundIntroPanelRaw from './PlaygroundIntroPanel.md?raw'
 
+  const { isResizing = false } = defineProps<{
+    isResizing?: boolean
+  }>()
+
   defineEmits<{
     close: []
   }>()
@@ -31,7 +35,7 @@
     </div>
 
     <!-- Content -->
-    <div class="flex-1 overflow-y-auto px-5 py-4">
+    <div class="flex-1 px-5 py-4" :class="isResizing ? 'overflow-y-scroll' : 'overflow-y-auto'">
       <div ref="content" class="markdown-body intro-content" v-html="html" />
     </div>
   </div>
diff --git a/apps/docs/src/components/playground/PlaygroundWorkspace.vue b/apps/docs/src/components/playground/PlaygroundWorkspace.vue
index f94d2449b..f081c5fdd 100644
--- a/apps/docs/src/components/playground/PlaygroundWorkspace.vue
+++ b/apps/docs/src/components/playground/PlaygroundWorkspace.vue
@@ -180,11 +180,11 @@
             active-class="rounded-lg"
             as="div"
             class="workspace-repl-wrapper flex flex-col flex-1 min-h-0 min-w-0 editor-repl"
-            :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
+            :class="{ dark: isDark, 'pointer-events-none': anyResizing }"
             step="editor"
           >
             <Repl
-              :auto-resize="true"
+              :auto-resize="!anyResizing"
               class="flex-1 min-h-0"
               :clear-console="true"
               :editor="Monaco"
@@ -215,7 +215,7 @@
         active-class="rounded-lg"
         as="div"
         class="workspace-preview flex-1 min-w-0 min-h-0 editor-repl overflow-hidden"
-        :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
+        :class="{ dark: isDark, 'pointer-events-none': anyResizing }"
         step="preview"
       >
         <Sandbox
@@ -301,7 +301,7 @@
             active-class="rounded-lg"
             as="div"
             class="workspace-repl-wrapper flex flex-col min-h-0 min-w-0 editor-repl"
-            :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
+            :class="{ dark: isDark, 'pointer-events-none': anyResizing }"
             step="editor"
             :style="isDesktop
               ? (isVertical
@@ -310,7 +310,7 @@
               : { flex: '1' }"
           >
             <Repl
-              :auto-resize="true"
+              :auto-resize="!anyResizing"
               class="flex-1 min-h-0"
               :clear-console="true"
               :editor="Monaco"
@@ -340,7 +340,7 @@
             active-class="rounded-lg"
             as="div"
             class="workspace-preview flex-1 min-w-0 min-h-0 editor-repl overflow-hidden"
-            :class="{ dark: isDark, 'pointer-events-none': anyResizing, 'contain-strict': anyResizing }"
+            :class="{ dark: isDark, 'pointer-events-none': anyResizing }"
             step="preview"
           >
             <!-- auto-store-init=false: Repl already calls store.init(); a second call
diff --git a/apps/docs/src/composables/useResizeHandle.ts b/apps/docs/src/composables/useResizeHandle.ts
index e94a0a11a..996a66974 100644
--- a/apps/docs/src/composables/useResizeHandle.ts
+++ b/apps/docs/src/composables/useResizeHandle.ts
@@ -30,6 +30,7 @@ export function useResizeHandle (options: UseResizeHandleOptions): UseResizeHand
   function onPointerDown (e: PointerEvent) {
     e.preventDefault()
     startPos.value = options.direction === 'horizontal' ? e.clientX : e.clientY
+    latestPos = startPos.value
     startSize.value = size.value
     if (options.direction === 'vertical') {
       containerSize.value = (e.target as HTMLElement).parentElement?.offsetHeight ?? 1
@@ -39,13 +40,14 @@ export function useResizeHandle (options: UseResizeHandleOptions): UseResizeHand
   }
 
   let rafId = 0
+  let latestPos = 0
 
   useToggleScope(() => isResizing.value, () => {
     useDocumentEventListener('pointermove', (e: PointerEvent) => {
+      latestPos = options.direction === 'horizontal' ? e.clientX : e.clientY
       if (rafId) return
       rafId = requestAnimationFrame(() => {
-        const pos = options.direction === 'horizontal' ? e.clientX : e.clientY
-        const delta = pos - startPos.value
+        const delta = latestPos - startPos.value
         size.value = options.direction === 'vertical'
           ? clamp(startSize.value + (delta / containerSize.value) * 100, options.min, options.max)
           : clamp(startSize.value + delta, options.min, options.max)
diff --git a/apps/docs/src/pages/playground.vue b/apps/docs/src/pages/playground.vue
index 25d91a91f..77b702f3d 100644
--- a/apps/docs/src/pages/playground.vue
+++ b/apps/docs/src/pages/playground.vue
@@ -214,7 +214,7 @@
             step="intro-panel"
             :style="{ width: `${panelHandle.size.value}px` }"
           >
-            <PlaygroundIntroPanel @close="pg.panel.close()" />
+            <PlaygroundIntroPanel :is-resizing="panelHandle.isResizing.value" @close="pg.panel.close()" />
           </Discovery.Activator>
 
           <PlaygroundResizeHandle

From 9a518371d539b8ef3e0221ab32d15f0e2516a946 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 19 Feb 2026 21:07:04 -0600
Subject: [PATCH 39/39] docs(playground): extract PlaygroundWorkspace into
 focused SFCs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Split 420-line PlaygroundWorkspace.vue into four new components:
- PlaygroundEditor — Repl pane with scoped REPL CSS
- PlaygroundPreview — Sandbox pane with scoped preview CSS
- PlaygroundMobileSidebar — mobile file browser overlay
- PlaygroundTabBar — tabs row with Code/Preview and layout toggle

WorkSpace is now structural scaffolding only.
---
 apps/docs/src/components.d.ts                 |   4 +
 .../playground/PlaygroundEditor.vue           |  92 +++++++
 .../playground/PlaygroundMobileSidebar.vue    |  42 +++
 .../playground/PlaygroundPreview.vue          |  85 ++++++
 .../playground/PlaygroundTabBar.vue           |  52 ++++
 .../playground/PlaygroundWorkspace.vue        | 251 ++++--------------
 6 files changed, 330 insertions(+), 196 deletions(-)
 create mode 100644 apps/docs/src/components/playground/PlaygroundEditor.vue
 create mode 100644 apps/docs/src/components/playground/PlaygroundMobileSidebar.vue
 create mode 100644 apps/docs/src/components/playground/PlaygroundPreview.vue
 create mode 100644 apps/docs/src/components/playground/PlaygroundTabBar.vue

diff --git a/apps/docs/src/components.d.ts b/apps/docs/src/components.d.ts
index cdae02af5..2ed76dde5 100644
--- a/apps/docs/src/components.d.ts
+++ b/apps/docs/src/components.d.ts
@@ -141,11 +141,15 @@ declare module 'vue' {
     HomeFoundation: typeof import('./components/home/HomeFoundation.vue')['default']
     HomeHero: typeof import('./components/home/HomeHero.vue')['default']
     PlaygroundBreadcrumbs: typeof import('./components/playground/PlaygroundBreadcrumbs.vue')['default']
+    PlaygroundEditor: typeof import('./components/playground/PlaygroundEditor.vue')['default']
     PlaygroundExamples: typeof import('./components/playground/PlaygroundExamples.vue')['default']
     PlaygroundFileTree: typeof import('./components/playground/PlaygroundFileTree.vue')['default']
     PlaygroundIntroPanel: typeof import('./components/playground/PlaygroundIntroPanel.vue')['default']
     PlaygroundMarkdownPanel: typeof import('./components/playground/PlaygroundMarkdownPanel.vue')['default']
+    PlaygroundMobileSidebar: typeof import('./components/playground/PlaygroundMobileSidebar.vue')['default']
+    PlaygroundPreview: typeof import('./components/playground/PlaygroundPreview.vue')['default']
     PlaygroundResizeHandle: typeof import('./components/playground/PlaygroundResizeHandle.vue')['default']
+    PlaygroundTabBar: typeof import('./components/playground/PlaygroundTabBar.vue')['default']
     PlaygroundTabs: typeof import('./components/playground/PlaygroundTabs.vue')['default']
     PlaygroundWorkspace: typeof import('./components/playground/PlaygroundWorkspace.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/apps/docs/src/components/playground/PlaygroundEditor.vue b/apps/docs/src/components/playground/PlaygroundEditor.vue
new file mode 100644
index 000000000..480087e92
--- /dev/null
+++ b/apps/docs/src/components/playground/PlaygroundEditor.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+  // Components
+  import { Discovery } from '@/components/discovery'
+
+  // Utilities
+  import { Repl } from '@vue/repl'
+  import Monaco from '@vue/repl/monaco-editor'
+
+  // Types
+  import type { ReplStore } from '@vue/repl'
+
+  const { store, replTheme, previewOptions, isDark, anyResizing } = defineProps<{
+    store: ReplStore
+    replTheme: 'dark' | 'light'
+    previewOptions: { headHTML: string }
+    isDark: boolean
+    anyResizing: boolean
+  }>()
+</script>
+
+<template>
+  <Discovery.Activator
+    active-class="rounded-lg"
+    as="div"
+    class="workspace-repl-wrapper flex flex-col min-h-0 min-w-0 editor-repl"
+    :class="{ dark: isDark, 'pointer-events-none': anyResizing }"
+    step="editor"
+  >
+    <Repl
+      :auto-resize="!anyResizing"
+      class="flex-1 min-h-0"
+      :clear-console="true"
+      :editor="Monaco"
+      :editor-options="{ monacoOptions: { padding: { top: 16 } } }"
+      layout="horizontal"
+      :preview-options="previewOptions"
+      :show-compile-output="false"
+      :show-import-map="false"
+      :show-ts-config="false"
+      :store="store"
+      :theme="replTheme"
+    />
+  </Discovery.Activator>
+</template>
+
+<style scoped>
+  /* REPL theme variables */
+  .editor-repl :deep(.vue-repl) {
+    --header-height: 0px;
+    --color-branding: var(--v0-primary);
+    --color-branding-dark: var(--v0-primary);
+  }
+
+  .editor-repl.dark :deep(.vue-repl) {
+    --bg: var(--v0-background);
+    --bg-soft: var(--v0-surface);
+    --border: var(--v0-divider);
+    --text-light: var(--v0-on-surface-variant);
+  }
+
+  /* Hide REPL's built-in file tabs */
+  .editor-repl :deep(.file-selector) {
+    display: none !important;
+  }
+
+  /* Hide editor floating toggles — we render Sandbox separately */
+  .editor-repl :deep(.editor-floating) {
+    display: none !important;
+  }
+
+  /* Hide the Repl's preview pane — we render Sandbox separately */
+  .workspace-repl-wrapper :deep(.split-pane .right) {
+    display: none !important;
+  }
+
+  .workspace-repl-wrapper :deep(.split-pane .left) {
+    width: 100% !important;
+  }
+
+  /* Hide the SplitPane divider */
+  .workspace-repl-wrapper :deep(.split-pane .divider) {
+    display: none !important;
+  }
+
+  /* Sandbox fills container */
+  .editor-repl :deep(.vue-repl),
+  .editor-repl :deep(.iframe-container),
+  .editor-repl :deep(iframe) {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/apps/docs/src/components/playground/PlaygroundMobileSidebar.vue b/apps/docs/src/components/playground/PlaygroundMobileSidebar.vue
new file mode 100644
index 000000000..47cee4556
--- /dev/null
+++ b/apps/docs/src/components/playground/PlaygroundMobileSidebar.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+  // Components
+  import PlaygroundFileTree from '@/components/playground/PlaygroundFileTree.vue'
+
+  // Types
+  import type { ReplStore } from '@vue/repl'
+
+  const { store, fileTreeKey, zIndex } = defineProps<{
+    store: ReplStore
+    fileTreeKey: number
+    zIndex: number
+  }>()
+
+  const emit = defineEmits<{
+    close: []
+  }>()
+</script>
+
+<template>
+  <div
+    aria-label="File browser"
+    class="fixed top-0 bottom-0 left-0 w-[260px] flex flex-col bg-surface border-r border-divider"
+    role="dialog"
+    :style="{ zIndex }"
+  >
+    <div class="flex items-center justify-end px-2 py-1">
+      <button
+        aria-label="Close file browser"
+        class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
+        @click="emit('close')"
+      >
+        <AppIcon icon="close" :size="18" />
+      </button>
+    </div>
+
+    <PlaygroundFileTree
+      :key="fileTreeKey"
+      class="flex-1 min-h-0"
+      :store="store"
+    />
+  </div>
+</template>
diff --git a/apps/docs/src/components/playground/PlaygroundPreview.vue b/apps/docs/src/components/playground/PlaygroundPreview.vue
new file mode 100644
index 000000000..97a50b0f5
--- /dev/null
+++ b/apps/docs/src/components/playground/PlaygroundPreview.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+  // Components
+  import { Discovery } from '@/components/discovery'
+
+  // Utilities
+  import { Sandbox } from '@vue/repl'
+
+  // Types
+  import type { ReplStore } from '@vue/repl'
+
+  const { store, replTheme, previewOptions, isDark, anyResizing } = defineProps<{
+    store: ReplStore
+    replTheme: 'dark' | 'light'
+    previewOptions: { headHTML: string }
+    isDark: boolean
+    anyResizing: boolean
+  }>()
+</script>
+
+<template>
+  <Discovery.Activator
+    active-class="rounded-lg"
+    as="div"
+    class="workspace-preview flex-1 min-w-0 min-h-0 editor-repl overflow-hidden"
+    :class="{ dark: isDark, 'pointer-events-none': anyResizing }"
+    step="preview"
+  >
+    <!-- auto-store-init=false: Repl already calls store.init(); a second call
+         from standalone Sandbox would create duplicate watchers (double compilation,
+         double builtinImportMap watches). See patches/@vue__repl@4.7.1.patch. -->
+    <Sandbox
+      :auto-store-init="false"
+      :clear-console="false"
+      :preview-options="previewOptions"
+      :show="true"
+      :store="store"
+      :theme="replTheme"
+    />
+  </Discovery.Activator>
+</template>
+
+<style scoped>
+  /* REPL theme variables */
+  .editor-repl :deep(.vue-repl) {
+    --header-height: 0px;
+    --color-branding: var(--v0-primary);
+    --color-branding-dark: var(--v0-primary);
+  }
+
+  .editor-repl.dark :deep(.vue-repl) {
+    --bg: var(--v0-background);
+    --bg-soft: var(--v0-surface);
+    --border: var(--v0-divider);
+    --text-light: var(--v0-on-surface-variant);
+  }
+
+  /* Hide REPL's built-in file tabs */
+  .editor-repl :deep(.file-selector) {
+    display: none !important;
+  }
+
+  /* Hide editor floating toggles */
+  .editor-repl :deep(.editor-floating) {
+    display: none !important;
+  }
+
+  /* Sandbox fills container */
+  .editor-repl :deep(.vue-repl),
+  .editor-repl :deep(.iframe-container),
+  .editor-repl :deep(iframe) {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Match iframe bg to preview body to prevent flash */
+  .workspace-preview :deep(iframe) {
+    background-color: var(--v0-background) !important;
+  }
+
+  /* Disable @vue/repl's built-in fade transition on preview iframe */
+  .workspace-preview :deep(.fade-enter-active),
+  .workspace-preview :deep(.fade-leave-active) {
+    transition: none !important;
+  }
+</style>
diff --git a/apps/docs/src/components/playground/PlaygroundTabBar.vue b/apps/docs/src/components/playground/PlaygroundTabBar.vue
new file mode 100644
index 000000000..b2a03d96f
--- /dev/null
+++ b/apps/docs/src/components/playground/PlaygroundTabBar.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+  // Components
+  import PlaygroundTabs from '@/components/playground/PlaygroundTabs.vue'
+
+  // Types
+  import type { ReplStore } from '@vue/repl'
+
+  const { store, isDesktop, isVertical, mobileView, hideTabs } = defineProps<{
+    store: ReplStore
+    isDesktop: boolean
+    isVertical: boolean
+    mobileView: 'editor' | 'preview'
+    hideTabs: boolean
+  }>()
+
+  const emit = defineEmits<{
+    'update:mobileView': ['editor' | 'preview']
+    'toggle-layout': []
+  }>()
+</script>
+
+<template>
+  <div v-if="!hideTabs" class="flex items-stretch">
+    <PlaygroundTabs class="flex-1 min-w-0" :store="store" />
+
+    <template v-if="!isDesktop">
+      <button
+        class="px-3 text-xs font-medium border-b border-l border-divider transition-colors"
+        :class="mobileView === 'editor' ? 'bg-surface-tint text-on-surface' : 'bg-surface-variant/30 text-on-surface-variant'"
+        @click="emit('update:mobileView', 'editor')"
+      >
+        Code
+      </button>
+      <button
+        class="px-3 text-xs font-medium border-b border-l border-divider transition-colors"
+        :class="mobileView === 'preview' ? 'bg-surface-tint text-on-surface' : 'bg-surface-variant/30 text-on-surface-variant'"
+        @click="emit('update:mobileView', 'preview')"
+      >
+        Preview
+      </button>
+    </template>
+
+    <button
+      v-else
+      class="shrink-0 flex items-center justify-center w-9 border-b border-l border-divider bg-surface-variant/30 hover:bg-surface-tint transition-colors"
+      :title="isVertical ? 'Switch to side-by-side layout' : 'Switch to stacked layout'"
+      @click="emit('toggle-layout')"
+    >
+      <AppIcon :icon="isVertical ? 'layout-horizontal' : 'layout-vertical'" :size="16" />
+    </button>
+  </div>
+</template>
diff --git a/apps/docs/src/components/playground/PlaygroundWorkspace.vue b/apps/docs/src/components/playground/PlaygroundWorkspace.vue
index f081c5fdd..19af119ba 100644
--- a/apps/docs/src/components/playground/PlaygroundWorkspace.vue
+++ b/apps/docs/src/components/playground/PlaygroundWorkspace.vue
@@ -5,17 +5,19 @@
   // Components
   import { Discovery } from '@/components/discovery'
   import PlaygroundBreadcrumbs from '@/components/playground/PlaygroundBreadcrumbs.vue'
+  import PlaygroundEditor from '@/components/playground/PlaygroundEditor.vue'
   import PlaygroundFileTree from '@/components/playground/PlaygroundFileTree.vue'
+  import PlaygroundMobileSidebar from '@/components/playground/PlaygroundMobileSidebar.vue'
+  import PlaygroundPreview from '@/components/playground/PlaygroundPreview.vue'
   import PlaygroundResizeHandle from '@/components/playground/PlaygroundResizeHandle.vue'
+  import PlaygroundTabBar from '@/components/playground/PlaygroundTabBar.vue'
   import PlaygroundTabs from '@/components/playground/PlaygroundTabs.vue'
 
   // Composables
   import { useResizeHandle } from '@/composables/useResizeHandle'
 
   // Utilities
-  import { Repl, Sandbox } from '@vue/repl'
-  import Monaco from '@vue/repl/monaco-editor'
-  import { computed, shallowRef, watch } from 'vue'
+  import { computed, shallowRef, toRef, watch } from 'vue'
 
   // Types
   import type { ReplStore } from '@vue/repl'
@@ -43,14 +45,16 @@
     'update:sidebarOpen': [value: boolean]
   }>()
 
+  const storage = useStorage()
+
   // Mobile: which pane is visible (editor or preview)
   const mobileView = shallowRef<'editor' | 'preview'>('editor')
 
   // Split layout preference — user's persistent choice (standard mode only)
-  const splitLayout = useStorage().get<'vertical' | 'horizontal'>('workspace-split-layout', 'vertical')
+  const splitLayout = storage.get<'vertical' | 'horizontal'>('workspace-split-layout', 'vertical')
 
   // defaultLayout pins the layout without touching the user's stored preference
-  const isVertical = computed(() => (defaultLayout ?? splitLayout.value) === 'vertical')
+  const isVertical = toRef(() => (defaultLayout ?? splitLayout.value) === 'vertical')
 
   function toggleSplitLayout () {
     splitLayout.value = isVertical.value ? 'horizontal' : 'vertical'
@@ -74,7 +78,7 @@
     direction: 'horizontal',
   })
 
-  const activeSplitHandle = computed(() => isVertical.value ? vSplitHandle : hSplitHandle)
+  const activeSplitHandle = toRef(() => isVertical.value ? vSplitHandle : hSplitHandle)
 
   const fileTreeHandle = useResizeHandle({
     storageKey: 'workspace-filetree-width',
@@ -96,11 +100,11 @@
     !isDesktop && sidebarOpen && !hideFiles,
   )
 
-  // Mobile overlay z-index via stack
   const stack = useStack()
   const ticket = stack.register({
     onDismiss: () => emit('update:sidebarOpen', false),
   })
+
   watch(showMobileOverlay, open => {
     if (open) ticket.select()
     else ticket.unselect()
@@ -113,29 +117,13 @@
     :class="[defaultLayout === 'vertical' ? 'flex-col' : 'flex-row', { 'select-none': anyResizing }]"
   >
     <!-- Mobile: file browser overlay -->
-    <div
+    <PlaygroundMobileSidebar
       v-if="showMobileOverlay"
-      aria-label="File browser"
-      class="fixed top-0 bottom-0 left-0 w-[260px] flex flex-col bg-surface border-r border-divider"
-      role="dialog"
-      :style="{ zIndex: ticket.zIndex.value }"
-    >
-      <div class="flex items-center justify-end px-2 py-1">
-        <button
-          aria-label="Close file browser"
-          class="pa-1 inline-flex rounded opacity-50 hover:opacity-80 hover:bg-surface-tint transition-colors"
-          @click="emit('update:sidebarOpen', false)"
-        >
-          <AppIcon icon="close" :size="18" />
-        </button>
-      </div>
-
-      <PlaygroundFileTree
-        :key="fileTreeKey"
-        class="flex-1 min-h-0"
-        :store="store"
-      />
-    </div>
+      :file-tree-key="fileTreeKey"
+      :store="store"
+      :z-index="ticket.zIndex.value"
+      @close="emit('update:sidebarOpen', false)"
+    />
 
     <!-- ── PANEL LAYOUT: file tree beside editor, preview full-width below ── -->
     <template v-if="defaultLayout === 'vertical'">
@@ -176,28 +164,14 @@
 
           <PlaygroundBreadcrumbs v-if="!hideBreadcrumbs" :store="store" />
 
-          <Discovery.Activator
-            active-class="rounded-lg"
-            as="div"
-            class="workspace-repl-wrapper flex flex-col flex-1 min-h-0 min-w-0 editor-repl"
-            :class="{ dark: isDark, 'pointer-events-none': anyResizing }"
-            step="editor"
-          >
-            <Repl
-              :auto-resize="!anyResizing"
-              class="flex-1 min-h-0"
-              :clear-console="true"
-              :editor="Monaco"
-              :editor-options="{ monacoOptions: { padding: { top: 16 } } }"
-              layout="horizontal"
-              :preview-options="previewOptions"
-              :show-compile-output="false"
-              :show-import-map="false"
-              :show-ts-config="false"
-              :store="store"
-              :theme="replTheme"
-            />
-          </Discovery.Activator>
+          <PlaygroundEditor
+            :any-resizing="anyResizing"
+            class="flex-1"
+            :is-dark="isDark"
+            :preview-options="previewOptions"
+            :repl-theme="replTheme"
+            :store="store"
+          />
         </div>
       </div>
 
@@ -211,22 +185,13 @@
       />
 
       <!-- Preview: full width of workspace -->
-      <Discovery.Activator
-        active-class="rounded-lg"
-        as="div"
-        class="workspace-preview flex-1 min-w-0 min-h-0 editor-repl overflow-hidden"
-        :class="{ dark: isDark, 'pointer-events-none': anyResizing }"
-        step="preview"
-      >
-        <Sandbox
-          :auto-store-init="false"
-          :clear-console="false"
-          :preview-options="previewOptions"
-          :show="true"
-          :store="store"
-          :theme="replTheme"
-        />
-      </Discovery.Activator>
+      <PlaygroundPreview
+        :any-resizing="anyResizing"
+        :is-dark="isDark"
+        :preview-options="previewOptions"
+        :repl-theme="replTheme"
+        :store="store"
+      />
     </template>
 
     <!-- ── STANDARD LAYOUT: file tree full-height sidebar, toggle split ─── -->
@@ -258,35 +223,15 @@
       <!-- Main content: tabs + editor/preview split -->
       <div class="flex flex-col flex-1 min-w-0 min-h-0">
         <!-- Tabs row with layout toggle (desktop) or code/preview toggle (mobile) -->
-        <div v-if="!hideTabs" class="flex items-stretch">
-          <PlaygroundTabs class="flex-1 min-w-0" :store="store" />
-
-          <template v-if="!isDesktop">
-            <button
-              class="px-3 text-xs font-medium border-b border-l border-divider transition-colors"
-              :class="mobileView === 'editor' ? 'bg-surface-tint text-on-surface' : 'bg-surface-variant/30 text-on-surface-variant'"
-              @click="mobileView = 'editor'"
-            >
-              Code
-            </button>
-            <button
-              class="px-3 text-xs font-medium border-b border-l border-divider transition-colors"
-              :class="mobileView === 'preview' ? 'bg-surface-tint text-on-surface' : 'bg-surface-variant/30 text-on-surface-variant'"
-              @click="mobileView = 'preview'"
-            >
-              Preview
-            </button>
-          </template>
-
-          <button
-            v-else
-            class="shrink-0 flex items-center justify-center w-9 border-b border-l border-divider bg-surface-variant/30 hover:bg-surface-tint transition-colors"
-            :title="isVertical ? 'Switch to side-by-side layout' : 'Switch to stacked layout'"
-            @click="toggleSplitLayout"
-          >
-            <AppIcon :icon="isVertical ? 'layout-horizontal' : 'layout-vertical'" :size="16" />
-          </button>
-        </div>
+        <PlaygroundTabBar
+          :hide-tabs="hideTabs"
+          :is-desktop="isDesktop"
+          :is-vertical="isVertical"
+          :mobile-view="mobileView"
+          :store="store"
+          @toggle-layout="toggleSplitLayout"
+          @update:mobile-view="mobileView = $event"
+        />
 
         <PlaygroundBreadcrumbs v-if="!hideBreadcrumbs" :store="store" />
 
@@ -296,34 +241,19 @@
           :class="isVertical ? 'flex-col' : 'flex-row'"
         >
           <!-- Editor -->
-          <Discovery.Activator
+          <PlaygroundEditor
             v-show="isDesktop || mobileView === 'editor'"
-            active-class="rounded-lg"
-            as="div"
-            class="workspace-repl-wrapper flex flex-col min-h-0 min-w-0 editor-repl"
-            :class="{ dark: isDark, 'pointer-events-none': anyResizing }"
-            step="editor"
+            :any-resizing="anyResizing"
+            :is-dark="isDark"
+            :preview-options="previewOptions"
+            :repl-theme="replTheme"
+            :store="store"
             :style="isDesktop
               ? (isVertical
                 ? { height: `${vSplitHandle.size.value}%` }
                 : { width: `${hSplitHandle.size.value}px` })
               : { flex: '1' }"
-          >
-            <Repl
-              :auto-resize="!anyResizing"
-              class="flex-1 min-h-0"
-              :clear-console="true"
-              :editor="Monaco"
-              :editor-options="{ monacoOptions: { padding: { top: 16 } } }"
-              layout="horizontal"
-              :preview-options="previewOptions"
-              :show-compile-output="false"
-              :show-import-map="false"
-              :show-ts-config="false"
-              :store="store"
-              :theme="replTheme"
-            />
-          </Discovery.Activator>
+          />
 
           <!-- Editor ↔ Preview handle -->
           <PlaygroundResizeHandle
@@ -335,87 +265,16 @@
           />
 
           <!-- Preview -->
-          <Discovery.Activator
+          <PlaygroundPreview
             v-show="isDesktop || mobileView === 'preview'"
-            active-class="rounded-lg"
-            as="div"
-            class="workspace-preview flex-1 min-w-0 min-h-0 editor-repl overflow-hidden"
-            :class="{ dark: isDark, 'pointer-events-none': anyResizing }"
-            step="preview"
-          >
-            <!-- auto-store-init=false: Repl already calls store.init(); a second call
-                 from standalone Sandbox would create duplicate watchers (double compilation,
-                 double builtinImportMap watches). See patches/@vue__repl@4.7.1.patch. -->
-            <Sandbox
-              :auto-store-init="false"
-              :clear-console="false"
-              :preview-options="previewOptions"
-              :show="true"
-              :store="store"
-              :theme="replTheme"
-            />
-          </Discovery.Activator>
+            :any-resizing="anyResizing"
+            :is-dark="isDark"
+            :preview-options="previewOptions"
+            :repl-theme="replTheme"
+            :store="store"
+          />
         </div>
       </div>
     </template>
   </div>
 </template>
-
-<style scoped>
-/* REPL theme variables */
-  .editor-repl :deep(.vue-repl) {
-    --header-height: 0px;
-    --color-branding: var(--v0-primary);
-    --color-branding-dark: var(--v0-primary);
-  }
-
-  .editor-repl.dark :deep(.vue-repl) {
-    --bg: var(--v0-background);
-    --bg-soft: var(--v0-surface);
-    --border: var(--v0-divider);
-    --text-light: var(--v0-on-surface-variant);
-  }
-
-  /* Hide REPL's built-in file tabs */
-  .editor-repl :deep(.file-selector) {
-    display: none !important;
-  }
-
-  /* Hide editor floating toggles — we render Sandbox separately */
-  .editor-repl :deep(.editor-floating) {
-    display: none !important;
-  }
-
-  /* Hide the Repl's preview pane — we render Sandbox separately */
-  .workspace-repl-wrapper :deep(.split-pane .right) {
-    display: none !important;
-  }
-
-  .workspace-repl-wrapper :deep(.split-pane .left) {
-    width: 100% !important;
-  }
-
-  /* Hide the SplitPane divider */
-  .workspace-repl-wrapper :deep(.split-pane .divider) {
-    display: none !important;
-  }
-
-  /* Sandbox fills container */
-  .editor-repl :deep(.vue-repl),
-  .editor-repl :deep(.iframe-container),
-  .editor-repl :deep(iframe) {
-    width: 100%;
-    height: 100%;
-  }
-
-  /* Match iframe bg to preview body to prevent flash */
-  .workspace-preview :deep(iframe) {
-    background-color: var(--v0-background) !important;
-  }
-
-  /* Disable @vue/repl's built-in fade transition on preview iframe */
-  .workspace-preview :deep(.fade-enter-active),
-  .workspace-preview :deep(.fade-leave-active) {
-    transition: none !important;
-  }
-</style>