create-frootkit 1.1.4 → 1.2.1

package/templates/auth/src/app/dashboard/layout.tsx

@@ -0,0 +1,34 @@
+import type { ComponentChildren } from 'preact';
+import { DashboardNav } from '../../components/DashboardNav.js';
+
+export default function DashboardLayout({ children }: { children: ComponentChildren }) {
+  return (
+    <div class="min-h-screen flex bg-[#030712] text-slate-100">
+      <DashboardNav />
+      <div class="flex-1 flex flex-col min-w-0">
+        <header class="h-16 border-b border-slate-800/80 px-8 flex items-center justify-between bg-slate-950/40 backdrop-blur-md">
+          <div class="flex items-center gap-3">
+            <h1 class="text-sm font-bold text-white">Production Cluster</h1>
+            <span class="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 text-[10px] font-mono border border-emerald-500/20">
+              US-East (N. Virginia)
+            </span>
+          </div>
+
+          <div class="flex items-center gap-4 text-xs">
+            <span class="text-slate-400">Logged in as <strong class="text-white">admin@frootkit.dev</strong></span>
+            <a
+              href="/api/auth"
+              class="px-2.5 py-1 rounded-lg bg-slate-900 border border-slate-800 text-slate-300 font-mono hover:text-emerald-400"
+            >
+              Session API
+            </a>
+          </div>
+        </header>
+
+        <div class="p-8 flex-1 overflow-y-auto">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/auth/src/app/dashboard/page.tsx

@@ -0,0 +1,72 @@
+import { MetricCard } from '../../components/MetricCard.js';
+
+export const metadata = {
+  title: 'Workspace Overview — FrootSaaS',
+};
+
+export default function DashboardOverviewPage() {
+  const metrics = [
+    { label: 'Monthly Recurring Revenue', value: '$42,850', change: '+14.2%', isPositive: true },
+    { label: 'Active Subscribers', value: '1,280', change: '+8.1%', isPositive: true },
+    { label: 'API Requests (24h)', value: '3.42M', change: '+22.4%', isPositive: true },
+    { label: 'Average Latency', value: '0.42ms', change: '-12.0%', isPositive: true },
+  ];
+
+  const recentUsers = [
+    { name: 'Sarah Connor', email: 'sarah@frootkit.dev', role: 'Owner', date: 'Just now' },
+    { name: 'John Doe', email: 'john@acme.corp', role: 'Developer', date: '2 hours ago' },
+    { name: 'Alex Wong', email: 'alex@startup.io', role: 'Designer', date: '1 day ago' },
+    { name: 'Maria Garcia', email: 'maria@scale.dev', role: 'Admin', date: '3 days ago' },
+  ];
+
+  return (
+    <div class="space-y-8">
+      <div>
+        <h2 class="text-2xl font-bold text-white mb-1">Metrics & Operations</h2>
+        <p class="text-xs text-slate-400">Real-time performance and subscriber growth analytics.</p>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+        {metrics.map((m) => (
+          <MetricCard
+            key={m.label}
+            label={m.label}
+            value={m.value}
+            change={m.change}
+            isPositive={m.isPositive}
+          />
+        ))}
+      </div>
+
+      <div class="rounded-2xl border border-slate-800 bg-slate-900/40 p-6 backdrop-blur-sm">
+        <h3 class="text-sm font-bold text-white mb-4">Recent Workspace Activity</h3>
+        <div class="overflow-x-auto">
+          <table class="w-full text-left text-xs">
+            <thead>
+              <tr class="border-b border-slate-800 text-slate-500 font-mono">
+                <th class="pb-3 font-semibold">User</th>
+                <th class="pb-3 font-semibold">Email</th>
+                <th class="pb-3 font-semibold">Role</th>
+                <th class="pb-3 font-semibold">Time</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-800/60">
+              {recentUsers.map((u) => (
+                <tr key={u.email} class="hover:bg-slate-900/60">
+                  <td class="py-3 font-medium text-white">{u.name}</td>
+                  <td class="py-3 text-slate-400 font-mono">{u.email}</td>
+                  <td class="py-3">
+                    <span class="px-2 py-0.5 rounded-full bg-slate-800 text-slate-300 font-mono text-[10px]">
+                      {u.role}
+                    </span>
+                  </td>
+                  <td class="py-3 text-slate-500">{u.date}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/auth/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 || 'FrootSaaS — Modern Cloud Platform';
+  const description =
+    metadata?.description ||
+    'Fullstack SaaS application with authentication and real-time dashboard powered by Preact and FrootKit.';
+
+  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>
+  );
+}

package/templates/auth/src/app/login/page.tsx

@@ -0,0 +1,18 @@
+import { Navbar } from '../../components/Navbar.js';
+import { AuthForm } from '../../components/AuthForm.js';
+
+export const metadata = {
+  title: 'Sign In — FrootSaaS',
+};
+
+export default function LoginPage() {
+  return (
+    <div class="min-h-screen flex flex-col justify-between">
+      <Navbar />
+
+      <main class="max-w-md mx-auto px-6 py-16 flex-1 w-full flex flex-col justify-center">
+        <AuthForm mode="login" />
+      </main>
+    </div>
+  );
+}

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

@@ -0,0 +1,60 @@
+import { Navbar } from '../components/Navbar.js';
+
+export const metadata = {
+  title: 'FrootSaaS — Next Generation Cloud Infrastructure',
+  description: 'Deploy lightning fast web services with enterprise grade observability.',
+};
+
+export default function SaaSMarketingPage() {
+  return (
+    <div class="min-h-screen flex flex-col justify-between">
+      <Navbar />
+
+      <main class="max-w-6xl mx-auto px-6 py-20 flex-1 flex flex-col justify-center">
+        <div class="text-center max-w-3xl mx-auto mb-16">
+          <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/25 text-xs font-semibold text-emerald-400 mb-8 shadow-sm">
+            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
+            Fullstack Authentication & Dashboard
+          </div>
+
+          <h1 class="text-4xl sm:text-6xl font-black text-white tracking-tight mb-6 leading-tight">
+            The Complete Platform for{' '}
+            <span class="bg-gradient-to-r from-emerald-400 via-teal-300 to-cyan-400 bg-clip-text text-transparent">
+              Modern SaaS
+            </span>
+          </h1>
+
+          <p class="text-slate-300 text-lg sm:text-xl leading-relaxed mb-10 max-w-2xl mx-auto">
+            Real Web Crypto password hashing, secure session cookies, protected routes, and an administrative dashboard layout ready out of the box.
+          </p>
+
+          <div class="flex flex-wrap items-center justify-center gap-4">
+            <a
+              href="/signup"
+              class="px-6 py-3 rounded-xl bg-emerald-500 text-slate-950 font-bold hover:bg-emerald-400 transition-all shadow-lg shadow-emerald-500/25 hover:-translate-y-0.5"
+            >
+              Start Free Trial &rarr;
+            </a>
+            <a
+              href="/dashboard"
+              class="px-6 py-3 rounded-xl bg-slate-900 border border-slate-800 text-slate-200 font-semibold hover:bg-slate-800 transition-all hover:-translate-y-0.5"
+            >
+              View Live Dashboard
+            </a>
+          </div>
+        </div>
+      </main>
+
+      <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 justify-between">
+          <div>FrootSaaS &copy; {new Date().getFullYear()} OrbitNorth LLC</div>
+          <div class="flex gap-4">
+            <a href="/login" class="hover:text-slate-400">Sign In</a>
+            <a href="/signup" class="hover:text-slate-400">Sign Up</a>
+            <a href="/dashboard" class="hover:text-slate-400">Dashboard</a>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}

package/templates/auth/src/app/signup/page.tsx

@@ -0,0 +1,18 @@
+import { Navbar } from '../../components/Navbar.js';
+import { AuthForm } from '../../components/AuthForm.js';
+
+export const metadata = {
+  title: 'Create Account — FrootSaaS',
+};
+
+export default function SignupPage() {
+  return (
+    <div class="min-h-screen flex flex-col justify-between">
+      <Navbar />
+
+      <main class="max-w-md mx-auto px-6 py-16 flex-1 w-full flex flex-col justify-center">
+        <AuthForm mode="signup" />
+      </main>
+    </div>
+  );
+}

package/templates/auth/src/components/AuthForm.tsx

@@ -0,0 +1,77 @@
+export interface AuthFormProps {
+  mode: 'login' | 'signup';
+}
+
+export function AuthForm({ mode }: AuthFormProps) {
+  const isLogin = mode === 'login';
+
+  return (
+    <div class="rounded-3xl border border-slate-800 bg-slate-900/60 p-8 backdrop-blur-xl shadow-2xl">
+      <div class="text-center mb-8">
+        <h1 class="text-2xl font-bold text-white mb-2">
+          {isLogin ? 'Sign in to your account' : 'Create your account'}
+        </h1>
+        <p class="text-slate-400 text-xs">
+          {isLogin ? "Don't have an account? " : 'Already have an account? '}
+          <a href={isLogin ? '/signup' : '/login'} class="text-emerald-400 font-semibold hover:underline">
+            {isLogin ? 'Sign up' : 'Sign in'}
+          </a>
+        </p>
+      </div>
+
+      {isLogin && (
+        <div class="mb-6 p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-xs text-emerald-300 flex items-center justify-between">
+          <div>
+            <span class="font-bold">Demo:</span> admin@frootkit.dev &bull; password123
+          </div>
+        </div>
+      )}
+
+      <form action={`/api/auth?action=${mode}`} method="POST" class="space-y-4">
+        {!isLogin && (
+          <div>
+            <label class="block text-xs font-medium text-slate-300 mb-1.5">Full Name</label>
+            <input
+              type="text"
+              name="name"
+              placeholder="Sarah Connor"
+              required
+              class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:outline-none focus:border-emerald-500"
+            />
+          </div>
+        )}
+
+        <div>
+          <label class="block text-xs font-medium text-slate-300 mb-1.5">Email Address</label>
+          <input
+            type="email"
+            name="email"
+            placeholder="admin@frootkit.dev"
+            defaultValue={isLogin ? 'admin@frootkit.dev' : ''}
+            required
+            class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:outline-none focus:border-emerald-500"
+          />
+        </div>
+
+        <div>
+          <label class="block text-xs font-medium text-slate-300 mb-1.5">Password</label>
+          <input
+            type="password"
+            name="password"
+            placeholder="••••••••••••"
+            defaultValue={isLogin ? 'password123' : ''}
+            required
+            class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:outline-none focus:border-emerald-500"
+          />
+        </div>
+
+        <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 mt-2"
+        >
+          {isLogin ? 'Sign In &rarr;' : 'Create Account &rarr;'}
+        </button>
+      </form>
+    </div>
+  );
+}

package/templates/auth/src/components/DashboardNav.tsx

@@ -0,0 +1,51 @@
+export function DashboardNav() {
+  const links = [
+    { label: 'Overview', href: '/dashboard', icon: '📊' },
+    { label: 'Analytics', href: '/dashboard#analytics', icon: '📈' },
+    { label: 'Team', href: '/dashboard#team', icon: '👥' },
+    { label: 'API Keys', href: '/api/auth', icon: '🔑' },
+  ];
+
+  return (
+    <aside class="w-64 border-r border-slate-800/80 bg-slate-950/80 p-6 flex flex-col justify-between shrink-0">
+      <div>
+        <div class="flex items-center gap-2.5 font-bold text-white text-lg mb-8">
+          <span class="w-7 h-7 rounded-lg bg-emerald-500 flex items-center justify-center text-slate-950 font-black text-xs">
+            F
+          </span>
+          <span>Workspace</span>
+        </div>
+
+        <nav class="space-y-1 text-sm font-medium">
+          {links.map((link) => (
+            <a
+              key={link.label}
+              href={link.href}
+              class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-slate-300 hover:text-white hover:bg-slate-900/80 transition-colors"
+            >
+              <span>{link.icon}</span>
+              <span>{link.label}</span>
+            </a>
+          ))}
+        </nav>
+      </div>
+
+      <div class="pt-6 border-t border-slate-800/80 flex items-center justify-between">
+        <div class="flex items-center gap-2.5">
+          <div class="w-8 h-8 rounded-full bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center font-bold text-xs text-emerald-400">
+            SC
+          </div>
+          <div class="text-xs">
+            <div class="font-bold text-white">Sarah Connor</div>
+            <div class="text-slate-500">Pro Plan</div>
+          </div>
+        </div>
+        <form action="/api/auth?action=logout" method="POST">
+          <button type="submit" class="text-slate-500 hover:text-rose-400 text-xs transition-colors" title="Sign out">
+            &rarr;
+          </button>
+        </form>
+      </div>
+    </aside>
+  );
+}

package/templates/auth/src/components/MetricCard.tsx

@@ -0,0 +1,26 @@
+export interface MetricCardProps {
+  label: string;
+  value: string;
+  change: string;
+  isPositive: boolean;
+}
+
+export function MetricCard({ label, value, change, isPositive }: MetricCardProps) {
+  return (
+    <div class="rounded-2xl border border-slate-800 bg-slate-900/40 p-6 backdrop-blur-sm">
+      <div class="text-xs font-medium text-slate-400 mb-2">{label}</div>
+      <div class="flex items-baseline justify-between">
+        <div class="text-2xl sm:text-3xl font-black text-white">{value}</div>
+        <span
+          class={`text-xs font-mono font-bold px-2 py-0.5 rounded-full ${
+            isPositive
+              ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
+              : 'bg-rose-500/10 text-rose-400 border border-rose-500/20'
+          }`}
+        >
+          {change}
+        </span>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,29 @@
+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-2.5 font-bold 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-cyan-400 flex items-center justify-center text-slate-950 font-black text-sm">
+            F
+          </span>
+          <span>Froot<span class="text-emerald-400">SaaS</span></span>
+        </a>
+
+        <nav class="flex items-center gap-6 text-sm font-medium">
+          <a href="/dashboard" class="text-slate-300 hover:text-white transition-colors">
+            Dashboard
+          </a>
+          <a href="/login" class="text-slate-300 hover:text-white transition-colors">
+            Sign In
+          </a>
+          <a
+            href="/signup"
+            class="px-4 py-2 rounded-xl bg-emerald-500 text-slate-950 font-bold hover:bg-emerald-400 transition-all shadow-md shadow-emerald-500/20"
+          >
+            Get Started
+          </a>
+        </nav>
+      </div>
+    </header>
+  );
+}

package/templates/auth/src/lib/auth.ts

@@ -0,0 +1,145 @@
+import { webcrypto } from 'node:crypto';
+
+const crypto = globalThis.crypto || webcrypto;
+
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+  role: 'user' | 'admin';
+  createdAt: string;
+}
+
+export interface Session {
+  id: string;
+  token: string;
+  userId: string;
+  expiresAt: string;
+}
+
+// In-memory fallback stores (used when no database is attached)
+const USERS_STORE = new Map<string, { user: User; passwordHash: string }>();
+const SESSIONS_STORE = new Map<string, Session>();
+
+/**
+ * Derives a PBKDF2 HMAC-SHA256 password hash using the standard Web Crypto API.
+ * Format: pbkdf2:sha256:100000:<saltHex>:<hashHex>
+ */
+export async function hashPassword(password: string): Promise<string> {
+  const salt = crypto.getRandomValues(new Uint8Array(16));
+  const enc = new TextEncoder();
+  const keyMaterial = await crypto.subtle.importKey(
+    'raw',
+    enc.encode(password),
+    { name: 'PBKDF2' },
+    false,
+    ['deriveBits']
+  );
+
+  const iterations = 100000;
+  const derivedBits = await crypto.subtle.deriveBits(
+    {
+      name: 'PBKDF2',
+      salt,
+      iterations,
+      hash: 'SHA-256',
+    },
+    keyMaterial,
+    256
+  );
+
+  const saltHex = Buffer.from(salt).toString('hex');
+  const hashHex = Buffer.from(derivedBits).toString('hex');
+
+  return `pbkdf2:sha256:${iterations}:${saltHex}:${hashHex}`;
+}
+
+/**
+ * Verifies a plain text password against a stored PBKDF2 hash.
+ */
+export async function verifyPassword(password: string, storedHash: string): Promise<boolean> {
+  const parts = storedHash.split(':');
+  if (parts.length !== 5 || parts[0] !== 'pbkdf2' || parts[1] !== 'sha256') {
+    return false;
+  }
+
+  const iterations = parseInt(parts[2]!, 10);
+  const salt = Buffer.from(parts[3]!, 'hex');
+  const expectedHashHex = parts[4]!;
+
+  const enc = new TextEncoder();
+  const keyMaterial = await crypto.subtle.importKey(
+    'raw',
+    enc.encode(password),
+    { name: 'PBKDF2' },
+    false,
+    ['deriveBits']
+  );
+
+  const derivedBits = await crypto.subtle.deriveBits(
+    {
+      name: 'PBKDF2',
+      salt,
+      iterations,
+      hash: 'SHA-256',
+    },
+    keyMaterial,
+    256
+  );
+
+  const derivedHashHex = Buffer.from(derivedBits).toString('hex');
+  return derivedHashHex === expectedHashHex;
+}
+
+/**
+ * Creates a new cryptographically secure session token.
+ */
+export function createSessionToken(): string {
+  const bytes = crypto.getRandomValues(new Uint8Array(32));
+  return Buffer.from(bytes).toString('hex');
+}
+
+/**
+ * Parses cookies from an incoming request header string.
+ */
+export function parseCookies(header?: string | null): Record<string, string> {
+  if (!header) return {};
+  const cookies: Record<string, string> = {};
+  const pairs = header.split(';');
+  for (const pair of pairs) {
+    const [key, val] = pair.trim().split('=');
+    if (key && val) {
+      cookies[key.trim()] = decodeURIComponent(val.trim());
+    }
+  }
+  return cookies;
+}
+
+/**
+ * Creates a Set-Cookie header for a session.
+ */
+export function createSessionCookie(token: string, maxAgeSeconds: number = 86400 * 7): string {
+  return `froot_session=${encodeURIComponent(token)}; Path=/; HttpOnly; SameSite=Lax; Max-Age=${maxAgeSeconds}`;
+}
+
+/**
+ * Clears the session cookie.
+ */
+export function clearSessionCookie(): string {
+  return 'froot_session=; Path=/; HttpOnly; SameSite=Lax; Max-Age=0';
+}
+
+// Pre-populate demo user: admin@frootkit.dev / password123
+(async () => {
+  const demoHash = await hashPassword('password123');
+  const demoUser: User = {
+    id: 'usr_demo_admin',
+    email: 'admin@frootkit.dev',
+    name: 'Sarah Connor',
+    role: 'admin',
+    createdAt: new Date().toISOString(),
+  };
+  USERS_STORE.set(demoUser.email, { user: demoUser, passwordHash: demoHash });
+})();
+
+export { USERS_STORE, SESSIONS_STORE };

package/templates/auth/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/auth/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/blog/README.md

@@ -0,0 +1,11 @@
+# {{PROJECT_NAME}} — Blog & Content
+
+A fast content publishing platform built with **FrootKit**.
+
+## 🚀 Features
+
+- Dynamic articles with `src/app/blog/[slug]/page.tsx`
+- Pre-rendered static pages using `generateStaticParams()`
+- Search and filtering via `src/app/api/posts/route.ts`
+- Clean component separation (`Navbar`, `PostCard`, `Newsletter`, `Footer`)
+- Ready for Drizzle / Prisma database integration!

package/templates/blog/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"
+  }
+}