@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/scaffolding.js

@@ -0,0 +1,897 @@
+import { existsSync, mkdirSync } from "node:fs";
+import { join, dirname, basename } from "node:path";
+import { execSync } from "node:child_process";
+export const PROJECT_TEMPLATES = {
+  default: {
+    description: "Standard stx project with pages, components, and stores",
+    features: ["Pages", "Components", "Layouts", "Stores", "Dev server"]
+  },
+  minimal: {
+    description: "Minimal setup with just the essentials",
+    features: ["Single page", "Basic styles"]
+  },
+  full: {
+    description: "Full-featured project with all stx capabilities",
+    features: ["Pages", "Components", "Layouts", "Stores", "API routes", "PWA", "i18n", "Testing"]
+  },
+  blog: {
+    description: "Blog template with markdown support",
+    features: ["Blog layout", "Post pages", "Tags", "RSS feed", "Markdown"]
+  },
+  dashboard: {
+    description: "Admin dashboard template",
+    features: ["Sidebar", "Charts", "Tables", "Forms", "Auth pages"]
+  },
+  landing: {
+    description: "Marketing landing page template",
+    features: ["Hero section", "Features", "Pricing", "CTA", "Contact form"]
+  }
+};
+export async function createProject(projectName, options = {}) {
+  const result = {
+    success: !0,
+    message: "",
+    files: [],
+    errors: []
+  }, template = options.template || "default", projectPath = join(process.cwd(), projectName);
+  if (existsSync(projectPath)) {
+    result.success = !1;
+    result.message = `Directory ${projectName} already exists`;
+    return result;
+  }
+  try {
+    mkdirSync(projectPath, { recursive: !0 });
+    const dirs = getProjectDirs(template);
+    for (const dir of dirs)
+      mkdirSync(join(projectPath, dir), { recursive: !0 });
+    const files = getProjectFiles(template, projectName, options);
+    for (const [filePath, content] of Object.entries(files)) {
+      const fullPath = join(projectPath, filePath);
+      ensureDir(dirname(fullPath));
+      await Bun.write(fullPath, content);
+      result.files.push(filePath);
+    }
+    if (!options.skipGit)
+      try {
+        execSync("git init", { cwd: projectPath, stdio: "ignore" });
+        await Bun.write(join(projectPath, ".gitignore"), getGitignore());
+        result.files.push(".gitignore");
+      } catch {
+        result.errors.push("Failed to initialize git repository");
+      }
+    if (!options.skipInstall) {
+      const pm = options.packageManager || detectPackageManager();
+      try {
+        console.log(`
+Installing dependencies with ${pm}...`);
+        execSync(`${pm} install`, { cwd: projectPath, stdio: "inherit" });
+      } catch {
+        result.errors.push("Failed to install dependencies");
+      }
+    }
+    result.message = `Created project: ${projectName}`;
+    console.log(`
+\u2705 ${result.message}
+
+Next steps:
+  cd ${projectName}
+  ${options.packageManager || "bun"} run dev
+`);
+  } catch (error) {
+    result.success = !1;
+    result.message = `Failed to create project: ${error}`;
+  }
+  return result;
+}
+function getProjectDirs(template) {
+  const baseDirs = ["pages", "components", "layouts", "partials", "public"];
+  switch (template) {
+    case "minimal":
+      return ["src", "public"];
+    case "full":
+      return [...baseDirs, "src/stores", "src/api", "src/i18n", "src/utils", "test"];
+    case "blog":
+      return [...baseDirs, "src/posts", "src/utils"];
+    case "dashboard":
+      return [...baseDirs, "src/stores", "src/api", "src/utils"];
+    case "landing":
+      return [...baseDirs, "src/sections"];
+    default:
+      return [...baseDirs, "src/stores"];
+  }
+}
+function getProjectFiles(template, projectName, options) {
+  const files = {};
+  files["package.json"] = getPackageJson(projectName, template, options);
+  files["stx.config.ts"] = getStxConfig(template, options);
+  files["README.md"] = getReadme(projectName, template);
+  if (options.typescript !== !1)
+    files["tsconfig.json"] = getTsConfig();
+  switch (template) {
+    case "minimal":
+      files["src/index.stx"] = getMinimalPage();
+      break;
+    case "blog":
+      files["pages/index.stx"] = getBlogIndexPage();
+      files["pages/[slug].stx"] = getBlogPostPage();
+      files["layouts/app.stx"] = getBlogLayout();
+      files["components/PostCard.stx"] = getPostCardComponent();
+      break;
+    case "dashboard":
+      files["pages/index.stx"] = getDashboardIndexPage();
+      files["pages/settings.stx"] = getDashboardSettingsPage();
+      files["layouts/app.stx"] = getDashboardLayout();
+      files["components/Sidebar.stx"] = getSidebarComponent();
+      files["components/StatsCard.stx"] = getStatsCardComponent();
+      files["src/stores/dashboard.ts"] = getDashboardStore();
+      break;
+    case "landing":
+      files["pages/index.stx"] = getLandingPage();
+      files["layouts/app.stx"] = getLandingLayout();
+      files["src/sections/Hero.stx"] = getHeroSection();
+      files["src/sections/Features.stx"] = getFeaturesSection();
+      files["src/sections/Pricing.stx"] = getPricingSection();
+      files["components/Button.stx"] = getButtonComponent();
+      break;
+    case "full":
+      files["pages/index.stx"] = getDefaultIndexPage();
+      files["pages/about.stx"] = getAboutPage();
+      files["layouts/app.stx"] = getDefaultLayout();
+      files["components/Header.stx"] = getHeaderComponent();
+      files["components/Footer.stx"] = getFooterComponent();
+      files["src/stores/app.ts"] = getAppStore();
+      files["src/i18n/en.json"] = getI18nFile("en");
+      files["test/example.test.ts"] = getTestFile();
+      break;
+    default:
+      files["pages/index.stx"] = getDefaultIndexPage();
+      files["layouts/app.stx"] = getDefaultLayout();
+      files["components/Header.stx"] = getHeaderComponent();
+      files["components/Footer.stx"] = getFooterComponent();
+      files["src/stores/app.ts"] = getAppStore();
+  }
+  return files;
+}
+export async function addComponent(name, options = {}) {
+  const result = { success: !0, message: "", files: [], errors: [] }, dir = options.dir || "components", componentName = toPascalCase(name), filePath = join(dir, `${componentName}.stx`);
+  if (await Bun.file(filePath).exists() && !options.force) {
+    result.success = !1;
+    result.message = `Component ${componentName} already exists. Use --force to overwrite.`;
+    return result;
+  }
+  try {
+    ensureDir(dir);
+    const content = generateComponent(componentName, options);
+    await Bun.write(filePath, content);
+    result.files.push(filePath);
+    result.message = `Created component: ${filePath}`;
+    console.log(`\u2705 ${result.message}`);
+  } catch (error) {
+    result.success = !1;
+    result.message = `Failed to create component: ${error}`;
+  }
+  return result;
+}
+export async function addPage(name, options = {}) {
+  const result = { success: !0, message: "", files: [], errors: [] }, dir = options.dir || "pages", pageName = name.toLowerCase().replace(/\s+/g, "-"), filePath = join(dir, `${pageName}.stx`);
+  if (await Bun.file(filePath).exists() && !options.force) {
+    result.success = !1;
+    result.message = `Page ${pageName} already exists. Use --force to overwrite.`;
+    return result;
+  }
+  try {
+    ensureDir(dir);
+    const content = generatePage(pageName, options);
+    await Bun.write(filePath, content);
+    result.files.push(filePath);
+    result.message = `Created page: ${filePath}`;
+    console.log(`\u2705 ${result.message}`);
+  } catch (error) {
+    result.success = !1;
+    result.message = `Failed to create page: ${error}`;
+  }
+  return result;
+}
+export async function addStore(name, options = {}) {
+  const result = { success: !0, message: "", files: [], errors: [] }, dir = options.dir || "src/stores", storeName = toCamelCase(name), filePath = join(dir, `${storeName}.ts`);
+  if (await Bun.file(filePath).exists() && !options.force) {
+    result.success = !1;
+    result.message = `Store ${storeName} already exists. Use --force to overwrite.`;
+    return result;
+  }
+  try {
+    ensureDir(dir);
+    const content = generateStore(storeName, options);
+    await Bun.write(filePath, content);
+    result.files.push(filePath);
+    result.message = `Created store: ${filePath}`;
+    console.log(`\u2705 ${result.message}`);
+  } catch (error) {
+    result.success = !1;
+    result.message = `Failed to create store: ${error}`;
+  }
+  return result;
+}
+export async function addLayout(name, options = {}) {
+  const result = { success: !0, message: "", files: [], errors: [] }, dir = options.dir || "layouts", layoutName = name.toLowerCase().replace(/\s+/g, "-"), filePath = join(dir, `${layoutName}.stx`);
+  if (await Bun.file(filePath).exists() && !options.force) {
+    result.success = !1;
+    result.message = `Layout ${layoutName} already exists. Use --force to overwrite.`;
+    return result;
+  }
+  try {
+    ensureDir(dir);
+    const content = generateLayout(layoutName, options);
+    await Bun.write(filePath, content);
+    result.files.push(filePath);
+    result.message = `Created layout: ${filePath}`;
+    console.log(`\u2705 ${result.message}`);
+  } catch (error) {
+    result.success = !1;
+    result.message = `Failed to create layout: ${error}`;
+  }
+  return result;
+}
+function generateComponent(name, options) {
+  const lines = [];
+  lines.push(`{{-- Component: ${name} --}}`);
+  if (options.props !== !1)
+    lines.push(`<script>
+// Props
+const title = props.title || '${name}'
+const variant = props.variant || 'default'
+</script>
+`);
+  lines.push(`<div class="${toKebabCase(name)} ${toKebabCase(name)}--{{ variant }}">
+  <h3>{{ title }}</h3>
+  <div class="${toKebabCase(name)}__content">
+    {{ slot }}
+  </div>
+</div>`);
+  if (options.styles !== !1)
+    lines.push(`
+<style scoped>
+.${toKebabCase(name)} {
+  padding: 1rem;
+  border-radius: 8px;
+  background: #f8f9fa;
+}
+
+.${toKebabCase(name)}--primary {
+  border-left: 3px solid #3498db;
+}
+
+.${toKebabCase(name)}--success {
+  border-left: 3px solid #2ecc71;
+}
+
+.${toKebabCase(name)}__content {
+  margin-top: 0.5rem;
+}
+</style>`);
+  return lines.join(`
+`);
+}
+function generatePage(name, options) {
+  const title = toPascalCase(name.replace(/-/g, " ")), lines = [];
+  lines.push(`<script>
+const title = '${title}'
+const description = 'Page description'
+</script>
+`);
+  if (options.layout)
+    lines.push(`@layout('${options.layout}')
+`);
+  if (options.dynamic)
+    lines.push(`{{-- Dynamic route: /pages/[${name}].stx --}}
+{{-- Access params via props.params --}}
+`);
+  lines.push(`@section('content')
+<div class="page-${name}">
+  <h1>{{ title }}</h1>
+  <p>{{ description }}</p>
+</div>
+@endsection`);
+  return lines.join(`
+`);
+}
+function generateStore(name, options) {
+  const storeName = `${name}Store`, stateType = `${toPascalCase(name)}State`;
+  let content = `import { defineStore } from 'stx'
+
+interface ${stateType} {
+  // Add your state properties here
+  count: number
+  loading: boolean
+}
+
+export const ${storeName} = defineStore('${name}', {
+  state: (): ${stateType} => ({
+    count: 0,
+    loading: false,
+  }),
+
+  getters: {
+    doubleCount(): number {
+      return this.count * 2
+    },
+  },
+`;
+  if (options.actions !== !1)
+    content += `
+  actions: {
+    increment() {
+      this.count++
+    },
+
+    decrement() {
+      this.count--
+    },
+
+    async fetchData() {
+      this.loading = true
+      try {
+        // Add your async logic here
+        await new Promise(resolve => setTimeout(resolve, 1000))
+      }
+finally {
+        this.loading = false
+      }
+    },
+  },
+`;
+  if (options.persist)
+    content += `
+  persist: {
+    enabled: true,
+    strategies: [
+      { key: '${name}', storage: localStorage },
+    ],
+  },
+`;
+  content += `})
+`;
+  return content;
+}
+function generateLayout(name, options) {
+  let content = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>@yield('title', 'My App')</title>
+  @yield('head')
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: system-ui, sans-serif;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+    main {
+      flex: 1;
+      padding: 2rem;
+      max-width: 1200px;
+      margin: 0 auto;
+      width: 100%;
+    }
+  </style>
+  @yield('styles')
+</head>
+<body>
+`;
+  if (options.nav !== !1)
+    content += `  <header class="header">
+    <nav class="nav">
+      <a href="/" class="nav__logo">Logo</a>
+      <div class="nav__links">
+        <a href="/">Home</a>
+        <a href="/about">About</a>
+        <a href="/contact">Contact</a>
+      </div>
+    </nav>
+  </header>
+
+`;
+  content += `  <main>
+    {{ slot }}
+  </main>
+
+`;
+  if (options.footer !== !1)
+    content += `  <footer class="footer">
+    <p>&copy; {{ new Date().getFullYear() }} My App. All rights reserved.</p>
+  </footer>
+
+`;
+  content += `  @yield('scripts')
+</body>
+</html>`;
+  return content;
+}
+function getPackageJson(name, template, options) {
+  const pkg = {
+    name,
+    version: "0.0.1",
+    type: "module",
+    scripts: {
+      dev: "stx dev pages/index.stx",
+      build: "stx build",
+      preview: "stx serve dist"
+    },
+    dependencies: {
+      stx: "latest"
+    },
+    devDependencies: {}
+  };
+  if (options.typescript !== !1)
+    pkg.devDependencies.typescript = "^5.0.0";
+  if (options.tailwind)
+    pkg.devDependencies.tailwindcss = "^3.0.0";
+  if (template === "full") {
+    pkg.scripts.test = "bun test";
+    pkg.scripts.lint = "bun run lint";
+  }
+  return JSON.stringify(pkg, null, 2);
+}
+function getStxConfig(template, options) {
+  return `import { defineConfig } from 'stx'
+
+export default defineConfig({
+  // Template directories
+  partialsDir: 'partials',
+  componentsDir: 'components',
+  layoutsDir: 'layouts',
+  defaultLayout: 'app',
+
+  // Development
+  debug: process.env.NODE_ENV !== 'production',
+  cache: process.env.NODE_ENV === 'production',
+
+  // Features
+  a11y: { enabled: true },
+  seo: { enabled: true },
+${options.pwa ? `  pwa: { enabled: true },
+` : ""}
+  // Analytics (configure when ready)
+  // analytics: { enabled: true, driver: 'fathom', fathom: { siteId: 'YOUR_SITE_ID' } },
+})
+`;
+}
+function getTsConfig() {
+  return JSON.stringify({
+    compilerOptions: {
+      target: "ESNext",
+      module: "ESNext",
+      moduleResolution: "bundler",
+      strict: !0,
+      skipLibCheck: !0,
+      esModuleInterop: !0,
+      types: ["bun-types"]
+    },
+    include: ["src/**/*", "test/**/*"]
+  }, null, 2);
+}
+function getReadme(name, template) {
+  return `# ${name}
+
+A stx project created with the \`${template}\` template.
+
+## Getting Started
+
+\`\`\`bash
+# Start development server
+bun run dev
+
+# Build for production
+bun run build
+
+# Preview production build
+bun run preview
+\`\`\`
+
+## Project Structure
+
+\`\`\`
+src/
+\u251C\u2500\u2500 pages/       # Page components (file-based routing)
+\u251C\u2500\u2500 components/  # Reusable components
+\u251C\u2500\u2500 layouts/     # Layout templates
+\u251C\u2500\u2500 stores/      # State management
+\u2514\u2500\u2500 public/      # Static assets
+\`\`\`
+
+## Learn More
+
+- [stx Documentation](https://stx.dev/docs)
+- [stx GitHub](https://github.com/stacksjs/stx)
+`;
+}
+function getGitignore() {
+  return `# Dependencies
+node_modules/
+.bun/
+
+# Build
+dist/
+.stx/
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# Logs
+*.log
+`;
+}
+function getMinimalPage() {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Welcome to stx</title>
+  <style>
+    body { font-family: system-ui; max-width: 600px; margin: 100px auto; text-align: center; }
+    h1 { color: #333; }
+  </style>
+</head>
+<body>
+  <h1>Welcome to stx</h1>
+  <p>Edit <code>src/index.stx</code> to get started.</p>
+</body>
+</html>
+`;
+}
+function getDefaultIndexPage() {
+  return `<script>
+const title = 'Welcome to stx'
+const features = [
+  { icon: '\u26A1', name: 'Fast', desc: 'Built on Bun for blazing speed' },
+  { icon: '\uD83C\uDFA8', name: 'Beautiful', desc: 'Blade-style syntax you know and love' },
+  { icon: '\uD83D\uDEE0', name: 'Powerful', desc: 'Full-featured component system' },
+]
+</script>
+
+@section('title')
+{{ title }}
+@endsection
+
+@section('content')
+<div class="hero">
+  <h1>{{ title }}</h1>
+  <p>A modern UI framework with Laravel Blade syntax</p>
+</div>
+
+<div class="features">
+  @foreach(features as feature)
+  <div class="feature">
+    <span class="feature__icon">{{ feature.icon }}</span>
+    <h3>{{ feature.name }}</h3>
+    <p>{{ feature.desc }}</p>
+  </div>
+  @endforeach
+</div>
+@endsection
+`;
+}
+function getAboutPage() {
+  return `<script>
+const title = 'About'
+</script>
+
+@section('title')
+{{ title }}
+@endsection
+
+@section('content')
+<h1>{{ title }}</h1>
+<p>This is the about page.</p>
+@endsection
+`;
+}
+function getDefaultLayout() {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>@yield('title', 'My App')</title>
+  @yield('head')
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: system-ui; color: #333; line-height: 1.6; }
+    .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
+  </style>
+  @yield('styles')
+</head>
+<body>
+  @component('Header')@endcomponent
+  <main class="container">
+    {{ slot }}
+  </main>
+  @component('Footer')@endcomponent
+  @yield('scripts')
+</body>
+</html>
+`;
+}
+function getHeaderComponent() {
+  return `<header class="header">
+  <nav class="nav container">
+    <a href="/" class="logo">stx</a>
+    <div class="nav-links">
+      <a href="/">Home</a>
+      <a href="/about">About</a>
+    </div>
+  </nav>
+</header>
+
+<style scoped>
+.header { background: #2c3e50; padding: 1rem 0; }
+.nav { display: flex; justify-content: space-between; align-items: center; }
+.logo { color: white; font-weight: bold; text-decoration: none; font-size: 1.25rem; }
+.nav-links a { color: rgba(255,255,255,0.8); margin-left: 1.5rem; text-decoration: none; }
+.nav-links a:hover { color: white; }
+</style>
+`;
+}
+function getFooterComponent() {
+  return `<footer class="footer">
+  <div class="container">
+    <p>&copy; {{ new Date().getFullYear() }} Built with stx</p>
+  </div>
+</footer>
+
+<style scoped>
+.footer { background: #f8f9fa; padding: 2rem 0; margin-top: 4rem; text-align: center; color: #666; }
+</style>
+`;
+}
+function getAppStore() {
+  return `import { defineStore } from 'stx'
+
+interface AppState {
+  theme: 'light' | 'dark'
+  sidebarOpen: boolean
+}
+
+export const appStore = defineStore('app', {
+  state: (): AppState => ({
+    theme: 'light',
+    sidebarOpen: true,
+  }),
+
+  actions: {
+    toggleTheme() {
+      this.theme = this.theme === 'light' ? 'dark' : 'light'
+    },
+    toggleSidebar() {
+      this.sidebarOpen = !this.sidebarOpen
+    },
+  },
+
+  persist: {
+    enabled: true,
+    strategies: [{ key: 'app-preferences', storage: localStorage }],
+  },
+})
+`;
+}
+function getI18nFile(locale) {
+  return JSON.stringify({
+    common: {
+      welcome: "Welcome",
+      home: "Home",
+      about: "About",
+      contact: "Contact"
+    },
+    messages: {
+      loading: "Loading...",
+      error: "An error occurred"
+    }
+  }, null, 2);
+}
+function getTestFile() {
+  return `import { describe, expect, it } from 'bun:test'
+
+describe('Example', () => {
+  it('should work', () => {
+    expect(1 + 1).toBe(2)
+  })
+})
+`;
+}
+function getBlogIndexPage() {
+  return "<!-- Blog index -->";
+}
+function getBlogPostPage() {
+  return "<!-- Blog post -->";
+}
+function getBlogLayout() {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>@yield('title', 'My Blog')</title>
+  @yield('head')
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: system-ui, sans-serif; color: #333; line-height: 1.8; }
+    .container { max-width: 800px; margin: 0 auto; padding: 0 1rem; }
+    .blog-header { background: #1a1a2e; color: white; padding: 1.5rem 0; }
+    .blog-header nav { display: flex; justify-content: space-between; align-items: center; }
+    .blog-header a { color: rgba(255,255,255,0.8); text-decoration: none; margin-left: 1.5rem; }
+    .blog-header a:hover { color: white; }
+    .blog-header .logo { font-weight: bold; font-size: 1.25rem; color: white; margin-left: 0; }
+    .blog-footer { background: #f8f9fa; padding: 2rem 0; margin-top: 4rem; text-align: center; color: #666; }
+  </style>
+  @yield('styles')
+</head>
+<body>
+  <header class="blog-header">
+    <nav class="container">
+      <a href="/" class="logo">My Blog</a>
+      <div>
+        <a href="/">Home</a>
+        <a href="/about">About</a>
+      </div>
+    </nav>
+  </header>
+  <main class="container" style="padding-top: 2rem;">
+    {{ slot }}
+  </main>
+  <footer class="blog-footer">
+    <div class="container">
+      <p>&copy; {{ new Date().getFullYear() }} My Blog. All rights reserved.</p>
+    </div>
+  </footer>
+  @yield('scripts')
+</body>
+</html>`;
+}
+function getPostCardComponent() {
+  return "<!-- Post card -->";
+}
+function getDashboardIndexPage() {
+  return "<!-- Dashboard index -->";
+}
+function getDashboardSettingsPage() {
+  return "<!-- Settings -->";
+}
+function getDashboardLayout() {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>@yield('title', 'Dashboard')</title>
+  @yield('head')
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: system-ui, sans-serif; color: #333; min-height: 100vh; display: flex; flex-direction: column; }
+    .dash-header { background: #2c3e50; color: white; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; }
+    .dash-header .logo { font-weight: bold; font-size: 1.25rem; color: white; text-decoration: none; }
+    .dash-header nav a { color: rgba(255,255,255,0.8); text-decoration: none; margin-left: 1.5rem; }
+    .dash-body { display: flex; flex: 1; }
+    .dash-sidebar { width: 240px; background: #34495e; color: white; padding: 1.5rem; }
+    .dash-sidebar a { color: rgba(255,255,255,0.8); text-decoration: none; display: block; padding: 0.5rem 0; }
+    .dash-sidebar a:hover { color: white; }
+    .dash-content { flex: 1; padding: 2rem; background: #f5f6fa; }
+  </style>
+  @yield('styles')
+</head>
+<body>
+  <header class="dash-header">
+    <a href="/" class="logo">Dashboard</a>
+    <nav>
+      <a href="/settings">Settings</a>
+    </nav>
+  </header>
+  <div class="dash-body">
+    @yield('sidebar')
+    <main class="dash-content">
+      {{ slot }}
+    </main>
+  </div>
+  @yield('scripts')
+</body>
+</html>`;
+}
+function getSidebarComponent() {
+  return "<!-- Sidebar -->";
+}
+function getStatsCardComponent() {
+  return "<!-- Stats card -->";
+}
+function getDashboardStore() {
+  return "// Dashboard store";
+}
+function getLandingPage() {
+  return "<!-- Landing page -->";
+}
+function getLandingLayout() {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>@yield('title', 'Welcome')</title>
+  @yield('head')
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: system-ui, sans-serif; color: #333; line-height: 1.6; }
+    .landing-header { position: fixed; top: 0; width: 100%; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; z-index: 100; border-bottom: 1px solid #eee; }
+    .landing-header .logo { font-weight: bold; font-size: 1.25rem; color: #333; text-decoration: none; }
+    .landing-header nav a { color: #555; text-decoration: none; margin-left: 1.5rem; }
+    .landing-header nav a:hover { color: #000; }
+    .landing-footer { background: #1a1a2e; color: rgba(255,255,255,0.7); padding: 3rem 2rem; text-align: center; }
+  </style>
+  @yield('styles')
+</head>
+<body>
+  <header class="landing-header">
+    <a href="/" class="logo">Brand</a>
+    <nav>
+      <a href="#features">Features</a>
+      <a href="#pricing">Pricing</a>
+      <a href="#contact">Contact</a>
+    </nav>
+  </header>
+  <main>
+    {{ slot }}
+  </main>
+  <footer class="landing-footer">
+    <p>&copy; {{ new Date().getFullYear() }} Brand. All rights reserved.</p>
+  </footer>
+  @yield('scripts')
+</body>
+</html>`;
+}
+function getHeroSection() {
+  return "<!-- Hero section -->";
+}
+function getFeaturesSection() {
+  return "<!-- Features -->";
+}
+function getPricingSection() {
+  return "<!-- Pricing -->";
+}
+function getButtonComponent() {
+  return "<!-- Button -->";
+}
+function ensureDir(dir) {
+  if (!existsSync(dir))
+    mkdirSync(dir, { recursive: !0 });
+}
+function detectPackageManager() {
+  if (existsSync("bun.lockb"))
+    return "bun";
+  if (existsSync("pnpm-lock.yaml"))
+    return "pnpm";
+  if (existsSync("yarn.lock"))
+    return "yarn";
+  return "bun";
+}
+function toPascalCase(str) {
+  return str.replace(/[-_\s]+(.)?/g, (_, c) => c ? c.toUpperCase() : "").replace(/^./, (s) => s.toUpperCase());
+}
+function toCamelCase(str) {
+  return str.replace(/[-_\s]+(.)?/g, (_, c) => c ? c.toUpperCase() : "").replace(/^./, (s) => s.toLowerCase());
+}
+function toKebabCase(str) {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+}