ebade 0.4.1 → 0.4.5

package/CHANGELOG.md

@@ -5,6 +5,34 @@ 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.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
+- Critical bug where templates were not found when running via `npx` (fix using `import.meta.url`).
+- Added missing component templates for SaaS Dashboard and Landing Pages (`testimonials`, `faq-accordion`, `cta-banner`, `activity-chart`, `stats-grid`, `recent-events`).
+- Updated `tsconfig.json` generation to use `jsx: preserve` and added path aliases (`@/*`).
+- Added slugification for `package.json` names to ensure valid naming conventions.
+- Synced framework versions across all packages.
+
 ## [0.4.1] - 2025-01-10
 
 ### Added
@@ -28,7 +56,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - 🎉 Initial alpha release of **ebade**
-- MCP Server package (`@ebade/mcp-server`) with 4 tools:
+- MCP Server package (`ebade-mcp-server`) with 4 tools:
   - `ebade_scaffold` - Create full projects from ebade definitions
   - `ebade_validate` - Validate ebade files against schema
   - `ebade_compile` - Compile single ebade to code

package/README.md

@@ -60,7 +60,7 @@ Add `ebade` to your AI agent (Claude, Cursor, Windsurf) via the Model Context Pr
   "mcpServers": {
     "ebade": {
       "command": "npx",
-      "args": ["-y", "@ebade/mcp-server"]
+      "args": ["-y", "ebade-mcp-server"]
     }
   }
 }

package/cli/scaffold.js

@@ -14,6 +14,10 @@ import ora from "ora";
 import prompts from "prompts";
 import chokidar from "chokidar";
 import { execSync } from "child_process";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 // ============================================
 // ANSI Renk Kodları (Terminal çıktısı için)
@@ -40,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.1${colors.reset}
+    ${colors.dim}✨ Agent-First Framework ${colors.yellow}v0.4.5${colors.reset}
 `;
 
 const log = {
@@ -70,8 +74,8 @@ function parseEbade(ebadePath) {
 // ============================================
 function getComponentTemplate(componentName, design) {
   const templatePath = path.join(
-    process.cwd(),
-    "cli/templates",
+    __dirname,
+    "templates",
     `${componentName}.tsx`
   );
 
@@ -92,17 +96,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>
   );
@@ -172,19 +178,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>
   );
 }
@@ -252,7 +254,7 @@ function generateDatabaseSchema(data) {
 function generatePackageJson(config) {
   return JSON.stringify(
     {
-      name: config.name,
+      name: config.name.toLowerCase().replace(/[^a-z0-9]/g, "-"),
       version: "0.1.0",
       private: true,
       scripts: {
@@ -263,10 +265,10 @@ function generatePackageJson(config) {
         test: "vitest",
       },
       dependencies: {
-        next: "^14.0.0",
-        react: "^18.2.0",
-        "react-dom": "^18.2.0",
-        "lucide-react": "^0.300.0",
+        next: "^14.2.0",
+        react: "^18.3.0",
+        "react-dom": "^18.3.0",
+        "lucide-react": "^0.400.0",
         clsx: "^2.1.0",
         "tailwind-merge": "^2.2.0",
         "class-variance-authority": "^0.7.0",
@@ -380,6 +382,16 @@ export default nextConfig;
 `;
 }
 
+function generatePostcssConfig() {
+  return `module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+`;
+}
+
 function generateTsConfig() {
   return JSON.stringify(
     {
@@ -395,10 +407,12 @@ function generateTsConfig() {
         moduleResolution: "node",
         resolveJsonModule: true,
         isolatedModules: true,
-        jsx: "react-jsx",
+        jsx: "preserve",
         incremental: true,
         plugins: [{ name: "next" }],
-        paths: { "@/*": ["./*"] },
+        paths: {
+          "@/*": ["./*"],
+        },
       },
       include: ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
       exclude: ["node_modules"],
@@ -453,65 +467,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;
   }
 }
  
@@ -520,9 +504,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;
+}
 `;
 }
 
@@ -630,11 +630,54 @@ function toPascalCase(str) {
 
 function toSnakeCase(str) {
   return str
-    .replace(/([A-Z])/g, "_$1")
+    .replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`)
     .toLowerCase()
     .replace(/^_/, "");
 }
 
+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()",
@@ -680,7 +723,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 ==========
@@ -745,8 +791,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()
@@ -765,7 +814,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);
 
@@ -814,6 +868,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"),
@@ -984,13 +1045,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}`);
     }

package/cli/templates/activity-chart.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * 🧠 Generated via ebade
+ * Component: ActivityChart
+ */
+export function ActivityChart() {
+  const data = [40, 70, 45, 90, 65, 80, 50, 85, 95, 60, 75, 55];
+
+  return (
+    <div className="p-6 rounded-3xl bg-slate-900 border border-slate-800 shadow-sm">
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h3 className="text-lg font-bold text-white">Activity Overview</h3>
+          <p className="text-sm text-slate-500">
+            System throughput over the last 12 hours
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <div className="flex items-center gap-1.5">
+            <div className="w-2.5 h-2.5 rounded-full bg-indigo-500"></div>
+            <span className="text-xs text-slate-400">Requests</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-end justify-between h-48 gap-2 px-2">
+        {data.map((val, i) => (
+          <div
+            key={i}
+            className="flex-1 flex flex-col items-center gap-2 group"
+          >
+            <div
+              className="w-full bg-indigo-500/20 rounded-t-lg group-hover:bg-indigo-500/40 transition-all relative"
+              style={{ height: `${val}%` }}
+            >
+              <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-slate-800 text-white text-[10px] px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">
+                {val}k
+              </div>
+            </div>
+            <span className="text-[10px] text-slate-600 font-mono">
+              H{i + 1}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/cli/templates/cta-banner.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { ArrowRight } from "lucide-react";
+
+/**
+ * 🧠 Generated via ebade
+ * Component: CtaBanner
+ */
+export function CtaBanner() {
+  return (
+    <section className="py-24 px-4">
+      <div className="max-w-5xl mx-auto p-12 rounded-[2.5rem] bg-gradient-to-br from-indigo-600 to-indigo-700 text-center relative overflow-hidden shadow-2xl">
+        <div className="absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 bg-white/10 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-0 left-0 -ml-20 -mb-20 w-60 h-60 bg-black/10 rounded-full blur-3xl"></div>
+
+        <h2 className="text-3xl md:text-5xl font-bold text-white mb-6 relative z-10">
+          Ready to build with Intent?
+        </h2>
+        <p className="text-indigo-100 text-lg mb-10 max-w-2xl mx-auto relative z-10 italic">
+          Join the revolution of Agent-First engineering. Transform your YAML
+          into production-ready software in seconds.
+        </p>
+
+        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center relative z-10">
+          <button className="px-8 py-4 bg-white text-indigo-600 font-bold rounded-2xl hover:bg-slate-50 transition-all flex items-center gap-2 group shadow-xl">
+            Get Started Free
+            <ArrowRight
+              size={20}
+              className="group-hover:translate-x-1 transition-transform"
+            />
+          </button>
+          <button className="px-8 py-4 bg-transparent text-white border border-white/20 font-semibold rounded-2xl hover:bg-white/10 transition-all">
+            Contact Sales
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}

package/cli/templates/faq-accordion.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { ChevronDown } from "lucide-react";
+
+/**
+ * 🧠 Generated via ebade
+ * Component: FaqAccordion
+ */
+export function FaqAccordion() {
+  const faqs = [
+    {
+      q: "What is ebade?",
+      a: "ebade is an Agent-First Framework designed to help AI agents build production-ready applications with deterministic outcomes.",
+    },
+    {
+      q: "How does it reduce tokens?",
+      a: "By using YAML-based intent definitions, we provide only the essential context to the model, reducing entropy and token consumption.",
+    },
+    {
+      q: "Is it compatible with Next.js?",
+      a: "Yes, ebade scaffolds native Next.js projects using the App Router and Tailwind CSS by default.",
+    },
+  ];
+
+  return (
+    <section className="py-24 bg-slate-950">
+      <div className="max-w-3xl mx-auto px-4">
+        <h2 className="text-3xl font-bold text-white text-center mb-12">
+          Frequently Asked Questions
+        </h2>
+        <div className="space-y-4">
+          {faqs.map((f, i) => (
+            <div
+              key={i}
+              className="group rounded-2xl border border-slate-800 bg-slate-900/30 overflow-hidden transition-all"
+            >
+              <button className="flex items-center justify-between w-full p-6 text-left text-white hover:bg-white/5 transition-colors">
+                <span className="font-medium">{f.q}</span>
+                <ChevronDown
+                  size={20}
+                  className="text-slate-500 group-focus:rotate-180 transition-transform"
+                />
+              </button>
+              <div className="p-6 pt-0 text-slate-400 text-sm leading-relaxed border-t border-slate-800/50">
+                {f.a}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/cli/templates/recent-events.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { CheckCircle2, Clock, Info, ShieldAlert } from "lucide-react";
+
+/**
+ * 🧠 Generated via ebade
+ * Component: RecentEvents
+ */
+export function RecentEvents() {
+  const events = [
+    {
+      title: "Deployment Successful",
+      time: "2m ago",
+      type: "success",
+      icon: CheckCircle2,
+      desc: "Production environment updated to v1.2.4",
+    },
+    {
+      title: "Security Alert",
+      time: "15m ago",
+      type: "error",
+      icon: ShieldAlert,
+      desc: "Anomalous login attempt from unknown IP",
+    },
+    {
+      title: "Backup Completed",
+      time: "1h ago",
+      type: "info",
+      icon: Clock,
+      desc: "Global database backup finished successfully",
+    },
+    {
+      title: "New Team Member",
+      time: "3h ago",
+      type: "info",
+      icon: Info,
+      desc: "Sarah Chen joined the Engineering team",
+    },
+  ];
+
+  return (
+    <div className="p-6 rounded-3xl bg-slate-900 border border-slate-800">
+      <h3 className="text-lg font-bold text-white mb-6">Recent Events</h3>
+      <div className="space-y-6">
+        {events.map((e, i) => {
+          const Icon = e.icon;
+          return (
+            <div key={i} className="flex gap-4 group">
+              <div
+                className={cn(
+                  "p-2 rounded-xl h-fit",
+                  e.type === "success"
+                    ? "bg-emerald-500/10 text-emerald-500"
+                    : e.type === "error"
+                    ? "bg-red-500/10 text-red-500"
+                    : "bg-blue-500/10 text-blue-500"
+                )}
+              >
+                <Icon size={18} />
+              </div>
+              <div className="flex-1 pb-6 border-b border-slate-800/50 group-last:border-0 group-last:pb-0">
+                <div className="flex justify-between mb-1">
+                  <h4 className="text-sm font-semibold text-slate-200">
+                    {e.title}
+                  </h4>
+                  <span className="text-[10px] text-slate-500 uppercase font-bold tracking-wider">
+                    {e.time}
+                  </span>
+                </div>
+                <p className="text-xs text-slate-500 leading-relaxed">
+                  {e.desc}
+                </p>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/cli/templates/sidebar-navigation.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import {
+  LayoutDashboard,
+  BarChart3,
+  Users2,
+  Settings,
+  CreditCard,
+  Key,
+} from "lucide-react";
+
+/**
+ * 🧠 Generated via ebade
+ * Component: SidebarNavigation
+ */
+export function SidebarNavigation() {
+  const menuItems = [
+    { label: "Dashboard", icon: LayoutDashboard, active: true },
+    { label: "Analytics", icon: BarChart3 },
+    { label: "Team", icon: Users2 },
+    { label: "Billing", icon: CreditCard },
+    { label: "API Keys", icon: Key },
+    { label: "Settings", icon: Settings },
+  ];
+
+  return (
+    <div className="w-64 h-full bg-slate-900 border-r border-slate-800 flex flex-col p-6">
+      <div className="flex items-center gap-3 mb-12">
+        <div className="w-8 h-8 bg-indigo-500 rounded-lg flex items-center justify-center text-white font-bold">
+          A
+        </div>
+        <span className="text-white font-bold tracking-tight">AnalyticsHQ</span>
+      </div>
+
+      <div className="flex-1 space-y-2">
+        {menuItems.map((item, i) => {
+          const Icon = item.icon;
+          return (
+            <button
+              key={i}
+              className={cn(
+                "flex items-center gap-3 w-full px-4 py-3 rounded-2xl transition-all",
+                item.active
+                  ? "bg-indigo-500 text-white"
+                  : "text-slate-400 hover:bg-slate-800 hover:text-white"
+              )}
+            >
+              <Icon size={20} />
+              <span className="text-sm font-medium">{item.label}</span>
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="mt-auto p-4 rounded-2xl bg-indigo-500/10 border border-indigo-500/20">
+        <p className="text-xs text-indigo-300 font-bold mb-1 italic">
+          PRO PLAN
+        </p>
+        <p className="text-[10px] text-indigo-400/70 mb-3">
+          Upgrade to Enterprise for unlimited seats.
+        </p>
+        <div className="w-full bg-slate-800 h-1 rounded-full overflow-hidden">
+          <div className="bg-indigo-500 h-full w-[65%]"></div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/cli/templates/stats-grid.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Users, Zap, Shield, TrendingUp } from "lucide-react";
+
+/**
+ * 🧠 Generated via ebade
+ * Component: StatsGrid
+ */
+export function StatsGrid() {
+  const stats = [
+    {
+      label: "Active Users",
+      value: "12,402",
+      growth: "+12.5%",
+      icon: Users,
+      color: "text-blue-500",
+      bg: "bg-blue-500/10",
+    },
+    {
+      label: "Throughput",
+      value: "84.2k",
+      growth: "+8.1%",
+      icon: Zap,
+      color: "text-indigo-500",
+      bg: "bg-indigo-500/10",
+    },
+    {
+      label: "Security Score",
+      value: "98/100",
+      growth: "Stable",
+      icon: Shield,
+      color: "text-emerald-500",
+      bg: "bg-emerald-500/10",
+    },
+    {
+      label: "Revenue",
+      value: "$42.1k",
+      growth: "+24.3%",
+      icon: TrendingUp,
+      color: "text-violet-500",
+      bg: "bg-violet-500/10",
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      {stats.map((s, i) => {
+        const Icon = s.icon;
+        return (
+          <div
+            key={i}
+            className="p-6 rounded-3xl bg-slate-900 border border-slate-800 hover:border-slate-700 transition-colors"
+          >
+            <div className="flex items-start justify-between mb-4">
+              <div className={cn("p-3 rounded-2xl", s.bg)}>
+                <Icon size={24} className={s.color} />
+              </div>
+              <span
+                className={cn(
+                  "text-xs font-bold px-2 py-1 rounded-full",
+                  s.growth.startsWith("+")
+                    ? "bg-emerald-500/10 text-emerald-500"
+                    : "bg-slate-800 text-slate-400"
+                )}
+              >
+                {s.growth}
+              </span>
+            </div>
+            <div>
+              <p className="text-sm text-slate-500 font-medium mb-1">
+                {s.label}
+              </p>
+              <h4 className="text-2xl font-bold text-white">{s.value}</h4>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/cli/templates/testimonials.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Star } from "lucide-react";
+
+/**
+ * 🧠 Generated via ebade
+ * Component: Testimonials
+ */
+export function Testimonials() {
+  const reviews = [
+    {
+      name: "Alex Rivera",
+      role: "CTO at TechFlow",
+      content:
+        "ebade changed how we bridge the gap between AI intent and production-ready code. It's a game changer.",
+      rating: 5,
+    },
+    {
+      name: "Sarah Chen",
+      role: "Lead Developer",
+      content:
+        "The most efficient way to maintain deterministic outputs with LLMs. Low entropy, high quality.",
+      rating: 5,
+    },
+    {
+      name: "Marcus Thorne",
+      role: "Product Designer",
+      content:
+        "Finally, a framework that speaks the language of agents without sacrificing developer experience.",
+      rating: 5,
+    },
+  ];
+
+  return (
+    <section className="py-24 bg-slate-950">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="text-center mb-16">
+          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
+            Trusted by the Best
+          </h2>
+          <p className="text-slate-400">
+            Join thousands of developers building the future of AI-Native
+            software.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {reviews.map((s, i) => (
+            <div
+              key={i}
+              className="p-8 rounded-3xl bg-slate-900/50 border border-slate-800 hover:border-slate-700 transition-all"
+            >
+              <div className="flex gap-1 mb-4 text-yellow-500">
+                {[...Array(s.rating)].map((_, i) => (
+                  <Star key={i} size={16} fill="currentColor" />
+                ))}
+              </div>
+              <p className="text-slate-300 mb-6 italic">"{s.content}"</p>
+              <div>
+                <p className="text-white font-semibold">{s.name}</p>
+                <p className="text-slate-500 text-sm">{s.role}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ebade",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "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/README.md

@@ -1,19 +1,17 @@
-# ebade MCP Server 🤖
+# ebade MCP Server 🐣
 
-> Enable AI agents to build with ebade - The Essence of Code
-
-This MCP (Model Context Protocol) server allows AI agents like Claude, GPT, and others to use ebade for building web applications.
+Model Context Protocol (MCP) server for the **ebade** Agent-First Framework.
 
 ## Installation
 
 ```bash
-npm install -g @ebade/mcp-server
+npx -y ebade-mcp-server
 ```
 
 Or locally:
 
 ```bash
-npm install @ebade/mcp-server
+npm install ebade-mcp-server
 ```
 
 ## Configuration

package/packages/mcp-server/package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "@ebade/mcp-server",
-  "version": "0.1.0",
+  "name": "ebade-mcp-server",
+  "version": "0.4.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "@ebade/mcp-server",
-      "version": "0.1.0",
+      "name": "ebade-mcp-server",
+      "version": "0.4.1",
       "license": "MIT",
       "dependencies": {
         "@modelcontextprotocol/sdk": "^1.25.1",

package/packages/mcp-server/package.json

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

package/www/package.json

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