npm - @emberkit/cli - Versions diffs - 0.5.2 → 0.6.1-alpha.0 - Mend

@emberkit/cli 0.5.2 → 0.6.1-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/dist/cli.js +44 -10
package/dist/commands/create.js +10 -21
package/dist/templates/action/index.js +12 -0
package/dist/templates/action.js +12 -0
package/dist/templates/api/api.js +280 -0
package/dist/templates/apiRoute/index.js +20 -0
package/dist/templates/apiRoute.js +20 -0
package/dist/templates/blog/blog.js +358 -0
package/dist/templates/component/index.js +14 -0
package/dist/templates/component.js +14 -0
package/dist/templates/config/index.js +13 -0
package/dist/templates/config.js +13 -0
package/dist/templates/context/index.js +21 -0
package/dist/templates/context.js +21 -0
package/dist/templates/dashboard/dashboard.js +406 -0
package/dist/templates/entry/index.js +15 -0
package/dist/templates/entry.js +15 -0
package/dist/templates/errorBoundary/index.js +17 -0
package/dist/templates/errorBoundary.js +17 -0
package/dist/templates/form/index.js +59 -0
package/dist/templates/form.js +59 -0
package/dist/templates/index.js +0 -260
package/dist/templates/layout/index.js +16 -0
package/dist/templates/layout.js +16 -0
package/dist/templates/layoutRoutes/index.js +9 -0
package/dist/templates/layoutRoutes.js +9 -0
package/dist/templates/loader/index.js +10 -0
package/dist/templates/loader.js +10 -0
package/dist/templates/minimal/minimal.js +89 -0
package/dist/templates/project-templates/_shared/base.js +139 -0
package/dist/templates/project-templates/api/api.js +209 -0
package/dist/templates/project-templates/blog/blog.js +283 -0
package/dist/templates/project-templates/dashboard/dashboard.js +331 -0
package/dist/templates/project-templates/minimal/minimal.js +21 -0
package/dist/templates/project-templates/saas/saas.js +461 -0
package/dist/templates/project-templates/starter-kit/starter.js +209 -0
package/dist/templates/project-templates/starter-kit/with-ui.js +365 -0
package/dist/templates/projects/starter.js +286 -0
package/dist/templates/projects/with-ui.js +445 -0
package/dist/templates/projects.js +419 -191
package/dist/templates/route/index.js +12 -0
package/dist/templates/route.js +12 -0
package/dist/templates/saas/saas.js +539 -0
package/dist/templates/signal/index.js +25 -0
package/dist/templates/signal.js +25 -0
package/dist/utils/generator.js +30 -2
package/package.json +1 -2

package/dist/templates/project-templates/starter-kit/with-ui.js ADDED Viewed

@@ -0,0 +1,365 @@
+import { buildPackageJson, buildTsConfig, buildViteConfig, buildIndexHtml, buildEntryFile, GITIGNORE, } from "../_shared/base.js";
+const INTER_FONT = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";
+export const withUiTemplate = {
+    "package.json": buildPackageJson({ hasTailwind: true, hasUI: true }),
+    "tsconfig.json": buildTsConfig(),
+    "vite.config.ts": buildViteConfig(true),
+    "index.html": buildIndexHtml({ fonts: [INTER_FONT] }),
+    ".gitignore": GITIGNORE,
+    "src/index.tsx": buildEntryFile({ hasLayout: true, hasCss: true }),
+    "src/styles.css": `@import "tailwindcss";
+@theme {
+  --color-ember-50: #fff7ed;
+  --color-ember-100: #ffedd5;
+  --color-ember-200: #fed7aa;
+  --color-ember-300: #fdba74;
+  --color-ember-400: #fb923c;
+  --color-ember-500: #f97316;
+  --color-ember-600: #ea580c;
+  --color-ember-700: #c2410c;
+  --color-ember-800: #9a3412;
+  --color-ember-900: #7c2d12;
+  --font-family-sans: 'Inter', system-ui, sans-serif;
+}
+@keyframes float {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-20px); }
+}
+@keyframes fade-in-up {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes fade-in-down {
+  from { opacity: 0; transform: translateY(-20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes pulse-glow {
+  0%, 100% { opacity: 0.4; transform: scale(1); }
+  50% { opacity: 0.6; transform: scale(1.05); }
+}
+body {
+  @apply bg-[#0b0f19] text-slate-200 font-sans;
+}
+a {
+  @apply text-inherit no-underline;
+}
+.animate-float { animation: float 6s ease-in-out infinite; }
+.animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; }
+.animate-fade-in-down { animation: fade-in-down 0.6s ease-out forwards; }
+.animate-pulse-glow { animation: pulse-glow 4s ease-in-out infinite; }`,
+    "src/routes/_layout.tsx": `import type { RouteComponent } from '@emberkit/core';
+import { Head } from '@emberkit/core';
+import { DefaultLayout } from '@emberkit/ui';
+const Layout: RouteComponent = ({ children }) => {
+  return (
+    <>
+      <Head>
+        <title>{{name}}</title>
+        <meta name="description" content="Built with EmberKit UI" />
+      </Head>
+      <div className="relative min-h-screen">
+        <div className="pointer-events-none fixed inset-0 overflow-hidden">
+          <div className="absolute -top-40 -right-40 w-96 h-96 rounded-full bg-ember-500/10 blur-[120px] animate-pulse-glow" />
+          <div className="absolute -bottom-40 -left-40 w-96 h-96 rounded-full bg-amber-500/5 blur-[120px] animate-pulse-glow" style={{ animationDelay: '2s' }} />
+        </div>
+        <DefaultLayout
+          logo={
+            <span className="flex items-center gap-2">
+              <span className="text-2xl animate-float">&#128293;</span>
+              <span className="font-bold text-xl bg-gradient-to-r from-ember-400 to-ember-600 bg-clip-text text-transparent">{{name}}</span>
+            </span>
+          }
+          navItems={[
+            { label: 'Home', href: '/' },
+            { label: 'About', href: '/about' },
+            { label: 'Docs', href: 'https://emberkit.dev/docs', external: true },
+          ]}
+        >
+          {children}
+        </DefaultLayout>
+      </div>
+    </>
+  );
+};
+export default Layout;`,
+    "src/routes/index.tsx": `import type { RouteComponent } from '@emberkit/core';
+import { Button, Card, Heading, Text, Badge, Input } from '@emberkit/ui';
+import { signal } from '@emberkit/core';
+const HomePage: RouteComponent = () => {
+  const email = signal('');
+  const activeTab = signal('buttons');
+  return (
+    <div className="relative space-y-24">
+      {/* Hero */}
+      <section className="relative text-center py-20">
+        <div className="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[400px] w-[400px] rounded-full bg-ember-500/15 blur-[150px] animate-pulse-glow" />
+        <div className="relative z-10 animate-fade-in-down">
+          <Badge variant="primary" className="mb-6 inline-flex">
+            &#10024; Built with EmberKit UI
+          </Badge>
+          <Heading level="h1" size="4xl" weight="bold" className="mb-6">
+            Welcome to {' '}
+            <span className="bg-gradient-to-r from-ember-400 via-ember-500 to-amber-500 bg-clip-text text-transparent">
+              {{name}}
+            </span>
+          </Heading>
+          <Text size="xl" color="muted" className="max-w-2xl mx-auto mb-10">
+            A modern starter template with EmberKit UI components and Tailwind CSS.
+            Build beautiful interfaces with our pre-built component library.
+          </Text>
+          <div className="flex gap-4 justify-center">
+            <Button variant="primary" size="lg" className="shadow-lg shadow-ember-500/20 hover:shadow-ember-500/40 transition-shadow">
+              Get Started
+            </Button>
+            <Button variant="secondary" size="lg">
+              View Docs &#8594;
+            </Button>
+          </div>
+        </div>
+      </section>
+      {/* Features Grid */}
+      <section>
+        <Heading level="h2" size="2xl" weight="semibold" className="mb-2 text-center">
+          Why EmberKit?
+        </Heading>
+        <Text color="muted" className="text-center mb-10 max-w-lg mx-auto">
+          Everything you need to build fast, beautiful web applications.
+        </Text>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {[
+            { icon: '&#9889;', title: 'Lightning Fast', desc: 'Sub-10KB runtime with tree-shakeable architecture' },
+            { icon: '&#128303;', title: 'TypeScript First', desc: 'Full type safety with intelligent autocomplete' },
+            { icon: '&#128726;', title: 'File-Based Routing', desc: 'Routes automatically created from your file structure' },
+          ].map((f, i) => (
+            <Card key={f.title} padding="lg" className="relative group hover:border-ember-500/50 transition-all duration-300 hover:-translate-y-1" style={{ animationDelay: \`\${i * 100}ms\` }}>
+              <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-ember-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+              <div className="relative">
+                <div className="w-12 h-12 rounded-xl bg-ember-500/10 flex items-center justify-center text-2xl mb-4 group-hover:scale-110 transition-transform">
+                  {f.icon}
+                </div>
+                <Heading level="h3" size="lg" weight="semibold" className="mb-2">
+                  {f.title}
+                </Heading>
+                <Text color="muted">{f.desc}</Text>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </section>
+      {/* Component Showcase */}
+      <section>
+        <Heading level="h2" size="2xl" weight="semibold" className="mb-2 text-center">
+          UI Components
+        </Heading>
+        <Text color="muted" className="text-center mb-8">
+          Explore our pre-built component library.
+        </Text>
+        {/* Tabs */}
+        <div className="flex justify-center mb-8">
+          <div className="inline-flex p-1 rounded-lg bg-slate-800/50 border border-slate-700/50">
+            {[
+              { id: 'buttons', label: 'Buttons' },
+              { id: 'cards', label: 'Cards' },
+              { id: 'forms', label: 'Forms' },
+            ].map((tab) => (
+              <button
+                key={tab.id}
+                className={\`px-4 py-2 text-sm font-medium rounded-md transition-all \${activeTab.value === tab.id ? 'bg-ember-500 text-white shadow-md' : 'text-slate-400 hover:text-slate-200'}\`}
+                onClick={() => { activeTab.value = tab.id; }}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        </div>
+        {/* Tab Content */}
+        {activeTab.value === 'buttons' && (
+          <Card padding="xl" className="max-w-2xl mx-auto">
+            <div className="text-center mb-6">
+              <Badge variant="primary" className="mb-2">Buttons</Badge>
+              <Heading level="h3" size="lg" weight="semibold">Button Variants</Heading>
+            </div>
+            <div className="flex flex-wrap gap-3 justify-center">
+              <Button variant="primary">Primary</Button>
+              <Button variant="secondary">Secondary</Button>
+              <Button variant="ghost">Ghost</Button>
+              <Button variant="primary" size="sm">Small</Button>
+              <Button variant="secondary" size="lg">Large</Button>
+            </div>
+            <div className="mt-6 pt-6 border-t border-slate-700/50">
+              <Heading level="h4" size="sm" weight="semibold" className="mb-3 text-slate-400">With Icons</Heading>
+              <div className="flex flex-wrap gap-3 justify-center">
+                <Button variant="primary">&#9889; Get Started</Button>
+                <Button variant="secondary">Learn More &#8594;</Button>
+                <Button variant="ghost">&#10084; Like</Button>
+              </div>
+            </div>
+          </Card>
+        )}
+        {activeTab.value === 'cards' && (
+          <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
+            <Card padding="lg" className="hover:border-ember-500/50 transition-colors">
+              <Badge variant="success" className="mb-3">Analytics</Badge>
+              <Heading level="h3" size="lg" weight="semibold" className="mb-2">
+                Revenue Growth
+              </Heading>
+              <div className="text-3xl font-bold text-ember-400 mb-1">$45,231</div>
+              <Text color="muted" className="text-sm">+20.1% from last month</Text>
+              <div className="mt-4 h-2 rounded-full bg-slate-700 overflow-hidden">
+                <div className="h-full w-3/4 rounded-full bg-gradient-to-r from-ember-500 to-amber-500" />
+              </div>
+            </Card>
+            <Card padding="lg" className="hover:border-ember-500/50 transition-colors">
+              <Badge variant="info" className="mb-3">Users</Badge>
+              <Heading level="h3" size="lg" weight="semibold" className="mb-2">
+                Active Users
+              </Heading>
+              <div className="text-3xl font-bold text-blue-400 mb-1">2,338</div>
+              <Text color="muted" className="text-sm">+15.3% from last month</Text>
+              <div className="mt-4 h-2 rounded-full bg-slate-700 overflow-hidden">
+                <div className="h-full w-1/2 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500" />
+              </div>
+            </Card>
+          </div>
+        )}
+        {activeTab.value === 'forms' && (
+          <Card padding="xl" className="max-w-md mx-auto">
+            <div className="text-center mb-6">
+              <Badge variant="info" className="mb-2">Forms</Badge>
+              <Heading level="h3" size="lg" weight="semibold">Newsletter Signup</Heading>
+            </div>
+            <div className="space-y-4">
+              <Input
+                label="Name"
+                placeholder="John Doe"
+              />
+              <Input
+                label="Email"
+                type="email"
+                placeholder="you@example.com"
+                value={email.value}
+                onChange={(e) => { email.value = e.currentTarget.value; }}
+              />
+              <Button variant="primary" className="w-full shadow-lg shadow-ember-500/20">
+                Subscribe &#10148;
+              </Button>
+            </div>
+          </Card>
+        )}
+      </section>
+      {/* CTA */}
+      <section className="relative py-20">
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="w-[500px] h-[200px] rounded-full bg-ember-500/10 blur-[100px]" />
+        </div>
+        <div className="relative z-10 text-center">
+          <Heading level="h2" size="2xl" weight="semibold" className="mb-4">
+            Ready to build something amazing?
+          </Heading>
+          <Text color="muted" className="max-w-xl mx-auto mb-8">
+            Start building your next project with EmberKit's powerful components and TypeScript-first API.
+          </Text>
+          <Button variant="primary" size="lg" className="shadow-lg shadow-ember-500/25 hover:shadow-ember-500/40 transition-shadow">
+            Create Project &#10148;
+          </Button>
+        </div>
+      </section>
+    </div>
+  );
+};
+export default HomePage;`,
+    "src/routes/about.tsx": `import type { RouteComponent } from '@emberkit/core';
+import { Head } from '@emberkit/core';
+import { Heading, Text, Button, Card, Badge } from '@emberkit/ui';
+const AboutPage: RouteComponent = () => {
+  return (
+    <>
+      <Head>
+        <title>About - {{name}}</title>
+      </Head>
+      <div className="max-w-3xl mx-auto py-12 space-y-12">
+        {/* Header */}
+        <div className="text-center">
+          <Badge variant="primary" className="mb-4 inline-flex">About</Badge>
+          <Heading level="h1" size="3xl" weight="bold">
+            About {' '}
+            <span className="bg-gradient-to-r from-ember-400 to-ember-600 bg-clip-text text-transparent">{{name}}</span>
+          </Heading>
+        </div>
+        {/* Description */}
+        <Card padding="xl" className="border-ember-500/20">
+          <Text size="lg" color="muted" className="leading-relaxed">
+            This project was created with EmberKit and the UI component library.
+            It demonstrates how to build modern, beautiful interfaces with our
+            pre-built components and Tailwind CSS.
+          </Text>
+        </Card>
+        {/* Features */}
+        <div className="grid sm:grid-cols-2 gap-4">
+          {[
+            { icon: '&#128268;', title: 'TypeScript-first', desc: 'Full type safety with intelligent autocomplete' },
+            { icon: '&#127912;', title: 'UI Components', desc: 'Pre-built atoms, molecules, and organisms' },
+            { icon: '&#127752;', title: 'Tailwind CSS', desc: 'Utility-first styling with custom theme' },
+            { icon: '&#128726;', title: 'File Routing', desc: 'Automatic routes from your file structure' },
+          ].map((f) => (
+            <Card key={f.title} padding="lg" className="hover:border-ember-500/50 transition-all hover:-translate-y-0.5">
+              <div className="text-2xl mb-3">{f.icon}</div>
+              <Heading level="h3" size="md" weight="semibold" className="mb-1">
+                {f.title}
+              </Heading>
+              <Text color="muted" size="sm">{f.desc}</Text>
+            </Card>
+          ))}
+        </div>
+        {/* Tech Stack */}
+        <Card padding="xl">
+          <Heading level="h3" size="lg" weight="semibold" className="mb-4 text-center">
+            Tech Stack
+          </Heading>
+          <div className="flex flex-wrap gap-2 justify-center">
+            {['EmberKit', 'TypeScript', 'Tailwind CSS', 'Vite', 'JSX'].map((tech) => (
+              <Badge key={tech} variant="primary" className="px-3 py-1.5">
+                {tech}
+              </Badge>
+            ))}
+          </div>
+        </Card>
+        {/* Back */}
+        <div className="text-center">
+          <Button variant="secondary">
+            &#8592; Back to Home
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
+export default AboutPage;`,
+};

package/dist/templates/projects/starter.js ADDED Viewed

@@ -0,0 +1,286 @@
+export const starterFiles = {
+    "package.json": `{
+  "name": "{{name}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "emberkit dev",
+    "build": "emberkit build",
+    "preview": "emberkit preview"
+  },
+  "dependencies": {
+    "@emberkit/core": "^0.2.4"
+  },
+  "devDependencies": {
+    "@emberkit/cli": "^0.2.4",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.0"
+  }
+}`,
+    "tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emberkit/core",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}`,
+    "vite.config.ts": `import { defineConfig } from 'vite';
+import { emberkitVitePlugin } from '@emberkit/core/vite-plugin';
+import tailwindcss from '@tailwindcss/vite';
+export default defineConfig({
+  plugins: [emberkitVitePlugin(), tailwindcss()],
+  server: {
+    port: 3000,
+    host: 'localhost',
+  },
+  esbuild: {
+    jsxImportSource: '@emberkit/core',
+  },
+});`,
+    "index.html": `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{name}}</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+</head>
+<body id="app">
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+</html>`,
+    "src/index.tsx": `import { render } from '@emberkit/core';
+import { routes } from 'virtual:emberkit-routes';
+import App from './routes/_layout';
+import './styles.css';
+const root = document.getElementById('app');
+if (root) {
+  try {
+    render(App, root, { routes });
+  } catch (error) {
+    console.error('[entry] Render error:', error);
+  }
+}`,
+    "src/styles.css": `@import "tailwindcss";
+@theme {
+  --color-ember-50: #fff7ed;
+  --color-ember-100: #ffedd5;
+  --color-ember-200: #fed7aa;
+  --color-ember-300: #fdba74;
+  --color-ember-400: #fb923c;
+  --color-ember-500: #f97316;
+  --color-ember-600: #ea580c;
+  --color-ember-700: #c2410c;
+  --color-ember-800: #9a3412;
+  --color-ember-900: #7c2d12;
+  --font-sans: 'Inter', system-ui, sans-serif;
+}
+@keyframes float {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-20px); }
+}
+@keyframes fade-in-up {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes pulse-glow {
+  0%, 100% { opacity: 0.4; transform: scale(1); }
+  50% { opacity: 0.6; transform: scale(1.05); }
+}
+body {
+  @apply bg-[#0b0f19] text-slate-200 font-sans min-h-screen;
+}
+a {
+  @apply text-inherit no-underline transition-colors;
+}
+.animate-float { animation: float 6s ease-in-out infinite; }
+.animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; }
+.animate-pulse-glow { animation: pulse-glow 4s ease-in-out infinite; }`,
+    "src/routes/_layout.tsx": `import type { RouteComponent } from '@emberkit/core';
+import { Head } from '@emberkit/core';
+const Layout: RouteComponent = ({ children }) => {
+  return (
+    <>
+      <Head>
+        <title>{{name}}</title>
+        <meta name="description" content="Built with EmberKit" />
+      </Head>
+      <div className="relative min-h-screen flex flex-col">
+        {/* Ambient background */}
+        <div className="pointer-events-none fixed inset-0 overflow-hidden">
+          <div className="absolute -top-40 -right-40 w-96 h-96 rounded-full bg-ember-500/10 blur-[120px] animate-pulse-glow" />
+          <div className="absolute -bottom-40 -left-40 w-96 h-96 rounded-full bg-amber-500/5 blur-[120px] animate-pulse-glow" style={{ animationDelay: '2s' }} />
+        </div>
+        <header className="relative z-50 border-b border-slate-800/50 bg-[#0b0f19]/80 backdrop-blur-xl sticky top-0">
+          <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
+            <a href="/" className="flex items-center gap-2 group">
+              <span className="text-2xl animate-float">&#128293;</span>
+              <span className="text-xl font-bold bg-gradient-to-r from-ember-400 to-ember-500 bg-clip-text text-transparent">
+                {{name}}
+              </span>
+            </a>
+            <nav className="flex items-center gap-6">
+              <a href="/" className="text-slate-400 hover:text-ember-500 font-medium transition-colors">Home</a>
+              <a href="/about" className="text-slate-400 hover:text-ember-500 font-medium transition-colors">About</a>
+              <a href="https://emberkit.dev/docs" target="_blank" className="text-slate-400 hover:text-ember-500 font-medium transition-colors">
+                Docs <span className="text-xs">&#8599;</span>
+              </a>
+            </nav>
+          </div>
+        </header>
+        <main className="relative z-10 flex-1">{children}</main>
+        <footer className="relative z-10 border-t border-slate-800/50 py-8 text-center text-sm text-slate-500">
+          <p>Built with <a href="https://emberkit.dev" className="text-ember-500 hover:underline">EmberKit</a></p>
+        </footer>
+      </div>
+    </>
+  );
+};
+export default Layout;`,
+    "src/routes/index.tsx": `import type { RouteComponent } from '@emberkit/core';
+import { signal } from '@emberkit/core';
+const HomePage: RouteComponent = () => {
+  const count = signal(0);
+  return (
+    <div className="relative max-w-6xl mx-auto px-6 py-16 space-y-24">
+      {/* Hero Section */}
+      <section className="relative text-center space-y-6 animate-fade-in-down">
+        <div className="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[400px] w-[400px] rounded-full bg-ember-500/10 blur-[120px] animate-pulse-glow" />
+        <h1 className="relative z-10 text-5xl md:text-6xl font-extrabold tracking-tight">
+          Welcome to <span className="bg-gradient-to-r from-ember-400 via-ember-500 to-amber-500 bg-clip-text text-transparent">{{name}}</span>
+        </h1>
+        <p className="relative z-10 text-xl text-slate-400 max-w-2xl mx-auto">
+          A minimalist TypeScript-first JSX framework built for speed and simplicity.
+          Get started in seconds with hot module replacement and zero-config routing.
+        </p>
+        <div className="relative z-10 flex gap-4 justify-center pt-4">
+          <a href="/about" className="px-6 py-3 bg-ember-500 hover:bg-ember-600 text-white font-semibold rounded-lg transition-all hover:scale-105 shadow-lg shadow-ember-500/20">
+            Learn More
+          </a>
+          <a href="https://emberkit.dev/docs" target="_blank" className="px-6 py-3 border border-slate-700 hover:border-ember-500 text-slate-300 hover:text-ember-500 font-semibold rounded-lg transition-all">
+            Read Docs &#8594;
+          </a>
+        </div>
+      </section>
+      {/* Features Grid */}
+      <section className="grid md:grid-cols-3 gap-6">
+        {[
+          { icon: '&#9889;', title: 'Lightning Fast', desc: 'Sub-10KB runtime with tree-shakeable architecture' },
+          { icon: '&#128303;', title: 'TypeScript First', desc: 'Full type safety with intelligent autocomplete' },
+          { icon: '&#128726;', title: 'File-Based Routing', desc: 'Routes automatically created from your file structure' },
+        ].map((f, i) => (
+          <div key={f.title} className="p-6 rounded-xl border border-slate-800 bg-slate-800/30 hover:border-ember-500/50 transition-all duration-300 hover:-translate-y-1 group animate-fade-in-up" style={{ animationDelay: \`\[PHONE REDACTED]ms\` }}>
+            <div className="text-3xl mb-4 group-hover:scale-110 transition-transform">{f.icon}</div>
+            <h3 className="text-lg font-semibold mb-2">{f.title}</h3>
+            <p className="text-slate-400">{f.desc}</p>
+          </div>
+        ))}
+      </section>
+      {/* Counter Demo */}
+      <section className="relative p-8 rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 border border-slate-700/50 text-center backdrop-blur-sm">
+        <h2 className="text-2xl font-bold mb-6">Interactive Counter Demo</h2>
+        <div className="flex items-center justify-center gap-6">
+          <button
+            className="w-12 h-12 rounded-lg bg-slate-800 border border-slate-700 hover:bg-ember-500 hover:border-ember-500 text-ember-500 hover:text-white text-xl transition-all hover:scale-110"
+            onClick={() => count.value--}
+          >
+            &#8722;
+          </button>
+          <span className="text-5xl font-bold tabular-nums min-w-[80px] bg-clip-text text-transparent bg-gradient-to-b from-white to-slate-400">{count}</span>
+          <button
+            className="w-12 h-12 rounded-lg bg-slate-800 border border-slate-700 hover:bg-ember-500 hover:border-ember-500 text-ember-500 hover:text-white text-xl transition-all hover:scale-110"
+            onClick={() => count.value++}
+          >
+            +
+          </button>
+        </div>
+        <p className="text-slate-500 mt-4 text-sm">Try clicking the buttons!</p>
+      </section>
+      <section className="text-center py-8">
+        <div className="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-ember-500/10 border border-ember-500/20 text-ember-400">
+          <span className="w-2 h-2 rounded-full bg-ember-500 animate-pulse"></span>
+          <span className="text-sm font-medium">Ready to build something amazing?</span>
+        </div>
+      </section>
+    </div>
+  );
+};
+export default HomePage;`,
+    "src/routes/about.tsx": `import type { RouteComponent } from '@emberkit/core';
+import { Head } from '@emberkit/core';
+const AboutPage: RouteComponent = () => {
+  return (
+    <div className="max-w-3xl mx-auto px-6 py-16 space-y-12 animate-fade-in-up">
+      <Head>
+        <title>About - {{name}}</title>
+      </Head>
+      <div className="text-center">
+        <h1 className="text-4xl font-bold mb-6">About {{name}}</h1>
+        <p className="text-slate-400 text-lg leading-relaxed max-w-2xl mx-auto">
+          EmberKit is a minimalist TypeScript-first JSX framework built for speed and simplicity.
+          It combines the best of modern frontend development with a lightweight runtime.
+        </p>
+      </div>
+      <div className="grid sm:grid-cols-3 gap-4">
+        {[
+          { label: 'SPA & SSR', desc: 'Works in both modes' },
+          { label: 'Zero Config', desc: 'Sensible defaults' },
+          { label: 'HMR', desc: 'Hot module replacement' },
+        ].map((f) => (
+          <div key={f.label} className="p-4 rounded-xl bg-slate-800/30 border border-slate-800 hover:border-ember-500/50 transition-all hover:-translate-y-1 group">
+            <span className="text-ember-500 text-sm font-semibold">{f.label}</span>
+            <p className="text-slate-500 text-sm mt-1">{f.desc}</p>
+          </div>
+        ))}
+      </div>
+      <div className="text-center">
+        <a href="/" className="inline-flex items-center gap-2 text-ember-500 hover:text-ember-400 font-medium transition-colors">
+          &#8592; Back to Home
+        </a>
+      </div>
+    </div>
+  );
+};
+export default AboutPage;`,
+};