ebade 0.4.3 → 0.4.6

package/.agent/workflows/prompt-to-product.md

@@ -0,0 +1,40 @@
+---
+description: ebade Prompt-to-Product Workflow
+---
+
+# 🐣 ebade Prompt-to-Product Workflow
+
+This workflow describes how an AI Agent should use the ebade framework to transform a user's natural language intent into a production-ready codebase.
+
+## 1. Initial Project Scaffolding
+When a user asks to "build", "create", or "start" a new web application:
+
+// turbo
+1. Use the `ebade build` command with the user's prompt.
+   ```bash
+   node cli/scaffold.js build "[User's Prompt]"
+   ```
+   *This tool will automatically choose the project type, color palette, and initial components.*
+
+2. Navigate into the generated project directory.
+
+## 2. Understanding the Architecture
+ebade generates a `project.ebade.yaml` file in the project root. This is your **Source of Truth**.
+1. Read `project.ebade.yaml` to understand the pages, components, and data models.
+2. Respect the design system tokens in `app/globals.css`.
+
+## 3. Iterative Development
+Once the scaffold is ready, move from "Architect" to "Engineer":
+
+1. **Refine Components**: Locate generated components in `components/`. They are high-quality visual placeholders. Add the specific business logic, API calls, or complex state management requested by the user.
+2. **Implement API Logic**: Fill the `app/api/` route handlers with real backend logic (database queries, external service integrations).
+3. **Data Schemas**: Use the generated SQL in `database/schema.sql` to set up the actual database.
+
+## 4. Expanding the Project
+To add new features:
+1. Update `project.ebade.yaml` with the new intent.
+2. Run `node cli/scaffold.js scaffold project.ebade.yaml .` to generate the new files while preserving your logic.
+3. Apply the specific implementation details to the new files.
+
+---
+*Built for the Agent-First Era. ebade empowers you to focus on logic, while we handle the architecture.*

package/CHANGELOG.md

@@ -5,6 +5,49 @@ All notable changes to **ebade** will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.4.6] - 2025-01-10
+
+### Added
+
+- **EbadeArchitect (The Brain)**: New core engine that translates natural language prompts into structured `ebade` configurations.
+- **`ebade build <prompt>`**: A "one-shot" project creation command. Designs, scaffolds, and prepares a project in seconds.
+- **Architect Intelligence**: Projects now gain context-aware page structures (E-commerce get cart/products, Blog get posts, etc.) and smarter component selection via Regex.
+- **Auto-Environment**: Automatically generates `.gitignore` and `.env.example` for professional project starts.
+- **Agent Workflow Documentation**: Added `.agent/workflows/prompt-to-product.md` to guide AI agents on using the new tools.
+- **MCP Server v0.4.6**: Integrated `ebade_build` as a tool for otonomous agent usage.
+- **Testing Layer**: Added internal testing suites for both the framework logic and CLI integration.
+- **CLI Branding**: Updated to `v0.4.6` with improved help menus and creative briefs.
+
+### Fixed
+
+- Fixed CLI entry point to allow safe imports of `scaffold.js` without triggering help output.
+- Improved project naming logic to filter out filler words (e.g., "Can you make a...").
+- Fixed component integrity check to correctly locate test files in `tests/components/`.
+
+## [0.4.5] - 2025-01-10
+...
+## [0.4.5] - 2025-01-10
+
+### Added
+
+- UI/UX Overhaul: Premium dark-mode aesthetic with ambient glow and glassmorphism by default.
+- Dynamic Color Support: Real-time Hex-to-HSL conversion to apply user's primary color choice to CSS variables.
+- Component "Intents": Placeholders are now high-quality "Glass Cards" that look like part of a finished UI.
+- Test Organization: All unit tests are now generated in a centralized `tests/` directory instead of being cluttered with components.
+
+### Fixed
+
+- API Pathing: Fixed a bug that caused double-nesting (e.g., `/api/api/...`) in generated routes.
+- Removed debug information (headers, route labels) from generated pages for a "turnkey" production feel.
+
+## [0.4.4] - 2025-01-10
+
+
+### Fixed
+- Added `postcss.config.js` generation to enable Tailwind styling in scaffolded projects.
+- Fixed double-nesting issues when initializing projects (removed redundant `projectName/projectName` folder creation).
+- Refined Tailwind config to ensure all component paths are correctly watched.
+
 ## [0.4.3] - 2025-01-10
 
 ### Fixed

package/cli/scaffold.js

@@ -44,7 +44,7 @@ ${colors.magenta}    ██╔══╝  ${colors.cyan}██╔══██╗$
 ${colors.magenta}    ███████╗${colors.cyan}██████╔╝${colors.magenta}██║  ██║${colors.cyan}██████╔╝${colors.magenta}███████╗
 ${colors.magenta}    ╚══════╝${colors.cyan}╚═════╝ ${colors.magenta}╚═╝  ╚═╝${colors.cyan}╚═════╝ ${colors.magenta}╚══════╝${colors.reset}
     
-    ${colors.dim}✨ Agent-First Framework ${colors.yellow}v0.4.3${colors.reset}
+    ${colors.dim}✨ Agent-First Framework ${colors.yellow}v0.4.6${colors.reset}
 `;
 
 const log = {
@@ -58,6 +58,166 @@ const log = {
     console.log(`\n${colors.bright}${colors.magenta}▸ ${msg}${colors.reset}`),
 };
 
+// ============================================
+// ebade Architect (The Brain)
+// ============================================
+export class EbadeArchitect {
+  static async plan(prompt) {
+    const p = prompt.toLowerCase();
+
+    // Core App Type Detection
+    let type = "saas-dashboard";
+    if (p.includes("e-commerce") || p.includes("shop") || p.includes("store"))
+      type = "e-commerce";
+    if (p.includes("blog") || p.includes("article") || p.includes("news"))
+      type = "blog";
+    if (p.includes("portfolio") || p.includes("personal") || p.includes("cv"))
+      type = "portfolio";
+
+    // Component Intelligence
+    const components = ["navbar", "footer"];
+    const features = [];
+
+    const has = (keyword) => new RegExp(`\\b${keyword}`, "i").test(p);
+
+    if (has("chart") || has("analytics") || has("graph") || has("metric")) {
+      components.push("activity-chart", "stats-grid");
+      features.push("Advanced Analytics");
+    }
+    if (has("saas") || has("dashboard") || has("admin")) {
+      components.push("sidebar-navigation", "metrics-cards");
+      features.push("Admin Dashboard");
+    }
+    if (has("login") || has("auth") || has("sign") || has("user")) {
+      components.push("login-form", "signup-form");
+      features.push("Authentication");
+    }
+    if (has("price") || has("plan") || has("subscribe") || has("billing")) {
+      components.push("pricing-table", "cta-banner");
+      features.push("Subscription Tiers");
+    }
+    if (has("testim") || has("review") || has("social proof"))
+      components.push("testimonials-grid");
+    if (has("contact") || has("form") || has("help") || has("support"))
+      components.push("contact-form");
+    if (has("faq") || has("question")) components.push("faq-accordion");
+
+    // Dynamic Color Palette (Order matters - specific colors should win over vibes)
+    let primary = "#6366f1"; // Indigo default
+    if (has("gold") || has("luxury") || has("premium") || has("exclusive"))
+      primary = "#fbbf24";
+    if (has("green") || has("eco") || has("emerald") || has("nature"))
+      primary = "#10b981";
+    if (
+      has("blue") ||
+      has("ocean") ||
+      has("sky") ||
+      has("trust") ||
+      has("corp")
+    )
+      primary = "#3b82f6";
+    if (has("violet") || has("purple") || has("creative") || has("design"))
+      primary = "#8b5cf6";
+    if (has("orange") || has("fire") || has("warm") || has("brand"))
+      primary = "#f59e0b";
+    if (has("red") || has("danger") || has("hot") || has("love"))
+      primary = "#ef4444";
+
+    // Smart Pages based on Type
+    const pages = [
+      {
+        path: "/",
+        intent: "landing-page",
+        components: components.filter((c) =>
+          [
+            "navbar",
+            "hero-section",
+            "pricing-table",
+            "testimonials-grid",
+            "cta-banner",
+            "footer",
+          ].includes(c)
+        ),
+      },
+    ];
+
+    if (type === "saas-dashboard") {
+      pages.push({
+        path: "/dashboard",
+        intent: "main-dashboard",
+        components: components.filter((c) =>
+          [
+            "sidebar-navigation",
+            "stats-grid",
+            "activity-chart",
+            "metrics-cards",
+          ].includes(c)
+        ),
+      });
+    } else if (type === "e-commerce") {
+      pages.push(
+        {
+          path: "/products",
+          intent: "product-list",
+          components: ["product-grid"],
+        },
+        { path: "/cart", intent: "shopping-cart", components: ["cart-list"] }
+      );
+    } else if (type === "blog") {
+      pages.push(
+        { path: "/posts", intent: "blog-index", components: ["post-list"] },
+        {
+          path: "/posts/[slug]",
+          intent: "blog-post",
+          components: ["post-body"],
+        }
+      );
+    }
+
+    // Build Internal Intent
+    const config = {
+      name:
+        p
+          .split(" ")
+          .filter(
+            (w) =>
+              ![
+                "can",
+                "you",
+                "make",
+                "create",
+                "a",
+                "an",
+                "the",
+                "with",
+                "please",
+                "super",
+                "ultra",
+                "is",
+                "for",
+                "me",
+                "my",
+                "and",
+              ].includes(w.toLowerCase())
+          )
+          .slice(0, 2)
+          .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+          .join("") || "EbadeApp",
+      type: type,
+      description: prompt,
+      features: features.length > 0 ? features : ["Turnkey Scaffold"],
+      design: {
+        colors: { primary },
+        style: "glass-modern",
+      },
+      pages: pages,
+      api: [{ path: "/api/data", methods: ["GET"], intent: "fetch-data" }],
+    };
+
+    return config;
+  }
+}
+
 // ============================================
 // ebade Parser
 // ============================================
@@ -96,17 +256,19 @@ import { cn } from "@/lib/utils";
 /**
  * 🧠 Generated via ebade
  * Component: ${toPascalCase(componentName)}
- * Status: Placeholder (No template found in cli/templates)
+ * Status: Intent needs implementation
  */
 export function ${toPascalCase(componentName)}() {
   return (
-    <div className="p-12 border-2 border-dashed border-border rounded-3xl text-center bg-muted/30">
-      <div className="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
-        <span className="text-2xl">🧩</span>
+    <div className="p-12 glass-card rounded-[2.5rem] text-center min-h-[300px] flex flex-col items-center justify-center group hover:border-primary/50 transition-all">
+      <div className="w-20 h-20 bg-primary/10 rounded-[2rem] flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+        <span className="text-3xl">✨</span>
       </div>
-      <h3 className="text-xl font-bold mb-2">${toPascalCase(componentName)}</h3>
-      <p className="text-sm text-muted-foreground max-w-xs mx-auto">
-        No template found for this intent. Create a file at <code>cli/templates/${componentName}.tsx</code> to customize.
+      <h3 className="text-2xl font-bold mb-3 text-white">${toPascalCase(
+        componentName
+      )}</h3>
+      <p className="text-slate-400 max-w-sm mx-auto leading-relaxed">
+        This intent is defined for your AI agent. To customize, edit <code>components/${componentName}.tsx</code> or use the ebade compiler.
       </p>
     </div>
   );
@@ -176,19 +338,15 @@ ${componentImports}
  */
 export default function ${toPascalCase(page.intent)}Page() {
   return (
-    <div className="min-h-screen bg-slate-950 text-white">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
-        <header className="mb-12">
-          <h1 className="text-3xl font-bold tracking-tight opacity-90">${toPascalCase(
-            page.intent
-          )}</h1>
-          <p className="text-sm opacity-40 mt-1">Route: ${page.path}</p>
-        </header>
+    <div className="min-h-screen bg-slate-950 text-white selection:bg-indigo-500/30 selection:text-indigo-200">
+      <main className="relative overflow-hidden">
+        {/* Ambient background glow */}
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[500px] bg-indigo-600/10 blur-[120px] rounded-full pointer-events-none" />
         
-        <main className="space-y-12">
+        <div className="relative z-10">
 ${componentUsage}
-        </main>
-      </div>
+        </div>
+      </main>
     </div>
   );
 }
@@ -384,6 +542,16 @@ export default nextConfig;
 `;
 }
 
+function generatePostcssConfig() {
+  return `module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+`;
+}
+
 function generateTsConfig() {
   return JSON.stringify(
     {
@@ -459,65 +627,35 @@ function generateGlobalsCss(design) {
  
 @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: 221.2 83.2% 53.3%;
-    --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: 221.2 83.2% 53.3%;
- 
-    --radius: 0.5rem;
-  }
+    --background: 222 47% 4%;
+    --foreground: 213 31% 91%;
  
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
+    --card: 222 47% 4%;
+    --card-foreground: 213 31% 91%;
  
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
+    --popover: 222 47% 4%;
+    --popover-foreground: 213 31% 91%;
  
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
+    --primary: ${hexToHsl(primary)};
+    --primary-foreground: 0 0% 100%;
  
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 222 47% 11%;
+    --secondary-foreground: 213 31% 91%;
  
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
  
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
- 
-    --accent: 217.2 32.6% 17.5%;
+    --accent: 216 34% 17%;
     --accent-foreground: 210 40% 98%;
  
-    --destructive: 0 62.8% 30.6%;
+    --destructive: 0 63% 31%;
     --destructive-foreground: 210 40% 98%;
  
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 48%;
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+    --ring: ${hexToHsl(primary)};
+ 
+    --radius: 1rem;
   }
 }
  
@@ -526,9 +664,25 @@ function generateGlobalsCss(design) {
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
+    font-feature-settings: "cv11", "ss01";
   }
 }
+
+/* Premium Animations */
+@keyframes float {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+  100% { transform: translateY(0px); }
+}
+
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
+.glass-card {
+  @apply bg-white/[0.03] border border-white/10 backdrop-blur-xl;
+}
 `;
 }
 
@@ -542,6 +696,61 @@ export function cn(...inputs: ClassValue[]) {
 `;
 }
 
+function generateGitignore() {
+  return `# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+`;
+}
+
+function generateEnvExample(config) {
+  return `# ebade Generated Environment Variables
+# Project: ${config.name}
+
+# Database (Supabase / Postgres)
+DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres"
+
+# Authentication (NextAuth / Clerk)
+NEXTAUTH_SECRET="your-secret-here"
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=""
+
+# API Keys
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=""
+STRIPE_SECRET_KEY=""
+`;
+}
+
 // ============================================
 // Design System CSS Generator
 // ============================================
@@ -627,20 +836,64 @@ Built with ebade - The Agent-First Framework for the next era of development.
 // ============================================
 // Utility Functions
 // ============================================
-function toPascalCase(str) {
+export function toPascalCase(str) {
   return str
-    .split("-")
+    .split(/[-_]/)
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
     .join("");
 }
 
-function toSnakeCase(str) {
+export function toSnakeCase(str) {
   return str
-    .replace(/([A-Z])/g, "_$1")
+    .replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`)
+    .replace(/-/g, "_")
     .toLowerCase()
     .replace(/^_/, "");
 }
 
+export function hexToHsl(hex) {
+  let r = 0,
+    g = 0,
+    b = 0;
+  if (hex.length === 4) {
+    r = parseInt(hex[1] + hex[1], 16);
+    g = parseInt(hex[2] + hex[2], 16);
+    b = parseInt(hex[3] + hex[3], 16);
+  } else if (hex.length === 7) {
+    r = parseInt(hex.slice(1, 3), 16);
+    g = parseInt(hex.slice(3, 5), 16);
+    b = parseInt(hex.slice(5, 7), 16);
+  }
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  let max = Math.max(r, g, b),
+    min = Math.min(r, g, b);
+  let h,
+    s,
+    l = (max + min) / 2;
+  if (max === min) h = s = 0;
+  else {
+    let d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(
+    l * 100
+  )}%`;
+}
+
 function mapToSqlType(type) {
   const typeMap = {
     uuid: "UUID PRIMARY KEY DEFAULT gen_random_uuid()",
@@ -686,7 +939,10 @@ async function scaffold(ebadePath, outputDir) {
   );
 
   // Create output directory structure
-  const projectDir = path.join(outputDir, config.name);
+  // If outputDir already ends with config.name, don't nest again
+  const projectDir = outputDir.endsWith(config.name)
+    ? outputDir
+    : path.join(outputDir, config.name);
   ensureDir(projectDir);
 
   // ========== Generate Structure ==========
@@ -751,8 +1007,11 @@ async function scaffold(ebadePath, outputDir) {
 
     fs.writeFileSync(path.join(projectDir, componentPath), content.trim());
 
-    // Generate unit test
-    const testPath = `components/${component}.test.tsx`;
+    // Generate unit test in tests/ directory
+    const testPath = `tests/components/${component}.test.tsx`;
+    const testDir = path.dirname(path.join(projectDir, testPath));
+    ensureDir(testDir);
+
     fs.writeFileSync(
       path.join(projectDir, testPath),
       generateComponentTest(component).trim()
@@ -771,7 +1030,12 @@ async function scaffold(ebadePath, outputDir) {
   if (config.api) {
     const spinner3 = ora("Generating API routes...").start();
     config.api.forEach((endpoint) => {
-      const apiPath = `app/api${endpoint.path}/route.ts`;
+      // Fix potential /api/api double nesting
+      const cleanPath = endpoint.path.startsWith("/api")
+        ? endpoint.path.slice(4)
+        : endpoint.path;
+
+      const apiPath = `app/api${cleanPath}/route.ts`;
       const apiDir = path.dirname(path.join(projectDir, apiPath));
       ensureDir(apiDir);
 
@@ -820,6 +1084,13 @@ async function scaffold(ebadePath, outputDir) {
   );
   log.file("tailwind.config.js");
 
+  // postcss.config.js
+  fs.writeFileSync(
+    path.join(projectDir, "postcss.config.js"),
+    generatePostcssConfig()
+  );
+  log.file("postcss.config.js");
+
   // vitest.config.ts
   fs.writeFileSync(
     path.join(projectDir, "vitest.config.ts"),
@@ -827,6 +1098,17 @@ async function scaffold(ebadePath, outputDir) {
   );
   log.file("vitest.config.ts");
 
+  // .gitignore
+  fs.writeFileSync(path.join(projectDir, ".gitignore"), generateGitignore());
+  log.file(".gitignore");
+
+  // .env.example
+  fs.writeFileSync(
+    path.join(projectDir, ".env.example"),
+    generateEnvExample(config)
+  );
+  log.file(".env.example");
+
   // app/layout.tsx
   fs.writeFileSync(
     path.join(projectDir, "app/layout.tsx"),
@@ -990,13 +1272,14 @@ async function verifyOutput(projectDir, config) {
   }
 
   // 3. Test Coverage Check
-  // Ensure every component has a matching test file
+  // Ensure every component has a matching test file in tests/components/
   const components = fs
     .readdirSync(path.join(projectDir, "components"))
     .filter((f) => f.endsWith(".tsx") && !f.endsWith(".test.tsx"));
   components.forEach((comp) => {
     const testFile = comp.replace(".tsx", ".test.tsx");
-    if (!fs.existsSync(path.join(projectDir, "components", testFile))) {
+    const testPath = path.join(projectDir, "tests/components", testFile);
+    if (!fs.existsSync(testPath)) {
       results.tests = false;
       results.issues.push(`Missing test for component: ${comp}`);
     }
@@ -1058,12 +1341,14 @@ ${colors.dim}Usage:${colors.reset}
 
 ${colors.dim}Commands:${colors.reset}
   init                       Create a new ebade project interactively
+  build <prompt>             Generate and scaffold a project from a natural language prompt
   scaffold <file> [output]   Scaffold a project from ebade file
   dev <file> [output]        Watch ebade file and re-scaffold on changes
   playground                 Open the ebade playground
   
 ${colors.dim}Examples:${colors.reset}
   npx ebade init
+  npx ebade build "A violet themed crypto dashboard"
   npx ebade scaffold examples/saas-dashboard.ebade.yaml ./output
   npx ebade dev my-project.ebade.yaml ./my-app
 
@@ -1227,80 +1512,134 @@ ${LOGO}
 // ============================================
 // Command Router
 // ============================================
-if (
-  args.length === 0 ||
-  command === "help" ||
-  command === "--help" ||
-  command === "-h"
-) {
-  showHelp();
-  process.exit(0);
-}
+const isMain =
+  process.argv[1] &&
+  (process.argv[1].endsWith("scaffold.js") ||
+    process.argv[1].endsWith("ebade"));
+
+if (isMain) {
+  if (
+    args.length === 0 ||
+    command === "help" ||
+    command === "--help" ||
+    command === "-h"
+  ) {
+    showHelp();
+    process.exit(0);
+  }
 
-if (command === "init") {
-  await init();
-} else if (command === "scaffold") {
-  const ebadeFile = args[1];
-  const outputDir = args[2] || "./output";
+  if (command === "init") {
+    await init();
+  } else if (command === "scaffold") {
+    const ebadeFile = args[1];
+    const outputDir = args[2] || "./output";
 
-  if (!ebadeFile) {
-    console.error(
-      `${colors.red}Error:${colors.reset} Please provide an ebade file path.`
-    );
-    console.log(
-      `\n${colors.dim}Usage:${colors.reset} npx ebade scaffold <file.ebade.yaml> [output-dir]\n`
-    );
-    process.exit(1);
-  }
+    if (!ebadeFile) {
+      console.error(
+        `${colors.red}Error:${colors.reset} Please provide an ebade file path.`
+      );
+      console.log(
+        `\n${colors.dim}Usage:${colors.reset} npx ebade scaffold <file.ebade.yaml> [output-dir]\n`
+      );
+      process.exit(1);
+    }
 
-  if (!fs.existsSync(ebadeFile)) {
-    console.error(
-      `${colors.red}Error:${colors.reset} ebade file not found: ${ebadeFile}`
-    );
-    process.exit(1);
-  }
+    if (!fs.existsSync(ebadeFile)) {
+      console.error(
+        `${colors.red}Error:${colors.reset} ebade file not found: ${ebadeFile}`
+      );
+      process.exit(1);
+    }
 
-  await scaffold(ebadeFile, outputDir);
-} else if (command === "playground") {
-  console.log(`\n${colors.cyan}🌐 Opening ebade playground...${colors.reset}`);
-  const url = "https://ebade.dev/playground";
-  const start =
-    process.platform === "darwin"
-      ? "open"
-      : process.platform === "win32"
-      ? "start"
-      : "xdg-open";
-  try {
-    execSync(`${start} ${url}`);
-  } catch (e) {
-    console.log(`\n${colors.yellow}Please open:${colors.reset} ${url}`);
-  }
-} else if (command === "dev") {
-  const ebadeFile = args[1];
-  const outputDir = args[2] || "./output";
+    await scaffold(ebadeFile, outputDir);
+  } else if (command === "build") {
+    const prompt = args.slice(1).join(" ");
 
-  if (!ebadeFile) {
-    console.error(
-      `${colors.red}Error:${colors.reset} Please provide an ebade file path.`
+    if (!prompt) {
+      console.error(
+        `${colors.red}Error:${colors.reset} Please provide a prompt. e.g. npx ebade build "A blue themed SaaS"`
+      );
+      process.exit(1);
+    }
+
+    const spinner = ora(
+      `${colors.cyan}EbadeArchitect is designing your project...${colors.reset}`
+    ).start();
+    const config = await EbadeArchitect.plan(prompt);
+    spinner.succeed(
+      `Design complete: ${colors.bright}${config.name}${colors.reset}`
     );
+
+    const outputDir = "./" + (config.name || "ebade-app");
+
+    // Create temporary YAML and scaffold
+    const tempDir = path.join(process.cwd(), ".ebade_temp");
+    ensureDir(tempDir);
+    const tempFile = path.join(tempDir, "project.ebade.yaml");
+    fs.writeFileSync(tempFile, yaml.stringify(config));
+
+    await scaffold(tempFile, outputDir);
+
+    // Final Brief
+    console.log(`
+${colors.magenta}${colors.bright}🎨 Creative Brief from EbadeArchitect:${
+      colors.reset
+    }
+  ${colors.cyan}Project:${colors.reset} ${config.name}
+  ${colors.cyan}Theme:${colors.reset}   ${
+      config.design.colors.primary
+    } (Detected from prompt)
+  ${colors.cyan}Pages:${colors.reset}   ${config.pages
+      .map((p) => p.path)
+      .join(", ")}
+  ${colors.cyan}Features:${colors.reset} ${config.features.join(", ")}
+`);
+
+    // Cleanup
+    fs.rmSync(tempDir, { recursive: true, force: true });
+  } else if (command === "playground") {
     console.log(
-      `\n${colors.dim}Usage:${colors.reset} npx ebade dev <file.ebade.yaml> [output-dir]\n`
+      `\n${colors.cyan}🌐 Opening ebade playground...${colors.reset}`
     );
-    process.exit(1);
-  }
+    const url = "https://ebade.dev/playground";
+    const start =
+      process.platform === "darwin"
+        ? "open"
+        : process.platform === "win32"
+        ? "start"
+        : "xdg-open";
+    try {
+      execSync(`${start} ${url}`);
+    } catch (e) {
+      console.log(`\n${colors.yellow}Please open:${colors.reset} ${url}`);
+    }
+  } else if (command === "dev") {
+    const ebadeFile = args[1];
+    const outputDir = args[2] || "./output";
+
+    if (!ebadeFile) {
+      console.error(
+        `${colors.red}Error:${colors.reset} Please provide an ebade file path.`
+      );
+      console.log(
+        `\n${colors.dim}Usage:${colors.reset} npx ebade dev <file.ebade.yaml> [output-dir]\n`
+      );
+      process.exit(1);
+    }
 
-  if (!fs.existsSync(ebadeFile)) {
+    if (!fs.existsSync(ebadeFile)) {
+      console.error(
+        `${colors.red}Error:${colors.reset} ebade file not found: ${ebadeFile}`
+      );
+      process.exit(1);
+    }
+
+    await dev(ebadeFile, outputDir);
+  } else {
     console.error(
-      `${colors.red}Error:${colors.reset} ebade file not found: ${ebadeFile}`
+      `${colors.red}Error:${colors.reset} Unknown command: ${command}`
     );
+    showHelp();
     process.exit(1);
   }
-
-  await dev(ebadeFile, outputDir);
-} else {
-  console.error(
-    `${colors.red}Error:${colors.reset} Unknown command: ${command}`
-  );
-  showHelp();
-  process.exit(1);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ebade",
-  "version": "0.4.3",
+  "version": "0.4.6",
   "description": "ebade - Agent-First Framework. The first framework designed for AI agents, readable by humans.",
   "type": "module",
   "main": "cli/scaffold.js",

package/packages/mcp-server/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ebade-mcp-server",
-  "version": "0.4.3",
-  "description": "MCP Server for ebade v0.4.3 - The Agent-First Framework",
+  "version": "0.4.6",
+  "description": "MCP Server for ebade v0.4.6 - The Agent-First Framework",
   "type": "module",
   "main": "dist/index.js",
   "bin": {

package/packages/mcp-server/src/index.ts

@@ -9,6 +9,7 @@
  * - Validate ebade files
  * - Compile ebade to framework-specific code
  * - Generate components from natural language descriptions
+ * - Build entire projects from natural language prompts (NEW in v0.4.6)
  */
 
 import { Server } from "@modelcontextprotocol/sdk/server/index.js";
@@ -24,12 +25,13 @@ import { scaffoldProject } from "./tools/scaffold.js";
 import { validateIntent } from "./tools/validate.js";
 import { compileIntent } from "./tools/compile.js";
 import { generateComponent } from "./tools/generate.js";
+import { buildFromPrompt } from "./tools/build.js";
 
 // Create the MCP server
 const server = new Server(
   {
     name: "ebade",
-    version: "0.3.1",
+    version: "0.4.6",
   },
   {
     capabilities: {
@@ -183,6 +185,33 @@ Use this when:
           required: ["description"],
         },
       },
+      {
+        name: "ebade_build",
+        description: `Revolutionary "Prompt-to-Product" tool. 
+Generates a complete, production-ready project from a single natural language description.
+
+Use this when the user says:
+- "Bana mor temalı bir kripto borsası yap"
+- "Create a red themed SaaS for AI model store"
+- "Make a sleek portfolio for a creative director"
+
+This tool handles architecture, component selection, color palette, and scaffolding in one shot.`,
+        inputSchema: {
+          type: "object",
+          properties: {
+            prompt: {
+              type: "string",
+              description: "The natural language instruction for the project",
+            },
+            outputDir: {
+              type: "string",
+              description:
+                "Base directory path where the project will be created (absolute)",
+            },
+          },
+          required: ["prompt", "outputDir"],
+        },
+      },
     ],
   };
 });
@@ -229,6 +258,16 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
           style: args?.style as any,
         });
 
+      case "ebade_build":
+        return {
+          content: [
+            {
+              type: "text",
+              text: await buildFromPrompt(args as any),
+            },
+          ],
+        };
+
       default:
         throw new Error(`Unknown tool: ${name}`);
     }
@@ -278,7 +317,7 @@ server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
   const { uri } = request.params;
 
   const resources: Record<string, string> = {
-    "ebade://syntax": `# ebade Syntax Reference\\n\\n@page, @ebade, @requires, @outcomes, @data, @validate, @style, @compose, @on, @expects\\n\\nCode = f(ebade)`,
+    "ebade://syntax": `# ebade Syntax Reference\n\n@page, @ebade, @requires, @outcomes, @data, @validate, @style, @compose, @on, @expects\n\nCode = f(ebade)`,
     "ebade://examples/ecommerce": `# E-commerce ebade\nname: my-store\ntype: e-commerce\nfeatures:\n  - product-catalog\n  - shopping-cart\n  - checkout`,
     "ebade://examples/saas": `# SaaS ebade\nname: my-saas\ntype: saas-dashboard\nfeatures:\n  - user-auth\n  - billing\n  - analytics`,
   };

package/packages/mcp-server/src/tools/build.ts

@@ -0,0 +1,57 @@
+import { execSync } from "child_process";
+import path from "path";
+import fs from "fs";
+
+interface BuildArgs {
+  prompt: string;
+  outputDir: string;
+}
+
+export async function buildFromPrompt(args: BuildArgs): Promise<string> {
+  const { prompt, outputDir } = args;
+
+  try {
+    // Find the CLI script path
+    // Assuming we are in packages/mcp-server/dist/tools/ (at runtime)
+    // or packages/mcp-server/src/tools/ (at dev time)
+    const cliPath = path.resolve(process.cwd(), "../../cli/scaffold.js");
+
+    if (!fs.existsSync(cliPath)) {
+      throw new Error(`CLI not found at ${cliPath}`);
+    }
+
+    console.log(`🚀 Executing ebade build from prompt: "${prompt}"`);
+
+    // Execute the CLI command
+    // We pass the prompt as an argument.
+    // We need to handle the outputDir carefully.
+    // The CLI build command currently uses its own naming logic,
+    // but it creates the folder in the current process.cwd().
+
+    const cmd = `node "${cliPath}" build "${prompt}"`;
+
+    // Run in the specified outputDir if provided
+    const result = execSync(cmd, {
+      cwd: outputDir,
+      encoding: "utf-8",
+      env: { ...process.env, NODE_ENV: "production" },
+    });
+
+    return `✅ ebade v0.4.6 Build Complete!
+    
+Prompt: "${prompt}"
+Output: ${outputDir}
+
+CLI Output:
+${result}
+
+Next Steps:
+1. Navigate to the generated folder.
+2. Run 'npm install && npm run dev'.
+3. Enjoy your turnkey project!`;
+  } catch (error) {
+    throw new Error(
+      `Build failed: ${error instanceof Error ? error.message : String(error)}`
+    );
+  }
+}

package/tests/cli/build.test.js

@@ -0,0 +1,66 @@
+import { execSync } from "child_process";
+import fs from "fs";
+import path from "path";
+import assert from "assert";
+
+async function runCliTests() {
+  console.log("🧪 Running CLI Integration Tests...\n");
+
+  const PROJECT_NAME = "ModernBlog";
+  if (fs.existsSync(PROJECT_NAME)) {
+    fs.rmSync(PROJECT_NAME, { recursive: true, force: true });
+  }
+
+  try {
+    // 1. Test 'ebade build' command
+    console.log(`Testing 'ebade build' command for ${PROJECT_NAME}...`);
+    const cmd = `node cli/scaffold.js build "A Modern Blog with blue theme"`;
+
+    execSync(cmd, { stdio: "inherit" });
+
+    const projectDir = path.join(process.cwd(), PROJECT_NAME);
+
+    assert.ok(
+      fs.existsSync(projectDir),
+      `Project directory (${PROJECT_NAME}) should exist`
+    );
+    assert.ok(
+      fs.existsSync(path.join(projectDir, "project.ebade.yaml")),
+      "project.ebade.yaml should be generated"
+    );
+    assert.ok(
+      fs.existsSync(path.join(projectDir, "app/page.tsx")),
+      "Main page should be generated"
+    );
+    assert.ok(
+      fs.existsSync(path.join(projectDir, ".env.example")),
+      ".env.example should be generated"
+    );
+    assert.ok(
+      fs.existsSync(path.join(projectDir, ".gitignore")),
+      ".gitignore should be generated"
+    );
+
+    // Verify blog pages
+    assert.ok(
+      fs.existsSync(path.join(projectDir, "app/posts/page.tsx")),
+      "Blog index page should be generated"
+    );
+
+    console.log("✅ 'ebade build' Integration OK");
+  } catch (err) {
+    console.error("\n❌ CLI Test failed:");
+    console.error(err);
+    process.exit(1);
+  } finally {
+    // Cleanup
+    console.log("\n🧹 Cleaning up test artifacts...");
+    if (fs.existsSync(PROJECT_NAME)) {
+      fs.rmSync(PROJECT_NAME, { recursive: true, force: true });
+    }
+  }
+
+  console.log("\n✨ CLI integration tests passed!");
+}
+
+runCliTests();

package/tests/framework/architect.test.js

@@ -0,0 +1,102 @@
+import {
+  EbadeArchitect,
+  toPascalCase,
+  toSnakeCase,
+  hexToHsl,
+} from "../../cli/scaffold.js";
+import assert from "assert";
+
+async function runTests() {
+  console.log("🧪 Running Framework Unit Tests (v0.4.6)...\n");
+
+  // 1. Utility Functions
+  console.log("Testing Utility Functions...");
+  assert.strictEqual(toPascalCase("hello-world"), "HelloWorld");
+  assert.strictEqual(toPascalCase("hello_world"), "HelloWorld");
+  assert.strictEqual(toSnakeCase("HelloWorld"), "hello_world");
+  assert.strictEqual(toSnakeCase("hello-world"), "hello_world");
+
+  // hexToHsl Test (Critical for Design System)
+  const hsl = hexToHsl("#8b5cf6"); // Violet
+  assert.ok(
+    hsl.includes("258"),
+    `HSL for #8b5cf6 should include hue 258, got ${hsl}`
+  );
+  console.log("✅ Utilities OK");
+
+  // 2. Architect Mapping
+  console.log("\nTesting EbadeArchitect (Complex Intent)...");
+  const prompt =
+    "Can you make a luxury gold themed dashboard with charts and login features?";
+  const config = await EbadeArchitect.plan(prompt);
+
+  // Check intelligence
+  assert.strictEqual(
+    config.name,
+    "LuxuryGold",
+    "Should filter filler words like 'Can you make a'"
+  );
+  assert.strictEqual(
+    config.design.colors.primary,
+    "#fbbf24",
+    "Gold detection failed"
+  );
+  assert.ok(
+    config.features.includes("Advanced Analytics"),
+    "Analytics detection failed"
+  );
+  assert.ok(
+    config.features.includes("Authentication"),
+    "Auth detection failed"
+  );
+
+  // Check Type-Aware Pages
+  assert.strictEqual(
+    config.pages.length,
+    2,
+    "Should have landing and dashboard"
+  );
+  assert.ok(
+    config.pages.some((p) => p.path === "/dashboard"),
+    "Dashboard page missing"
+  );
+  console.log("✅ Complex Intent mapping OK");
+
+  // 3. Project Type Specifics (E-commerce)
+  console.log("\nTesting EbadeArchitect (E-commerce)...");
+  const shopConfig = await EbadeArchitect.plan(
+    "Sleek shoe store with red theme"
+  );
+  assert.strictEqual(shopConfig.type, "e-commerce");
+  assert.ok(
+    shopConfig.pages.some((p) => p.path === "/products"),
+    "E-commerce missing /products"
+  );
+  assert.ok(
+    shopConfig.pages.some((p) => p.path === "/cart"),
+    "E-commerce missing /cart"
+  );
+  console.log("✅ E-commerce structure OK");
+
+  // 4. Project Type Specifics (Blog)
+  console.log("\nTesting EbadeArchitect (Blog)...");
+  const blogConfig = await EbadeArchitect.plan("Ocean themed news blog");
+  assert.strictEqual(blogConfig.type, "blog");
+  assert.ok(
+    blogConfig.pages.some((p) => p.path === "/posts"),
+    "Blog missing /posts index"
+  );
+  assert.ok(
+    blogConfig.pages.some((p) => p.path === "/posts/[slug]"),
+    "Blog missing /posts/[slug] dynamic route"
+  );
+  console.log("✅ Blog structure OK");
+
+  console.log("\n✨ All framework tests passed!");
+}
+
+runTests().catch((err) => {
+  console.error("\n❌ Test failed:");
+  console.error(err);
+  process.exit(1);
+});

package/www/package.json

@@ -1,6 +1,6 @@
 {
   "name": "www",
-  "version": "0.4.3",
+  "version": "0.4.6",
   "private": true,
   "scripts": {
     "dev": "next dev",