free-framework 4.8.11 → 5.0.0

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

@@ -0,0 +1,1555 @@
+require('dotenv').config();
+const { FreeServer, Model, ORM, ClusterManager, AuthPlugin, UploadPlugin, ChatPlugin } = require('free-framework');
+const crypto = require('crypto');
+const bcrypt = require('bcryptjs');
+const jwt = require('jsonwebtoken');
+const fs = require('fs');
+const path = require('path');
+const { minify } = require('html-minifier-terser');
+// Enterprise Services (Global Inject)
+let Validator, Storage;
+try { Validator = require(path.join(process.cwd(), 'app/Services/Validator.js')); } catch(e) {}
+try { Storage = require(path.join(process.cwd(), 'app/Services/Storage.js')); } catch(e) {}
+const server = new FreeServer();
+
+// Models
+const modelsRegistry = {};
+class User extends Model {}
+User.fields = [{"name":"name","type":"string"},{"name":"email","type":"string","unique":true},{"name":"password","type":"string"},{"name":"role","type":"string","default":"user"},{"name":"timestamps","type":"directive"}];
+modelsRegistry['User'] = User;
+server.use(ChatPlugin());
+
+server.app.post("/_free/action/register", 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 () => {
+          // 1. Validate incoming data
+  const { name, email, password } = body;
+  if (!name || !email || !password) {
+    throw new Error("Missing required fields: name, email, password");
+  }
+
+  // 2. Hash the password using bcrypt dynamically
+  // The salt rounds are pulled from config (defaults to 10 for performance/security balance)
+  const bcrypt = require('bcryptjs');
+  const authConfig = require('../../config/auth');
+  const hashedPassword = await bcrypt.hash(password, authConfig.bcrypt_rounds || 10);
+
+  // 3. Save the new user to the database
+  // The ORM's 'create' method automatically sanitizes inputs to prevent SQL Injection
+  const user = await User.create( { name, email, password: hashedPassword });
+
+  // 4. Generate the JWT stateless token
+  const jwt = require('jsonwebtoken');
+  const payload = { id: user.id, email: user.email, role: user.role };
+  const secret = authConfig.jwt_secret;
+  const options = { expiresIn: authConfig.jwt_expires_in || '7d' };
+
+  const token = jwt.sign(payload, secret, options);
+
+  // 5. Return success. CRITICAL: Never return the password hash in the response!
+  return {
+    success: true,
+    message: "User registered securely.",
+    token,
+    user: { id: user.id, name: user.name, email: user.email }
+    };
+        })();
+        if (!res.headersSent) res.json({ success: true, result });
+    } catch(e) {
+        if (!res.headersSent) res.status(500).json({ success: false, error: e.message });
+    }
+});
+
+server.app.post("/_free/action/login", 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 () => {
+          // 1. Validate inputs
+    const { email, password } = body;
+    if (!email || !password) {
+      throw new Error("Missing credentials");
+    }
+
+    // 2. Look up the user by email (SQL Injection Proof via ORM query builder)
+    const userQuery = await User.query().where( { email }).get();
+    const user = userQuery[0];
+
+    if (!user) {
+      throw new Error("Invalid credentials");
+    }
+
+    // 3. Prevent Timing Attacks & Verify Hash
+    // We strictly use bcrypt.compare instead of manual string comparison
+    const bcrypt = require('bcryptjs');
+    const isMatch = await bcrypt.compare(password, user.password);
+
+    if (!isMatch) {
+      throw new Error("Invalid credentials");
+    }
+
+    // 4. Issue the secure JWT Token
+    const authConfig = require('../../config/auth');
+    const jwt = require('jsonwebtoken');
+    const token = jwt.sign(
+      { id: user.id, email: user.email, role: user.role },
+      authConfig.jwt_secret,
+      { expiresIn: authConfig.jwt_expires_in || '7d' }
+      );
+
+      // 5. Return the payload for the frontend to store (e.g., in localStorage or cookies)
+      return {
+        success: true,
+        token,
+        user: { id: user.id, name: user.name, email: user.email }
+        };
+        })();
+        if (!res.headersSent) res.json({ success: true, result });
+    } catch(e) {
+        if (!res.headersSent) res.status(500).json({ success: false, error: e.message });
+    }
+});
+
+const scopedCSS = ".free-component[data-component=Dashboard]{background:#f3f4f6;min-height:100vh}.card{background:#fff;padding:1.5rem;border-radius:.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.card{background:#fff;padding:1.5rem;border-radius:.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}";
+
+server.renderRegistry = {
+    Counter: renderCounter,
+    Dashboard: renderDashboard,
+    Docs: renderDocs,
+    Header: renderHeader,
+    Home: renderHome,
+    Login: renderLogin
+};
+
+server.middleware((req, res, next) => {
+    if (!res.context) res.context = {};
+    res.context.csrfToken = crypto.randomBytes(32).toString('hex');
+    next();
+});
+
+function renderCounter(props = { }, helpers = { }) {
+    const e = (str) => String(str).replace(/[&<>'"]/g, m => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' }[m]));
+    const state = {
+        "count": "0",
+    };
+    const { count } = state;
+    const _events = [];
+    const islandAttr = true ? ' data-component="Counter"' : '';
+    let html = "<div class='free-component'" + islandAttr + " data-state='" + JSON.stringify(state).replace(/'/g, "&#39;") + "'";
+    html += ">";
+    html += "<div";
+    html += ">";
+    html += "<class";
+    html += " " + "\"p-4 bg-gray-800 rounded-lg text-center\"" + "='" + `h2` + "'";
+    html += ">";
+    html += `Reactive Counter`;
+    html += "</class>";
+    html += "<p";
+    html += ">";
+    html += "<class";
+    html += " " + "\"text-4xl font-black text-primary my-4\"" + "='" + `text` + "'";
+    html += " " + "\"{count}\"" + "='" + `true` + "'";
+    html += ">";
+    html += "</class>";
+    html += "</p>";
+    html += "<button";
+    html += ">";
+    html += "<class";
+    html += " " + "\"px-6 py-2 bg-primary text-dark font-bold rounded-full hover:scale-105 transition-transform\"" + "='" + `text` + "'";
+    html += " " + "\"Increment\"" + "='" + `on-click` + "'";
+    html += ">";
+    html += "<state";
+    html += ">";
+    html += "</state>";
+    html += "<count";
+    html += ">";
+    html += "</count>";
+    html += "</class>";
+    html += "</button>";
+    html += "</div>";
+    html += "<script>window.__free_actions = window.__free_actions || {}; window.__free_actions['Counter'] = {};";
+    _events.forEach(ev => {
+        html += "window.__free_actions['Counter'][ev.id] = " + ev.fn.toString() + ";";
+    });
+    html += "</script>";
+    html += "</div>";
+    return html;
+}
+
+function renderDashboard(props = { }, helpers = { }) {
+    const e = (str) => String(str).replace(/[&<>'"]/g, m => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' }[m]));
+    const state = {
+    };
+    const _events = [];
+    const islandAttr = false ? ' data-component="Dashboard"' : '';
+    let html = "<div class='free-component'" + islandAttr + " data-state='" + JSON.stringify(state).replace(/'/g, "&#39;") + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `dashboard-container` + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `max-w-4xl mx-auto` + "'";
+    html += ">";
+    html += "<h1";
+    html += " " + "class" + "='" + `text-3xl font-bold mb-6 text-gray-800` + "'";
+    html += ">";
+    html += `Secure Dashboard`;
+    html += "</h1>";
+    html += "<div";
+    html += " " + "class" + "='" + `card` + "'";
+    html += ">";
+    html += "<h2";
+    html += " " + "class" + "='" + `text-xl font-semibold mb-2` + "'";
+    html += ">";
+    html += `System Status`;
+    html += "</h2>";
+    html += "<p";
+    html += " " + "class" + "='" + `text-gray-600` + "'";
+    html += ">";
+    html += `If you are seeing this, your enterprise framework was successfully generated and routed!`;
+    html += "</p>";
+    html += "<p";
+    html += " " + "class" + "='" + `text-sm mt-4 text-gray-400` + "'";
+    html += ">";
+    html += `Tip: Check routes/web.free and app/Http/Controllers to see how this page operates.`;
+    html += "</p>";
+    html += "</div>";
+    html += "</div>";
+    html += "</div>";
+    html += "</div>";
+    return html;
+}
+
+function renderDocs(props = { }, helpers = { }) {
+    const e = (str) => String(str).replace(/[&<>'"]/g, m => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' }[m]));
+    const state = {
+    };
+    const _events = [];
+    const islandAttr = false ? ' data-component="Docs"' : '';
+    let html = "<div class='free-component'" + islandAttr + " data-state='" + JSON.stringify(state).replace(/'/g, "&#39;") + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `min-h-screen bg-black text-zinc-300 font-sans selection:bg-white selection:text-black` + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `container-pro pt-32 pb-20` + "'";
+    html += ">";
+    html += "<span";
+    html += " " + "class" + "='" + `badge-pro mb-4 animate-pulse` + "'";
+    html += ">";
+    html += `v4.8.10 | Cloud Docs`;
+    html += "</span>";
+    html += "<h1";
+    html += " " + "class" + "='" + `text-6xl md:text-8xl font-black text-white tracking-tighter mb-8 leading-none` + "'";
+    html += ">";
+    html += `Free Ultra`;
+    html += "<br";
+    html += ">";
+    html += "</br>";
+    html += "<span";
+    html += " " + "class" + "='" + `text-zinc-700` + "'";
+    html += ">";
+    html += `Documentation`;
+    html += "</span>";
+    html += "</h1>";
+    html += "<p";
+    html += " " + "class" + "='" + `text-xl md:text-2xl text-zinc-500 max-w-2xl leading-relaxed mb-12` + "'";
+    html += ">";
+    html += `The complete 'A to Z' guide to mastering the world's fastest Islands Architecture framework.`;
+    html += "</p>";
+    html += "<div";
+    html += " " + "class" + "='" + `flex flex-wrap gap-4` + "'";
+    html += ">";
+    html += "<a";
+    html += " " + "href" + "='" + `#philosophy` + "'";
+    html += " " + "class" + "='" + `btn-pro` + "'";
+    html += ">";
+    html += `Core Philosophy`;
+    html += "</a>";
+    html += "<a";
+    html += " " + "href" + "='" + `#cli` + "'";
+    html += " " + "class" + "='" + `btn-outline` + "'";
+    html += ">";
+    html += `CLI Commands`;
+    html += "</a>";
+    html += "<a";
+    html += " " + "href" + "='" + `#vscode` + "'";
+    html += " " + "class" + "='" + `btn-outline` + "'";
+    html += ">";
+    html += `VS Code Setup`;
+    html += "</a>";
+    html += "</div>";
+    html += "</div>";
+    html += "<div";
+    html += " " + "class" + "='" + `container-pro space-y-32 pb-40` + "'";
+    html += ">";
+    html += "<section";
+    html += " " + "id" + "='" + `philosophy` + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `grid md:grid-cols-2 gap-16 items-start` + "'";
+    html += ">";
+    html += "<div";
+    html += ">";
+    html += "<h2";
+    html += " " + "class" + "='" + `text-4xl font-bold text-white mb-6 tracking-tight` + "'";
+    html += ">";
+    html += `1. Core Philosophy`;
+    html += "</h2>";
+    html += "<p";
+    html += " " + "class" + "='" + `mb-6 leading-relaxed` + "'";
+    html += ">";
+    html += `Free Ultra isn't just another framework. It's a high-performance engine built on the principle of . We use  to ensure your pages load instantly while remaining fully interactive.`;
+    html += "<strong";
+    html += " " + "class" + "='" + `text-white` + "'";
+    html += ">";
+    html += `Zero-JS by Default`;
+    html += "</strong>";
+    html += "<strong";
+    html += " " + "class" + "='" + `text-white` + "'";
+    html += ">";
+    html += `Islands Architecture`;
+    html += "</strong>";
+    html += "</p>";
+    html += "<ul";
+    html += " " + "class" + "='" + `space-y-4 text-sm` + "'";
+    html += ">";
+    html += "<li";
+    html += " " + "class" + "='" + `flex gap-3` + "'";
+    html += ">";
+    html += `Blazing-fast SSR powered by HyperExpress.`;
+    html += "<span";
+    html += " " + "class" + "='" + `text-white` + "'";
+    html += ">";
+    html += `•`;
+    html += "</span>";
+    html += "</li>";
+    html += "<li";
+    html += " " + "class" + "='" + `flex gap-3` + "'";
+    html += ">";
+    html += `Selective Hydration: Only JavaScript that's needed enters the browser.`;
+    html += "<span";
+    html += " " + "class" + "='" + `text-white` + "'";
+    html += ">";
+    html += `•`;
+    html += "</span>";
+    html += "</li>";
+    html += "<li";
+    html += " " + "class" + "='" + `flex gap-3` + "'";
+    html += ">";
+    html += `Unified Syntax: The .free language unifies HTML, CSS, and Logic.`;
+    html += "<span";
+    html += " " + "class" + "='" + `text-white` + "'";
+    html += ">";
+    html += `•`;
+    html += "</span>";
+    html += "</li>";
+    html += "</ul>";
+    html += "</div>";
+    html += "<div";
+    html += " " + "class" + "='" + `card-pro bg-zinc-900/20` + "'";
+    html += ">";
+    html += "<pre";
+    html += ">";
+    html += "<code";
+    html += ">";
+    html += `// Pure Performance\ncomponent Fast { \n  h1 { text 'Zero Delay' }\n  // Static by default\n}\n`;
+    html += "</code>";
+    html += "</pre>";
+    html += "</div>";
+    html += "</div>";
+    html += "</section>";
+    html += "<section";
+    html += " " + "id" + "='" + `language` + "'";
+    html += ">";
+    html += "<h2";
+    html += " " + "class" + "='" + `text-4xl font-bold text-white mb-12 tracking-tight` + "'";
+    html += ">";
+    html += `2. The .free Language`;
+    html += "</h2>";
+    html += "<div";
+    html += " " + "class" + "='" + `grid md:grid-cols-3 gap-8` + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `card-pro` + "'";
+    html += ">";
+    html += "<h3";
+    html += " " + "class" + "='" + `text-xl font-bold text-white mb-4` + "'";
+    html += ">";
+    html += `Components`;
+    html += "</h3>";
+    html += "<p";
+    html += " " + "class" + "='" + `text-sm leading-relaxed` + "'";
+    html += ">";
+    html += `Components are the heart of Free. Defined with the  keyword, they encapsulate structure and scoped styling.`;
+    html += "<code";
+    html += " " + "class" + "='" + `text-white` + "'";
+    html += ">";
+    html += `component`;
+    html += "</code>";
+    html += "</p>";
+    html += "</div>";
+    html += "<div";
+    html += " " + "class" + "='" + `card-pro` + "'";
+    html += ">";
+    html += "<h3";
+    html += " " + "class" + "='" + `text-xl font-bold text-white mb-4` + "'";
+    html += ">";
+    html += `State Management`;
+    html += "</h3>";
+    html += "<p";
+    html += " " + "class" + "='" + `text-sm leading-relaxed` + "'";
+    html += ">";
+    html += `Use  and  to manage lifecycle. Logic is handled in actions that bridge server and client.`;
+    html += "<code";
+    html += " " + "class" + "='" + `text-white` + "'";
+    html += ">";
+    html += `onMount`;
+    html += "</code>";
+    html += "<code";
+    html += " " + "class" + "='" + `text-white` + "'";
+    html += ">";
+    html += `onDestroy`;
+    html += "</code>";
+    html += "</p>";
+    html += "</div>";
+    html += "<div";
+    html += " " + "class" + "='" + `card-pro` + "'";
+    html += ">";
+    html += "<h3";
+    html += " " + "class" + "='" + `text-xl font-bold text-white mb-4` + "'";
+    html += ">";
+    html += `Partial Rendering`;
+    html += "</h3>";
+    html += "<p";
+    html += " " + "class" + "='" + `text-sm leading-relaxed` + "'";
+    html += ">";
+    html += `The SPA engine uses partial rendering (X-Free-Partial) to update only the content area, keeping transitions smooth as silk.`;
+    html += "</p>";
+    html += "</div>";
+    html += "</div>";
+    html += "</section>";
+    html += "<section";
+    html += " " + "id" + "='" + `orm` + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `grid md:grid-cols-2 gap-16` + "'";
+    html += ">";
+    html += "<div";
+    html += ">";
+    html += "<h2";
+    html += " " + "class" + "='" + `text-4xl font-bold text-white mb-6 tracking-tight` + "'";
+    html += ">";
+    html += `3. Routing & Logic`;
+    html += "</h2>";
+    html += "<p";
+    html += " " + "class" + "='" + `mb-6` + "'";
+    html += ">";
+    html += `Routes are separated into  for HTML pages and  for JSON endpoints. All logic is handled via high-speed action handlers.`;
+    html += "<code";
+    html += " " + "class" + "='" + `text-white` + "'";
+    html += ">";
+    html += `web.free`;
+    html += "</code>";
+    html += "<code";
+    html += " " + "class" + "='" + `text-white` + "'";
+    html += ">";
+    html += `api.free`;
+    html += "</code>";
+    html += "</p>";
+    html += "<div";
+    html += " " + "class" + "='" + `card-pro border-zinc-800` + "'";
+    html += ">";
+    html += "<h4";
+    html += " " + "class" + "='" + `text-white font-bold mb-2` + "'";
+    html += ">";
+    html += `Built-in ORM`;
+    html += "</h4>";
+    html += "<p";
+    html += " " + "class" + "='" + `text-sm` + "'";
+    html += ">";
+    html += `Zero-config SQLite integration. Run  and your models are ready. No complex drivers or boilerplate needed.`;
+    html += "<code";
+    html += " " + "class" + "='" + `text-white` + "'";
+    html += ">";
+    html += `ORM.migrate()`;
+    html += "</code>";
+    html += "</p>";
+    html += "</div>";
+    html += "</div>";
+    html += "<div";
+    html += " " + "class" + "='" + `card-pro bg-zinc-950` + "'";
+    html += ">";
+    html += "<pre";
+    html += ">";
+    html += "<code";
+    html += ">";
+    html += `get \/dashboard\ -> Dashboard\n\npost \/api/login\ { \n  const user = await ORM.find('User', { email: body.email });\n  return { success: !!user };\n}`;
+    html += "</code>";
+    html += "</pre>";
+    html += "</div>";
+    html += "</div>";
+    html += "</section>";
+    html += "<section";
+    html += " " + "id" + "='" + `cli` + "'";
+    html += ">";
+    html += "<h2";
+    html += " " + "class" + "='" + `text-4xl font-bold text-white mb-12 tracking-tight` + "'";
+    html += ">";
+    html += `4. CLI Power-user Guide`;
+    html += "</h2>";
+    html += "<div";
+    html += " " + "class" + "='" + `grid grid-cols-1 md:grid-cols-2 gap-4` + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `flex justify-between p-4 border border-zinc-800 rounded-lg hover:border-zinc-600 transition-colors` + "'";
+    html += ">";
+    html += "<code";
+    html += " " + "class" + "='" + `text-white` + "'";
+    html += ">";
+    html += `free serve`;
+    html += "</code>";
+    html += "<span";
+    html += " " + "class" + "='" + `text-zinc-600 truncate` + "'";
+    html += ">";
+    html += `Ignites development server with HMR`;
+    html += "</span>";
+    html += "</div>";
+    html += "<div";
+    html += " " + "class" + "='" + `flex justify-between p-4 border border-zinc-800 rounded-lg hover:border-zinc-600 transition-colors` + "'";
+    html += ">";
+    html += "<code";
+    html += " " + "class" + "='" + `text-white` + "'";
+    html += ">";
+    html += `free make:crud <name>`;
+    html += "</code>";
+    html += "<span";
+    html += " " + "class" + "='" + `text-zinc-600 truncate` + "'";
+    html += ">";
+    html += `Generates full MVC scaffold`;
+    html += "</span>";
+    html += "</div>";
+    html += "<div";
+    html += " " + "class" + "='" + `flex justify-between p-4 border border-zinc-800 rounded-lg hover:border-zinc-600 transition-colors` + "'";
+    html += ">";
+    html += "<code";
+    html += " " + "class" + "='" + `text-white` + "'";
+    html += ">";
+    html += `free doctor`;
+    html += "</code>";
+    html += "<span";
+    html += " " + "class" + "='" + `text-zinc-600 truncate` + "'";
+    html += ">";
+    html += `Audits and repairs environment`;
+    html += "</span>";
+    html += "</div>";
+    html += "<div";
+    html += " " + "class" + "='" + `flex justify-between p-4 border border-zinc-800 rounded-lg hover:border-zinc-600 transition-colors` + "'";
+    html += ">";
+    html += "<code";
+    html += " " + "class" + "='" + `text-white` + "'";
+    html += ">";
+    html += `free bench`;
+    html += "</code>";
+    html += "<span";
+    html += " " + "class" + "='" + `text-zinc-600 truncate` + "'";
+    html += ">";
+    html += `Runs load tests on your routes`;
+    html += "</span>";
+    html += "</div>";
+    html += "<div";
+    html += " " + "class" + "='" + `flex justify-between p-4 border border-zinc-800 rounded-lg hover:border-zinc-600 transition-colors` + "'";
+    html += ">";
+    html += "<code";
+    html += " " + "class" + "='" + `text-white` + "'";
+    html += ">";
+    html += `free route:list`;
+    html += "</code>";
+    html += "<span";
+    html += " " + "class" + "='" + `text-zinc-600 truncate` + "'";
+    html += ">";
+    html += `Displays all registered endpoints`;
+    html += "</span>";
+    html += "</div>";
+    html += "</div>";
+    html += "</section>";
+    html += "<section";
+    html += " " + "id" + "='" + `vscode` + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `bg-zinc-900/10 border border-zinc-800 rounded-3xl p-12` + "'";
+    html += ">";
+    html += "<h2";
+    html += " " + "class" + "='" + `text-4xl font-bold text-white mb-8 tracking-tight` + "'";
+    html += ">";
+    html += `5. IDE Ecosystem`;
+    html += "</h2>";
+    html += "<div";
+    html += " " + "class" + "='" + `grid md:grid-cols-2 gap-12` + "'";
+    html += ">";
+    html += "<div";
+    html += ">";
+    html += "<h3";
+    html += " " + "class" + "='" + `text-2xl font-bold text-white mb-4` + "'";
+    html += ">";
+    html += `Visual Studio Code`;
+    html += "</h3>";
+    html += "<p";
+    html += " " + "class" + "='" + `mb-6 text-sm` + "'";
+    html += ">";
+    html += `Get syntax highlighting, auto-completion, and deep linting for .free files.`;
+    html += "</p>";
+    html += "<div";
+    html += " " + "class" + "='" + `space-y-4` + "'";
+    html += ">";
+    html += "<a";
+    html += " " + "href" + "='" + `https://marketplace.visualstudio.com/items?itemName=dev-omartolba.free-vscode` + "'";
+    html += " " + "class" + "='" + `block text-zinc-400 hover:text-white transition-colors flex items-center gap-2` + "'";
+    html += ">";
+    html += `→ Install from VS Marketplace`;
+    html += "</a>";
+    html += "<a";
+    html += " " + "href" + "='" + `https://open-vsx.org/extension/dev-omartolba/free-vscode` + "'";
+    html += " " + "class" + "='" + `block text-zinc-400 hover:text-white transition-colors flex items-center gap-2` + "'";
+    html += ">";
+    html += `→ Install from Antigravity / Open VSX`;
+    html += "</a>";
+    html += "</div>";
+    html += "</div>";
+    html += "<div";
+    html += ">";
+    html += "<h3";
+    html += " " + "class" + "='" + `text-2xl font-bold text-white mb-4` + "'";
+    html += ">";
+    html += `Manual Installation`;
+    html += "</h3>";
+    html += "<p";
+    html += " " + "class" + "='" + `mb-4 text-xs font-mono uppercase tracking-widest text-zinc-600` + "'";
+    html += ">";
+    html += `Air-gapped Setup`;
+    html += "</p>";
+    html += "<div";
+    html += " " + "class" + "='" + `card-pro bg-black border-zinc-800 p-6` + "'";
+    html += ">";
+    html += "<ol";
+    html += " " + "class" + "='" + `text-sm space-y-3` + "'";
+    html += ">";
+    html += "<li";
+    html += ">";
+    html += `1. Download the .vsix file from GitHub.`;
+    html += "</li>";
+    html += "<li";
+    html += ">";
+    html += `2. Open VS Code.`;
+    html += "</li>";
+    html += "<li";
+    html += ">";
+    html += `3. Run 'Extensions: Install from VSIX...' command.`;
+    html += "</li>";
+    html += "</ol>";
+    html += "</div>";
+    html += "</div>";
+    html += "</div>";
+    html += "</div>";
+    html += "</section>";
+    html += "</div>";
+    html += "<footer";
+    html += " " + "class" + "='" + `border-t border-zinc-900 py-20` + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `container-pro text-center` + "'";
+    html += ">";
+    html += "<p";
+    html += " " + "class" + "='" + `text-sm text-zinc-600` + "'";
+    html += ">";
+    html += `Free Ultra Framework © 2026. Built for professionals. `;
+    html += "<a";
+    html += " " + "href" + "='" + `https://omar-fathy.xyz/free-docs/guide.php` + "'";
+    html += " " + "class" + "='" + `text-zinc-400 hover:text-white` + "'";
+    html += ">";
+    html += `Official Encyclopedia`;
+    html += "</a>";
+    html += "</p>";
+    html += "<div";
+    html += ">";
+    html += "</div>";
+    html += "</div>";
+    html += "</footer>";
+    html += "</div>";
+    html += "</div>";
+    return html;
+}
+
+function renderHeader(props = { }, helpers = { }) {
+    const e = (str) => String(str).replace(/[&<>'"]/g, m => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' }[m]));
+    const state = {
+    };
+    const _events = [];
+    const islandAttr = false ? ' data-component="Header"' : '';
+    let html = "<div class='free-component'" + islandAttr + " data-state='" + JSON.stringify(state).replace(/'/g, "&#39;") + "'";
+    html += ">";
+    html += "<header";
+    html += " " + "class" + "='" + `fixed top-0 left-0 w-full z-50 bg-black border-b border-border h-16 flex items-center` + "'";
+    html += ">";
+    html += "<nav";
+    html += " " + "class" + "='" + `container-pro w-full flex items-center justify-between` + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `flex items-center gap-8` + "'";
+    html += ">";
+    html += "<a";
+    html += " " + "href" + "='" + `/` + "'";
+    html += " " + "class" + "='" + `text-white font-bold tracking-tight text-lg` + "'";
+    html += ">";
+    html += `FREE ULTRA`;
+    html += "</a>";
+    html += "<div";
+    html += " " + "class" + "='" + `hidden md:flex gap-6` + "'";
+    html += ">";
+    html += "<a";
+    html += " " + "href" + "='" + `/` + "'";
+    html += " " + "class" + "='" + `nav-link font-medium` + "'";
+    html += ">";
+    html += `Home`;
+    html += "</a>";
+    html += "<a";
+    html += " " + "href" + "='" + `/docs` + "'";
+    html += " " + "class" + "='" + `nav-link font-medium` + "'";
+    html += ">";
+    html += `Documentation`;
+    html += "</a>";
+    if ((props.user)) {
+        html += "<a";
+        html += " " + "href" + "='" + `/dashboard` + "'";
+        html += " " + "class" + "='" + `nav-link font-medium` + "'";
+        html += ">";
+        html += `Dashboard`;
+        html += "</a>";
+    }
+    html += "</div>";
+    html += "</div>";
+    html += "<div";
+    html += " " + "class" + "='" + `flex items-center gap-4` + "'";
+    html += ">";
+    html += "<span";
+    html += " " + "class" + "='" + `badge-pro` + "'";
+    html += ">";
+    html += `v4.8.7`;
+    html += "</span>";
+    if ((props.user)) {
+        html += "<a";
+        html += " " + "href" + "='" + `/logout` + "'";
+        html += " " + "class" + "='" + `text-sm font-medium text-white hover:opacity-80 transition-opacity` + "'";
+        html += ">";
+        html += `Logout (\$${e(props.user.name)})`;
+        html += "</a>";
+    }
+    html += "<else";
+    html += ">";
+    html += "<a";
+    html += " " + "href" + "='" + `/login` + "'";
+    html += " " + "class" + "='" + `text-sm font-medium text-white hover:opacity-80 transition-opacity` + "'";
+    html += ">";
+    html += `Sign In`;
+    html += "</a>";
+    html += "</else>";
+    html += "</div>";
+    html += "</nav>";
+    html += "</header>";
+    html += "</div>";
+    return html;
+}
+
+function renderHome(props = { }, helpers = { }) {
+    const e = (str) => String(str).replace(/[&<>'"]/g, m => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' }[m]));
+    const state = {
+    };
+    const _events = [];
+    const islandAttr = false ? ' data-component="Home"' : '';
+    let html = "<div class='free-component'" + islandAttr + " data-state='" + JSON.stringify(state).replace(/'/g, "&#39;") + "'";
+    html += ">";
+    html += "<main";
+    html += " " + "class" + "='" + `pt-32 pb-40 overflow-hidden` + "'";
+    html += ">";
+    html += "<section";
+    html += " " + "class" + "='" + `container-pro text-center pt-24 pb-20` + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "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` + "'";
+    html += ">";
+    html += `VERSION 4.8.10 IS NOW LIVE`;
+    html += "<span";
+    html += " " + "class" + "='" + `w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse` + "'";
+    html += ">";
+    html += "</span>";
+    html += "</div>";
+    html += "<h1";
+    html += " " + "class" + "='" + `hero-title` + "'";
+    html += ">";
+    html += `The Engine for`;
+    html += "<br";
+    html += ">";
+    html += "</br>";
+    html += "<span";
+    html += " " + "class" + "='" + `text-zinc-600` + "'";
+    html += ">";
+    html += `High-Performance.`;
+    html += "</span>";
+    html += "</h1>";
+    html += "<p";
+    html += " " + "class" + "='" + `text-xl md:text-2xl text-zinc-500 max-w-3xl mx-auto mb-12 leading-relaxed font-medium` + "'";
+    html += ">";
+    html += `Experience the future of SSR with Islands Architecture, built-in Reactive state, and Enterprise-grade security. Small footprint, infinite power.`;
+    html += "</p>";
+    html += "<div";
+    html += " " + "class" + "='" + `flex flex-wrap justify-center gap-5` + "'";
+    html += ">";
+    html += "<a";
+    html += " " + "href" + "='" + `https://omar-fathy.xyz/free-docs/guide.php` + "'";
+    html += " " + "class" + "='" + `btn-pro` + "'";
+    html += ">";
+    html += `Read Encyclopedia`;
+    html += "<svg";
+    html += " " + "class" + "='" + `w-4 h-4` + "'";
+    html += " " + "fill" + "='" + `none` + "'";
+    html += " " + "stroke" + "='" + `currentColor` + "'";
+    html += " " + "viewBox" + "='" + `0 0 24 24` + "'";
+    html += ">";
+    html += "<path";
+    html += " " + "stroke-linecap" + "='" + `round` + "'";
+    html += " " + "stroke-linejoin" + "='" + `round` + "'";
+    html += " " + "stroke-width" + "='" + `2` + "'";
+    html += " " + "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` + "'";
+    html += ">";
+    html += "</path>";
+    html += "</svg>";
+    html += "</a>";
+    html += "<a";
+    html += " " + "href" + "='" + `https://github.com/dev-omartolba` + "'";
+    html += " " + "class" + "='" + `btn-outline` + "'";
+    html += ">";
+    html += `View Source`;
+    html += "</a>";
+    html += "</div>";
+    html += "<div";
+    html += " " + "class" + "='" + `mt-24 max-w-4xl mx-auto relative` + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `absolute -inset-1 bg-gradient-to-r from-zinc-800 to-zinc-900 rounded-2xl blur opacity-20` + "'";
+    html += ">";
+    html += "</div>";
+    html += "<pre";
+    html += " " + "class" + "='" + `relative` + "'";
+    html += ">";
+    html += "<code";
+    html += ">";
+    html += `\$ npx free-framework@latest new my-project`;
+    html += "</code>";
+    html += "</pre>";
+    html += "</div>";
+    html += "</section>";
+    html += "<section";
+    html += " " + "class" + "='" + `container-pro pt-32` + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `grid md:grid-cols-3 gap-8` + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `card-pro` + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `w-10 h-10 rounded-lg bg-zinc-900 border border-border flex items-center justify-center mb-6` + "'";
+    html += ">";
+    html += `⚡`;
+    html += "</div>";
+    html += "<h3";
+    html += " " + "class" + "='" + `text-xl font-bold mb-3` + "'";
+    html += ">";
+    html += `Speed`;
+    html += "</h3>";
+    html += "<p";
+    html += " " + "class" + "='" + `text-base text-zinc-500 leading-relaxed` + "'";
+    html += ">";
+    html += `Zero-overhead runtime powered by HyperExpress for sub-millisecond responses.`;
+    html += "</p>";
+    html += "</div>";
+    html += "<div";
+    html += " " + "class" + "='" + `card-pro` + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `w-10 h-10 rounded-lg bg-zinc-900 border border-border flex items-center justify-center mb-6` + "'";
+    html += ">";
+    html += `🏝️`;
+    html += "</div>";
+    html += "<h3";
+    html += " " + "class" + "='" + `text-xl font-bold mb-3` + "'";
+    html += ">";
+    html += `Islands`;
+    html += "</h3>";
+    html += "<p";
+    html += " " + "class" + "='" + `text-base text-zinc-500 leading-relaxed` + "'";
+    html += ">";
+    html += `Partial hydration logic that ships minimal JavaScript for maximum SEO benefits.`;
+    html += "</p>";
+    html += "</div>";
+    html += "<div";
+    html += " " + "class" + "='" + `card-pro` + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `w-10 h-10 rounded-lg bg-zinc-900 border border-border flex items-center justify-center mb-6` + "'";
+    html += ">";
+    html += `🛡️`;
+    html += "</div>";
+    html += "<h3";
+    html += " " + "class" + "='" + `text-xl font-bold mb-3` + "'";
+    html += ">";
+    html += `Security`;
+    html += "</h3>";
+    html += "<p";
+    html += " " + "class" + "='" + `text-base text-zinc-500 leading-relaxed` + "'";
+    html += ">";
+    html += `Built-in DDoS protection, CSRF guards, and secure-by-default environment.`;
+    html += "</p>";
+    html += "</div>";
+    html += "</div>";
+    html += "</section>";
+    html += "</main>";
+    html += "</div>";
+    return html;
+}
+
+function renderLogin(props = { }, helpers = { }) {
+    const e = (str) => String(str).replace(/[&<>'"]/g, m => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' }[m]));
+    const state = {
+    };
+    const _events = [];
+    const islandAttr = false ? ' data-component="Login"' : '';
+    let html = "<div class='free-component'" + islandAttr + " data-state='" + JSON.stringify(state).replace(/'/g, "&#39;") + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `min-h-screen flex items-center justify-center bg-black px-8` + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `w-full max-w-md` + "'";
+    html += ">";
+    html += "<div";
+    html += " " + "class" + "='" + `text-center mb-10` + "'";
+    html += ">";
+    html += "<h2";
+    html += " " + "class" + "='" + `text-3xl font-bold tracking-tight text-white` + "'";
+    html += ">";
+    html += `Welcome Back`;
+    html += "</h2>";
+    html += "<p";
+    html += " " + "class" + "='" + `text-zinc-500 mt-2` + "'";
+    html += ">";
+    html += `Sign in to your enterprise console`;
+    html += "</p>";
+    html += "</div>";
+    html += "<div";
+    html += " " + "class" + "='" + `card-pro` + "'";
+    html += ">";
+    html += "<form";
+    html += " " + "class" + "='" + `space-y-6` + "'";
+    html += ">";
+    html += "<div";
+    html += ">";
+    html += "<label";
+    html += " " + "class" + "='" + `block text-sm font-medium text-zinc-400 mb-2` + "'";
+    html += ">";
+    html += `Email Address`;
+    html += "</label>";
+    html += "<input";
+    html += " " + "type" + "='" + `email` + "'";
+    html += " " + "class" + "='" + `w-full bg-black border border-zinc-800 rounded-lg px-4 py-3 text-white focus:border-white transition-colors outline-none` + "'";
+    html += " " + "placeholder" + "='" + `name@company.com` + "'";
+    html += ">";
+    html += "</input>";
+    html += "</div>";
+    html += "<div";
+    html += ">";
+    html += "<label";
+    html += " " + "class" + "='" + `block text-sm font-medium text-zinc-400 mb-2` + "'";
+    html += ">";
+    html += `Password`;
+    html += "</label>";
+    html += "<input";
+    html += " " + "type" + "='" + `password` + "'";
+    html += " " + "class" + "='" + `w-full bg-black border border-zinc-800 rounded-lg px-4 py-3 text-white focus:border-white transition-colors outline-none` + "'";
+    html += " " + "placeholder" + "='" + `••••••••` + "'";
+    html += ">";
+    html += "</input>";
+    html += "</div>";
+    html += "<button";
+    html += " " + "type" + "='" + `submit` + "'";
+    html += " " + "class" + "='" + `btn-pro w-full justify-center py-3` + "'";
+    html += ">";
+    html += `Continue`;
+    html += "</button>";
+    html += "</form>";
+    html += "</div>";
+    html += "<p";
+    html += " " + "class" + "='" + `text-center text-zinc-500 mt-8 text-sm` + "'";
+    html += ">";
+    html += `Don't have an account? `;
+    html += "<a";
+    html += " " + "href" + "='" + `/register` + "'";
+    html += " " + "class" + "='" + `text-white hover:underline` + "'";
+    html += ">";
+    html += `Create one`;
+    html += "</a>";
+    html += "</p>";
+    html += "</div>";
+    html += "</div>";
+    html += "</div>";
+    return html;
+}
+
+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'];
+
+
+server.route("post", "/api/register", [], 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(() => ({}));
+                }
+            }
+        } catch(e) {}
+
+        const result = await (async () => {
+            
+        })();
+
+        if (res.headersSent) return;
+
+        // If it's a PAGE route (has a view), render HTML
+        if (true) {
+            const stylesRegistry = {"Counter":"","Dashboard":".dashboard-container { padding: 2rem; background: #f3f4f6; min-height: 100vh; }\n    .card { background: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }","Docs":"","Header":"","Home":"","Login":""};
+            const helpers = {
+                renderComponent: (name, props = {}) => {
+                    server.renderRegistry = server.renderRegistry || {
+                        Counter: renderCounter,
+                        Dashboard: renderDashboard,
+                        Docs: renderDocs,
+                        Header: renderHeader,
+                        Home: renderHome,
+                        Login: renderLogin
+                    };
+                    return server.renderRegistry[name] ? server.renderRegistry[name](props, helpers) : '<!-- Component ' + name + ' not found -->';
+                },
+                getScopedCSS: (used = []) => {
+                    return used.map(name => stylesRegistry[name] || '').join('\n');
+                }
+            };
+            const props = result || (res.context && res.context.props ? res.context.props : {});
+            const pageHtml = helpers.renderComponent('Register', props);
+            const scopedCSS = helpers.getScopedCSS(['Register', 'Header']);
+            if (req.headers['x-free-partial']) {
+                return res.json({ title: 'Free Ultra | Register', content: pageHtml, url: req.url, css: scopedCSS });
+            }
+            const headerHtml = helpers.renderComponent('Header', props);
+            const fullHTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Free Ultra | Register</title>
+    <meta name="csrf-token" content="${res.context.csrfToken || ''}">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/app.css">
+    <style>
+        :root { --primary:#fff; --bg:#000; --border:#27272a; }
+        body { margin:0; font-family:'Inter', system-ui, sans-serif; background:var(--bg); color:#fff; -webkit-font-smoothing:antialiased; }
+        ${scopedCSS}
+    </style>
+    <script src="/free-runtime.js" defer></script>
+</head>
+<body>
+    ${headerHtml}
+    <main id="free-app-root">
+        ${pageHtml}
+    </main>
+    ${process.env.NODE_ENV !== 'production' ? `
+    <script>
+        (function connectHMR() {
+            const ws = new WebSocket('ws://' + location.host + '/_free_hmr');
+            ws.onclose = () => { 
+                setTimeout(() => fetch('/').then(() => window.location.reload()).catch(connectHMR), 500); 
+            };
+            console.log('[Free Engine] ⚡ HMR Active');
+        })();
+    </script>` : ''}
+</body>
+</html>`;
+            res.header('Content-Type', 'text/html').send(fullHTML);
+        } else {
+            res.json({ success: true, result });
+        }
+    });
+
+server.route("post", "/api/login", [], 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(() => ({}));
+                }
+            }
+        } catch(e) {}
+
+        const result = await (async () => {
+            
+        })();
+
+        if (res.headersSent) return;
+
+        // If it's a PAGE route (has a view), render HTML
+        if (true) {
+            const stylesRegistry = {"Counter":"","Dashboard":".dashboard-container { padding: 2rem; background: #f3f4f6; min-height: 100vh; }\n    .card { background: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }","Docs":"","Header":"","Home":"","Login":""};
+            const helpers = {
+                renderComponent: (name, props = {}) => {
+                    server.renderRegistry = server.renderRegistry || {
+                        Counter: renderCounter,
+                        Dashboard: renderDashboard,
+                        Docs: renderDocs,
+                        Header: renderHeader,
+                        Home: renderHome,
+                        Login: renderLogin
+                    };
+                    return server.renderRegistry[name] ? server.renderRegistry[name](props, helpers) : '<!-- Component ' + name + ' not found -->';
+                },
+                getScopedCSS: (used = []) => {
+                    return used.map(name => stylesRegistry[name] || '').join('\n');
+                }
+            };
+            const props = result || (res.context && res.context.props ? res.context.props : {});
+            const pageHtml = helpers.renderComponent('Login', props);
+            const scopedCSS = helpers.getScopedCSS(['Login', 'Header']);
+            if (req.headers['x-free-partial']) {
+                return res.json({ title: 'Free Ultra | Login', content: pageHtml, url: req.url, css: scopedCSS });
+            }
+            const headerHtml = helpers.renderComponent('Header', props);
+            const fullHTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Free Ultra | Login</title>
+    <meta name="csrf-token" content="${res.context.csrfToken || ''}">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/app.css">
+    <style>
+        :root { --primary:#fff; --bg:#000; --border:#27272a; }
+        body { margin:0; font-family:'Inter', system-ui, sans-serif; background:var(--bg); color:#fff; -webkit-font-smoothing:antialiased; }
+        ${scopedCSS}
+    </style>
+    <script src="/free-runtime.js" defer></script>
+</head>
+<body>
+    ${headerHtml}
+    <main id="free-app-root">
+        ${pageHtml}
+    </main>
+    ${process.env.NODE_ENV !== 'production' ? `
+    <script>
+        (function connectHMR() {
+            const ws = new WebSocket('ws://' + location.host + '/_free_hmr');
+            ws.onclose = () => { 
+                setTimeout(() => fetch('/').then(() => window.location.reload()).catch(connectHMR), 500); 
+            };
+            console.log('[Free Engine] ⚡ HMR Active');
+        })();
+    </script>` : ''}
+</body>
+</html>`;
+            res.header('Content-Type', 'text/html').send(fullHTML);
+        } else {
+            res.json({ success: true, result });
+        }
+    });
+
+server.route("get", "/", [], 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(() => ({}));
+                }
+            }
+        } catch(e) {}
+
+        const result = await (async () => {
+            
+        })();
+
+        if (res.headersSent) return;
+
+        // If it's a PAGE route (has a view), render HTML
+        if (true) {
+            const stylesRegistry = {"Counter":"","Dashboard":".dashboard-container { padding: 2rem; background: #f3f4f6; min-height: 100vh; }\n    .card { background: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }","Docs":"","Header":"","Home":"","Login":""};
+            const helpers = {
+                renderComponent: (name, props = {}) => {
+                    server.renderRegistry = server.renderRegistry || {
+                        Counter: renderCounter,
+                        Dashboard: renderDashboard,
+                        Docs: renderDocs,
+                        Header: renderHeader,
+                        Home: renderHome,
+                        Login: renderLogin
+                    };
+                    return server.renderRegistry[name] ? server.renderRegistry[name](props, helpers) : '<!-- Component ' + name + ' not found -->';
+                },
+                getScopedCSS: (used = []) => {
+                    return used.map(name => stylesRegistry[name] || '').join('\n');
+                }
+            };
+            const props = result || (res.context && res.context.props ? res.context.props : {});
+            const pageHtml = helpers.renderComponent('Home', props);
+            const scopedCSS = helpers.getScopedCSS(['Home', 'Header']);
+            if (req.headers['x-free-partial']) {
+                return res.json({ title: 'Free Ultra | Home', content: pageHtml, url: req.url, css: scopedCSS });
+            }
+            const headerHtml = helpers.renderComponent('Header', props);
+            const fullHTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Free Ultra | Home</title>
+    <meta name="csrf-token" content="${res.context.csrfToken || ''}">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/app.css">
+    <style>
+        :root { --primary:#fff; --bg:#000; --border:#27272a; }
+        body { margin:0; font-family:'Inter', system-ui, sans-serif; background:var(--bg); color:#fff; -webkit-font-smoothing:antialiased; }
+        ${scopedCSS}
+    </style>
+    <script src="/free-runtime.js" defer></script>
+</head>
+<body>
+    ${headerHtml}
+    <main id="free-app-root">
+        ${pageHtml}
+    </main>
+    ${process.env.NODE_ENV !== 'production' ? `
+    <script>
+        (function connectHMR() {
+            const ws = new WebSocket('ws://' + location.host + '/_free_hmr');
+            ws.onclose = () => { 
+                setTimeout(() => fetch('/').then(() => window.location.reload()).catch(connectHMR), 500); 
+            };
+            console.log('[Free Engine] ⚡ HMR Active');
+        })();
+    </script>` : ''}
+</body>
+</html>`;
+            res.header('Content-Type', 'text/html').send(fullHTML);
+        } else {
+            res.json({ success: true, result });
+        }
+    });
+
+server.route("get", "/docs", [], 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(() => ({}));
+                }
+            }
+        } catch(e) {}
+
+        const result = await (async () => {
+            
+        })();
+
+        if (res.headersSent) return;
+
+        // If it's a PAGE route (has a view), render HTML
+        if (true) {
+            const stylesRegistry = {"Counter":"","Dashboard":".dashboard-container { padding: 2rem; background: #f3f4f6; min-height: 100vh; }\n    .card { background: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }","Docs":"","Header":"","Home":"","Login":""};
+            const helpers = {
+                renderComponent: (name, props = {}) => {
+                    server.renderRegistry = server.renderRegistry || {
+                        Counter: renderCounter,
+                        Dashboard: renderDashboard,
+                        Docs: renderDocs,
+                        Header: renderHeader,
+                        Home: renderHome,
+                        Login: renderLogin
+                    };
+                    return server.renderRegistry[name] ? server.renderRegistry[name](props, helpers) : '<!-- Component ' + name + ' not found -->';
+                },
+                getScopedCSS: (used = []) => {
+                    return used.map(name => stylesRegistry[name] || '').join('\n');
+                }
+            };
+            const props = result || (res.context && res.context.props ? res.context.props : {});
+            const pageHtml = helpers.renderComponent('Docs', props);
+            const scopedCSS = helpers.getScopedCSS(['Docs', 'Header']);
+            if (req.headers['x-free-partial']) {
+                return res.json({ title: 'Free Ultra | Docs', content: pageHtml, url: req.url, css: scopedCSS });
+            }
+            const headerHtml = helpers.renderComponent('Header', props);
+            const fullHTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Free Ultra | Docs</title>
+    <meta name="csrf-token" content="${res.context.csrfToken || ''}">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/app.css">
+    <style>
+        :root { --primary:#fff; --bg:#000; --border:#27272a; }
+        body { margin:0; font-family:'Inter', system-ui, sans-serif; background:var(--bg); color:#fff; -webkit-font-smoothing:antialiased; }
+        ${scopedCSS}
+    </style>
+    <script src="/free-runtime.js" defer></script>
+</head>
+<body>
+    ${headerHtml}
+    <main id="free-app-root">
+        ${pageHtml}
+    </main>
+    ${process.env.NODE_ENV !== 'production' ? `
+    <script>
+        (function connectHMR() {
+            const ws = new WebSocket('ws://' + location.host + '/_free_hmr');
+            ws.onclose = () => { 
+                setTimeout(() => fetch('/').then(() => window.location.reload()).catch(connectHMR), 500); 
+            };
+            console.log('[Free Engine] ⚡ HMR Active');
+        })();
+    </script>` : ''}
+</body>
+</html>`;
+            res.header('Content-Type', 'text/html').send(fullHTML);
+        } else {
+            res.json({ success: true, result });
+        }
+    });
+
+server.route("get", "/login", [], 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(() => ({}));
+                }
+            }
+        } catch(e) {}
+
+        const result = await (async () => {
+            
+        })();
+
+        if (res.headersSent) return;
+
+        // If it's a PAGE route (has a view), render HTML
+        if (true) {
+            const stylesRegistry = {"Counter":"","Dashboard":".dashboard-container { padding: 2rem; background: #f3f4f6; min-height: 100vh; }\n    .card { background: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }","Docs":"","Header":"","Home":"","Login":""};
+            const helpers = {
+                renderComponent: (name, props = {}) => {
+                    server.renderRegistry = server.renderRegistry || {
+                        Counter: renderCounter,
+                        Dashboard: renderDashboard,
+                        Docs: renderDocs,
+                        Header: renderHeader,
+                        Home: renderHome,
+                        Login: renderLogin
+                    };
+                    return server.renderRegistry[name] ? server.renderRegistry[name](props, helpers) : '<!-- Component ' + name + ' not found -->';
+                },
+                getScopedCSS: (used = []) => {
+                    return used.map(name => stylesRegistry[name] || '').join('\n');
+                }
+            };
+            const props = result || (res.context && res.context.props ? res.context.props : {});
+            const pageHtml = helpers.renderComponent('Login', props);
+            const scopedCSS = helpers.getScopedCSS(['Login', 'Header']);
+            if (req.headers['x-free-partial']) {
+                return res.json({ title: 'Free Ultra | Login', content: pageHtml, url: req.url, css: scopedCSS });
+            }
+            const headerHtml = helpers.renderComponent('Header', props);
+            const fullHTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Free Ultra | Login</title>
+    <meta name="csrf-token" content="${res.context.csrfToken || ''}">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/app.css">
+    <style>
+        :root { --primary:#fff; --bg:#000; --border:#27272a; }
+        body { margin:0; font-family:'Inter', system-ui, sans-serif; background:var(--bg); color:#fff; -webkit-font-smoothing:antialiased; }
+        ${scopedCSS}
+    </style>
+    <script src="/free-runtime.js" defer></script>
+</head>
+<body>
+    ${headerHtml}
+    <main id="free-app-root">
+        ${pageHtml}
+    </main>
+    ${process.env.NODE_ENV !== 'production' ? `
+    <script>
+        (function connectHMR() {
+            const ws = new WebSocket('ws://' + location.host + '/_free_hmr');
+            ws.onclose = () => { 
+                setTimeout(() => fetch('/').then(() => window.location.reload()).catch(connectHMR), 500); 
+            };
+            console.log('[Free Engine] ⚡ HMR Active');
+        })();
+    </script>` : ''}
+</body>
+</html>`;
+            res.header('Content-Type', 'text/html').send(fullHTML);
+        } else {
+            res.json({ success: true, result });
+        }
+    });
+
+server.route("get", "/dashboard", [], 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(() => ({}));
+                }
+            }
+        } catch(e) {}
+
+        const result = await (async () => {
+            
+        })();
+
+        if (res.headersSent) return;
+
+        // If it's a PAGE route (has a view), render HTML
+        if (false) {
+            const stylesRegistry = {"Counter":"","Dashboard":".dashboard-container { padding: 2rem; background: #f3f4f6; min-height: 100vh; }\n    .card { background: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }","Docs":"","Header":"","Home":"","Login":""};
+            const helpers = {
+                renderComponent: (name, props = {}) => {
+                    server.renderRegistry = server.renderRegistry || {
+                        Counter: renderCounter,
+                        Dashboard: renderDashboard,
+                        Docs: renderDocs,
+                        Header: renderHeader,
+                        Home: renderHome,
+                        Login: renderLogin
+                    };
+                    return server.renderRegistry[name] ? server.renderRegistry[name](props, helpers) : '<!-- Component ' + name + ' not found -->';
+                },
+                getScopedCSS: (used = []) => {
+                    return used.map(name => stylesRegistry[name] || '').join('\n');
+                }
+            };
+            const props = result || (res.context && res.context.props ? res.context.props : {});
+            const pageHtml = helpers.renderComponent('Home', props);
+            const scopedCSS = helpers.getScopedCSS(['Home', 'Header']);
+            if (req.headers['x-free-partial']) {
+                return res.json({ title: 'Free Ultra | Home', content: pageHtml, url: req.url, css: scopedCSS });
+            }
+            const headerHtml = helpers.renderComponent('Header', props);
+            const fullHTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Free Ultra | Home</title>
+    <meta name="csrf-token" content="${res.context.csrfToken || ''}">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/app.css">
+    <style>
+        :root { --primary:#fff; --bg:#000; --border:#27272a; }
+        body { margin:0; font-family:'Inter', system-ui, sans-serif; background:var(--bg); color:#fff; -webkit-font-smoothing:antialiased; }
+        ${scopedCSS}
+    </style>
+    <script src="/free-runtime.js" defer></script>
+</head>
+<body>
+    ${headerHtml}
+    <main id="free-app-root">
+        ${pageHtml}
+    </main>
+    ${process.env.NODE_ENV !== 'production' ? `
+    <script>
+        (function connectHMR() {
+            const ws = new WebSocket('ws://' + location.host + '/_free_hmr');
+            ws.onclose = () => { 
+                setTimeout(() => fetch('/').then(() => window.location.reload()).catch(connectHMR), 500); 
+            };
+            console.log('[Free Engine] ⚡ HMR Active');
+        })();
+    </script>` : ''}
+</body>
+</html>`;
+            res.header('Content-Type', 'text/html').send(fullHTML);
+        } else {
+            res.json({ success: true, result });
+        }
+    });
+
+if (require.main === module) {
+                                                ORM.migrate(modelsRegistry).then(() => {
+                                                    server.start(process.env.PORT || 4000);
+                                                }).catch(err => console.error(err));
+}
+
+                                            module.exports = {...modelsRegistry, server, modelsRegistry, ORM};
+