@object-ui/cli 17.3.0 → 17.5.0

package/dist/{chunk-EV2DCI7W.js → chunk-2MZA766D.js}

@@ -1,16 +1,60 @@
 // src/commands/serve.ts
 import { createServer } from "vite";
 import react from "@vitejs/plugin-react";
-import { existsSync as existsSync2, mkdirSync as mkdirSync2 } from "fs";
-import { join as join2, resolve, relative } from "path";
+import { existsSync as existsSync3, mkdirSync as mkdirSync2 } from "fs";
+import { join as join3, resolve, relative } from "path";
 import chalk2 from "chalk";
 import { execSync } from "child_process";
 
 // src/utils/app-generator.ts
-import { readFileSync, writeFileSync, mkdirSync, readdirSync, statSync, existsSync } from "fs";
-import { join } from "path";
+import { readFileSync as readFileSync2, writeFileSync, mkdirSync, readdirSync, statSync, existsSync as existsSync2 } from "fs";
+import { dirname as dirname2, join as join2 } from "path";
 import chalk from "chalk";
 import * as yaml from "js-yaml";
+
+// src/utils/scaffold-dependencies.ts
+import { existsSync, readFileSync } from "fs";
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+var CLI_PACKAGE_NAME = "@object-ui/cli";
+var cachedCliVersion;
+function cliVersion() {
+  if (cachedCliVersion !== void 0) return cachedCliVersion;
+  let dir = dirname(fileURLToPath(import.meta.url));
+  for (; ; ) {
+    const candidate = join(dir, "package.json");
+    if (existsSync(candidate)) {
+      const manifest = JSON.parse(readFileSync(candidate, "utf-8"));
+      if (manifest.name === CLI_PACKAGE_NAME && typeof manifest.version === "string") {
+        cachedCliVersion = manifest.version;
+        return cachedCliVersion;
+      }
+    }
+    const parent = dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  throw new Error(
+    `Could not locate the ${CLI_PACKAGE_NAME} manifest to version the generated app's platform dependencies against. Refusing to write a package.json with a guessed range.`
+  );
+}
+function platformPackageRange() {
+  return `^${cliVersion()}`;
+}
+var REACT_RANGE = "19.2.8";
+var SCAFFOLD_DEV_DEPENDENCIES = {
+  "@tailwindcss/postcss": "^4.3.3",
+  "@types/react": "19.2.18",
+  "@types/react-dom": "19.2.4",
+  "@vitejs/plugin-react": "^6.0.5",
+  autoprefixer: "^10.5.4",
+  postcss: "^8.5.26",
+  tailwindcss: "^4.3.3",
+  typescript: "^6.0.3",
+  vite: "^8.2.1"
+};
+
+// src/utils/app-generator.ts
 function isSupportedSchemaFile(filename) {
   return filename.endsWith(".json") || filename.endsWith(".yml") || filename.endsWith(".yaml");
 }
@@ -18,7 +62,7 @@ function getBaseFileName(filename) {
   return filename.replace(/\.(json|yml|yaml)$/, "");
 }
 function parseSchemaFile(filePath) {
-  const content = readFileSync(filePath, "utf-8");
+  const content = readFileSync2(filePath, "utf-8");
   if (filePath.endsWith(".json")) {
     return JSON.parse(content);
   } else if (filePath.endsWith(".yml") || filePath.endsWith(".yaml")) {
@@ -31,7 +75,7 @@ function scanPagesDirectory(pagesDir) {
   const scanDir = (dir, routePrefix = "") => {
     const entries = readdirSync(dir);
     for (const entry of entries) {
-      const fullPath = join(dir, entry);
+      const fullPath = join2(dir, entry);
       const stat = statSync(fullPath);
       if (stat.isDirectory()) {
         const newPrefix = routePrefix + "/" + entry;
@@ -73,7 +117,255 @@ function scanPagesDirectory(pagesDir) {
   });
   return routes;
 }
+var PLATFORM_RUNTIME_PACKAGES = [
+  "@object-ui/react",
+  "@object-ui/components",
+  "@object-ui/plugin-charts",
+  "@object-ui/plugin-editor",
+  "@object-ui/plugin-kanban",
+  "@object-ui/plugin-markdown",
+  "@object-ui/plugin-form",
+  "@object-ui/plugin-grid",
+  "@object-ui/plugin-view"
+];
+function buildAppDependencies() {
+  const range = platformPackageRange();
+  return {
+    react: REACT_RANGE,
+    "react-dom": REACT_RANGE,
+    ...Object.fromEntries(PLATFORM_RUNTIME_PACKAGES.map((name) => [name, range]))
+  };
+}
+function buildRoutedAppDependencies() {
+  const range = platformPackageRange();
+  return {
+    react: REACT_RANGE,
+    "react-dom": REACT_RANGE,
+    "react-router-dom": "^7.18.2",
+    "lucide-react": "^1.29.0",
+    ...Object.fromEntries(PLATFORM_RUNTIME_PACKAGES.map((name) => [name, range]))
+  };
+}
+var APP_VITE_ENV_D_TS = `/// <reference types="vite/client" />
+`;
+var APP_TSCONFIG = {
+  compilerOptions: {
+    target: "ES2020",
+    useDefineForClassFields: true,
+    lib: ["ES2020", "DOM", "DOM.Iterable"],
+    module: "ESNext",
+    skipLibCheck: true,
+    moduleResolution: "bundler",
+    allowImportingTsExtensions: true,
+    resolveJsonModule: true,
+    isolatedModules: true,
+    noEmit: true,
+    jsx: "react-jsx",
+    strict: true,
+    noUnusedLocals: true,
+    noUnusedParameters: true,
+    noFallthroughCasesInSwitch: true
+  },
+  include: ["src"]
+};
+var APP_POSTCSS_CONFIG = `export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+};`;
+function currentContext() {
+  const cwd = process.cwd();
+  return { cwd, isMonorepo: existsSync2(join2(cwd, "pnpm-workspace.yaml")) };
+}
+function buildAppPackageJson(context) {
+  return {
+    name: "objectui-temp-app",
+    private: true,
+    type: "module",
+    // In monorepo, we use root node_modules, so we don't need dependencies here
+    dependencies: context.isMonorepo ? {} : buildAppDependencies(),
+    devDependencies: context.isMonorepo ? {} : { ...SCAFFOLD_DEV_DEPENDENCIES }
+  };
+}
+function buildRoutedAppPackageJson() {
+  return {
+    name: "objectui-temp-app",
+    private: true,
+    type: "module",
+    dependencies: buildRoutedAppDependencies(),
+    devDependencies: { ...SCAFFOLD_DEV_DEPENDENCIES }
+  };
+}
+function buildAppSourceDirectives(context) {
+  const sources = [`@source '../index.html';`, `@source '../src/**/*.{js,ts,jsx,tsx,json}';`];
+  if (context.isMonorepo) {
+    sources.push(`@source '${join2(context.cwd, "packages/components/src/**/*.{ts,tsx}")}';`);
+    sources.push(`@source '${join2(context.cwd, "packages/plugin-*/src/**/*.{ts,tsx}")}';`);
+  } else {
+    sources.push(`@source '../node_modules/@object-ui/*/dist/**/*.js';`);
+  }
+  return sources;
+}
+var APP_THEME_TOKENS = `@theme {
+  /* Border radius tokens */
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  /* Color tokens mapped to the CSS variables declared below */
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-sidebar: hsl(var(--sidebar));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+
+  /* Chart colors */
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+}`;
+var APP_THEME_VARIABLES = `:root {
+  color-scheme: light;
+
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
+  --radius: 0.5rem;
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+
+  /* Sidebar colors */
+  --sidebar: 0 0% 98%;
+  --sidebar-foreground: 240 5.3% 26.1%;
+  --sidebar-primary: 240 5.9% 10%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 240 4.8% 95.9%;
+  --sidebar-accent-foreground: 240 5.9% 10%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
+}
+
+.dark {
+  color-scheme: dark;
+
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 212.7 26.8% 83.9%;
+  --chart-1: 220 70% 50%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+
+  /* Sidebar colors for dark mode */
+  --sidebar: 240 5.9% 10%;
+  --sidebar-foreground: 240 4.8% 95.9%;
+  --sidebar-primary: 224.3 76.3% 48%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 240 3.7% 15.9%;
+  --sidebar-accent-foreground: 240 4.8% 95.9%;
+  --sidebar-border: 240 3.7% 15.9%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
+}`;
+function buildAppIndexCss(context) {
+  return `@import 'tailwindcss';
+
+/* Class-based dark variant: follow \`.dark\` on <html> \u2014 the routed app's
+   \`src/theme-provider.tsx\` toggles exactly that class \u2014 instead of the OS
+   \`prefers-color-scheme\`. Same spelling as packages/components/src/index.css. */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Sources to scan for utility classes (v4's replacement for v3 \`content\`) */
+${buildAppSourceDirectives(context).join("\n")}
+
+${APP_THEME_TOKENS}
+
+${APP_THEME_VARIABLES}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  min-height: 100vh;
+}`;
+}
+function writeGeneratedFiles(tmpDir, files) {
+  for (const [relativePath, contents] of Object.entries(files)) {
+    const target = join2(tmpDir, relativePath);
+    mkdirSync(dirname2(target), { recursive: true });
+    writeFileSync(target, contents);
+  }
+}
 function createTempApp(tmpDir, schema) {
+  writeGeneratedFiles(tmpDir, buildAppFiles(schema, currentContext()));
+}
+function buildAppFiles(schema, context) {
   const html = `<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -86,9 +378,6 @@ function createTempApp(tmpDir, schema) {
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>`;
-  writeFileSync(join(tmpDir, "index.html"), html);
-  const srcDir = join(tmpDir, "src");
-  mkdirSync(srcDir, { recursive: true });
   const mainTsx = `import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
@@ -99,7 +388,6 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
     <App />
   </React.StrictMode>
 );`;
-  writeFileSync(join(srcDir, "main.tsx"), mainTsx);
   const appTsx = `import { SchemaRenderer } from '@object-ui/react';
 import '@object-ui/components';
 import '@object-ui/plugin-charts';
@@ -117,256 +405,22 @@ function App() {
 }
 
 export default App;`;
-  writeFileSync(join(srcDir, "App.tsx"), appTsx);
-  const indexCss = `@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}`;
-  writeFileSync(join(srcDir, "index.css"), indexCss);
-  const tailwindConfig = `/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: ['class'],
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    extend: {
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        chart: {
-          1: 'hsl(var(--chart-1))',
-          2: 'hsl(var(--chart-2))',
-          3: 'hsl(var(--chart-3))',
-          4: 'hsl(var(--chart-4))',
-          5: 'hsl(var(--chart-5))',
-        },
-      },
-    },
-  },
-  plugins: [],
-};`;
-  const cwd = process.cwd();
-  const isMonorepo = existsSync(join(cwd, "pnpm-workspace.yaml"));
-  const contentPaths = ["'./index.html'", "'./src/**/*.{js,ts,jsx,tsx,json}'"];
-  if (isMonorepo) {
-    const componentsPath = join(cwd, "packages/components/src/**/*.{ts,tsx}");
-    const pluginsPath = join(cwd, "packages/plugin-*/src/**/*.{ts,tsx}");
-    contentPaths.push(`'${componentsPath}'`);
-    contentPaths.push(`'${pluginsPath}'`);
-  }
-  const finalTailwindConfig = `/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: ['class'],
-  content: [${contentPaths.join(", ")}],
-  theme: {
-    extend: {
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        chart: {
-          1: 'hsl(var(--chart-1))',
-          2: 'hsl(var(--chart-2))',
-          3: 'hsl(var(--chart-3))',
-          4: 'hsl(var(--chart-4))',
-          5: 'hsl(var(--chart-5))',
-        },
-      },
-    },
-  },
-  plugins: [],
-};`;
-  writeFileSync(join(tmpDir, "tailwind.config.js"), finalTailwindConfig);
-  const finalPostcssConfig = `export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};`;
-  writeFileSync(join(tmpDir, "postcss.config.js"), finalPostcssConfig);
-  const baseDependencies = {
-    react: "^18.3.1",
-    "react-dom": "^18.3.1",
-    "@object-ui/react": "^0.1.0",
-    "@object-ui/components": "^0.1.0"
-  };
-  const baseDevDependencies = {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.2.1",
-    autoprefixer: "^10.4.23",
-    postcss: "^8.5.6",
-    tailwindcss: "^3.4.19",
-    typescript: "~5.7.3",
-    vite: "^5.0.0"
-  };
-  const packageJson = {
-    name: "objectui-temp-app",
-    private: true,
-    type: "module",
-    // In monorepo, we use root node_modules, so we don't need dependencies here
-    dependencies: isMonorepo ? {} : baseDependencies,
-    devDependencies: isMonorepo ? {} : baseDevDependencies
-  };
-  writeFileSync(join(tmpDir, "package.json"), JSON.stringify(packageJson, null, 2));
-  const tsconfig = {
-    compilerOptions: {
-      target: "ES2020",
-      useDefineForClassFields: true,
-      lib: ["ES2020", "DOM", "DOM.Iterable"],
-      module: "ESNext",
-      skipLibCheck: true,
-      moduleResolution: "bundler",
-      allowImportingTsExtensions: true,
-      resolveJsonModule: true,
-      isolatedModules: true,
-      noEmit: true,
-      jsx: "react-jsx",
-      strict: true,
-      noUnusedLocals: true,
-      noUnusedParameters: true,
-      noFallthroughCasesInSwitch: true
-    },
-    include: ["src"]
+  return {
+    "index.html": html,
+    "src/main.tsx": mainTsx,
+    "src/App.tsx": appTsx,
+    "src/vite-env.d.ts": APP_VITE_ENV_D_TS,
+    "src/index.css": buildAppIndexCss(context),
+    "postcss.config.js": APP_POSTCSS_CONFIG,
+    "package.json": JSON.stringify(buildAppPackageJson(context), null, 2),
+    "tsconfig.json": JSON.stringify(APP_TSCONFIG, null, 2)
   };
-  writeFileSync(join(tmpDir, "tsconfig.json"), JSON.stringify(tsconfig, null, 2));
 }
 function createTempAppWithRouting(tmpDir, routes, appConfig) {
+  writeGeneratedFiles(tmpDir, buildRoutedAppFiles(routes, appConfig, currentContext()));
+}
+function buildRoutedAppFiles(routes, appConfig, context) {
+  const files = {};
   const html = `<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -379,20 +433,13 @@ function createTempAppWithRouting(tmpDir, routes, appConfig) {
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>`;
-  writeFileSync(join(tmpDir, "index.html"), html);
-  const srcDir = join(tmpDir, "src");
-  mkdirSync(srcDir, { recursive: true });
-  const schemasDir = join(srcDir, "schemas");
-  mkdirSync(schemasDir, { recursive: true });
+  files["index.html"] = html;
   const schemaImports = [];
   const routeComponents = [];
   routes.forEach((route, index) => {
     const schemaVarName = `schema${index}`;
     const schemaFileName = `page${index}.json`;
-    writeFileSync(
-      join(schemasDir, schemaFileName),
-      JSON.stringify(route.schema, null, 2)
-    );
+    files[`src/schemas/${schemaFileName}`] = JSON.stringify(route.schema, null, 2);
     schemaImports.push(`import ${schemaVarName} from './schemas/${schemaFileName}';`);
     routeComponents.push(`        <Route path="${route.path}" element={<SchemaRenderer schema={${schemaVarName}} />} />`);
   });
@@ -469,7 +516,7 @@ export const useTheme = () => {
 
   return context
 }`;
-  writeFileSync(join(srcDir, "theme-provider.tsx"), themeProviderTsx);
+  files["src/theme-provider.tsx"] = themeProviderTsx;
   const mainTsx = `import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
@@ -483,19 +530,18 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
     </ThemeProvider>
   </React.StrictMode>
 );`;
-  writeFileSync(join(srcDir, "main.tsx"), mainTsx);
+  files["src/main.tsx"] = mainTsx;
   let layoutImport = "";
   let layoutWrapperStart = "";
   let layoutWrapperEnd = "";
   if (appConfig) {
     const layoutCode = `
+import type { ComponentType, ReactNode } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import * as LucideIcons from 'lucide-react';
 import { Moon, Sun } from "lucide-react"
 import { useTheme } from "./theme-provider"
-import { 
-  cn,
-  Button,
+import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -507,8 +553,6 @@ import {
   SidebarHeader,
   SidebarRail,
   SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
   SidebarMenu,
   SidebarMenuItem,
   SidebarMenuButton,
@@ -521,11 +565,36 @@ import {
   Collapsible,
   CollapsibleTrigger,
   CollapsibleContent
-} from '@object-ui/components'; 
+} from '@object-ui/components';
+
+/** One entry of \`app.json\`'s \`menu\`, as this layout reads it. */
+type MenuItem = {
+  label?: string;
+  path?: string;
+  icon?: string;
+  children?: MenuItem[];
+};
+
+/** The \`app.json\` fields this layout renders. */
+type AppConfig = {
+  title?: string;
+  logo?: string;
+  menu?: MenuItem[];
+};
+
+// Lucide publishes every icon as a named export, and a menu entry names one as
+// a string \u2014 so the lookup is a runtime index into the namespace object, which
+// has no index signature. Narrowing it to the component-by-name shape this file
+// actually uses keeps that honest without an \`any\` or a \`@ts-expect-error\`; the
+// \`undefined\` arm is real, since the namespace also exports helpers that are not
+// components and a schema may name an icon that does not exist.
+const lucideIcons = LucideIcons as unknown as Record<
+  string,
+  ComponentType<{ className?: string }> | undefined
+>;
 
-const DynamicIcon = ({ name, className }) => {
-  // @ts-expect-error - Dynamic icon lookup from Lucide icons
-  const Icon = LucideIcons[name];
+const DynamicIcon = ({ name, className }: { name: string; className?: string }) => {
+  const Icon = lucideIcons[name];
   if (!Icon) return null;
   return <Icon className={className} />;
 };
@@ -566,7 +635,7 @@ export function ModeToggle() {
   )
 }
 
-const AppLayout = ({ app, children }) => {
+const AppLayout = ({ app, children }: { app: AppConfig; children: ReactNode }) => {
   const location = useLocation();
   const menu = app.menu || [];
   
@@ -668,13 +737,13 @@ const AppLayout = ({ app, children }) => {
 
 export default AppLayout;
 `;
-    writeFileSync(join(srcDir, "Layout.tsx"), layoutCode);
+    files["src/Layout.tsx"] = layoutCode;
     layoutImport = `import AppLayout from './Layout';
 const appConfig = ${JSON.stringify(appConfig)};`;
     layoutWrapperStart = `<AppLayout app={appConfig}>`;
     layoutWrapperEnd = `</AppLayout>`;
   }
-  const appTsx = `import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
+  const appTsx = `import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { SchemaRenderer } from '@object-ui/react';
 import '@object-ui/components';
 import '@object-ui/plugin-charts';
@@ -700,202 +769,20 @@ ${routeComponents.join("\n")}
 }
 
 export default App;`;
-  writeFileSync(join(srcDir, "App.tsx"), appTsx);
-  const indexCss = `@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground font-sans antialiased min-h-screen;
-  }
-}`;
-  writeFileSync(join(srcDir, "index.css"), indexCss);
-  const cwd = process.cwd();
-  const isMonorepo = existsSync(join(cwd, "pnpm-workspace.yaml"));
-  const contentPaths = ["'./index.html'", "'./src/**/*.{js,ts,jsx,tsx,json}'"];
-  if (isMonorepo) {
-    const componentsPath = join(cwd, "packages/components/src/**/*.{ts,tsx}");
-    const pluginsPath = join(cwd, "packages/plugin-*/src/**/*.{ts,tsx}");
-    contentPaths.push(`'${componentsPath}'`);
-    contentPaths.push(`'${pluginsPath}'`);
-  }
-  const tailwindConfig = `/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: ['class'],
-  content: [${contentPaths.join(", ")}],
-  theme: {
-    extend: {
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        chart: {
-          1: 'hsl(var(--chart-1))',
-          2: 'hsl(var(--chart-2))',
-          3: 'hsl(var(--chart-3))',
-          4: 'hsl(var(--chart-4))',
-          5: 'hsl(var(--chart-5))',
-        },
-      },
-    },
-  },
-  plugins: [],
-};`;
-  writeFileSync(join(tmpDir, "tailwind.config.js"), tailwindConfig);
-  const postcssConfig = `export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};`;
-  writeFileSync(join(tmpDir, "postcss.config.js"), postcssConfig);
-  const packageJson = {
-    name: "objectui-temp-app",
-    private: true,
-    type: "module",
-    dependencies: {
-      react: "^18.3.1",
-      "react-dom": "^18.3.1",
-      "react-router-dom": "^7.12.0",
-      "@object-ui/react": "^0.1.0",
-      "@object-ui/components": "^0.1.0"
-    },
-    devDependencies: {
-      "@types/react": "^18.3.12",
-      "@types/react-dom": "^18.3.1",
-      "@vitejs/plugin-react": "^4.2.1",
-      autoprefixer: "^10.4.23",
-      postcss: "^8.5.6",
-      tailwindcss: "^3.4.19",
-      typescript: "~5.7.3",
-      vite: "^5.0.0"
-    }
-  };
-  writeFileSync(join(tmpDir, "package.json"), JSON.stringify(packageJson, null, 2));
-  const tsconfig = {
-    compilerOptions: {
-      target: "ES2020",
-      useDefineForClassFields: true,
-      lib: ["ES2020", "DOM", "DOM.Iterable"],
-      module: "ESNext",
-      skipLibCheck: true,
-      moduleResolution: "bundler",
-      allowImportingTsExtensions: true,
-      resolveJsonModule: true,
-      isolatedModules: true,
-      noEmit: true,
-      jsx: "react-jsx",
-      strict: true,
-      noUnusedLocals: true,
-      noUnusedParameters: true,
-      noFallthroughCasesInSwitch: true
-    },
-    include: ["src"]
-  };
-  writeFileSync(join(tmpDir, "tsconfig.json"), JSON.stringify(tsconfig, null, 2));
+  files["src/App.tsx"] = appTsx;
+  files["src/vite-env.d.ts"] = APP_VITE_ENV_D_TS;
+  files["src/index.css"] = buildAppIndexCss(context);
+  files["postcss.config.js"] = APP_POSTCSS_CONFIG;
+  files["package.json"] = JSON.stringify(buildRoutedAppPackageJson(), null, 2);
+  files["tsconfig.json"] = JSON.stringify(APP_TSCONFIG, null, 2);
+  return files;
 }
 
 // src/commands/serve.ts
 async function serve(schemaPath, options) {
   const cwd = process.cwd();
-  const pagesDir = join2(cwd, "pages");
-  const hasPagesDir = existsSync2(pagesDir);
+  const pagesDir = join3(cwd, "pages");
+  const hasPagesDir = existsSync3(pagesDir);
   let routes = [];
   let schema = null;
   let useFileSystemRouting = false;
@@ -912,7 +799,7 @@ async function serve(schemaPath, options) {
     });
   } else {
     const fullSchemaPath = resolve(cwd, schemaPath);
-    if (!existsSync2(fullSchemaPath)) {
+    if (!existsSync3(fullSchemaPath)) {
       throw new Error(`Schema file not found: ${schemaPath}
 Run 'objectui init' to create a sample schema.`);
     }
@@ -923,7 +810,7 @@ Run 'objectui init' to create a sample schema.`);
       throw new Error(`Invalid schema file: ${error instanceof Error ? error.message : error}`);
     }
   }
-  const tmpDir = join2(cwd, ".objectui-tmp");
+  const tmpDir = join3(cwd, ".objectui-tmp");
   mkdirSync2(tmpDir, { recursive: true });
   if (useFileSystemRouting) {
     createTempAppWithRouting(tmpDir, routes);
@@ -967,8 +854,8 @@ Run 'objectui init' to create a sample schema.`);
 }
 
 // src/commands/init.ts
-import { existsSync as existsSync3, writeFileSync as writeFileSync2, mkdirSync as mkdirSync3 } from "fs";
-import { join as join3 } from "path";
+import { existsSync as existsSync4, writeFileSync as writeFileSync2, mkdirSync as mkdirSync3 } from "fs";
+import { dirname as dirname3, join as join4 } from "path";
 import chalk3 from "chalk";
 var templates = {
   simple: {
@@ -1312,29 +1199,35 @@ var templates = {
     ]
   }
 };
-async function init(name, options) {
-  const cwd = process.cwd();
-  const projectDir = join3(cwd, name);
-  if (existsSync3(projectDir) && name !== ".") {
-    throw new Error(`Directory "${name}" already exists. Please choose a different name.`);
-  }
-  const targetDir = name === "." ? cwd : projectDir;
-  if (name !== ".") {
-    mkdirSync3(projectDir, { recursive: true });
-  }
-  console.log(chalk3.blue("\u{1F3A8} Creating Object UI application..."));
-  console.log(chalk3.dim(`   Template: ${options.template}`));
-  console.log();
-  const template = templates[options.template];
+function buildInitPackageJson(name) {
+  const platformRange = platformPackageRange();
+  return {
+    name,
+    version: "0.1.0",
+    private: true,
+    type: "module",
+    scripts: {
+      dev: "vite",
+      build: "tsc && vite build",
+      preview: "vite preview"
+    },
+    dependencies: {
+      "@object-ui/components": platformRange,
+      "@object-ui/react": platformRange,
+      react: REACT_RANGE,
+      "react-dom": REACT_RANGE
+    },
+    devDependencies: { ...SCAFFOLD_DEV_DEPENDENCIES }
+  };
+}
+function buildInitFiles(name, templateName) {
+  const template = templates[templateName];
   if (!template) {
     throw new Error(
-      `Unknown template: ${options.template}
+      `Unknown template: ${templateName}
 Available templates: ${Object.keys(templates).join(", ")}`
     );
   }
-  const schemaPath = join3(targetDir, "app.json");
-  writeFileSync2(schemaPath, JSON.stringify(template, null, 2));
-  console.log(chalk3.green("\u2713 Created app.json"));
   const readme = `# ${name}
 
 An Object UI application built from JSON schemas.
@@ -1377,46 +1270,12 @@ Edit \`app.json\` to customize your application. The dev server will automatical
 
 Built with \u2764\uFE0F using [Object UI](https://www.objectui.org)
 `;
-  writeFileSync2(join3(targetDir, "README.md"), readme);
-  console.log(chalk3.green("\u2713 Created README.md"));
   const gitignore = `.objectui-tmp
 node_modules
 dist
 .DS_Store
 *.log
 `;
-  writeFileSync2(join3(targetDir, ".gitignore"), gitignore);
-  console.log(chalk3.green("\u2713 Created .gitignore"));
-  const packageJson = {
-    name,
-    version: "0.1.0",
-    private: true,
-    type: "module",
-    scripts: {
-      dev: "vite",
-      build: "tsc && vite build",
-      preview: "vite preview"
-    },
-    dependencies: {
-      "@object-ui/components": "^2.0.0",
-      "@object-ui/react": "^2.0.0",
-      react: "^19.2.0",
-      "react-dom": "^19.2.0"
-    },
-    devDependencies: {
-      "@tailwindcss/postcss": "^4.1.18",
-      "@types/react": "^19.2.13",
-      "@types/react-dom": "^19.2.6",
-      "@vitejs/plugin-react": "^5.1.3",
-      autoprefixer: "^10.4.23",
-      postcss: "^8.5.6",
-      tailwindcss: "^4.1.18",
-      typescript: "^5.9.3",
-      vite: "^7.3.1"
-    }
-  };
-  writeFileSync2(join3(targetDir, "package.json"), JSON.stringify(packageJson, null, 2));
-  console.log(chalk3.green("\u2713 Created package.json"));
   const viteConfig = `import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
@@ -1427,15 +1286,6 @@ export default defineConfig({
   },
 });
 `;
-  writeFileSync2(join3(targetDir, "vite.config.ts"), viteConfig);
-  console.log(chalk3.green("\u2713 Created vite.config.ts"));
-  const tailwindConfig = `/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./index.html', './src/**/*.{ts,tsx}'],
-};
-`;
-  writeFileSync2(join3(targetDir, "tailwind.config.js"), tailwindConfig);
-  console.log(chalk3.green("\u2713 Created tailwind.config.js"));
   const postcssConfig = `export default {
   plugins: {
     '@tailwindcss/postcss': {},
@@ -1443,8 +1293,6 @@ export default {
   },
 };
 `;
-  writeFileSync2(join3(targetDir, "postcss.config.js"), postcssConfig);
-  console.log(chalk3.green("\u2713 Created postcss.config.js"));
   const indexHtml = `<!doctype html>
 <html lang="en">
   <head>
@@ -1458,14 +1306,9 @@ export default {
   </body>
 </html>
 `;
-  writeFileSync2(join3(targetDir, "index.html"), indexHtml);
-  console.log(chalk3.green("\u2713 Created index.html"));
-  const srcDir = join3(targetDir, "src");
-  mkdirSync3(srcDir, { recursive: true });
   const indexCss = `@import 'tailwindcss';
+@import '@object-ui/components/style.css';
 `;
-  writeFileSync2(join3(srcDir, "index.css"), indexCss);
-  console.log(chalk3.green("\u2713 Created src/index.css"));
   const mainTsx = `import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
@@ -1477,17 +1320,18 @@ createRoot(document.getElementById('root')!).render(
   </StrictMode>,
 );
 `;
-  writeFileSync2(join3(srcDir, "main.tsx"), mainTsx);
-  console.log(chalk3.green("\u2713 Created src/main.tsx"));
   const appTsx = `import { SchemaRenderer } from '@object-ui/react';
+// Registers the component renderers SchemaRenderer looks up. Side-effect
+// import \u2014 removing it makes every node render "Unknown component type".
+import '@object-ui/components';
 import schema from '../app.json';
 
 export default function App() {
   return <SchemaRenderer schema={schema} />;
 }
 `;
-  writeFileSync2(join3(srcDir, "App.tsx"), appTsx);
-  console.log(chalk3.green("\u2713 Created src/App.tsx"));
+  const viteEnvDts = `/// <reference types="vite/client" />
+`;
   const tsconfig = {
     compilerOptions: {
       target: "ES2020",
@@ -1509,8 +1353,42 @@ export default function App() {
     },
     include: ["src"]
   };
-  writeFileSync2(join3(targetDir, "tsconfig.json"), JSON.stringify(tsconfig, null, 2));
-  console.log(chalk3.green("\u2713 Created tsconfig.json"));
+  return {
+    "app.json": JSON.stringify(template, null, 2),
+    "README.md": readme,
+    ".gitignore": gitignore,
+    "package.json": JSON.stringify(buildInitPackageJson(name), null, 2),
+    "vite.config.ts": viteConfig,
+    "postcss.config.js": postcssConfig,
+    "index.html": indexHtml,
+    "src/index.css": indexCss,
+    "src/main.tsx": mainTsx,
+    "src/App.tsx": appTsx,
+    "src/vite-env.d.ts": viteEnvDts,
+    "tsconfig.json": JSON.stringify(tsconfig, null, 2)
+  };
+}
+async function init(name, options) {
+  const cwd = process.cwd();
+  const projectDir = join4(cwd, name);
+  if (existsSync4(projectDir) && name !== ".") {
+    throw new Error(`Directory "${name}" already exists. Please choose a different name.`);
+  }
+  const targetDir = name === "." ? cwd : projectDir;
+  if (name !== ".") {
+    mkdirSync3(projectDir, { recursive: true });
+  }
+  console.log(chalk3.blue("\u{1F3A8} Creating Object UI application..."));
+  console.log(chalk3.dim(`   Template: ${options.template}`));
+  console.log();
+  for (const [relativePath, contents] of Object.entries(
+    buildInitFiles(name, options.template)
+  )) {
+    const target = join4(targetDir, relativePath);
+    mkdirSync3(dirname3(target), { recursive: true });
+    writeFileSync2(target, contents);
+    console.log(chalk3.green(`\u2713 Created ${relativePath}`));
+  }
   console.log();
   console.log(chalk3.green("\u2728 Application created successfully!"));
   console.log();
@@ -1534,4 +1412,4 @@ export {
   serve,
   init
 };
-//# sourceMappingURL=chunk-EV2DCI7W.js.map
+//# sourceMappingURL=chunk-2MZA766D.js.map