create-frootkit 1.2.12 → 1.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-frootkit",
-  "version": "1.2.12",
+  "version": "1.2.14",
   "description": "Interactive CLI for scaffolding high-performance FrootKit (Next.js Alternative) applications",
   "type": "module",
   "bin": {

package/templates/auth/package.json

@@ -8,7 +8,8 @@
     "start": "frootkit start"
   },
   "dependencies": {
-    "frootkit": "npm:froot-kit@^1.3.4",
+    "frootkit": "npm:froot-kit@^1.3.6",
+    "frootui": "^1.0.4",
     "frootjs": "^1.0.6",
     "preact": "^11.1.0",
     "preact-render-to-string": "^6.8.2"

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

@@ -3,16 +3,16 @@ import { DashboardNav } from '../../components/DashboardNav.js';
 
 export default function DashboardLayout({ children }: { children: ComponentChildren }) {
   return (
-    <div class="min-h-screen flex bg-[#08090a] text-zinc-100 selection:bg-indigo-500/20 selection:text-indigo-300">
+    <div class="min-h-screen flex bg-[#f6f9fc] text-[#425466]">
       <DashboardNav />
       <div class="flex-1 flex flex-col min-w-0">
-        <header class="h-14 border-b border-white/[0.08] px-6 flex items-center justify-between bg-[#08090a]/80 backdrop-blur-md sticky top-0 z-40">
+        <header class="h-14 border-b border-[#e6ebf1] px-6 flex items-center justify-between bg-white/90 backdrop-blur-md sticky top-0 z-40">
           <div class="flex items-center gap-3">
-            <span class="text-xs text-zinc-500">Workspace</span>
-            <span class="text-zinc-600 text-xs">/</span>
-            <h1 class="text-xs font-semibold text-zinc-200">Production Cluster</h1>
-            <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 text-[10px] font-medium border border-emerald-500/20 ml-1">
-              <span class="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+            <span class="text-xs text-[#425466]">Workspace</span>
+            <span class="text-[#e6ebf1] text-xs">/</span>
+            <h1 class="text-xs font-semibold text-[#0a2540]">Production Cluster</h1>
+            <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-[#24b47e]/15 text-[#0e6245] text-[11px] font-medium ml-1">
+              <span class="w-1.5 h-1.5 rounded-full bg-[#24b47e]" />
               99.99% Uptime
             </span>
           </div>
@@ -20,13 +20,10 @@ export default function DashboardLayout({ children }: { children: ComponentChild
           <div class="flex items-center gap-3 text-xs">
             <a
               href="/api/auth"
-              class="px-2.5 py-1 rounded-md bg-white/[0.04] border border-white/[0.08] text-zinc-400 hover:text-zinc-200 transition-colors font-mono text-[11px]"
+              class="px-2.5 py-1 rounded-md bg-[#f6f9fc] border border-[#e6ebf1] text-[#425466] hover:text-[#0a2540] transition-colors font-mono text-[11px]"
             >
               /api/auth
             </a>
-            <div class="hidden sm:flex items-center gap-1 text-[11px] text-zinc-500 border border-white/[0.06] bg-white/[0.02] px-2 py-0.5 rounded">
-              <span>⌘</span><span>K</span>
-            </div>
           </div>
         </header>
 

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

@@ -13,22 +13,22 @@ export default function DashboardOverviewPage() {
   ];
 
   const recentUsers = [
-    { name: 'Sarah Connor', email: 'sarah@frootkit.dev', role: 'Owner', date: 'Just now', status: 'online' },
-    { name: 'Marcus Chen', email: 'marcus@infra.org', role: 'Developer', date: '2 hours ago', status: 'offline' },
-    { name: 'Elena Rostova', email: 'elena@design.io', role: 'Staff Eng', date: '1 day ago', status: 'offline' },
-    { name: 'Alex Rivera', email: 'alex@systems.net', role: 'Admin', date: '3 days ago', status: 'offline' },
+    { name: 'Sarah Connor', email: 'sarah@frootkit.dev', role: 'Owner', date: 'Just now', color: '#635bff' },
+    { name: 'Marcus Chen', email: 'marcus@infra.org', role: 'Developer', date: '2 hours ago', color: '#0a2540' },
+    { name: 'Elena Rostova', email: 'elena@design.io', role: 'Staff Eng', date: '1 day ago', color: '#00d4ff' },
+    { name: 'Alex Rivera', email: 'alex@systems.net', role: 'Admin', date: '3 days ago', color: '#24b47e' },
   ];
 
   return (
     <div class="space-y-8 max-w-6xl">
       <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
         <div>
-          <h2 class="text-xl sm:text-2xl font-semibold text-white tracking-tight">Metrics & Telemetry</h2>
-          <p class="text-xs sm:text-sm text-zinc-400 mt-1">Real-time throughput and workspace subscriber analytics.</p>
+          <h2 class="text-2xl font-light text-[#0a2540] tracking-tight">Metrics & Telemetry</h2>
+          <p class="text-sm text-[#425466] mt-1">Real-time throughput and workspace subscriber analytics.</p>
         </div>
         <div class="flex items-center gap-2">
-          <button class="px-3 py-1.5 rounded-lg bg-white/[0.04] border border-white/[0.08] text-xs font-medium text-zinc-300 hover:text-white hover:bg-white/[0.08] transition-colors flex items-center gap-1.5">
-            <svg style="width: 12px; height: 12px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <button class="btn btn-s text-xs py-1.5 px-3">
+            <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
             </svg>
             <span>Refresh</span>
@@ -48,50 +48,54 @@ export default function DashboardOverviewPage() {
         ))}
       </div>
 
-      <div class="rounded-xl border border-white/[0.08] bg-[#0f1117] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)] overflow-hidden">
-        <div class="p-5 border-b border-white/[0.06] flex items-center justify-between">
+      <div class="rounded-lg border border-[#e6ebf1] bg-white shadow-[0_2px_5px_-1px_rgba(50,50,93,0.25),0_1px_3px_-1px_rgba(0,0,0,0.3)] overflow-hidden">
+        <div class="p-5 border-b border-[#e6ebf1] flex items-center justify-between">
           <div>
-            <h3 class="text-sm font-semibold text-white">Recent Workspace Activity</h3>
-            <p class="text-xs text-zinc-500 mt-0.5">Active team member sessions and authentication audits</p>
+            <h3 class="text-base font-medium text-[#0a2540]">Recent Workspace Activity</h3>
+            <p class="text-xs text-[#425466] mt-0.5">Active team member sessions and authentication audits</p>
           </div>
-          <span class="text-xs text-zinc-400 bg-white/[0.04] px-2.5 py-1 rounded-md border border-white/[0.06]">
+          <span class="bd bg-[#f6f9fc] text-[#425466] border border-[#e6ebf1]">
             {recentUsers.length} active sessions
           </span>
         </div>
 
         <div class="overflow-x-auto">
           <table class="w-full text-left text-xs">
-            <thead>
-              <tr class="border-b border-white/[0.06] text-zinc-400 font-medium bg-white/[0.01]">
+            <thead class="bg-[#f6f9fc] border-b border-[#e6ebf1] text-[#425466]">
+              <tr>
                 <th class="py-3 px-5 font-medium">User</th>
                 <th class="py-3 px-5 font-medium">Email</th>
                 <th class="py-3 px-5 font-medium">Role</th>
-                <th class="py-3 px-5 font-medium text-right">Last Active</th>
+                <th class="py-3 px-5 font-medium text-right">Timestamp</th>
               </tr>
             </thead>
-            <tbody class="divide-y divide-white/[0.04]">
+            <tbody class="divide-y divide-[#e6ebf1]">
               {recentUsers.map((u) => (
-                <tr key={u.email} class="hover:bg-white/[0.02] transition-colors group">
+                <tr key={u.email} class="hover:bg-[#f6f9fc] transition-colors">
                   <td class="py-3.5 px-5">
                     <div class="flex items-center gap-2.5">
-                      <div class="w-6 h-6 rounded-full bg-white/[0.06] border border-white/[0.08] flex items-center justify-center text-[10px] font-medium text-zinc-300">
-                        {u.name.charAt(0)}
+                      <div
+                        class="w-7 h-7 rounded-full text-white flex items-center justify-center text-xs font-medium shrink-0"
+                        style={`background-color: ${u.color}`}
+                      >
+                        {u.name.split(' ').map((n) => n[0]).join('')}
                       </div>
-                      <span class="font-medium text-zinc-200 group-hover:text-white transition-colors">{u.name}</span>
+                      <span class="font-medium text-[#0a2540]">{u.name}</span>
                     </div>
                   </td>
-                  <td class="py-3.5 px-5 text-zinc-400">{u.email}</td>
+                  <td class="py-3.5 px-5 font-mono text-[#425466]">{u.email}</td>
                   <td class="py-3.5 px-5">
-                    <span class={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md text-[11px] font-medium border ${
+                    <span class={`bd ${
                       u.role === 'Owner'
-                        ? 'bg-indigo-500/10 text-indigo-400 border-indigo-500/20'
-                        : 'bg-white/[0.04] text-zinc-300 border-white/[0.08]'
+                        ? 'bg-[#635bff]/10 text-[#635bff]'
+                        : u.role === 'Admin'
+                        ? 'bg-[#24b47e]/15 text-[#0e6245]'
+                        : 'bg-[#f6f9fc] text-[#425466] border border-[#e6ebf1]'
                     }`}>
-                      {u.role === 'Owner' && <span class="w-1.5 h-1.5 rounded-full bg-indigo-400" />}
                       {u.role}
                     </span>
                   </td>
-                  <td class="py-3.5 px-5 text-zinc-500 text-right tabular-nums">{u.date}</td>
+                  <td class="py-3.5 px-5 text-[#425466] text-right font-mono">{u.date}</td>
                 </tr>
               ))}
             </tbody>

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

@@ -9,13 +9,13 @@ export interface RootLayoutProps {
 }
 
 export default function RootLayout({ children, metadata }: RootLayoutProps) {
-  const title = metadata?.title || 'FrootAuth — Modern Cloud Platform';
+  const title = metadata?.title || 'FrootAuth — Authentication & Revenue Infrastructure';
   const description =
     metadata?.description ||
-    'Fullstack SaaS application with authentication and real-time dashboard powered by Preact and FrootKit.';
+    'Fullstack SaaS authentication, subscription billing, and real-time telemetry powered by FrootKit.';
 
   return (
-    <html lang="en" class="dark scroll-smooth">
+    <html lang="en" class="scroll-smooth">
       <head>
         <meta charSet="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -24,12 +24,12 @@ export default function RootLayout({ children, metadata }: RootLayoutProps) {
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
           rel="stylesheet"
         />
         <link rel="stylesheet" href="/styles.css" />
       </head>
-      <body class="bg-[#08090a] text-zinc-100 min-h-screen antialiased selection:bg-indigo-500/20 selection:text-indigo-300 font-sans">
+      <body class="bg-white font-sans text-[#425466] antialiased">
         {children}
       </body>
     </html>

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

@@ -7,15 +7,22 @@ export const metadata = {
 
 export default function LoginPage() {
   return (
-    <div class="min-h-screen bg-[#08090a] text-zinc-100 flex flex-col justify-between selection:bg-indigo-500/20 selection:text-indigo-300">
-      <Navbar />
+    <div class="min-h-screen bg-[#f6f9fc] text-[#425466] flex flex-col justify-between">
+      <header class="border-b border-[#e6ebf1] bg-white py-4 px-6 flex items-center justify-between">
+        <a href="/" class="text-[20px] font-semibold tracking-tight text-[#635bff]">
+          frootauth
+        </a>
+        <a href="/" class="text-xs text-[#425466] hover:text-[#0a2540]">
+          ← Back to home
+        </a>
+      </header>
 
       <main class="max-w-md mx-auto px-6 py-16 flex-1 w-full flex flex-col justify-center">
         <AuthForm mode="login" />
       </main>
 
-      <footer class="py-6 text-center text-xs text-zinc-600">
-        FrootAuth • Web Crypto PBKDF2 Authentication
+      <footer class="py-6 text-center text-xs text-[#425466]">
+        FrootAuth · Web Crypto PBKDF2 Authentication
       </footer>
     </div>
   );