create-frootkit 1.1.4 → 1.2.1

package/templates/ecommerce/src/app/products/[id]/page.tsx

@@ -0,0 +1,88 @@
+import { PRODUCTS } from '../../../data/products.js';
+import { Navbar } from '../../../components/Navbar.js';
+import { Footer } from '../../../components/Footer.js';
+
+export async function generateStaticParams() {
+  return PRODUCTS.map((p) => ({ id: p.id }));
+}
+
+export default function ProductDetailPage({ params }: { params?: { id?: string } }) {
+  const id = params?.id || 'nordic-mechanical-keyboard';
+  const product = PRODUCTS.find((p) => p.id === id) || PRODUCTS[0]!;
+
+  return (
+    <div class="min-h-screen flex flex-col justify-between">
+      <Navbar />
+
+      <main class="max-w-6xl mx-auto px-6 py-12 flex-1 w-full">
+        <a
+          href="/"
+          class="inline-flex items-center gap-2 text-sm text-slate-400 hover:text-emerald-400 mb-8 transition-colors"
+        >
+          &larr; Back to catalog
+        </a>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
+          <div class="rounded-3xl border border-slate-800 overflow-hidden bg-slate-950 aspect-[4/3]">
+            <img
+              src={product.image}
+              alt={product.name}
+              class="w-full h-full object-cover"
+            />
+          </div>
+
+          <div>
+            <div class="flex items-center gap-2 mb-3">
+              <span class="px-2.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-xs font-mono font-medium">
+                {product.category}
+              </span>
+              <span class="text-amber-400 text-xs font-bold">
+                &#9733; {product.rating} ({product.reviewsCount} reviews)
+              </span>
+            </div>
+
+            <h1 class="text-3xl sm:text-4xl font-black text-white tracking-tight mb-4">
+              {product.name}
+            </h1>
+
+            <div class="text-3xl font-black text-emerald-400 mb-6 font-mono">
+              ${product.price.toFixed(2)}
+            </div>
+
+            <p class="text-slate-300 text-base leading-relaxed mb-8">
+              {product.description}
+            </p>
+
+            <div class="border-t border-slate-800 pt-6 mb-8">
+              <h3 class="text-xs uppercase font-mono font-bold text-slate-400 tracking-wider mb-4">
+                Key Specifications
+              </h3>
+              <ul class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm text-slate-300">
+                {product.features.map((f) => (
+                  <li key={f} class="flex items-center gap-2">
+                    <span class="text-emerald-400 font-bold">&#10003;</span>
+                    <span>{f}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div class="flex items-center gap-4">
+              <a
+                href="/cart"
+                class="flex-1 py-3.5 rounded-xl bg-emerald-500 text-slate-950 font-bold text-center text-sm hover:bg-emerald-400 transition-colors shadow-lg shadow-emerald-500/20"
+              >
+                Add to Cart &bull; ${product.price.toFixed(2)}
+              </a>
+              <span class="text-xs text-slate-500 font-mono">
+                {product.inStock ? 'In Stock (Ready to Ship)' : 'Backorder'}
+              </span>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

package/templates/ecommerce/src/components/CartDrawer.tsx

@@ -0,0 +1,64 @@
+import { PRODUCTS } from '../data/products.js';
+
+export function CartDrawer() {
+  const cartItems = [
+    { product: PRODUCTS[0]!, quantity: 1 },
+    { product: PRODUCTS[2]!, quantity: 1 },
+  ];
+
+  const subtotal = cartItems.reduce((acc, item) => acc + item.product.price * item.quantity, 0);
+  const shipping = subtotal > 100 ? 0 : 15;
+  const total = subtotal + shipping;
+
+  return (
+    <div class="rounded-2xl border border-slate-800 bg-slate-900/60 p-6 backdrop-blur-md">
+      <h2 class="text-lg font-bold text-white mb-4 flex items-center justify-between">
+        <span>Order Summary</span>
+        <span class="text-xs font-mono text-emerald-400 font-semibold">{cartItems.length} items</span>
+      </h2>
+
+      <div class="space-y-4 mb-6">
+        {cartItems.map(({ product, quantity }) => (
+          <div key={product.id} class="flex items-center gap-3 pb-3 border-b border-slate-800/60">
+            <img
+              src={product.image}
+              alt={product.name}
+              class="w-12 h-12 rounded-lg object-cover bg-slate-950"
+            />
+            <div class="flex-1 min-w-0">
+              <h4 class="text-xs font-semibold text-white truncate">{product.name}</h4>
+              <div class="text-[11px] text-slate-400">Qty: {quantity} &times; ${product.price}</div>
+            </div>
+            <div class="font-bold text-sm text-white font-mono">
+              ${(product.price * quantity).toFixed(2)}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div class="space-y-2 text-xs text-slate-400 mb-6 font-mono">
+        <div class="flex justify-between">
+          <span>Subtotal</span>
+          <span class="text-white font-bold">${subtotal.toFixed(2)}</span>
+        </div>
+        <div class="flex justify-between">
+          <span>Estimated Shipping</span>
+          <span class="text-emerald-400 font-semibold">{shipping === 0 ? 'FREE' : `$${shipping.toFixed(2)}`}</span>
+        </div>
+        <div class="pt-3 border-t border-slate-800 flex justify-between text-sm text-white font-bold">
+          <span>Total</span>
+          <span class="text-emerald-400 text-base font-black">${total.toFixed(2)}</span>
+        </div>
+      </div>
+
+      <form action="/api/checkout" method="POST">
+        <button
+          type="submit"
+          class="w-full py-3 rounded-xl bg-emerald-500 text-slate-950 font-bold text-sm hover:bg-emerald-400 transition-colors shadow-lg shadow-emerald-500/20"
+        >
+          Proceed to Checkout &rarr;
+        </button>
+      </form>
+    </div>
+  );
+}

package/templates/ecommerce/src/components/Footer.tsx

@@ -0,0 +1,16 @@
+export function Footer() {
+  return (
+    <footer class="border-t border-slate-900 bg-slate-950/60 py-8 text-center text-xs text-slate-500">
+      <div class="max-w-6xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
+        <div>
+          FrootStore &copy; {new Date().getFullYear()} OrbitNorth LLC. MIT Licensed.
+        </div>
+        <div class="flex items-center gap-6">
+          <a href="https://github.com/orbitnorth/frootkit" class="hover:text-slate-400 transition-colors">GitHub</a>
+          <a href="https://frootjs.org" class="hover:text-slate-400 transition-colors">Documentation</a>
+          <a href="/api/products" class="hover:text-slate-400 transition-colors">Products API</a>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/ecommerce/src/components/Navbar.tsx

@@ -0,0 +1,32 @@
+export function Navbar() {
+  return (
+    <header class="border-b border-slate-800/80 bg-slate-950/70 backdrop-blur-md sticky top-0 z-50">
+      <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
+        <a href="/" class="flex items-center gap-3 font-extrabold text-white text-lg tracking-tight hover:opacity-90">
+          <span class="w-8 h-8 rounded-xl bg-gradient-to-tr from-emerald-500 to-teal-400 flex items-center justify-center text-slate-950 font-black text-sm">
+            🛒
+          </span>
+          <span>Froot<span class="text-emerald-400">Store</span></span>
+        </a>
+
+        <nav class="flex items-center gap-6 text-sm font-medium">
+          <a href="/" class="text-slate-300 hover:text-white transition-colors">
+            Catalog
+          </a>
+          <a href="/api/products" class="text-slate-400 hover:text-emerald-400 font-mono text-xs px-2 py-1 rounded bg-slate-900 border border-slate-800 transition-colors">
+            /api/products
+          </a>
+          <a
+            href="/cart"
+            class="flex items-center gap-2 px-3.5 py-1.5 rounded-xl bg-slate-900 border border-slate-800 text-slate-200 hover:border-emerald-500/50 hover:text-emerald-400 transition-all font-semibold text-xs"
+          >
+            <span>Cart</span>
+            <span class="w-5 h-5 rounded-full bg-emerald-500 text-slate-950 flex items-center justify-center font-bold text-[10px]">
+              2
+            </span>
+          </a>
+        </nav>
+      </div>
+    </header>
+  );
+}

package/templates/ecommerce/src/components/ProductCard.tsx

@@ -0,0 +1,52 @@
+import type { Product } from '../data/products.js';
+
+export function ProductCard({ product }: { product: Product }) {
+  return (
+    <div class="rounded-2xl border border-slate-800/80 bg-slate-900/30 overflow-hidden backdrop-blur-sm hover:border-emerald-500/40 transition-all hover:-translate-y-1 group flex flex-col justify-between">
+      <a href={`/products/${product.id}`} class="block relative aspect-[4/3] overflow-hidden bg-slate-950">
+        <img
+          src={product.image}
+          alt={product.name}
+          class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+          loading="lazy"
+        />
+        <span class="absolute top-3 right-3 px-2 py-0.5 rounded-full bg-slate-950/80 backdrop-blur-md text-[11px] font-mono text-slate-300 border border-slate-700/60">
+          {product.category}
+        </span>
+      </a>
+
+      <div class="p-5 flex-1 flex flex-col justify-between">
+        <div>
+          <div class="flex items-center gap-1.5 mb-2 text-xs">
+            <span class="text-amber-400 font-bold">&#9733; {product.rating}</span>
+            <span class="text-slate-500">({product.reviewsCount})</span>
+          </div>
+
+          <h3 class="font-bold text-white text-base mb-2 group-hover:text-emerald-400 transition-colors line-clamp-1">
+            <a href={`/products/${product.id}`}>
+              {product.name}
+            </a>
+          </h3>
+
+          <p class="text-slate-400 text-xs leading-relaxed mb-4 line-clamp-2">
+            {product.description}
+          </p>
+        </div>
+
+        <div class="pt-4 border-t border-slate-800/60 flex items-center justify-between">
+          <div>
+            <span class="text-xs text-slate-500 block">Price</span>
+            <span class="text-lg font-black text-white">${product.price.toFixed(2)}</span>
+          </div>
+
+          <a
+            href={`/products/${product.id}`}
+            class="px-3.5 py-2 rounded-xl bg-emerald-500 text-slate-950 font-bold text-xs hover:bg-emerald-400 transition-colors shadow-md shadow-emerald-500/10"
+          >
+            View Details
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/ecommerce/src/data/products.ts

@@ -0,0 +1,87 @@
+export interface Product {
+  id: string;
+  name: string;
+  price: number;
+  category: string;
+  rating: number;
+  reviewsCount: number;
+  image: string;
+  description: string;
+  features: string[];
+  inStock: boolean;
+}
+
+export const PRODUCTS: Product[] = [
+  {
+    id: 'nordic-mechanical-keyboard',
+    name: 'Nordic Minimal Mechanical Keyboard',
+    price: 149.0,
+    category: 'Keyboards',
+    rating: 4.9,
+    reviewsCount: 128,
+    image: 'https://images.unsplash.com/photo-1587829741301-dc798b83add3?w=600&h=450&fit=crop',
+    description: 'Aircraft-grade anodized aluminum body with custom hot-swappable linear switches and sound-dampening silicone base.',
+    features: ['Hot-swappable switches', 'Bluetooth 5.3 & 2.4GHz', 'CNC Aluminum Chassis', 'PBT Dye-Sub Keycaps'],
+    inStock: true,
+  },
+  {
+    id: 'studio-monitor-headphones',
+    name: 'Studio Master Pro Headphones',
+    price: 289.0,
+    category: 'Audio',
+    rating: 4.8,
+    reviewsCount: 94,
+    image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=600&h=450&fit=crop',
+    description: 'Precision 50mm dynamic drivers engineered for ultra-flat frequency response, critical mixing, and executive focus.',
+    features: ['Planar Magnetic Sound', 'Memory Foam Cushions', 'Detachable Silver Cable', 'Hard Travel Case'],
+    inStock: true,
+  },
+  {
+    id: 'ergo-master-mouse',
+    name: 'ErgoMaster Wireless Precision Mouse',
+    price: 89.0,
+    category: 'Peripherals',
+    rating: 4.7,
+    reviewsCount: 210,
+    image: 'https://images.unsplash.com/photo-1527864550417-7fd91fc51a46?w=600&h=450&fit=crop',
+    description: 'Sculpted ergonomic contour designed to eliminate wrist fatigue during extended development sessions.',
+    features: ['26,000 DPI Optical Sensor', '70-day Battery Life', 'Infinite Scroll Wheel', 'Quiet Click Switches'],
+    inStock: true,
+  },
+  {
+    id: 'walnut-monitor-riser',
+    name: 'Solid Walnut Monitor Riser Stand',
+    price: 119.0,
+    category: 'Desk Setup',
+    rating: 5.0,
+    reviewsCount: 62,
+    image: 'https://images.unsplash.com/photo-1526738549149-8e07eca6c147?w=600&h=450&fit=crop',
+    description: 'Handcrafted from single-origin American walnut with cork feet and an integrated aluminum tray for accessories.',
+    features: ['Sustainable American Walnut', 'Holds up to 60 lbs', 'Integrated Cable Troughs', 'Hand-finished Matte Oil'],
+    inStock: true,
+  },
+  {
+    id: 'titanium-desk-pad',
+    name: 'Matte Slate Vegan Leather Desk Mat',
+    price: 49.0,
+    category: 'Desk Setup',
+    rating: 4.6,
+    reviewsCount: 175,
+    image: 'https://images.unsplash.com/photo-1544816155-12df9643f363?w=600&h=450&fit=crop',
+    description: 'Water-resistant, stain-proof premium desk surface that provides effortless mouse tracking and protects your workspace.',
+    features: ['Water-resistant PU Leather', 'Anti-slip Suede Backing', '90cm x 45cm Large Size', 'Easy to Clean'],
+    inStock: true,
+  },
+  {
+    id: 'usb-c-magnetic-cable',
+    name: '240W Braided Kevlar Charging Cable',
+    price: 29.0,
+    category: 'Accessories',
+    rating: 4.9,
+    reviewsCount: 340,
+    image: 'https://images.unsplash.com/photo-1583863788434-e58a36330cf0?w=600&h=450&fit=crop',
+    description: 'Ultra-durable Kevlar-reinforced charging cable supporting up to 240W Power Delivery and 40Gbps Thunderbolt data transfer.',
+    features: ['240W Power Delivery', 'E-Marker Smart Chip', 'Braided Kevlar Weave', '2-meter Length'],
+    inStock: true,
+  },
+];

package/templates/ecommerce/src/styles.css

@@ -0,0 +1,19 @@
+@import "tailwindcss";
+
+@theme {
+  --color-brand-50: #ecfdf5;
+  --color-brand-100: #d1fae5;
+  --color-brand-200: #a7f3d0;
+  --color-brand-300: #6ee7b7;
+  --color-brand-400: #34d399;
+  --color-brand-500: #10b981;
+  --color-brand-600: #059669;
+  --color-brand-700: #047857;
+  --color-brand-800: #065f46;
+  --color-brand-900: #064e3b;
+  --color-brand-950: #022c22;
+}
+
+:root {
+  color-scheme: dark;
+}

package/templates/ecommerce/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2024",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*"]
+}

package/templates/empty/README.md

@@ -0,0 +1,10 @@
+# {{PROJECT_NAME}}
+
+A minimal blank canvas created with **FrootKit**.
+
+## 🚀 Quick Start
+
+```bash
+pnpm install
+pnpm dev
+```

package/templates/empty/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "frootkit dev",
+    "build": "frootkit build",
+    "start": "frootkit start"
+  },
+  "dependencies": {
+    "frootkit": "npm:froot-kit@^1.3.1",
+    "froot-kit": "^1.3.1",
+    "frootjs": "^1.0.6",
+    "preact": "^11.1.0",
+    "preact-render-to-string": "^6.8.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "@types/node": "^22.10.0",
+    "tsx": "^4.19.2",
+    "typescript": "^5.8.0"
+  }
+}

package/templates/empty/src/app/layout.tsx

@@ -0,0 +1,29 @@
+import type { ComponentChildren } from 'preact';
+
+export interface RootLayoutProps {
+  children: ComponentChildren;
+  metadata?: {
+    title?: string;
+    description?: string;
+  };
+}
+
+export default function RootLayout({ children, metadata }: RootLayoutProps) {
+  const title = metadata?.title || 'FrootKit App';
+  const description = metadata?.description || 'Built with FrootKit & Preact';
+
+  return (
+    <html lang="en" class="dark">
+      <head>
+        <meta charSet="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        <link rel="stylesheet" href="/styles.css" />
+      </head>
+      <body class="bg-slate-950 text-slate-100 min-h-screen antialiased">
+        {children}
+      </body>
+    </html>
+  );
+}

package/templates/empty/src/app/page.tsx

@@ -0,0 +1,38 @@
+export const metadata = {
+  title: 'Blank Canvas — FrootKit',
+  description: 'Minimal blank project with Preact and Tailwind CSS v4.',
+};
+
+export default function HomePage() {
+  return (
+    <main class="min-h-screen flex items-center justify-center p-6">
+      <div class="max-w-md w-full text-center border border-slate-800 bg-slate-900/40 rounded-2xl p-8 backdrop-blur-sm">
+        <div class="w-12 h-12 rounded-xl bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center mx-auto mb-4 text-emerald-400 font-bold text-xl">
+          F
+        </div>
+        <h1 class="text-2xl font-bold text-white mb-2">Blank Slate</h1>
+        <p class="text-slate-400 text-sm mb-6">
+          Edit <code class="font-mono text-emerald-400 bg-slate-800/80 px-1.5 py-0.5 rounded">src/app/page.tsx</code> to get started.
+        </p>
+        <div class="flex justify-center gap-3 text-xs font-medium">
+          <a
+            href="https://frootjs.org"
+            target="_blank"
+            rel="noreferrer"
+            class="px-4 py-2 rounded-lg bg-emerald-500 text-slate-950 font-bold hover:bg-emerald-400 transition-colors"
+          >
+            Docs
+          </a>
+          <a
+            href="https://github.com/orbitnorth/frootkit"
+            target="_blank"
+            rel="noreferrer"
+            class="px-4 py-2 rounded-lg bg-slate-800 text-slate-200 hover:bg-slate-700 transition-colors"
+          >
+            GitHub
+          </a>
+        </div>
+      </div>
+    </main>
+  );
+}

package/templates/empty/src/styles.css

@@ -0,0 +1,19 @@
+@import "tailwindcss";
+
+@theme {
+  --color-brand-50: #ecfdf5;
+  --color-brand-100: #d1fae5;
+  --color-brand-200: #a7f3d0;
+  --color-brand-300: #6ee7b7;
+  --color-brand-400: #34d399;
+  --color-brand-500: #10b981;
+  --color-brand-600: #059669;
+  --color-brand-700: #047857;
+  --color-brand-800: #065f46;
+  --color-brand-900: #064e3b;
+  --color-brand-950: #022c22;
+}
+
+:root {
+  color-scheme: dark;
+}

package/templates/empty/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2024",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*"]
+}

package/templates/starter/README.md

@@ -0,0 +1,22 @@
+# {{PROJECT_NAME}}
+
+Scaffolded with **FrootKit** (Next.js Alternative for Preact).
+
+## 🚀 Quick Start
+
+```bash
+# 1. Install dependencies
+pnpm install
+
+# 2. Start development server
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+## 📦 Features
+
+- **Sub-millisecond Preact SSR**
+- **Native Tailwind CSS v4**
+- **File-based Routing & API Routes**
+- **Zero-config Static Site Export (`pnpm build`)**

package/templates/starter/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "frootkit dev",
+    "build": "frootkit build",
+    "start": "frootkit start"
+  },
+  "dependencies": {
+    "frootkit": "npm:froot-kit@^1.3.1",
+    "froot-kit": "^1.3.1",
+    "frootjs": "^1.0.6",
+    "preact": "^11.1.0",
+    "preact-render-to-string": "^6.8.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "@types/node": "^22.10.0",
+    "tsx": "^4.19.2",
+    "typescript": "^5.8.0"
+  }
+}

package/templates/starter/src/app/api/health/route.ts

@@ -0,0 +1,23 @@
+export async function GET(req: Request): Promise<Response> {
+  const url = new URL(req.url);
+
+  return Response.json(
+    {
+      status: 'healthy',
+      framework: 'FrootKit',
+      version: '1.3.1',
+      engine: 'Preact SSR + Monomorphic V8 Router',
+      timestamp: new Date().toISOString(),
+      uptimeSeconds: Math.floor(process.uptime()),
+      nodeVersion: process.version,
+      query: Object.fromEntries(url.searchParams.entries()),
+    },
+    {
+      status: 200,
+      headers: {
+        'content-type': 'application/json',
+        'cache-control': 'no-cache',
+      },
+    }
+  );
+}

package/templates/starter/src/app/layout.tsx

@@ -0,0 +1,31 @@
+import type { ComponentChildren } from 'preact';
+
+export interface RootLayoutProps {
+  children: ComponentChildren;
+  metadata?: {
+    title?: string;
+    description?: string;
+  };
+}
+
+export default function RootLayout({ children, metadata }: RootLayoutProps) {
+  const title = metadata?.title || 'FrootKit — The Next.js Alternative for Preact';
+  const description =
+    metadata?.description ||
+    'High-performance fullstack web application powered by Preact SSR, nested layouts, Tailwind CSS v4, and dynamic API routes.';
+
+  return (
+    <html lang="en" class="dark scroll-smooth">
+      <head>
+        <meta charSet="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        <link rel="stylesheet" href="/styles.css" />
+      </head>
+      <body class="bg-[#030712] text-slate-100 min-h-screen antialiased selection:bg-emerald-500/20 selection:text-emerald-300">
+        {children}
+      </body>
+    </html>
+  );
+}