free-framework 4.8.11 → 5.0.1

package/README.md

@@ -1,7 +1,7 @@
-# Free Framework
+# Free Ultra Framework v5.0.0 [Convergence Royale]
 
-> The blazing-fast, full-stack web framework with its own `.free` language syntax.  
-> Build modern production apps in a fraction of the time — with **zero boilerplate**.
+> **The High-Octane Engineering Ecosystem.**  
+> Bridging the gap between Laravel's elegance, React's reactivity, and Node.js's raw performance. 🛡️ Blazing-fast, Secure, and Scalable by default.
 
 [![NPM Version](https://img.shields.io/npm/v/free-framework.svg)](https://www.npmjs.com/package/free-framework)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
@@ -165,13 +165,24 @@ server.use(ChatPlugin());
 
 ---
 
-## 🔒 Security Built-in
+## 🔒 Security: Aura Shield (v5.0.0)
 
-- Zero-config **security headers** (CSP, X-Frame-Options, HSTS)
-- **DDoS & Rate limiting** (1000 req/min per IP by default)
-- **CSRF token injection** on every page
-- **bcrypt** password hashing in `AuthPlugin`
-- **XSS-safe** template interpolation (auto-escaped)
+Free Ultra v5.0.0 introduces the **Active Security Engine**, a proactive layer that protects your app from day one.
+
+- **Aura Firewall**: Real-time pattern matching against SQL Injection, Directory Traversal, and malicious User-Agents.
+- **Strict Headers**: CSP, HSTS, and Permissions-Policy enforced by default.
+- **Strict-Typed Validation**: High-performance payload verification via `runtime/validator.js`.
+
+---
+
+## 📖 The Gigantic Encyclopedia
+
+Access the comprehensive, 7-chapter masterclass on building industrial-grade web applications.
+- [Aura Architecture & AST Compilation]
+- [Security Protocols & Firewall Deep-Dives]
+- [.free Language Specs & Reactive State]
+- [ORM 2.0 & CLI Scaffolding]
+- [SPA Transitions & Partial SSR]
 
 ---
 

package/cli/commands/make.js

@@ -20,8 +20,8 @@ const make = {
         fs.ensureDirSync(dir);
         const filePath = path.join(dir, `${name}.free`);
         guard(filePath, `Model ${name}`);
-        fs.writeFileSync(filePath, `model ${name} {\n    name string\n    created_at string\n}\n`);
-        console.log(`✅ Created model: app/models/${name}.free`);
+        fs.writeFileSync(filePath, `// Free Ultra Enterprise Model: ${name}\n// Optimized for SQLite / ORM v5.0.0\n\nmodel ${name} {\n    id integer primary_key autoincrement\n    uuid string unique\n    name string index\n    email string unique\n    status string default('active')\n    created_at timestamp default(now)\n    updated_at timestamp default(now)\n}\n`);
+        console.log(`✅ [Laravel-scaffold] Created model: app/models/${name}.free`);
     },
 
     controller: (name) => {
@@ -29,8 +29,8 @@ const make = {
         fs.ensureDirSync(dir);
         const filePath = path.join(dir, `${name}Controller.free`);
         guard(filePath, `Controller ${name}`);
-        fs.writeFileSync(filePath, `/**\n * ${name} Controller\n */\n\naction get${name} {\n    return { success: true };\n}\n`);
-        console.log(`✅ Created controller: app/controllers/${name}Controller.free`);
+        fs.writeFileSync(filePath, `/**\n * ${name} Controller (v5.0.0 [Convergence])\n * Unified Logic for API and Web\n */\n\naction index {\n    // Laravel-style Collection logic\n    const data = await ORM.all('${name}');\n    return { success: true, data };\n}\n\naction show {\n    const item = await ORM.find('${name}', { id: params.id });\n    return { success: !!item, data: item };\n}\n\naction store {\n    // Validation logic here\n    const newItem = await ORM.create('${name}', body);\n    return { success: true, id: newItem.id };\n}\n\naction update {\n    await ORM.update('${name}', { id: params.id }, body);\n    return { success: true };\n}\n\naction delete {\n    await ORM.delete('${name}', { id: params.id });\n    return { success: true };\n}\n`);
+        console.log(`✅ [Laravel-scaffold] Created controller: app/controllers/${name}Controller.free`);
     },
 
     middleware: (name) => {
@@ -38,8 +38,8 @@ const make = {
         fs.ensureDirSync(dir);
         const filePath = path.join(dir, `${name}.js`);
         guard(filePath, `Middleware ${name}`);
-        fs.writeFileSync(filePath, `/**\n * app/middleware/${name}.js\n */\nmodule.exports = async function ${name}Middleware(req, res, next) {\n    // Security/Auth logic here\n    next();\n};\n`);
-        console.log(`✅ Created middleware: app/middleware/${name}.js`);
+        fs.writeFileSync(filePath, `/**\n * app/middleware/${name}.js\n * Professional Request Filter (Node.js style)\n */\n\nmodule.exports = async function ${name}Middleware(req, res, next) {\n    try {\n        // Enter your security/auth logic here\n        // Example: if (!req.headers.authorization) throw new Error("Unauthorized");\n        \n        next();\n    } catch (err) {\n        res.status(401).json({ success: false, message: err.message });\n    }\n};\n`);
+        console.log(`✅ [NodeJS-style] Created middleware: app/middleware/${name}.js`);
     },
 
     migration: (name) => {
@@ -48,8 +48,8 @@ const make = {
         const timestamp = Date.now();
         const filePath = path.join(dir, `${timestamp}_${name}.js`);
         guard(filePath, `Migration ${name}`);
-        fs.writeFileSync(filePath, `exports.up = function(knex) {\n  return knex.schema.createTable('${name}', table => {\n    table.increments('id');\n    table.timestamps(true, true);\n  });\n};\n\nexports.down = function(knex) {\n  return knex.schema.dropTable('${name}');\n};\n`);
-        console.log(`✅ Created migration: database/migrations/${timestamp}_${name}.js`);
+        fs.writeFileSync(filePath, `/**\n * Migration: ${name}\n * Knex.js Query Builder compatible\n */\n\nexports.up = function(knex) {\n  return knex.schema.createTable('${name}', table => {\n    table.increments('id');\n    table.uuid('uuid').defaultTo(knex.fn.uuid());\n    table.timestamps(true, true);\n  });\n};\n\nexports.down = function(knex) {\n  return knex.schema.dropTable('${name}');\n};\n`);
+        console.log(`✅ [Laravel-style] Created migration: database/migrations/${timestamp}_${name}.js`);
     },
 
     page: (name) => {
@@ -57,8 +57,17 @@ const make = {
         fs.ensureDirSync(dir);
         const filePath = path.join(dir, `${name}.free`);
         guard(filePath, `Page ${name}`);
-        fs.writeFileSync(filePath, `component ${name} {\n    div class="container mx-auto p-4" {\n        h1 class="text-2xl font-bold" { text "${name} View" }\n    }\n}\n`);
-        console.log(`✅ Created view: app/views/${name}.free`);
+        fs.writeFileSync(filePath, `// Free Ultra Page: ${name} (React-inspired)\n\ncomponent ${name} {\n    let title = "${name} Hub";\n\n    div class="min-h-screen bg-zinc-950 text-white p-20" {\n        h1 class="text-6xl font-black tracking-tighter" { text title }\n        p class="text-zinc-500 mt-4" { text "Welcome to your high-performance island." }\n    }\n\n    style {\n       h1 { background: linear-gradient(to right, #fff, #444); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }\n    }\n}\n`);
+        console.log(`✅ [React-inspired] Created view: app/views/${name}.free`);
+    },
+
+    component: (name) => {
+        const dir = path.join(process.cwd(), "resources/components");
+        fs.ensureDirSync(dir);
+        const filePath = path.join(dir, `${name}.free`);
+        guard(filePath, `Component ${name}`);
+        fs.writeFileSync(filePath, `/**\n * Component: ${name}\n * High-performance Interactive Island\n */\n\ncomponent ${name} {\n    let status = state("idle");\n\n    div class="p-4 border border-zinc-800 rounded-xl" {\n        span { text "Status: " + status }\n        button class="ml-4 px-3 py-1 bg-white text-black text-xs font-bold" \n                onClick={() => status = "active"} {\n            text "Activate"\n        }\n    }\n}\n`);
+        console.log(`✅ [Island-scaffold] Created component: resources/components/${name}.free`);
     },
 
     service: (name) => {
@@ -66,8 +75,8 @@ const make = {
         fs.ensureDirSync(dir);
         const filePath = path.join(dir, `${name}.js`);
         guard(filePath, `Service ${name}`);
-        fs.writeFileSync(filePath, `/**\n * app/services/${name}.js\n * Enterprise service layer logic.\n */\nclass ${name} {\n    static async perform() {\n        // Your complex logic here\n    }\n}\n\nmodule.exports = ${name};\n`);
-        console.log(`✅ Created service: app/services/${name}.js`);
+        fs.writeFileSync(filePath, `/**\n * app/services/${name}.js\n * Enterprise Service Layer (Laravel-inspired)\n */\n\nclass ${name} {\n    /**\n     * Executes the primary business logic for this service.\n     */\n    static async handle(payload) {\n        console.log("[Service] Processing ${name} with payload:", payload);\n        // Complex business logic goes here\n        return { success: true };\n    }\n}\n\nmodule.exports = ${name};\n`);
+        console.log(`✅ [Laravel-inspired] Created service: app/services/${name}.js`);
     },
 };
 

package/compiler/generator.js

@@ -1,6 +1,6 @@
 /**
  * compiler/generator.js
- * Code Generator for Free Ultra (v4.3).
+ * Code Generator for Free Ultra (v5.0.0 Convergence).
  * Optimized for Islands Architecture and Component Composition.
  */
 
@@ -22,8 +22,7 @@ function generate(ast) {
         "const modelsRegistry = {};\n";
 
     const CleanCSS = require('clean-css');
-    const glob = require('fs'); // Just using fs for readdirSync
-
+    
     const components = {};
     const actions = {};
     let globalCSS = "";
@@ -98,205 +97,101 @@ function generate(ast) {
     ast.forEach(node => {
         if (node.type === 'action') {
             output += `\nserver.app.post("/_free/action/${node.name}", async (req, res) => {
-    try {
-        const user = (res.context && res.context.user) ? res.context.user : null;
-        let body = {};
-        if (req.headers['content-type'] && req.headers['content-type'].includes('application/json')) {
-            body = await req.json().catch(() => ({}));
-        } else {
-            body = await req.urlencoded().catch(() => ({}));
-        }
-        const result = await (async () => {\n`;
-            if (node.params && node.params.length > 0) {
-                output += `          const { ${node.params.join(', ')} } = body;\n`;
-            }
-            output += "          " + node.code.replace(/res\.locals/g, 'res.context') + "\n" +
-                "        })();\n" +
-                "        if (!res.headersSent) res.json({ success: true, result });\n" +
-                "    } catch(e) {\n" +
-                "        if (!res.headersSent) res.status(500).json({ success: false, error: e.message });\n" +
-                "    }\n" +
-                "});\n";
+                const body = req.body || {};
+                const logic = async (body, res) => { ${node.code} };
+                try { 
+                    const result = await logic(body, res);
+                    if (!res.completed) res.json({ success: true, data: result });
+                } catch(e) {
+                    if (!res.completed) res.status(500).json({ success: false, error: e.message });
+                }
+            });\n`;
         }
     });
 
-    globalCSS = new CleanCSS().minify(globalCSS).styles;
-    output += `\nconst scopedCSS = ${JSON.stringify(globalCSS.trim())};\n`;
-
-    output += `\nserver.renderRegistry = {\n`;
-    Object.keys(components).forEach((name, i) => {
-        output += `    ${name}: render${name}${i === Object.keys(components).length - 1 ? '' : ','}\n`;
+    output += "\n// Components (Islands Animation)\n";
+    Object.keys(components).forEach(name => {
+        output += generateComponentCode(components[name]);
     });
-    output += `};\n`;
 
-    output += `\nserver.middleware((req, res, next) => {
-    if (!res.context) res.context = {};
-    res.context.csrfToken = crypto.randomBytes(32).toString('hex');
-    next();
-});\n`;
-
-    // Actually emit the component rendering functions (hoisted)
-    Object.values(components).forEach(node => {
-        output += generateUltraComponent(node);
+    output += `\n// Routes & Global Rendering\n`;
+    output += `const helpers = { 
+        renderComponent: (name, props, h) => {
+            const comp = islandsRegistry[name];
+            return comp ? comp(props, h) : \`<!-- error: \${name} not found -->\`;
+        },
+        e: (val) => String(val).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;')
+    };\n`;
+
+    output += `const islandsRegistry = {\n`;
+    Object.keys(components).forEach(name => {
+        output += `    '${name}': render_${name},\n`;
     });
-
-    // ── Auto-register Custom Middlewares from app/middleware ─────────────────
-    output += `
-const mwDir = path.join(process.cwd(), 'app/middleware');
-if (fs.existsSync(mwDir)) {
-    fs.readdirSync(mwDir).forEach(file => {
-        if (file.endsWith('.js')) {
-            const name = file.replace('.js', '');
-            server.registerMiddleware(name, require(path.join(mwDir, file)));
-        }
-    });
-}
-if (server.namedMiddlewares['auth']) server.namedMiddlewares['AuthGuard'] = server.namedMiddlewares['auth'];
-\n`;
+    output += `};\n\n`;
 
     ast.forEach(node => {
         if (node.type === 'route') {
-            const v = node.view || 'home';
-            const viewName = v.charAt(0).toUpperCase() + v.slice(1);
-            const middlewares = node.middleware ? [node.middleware] : (node.middlewares || []);
-            let handlerCode = "";
-            if (node.handler && typeof node.handler === 'object' && node.handler.type === 'action_ref') {
-                handlerCode = actions[node.handler.name] || `console.error("Action not found: ${node.handler.name}");`;
-            } else {
-                handlerCode = node.handler || "";
-            }
-
-            const stylesRegistry = {};
-            ast.filter(n => n.type === 'component').forEach(comp => {
-                const styleNode = comp.body.find(b => b.type === 'style');
-                stylesRegistry[comp.name] = styleNode ? styleNode.content.trim() : "";
-            });
-
-            output += `\nserver.route("${node.method.toLowerCase()}", "${node.path}", ${JSON.stringify(middlewares)}, async (req, res) => {
-        const user = (res.context && res.context.user) ? res.context.user : null;
-        let body = {};
-        try {
-            if (req.headers['content-length'] > 0) {
-                if (req.headers['content-type'] && req.headers['content-type'].includes('application/json')) {
-                    body = await req.json().catch(() => ({}));
-                } else {
-                    body = await req.urlencoded().catch(() => ({}));
-                }
+            const method = node.method.toLowerCase() === 'get' || node.method === 'Get' ? 'get' : node.method.toLowerCase();
+            if (node.handler && node.handler.type === 'action_ref') {
+                output += `server.app.${method}('${node.path}', async (req, res) => {
+                    const actionResults = await fetch(\`http://localhost:\${process.env.PORT || 3000}/_free/action/${node.handler.name}\`, { method: 'POST', body: JSON.stringify(req.body) }).then(r => r.json());
+                    res.header('Content-Type', 'text/html');
+                    res.send(render_${node.view}({ user: req.user, ...actionResults.data }, helpers));
+                });\n`;
+            } else if (node.handler) {
+                output += `server.app.${method}('${node.path}', async (req, res) => {
+                    const logic = async (req, res) => { ${node.handler} };
+                    const viewToRender = await logic(req, res);
+                    if (viewToRender && islandsRegistry[viewToRender.name]) {
+                        res.header('Content-Type', 'text/html');
+                        res.send(islandsRegistry[viewToRender.name]({ user: req.user, ...req.body }, helpers));
+                    }
+                });\n`;
+            } else if (node.view) {
+                output += `server.app.${method}('${node.path}', async (req, res) => {
+                    res.header('Content-Type', 'text/html');
+                    res.send(render_${node.view}({ user: req.user }, helpers));
+                });\n`;
             }
-        } catch(e) {}
-
-        const result = await (async () => {\n` +
-                "            " + handlerCode.replace(/res\.locals/g, 'res.context') + "\n" +
-                "        })();\n\n" +
-                "        if (res.headersSent) return;\n" +
-                "\n" +
-                "        // If it's a PAGE route (has a view), render HTML\n" +
-                "        if (" + (node.view ? 'true' : 'false') + ") {\n" +
-                "            const stylesRegistry = " + JSON.stringify(stylesRegistry) + ";\n" +
-                "            const helpers = {\n" +
-                "                renderComponent: (name, props = {}) => {\n" +
-                "                    server.renderRegistry = server.renderRegistry || {\n" +
-                "                        " + Object.keys(components).map(name => `${name}: render${name}`).join(',\n                        ') + "\n" +
-                "                    };\n" +
-                "                    return server.renderRegistry[name] ? server.renderRegistry[name](props, helpers) : '<!-- Component ' + name + ' not found -->';\n" +
-                "                },\n" +
-                "                getScopedCSS: (used = []) => {\n" +
-                "                    return used.map(name => stylesRegistry[name] || '').join('\\n');\n" +
-                "                }\n" +
-                "            };\n" +
-                "            const props = result || (res.context && res.context.props ? res.context.props : {});\n" +
-                "            const pageHtml = helpers.renderComponent('" + viewName + "', props);\n" +
-                "            const scopedCSS = helpers.getScopedCSS(['" + viewName + "', 'Header']);\n" +
-                "            if (req.headers['x-free-partial']) {\n" +
-                "                return res.json({ title: 'Free Ultra | " + viewName + "', content: pageHtml, url: req.url, css: scopedCSS });\n" +
-                "            }\n" +
-                "            const headerHtml = helpers.renderComponent('Header', props);\n" +
-                "            const fullHTML = `<!DOCTYPE html>\n" +
-                "<html lang=\"en\">\n" +
-                "<head>\n" +
-                "    <meta charset=\"UTF-8\">\n" +
-                "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n" +
-                "    <title>Free Ultra | " + viewName + "</title>\n" +
-                "    <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=Inter:wght@400;500;700;900&display=swap\" rel=\"stylesheet\">\n" +
-                "    <link rel=\"stylesheet\" href=\"/css/app.css\">\n" +
-                "    <style>\n" +
-                "        :root { --primary:#fff; --bg:#000; --border:#27272a; }\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" +
-                "<body>\n" +
-                "    ${headerHtml}\n" +
-                "    <main id=\"free-app-root\">\n" +
-                "        ${pageHtml}\n" +
-                "    </main>\n" +
-                "    ${process.env.NODE_ENV !== 'production' ? `\n" +
-                "    <script>\n" +
-                "        (function connectHMR() {\n" +
-                "            const ws = new WebSocket('ws://' + location.host + '/_free_hmr');\n" +
-                "            ws.onclose = () => { \n" +
-                "                setTimeout(() => fetch('/').then(() => window.location.reload()).catch(connectHMR), 500); \n" +
-                "            };\n" +
-                "            console.log('[Free Engine] ⚡ HMR Active');\n" +
-                "        })();\n" +
-                "    </script>` : ''}\n" +
-                "</body>\n" +
-                "</html>`;\n" +
-                "            res.header('Content-Type', 'text/html').send(fullHTML);\n" +
-                "        } else {\n" +
-                "            res.json({ success: true, result });\n" +
-                "        }\n" +
-                "    });\n";
         }
     });
 
-    output += `\nif (require.main === module) {
-                                                ORM.migrate(modelsRegistry).then(() => {
-                                                    server.start(process.env.PORT || 4000);
-                                                }).catch(err => console.error(err));
-}
+    output += `\n// Global Finalizing\n`;
+    output += `const cssMinifier = new CleanCSS({});\n`;
+    output += `const minifiedCSS = cssMinifier.minify(\`${globalCSS}\`).styles;\n`;
+    output += `server.app.get('/_free/styles.css', (req, res) => {
+        res.header('Content-Type', 'text/css');
+        res.send(minifiedCSS);
+    });\n`;
 
-                                            module.exports = {...modelsRegistry, server, modelsRegistry, ORM};
-                                            `;
+    output += `\nserver.start(process.env.PORT || 3000);\n`;
 
     return output;
 }
 
-function generateUltraComponent(node) {
-    const onMount = node.body.find(n => n.type === 'onMount')?.code || '';
-    const onDestroy = node.body.find(n => n.type === 'onDestroy')?.code || '';
-    const isInteractive = node.states.length > 0 || onMount !== '' || onDestroy !== '' || hasInteractivity(node.body);
-    const stateNames = node.states.map(s => s.name);
-
-    let code = `\nfunction render${node.name}(props = { }, helpers = { }) {\n`;
-    code += `    const e = (str) => String(str).replace(/[&<>'"]/g, m => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' }[m]));\n`;
-    code += `    const state = {\n`;
-    node.states.forEach(s => {
-        let val = s.default;
-        const isExpression = typeof val === 'string' && (val.includes('props.') || val.includes('||') || val.includes('&&') || val === 'true' || val === 'false' || val === 'null' || val.trim().startsWith('{') || val.trim().startsWith('['));
-        const finalVal = (isExpression || typeof val === 'number') ? val : `"${val}"`;
-        code += `        "${s.name}": ${finalVal},\n`;
-    });
-    code += `    };\n`;
-    if (stateNames.length > 0) {
-        code += `    const { ${stateNames.join(', ')} } = state;\n`;
-    }
-
+function generateComponentCode(node) {
+    let stateNames = node.states.map(s => s.name);
+    let isInteractive = hasInteractivity(node.body);
+    let code = `\nfunction render_${node.name}(props = {}, helpers) {\n`;
+    code += `    const { e } = helpers;\n`;
+    code += `    let html = "";\n`;
     code += `    const _events = [];\n`;
-    code += `    const islandAttr = ${isInteractive} ? ' data-component="${node.name}"' : '';\n`;
-    code += `    let html = "<div class='free-component'" + islandAttr + " data-state='" + JSON.stringify(state).replace(/'/g, "&#39;") + "'";\n`;
-
-    if (onMount) {
-        code += `    _events.push({ id: 'onMount', fn: function(state) { ${onMount} } });\n`;
-        code += `    html += " data-free-on-mount='onMount'";\n`;
+    
+    // Inject state initializers for the island
+    if (node.states.length > 0) {
+        code += `    const state = { \n`;
+        node.states.forEach(s => {
+            code += `        ${s.name}: ${s.default},\n`;
+        });
+        code += `    };\n`;
+    } else {
+        code += `    const state = {};\n`;
     }
-    if (onDestroy) {
-        code += `    _events.push({ id: 'onDestroy', fn: function(state) { ${onDestroy} } });\n`;
-        code += `    html += " data-free-on-destroy='onDestroy'";\n`;
+
+    code += `    html += "<div class='free-component' data-component='${node.name}'";\n`;
+    if (isInteractive) {
+        code += `    html += " data-island='true'";\n`;
+        code += `    html += " data-state='" + JSON.stringify(state).replace(/'/g, "&#39;") + "'";\n`;
     }
 
     code += `    html += ">";\n`;
@@ -355,7 +250,7 @@ function generateTagCode(tag, stateNames) {
         let propsStr = "{";
         if (tag.attributes) {
             Object.keys(tag.attributes).forEach((a, i) => {
-                let val = tag.attributes[a].replace(/\{([^}]+)\}/g, (_, p) => "${" + p + "}");
+                let val = tag.attributes[a].replace(/([^\\]|^)\{([a-zA-Z0-9_$.]+)\}/g, '$1${$2}');
                 propsStr += (i === 0 ? "" : ", ") + '"' + a + '": `' + val + '`';
             });
         }
@@ -378,7 +273,7 @@ function generateTagCode(tag, stateNames) {
                 }
                 code += `    html += " data-on-${eventName}='${uniqueId}'";\n`;
             } else {
-                let val = tag.attributes[a].replace(/\{([^}]+)\}/g, (_, p) => "${e(" + p + ")}");
+                let val = tag.attributes[a].replace(/([^\\]|^)\{([a-zA-Z0-9_$.]+)\}/g, '$1${e($2)}');
                 code += "    html += \" \" + " + JSON.stringify(a) + " + \"='\" + `" + val + "` + \"'\";\n";
             }
         });
@@ -398,15 +293,17 @@ function generateTagCode(tag, stateNames) {
     code += `    html += ">";\n`;
 
     if (tag.content) {
-        let cont = tag.content.replace(/`/g, '\\`').replace(/\$/g, '\\$').replace(/\{([^}]+)\}/g, (_, p) => {
-            const parts = p.split('.');
-            if (stateNames.includes(parts[0])) return `\${e(state["${parts[0]}"]${parts.slice(1).map(part => `?.["${part}"]`).join('')})}`;
-            return `\${e(${p})}`;
-        });
-        code += `    html += \`${cont}\`;\n`;
+        // Ultra-safe: only interpolate if it's a simple variable-like name with no whitespace
+        let val = tag.content.replace(/([^\\]|^)\{([a-zA-Z0-9_$.]+)\}/g, '$1${e($2)}');
+        // Handle escaped braces
+        val = val.replace(/\\\{/g, '{').replace(/\\\}/g, '}');
+        code += `    html += \`${val}\`;\n`;
+    }
+
+    if (tag.children) {
+        code += generateComponentBody(tag.children, stateNames);
     }
 
-    if (tag.children) code += generateComponentBody(tag.children, stateNames);
     code += `    html += "</${tag.name}>";\n`;
     return code;
 }

package/compiler/lexer.js

@@ -24,7 +24,8 @@ const KEYWORDS = new Set([
     'middleware', 'auth', 'login', 'register', 'upload', 'path', 'maxSize', 'error',
     'text', 'action', 'validate', 'store', 'onMount', 'onDestroy', 'queue', 'mail',
     'loop', 'condition', 'script', 'if', 'for',
-    'get', 'post', 'put', 'delete', 'patch', 'head', 'options'
+    'get', 'post', 'put', 'delete', 'patch', 'head', 'options',
+    'Get', 'Post', 'Put', 'Delete', 'Patch', 'Head', 'Options'
 ]);
 
 function tokenize(code, filename = 'unknown.free') {

package/compiler/parser.js

@@ -1,6 +1,6 @@
 /**
  * compiler/parser.js
- * Parser for the Free Framework (v4.3).
+ * Parser for the Free Framework (v5.0.0 Convergence).
  * Standardized braced-body parsing and raw code slicing.
  */
 
@@ -21,7 +21,7 @@ function parse(tokens, filename = 'unknown.free', source = '') {
         if (token.type === 'KEYWORD') {
             if (token.value === 'route') {
                 ast.push(parseRoute(tokens, filename, source));
-            } else if (['get', 'post', 'put', 'delete', 'patch', 'head', 'options'].includes(token.value)) {
+            } else if (['get', 'post', 'put', 'delete', 'patch', 'head', 'options', 'Get', 'Post', 'Put', 'Delete', 'Patch', 'Head', 'Options'].includes(token.value)) {
                 tokens.unshift(token); // put back the method
                 ast.push(parseRoute(tokens, filename, source));
             } else if (token.value === 'model') {
@@ -175,7 +175,7 @@ function parseComponent(tokens, filename, source) {
             body.push({ type: next.value, code: parseActionBody(tokens, source) });
         } else if (next.value === 'style') {
             body.push({ type: 'style', content: parseActionBody(tokens, source) });
-        } else if (next.type === 'IDENTIFIER') {
+        } else if (next.type === 'IDENTIFIER' || next.type === 'KEYWORD') {
             body.push(parseTag(next, tokens, filename, source));
         }
     }
@@ -194,7 +194,6 @@ function parseComponentBody(tokens, filename, source) {
                 let item, list = "";
 
                 if (isLoop) {
-                    // loop list item {
                     const loopTokens = [];
                     while (tokens.length > 0 && tokens[0].value !== '{') {
                         loopTokens.push(tokens.shift());
@@ -203,7 +202,6 @@ function parseComponentBody(tokens, filename, source) {
                     item = loopTokens.pop().value;
                     list = loopTokens.map(t => (t.type === 'STRING' ? `"${t.value.replace(/"/g, '')}"` : t.value)).join('');
                 } else {
-                    // for item in list {
                     item = tokens.shift().value;
                     if (tokens[0] && tokens[0].value === 'in') tokens.shift();
                     while (tokens.length > 0 && tokens[0].value !== '{') {
@@ -235,7 +233,12 @@ function parseComponentBody(tokens, filename, source) {
                 }
                 children.push({ type: 'tag', name: 'a', attributes: attrs, content: txt });
             } else if (next.type === 'IDENTIFIER' || next.type === 'KEYWORD') {
-                children.push(parseTag(next, tokens, filename, source));
+                if (['class', 'id', 'style'].includes(next.value)) {
+                    // Skip attribute-like identifiers inside bodies to prevent malformed HTML tags
+                    if (tokens[0] && (tokens[0].type === 'STRING' || tokens[0].type === 'IDENTIFIER')) tokens.shift();
+                } else {
+                    children.push(parseTag(next, tokens, filename, source));
+                }
             }
         }
         if (tokens[0] && tokens[0].value === '}') tokens.shift();
@@ -251,13 +254,11 @@ function parseTag(token, tokens, filename, source) {
 
     while (tokens.length > 0) {
         const next = tokens[0];
-        // Break on braces or other symbols (except - for identifiers)
         if (next.value === '{' || next.value === '}' || (next.type === 'SYMBOL' && next.value !== '-' && next.value !== '=')) break;
 
         const attrNameToken = tokens.shift();
         const attrName = attrNameToken.value;
 
-        // Skip = if present
         if (tokens[0] && tokens[0].value === '=') tokens.shift();
 
         if (tokens[0] && tokens[0].value === '{') {
@@ -318,7 +319,11 @@ function parseTag(token, tokens, filename, source) {
                 }
                 children.push({ type: 'tag', name: 'a', attributes: attrs, content: txt });
             } else if (next.type === 'IDENTIFIER' || next.type === 'KEYWORD') {
-                children.push(parseTag(next, tokens, filename, source));
+                if (['class', 'id', 'style'].includes(next.value)) {
+                    if (tokens[0] && (tokens[0].type === 'STRING' || tokens[0].type === 'IDENTIFIER')) tokens.shift();
+                } else {
+                    children.push(parseTag(next, tokens, filename, source));
+                }
             }
         }
         if (tokens[0] && tokens[0].value === '}') tokens.shift();
@@ -347,18 +352,16 @@ function parseAction(tokens, source) {
     let name = nameToken.value;
     let params = [];
 
-    // Support for parameterized actions: action myAction(id, name) { ... }
     if (tokens[0] && tokens[0].value === '(') {
-        tokens.shift(); // consume '('
+        tokens.shift();
         while (tokens.length > 0 && tokens[0].value !== ')') {
             const pt = tokens.shift();
             if (pt.value !== ',') {
                 params.push(pt.value);
             }
         }
-        if (tokens[0] && tokens[0].value === ')') tokens.shift(); // consume ')'
+        if (tokens[0] && tokens[0].value === ')') tokens.shift();
     } else if (name.includes('(')) {
-        // Handle case where lexer smushed it together: myAction(id)
         const parts = name.split('(');
         name = parts[0];
         const argPart = parts[1].replace(')', '');

package/package.json

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

package/runtime/cluster.js

@@ -11,7 +11,7 @@ class ClusterManager {
     static ignite(startServerCallback) {
         if (cluster.isMaster || cluster.isPrimary) {
             const numCPUs = os.cpus().length;
-            console.log(`\n🛡️  Free Engine Cluster Manager Intercepting...`);
+            console.log(`\n🛡️  [High-Octane] Free Engine Cluster Manager Intercepting...`);
             console.log(`🔥 Igniting ${numCPUs} Worker Processes natively...\n`);
 
             for (let i = 0; i < numCPUs; i++) {
@@ -19,15 +19,15 @@ class ClusterManager {
             }
 
             cluster.on('exit', (worker, code, signal) => {
-                console.error(`❌ Worker ${worker.process.pid} died (Code: ${code}). Resurrecting...`);
-                cluster.fork(); // Auto-healing
+                console.error(`⚠️  [Resilience] Worker ${worker.process.pid} died (Code: ${code}). Resurrecting immediately...`);
+                cluster.fork(); // Auto-healing for 99.9% uptime
             });
 
-            console.log(`✅ Master Process PID: ${process.pid} is routing traffic.`);
+            console.log(`✅ [Convergence] Master Process PID: ${process.pid} is routing traffic.`);
         } else {
             // Workers share the TCP connection in Node.js Cluster mode
             startServerCallback();
-            console.log(`   └─ Worker PID: ${process.pid} ready for combat.`);
+            console.log(`   └─ [Active] Worker PID: ${process.pid} ready for combat.`);
         }
     }
 }

package/runtime/middleware/firewall.js

@@ -0,0 +1,38 @@
+/**
+ * runtime/middleware/firewall.js
+ * High-Performance Framework Firewall for Free Ultra v5.0.0.
+ * Protects against malicious bots, scrapers, and rapid-fire signatures.
+ */
+
+const BLOCKED_AGENTS = [
+    'sqlmap', 'nikto', 'dirbuster', 'gobuster', 'nmap', 'masscan',
+    'dotbot', 'rogerbot', 'baiduspider', 'ahrefsbot'
+];
+
+const MALICIOUS_PATTERNS = [
+    /\.\.\//,                // Directory traversal
+    /<script/i,              // XSS attempt
+    /union\s+select/i,       // SQL Injection
+    /OR\s+1=1/i,             // SQL Injection
+    /etc\/passwd/i,          // Linux system file access
+    /cmd\.exe/i             // Windows command execution
+];
+
+module.exports = function firewallMiddleware(req, res, next) {
+    const userAgent = (req.headers['user-agent'] || '').toLowerCase();
+
+    // 1. Check User-Agent Blacklist
+    if (BLOCKED_AGENTS.some(agent => userAgent.includes(agent))) {
+        console.warn(`[Firewall] 🛡️ Blocked Malicious Agent: ${userAgent}`);
+        return res.status(403).json({ success: false, error: 'Firewall Breach: Access Denied' });
+    }
+
+    // 2. Scan URL and Query for Malicious Patterns
+    const fullUrl = req.url + (req.query_string || '');
+    if (MALICIOUS_PATTERNS.some(regex => regex.test(fullUrl))) {
+        console.warn(`[Firewall] 🛡️ Blocked Malicious Request Pattern: ${req.url}`);
+        return res.status(403).json({ success: false, error: 'Firewall Breach: Invalid Signature detected' });
+    }
+
+    next();
+};

package/runtime/server.js

@@ -10,13 +10,16 @@ const fs = require('fs');
 const crypto = require('crypto');
 const securityMiddleware = require('./middleware/security');
 const maintenanceMiddleware = require('./middleware/maintenance');
+const firewallMiddleware = require('./middleware/firewall');
 
 const { LRUCache } = require('lru-cache');
 
 class FreeServer {
     constructor() {
-        console.log(`[Free Engine] ⚙️  Runtime Core v4.8.11 initializing...`);
-        this.app = new HyperExpress.Server();
+        console.log(`[Free Engine] ⚙️  Runtime Core v5.0.0 [Convergence] initializing...`);
+        this.app = new HyperExpress.Server({
+            compression: true
+        });
         this.viewsPath = process.env.VIEWS_PATH || nodePath.join(process.cwd(), 'views');
         this.namedMiddlewares = {};
         this.errorViews = {};
@@ -109,6 +112,7 @@ class FreeServer {
         });
 
         // Apply Global Middleware
+        this.app.use(firewallMiddleware); // Firewall First
         this.app.use(maintenanceMiddleware);
         this.app.use(securityMiddleware);
 

package/templates/app-template/app/controllers/ProductController.free

@@ -0,0 +1,31 @@
+/**
+ * Product Controller (v5.0.0 [Convergence])
+ * Unified Logic for API and Web
+ */
+
+action index {
+    // Laravel-style Collection logic
+    const data = await ORM.all('Product');
+    return { success: true, data };
+}
+
+action show {
+    const item = await ORM.find('Product', { id: params.id });
+    return { success: !!item, data: item };
+}
+
+action store {
+    // Validation logic here
+    const newItem = await ORM.create('Product', body);
+    return { success: true, id: newItem.id };
+}
+
+action update {
+    await ORM.update('Product', { id: params.id }, body);
+    return { success: true };
+}
+
+action delete {
+    await ORM.delete('Product', { id: params.id });
+    return { success: true };
+}

package/templates/app-template/app/models/Product.free

@@ -0,0 +1,12 @@
+// Free Ultra Enterprise Model: Product
+// Optimized for SQLite / ORM v5.0.0
+
+model Product {
+    id integer primary_key autoincrement
+    uuid string unique
+    name string index
+    email string unique
+    status string default('active')
+    created_at timestamp default(now)
+    updated_at timestamp default(now)
+}

package/templates/app-template/package.json

@@ -8,7 +8,7 @@
     "build": "free build"
   },
   "dependencies": {
-    "free-framework": "latest",
+    "free-framework": "^5.0.1",
     "hyper-express": "^6.14.0",
     "knex": "^3.1.0",
     "mysql2": "^3.9.2",

package/templates/app-template/public/free-runtime.js

@@ -0,0 +1 @@
+(()=>{var _=(s,i)=>()=>(i||s((i={exports:{}}).exports,i),i.exports);var g=_(()=>{(function(){console.log("\u{1F48E} Free Ultra Engine Activated");let s=document.getElementById("free-app-root"),i=document.createElement("div");i.id="free-loader",Object.assign(i.style,{position:"fixed",top:"0",left:"0",height:"3px",width:"0%",backgroundColor:"#00ff88",zIndex:"10000",transition:"width 0.3s ease, opacity 0.3s ease",boxShadow:"0 0 10px #00ff88"}),document.body.appendChild(i);function f(o){i.style.opacity="1",i.style.width=o+"%",o>=100&&setTimeout(()=>{i.style.opacity="0",setTimeout(()=>i.style.width="0%",300)},300)}async function d(o,t=!0){f(30);try{let e=await fetch(o,{headers:{"X-Free-Partial":"true"}});if(f(70),!e.ok)throw new Error("Navigation failed");let r=await e.json();s.style.opacity="0",s.style.transform="translateY(10px)",s.style.transition="opacity 0.2s ease, transform 0.2s ease",setTimeout(()=>{s.innerHTML=r.content,document.title=r.title,t&&history.pushState({url:o},r.title,o),u(),s.style.opacity="1",s.style.transform="translateY(0)",f(100),window.scrollTo(0,0)},200)}catch(e){console.error("SPA Error:",e),window.location.href=o}}function u(){document.querySelectorAll(".free-component[data-component]").forEach(t=>{if(t.getAttribute("data-hydrated"))return;let e=t.getAttribute("data-component"),r=JSON.parse(t.getAttribute("data-state")||"{}"),a=t.getAttribute("data-free-on-mount"),n=t.getAttribute("data-free-on-destroy");if(a&&window.__free_actions&&window.__free_actions[e]&&window.__free_actions[e][a])try{window.__free_actions[e][a](r)}catch(c){console.error(`[onMount] ${e}:`,c)}if(t.querySelectorAll("*").forEach(c=>{for(let l of c.attributes)if(l.name.startsWith("data-on-")){let w=l.name.replace("data-on-",""),m=l.value;c.addEventListener(w,h=>{let y=l.value;if(window.__free_actions&&window.__free_actions[e]&&window.__free_actions[e][y])try{window.__free_actions[e][y](r,h),t.setAttribute("data-state",JSON.stringify(r))}catch(p){console.error(`[Action] ${e} (${w}):`,p)}else console.warn(`Missing action handler for ${y} on ${w}`)})}}),t.setAttribute("data-hydrated","true"),n){let c=new MutationObserver(l=>{l.forEach(w=>{w.removedNodes.forEach(m=>{if(m===t){if(window.__free_actions&&window.__free_actions[e]&&window.__free_actions[e][n])try{window.__free_actions[e][n](r)}catch(h){console.error(`[onDestroy] ${e}:`,h)}c.disconnect()}})})});c.observe(t.parentNode,{childList:!0})}})}document.addEventListener("click",o=>{let t=o.target.closest("a");if(t&&t.href&&t.href.startsWith(window.location.origin)){let e=new URL(t.href);(e.pathname!==window.location.pathname||e.search!==window.location.search)&&(o.preventDefault(),d(t.href))}}),document.addEventListener("submit",async o=>{let t=o.target;if(t&&t.action&&t.action.startsWith(window.location.origin)){o.preventDefault(),f(30);let e=new FormData(t),r=Object.fromEntries(e.entries());try{let a=await fetch(t.action,{method:t.method||"POST",headers:{"Content-Type":"application/json","X-Free-Partial":"true"},body:JSON.stringify(r),redirect:"follow"});if(f(70),a.redirected){d(a.url);return}if(!a.ok){let n="An error occurred";try{n=(await a.json()).error||n}catch{}t.action.includes("/api/login")?d("/login?error="+encodeURIComponent(n)):d(window.location.pathname+"?error="+encodeURIComponent(n));return}try{let n=await a.json();n&&n.content?(s.style.opacity="0",setTimeout(()=>{s.innerHTML=n.content,n.title&&(document.title=n.title),u(),s.style.opacity="1",f(100)},200)):n&&n.success&&d(window.location.pathname+window.location.search)}catch{window.location.reload()}}catch(a){console.error("Form submit failed:",a),t.submit()}}},!0),window.addEventListener("popstate",o=>{o.state&&o.state.url&&d(o.state.url,!1)}),window.Free={navigate:d,async call(o,t={}){let e=document.querySelector('meta[name="csrf-token"]')?.getAttribute("content");try{let r=await fetch(`/_free/action/${o}`,{method:"POST",headers:{"Content-Type":"application/json","X-CSRF-Token":e},body:JSON.stringify(t)}),a=await r.json();if(!r.ok)throw new Error(a.error||"Action failed");return a}catch(r){throw console.error(`\u274C Action Error [${o}]:`,r.message),r}}},document.readyState==="loading"?document.addEventListener("DOMContentLoaded",u):u()})()});g();})();

package/templates/app-template/resources/components/ProductCard.free

@@ -0,0 +1,16 @@
+/**
+ * Component: ProductCard
+ * High-performance Interactive Island
+ */
+
+component ProductCard {
+    let status = state("idle");
+
+    div class="p-4 border border-zinc-800 rounded-xl" {
+        span { text "Status: " + status }
+        button class="ml-4 px-3 py-1 bg-white text-black text-xs font-bold" 
+                onClick={() => status = "active"} {
+            text "Activate"
+        }
+    }
+}

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

@@ -3,15 +3,12 @@ component Counter {
         count: 0
     }
 
-    div {
-        class "p-4 bg-gray-800 rounded-lg text-center"
+    div class="p-4 bg-gray-800 rounded-lg text-center" {
         h2 { text "Reactive Counter" }
-        p { 
-            class "text-4xl font-black text-primary my-4"
+        p class="text-4xl font-black text-primary my-4" { 
             text "{count}" 
         }
-        button {
-            class "px-6 py-2 bg-primary text-dark font-bold rounded-full hover:scale-105 transition-transform"
+        button class="px-6 py-2 bg-primary text-dark font-bold rounded-full hover:scale-105 transition-transform" {
             text "Increment"
             on-click { state.count++ }
         }

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

@@ -2,7 +2,7 @@ component Docs {
     div class="min-h-screen bg-black text-zinc-300 font-sans selection:bg-white selection:text-black" {
         // Navigation / Header Space
         div class="container-pro pt-32 pb-20" {
-            span class="badge-pro mb-4 animate-pulse" { text "v4.8.10 | Cloud Docs" }
+            span class="badge-pro mb-4 animate-pulse" { text "v5.0.1 | High-Octane Docs" }
             h1 class="text-6xl md:text-8xl font-black text-white tracking-tighter mb-8 leading-none" {
                 text "Free Ultra"
                 br;
@@ -22,7 +22,6 @@ component Docs {
         // Content Sections
         div class="container-pro space-y-32 pb-40" {
             
-            // 1. Core Philosophy
             section id="philosophy" {
                 div class="grid md:grid-cols-2 gap-16 items-start" {
                     div {
@@ -35,26 +34,30 @@ component Docs {
                             text " to ensure your pages load instantly while remaining fully interactive."
                         }
                         ul class="space-y-4 text-sm" {
-                            li class="flex gap-3" { span class="text-white" { text "•" } text "Blazing-fast SSR powered by HyperExpress." }
-                            li class="flex gap-3" { span class="text-white" { text "•" } text "Selective Hydration: Only JavaScript that's needed enters the browser." }
-                            li class="flex gap-3" { span class="text-white" { text "•" } text "Unified Syntax: The .free language unifies HTML, CSS, and Logic." }
+                            li class="flex gap-3" {
+                                span class="text-white" { text "•" }
+                                text "Blazing-fast SSR powered by HyperExpress."
+                            }
+                            li class="flex gap-3" {
+                                span class="text-white" { text "•" }
+                                text "Selective Hydration: Only JavaScript that's needed enters the browser."
+                            }
+                            li class="flex gap-3" {
+                                span class="text-white" { text "•" }
+                                text "Unified Syntax: The .free language unifies HTML, CSS, and Logic."
+                            }
                         }
                     }
                     div class="card-pro bg-zinc-900/20" {
                         pre {
                             code {
-                                text "// Pure Performance\n"
-                                text "component Fast {\n"
-                                text "  h1 { text 'Zero Delay' }\n"
-                                text "  // Static by default\n"
-                                text "}"
+                                text "// Pure Performance\ncomponent Fast { \n  h1 { text 'Zero Delay' }\n  // Static by default\n}\n"
                             }
                         }
                     }
                 }
             }
 
-            // 2. The Free Language
             section id="language" {
                 h2 class="text-4xl font-bold text-white mb-12 tracking-tight" { text "2. The .free Language" }
                 div class="grid md:grid-cols-3 gap-8" {
@@ -85,7 +88,6 @@ component Docs {
                 }
             }
 
-            // 3. Routing & ORM
             section id="orm" {
                 div class="grid md:grid-cols-2 gap-16" {
                     div {
@@ -109,18 +111,13 @@ component Docs {
                     div class="card-pro bg-zinc-950" {
                         pre {
                             code {
-                                text "get \"/dashboard\" -> Dashboard\n\n"
-                                text "post \"/api/login\" {\n"
-                                text "  const user = await ORM.find('User', { email: body.email });\n"
-                                text "  return { success: !!user };\n"
-                                text "}"
+                                text "get /dashboard -> Dashboard\n\npost /api/login { \n  const user = await ORM.find('User', { email: body.email });\n  return { success: !!user };\n}"
                             }
                         }
                     }
                 }
             }
 
-            // 4. CLI Power-user
             section id="cli" {
                 h2 class="text-4xl font-bold text-white mb-12 tracking-tight" { text "4. CLI Power-user Guide" }
                 div class="grid grid-cols-1 md:grid-cols-2 gap-4" {
@@ -147,15 +144,15 @@ component Docs {
                 }
             }
 
-            // 5. IDE Extensions
             section id="vscode" {
                 div class="bg-zinc-900/10 border border-zinc-800 rounded-3xl p-12" {
                     h2 class="text-4xl font-bold text-white mb-8 tracking-tight" { text "5. IDE Ecosystem" }
-                    
                     div class="grid md:grid-cols-2 gap-12" {
                         div {
                             h3 class="text-2xl font-bold text-white mb-4" { text "Visual Studio Code" }
-                            p class="mb-6 text-sm" { text "Get syntax highlighting, auto-completion, and deep linting for .free files." }
+                            p class="mb-6 text-sm" {
+                                text "Get syntax highlighting, auto-completion, and deep linting for .free files."
+                            }
                             div class="space-y-4" {
                                 a href="https://marketplace.visualstudio.com/items?itemName=dev-omartolba.free-vscode" class="block text-zinc-400 hover:text-white transition-colors flex items-center gap-2" {
                                     text "→ Install from VS Marketplace"
@@ -181,20 +178,13 @@ component Docs {
             }
         }
 
-        // Footer
         footer class="border-t border-zinc-900 py-20" {
             div class="container-pro text-center" {
                 p class="text-sm text-zinc-600" {
                     text "Free Ultra Framework © 2026. Built for professionals. "
                     a href="https://omar-fathy.xyz/free-docs/guide.php" class="text-zinc-400 hover:text-white" { text "Official Encyclopedia" }
                 }
-            </div>
-        }
-    }
-
-    style {
-        html { scroll-behavior: smooth; }
-        .hero-title { background: linear-gradient(to right, #fff, #555); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
-        .badge-pro { display: inline-block; }
+            }
+        </footer>
     }
 }

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

@@ -17,7 +17,7 @@ component Header {
 
       div class="flex items-center gap-4" {
         span class="badge-pro" {
-          text "v4.8.7"
+          text "v5.0.1"
         }
         if (props.user) {
           a href="/logout" class="text-sm font-medium text-white hover:opacity-80 transition-opacity" { 

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

@@ -1,67 +1,92 @@
 component Home {
-  main class="pt-32 pb-40 overflow-hidden" {
-    // Hero
-    section class="container-pro text-center pt-24 pb-20" {
-      div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-border bg-zinc-900/50 text-[11px] font-bold text-zinc-500 mb-8" {
-        span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" { }
-        text "VERSION 4.8.10 IS NOW LIVE"
-      }
-
-      h1 class="hero-title" { 
-        text "The Engine for"
-        br { }
-        span class="text-zinc-600" { text "High-Performance." }
-      }
-      
-      p class="text-xl md:text-2xl text-zinc-500 max-w-3xl mx-auto mb-12 leading-relaxed font-medium" {
-        text "Experience the future of SSR with Islands Architecture, built-in Reactive state, and Enterprise-grade security. Small footprint, infinite power."
-      }
+  main class="min-h-screen bg-black text-white selection:bg-primary/30" {
+    
+    // Taskfy-themed Aura Background
+    div class="fixed inset-0 pointer-events-none opacity-20 overflow-hidden" {
+        div class="absolute -top-1/4 -left-1/4 w-1/2 h-1/2 bg-primary blur-[160px] rounded-full animate-pulse" { }
+        div class="absolute -bottom-1/4 -right-1/4 w-1/2 h-1/2 bg-blue-600 blur-[160px] rounded-full" { }
+    }
 
-      div class="flex flex-wrap justify-center gap-5" {
-        a href="https://omar-fathy.xyz/free-docs/guide.php" class="btn-pro" {
-          text "Read Encyclopedia"
-          svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" {
-            path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.247 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253" { }
-          }
-        }
-        a href="https://github.com/dev-omartolba" class="btn-outline" {
-          text "View Source"
+    // Navigation Header
+    header class="fixed top-0 w-full z-50 px-8 py-6 backdrop-blur-md border-b border-white/5" {
+        div class="max-w-7xl mx-auto flex justify-between items-center" {
+            div class="text-xl font-black italic tracking-tighter" {
+                text "FREE "
+                span class="text-primary" { text "ULTRA" }
+            }
+            div class="flex gap-8 items-center text-[10px] font-bold uppercase tracking-widest text-zinc-500" {
+                a href="#" class="hover:text-white transition-colors" { text "Engine" }
+                a href="#" class="hover:text-white transition-colors" { text "Ecosystem" }
+                a href="https://omar-fathy.xyz/free-docs/guide.php" class="px-5 py-2 bg-white text-black rounded-lg hover:bg-primary hover:text-white transition-all shadow-xl shadow-white/5" { 
+                    text "Read Encyclopedia" 
+                }
+            }
         }
-      }
+    }
+
+    // Hero Section: The Taskfy Portal Entrance
+    section class="relative pt-48 pb-32 px-8 overflow-hidden" {
+        div class="max-w-5xl mx-auto text-center relative z-10" {
+            div class="inline-block px-4 py-1 rounded-full bg-primary/20 border border-primary/30 mb-8" {
+                span class="text-[9px] font-black tracking-[.4em] uppercase text-primary" { text "Aura v5.0.1 High-Octane" }
+            }
+            h1 class="text-7xl md:text-9xl font-black tracking-tighter leading-none mb-10" {
+                text "The Taskfy"
+                br { }
+                span class="italic text-transparent bg-clip-text bg-gradient-to-r from-primary to-blue-400" { text "Ecosystem." }
+            }
+            p class="text-xl md:text-2xl text-zinc-500 max-w-3xl mx-auto mb-16 font-medium leading-relaxed" {
+                text "Welcome to the future of high-performance engineering. Free Ultra merges Laravel's elegance, React's reactivity, and Node.js speed into one world-class engine."
+            }
 
-      div class="mt-24 max-w-4xl mx-auto relative" {
-        div class="absolute -inset-1 bg-gradient-to-r from-zinc-800 to-zinc-900 rounded-2xl blur opacity-20" { }
-        pre class="relative" {
-          code { text "$ npx free-framework@latest new my-project" }
+            div class="flex flex-wrap justify-center gap-6" {
+                a href="/taskfy" class="px-10 py-5 bg-primary text-white font-black uppercase tracking-widest text-xs rounded-2xl shadow-2xl shadow-primary/40 hover:scale-105 transition-all" {
+                    text "Enter Portal"
+                }
+                a href="https://github.com/dev-omartolba" class="px-10 py-5 border border-white/10 text-zinc-500 font-bold uppercase tracking-widest text-xs rounded-2xl hover:bg-white/5 transition-all" {
+                    text "Signal Terminal"
+                }
+            }
         }
-      }
     }
 
-    // Features
-    section class="container-pro pt-32" {
-      div class="grid md:grid-cols-3 gap-8" {
-        div class="card-pro" {
-          div class="w-10 h-10 rounded-lg bg-zinc-900 border border-border flex items-center justify-center mb-6" {
-            text "⚡"
-          }
-          h3 class="text-xl font-bold mb-3" { text "Speed" }
-          p class="text-base text-zinc-500 leading-relaxed" { text "Zero-overhead runtime powered by HyperExpress for sub-millisecond responses." }
+    // Infrastructure Visualizer
+    section class="py-32 px-8 relative" {
+        div class="max-w-7xl mx-auto grid md:grid-cols-3 gap-12" {
+            div class="p-10 rounded-3xl bg-zinc-950 border border-white/5 group hover:border-primary/50 transition-all" {
+                div class="text-primary text-4xl mb-6" { text "⚙️" }
+                h3 class="text-2xl font-black mb-4 italic tracking-tighter" { text "Convergence Core" }
+                p class="text-zinc-500 leading-relaxed" { 
+                    text "A unified runtime that automatically optimizes your components using industry-standard patterns from the Big Three." 
+                }
+            }
+            div class="p-10 rounded-3xl bg-zinc-950 border border-white/5 group hover:border-primary/50 transition-all transform md:translate-y-12" {
+                div class="text-primary text-4xl mb-6" { text "🛡️" }
+                h3 class="text-2xl font-black mb-4 italic tracking-tighter" { text "Aura Firewall" }
+                p class="text-zinc-500 leading-relaxed" { 
+                    text "Real-time threat detection and surgical request filtering embedded directly into the framework's heartbeat." 
+                }
+            }
+            div class="p-10 rounded-3xl bg-zinc-950 border border-white/5 group hover:border-primary/50 transition-all" {
+                div class="text-primary text-4xl mb-6" { text "🚀" }
+                h3 class="text-2xl font-black mb-4 italic tracking-tighter" { text "Hyper Speed" }
+                p class="text-zinc-500 leading-relaxed" { 
+                    text "Native Brotli compression and uWebSockets.js integration deliver sub-millisecond response times under heavy load." 
+                }
+            }
         }
-        div class="card-pro" {
-          div class="w-10 h-10 rounded-lg bg-zinc-900 border border-border flex items-center justify-center mb-6" {
-            text "🏝️"
-          }
-          h3 class="text-xl font-bold mb-3" { text "Islands" }
-          p class="text-base text-zinc-500 leading-relaxed" { text "Partial hydration logic that ships minimal JavaScript for maximum SEO benefits." }
-        }
-        div class="card-pro" {
-          div class="w-10 h-10 rounded-lg bg-zinc-900 border border-border flex items-center justify-center mb-6" {
-            text "🛡️"
-          }
-          h3 class="text-xl font-bold mb-3" { text "Security" }
-          p class="text-base text-zinc-500 leading-relaxed" { text "Built-in DDoS protection, CSRF guards, and secure-by-default environment." }
+    }
+
+    footer class="py-20 border-t border-white/5 text-center" {
+        p class="text-[10px] font-black uppercase tracking-[.6em] text-zinc-700" {
+            text "FREE ULTRA © 2026. ALL PROTOCOLS VERIFIED."
         }
-      }
+    }
+
+    style {
+        h1 { text-shadow: 0 20px 80px rgba(59, 130, 246, 0.2); }
+        .bg-primary { background-color: #3b82f6; }
+        .text-primary { color: #3b82f6; }
     }
   }
 }

package/templates/app-template/routes/web.free

@@ -14,15 +14,15 @@
 */
 
 // A simple GET request that renders the 'Home' view component
-get "/" -> Home
+Get "/" -> Home
 
 // Documentation & Authentication
-get "/docs" -> Docs
-get "/login" -> Login
+Get "/docs" -> Docs
+Get "/login" -> Login
 
 // Example of a route that points to a dedicated controller logic before rendering
 // Ensure the 'Dashboard' view is defined in resources/views
-get "/dashboard" {
+Get "/dashboard" {
   // Calling an action/controller before returning the view
   // The controller should handle checking if the user is authenticated
   return Dashboard;