free-framework 5.0.0 → 5.0.1

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`;
-
-    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// Components (Islands Animation)\n";
+    Object.keys(components).forEach(name => {
+        output += generateComponentCode(components[name]);
     });
 
-    // ── 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)));
-        }
+    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`;
     });
-}
-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,23 +293,17 @@ function generateTagCode(tag, stateNames) {
     code += `    html += ">";\n`;
 
     if (tag.content) {
-        let cont = tag.content.replace(/`/g, '\\`').replace(/\$/g, '\\$');
-        // Robust interpolation: only match expressions that don't contain nested braces or backslashes
-        cont = cont.replace(/(?<!\\)\{([^\\{}]+)\}/g, (_, p) => {
-            const trimmed = p.trim();
-            const parts = trimmed.split('.');
-            if (stateNames.includes(parts[0])) {
-                return `\${e(state["${parts[0]}"]${parts.slice(1).map(part => `?.["${part}"]`).join('')})}`;
-            }
-            // If it's not a state variable, just treat it as a JS expression
-            return `\${e(${p})}`;
-        });
-        // Remove escape characters from \{ and \}
-        cont = cont.replace(/\\\{/g, '{').replace(/\\\}/g, '}');
-        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": "5.0.0",
+  "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/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/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 "\}\n"
-                                }
+                    div class="card-pro bg-zinc-900/20" {
+                        pre {
+                            code {
+                                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>
     }
 }