create-frootkit 1.2.2 → 1.2.4

package/templates/starter/src/components/Header.tsx

@@ -1,13 +1,13 @@
 export function Header() {
   return (
-    <header class="border-b border-slate-800/80 bg-slate-950/40 backdrop-blur-md sticky top-0 z-50">
+    <header class="border-b border-[#1a2333] bg-[#06090f]/95 sticky top-0 z-50">
       <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
         <div class="flex items-center gap-3">
-          <span class="text-emerald-400 font-extrabold text-xl tracking-tight flex items-center gap-2">
-            <span class="inline-block w-3 h-3 rounded-full bg-emerald-400 animate-pulse" />
+          <span class="text-white font-extrabold text-lg tracking-tight flex items-center gap-2">
+            <span class="w-3 h-3 rounded-full bg-emerald-500 inline-block" />
             FrootKit
           </span>
-          <span class="px-2 py-0.5 text-[11px] font-mono font-medium rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
+          <span class="px-2 py-0.5 text-[11px] font-mono text-slate-400 rounded-md bg-[#0a0f18] border border-[#1a2333]">
             v1.3.1
           </span>
         </div>
@@ -23,7 +23,7 @@ export function Header() {
           </a>
           <a
             href="/api/health"
-            class="text-slate-300 hover:text-emerald-400 transition-colors font-mono text-xs px-2.5 py-1 rounded-md bg-slate-900 border border-slate-800"
+            class="text-emerald-400 hover:text-emerald-300 font-mono text-xs px-2.5 py-1 rounded-md bg-[#0a0f18] border border-[#1a2333] transition-colors"
           >
             /api/health
           </a>
@@ -33,7 +33,7 @@ export function Header() {
             rel="noreferrer"
             class="flex items-center gap-2 text-slate-300 hover:text-white transition-colors"
           >
-            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
+            <svg width="16" height="16" class="w-4 h-4 fill-current shrink-0" viewBox="0 0 24 24">
               <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
             </svg>
             GitHub

package/templates/starter/src/components/TerminalPreview.tsx

@@ -1,54 +1,54 @@
 export function TerminalPreview() {
   return (
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto w-full mb-16">
-      <div class="rounded-2xl border border-slate-800 bg-[#070b14] p-6 shadow-xl relative overflow-hidden group">
-        <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-800/80">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mx-auto w-full mb-16">
+      <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] overflow-hidden">
+        <div class="flex items-center justify-between px-4 py-2.5 bg-[#0f1624] border-b border-[#1a2333]">
           <div class="flex items-center gap-2">
-            <span class="w-3 h-3 rounded-full bg-rose-500/80" />
-            <span class="w-3 h-3 rounded-full bg-amber-500/80" />
-            <span class="w-3 h-3 rounded-full bg-emerald-500/80" />
+            <span class="w-2.5 h-2.5 rounded-full bg-slate-700" />
+            <span class="w-2.5 h-2.5 rounded-full bg-slate-700" />
+            <span class="w-2.5 h-2.5 rounded-full bg-slate-700" />
             <span class="ml-2 text-xs font-mono text-slate-400">src/app/page.tsx</span>
           </div>
-          <span class="text-[11px] font-mono text-emerald-400/90 font-medium bg-emerald-950/60 px-2 py-0.5 rounded border border-emerald-800/40">
+          <span class="text-[11px] font-mono text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20">
             Preact SSR
           </span>
         </div>
-        <div class="font-mono text-xs sm:text-sm text-slate-300 space-y-2 select-all leading-relaxed">
+        <div class="p-5 font-mono text-xs text-slate-300 space-y-2 select-all leading-relaxed">
           <p><span class="text-purple-400 font-semibold">export default function</span> <span class="text-blue-400">HomePage</span>() &#123;</p>
           <p class="pl-4"><span class="text-purple-400 font-semibold">return</span> (</p>
           <p class="pl-8 text-emerald-300">&lt;<span class="text-blue-300 font-semibold">main</span> <span class="text-teal-400">class</span>=<span class="text-amber-300">"min-h-screen p-8"</span>&gt;</p>
-          <p class="pl-12 text-slate-100">&lt;<span class="text-blue-300 font-semibold">h1</span>&gt;Hello FrootKit!&lt;/<span class="text-blue-300 font-semibold">h1</span>&gt;</p>
+          <p class="pl-12 text-slate-100">&lt;<span class="text-blue-300 font-semibold">h1</span>&gt;Production FrootKit Application&lt;/<span class="text-blue-300 font-semibold">h1</span>&gt;</p>
           <p class="pl-8 text-emerald-300">&lt;/<span class="text-blue-300 font-semibold">main</span>&gt;</p>
           <p class="pl-4">);</p>
           <p>&#125;</p>
         </div>
       </div>
 
-      <div class="rounded-2xl border border-slate-800 bg-[#070b14] p-6 shadow-xl relative overflow-hidden group">
-        <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-800/80">
+      <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] overflow-hidden">
+        <div class="flex items-center justify-between px-4 py-2.5 bg-[#0f1624] border-b border-[#1a2333]">
           <div class="flex items-center gap-2">
-            <span class="w-3 h-3 rounded-full bg-rose-500/80" />
-            <span class="w-3 h-3 rounded-full bg-amber-500/80" />
-            <span class="w-3 h-3 rounded-full bg-emerald-500/80" />
+            <span class="w-2.5 h-2.5 rounded-full bg-slate-700" />
+            <span class="w-2.5 h-2.5 rounded-full bg-slate-700" />
+            <span class="w-2.5 h-2.5 rounded-full bg-slate-700" />
             <span class="ml-2 text-xs font-mono text-slate-400">terminal</span>
           </div>
-          <span class="text-[11px] font-mono text-cyan-400/90 font-medium bg-cyan-950/60 px-2 py-0.5 rounded border border-cyan-800/40">
+          <span class="text-[11px] font-mono text-cyan-400 bg-cyan-500/10 px-2 py-0.5 rounded border border-cyan-500/20">
             CLI
           </span>
         </div>
-        <div class="font-mono text-xs sm:text-sm text-slate-300 space-y-2.5 leading-relaxed">
-          <p class="text-slate-500"># Start lightning-fast dev server</p>
-          <p class="text-emerald-400 font-semibold flex items-center gap-2">
-            <span class="text-slate-500 select-none">$</span> frootkit dev
-          </p>
-          <p class="text-slate-500 pt-1"># Build production static export + API routes</p>
-          <p class="text-cyan-400 font-semibold flex items-center gap-2">
-            <span class="text-slate-500 select-none">$</span> frootkit build
-          </p>
-          <p class="text-slate-500 pt-1"># Test the API endpoint</p>
-          <p class="text-amber-400 font-semibold flex items-center gap-2">
-            <span class="text-slate-500 select-none">$</span> curl http://localhost:3000/api/health
-          </p>
+        <div class="p-5 font-mono text-xs text-slate-300 space-y-3 leading-relaxed">
+          <div>
+            <span class="text-slate-500 block text-[11px]"># Run dev server with Tailwind compiler</span>
+            <span class="text-emerald-400 font-semibold">$ frootkit dev</span>
+          </div>
+          <div>
+            <span class="text-slate-500 block text-[11px]"># Build static export and API manifest</span>
+            <span class="text-cyan-400 font-semibold">$ frootkit build</span>
+          </div>
+          <div>
+            <span class="text-slate-500 block text-[11px]"># Test dynamic route handler</span>
+            <span class="text-amber-400 font-semibold">$ curl http://localhost:3000/api/health</span>
+          </div>
         </div>
       </div>
     </div>

package/templates/starter/src/styles.css

@@ -1,19 +1,37 @@
 @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;
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+  --color-brand-primary: #10b981;
+  --color-brand-hover: #34d399;
 }
 
 :root {
   color-scheme: dark;
 }
+
+html {
+  background-color: #06090f;
+  color: #f8fafc;
+  font-family: var(--font-sans);
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* SVG safety: prevents flex ballooning across all browsers */
+svg {
+  flex-shrink: 0;
+  max-width: 100%;
+}
+
+/* Accessibility: Mandatory Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}