beaver-build 1.0.3 → 1.0.5

package/dist/index.js

@@ -271,9 +271,22 @@ var init_vite_config = __esm({
     TanStackRouterVite({ routesDirectory: './src/routes', generatedRouteTree: './src/routes/routeTree.gen.ts' }),` : "";
       return `import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import path from 'path';
 ${tailwindImport}${tanstackImport}
 // https://vitejs.dev/config/
 export default defineConfig({
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@components': path.resolve(__dirname, './src/components'),
+      '@pages': path.resolve(__dirname, './src/pages'),
+      '@utils': path.resolve(__dirname, './src/utils'),
+      '@types': path.resolve(__dirname, './src/types'),
+      '@hooks': path.resolve(__dirname, './src/hooks'),
+      '@layouts': path.resolve(__dirname, './src/layouts'),
+      '@assets': path.resolve(__dirname, './src/assets'),
+    },
+  },
   plugins: [
     react(),${tailwindPlugin}${tanstackPlugin}
   ],
@@ -305,7 +318,18 @@ var init_tsconfig = __esm({
           strict: true,
           noUnusedLocals: true,
           noUnusedParameters: true,
-          noFallthroughCasesInSwitch: true
+          noFallthroughCasesInSwitch: true,
+          baseUrl: ".",
+          paths: {
+            "@/*": ["./src/*"],
+            "@components/*": ["./src/components/*"],
+            "@pages/*": ["./src/pages/*"],
+            "@utils/*": ["./src/utils/*"],
+            "@types/*": ["./src/types/*"],
+            "@hooks/*": ["./src/hooks/*"],
+            "@layouts/*": ["./src/layouts/*"],
+            "@assets/*": ["./src/assets/*"]
+          }
         },
         include: ["src"],
         references: [{ path: "./tsconfig.node.json" }]
@@ -408,11 +432,11 @@ declare module '@tanstack/react-router' {
   }
 }
 ` : "";
-      const inner = hasRouter ? `<RouterProvider router={router} />` : `<div>
-      <h1>Hello from FSD</h1>
-    </div>`;
+      const homeImport = !hasRouter ? `import { HomePage } from '@/pages/home';
+` : "";
+      const inner = hasRouter ? `<RouterProvider router={router} />` : `<HomePage />`;
       if (hasQuery) {
-        return `${queryImports}${routerImports}${queryClientDef}
+        return `${queryImports}${homeImport}${routerImports}${queryClientDef}
 export const App = () => {
   return (
     <QueryClientProvider client={queryClient}>
@@ -430,12 +454,9 @@ export const App = () => {
 };
 `;
       }
-      return `export const App = () => {
-  return (
-    <div>
-      <h1>Hello from FSD</h1>
-    </div>
-  );
+      return `${homeImport}
+export const App = () => {
+  return <HomePage />;
 };
 `;
     };
@@ -453,13 +474,13 @@ declare module '@tanstack/react-router' {
   }
 }
 ` : "";
-      const inner = hasRouter ? `<RouterProvider router={router} />` : `<div>
-      <h1>Hello from Bulletproof React</h1>
-    </div>`;
+      const homeImport = !hasRouter ? `import Home from '@/pages/Home';
+` : "";
+      const inner = hasRouter ? `<RouterProvider router={router} />` : `<Home />`;
       const body = hasQuery ? `<AppProvider>
       ${inner}
     </AppProvider>` : inner;
-      return `${providerImport}${routerImports}
+      return `${providerImport}${homeImport}${routerImports}
 const App = () => {
   return (
     ${body}
@@ -473,7 +494,7 @@ export default App;
 });
 
 // src/scaffold/react-vite/templates/router.ts
-var routeTreeGenTemplate, rootRouteTemplate, indexRouteTemplate;
+var routeTreeGenTemplate, rootRouteTemplate, indexRouteFsdTemplate, indexRouteBprTemplate;
 var init_router = __esm({
   "src/scaffold/react-vite/templates/router.ts"() {
     "use strict";
@@ -524,19 +545,19 @@ export const Route = createRootRoute({
   ),
 });
 `;
-    indexRouteTemplate = () => `import { createFileRoute } from '@tanstack/react-router';
+    indexRouteFsdTemplate = () => `import { createFileRoute } from '@tanstack/react-router';
+import { HomePage } from '@/pages/home';
 
 export const Route = createFileRoute('/')({
-  component: Index,
+  component: HomePage,
 });
+`;
+    indexRouteBprTemplate = () => `import { createFileRoute } from '@tanstack/react-router';
+import Home from '@/pages/Home';
 
-function Index() {
-  return (
-    <div>
-      <h3>Welcome Home!</h3>
-    </div>
-  );
-}
+export const Route = createFileRoute('/')({
+  component: Home,
+});
 `;
   }
 });
@@ -655,6 +676,25 @@ var init_styles = __esm({
   "src/scaffold/react-vite/templates/styles.ts"() {
     "use strict";
     stylesCssTemplate = () => `@import "tailwindcss";
+
+@theme {
+  /* Brand */
+  --color-primary:       oklch(0.55 0.22 265);
+  --color-primary-fg:    oklch(0.97 0.01 265);
+
+  /* Surfaces (dark-first) */
+  --color-surface:       oklch(0.11 0.015 265);
+  --color-surface-muted: oklch(0.16 0.012 265);
+  --color-surface-high:  oklch(0.21 0.010 265);
+
+  /* Text */
+  --color-text:          oklch(0.97 0.000 0);
+  --color-text-muted:    oklch(0.62 0.010 265);
+  --color-text-subtle:   oklch(0.42 0.010 265);
+
+  /* Border */
+  --color-border:        oklch(0.28 0.010 265);
+}
 `;
   }
 });
@@ -675,7 +715,7 @@ declare module '*.css' {
 });
 
 // src/scaffold/react-vite/templates/copilot-instructions.ts
-var FSD_PATHS, BPR_PATHS, frontmatter, generalTemplate, componentsTemplate, hooksTemplate, routerTemplate, zustandTemplate, queryTemplate, tailwindTemplate, linterTemplate, getCopilotInstructionFiles;
+var FSD_PATHS, BPR_PATHS, frontmatter, generalTemplate, componentsTemplate, hooksTemplate, routerTemplate, zustandTemplate, queryTemplate, tailwindTemplate, importsTemplate, linterTemplate, getCopilotInstructionFiles;
 var init_copilot_instructions = __esm({
   "src/scaffold/react-vite/templates/copilot-instructions.ts"() {
     "use strict";
@@ -755,9 +795,89 @@ These are the project-wide conventions GitHub Copilot must follow. Match the str
 
 Path-specific rules live in \`.github/instructions/*.instructions.md\` \u2014 those files apply automatically to the files their \`applyTo\` glob matches.
 
+## Behavioral Guidelines
+
+Behavioral guidelines to reduce common LLM coding mistakes. Merge with project-specific instructions as needed.
+
+**Tradeoff:** These guidelines bias toward caution over speed. For trivial tasks, use judgment.
+
+### 1. Think Before Coding
+
+**Don't assume. Don't hide confusion. Surface tradeoffs.**
+
+Before implementing:
+- State your assumptions explicitly. If uncertain, ask.
+- If multiple interpretations exist, present them - don't pick silently.
+- If a simpler approach exists, say so. Push back when warranted.
+- If something is unclear, stop. Name what's confusing. Ask.
+
+### 2. Simplicity First
+
+**Minimum code that solves the problem. Nothing speculative.**
+
+- No features beyond what was asked.
+- No abstractions for single-use code.
+- No "flexibility" or "configurability" that wasn't requested.
+- No error handling for impossible scenarios.
+- If you write 200 lines and it could be 50, rewrite it.
+
+Ask yourself: "Would a senior engineer say this is overcomplicated?" If yes, simplify.
+
+### 3. Surgical Changes
+
+**Touch only what you must. Clean up only your own mess.**
+
+When editing existing code:
+- Don't "improve" adjacent code, comments, or formatting.
+- Don't refactor things that aren't broken.
+- Match existing style, even if you'd do it differently.
+- If you notice unrelated dead code, mention it - don't delete it.
+
+When your changes create orphans:
+- Remove imports/variables/functions that YOUR changes made unused.
+- Don't remove pre-existing dead code unless asked.
+
+The test: Every changed line should trace directly to the user's request.
+
+### 4. Goal-Driven Execution
+
+**Define success criteria. Loop until verified.**
+
+Transform tasks into verifiable goals:
+- "Add validation" \u2192 "Write tests for invalid inputs, then make them pass"
+- "Fix the bug" \u2192 "Write a test that reproduces it, then make it pass"
+- "Refactor X" \u2192 "Ensure tests pass before and after"
+
+For multi-step tasks, state a brief plan:
+
+\`\`\`
+1. [Step] \u2192 verify: [check]
+2. [Step] \u2192 verify: [check]
+3. [Step] \u2192 verify: [check]
+\`\`\`
+
+Strong success criteria let you loop independently. Weak criteria ("make it work") require constant clarification.
+
+**These guidelines are working if:** fewer unnecessary changes in diffs, fewer rewrites due to overcomplication, and clarifying questions come before implementation rather than after mistakes.
+
 ## Stack
 ${stackLines}
 
+## Import aliases
+
+Always use path aliases instead of relative imports. Project-wide aliases are pre-configured in \`tsconfig.json\` and \`vite.config.ts\`:
+
+- \`@/*\` \u2192 \`./src/\` \u2014 use for any import from src, e.g. \`import Button from '@/components/Button'\`.
+- \`@components/*\` \u2192 \`./src/components/\` \u2014 e.g. \`import { Modal } from '@components/Modal'\`.
+- \`@pages/*\` \u2192 \`./src/pages/\` \u2014 e.g. \`import { HomePage } from '@pages/Home'\`.
+- \`@utils/*\` \u2192 \`./src/utils/\` \u2014 e.g. \`import { cn } from '@utils/cn'\`.
+- \`@types/*\` \u2192 \`./src/types/\` \u2014 e.g. \`import type { User } from '@types/user'\`.
+- \`@hooks/*\` \u2192 \`./src/hooks/\` \u2014 e.g. \`import { useAuth } from '@hooks/useAuth'\`.
+- \`@layouts/*\` \u2192 \`./src/layouts/\` \u2014 e.g. \`import { MainLayout } from '@layouts/MainLayout'\`.
+- \`@assets/*\` \u2192 \`./src/assets/\` \u2014 e.g. \`import logo from '@assets/logo.svg'\`.
+
+**Never use relative imports** like \`import Foo from '../../../components/Foo'\`. Always resolve through an alias.
+
 ## Naming conventions
 
 - **Components**: \`PascalCase.tsx\`, one component per file, named export (no default).
@@ -985,6 +1105,100 @@ Use \`:root\` for runtime values (e.g., animation targets, JS-readable tokens) t
   }
 }
 \`\`\`
+
+### Color format \u2014 prefer oklch
+
+Tailwind v4's built-in palette uses oklch. Use oklch for custom colors too so tokens stay perceptually uniform and mix cleanly with the defaults:
+
+\`\`\`css
+@theme {
+  --color-primary: oklch(0.55 0.22 265);   /* L  C  H */
+  --color-muted:   oklch(0.62 0.01 265);
+}
+\`\`\`
+
+Avoid hex or \`rgb()\` unless matching a fixed brand value.
+
+### Theme variables are also CSS custom properties
+
+Every \`@theme\` variable is a real CSS custom property \u2014 read it anywhere:
+
+\`\`\`css
+.my-element {
+  color: var(--color-primary);   /* same value as the text-primary utility */
+}
+\`\`\`
+
+Use \`var()\` for CSS that Tailwind utilities cannot express (e.g. complex \`box-shadow\`, SVG \`fill\`, pseudo-element content).
+
+### Semantic token pattern \u2014 naming convention
+
+Prefer **semantic names** (\`surface\`, \`text-muted\`, \`border\`) over raw scale names (\`slate-900\`, \`zinc-300\`). Semantic names decouple the design from the specific value and make theming easy:
+
+\`\`\`css
+@theme {
+  /* Brand */
+  --color-primary:       oklch(0.55 0.22 265);
+  --color-primary-fg:    oklch(0.97 0.01 265);
+
+  /* Surfaces (dark-first) */
+  --color-surface:       oklch(0.11 0.015 265);
+  --color-surface-muted: oklch(0.16 0.012 265);
+  --color-surface-high:  oklch(0.21 0.010 265);
+
+  /* Text */
+  --color-text:          oklch(0.97 0.000 0);
+  --color-text-muted:    oklch(0.62 0.010 265);
+  --color-text-subtle:   oklch(0.42 0.010 265);
+
+  /* Border */
+  --color-border:        oklch(0.28 0.010 265);
+}
+\`\`\`
+
+This generates: \`bg-primary\`, \`text-primary-fg\`, \`bg-surface\`, \`bg-surface-high/60\`, \`text-text\`, \`text-text-muted\`, \`border-border\`, etc. The \`/opacity\` modifier works on all generated utilities.
+`;
+    };
+    importsTemplate = () => {
+      return frontmatter("**") + `# Import aliases and code organization
+
+All imports use path aliases defined in \`tsconfig.json\` and \`vite.config.ts\`. This avoids fragile relative paths and makes moving files safe.
+
+## Available aliases
+
+- \`@/*\` \u2192 \`./src/\` \u2014 shortest form, use when unambiguous
+- \`@components/*\` \u2014 components in \`./src/components/\`
+- \`@pages/*\` \u2014 pages in \`./src/pages/\`
+- \`@utils/*\` \u2014 utilities in \`./src/utils/\`
+- \`@types/*\` \u2014 types in \`./src/types/\`
+- \`@hooks/*\` \u2014 hooks in \`./src/hooks/\`
+- \`@layouts/*\` \u2014 layouts in \`./src/layouts/\`
+- \`@assets/*\` \u2014 assets in \`./src/assets/\`
+
+## Rules
+
+- **Never use relative imports** (\`../../../\`). Always use an alias.
+- **Group imports**: standard library, third-party, then project aliases.
+- **Organize by type within a file**: imports, types, constants, then code.
+
+### Examples
+
+\u2705 Good:
+\`\`\`typescript
+import { ReactNode } from 'react';
+import { QueryClient } from '@tanstack/react-query';
+
+import { Button } from '@components/Button';
+import { useUser } from '@hooks/useUser';
+import type { User } from '@types/user';
+import { cn } from '@utils/cn';
+\`\`\`
+
+\u274C Bad:
+\`\`\`typescript
+import { Button } from '../../../components/Button';  // relative path
+import Button from '@components/Button/Button';       // no file extension in alias
+\`\`\`
 `;
     };
     linterTemplate = (cart) => {
@@ -1016,6 +1230,7 @@ Use \`:root\` for runtime values (e.g., animation targets, JS-readable tokens) t
       const hasLinter = cart.linter !== "NOT_USING";
       const files = [
         { relativePath: ".github/copilot-instructions.md", content: generalTemplate(cart) },
+        { relativePath: ".github/instructions/imports.instructions.md", content: importsTemplate() },
         { relativePath: ".github/instructions/components.instructions.md", content: componentsTemplate(cart) },
         { relativePath: ".github/instructions/hooks.instructions.md", content: hooksTemplate(cart) }
       ];
@@ -1054,6 +1269,227 @@ Use \`:root\` for runtime values (e.g., animation targets, JS-readable tokens) t
   }
 });
 
+// src/scaffold/react-vite/templates/home-page.ts
+function buildBadges(o) {
+  const badges = [
+    { label: "React 19", bg: "#1e3a8a", fg: "#bfdbfe", border: "#3b82f6" },
+    { label: "TypeScript", bg: "#1e3a8a", fg: "#bfdbfe", border: "#2563eb" },
+    { label: "Vite 6", bg: "#4c1d95", fg: "#ddd6fe", border: "#8b5cf6" },
+    { label: o.layout === "FSD" ? "FSD" : "Bulletproof React", bg: "#78350f", fg: "#fde68a", border: "#d97706" }
+  ];
+  if (o.hasRouter) badges.push({ label: "TanStack Router", bg: "#7f1d1d", fg: "#fecaca", border: "#ef4444" });
+  if (o.hasZustand) badges.push({ label: "Zustand", bg: "#14532d", fg: "#bbf7d0", border: "#22c55e" });
+  if (o.hasQuery) badges.push({ label: "TanStack Query", bg: "#7c2d12", fg: "#fed7aa", border: "#f97316" });
+  if (o.hasTailwind) badges.push({ label: "Tailwind CSS v4", bg: "#164e63", fg: "#a5f3fc", border: "#06b6d4" });
+  if (o.linter === "BIOME") badges.push({ label: "Biome", bg: "#1e3a5f", fg: "#bae6fd", border: "#0284c7" });
+  if (o.linter === "ESLINT") badges.push({ label: "ESLint", bg: "#312e81", fg: "#c7d2fe", border: "#6366f1" });
+  return badges;
+}
+function buildHomePage(o) {
+  const badges = buildBadges(o);
+  const storeImport = o.hasZustand ? `import { useAppStore } from '${o.storeImportPath}';
+` : "";
+  const queryImport = o.hasQuery ? `import { useQuery } from '@tanstack/react-query';
+` : "";
+  const postType = o.hasQuery ? `
+type Post = { id: number; title: string; body: string };
+` : "";
+  const exportKw = o.namedExport ? `export const ${o.componentName}` : `const ${o.componentName}`;
+  const defaultExp = o.namedExport ? "" : `
+export default ${o.componentName};
+`;
+  if (o.hasTailwind) {
+    const badgesJsx = badges.map((b) => `            <span className="px-2.5 py-1 rounded-md text-xs font-medium" style={{ background: '${b.bg}80', color: '${b.fg}', border: '1px solid ${b.border}70' }}>${b.label}</span>`).join("\n");
+    const counterCmp2 = o.hasZustand ? `
+const Counter = () => {
+  const { count, increment, decrement, reset } = useAppStore();
+  return (
+    <div className="flex items-center gap-3">
+      <button
+        onClick={decrement}
+        className="w-9 h-9 rounded-lg bg-surface-high hover:bg-surface-muted text-text text-xl font-bold transition-colors"
+      >
+        \u2212
+      </button>
+      <span className="text-3xl font-bold text-text w-14 text-center tabular-nums">{count}</span>
+      <button
+        onClick={increment}
+        className="w-9 h-9 rounded-lg bg-surface-high hover:bg-surface-muted text-text text-xl font-bold transition-colors"
+      >
+        +
+      </button>
+      <button onClick={reset} className="ml-2 text-sm text-text-muted hover:text-text transition-colors">
+        reset
+      </button>
+    </div>
+  );
+};
+` : "";
+    const queryCmp2 = o.hasQuery ? `
+const QueryDemo = () => {
+  const { data, isLoading, isError } = useQuery<Post>({
+    queryKey: ['demo-post'],
+    queryFn: () => fetch('https://jsonplaceholder.typicode.com/posts/1').then(r => r.json()),
+  });
+  if (isLoading) return <p className="text-text-muted text-sm">Fetching post\u2026</p>;
+  if (isError)   return <p className="text-red-400 text-sm">Failed to fetch.</p>;
+  return (
+    <div className="space-y-1">
+      <p className="text-text text-sm font-medium">{data?.title}</p>
+      <p className="text-text-muted text-xs leading-relaxed">{data?.body}</p>
+    </div>
+  );
+};
+` : "";
+    const zustandCard2 = o.hasZustand ? `
+        <div className="rounded-xl p-5 mb-3 bg-surface-high/60 border border-border">
+          <p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-3">Zustand \u2014 Counter</p>
+          <Counter />
+        </div>` : "";
+    const queryCard2 = o.hasQuery ? `
+        <div className="rounded-xl p-5 bg-surface-high/60 border border-border">
+          <p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-3">TanStack Query \u2014 Fetched Post</p>
+          <QueryDemo />
+        </div>` : "";
+    return `${storeImport}${queryImport}${postType}${counterCmp2}${queryCmp2}
+${exportKw} = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center p-6 bg-gradient-to-br from-surface to-surface-muted">
+      <div className="w-full max-w-lg">
+        <div className="text-center mb-8">
+          <div className="text-5xl mb-3">\u{1F680}</div>
+          <h1 className="text-4xl font-bold text-text mb-2">${o.projectName}</h1>
+          <p className="text-text-muted">Your React + Vite starter is ready.</p>
+        </div>
+
+        <div className="rounded-xl p-5 mb-3 bg-surface-high/60 border border-border">
+          <p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-3">Stack</p>
+          <div className="flex flex-wrap gap-2">
+${badgesJsx}
+          </div>
+        </div>${zustandCard2}${queryCard2}
+      </div>
+    </div>
+  );
+};
+${defaultExp}`;
+  }
+  const badgeDefs = badges.map((b) => `  { label: '${b.label}', bg: '${b.bg}80', fg: '${b.fg}', border: '${b.border}70' }`).join(",\n");
+  const counterCmp = o.hasZustand ? `
+const Counter = () => {
+  const { count, increment, decrement, reset } = useAppStore();
+  const btn: React.CSSProperties = {
+    width: '2.25rem', height: '2.25rem', borderRadius: '0.5rem',
+    background: '#334155', border: 'none', color: 'white',
+    fontSize: '1.25rem', cursor: 'pointer', lineHeight: 1,
+  };
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+      <button style={btn} onClick={decrement}>\u2212</button>
+      <span style={{ fontSize: '1.875rem', fontWeight: 700, color: 'white', width: '3.5rem', textAlign: 'center' }}>{count}</span>
+      <button style={btn} onClick={increment}>+</button>
+      <button
+        onClick={reset}
+        style={{ background: 'none', border: 'none', color: '#94a3b8', cursor: 'pointer', fontSize: '0.875rem', marginLeft: '0.5rem' }}
+      >
+        reset
+      </button>
+    </div>
+  );
+};
+` : "";
+  const queryCmp = o.hasQuery ? `
+const QueryDemo = () => {
+  const { data, isLoading, isError } = useQuery<Post>({
+    queryKey: ['demo-post'],
+    queryFn: () => fetch('https://jsonplaceholder.typicode.com/posts/1').then(r => r.json()),
+  });
+  if (isLoading) return <p style={{ color: '#94a3b8', fontSize: '0.875rem' }}>Fetching post\u2026</p>;
+  if (isError)   return <p style={{ color: '#f87171', fontSize: '0.875rem' }}>Failed to fetch.</p>;
+  return (
+    <div>
+      <p style={{ color: 'white', fontSize: '0.875rem', fontWeight: 500, margin: '0 0 0.25rem' }}>{data?.title}</p>
+      <p style={{ color: '#94a3b8', fontSize: '0.75rem', lineHeight: 1.6, margin: 0 }}>{data?.body}</p>
+    </div>
+  );
+};
+` : "";
+  const card = `{ background: 'rgba(30,41,59,0.6)', border: '1px solid rgba(71,85,105,0.5)', borderRadius: '0.75rem', padding: '1.25rem', marginBottom: '0.75rem' }`;
+  const cardLabel = `{ fontSize: '0.65rem', fontWeight: 600, color: '#94a3b8', textTransform: 'uppercase' as const, letterSpacing: '0.1em', marginBottom: '0.75rem' }`;
+  const zustandCard = o.hasZustand ? `
+        <div style={${card}}>
+          <p style={${cardLabel}}>Zustand \u2014 Counter</p>
+          <Counter />
+        </div>` : "";
+  const queryCard = o.hasQuery ? `
+        <div style={{ ...${card}, marginBottom: 0 }}>
+          <p style={${cardLabel}}>TanStack Query \u2014 Fetched Post</p>
+          <QueryDemo />
+        </div>` : "";
+  const reactImport = o.hasZustand ? `import type React from 'react';
+` : "";
+  return `${reactImport}${storeImport}${queryImport}${postType}
+const stackBadges = [
+${badgeDefs},
+];
+${counterCmp}${queryCmp}
+${exportKw} = () => {
+  return (
+    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1.5rem', background: 'linear-gradient(135deg, #020617 0%, #0f172a 100%)', fontFamily: 'system-ui, -apple-system, sans-serif' }}>
+      <div style={{ width: '100%', maxWidth: '480px' }}>
+        <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
+          <div style={{ fontSize: '3rem', marginBottom: '0.75rem' }}>\u{1F680}</div>
+          <h1 style={{ fontSize: '2.25rem', fontWeight: 700, color: '#f8fafc', margin: '0 0 0.5rem' }}>${o.projectName}</h1>
+          <p style={{ color: '#94a3b8', margin: 0 }}>Your React + Vite starter is ready.</p>
+        </div>
+
+        <div style={${card}}>
+          <p style={${cardLabel}}>Stack</p>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+            {stackBadges.map(b => (
+              <span key={b.label} style={{ background: b.bg, color: b.fg, border: \`1px solid \${b.border}\`, borderRadius: '0.375rem', padding: '0.25rem 0.625rem', fontSize: '0.75rem', fontWeight: 500 }}>
+                {b.label}
+              </span>
+            ))}
+          </div>
+        </div>${zustandCard}${queryCard}
+      </div>
+    </div>
+  );
+};
+${defaultExp}`;
+}
+var homePageFsdTemplate, homePageBprTemplate;
+var init_home_page = __esm({
+  "src/scaffold/react-vite/templates/home-page.ts"() {
+    "use strict";
+    homePageFsdTemplate = (cart) => buildHomePage({
+      projectName: cart.projectName,
+      layout: "FSD",
+      hasTailwind: cart.css === "TAILWIND",
+      hasZustand: cart.stateManagement === "ZUSTAND",
+      hasQuery: cart.query === "TANSTACK_QUERY",
+      hasRouter: cart.router === "TANSTACK_ROUTER",
+      linter: cart.linter,
+      storeImportPath: "@/shared/lib/store",
+      componentName: "HomePage",
+      namedExport: true
+    });
+    homePageBprTemplate = (cart) => buildHomePage({
+      projectName: cart.projectName,
+      layout: "BPR",
+      hasTailwind: cart.css === "TAILWIND",
+      hasZustand: cart.stateManagement === "ZUSTAND",
+      hasQuery: cart.query === "TANSTACK_QUERY",
+      hasRouter: cart.router === "TANSTACK_ROUTER",
+      linter: cart.linter,
+      storeImportPath: "@/stores/appStore",
+      componentName: "Home",
+      namedExport: false
+    });
+  }
+});
+
 // src/scaffold/react-vite/templates/fsd-layout.ts
 var getFsdFileMap;
 var init_fsd_layout = __esm({
@@ -1072,6 +1508,7 @@ var init_fsd_layout = __esm({
     init_styles();
     init_vite_env_d_ts();
     init_copilot_instructions();
+    init_home_page();
     getFsdFileMap = (cart) => {
       const hasRouter = cart.router === "TANSTACK_ROUTER";
       const hasZustand = cart.stateManagement === "ZUSTAND";
@@ -1089,8 +1526,7 @@ var init_fsd_layout = __esm({
         { relativePath: "src/app/index.tsx", content: appTsxFsdTemplate(hasRouter, hasQuery) },
         {
           relativePath: "src/pages/home/ui/HomePage.tsx",
-          content: `export const HomePage = () => <div>Home Page</div>;
-`
+          content: homePageFsdTemplate(cart)
         },
         {
           relativePath: "src/pages/home/index.ts",
@@ -1108,7 +1544,7 @@ var init_fsd_layout = __esm({
       if (hasRouter) {
         files.push(
           { relativePath: "src/routes/__root.tsx", content: rootRouteTemplate() },
-          { relativePath: "src/routes/index.tsx", content: indexRouteTemplate() },
+          { relativePath: "src/routes/index.tsx", content: indexRouteFsdTemplate() },
           { relativePath: "src/routes/routeTree.gen.ts", content: routeTreeGenTemplate() }
         );
       }
@@ -1176,6 +1612,7 @@ var init_bpr_layout = __esm({
     init_styles();
     init_vite_env_d_ts();
     init_copilot_instructions();
+    init_home_page();
     getBprFileMap = (cart) => {
       const hasRouter = cart.router === "TANSTACK_ROUTER";
       const hasZustand = cart.stateManagement === "ZUSTAND";
@@ -1191,6 +1628,7 @@ var init_bpr_layout = __esm({
         { relativePath: "src/vite-env.d.ts", content: viteEnvDtsTemplate() },
         { relativePath: "src/main.tsx", content: mainTsxTemplate(cart) },
         { relativePath: "src/App.tsx", content: appTsxBprTemplate(hasRouter, hasQuery) },
+        { relativePath: "src/pages/Home.tsx", content: homePageBprTemplate(cart) },
         {
           relativePath: "src/providers/index.tsx",
           content: hasQuery ? queryProviderBprTemplate() : simpleProviderBprTemplate()
@@ -1208,7 +1646,7 @@ var init_bpr_layout = __esm({
       if (hasRouter) {
         files.push(
           { relativePath: "src/routes/__root.tsx", content: rootRouteTemplate() },
-          { relativePath: "src/routes/index.tsx", content: indexRouteTemplate() },
+          { relativePath: "src/routes/index.tsx", content: indexRouteBprTemplate() },
           { relativePath: "src/routes/routeTree.gen.ts", content: routeTreeGenTemplate() }
         );
       }
@@ -1537,12 +1975,23 @@ var init_vite_config2 = __esm({
       const imports = [
         `import { defineConfig } from 'vite';`,
         `import react from '@vitejs/plugin-react';`,
+        `import path from 'path';`,
         hasTailwind ? `import tailwindcss from '@tailwindcss/vite';` : ""
       ].filter(Boolean).join("\n");
       const plugins = ["react()", hasTailwind ? "tailwindcss()" : ""].filter(Boolean).join(",\n    ");
       return `${imports}
 
 export default defineConfig({
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@components': path.resolve(__dirname, './src/components'),
+      '@hooks': path.resolve(__dirname, './src/hooks'),
+      '@lib': path.resolve(__dirname, './src/lib'),
+      '@types': path.resolve(__dirname, './src/types'),
+      '@utils': path.resolve(__dirname, './src/utils'),
+    },
+  },
   plugins: [
     ${plugins},
   ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beaver-build",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Interactive CLI tool for scaffolding modern web projects with production-ready configurations",
   "main": "dist/index.js",
   "type": "module",