vuetifyjs · johnleider · May 19, 2026 · May 19, 2026 · May 19, 2026 · May 20, 2026
diff --git a/apps/builder/build/generate-dependencies.ts b/apps/builder/build/generate-dependencies.ts
@@ -0,0 +1,93 @@
+import { readdirSync, readFileSync, statSync, writeFileSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const ROOT = resolve(__dirname, '../../..')
+const V0_SRC = resolve(ROOT, 'packages/0/src')
+
+interface DependencyGraph {
+  composables: Record<string, string[]>
+  components: Record<string, string[]>
+}
+
+// Tests and benchmarks import far more than the feature itself needs — Dialog
+// only reaches for Scrim in its browser test, useTheme only for useStorage in
+// its unit test. Counting those makes the review sheet promise dependencies the
+// generated starter deliberately never installs.
+const EXCLUDED = /\.(?:test|browser\.test|ssr\.test|bench)\.ts$/
+
+// `import type` is erased at build time, so a type-only edge is not a runtime
+// dependency. Stripping the whole statement before scanning is simpler than
+// trying to classify each specifier, and the brace form covers multi-line.
+const TYPE_ONLY = /^[^\S\n]*(?:import|export)\s+type\s+(?:\{[^}]*\}|[^\n]*?)\s*from\s*['"][^'"]+['"]/gm
+
+// The trailing group captures deep imports (`useTheme/adapters`,
+// `createDataTable/columns`) which the specifier regex used to skip entirely.
+const SPECIFIER = /from\s+['"]#v0\/(?:composables|components)\/(\w+)(?:\/[\w/]+)?['"]/g
+
+function extractV0Imports (filePath: string): string[] {
+  if (EXCLUDED.test(filePath)) return []
+
+  let content: string
+  try {
+    content = readFileSync(filePath, 'utf8')
+  } catch {
+    return []
+  }
+
+  const runtime = content.replaceAll(TYPE_ONLY, '')
+  const imports = [...runtime.matchAll(SPECIFIER)].map(match => match[1])
+
+  return [...new Set(imports)]
+}
+
+// Recursive: a feature's real dependencies are not all at the top level.
+// createDataTable reaches createFilter from adapters/adapter.ts, and a
+// single-level scan reported that edge only by accident, via a type import in
+// index.ts that is not a runtime dependency at all.
+function collectFiles (dir: string): string[] {
+  const files: string[] = []
+
+  try {
+    for (const entry of readdirSync(dir)) {
+      const path = resolve(dir, entry)
+
+      if (statSync(path).isDirectory()) {
+        files.push(...collectFiles(path))
+      } else if (entry.endsWith('.ts') || entry.endsWith('.vue')) {
+        files.push(path)
+      }
+    }
+  } catch { /* empty */ }
+
+  return files
+}
+
+function scanDirectory (dir: string): Record<string, string[]> {
+  const entries = readdirSync(dir)
+  const graph: Record<string, string[]> = {}
+
+  for (const entry of entries) {
+    const entryPath = resolve(dir, entry)
+    if (!statSync(entryPath).isDirectory()) continue
+
+    const deps = collectFiles(entryPath).flatMap(file => extractV0Imports(file))
+
+    graph[entry] = [...new Set(deps)].filter(d => d !== entry).toSorted()
+  }
+
+  return graph
+}
+
+const graph: DependencyGraph = {
+  composables: scanDirectory(resolve(V0_SRC, 'composables')),
+  components: scanDirectory(resolve(V0_SRC, 'components')),
+}
+
+const outPath = resolve(__dirname, '../src/data/dependencies.json')
+writeFileSync(outPath, JSON.stringify(graph, null, 2) + '\n')
+
+console.log(
+  `Generated dependency graph: ${Object.keys(graph.composables).length} composables, ${Object.keys(graph.components).length} components`,
+)
diff --git a/apps/builder/index.html b/apps/builder/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="https://cdn.vuetifyjs.com/docs/images/one/logos/vzero.svg" />
+    <title>v0 Framework Builder</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/builder/package.json b/apps/builder/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@vuetify-private/builder",
+  "version": "1.0.0-alpha.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "generate": "tsx build/generate-dependencies.ts",
+    "dev": "pnpm generate && vite",
+    "build": "pnpm generate && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@mdi/js": "catalog:",
+    "@paper/genesis": "workspace:*",
+    "@shikijs/langs": "catalog:",
+    "@shikijs/themes": "catalog:",
+    "@vuetify/auth": "catalog:",
+    "@vuetify/v0": "workspace:*",
+    "fflate": "catalog:",
+    "pinia": "catalog:",
+    "shiki": "catalog:",
+    "vue": "catalog:",
+    "vue-router": "catalog:"
+  },
+  "devDependencies": {
+    "tsx": "catalog:",
+    "unocss": "catalog:",
+    "unplugin-vue": "catalog:",
+    "unplugin-vue-components": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-vue-layouts-next": "catalog:"
+  }
+}
diff --git a/apps/builder/src/App.vue b/apps/builder/src/App.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+  // Components
+  import AppShell from '@/components/app/AppShell.vue'
+  import PreviewPane from '@/components/preview/PreviewPane.vue'
+
+  // Utilities
+  import { toRef } from 'vue'
+  import { RouterView, useRoute } from 'vue-router'
+
+  const route = useRoute()
+
+  const split = toRef(() => route.path.startsWith('/builder'))
+</script>
+
+<template>
+  <AppShell :split>
+    <RouterView />
+
+    <template #preview>
+      <PreviewPane />
+    </template>
+  </AppShell>
+</template>
+
+<style>
+/* The fixed StepBar at the bottom is ~4rem + 1px; scroll-padding-bottom ensures
+   scroll-to targets (in-page anchors, router scrollBehavior) land above it, not
+   under. The 6rem matches the pb-24 content padding the stepped pages already use. */
+html {
+  scroll-padding-bottom: 6rem;
+}
+
+/* Shiki (defaultColor: false, dual themes) writes each token's color as a pair of
+   --shiki-light/--shiki-dark custom properties on its own span rather than as a
+   `color` declaration — nothing consumes them without this rule. apps/docs' toggle
+   assumes a `.dark` ancestor class; this app only ever sets [data-theme] on <html>
+   (createThemePlugin, target: 'html'), so the toggle keys off that instead.
+   Background is forced transparent (not shiki's own light/dark bg) so the manifest's
+   own surface — GnDocsExampleCode's --v0-pre override — shows through underneath,
+   letting GnDotGrid read behind the code text instead of being covered by it. */
+.shiki,
+.shiki span {
+  color: var(--shiki-light);
+  background-color: transparent;
+}
+
+:root[data-theme='dark'] .shiki,
+:root[data-theme='dark'] .shiki span {
+  color: var(--shiki-dark);
+}
+</style>
diff --git a/apps/builder/src/components.d.ts b/apps/builder/src/components.d.ts
@@ -0,0 +1,42 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AppShell: typeof import('./components/app/AppShell.vue')['default']
+    BuildSwitcher: typeof import('./components/app/BuildSwitcher.vue')['default']
+    ComponentInfo: typeof import('./components/ComponentInfo.vue')['default']
+    Icon: typeof import('./components/app/Icon.vue')['default']
+    MiniFrame: typeof import('./components/preview/MiniFrame.vue')['default']
+    PluginConfigShell: typeof import('./components/PluginConfigShell.vue')['default']
+    PluginInfo: typeof import('./components/PluginInfo.vue')['default']
+    PreviewBreakpoints: typeof import('./components/preview/PreviewBreakpoints.vue')['default']
+    PreviewDate: typeof import('./components/preview/PreviewDate.vue')['default']
+    PreviewFeatures: typeof import('./components/preview/PreviewFeatures.vue')['default']
+    PreviewLocale: typeof import('./components/preview/PreviewLocale.vue')['default']
+    PreviewLogger: typeof import('./components/preview/PreviewLogger.vue')['default']
+    PreviewNotifications: typeof import('./components/preview/PreviewNotifications.vue')['default']
+    PreviewPane: typeof import('./components/preview/PreviewPane.vue')['default']
+    PreviewPermissions: typeof import('./components/preview/PreviewPermissions.vue')['default']
+    PreviewReducedMotion: typeof import('./components/preview/PreviewReducedMotion.vue')['default']
+    PreviewRtl: typeof import('./components/preview/PreviewRtl.vue')['default']
+    PreviewRules: typeof import('./components/preview/PreviewRules.vue')['default']
+    PreviewStack: typeof import('./components/preview/PreviewStack.vue')['default']
+    PreviewStorage: typeof import('./components/preview/PreviewStorage.vue')['default']
+    PreviewSummary: typeof import('./components/preview/PreviewSummary.vue')['default']
+    PreviewTheme: typeof import('./components/preview/PreviewTheme.vue')['default']
+    PreviewTooltip: typeof import('./components/preview/PreviewTooltip.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    StepBar: typeof import('./components/app/StepBar.vue')['default']
+    ThemeToggle: typeof import('./components/app/ThemeToggle.vue')['default']
+  }
+}