free-framework 4.7.1 → 4.8.1

package/compiler/generator.js

@@ -207,12 +207,12 @@ if (server.namedMiddlewares['auth']) server.namedMiddlewares['AuthGuard'] = serv
                 "    <meta name=\"csrf-token\" content=\"${res.context.csrfToken || ''}\">\n" +
                 "    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n" +
                 "    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n" +
-                "    <link href=\"https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap\" rel=\"stylesheet\">\n" +
+                "    <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap\" rel=\"stylesheet\">\n" +
                 "    <link rel=\"stylesheet\" href=\"/css/app.css\">\n" +
                 "    <style>\n" +
-                "        :root { --primary:#00ff88; --secondary:#00bdff; --dark:#050505; }\n" +
-                "        body { margin:0; font-family:'Outfit', system-ui, sans-serif; background:var(--dark); color:white; overflow-x:hidden; scroll-behavior:smooth; }\n" +
-                "        " + scopedCSS + "\n" +
+                "        :root { --primary:#fff; --bg:#000; --border:#222; }\n" +
+                "        body { margin:0; font-family:'Inter', system-ui, sans-serif; background:var(--bg); color:#fff; -webkit-font-smoothing:antialiased; }\n" +
+                "        ${scopedCSS}\n" +
                 "    </style>\n" +
                 "    <script src=\"/free-runtime.js\" defer></script>\n" +
                 "</head>\n" +

package/compiler/parser.js

@@ -317,7 +317,7 @@ function parseTag(token, tokens, filename, source) {
                     attrs[attrName] = attrVal;
                 }
                 children.push({ type: 'tag', name: 'a', attributes: attrs, content: txt });
-            } else if (next.type === 'IDENTIFIER') {
+            } else if (next.type === 'IDENTIFIER' || next.type === 'KEYWORD') {
                 children.push(parseTag(next, tokens, filename, source));
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "free-framework",
-  "version": "4.7.1",
+  "version": "4.8.1",
   "description": "Professional Node.js engine for the .free language. Blazing-fast SSR, Islands Architecture, and built-in ORM.",
   "main": "index.js",
   "bin": {

package/templates/app-template/resources/css/app.css

@@ -3,84 +3,59 @@
 @tailwind utilities;
 
 :root {
-    --primary: #00ff88;
-    --primary-glow: rgba(0, 255, 136, 0.4);
-    --secondary: #00bdff;
-    --dark: #050505;
-    --surface: rgba(255, 255, 255, 0.03);
-    --glass-border: rgba(255, 255, 255, 0.1);
+    --primary: #fff;
+    --secondary: #888;
+    --bg: #000;
+    --surface: #0a0a0a;
+    --border: #222;
+    --text-main: #fff;
+    --text-muted: #888;
 }
 
 body {
-    @apply bg-black text-gray-100 selection:bg-primary selection:text-black;
-    background-image:
-        radial-gradient(circle at 20% 20%, rgba(0, 255, 136, 0.05) 0%, transparent 40%),
-        radial-gradient(circle at 80% 80%, rgba(0, 189, 255, 0.05) 0%, transparent 40%);
+    @apply bg-black text-white selection:bg-white selection:text-black;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    -webkit-font-smoothing: antialiased;
 }
 
-.glass {
-    @apply backdrop-blur-xl bg-white/5 border border-white/10;
-    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
+.container-pro {
+    @apply max-w-5xl mx-auto px-6;
 }
 
-.nav-link {
-    @apply relative py-2 transition-all duration-300 hover:text-primary;
-}
-
-.nav-link::after {
-    content: '';
-    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300;
+.btn-pro {
+    @apply px-6 py-2 rounded-md font-medium transition-all duration-200 flex items-center gap-2;
+    background: var(--primary);
+    color: #000;
 }
 
-.nav-link:hover::after {
-    @apply w-full;
+.btn-pro:hover {
+    @apply opacity-90 scale-[0.98];
 }
 
-.btn-premium {
-    @apply px-8 py-4 rounded-full font-bold transition-all duration-500 relative overflow-hidden flex items-center gap-2;
-    background: linear-gradient(135deg, var(--primary), var(--secondary));
-    color: #000;
-    box-shadow: 0 0 20px var(--primary-glow);
+.btn-outline {
+    @apply px-6 py-2 rounded-md border border-border font-medium text-white transition-all hover:bg-white/5;
 }
 
-.btn-premium:hover {
-    @apply scale-105;
-    box-shadow: 0 0 40px var(--primary-glow);
+.card-pro {
+    @apply p-8 rounded-xl border border-border bg-surface transition-all hover:border-white/20;
 }
 
-.hero-text {
-    @apply text-7xl md:text-9xl font-black tracking-tighter leading-none;
-    background: linear-gradient(180deg, #fff 0%, #888 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+.hero-title {
+    @apply text-5xl md:text-7xl font-bold tracking-tight text-white mb-6;
 }
 
-@keyframes float {
-    0% {
-        transform: translateY(0px);
-    }
-
-    50% {
-        transform: translateY(-20px);
-    }
-
-    100% {
-        transform: translateY(0px);
-    }
+.nav-link {
+    @apply text-sm text-text-muted transition-colors hover:text-white;
 }
 
-.animate-float {
-    animation: float 6s ease-in-out infinite;
+.badge-pro {
+    @apply px-2 py-0.5 rounded border border-border text-[10px] font-bold tracking-widest uppercase text-text-muted;
 }
 
-.feature-card {
-    @apply p-8 rounded-3xl glass transition-all duration-500 hover:-translate-y-2 hover:border-primary/30;
+pre {
+    @apply bg-black border border-border rounded-lg p-6 font-mono text-sm overflow-x-auto text-white/80;
 }
 
-/* --------------------------------------------------------------------------
- * Free Framework Enterprise Styles
- * --------------------------------------------------------------------------
- * 
- * You can write custom CSS here or use Tailwind's utility classes directly
- * in your .free components.
- */
+code {
+    @apply font-mono;
+}

package/templates/app-template/resources/views/header.free

@@ -1,15 +1,12 @@
 component Header {
-  header class="fixed top-0 left-0 w-full z-50 transition-all duration-300 border-b border-white/5 backdrop-blur-md bg-black/30" {
-    nav class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between" {
+  header class="fixed top-0 left-0 w-full z-50 bg-black border-b border-border h-16 flex items-center" {
+    nav class="container-pro w-full flex items-center justify-between" {
       div class="flex items-center gap-8" {
-        a href="/" class="flex items-center gap-2 group" {
-          div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-primary to-secondary flex items-center justify-center shadow-lg shadow-primary/20 group-hover:rotate-12 transition-transform duration-500" {
-            span class="text-black font-black text-xl" { text "F" }
-          }
-          span class="text-2xl font-black tracking-tighter text-white" { text "FREE ULTRA" }
+        a href="/" class="text-white font-bold tracking-tight text-lg" { 
+          text "FREE ULTRA" 
         }
         
-        div class="hidden md:flex items-center gap-6 ml-8" {
+        div class="hidden md:flex gap-6" {
           a href="/" class="nav-link font-medium" { text "Home" }
           a href="/dashboard" class="nav-link font-medium" { text "Dashboard" }
           a href="/docs" class="nav-link font-medium" { text "Documentation" }
@@ -17,10 +14,10 @@ component Header {
       }
 
       div class="flex items-center gap-4" {
-        span class="hidden sm:inline-flex items-center px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold tracking-widest uppercase animate-pulse" {
-          text "v4.7.0 ACTIVE"
+        span class="badge-pro" {
+          text "v4.8.0-STABLE"
         }
-        a href="/login" class="px-5 py-2 rounded-full border border-white/10 hover:bg-white/5 transition-colors font-semibold" { 
+        a href="/login" class="text-sm font-medium text-white hover:opacity-80 transition-opacity" { 
           text "Sign In" 
         }
       }

package/templates/app-template/resources/views/home.free

@@ -1,73 +1,47 @@
-/**
-* resources/views/home.free
-*
-* The default landing page component.
-* Features modern Tailwind styling and demonstrates basic reactive state.
-*/
-
 component Home {
-  style {
-    .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(to right, #1f2937, #111827); color: white; }
-  }
-
-  main class="pt-32 pb-20 px-6" {
-    // Hero Section
-    section class="relative max-w-7xl mx-auto flex flex-col items-center text-center py-20 md:py-32" {
-      div class="absolute -top-20 w-72 h-72 bg-primary/20 rounded-full blur-[120px] -z-10 animate-pulse" { }
-      div class="absolute top-40 -right-20 w-96 h-96 bg-secondary/10 rounded-full blur-[150px] -z-10" { }
-
-      h1 class="hero-text mb-8" { 
-        text "Build Faster." 
+  main class="pt-32 pb-20 overflow-hidden" {
+    // Hero
+    section class="container-pro text-center pt-20 pb-20" {
+      h1 class="hero-title" { 
+        text "The Node.js Engine"
         br { }
-        span class="text-primary" { text "Deploy Sharper." }
+        span class="text-text-muted" { text "for Enterprise." }
       }
       
-      p class="text-xl md:text-2xl text-gray-400 max-w-2xl mb-12 font-medium leading-relaxed" {
-        text "The Enterprise Node.js Ecosystem you've been waiting for. Powered by Islands Architecture, built-in ORM, and Extreme SSR Performance."
+      p class="text-xl text-text-muted max-w-2xl mx-auto mb-10 leading-relaxed" {
+        text "High-performance islands architecture, built-in ORM, and blazing fast SSR. Zero configuration, infinite possibilities."
       }
 
-      div class="flex flex-wrap justify-center gap-6" {
-        a href="/docs" class="btn-premium" {
-          span { text "Get Started" }
-          svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" {
-            path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="Arrow-right" { }
-          }
+      div class="flex flex-wrap justify-center gap-4" {
+        a href="/docs" class="btn-pro" {
+          text "Get Started"
         }
-        a href="https://github.com/dev-omartolba" class="px-8 py-4 rounded-full glass font-bold hover:bg-white/10 transition-all flex items-center gap-2" {
-          text "View Source"
+        a href="https://github.com/dev-omartolba" class="btn-outline" {
+          text "Github"
         }
       }
 
-      div class="mt-20 w-full glass rounded-[40px] p-4 animate-float" {
-        div class="rounded-[32px] overflow-hidden border border-white/5 bg-black/40" {
-          div class="px-4 py-3 border-b border-white/5 flex gap-2" {
-            div class="w-3 h-3 rounded-full bg-red-500/50" { }
-            div class="w-3 h-3 rounded-full bg-yellow-500/50" { }
-            div class="w-3 h-3 rounded-full bg-green-500/50" { }
-          }
-          pre class="p-8 text-left text-primary font-mono text-lg" {
-            code { text "npx free-framework new my-app" }
-          }
+      div class="mt-20 max-w-3xl mx-auto" {
+        pre {
+          code { text "npx free-framework new my-app" }
         }
       }
     }
 
-    // Features Section
-    section class="max-w-7xl mx-auto py-32" {
-      h2 class="text-4xl md:text-6xl font-black mb-20 text-center" { text "Why Free Ultra?" }
-      
-      div class="grid md:grid-cols-3 gap-8" {
-        div class="feature-card" {
-          h3 class="text-2xl font-bold mb-4 text-primary" { text "HyperExpress Core" }
-          p class="text-gray-400" { text "Built on top of uWebSockets.js, providing the fastest HTTP/WebSocket performance in the Node.js ecosystem." }
+    // Features
+    section class="container-pro pt-20" {
+      div class="grid md:grid-cols-3 gap-6" {
+        div class="card-pro" {
+          h3 class="text-lg font-bold mb-2" { text "Speed" }
+          p class="text-sm text-text-muted" { text "Powered by HyperExpress and uWebSockets for extreme performance." }
         }
-        div class="feature-card" {
-          h3 class="text-2xl font-bold mb-4 text-secondary" { text "Islands Architecture" }
-          p class="text-gray-400" { text "Ships zero Javascript by default. Only hydrate the components that need interactivity for ultimate SEO and speed." }
+        div class="card-pro" {
+          h3 class="text-lg font-bold mb-2" { text "Islands" }
+          p class="text-sm text-text-muted" { text "Hydrate only what you need. Ships zero JS by default." }
         }
-        div class="feature-card" {
-          h3 class="text-2xl font-bold mb-4 text-white" { text "Pro-Grade ORM" }
-          p class="text-gray-400" { text "A built-in migration system and elegant Model layer that makes database management a breeze." }
+        div class="card-pro" {
+          h3 class="text-lg font-bold mb-2" { text "Enterprise" }
+          p class="text-sm text-text-muted" { text "Built-in auth, migrations, and pro-grade security patterns." }
         }
       }
     }