ebade 0.4.1 → 0.4.3

package/CHANGELOG.md

@@ -5,6 +5,15 @@ 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.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 +37,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.3${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`
   );
 
@@ -252,7 +256,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 +267,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",
@@ -395,10 +399,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"],

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.3",
   "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.3",
+  "description": "MCP Server for ebade v0.4.3 - 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.3",
   "private": true,
   "scripts": {
     "dev": "next dev",