ebade 0.3.0 → 0.4.0

package/cli/simulate.js

@@ -0,0 +1,102 @@
+import fs from "fs";
+import path from "path";
+import chalk from "chalk";
+import ora from "ora";
+
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+async function simulate() {
+  console.clear();
+  console.log(
+    chalk.bold.cyan("\n--- ebade Playground: Total Agent-First Flow ---")
+  );
+  console.log(
+    chalk.gray("Testing User Prompt: 'Make a premium SaaS landing page'\n")
+  );
+
+  // --- PHASE 0: The Intent Mapping (The Start) ---
+  const spinnerMapping = ora(
+    chalk.yellow("AI Agent is mapping Natural Language to ebade Intent...")
+  ).start();
+  await sleep(1500);
+
+  const yamlOutput = `
+  pages:
+    - path: "/"
+      components:
+        - navbar
+        - hero-section
+        - pricing-table
+        - footer
+  `;
+  spinnerMapping.succeed(
+    chalk.yellow(
+      "Agent-First View: Intent mapped to 4 components in project.ebade.yaml"
+    )
+  );
+  console.log(chalk.gray("Generated Intent (YAML):") + chalk.white(yamlOutput));
+
+  await sleep(1000);
+
+  // --- PHASE 1: Legacy AI (The Token Burner) ---
+  console.log(chalk.red("\n[Legacy AI Path]"));
+  const spinnerAI = ora(
+    chalk.red("Generating 5000+ lines of raw React/CSS/Logic...")
+  ).start();
+
+  // Simulate slow character-by-character generation (like a real LLM)
+  for (let i = 0; i < 40; i++) {
+    await sleep(30);
+  }
+
+  spinnerAI.fail(
+    chalk.red(
+      "Legacy AI: Burned 4200 Tokens, 15 seconds wait, High risk of CSS bugs."
+    )
+  );
+
+  await sleep(1000);
+
+  // --- PHASE 2: ebade (The Agent-First Engine) ---
+  console.log(chalk.cyan("\n[ebade Agent-First Path]"));
+  const spinnerEbade = ora(
+    chalk.cyan("CLI is expanding intents into Shadcn code...")
+  ).start();
+
+  const startTime = performance.now();
+  // Simulate reading all 4 components
+  const components = ["navbar", "hero-section", "pricing-table", "footer"];
+  let totalLines = 0;
+  components.forEach((c) => {
+    const p = path.join(process.cwd(), "cli/templates", `${c}.tsx`);
+    if (fs.existsSync(p))
+      totalLines += fs.readFileSync(p, "utf-8").split("\n").length;
+  });
+  const endTime = performance.now();
+
+  await sleep(800);
+  spinnerEbade.succeed(
+    chalk.cyan(
+      `ebade: Generated ${totalLines} lines of PR-Ready code in ${(
+        endTime - startTime
+      ).toFixed(2)}ms!`
+    )
+  );
+
+  // --- PHASE 3: The Scorecard ---
+  console.log(chalk.bold.yellow("\n--- GREEN AI LIFECYCLE SCORECARD ---"));
+  console.log(
+    chalk.white("🧠 AI Thinking: ") + chalk.green("98% Less (YAML vs Code)")
+  );
+  console.log(
+    chalk.white("⚡ App Creation: ") + chalk.green("Instant (Deterministic)")
+  );
+  console.log(
+    chalk.white("🌿 Total Carbon: ") + chalk.green("Minimal (Native Speed)")
+  );
+  console.log(
+    chalk.gray("--------------------------------------------------\n")
+  );
+}
+
+simulate();

package/cli/templates/feature-grid.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * 🧠 Generated via ebade
+ * Intent: feature-grid
+ */
+export function FeatureGrid() {
+  const features = [
+    {
+      title: "Agent-First Architecture",
+      description:
+        "Designed from the ground up for AI agents to understand and modify code effectively.",
+      icon: "🤖",
+    },
+    {
+      title: "Intent-Based Scaffolding",
+      description:
+        "Define what you want, not how to implement it. Let ebade handle the boilerplate.",
+      icon: "🎯",
+    },
+    {
+      title: "Production Ready",
+      description:
+        "Generates optimized, secure, and type-safe code that you can deploy immediately.",
+      icon: "🚀",
+    },
+    {
+      title: "Shadcn UI Standard",
+      description:
+        "Beautiful, accessible components built on Radix UI and Tailwind CSS.",
+      icon: "✨",
+    },
+    {
+      title: "Zero Token Waste",
+      description:
+        "Deterministic output saves 70% of tokens compared to raw LLM generation.",
+      icon: "💎",
+    },
+    {
+      title: "Framework Agnostic",
+      description:
+        "Supports Next.js today, with plans for Vue, Svelte, and Mobile targets.",
+      icon: "🌐",
+    },
+  ];
+
+  return (
+    <section className="py-24 px-6 bg-muted/30">
+      <div className="max-w-7xl mx-auto">
+        <div className="text-center mb-16">
+          <h2 className="text-3xl md:text-5xl font-black tracking-tight mb-4">
+            Why choose <span className="text-primary">ebade</span>?
+          </h2>
+          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+            The framework that adapts to the AI era. Build better software,
+            faster.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {features.map((feature, idx) => (
+            <div
+              key={idx}
+              className="group p-8 rounded-2xl bg-card border border-border hover:border-primary/50 transition-all hover:shadow-lg hover:-translate-y-1"
+            >
+              <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center text-2xl mb-6 group-hover:scale-110 transition-transform">
+                {feature.icon}
+              </div>
+              <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
+              <p className="text-muted-foreground leading-relaxed">
+                {feature.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/cli/templates/footer.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * 🧠 Generated via ebade
+ * Intent: footer
+ */
+export function Footer() {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="border-t border-border bg-background pt-16 pb-8 px-6">
+      <div className="max-w-7xl mx-auto">
+        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 mb-12">
+          <div className="col-span-2 lg:col-span-2 pr-8">
+            <div className="flex items-center gap-2 mb-6">
+              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center font-bold text-primary-foreground">
+                e
+              </div>
+              <span className="text-xl font-bold tracking-tight">ebade</span>
+            </div>
+            <p className="text-muted-foreground mb-6 max-w-sm">
+              The first Agent-First framework. Empowering AI and humans to build
+              software together, faster and more reliably than ever before.
+            </p>
+            <div className="flex gap-4">
+              {/* Social Icons Placeholder */}
+              {[1, 2, 3, 4].map((i) => (
+                <div
+                  key={i}
+                  className="w-8 h-8 rounded-full bg-muted hover:bg-primary/20 transition-colors cursor-pointer"
+                />
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <h4 className="font-bold mb-4">Product</h4>
+            <ul className="space-y-3 text-sm text-muted-foreground">
+              <li>
+                <a href="#" className="hover:text-primary transition-colors">
+                  Features
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-primary transition-colors">
+                  Documentation
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-primary transition-colors">
+                  Templates
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-primary transition-colors">
+                  Pricing
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h4 className="font-bold mb-4">Company</h4>
+            <ul className="space-y-3 text-sm text-muted-foreground">
+              <li>
+                <a href="#" className="hover:text-primary transition-colors">
+                  About
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-primary transition-colors">
+                  Blog
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-primary transition-colors">
+                  Careers
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-primary transition-colors">
+                  Contact
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h4 className="font-bold mb-4">Legal</h4>
+            <ul className="space-y-3 text-sm text-muted-foreground">
+              <li>
+                <a href="#" className="hover:text-primary transition-colors">
+                  Privacy
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-primary transition-colors">
+                  Terms
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-primary transition-colors">
+                  Cookie Policy
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="pt-8 border-t border-border flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
+          <p>© {currentYear} ebade framework. All rights reserved.</p>
+          <div className="flex items-center gap-2">
+            <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
+            <span>All systems operational</span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/cli/templates/hero-section.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * 🧠 Generated via ebade
+ * Intent: hero-section
+ */
+export function HeroSection() {
+  return (
+    <section className="relative py-24 px-6 md:px-10 overflow-hidden bg-background">
+      <div className="max-w-7xl mx-auto text-center relative z-10">
+        <h1 className="text-5xl md:text-8xl font-black tracking-tighter mb-8 leading-[0.9]">
+          NEXT ERA OF <br />
+          <span className="text-primary italic">BUILDING.</span>
+        </h1>
+        <p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-12 font-medium tracking-tight">
+          Agent-First development is here. Build production-ready apps with
+          intent-based architecture and Shadcn aesthetics.
+        </p>
+        <div className="flex flex-col sm:flex-row justify-center gap-4">
+          <button className="h-14 px-10 rounded-full font-bold bg-primary text-primary-foreground transition-all hover:scale-105 hover:shadow-[0_0_20px_rgba(var(--primary),0.3)] shadow-xl active:scale-95">
+            Start Building
+          </button>
+          <button className="h-14 px-10 rounded-full font-bold bg-secondary text-secondary-foreground transition-all hover:bg-secondary/80 border border-border">
+            View Manifesto
+          </button>
+        </div>
+      </div>
+      {/* Background Decor */}
+      <div className="absolute top-0 left-0 w-full h-full opacity-20 pointer-events-none bg-[radial-gradient(circle_at_50%_50%,var(--primary)_0%,transparent_50%)]" />
+      <div className="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 rounded-full blur-3xl pointer-events-none" />
+    </section>
+  );
+}

package/cli/templates/login-form.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * 🧠 Generated via ebade
+ * Intent: login-form
+ */
+export function LoginForm() {
+  return (
+    <div className="w-full max-w-md mx-auto p-8">
+      <div className="mb-8 text-center">
+        <h2 className="text-3xl font-black tracking-tight mb-2">
+          Welcome back
+        </h2>
+        <p className="text-muted-foreground">
+          Enter your credentials to continue
+        </p>
+      </div>
+
+      <form className="space-y-6">
+        <div className="space-y-2">
+          <label htmlFor="email" className="text-sm font-medium">
+            Email
+          </label>
+          <input
+            id="email"
+            type="email"
+            placeholder="you@example.com"
+            className="w-full px-4 py-3 rounded-lg border border-input bg-background focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-all"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <label htmlFor="password" className="text-sm font-medium">
+              Password
+            </label>
+            <a href="#" className="text-xs text-primary hover:underline">
+              Forgot password?
+            </a>
+          </div>
+          <input
+            id="password"
+            type="password"
+            placeholder="••••••••"
+            className="w-full px-4 py-3 rounded-lg border border-input bg-background focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-all"
+          />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <input
+            id="remember"
+            type="checkbox"
+            className="w-4 h-4 rounded border-input text-primary focus:ring-2 focus:ring-ring"
+          />
+          <label htmlFor="remember" className="text-sm text-muted-foreground">
+            Remember me for 30 days
+          </label>
+        </div>
+
+        <button
+          type="submit"
+          className="w-full py-3 px-6 rounded-lg bg-primary text-primary-foreground font-bold hover:opacity-90 transition-all shadow-lg"
+        >
+          Sign in
+        </button>
+
+        <div className="relative my-6">
+          <div className="absolute inset-0 flex items-center">
+            <div className="w-full border-t border-border"></div>
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-background px-2 text-muted-foreground">
+              Or continue with
+            </span>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <button
+            type="button"
+            className="py-3 px-4 rounded-lg border border-border bg-background hover:bg-accent transition-all flex items-center justify-center gap-2 font-medium"
+          >
+            <svg className="w-5 h-5" viewBox="0 0 24 24">
+              <path
+                fill="currentColor"
+                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+              />
+              <path
+                fill="currentColor"
+                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+              />
+              <path
+                fill="currentColor"
+                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+              />
+              <path
+                fill="currentColor"
+                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+              />
+            </svg>
+            Google
+          </button>
+          <button
+            type="button"
+            className="py-3 px-4 rounded-lg border border-border bg-background hover:bg-accent transition-all flex items-center justify-center gap-2 font-medium"
+          >
+            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+            </svg>
+            GitHub
+          </button>
+        </div>
+
+        <p className="text-center text-sm text-muted-foreground">
+          Don't have an account?{" "}
+          <a href="#" className="text-primary font-medium hover:underline">
+            Sign up
+          </a>
+        </p>
+      </form>
+    </div>
+  );
+}

package/cli/templates/navbar.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * 🧠 Generated via ebade
+ * Intent: navbar
+ */
+export function Navbar() {
+  const links = [
+    { label: "Essence", href: "#essence" },
+    { label: "Flow", href: "#flow" },
+    { label: "Pricing", href: "#pricing" },
+    { label: "Github", href: "https://github.com/hasankemaldemirci/ebade" },
+  ];
+
+  return (
+    <nav className="fixed top-0 left-0 right-0 z-50 transition-all border-b border-white/5 backdrop-blur-md bg-background/50">
+      <div className="max-w-7xl mx-auto px-6">
+        <div className="flex items-center justify-between h-20">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-primary rounded-xl flex items-center justify-center font-black text-primary-foreground transform rotate-3">
+              e
+            </div>
+            <span className="text-xl font-black tracking-tighter uppercase italic">
+              ebade
+            </span>
+          </div>
+
+          <div className="hidden md:flex items-center gap-10">
+            {links.map((link) => (
+              <a
+                key={link.label}
+                href={link.href}
+                className="text-[13px] uppercase font-bold tracking-widest text-muted-foreground hover:text-primary transition-colors"
+              >
+                {link.label}
+              </a>
+            ))}
+          </div>
+
+          <div className="flex items-center gap-6">
+            <button className="text-xs font-bold uppercase tracking-widest opacity-50 hover:opacity-100 transition-opacity">
+              Login
+            </button>
+            <button className="h-10 px-6 rounded-lg bg-primary text-primary-foreground text-xs font-bold uppercase tracking-widest hover:opacity-90 transition-all shadow-lg active:scale-95">
+              Launch App
+            </button>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}

package/cli/templates/pricing-table.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * 🧠 Generated via ebade
+ * Intent: pricing-table
+ */
+export function PricingTable() {
+  const plans = [
+    {
+      name: "Starter",
+      price: "$0",
+      period: "forever",
+      description: "Perfect for trying out ebade",
+      features: [
+        "Up to 3 projects",
+        "Basic components",
+        "Community support",
+        "Public templates",
+      ],
+      cta: "Start Free",
+      popular: false,
+    },
+    {
+      name: "Pro",
+      price: "$29",
+      period: "per month",
+      description: "For serious builders",
+      features: [
+        "Unlimited projects",
+        "Premium components",
+        "Priority support",
+        "Private templates",
+        "Advanced analytics",
+        "Custom domains",
+      ],
+      cta: "Go Pro",
+      popular: true,
+    },
+    {
+      name: "Enterprise",
+      price: "Custom",
+      period: "contact us",
+      description: "For teams and organizations",
+      features: [
+        "Everything in Pro",
+        "Dedicated support",
+        "SLA guarantee",
+        "Custom integrations",
+        "Team collaboration",
+        "Advanced security",
+      ],
+      cta: "Contact Sales",
+      popular: false,
+    },
+  ];
+
+  return (
+    <div className="py-20 px-6">
+      <div className="max-w-7xl mx-auto">
+        <div className="text-center mb-16">
+          <h2 className="text-4xl md:text-6xl font-black tracking-tight mb-4">
+            Simple, <span className="text-primary">transparent</span> pricing
+          </h2>
+          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+            Choose the plan that fits your needs. All plans include core
+            features.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+          {plans.map((plan, idx) => (
+            <div
+              key={idx}
+              className={cn(
+                "relative p-8 rounded-2xl border transition-all hover:shadow-xl",
+                plan.popular
+                  ? "border-primary bg-primary/5 shadow-lg scale-105"
+                  : "border-border bg-card"
+              )}
+            >
+              {plan.popular && (
+                <div className="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-primary text-primary-foreground text-xs font-bold rounded-full uppercase tracking-wider">
+                  Most Popular
+                </div>
+              )}
+
+              <div className="mb-6">
+                <h3 className="text-2xl font-bold mb-2">{plan.name}</h3>
+                <p className="text-sm text-muted-foreground mb-4">
+                  {plan.description}
+                </p>
+                <div className="flex items-baseline gap-2">
+                  <span className="text-5xl font-black tracking-tight">
+                    {plan.price}
+                  </span>
+                  <span className="text-muted-foreground text-sm">
+                    / {plan.period}
+                  </span>
+                </div>
+              </div>
+
+              <ul className="space-y-3 mb-8">
+                {plan.features.map((feature, i) => (
+                  <li key={i} className="flex items-start gap-3 text-sm">
+                    <svg
+                      className="w-5 h-5 text-primary flex-shrink-0 mt-0.5"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M5 13l4 4L19 7"
+                      />
+                    </svg>
+                    <span>{feature}</span>
+                  </li>
+                ))}
+              </ul>
+
+              <button
+                className={cn(
+                  "w-full py-3 px-6 rounded-lg font-bold transition-all",
+                  plan.popular
+                    ? "bg-primary text-primary-foreground hover:opacity-90 shadow-lg"
+                    : "bg-secondary text-secondary-foreground hover:bg-secondary/80"
+                )}
+              >
+                {plan.cta}
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}