@nitronjs/framework 0.2.26 → 0.3.0

package/lib/View/View.js

@@ -1,4 +1,4 @@
-import { existsSync, readFileSync, readdirSync, statSync } from "fs";
+import { existsSync, readFileSync, statSync } from "fs";
 import path from "path";
 import { pathToFileURL, fileURLToPath } from "url";
 import { randomBytes } from "crypto";
@@ -11,14 +11,14 @@ import Router from "../Route/Router.js";
 import Paths from "../Core/Paths.js";
 import Config from "../Core/Config.js";
 import Environment from "../Core/Environment.js";
+import FlightRenderer from "./FlightRenderer.js";
+import ClientManifest from "./ClientManifest.js";
+import PropFilter from "./PropFilter.js";
+import Lang from "../Translation/Lang.js";
 
-// Get framework version from package.json
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const packageJsonPath = path.join(__dirname, "../../package.json");
-const FRAMEWORK_VERSION = JSON.parse(readFileSync(packageJsonPath, "utf-8")).version;
 
 const CTX = Symbol.for("__nitron_view_context__");
-const MARK = Symbol.for("__nitron_client_component__");
 const Context = new AsyncLocalStorage();
 globalThis[CTX] ??= Context;
 
@@ -31,92 +31,51 @@ const ESC_MAP = {
     "`": "`"
 };
 
-const UNSAFE_KEYS = new Set(["__proto__", "constructor", "prototype"]);
-
 function escapeHtml(str) {
     if (!str) return "";
     return String(str).replace(/[&<>"'`]/g, char => ESC_MAP[char]);
 }
 
-function trackProps(obj) {
-    const accessed = new Set();
-    const cache = new WeakMap();
-
-    function wrap(source, prefix) {
-        if (source === null || typeof source !== "object") return source;
-        if (cache.has(source)) return cache.get(source);
-
-        const isArr = Array.isArray(source);
-        const copy = isArr ? [] : {};
-
-        for (const key of Object.keys(source)) {
-            const val = source[key];
-
-            if (val !== null && typeof val === "object" && typeof val !== "function") {
-                copy[key] = wrap(val, prefix ? prefix + "." + key : key);
-            }
-            else {
-                copy[key] = val;
-            }
-        }
-
-        const proxy = new Proxy(copy, {
-            get(t, prop, receiver) {
-                if (typeof prop === "symbol") return Reflect.get(t, prop, receiver);
-
-                const val = Reflect.get(t, prop, receiver);
-                if (typeof val === "function") return val;
-
-                if (val !== undefined) {
-                    const currentPath = prefix ? prefix + "." + String(prop) : String(prop);
-                    accessed.add(currentPath);
-                }
+function isLocalPath(url) {
+    if (!url || typeof url !== "string") return false;
 
-                return val;
-            }
-        });
-
-        cache.set(source, proxy);
-        return proxy;
+    try {
+        const decoded = decodeURIComponent(url);
+        return decoded.startsWith("/") && !decoded.startsWith("//");
     }
-
-    return { proxy: wrap(obj, ""), accessed };
-}
-
-function resolveExists(obj, path) {
-    const parts = path.split(".");
-    let current = obj;
-
-    for (let i = 0; i < parts.length; i++) {
-        if (current == null || typeof current !== "object") return false;
-        current = current[parts[i]];
+    catch {
+        return false;
     }
-
-    return current !== undefined;
 }
 
+
 /**
- * React SSR view renderer with streaming support.
- * Handles component rendering, asset injection, and client hydration.
- * 
+ * Server-side view renderer with RSC (React Server Components) support.
+ * Dual renders each page: HTML for initial paint, Flight payload for hydration.
+ *
  * @example
- * return View.render(res, "Dashboard", { user: currentUser });
+ * // In a controller:
+ * return res.view("Dashboard", { user: currentUser });
  */
 class View {
-    static #root = Paths.project;
     static #userViews = Paths.buildViews;
     static #frameworkViews = Paths.buildFrameworkViews;
     static #manifestPath = path.join(Paths.build, "manifest.json");
     static #manifest = null;
-    static #routesCache = null;
     static #manifestMtime = null;
     static #moduleCache = new Map();
+    static #devIndicatorModule = null;
 
     static get #isDev() {
         return Environment.isDev;
     }
 
-    static setup(server) {
+    static async setup(server) {
+        if (this.#isDev) {
+            const { default: DI } = await import("../Dev/DevIndicator.js");
+            this.#devIndicatorModule = DI;
+        }
+
         server.decorateReply("view", async function(name, params = {}) {
             const entry = View.#getEntry("user", name);
             if (!entry) {
@@ -127,9 +86,10 @@ class View {
 
             const csrf = this.request.session?.getCsrfToken?.();
             const fastifyRequest = this.request;
-            
+            const renderStart = performance.now();
+
             try {
-                const { html, nonce, meta, props } = await View.#render(
+                const { html, nonce, meta, flightPayload, translations } = await View.#render(
                     View.#userViews,
                     name,
                     params,
@@ -138,13 +98,25 @@ class View {
                     entry
                 );
 
+                if (View.#isDev && this.request.__devCtx) {
+                    const ctx = this.request.__devCtx;
+                    ctx.renderStart = renderStart;
+                    ctx.renderDuration = performance.now() - renderStart;
+                    ctx.viewName = name;
+                    ctx.rawProps = params;
+                    ctx.propUsage = entry?.propUsage;
+                }
+
+                const devData = View.#isDev ? this.request.__devCtx : null;
+
                 View.#setSecurityHeaders(this, nonce);
 
                 return this
                     .code(200)
                     .type("text/html")
-                    .send(View.#buildPage(entry, html, nonce, csrf, meta, props));
-            } catch (error) {
+                    .send(View.#buildPage(entry, html, nonce, csrf, meta, flightPayload, devData, translations));
+            }
+            catch (error) {
                 error.statusCode = error.statusCode || 500;
                 throw error;
             }
@@ -156,12 +128,12 @@ class View {
                 url: req.url,
                 ip: req.ip
             });
-            return View.#renderError(res, 404, "errors/404", {
+            return View.#renderError(req, res, 404, "errors/404", {
                 title: "404 - Not Found"
             });
         });
 
-        server.setErrorHandler((err, req, res) => {
+        server.setErrorHandler(async (err, req, res) => {
             const statusCode = err.statusCode || 500;
             Log.error("HTTP Error", {
                 error: err.message,
@@ -169,27 +141,50 @@ class View {
                 statusCode,
                 url: req.url
             });
-            return View.#renderError(res, statusCode, "errors/500", {
+
+            if (View.#isDev && statusCode >= 500) {
+                return View.#renderDevError(err, req, res, statusCode);
+            }
+
+            return View.#renderError(req, res, statusCode, "errors/500", {
                 title: "500 - Server Error",
                 message: View.#isDev ? err.message : "An unexpected error occurred"
             });
         });
 
-        server.get("/__nitron/navigate", async (req, res) => {
+        server.get("/__nitron/rsc", async (req, res) => {
             const url = req.query.url;
 
-            if (!url) {
+            if (!url || typeof url !== "string") {
                 return res.code(400).send({ error: "Missing url" });
             }
 
+            if (!isLocalPath(url)) {
+                return res.code(400).send({ error: "Invalid url" });
+            }
+
             const result = await View.#renderPartial(url, req, res);
 
             if (result.handled) return;
 
+            if (result.status && result.status !== 200) {
+                const safeError = View.#isDev ? result.error : "Request failed";
+                return res.code(result.status).send({ error: safeError });
+            }
+
+            const flightPayload = result.flightPayload;
+            const metadata = JSON.stringify({
+                meta: result.meta || {},
+                css: result.css || [],
+                translations: result.translations || {}
+            });
+            const body = flightPayload.length + "\n" + flightPayload + metadata;
+
             return res
-                .code(result.status || 200)
+                .code(200)
+                .type("text/x-component")
                 .header("X-Content-Type-Options", "nosniff")
-                .send(result);
+                .send(body);
         });
 
         if (View.#isDev) {
@@ -224,6 +219,7 @@ class View {
                 view: (name, p = {}) => { viewName = name; viewParams = p; return mockRes; },
                 redirect: (loc) => { redirectTo = loc; return mockRes; },
                 code: (c) => { originalRes.code(c); return mockRes; },
+                status: (c) => { originalRes.code(c); return mockRes; },
                 type: (t) => { originalRes.type(t); return mockRes; },
                 send: (d) => { handled = true; originalRes.send(d); return mockRes; },
                 header: (k, v) => { originalRes.header(k, v); return mockRes; }
@@ -234,6 +230,7 @@ class View {
                 url: parsedUrl.pathname,
                 query: Object.fromEntries(parsedUrl.searchParams),
                 params,
+                headers: originalReq.headers,
                 session: originalReq.session
             };
 
@@ -250,60 +247,41 @@ class View {
             }
 
             if (handled) return { handled: true };
-            if (redirectTo) return this.#validateRedirect(redirectTo, originalReq.headers.host);
+            if (redirectTo) return this.#validateRedirect(redirectTo);
 
             await (route.resolvedHandler || route.handler)(mockReq, mockRes);
 
             if (handled) return { handled: true };
-            if (redirectTo) return this.#validateRedirect(redirectTo, originalReq.headers.host);
+            if (redirectTo) return this.#validateRedirect(redirectTo);
             if (!viewName) return { status: 500, error: "No view rendered" };
 
             const entry = this.#getEntry("user", viewName);
             if (!entry) return { status: 404, error: "View not found" };
 
             const csrf = originalReq.session?.getCsrfToken?.();
-            const { html, meta, props } = await this.#render(
-                this.#userViews, viewName, viewParams, csrf, originalReq, entry
+            const { meta, flightPayload, translations } = await this.#render(
+                this.#userViews, viewName, viewParams, csrf, mockReq, entry
             );
 
-            const response = { html, layouts: entry.layouts || [], meta };
-
-            if (entry.hydrationScript) {
-                response.hydrationScript = entry.hydrationScript;
-                response.props = props;
-                response.runtime = {
-                    csrf: csrf || "",
-                    routes: this.#getRoutesForScript(entry.hydrationScript)
-                };
-            }
-
-            return response;
+            return {
+                flightPayload,
+                meta,
+                layouts: entry.layouts || [],
+                css: (entry.css || []).map(href => `/storage${href}`),
+                translations: translations || {}
+            };
         } catch (err) {
             Log.error("SPA Navigate Error", { error: err.message, url });
             return { status: 500, error: this.#isDev ? err.message : "Server error" };
         }
     }
 
-    static #validateRedirect(location, host) {
-        if (location.startsWith("/")) {
+    static #validateRedirect(location) {
+        if (location.startsWith("/") && !location.startsWith("//")) {
             return { redirect: location };
         }
-        try {
-            if (new URL(location).host === host) {
-                return { redirect: location };
-            }
-        } catch {}
-        return { status: 400, error: "Invalid redirect" };
-    }
 
-    static #getRoutesForScript(script) {
-        const allRoutes = Router.getClientManifest();
-        const usedNames = this.#getUsedRoutes(script);
-        const routes = {};
-        for (const name of usedNames) {
-            if (allRoutes[name]) routes[name] = allRoutes[name];
-        }
-        return routes;
+        return { status: 400, error: "Invalid redirect" };
     }
 
     static #getEntry(namespace, name) {
@@ -312,22 +290,23 @@ class View {
     }
 
     static #loadManifest() {
-        if (!existsSync(this.#manifestPath)) {
+        let stat;
+
+        try { stat = statSync(this.#manifestPath); }
+        catch {
             throw new Error("Build manifest missing");
         }
 
         if (this.#isDev && this.#manifest) {
-            try {
-                const mtime = statSync(this.#manifestPath).mtimeMs;
-                if (mtime !== this.#manifestMtime) {
-                    this.#manifest = null;
-                }
-            } catch {}
+            if (stat.mtimeMs !== this.#manifestMtime) {
+                this.#manifest = null;
+            }
         }
 
         if (!this.#manifest) {
-            this.#manifest = JSON.parse(readFileSync(this.#manifestPath, "utf8"));
-            this.#manifestMtime = statSync(this.#manifestPath).mtimeMs;
+            const raw = readFileSync(this.#manifestPath, "utf8");
+            this.#manifestMtime = stat.mtimeMs;
+            this.#manifest = JSON.parse(raw);
         }
 
         return this.#manifest;
@@ -342,7 +321,8 @@ class View {
         const resolvedPath = path.resolve(viewPath);
         const resolvedBase = path.resolve(baseDir);
 
-        if (!resolvedPath.startsWith(resolvedBase + path.sep)) {
+        const rel = path.relative(resolvedBase, resolvedPath);
+        if (!rel || rel.startsWith("..") || path.isAbsolute(rel)) {
             throw new Error("Invalid view path");
         }
 
@@ -351,10 +331,16 @@ class View {
         }
 
         const nonce = randomBytes(16).toString("hex");
+        const translations = Lang.getFilteredTranslations(
+            fastifyRequest?.locale || Config.get("app.locale", "en"),
+            entry?.translationKeys
+        );
+
         const ctx = {
             nonce,
             csrf,
-            props: {},
+            locale: fastifyRequest?.locale || Config.get("app.locale", "en"),
+            translations,
             request: fastifyRequest ? {
                 path: (fastifyRequest.url || '').split('?')[0],
                 method: fastifyRequest.method || 'GET',
@@ -366,6 +352,7 @@ class View {
                 isAjax: fastifyRequest.headers?.['x-requested-with'] === 'XMLHttpRequest',
                 session: fastifyRequest.session || null,
                 auth: fastifyRequest.auth || null,
+                locale: fastifyRequest.locale || Config.get("app.locale", "en"),
             } : null
         };
 
@@ -389,66 +376,33 @@ class View {
             }
 
             let html = "";
-            let collectedProps = {};
+            let flightPayload = null;
+
+            // Strip unused props from Flight payload for client components.
+            // Build-time AST analysis determines which props the component
+            // actually accesses — anything else is filtered out here.
+            const safeParams = toPlainProps(PropFilter.apply(params, entry?.propUsage));
 
             try {
                 const Component = mod.default;
-                let element;
 
-                if (Component[MARK]) {
-                    const tracker = trackProps(params);
-
-                    if (Component.__propHints) {
-                        for (const hint of Component.__propHints) {
-                            if (resolveExists(params, hint)) {
-                                tracker.accessed.add(hint);
-                            }
-                        }
-                    }
-
-                    ctx.props[":R0:"] = params;
-                    ctx.trackers = ctx.trackers || {};
-                    ctx.trackers[":R0:"] = tracker.accessed;
-
-                    element = React.createElement(
-                        "div",
-                        {
-                            "data-cid": ":R0:",
-                            "data-island": Component.displayName || Component.name || "Anonymous"
-                        },
-                        React.createElement(Component, tracker.proxy)
-                    );
-                } else {
-                    element = Component(params);
-                    if (element && typeof element.then === "function") {
-                        element = await element;
-                    }
-                }
-
-                if (layoutModules.length > 0) {
-                    element = React.createElement("div", { "data-nitron-slot": "page" }, element);
-                }
+                let element = React.createElement(Component, safeParams);
 
                 for (let i = layoutModules.length - 1; i >= 0; i--) {
                     const LayoutComponent = layoutModules[i].default;
-                    element = LayoutComponent({ children: element });
-
-                    if (element && typeof element.then === "function") {
-                        element = await element;
-                    }
+                    element = React.createElement(LayoutComponent, { children: element });
                 }
 
-                html = await this.#renderToHtml(element);
+                // Dual render: HTML for initial paint + Flight payload for hydration
+                const clientManifest = ClientManifest.get();
 
-                if (ctx.trackers) {
-                    for (const [id, accessed] of Object.entries(ctx.trackers)) {
-                        if (ctx.props[id]) {
-                            ctx.props[id] = this.#pickProps(ctx.props[id], accessed);
-                        }
-                    }
-                }
+                const [htmlResult, payloadResult] = await Promise.all([
+                    this.#renderToHtml(element),
+                    FlightRenderer.render(element, clientManifest)
+                ]);
 
-                collectedProps = ctx.props;
+                html = htmlResult;
+                flightPayload = payloadResult;
             } catch (error) {
                 const componentName = mod.default?.displayName || mod.default?.name || "Unknown";
                 const errorDetails = this.#parseReactError(error);
@@ -466,13 +420,14 @@ class View {
                 throw error;
             }
 
-            const mergedMeta = this.#mergeMeta(layoutModules, mod.Meta, params);
+            const mergedMeta = this.#mergeMeta(layoutModules, mod.Meta, safeParams);
 
             return {
                 html,
                 nonce,
                 meta: mergedMeta,
-                props: collectedProps
+                flightPayload,
+                translations
             };
         });
     }
@@ -503,7 +458,7 @@ class View {
                         ? resolvedViewMeta.title.default
                         : resolvedViewMeta.title;
                     if (viewTitle) {
-                        result.title = result.title.template.replace("%s", viewTitle);
+                        result.title = result.title.template.replaceAll("%s", viewTitle);
                     }
                 } else {
                     result[key] = resolvedViewMeta[key];
@@ -581,106 +536,6 @@ class View {
         return cached.mod.__factory ? await cached.mod.default() : cached.mod;
     }
 
-    static #sanitizeProps(obj, seen = new WeakSet()) {
-        if (obj == null) {
-            return obj;
-        }
-
-        const type = typeof obj;
-
-        if (type === "function" || type === "symbol") {
-            return undefined;
-        }
-
-        if (type === "bigint") {
-            return obj.toString();
-        }
-
-        if (type !== "object") {
-            return obj;
-        }
-
-        if (seen.has(obj)) {
-            return undefined;
-        }
-        seen.add(obj);
-
-        if (Array.isArray(obj)) {
-            return obj.map(item => this.#sanitizeProps(item, seen) ?? null);
-        }
-
-        if (obj instanceof Date) {
-            return obj.toISOString();
-        }
-
-        if (obj._attributes && typeof obj._attributes === "object") {
-            return this.#sanitizeProps(obj._attributes, seen);
-        }
-
-        if (typeof obj.toJSON === "function") {
-            return this.#sanitizeProps(obj.toJSON(), seen);
-        }
-
-        const proto = Object.getPrototypeOf(obj);
-        if (proto !== Object.prototype && proto !== null) {
-            return undefined;
-        }
-
-        const result = {};
-        for (const key of Object.keys(obj)) {
-            if (UNSAFE_KEYS.has(key)) {
-                continue;
-            }
-            const value = this.#sanitizeProps(obj[key], seen);
-            if (value !== undefined) {
-                result[key] = value;
-            }
-        }
-        return result;
-    }
-
-    static #pickProps(props, accessed) {
-        const paths = [...accessed].sort();
-        const leaves = [];
-
-        for (let i = 0; i < paths.length; i++) {
-            const isLeaf = i === paths.length - 1 || !paths[i + 1].startsWith(paths[i] + ".");
-
-            if (isLeaf) {
-                leaves.push(paths[i]);
-            }
-        }
-
-        const result = {};
-
-        for (const leaf of leaves) {
-            const parts = leaf.split(".");
-            let src = props;
-            let dst = result;
-
-            for (let i = 0; i < parts.length - 1; i++) {
-                if (src == null) break;
-
-                const nextSrc = src[parts[i]];
-
-                if (dst[parts[i]] == null) {
-                    dst[parts[i]] = Array.isArray(nextSrc) ? [] : {};
-                }
-
-                src = nextSrc;
-                dst = dst[parts[i]];
-            }
-
-            const last = parts[parts.length - 1];
-
-            if (src != null && !(Array.isArray(dst) && last === "length")) {
-                dst[last] = src[last];
-            }
-        }
-
-        return this.#sanitizeProps(result);
-    }
-
     static #renderToHtml(element) {
         return new Promise((resolve, reject) => {
             const chunks = [];
@@ -706,6 +561,7 @@ class View {
                 const error = new Error("Render timeout - component took too long to render");
                 error.statusCode = 500;
                 renderError = error;
+                stream.destroy();
                 finish(null);
             }, timeout);
 
@@ -733,14 +589,16 @@ class View {
         });
     }
 
-    static async #renderError(res, statusCode, viewName, params) {
+    static async #renderError(req, res, statusCode, viewName, params) {
         try {
             const entry = this.#getEntry("framework", viewName);
-            const { html, nonce, meta, props } = await this.#render(
+            const { html, nonce, meta, flightPayload, translations } = await this.#render(
                 this.#frameworkViews,
                 viewName,
                 params,
-                ""
+                "",
+                req,
+                entry
             );
 
             this.#setSecurityHeaders(res, nonce);
@@ -748,144 +606,110 @@ class View {
             return res
                 .code(statusCode)
                 .type("text/html")
-                .send(this.#buildPage(entry, html, nonce, "", meta, props));
-        } catch (error) {
+                .send(this.#buildPage(entry, html, nonce, "", meta, flightPayload, null, translations));
+        }
+        catch (error) {
             Log.error(`Failed to render ${viewName}`, { error: error.message });
             const message = statusCode === 404 ? "Not Found" : "Internal Server Error";
             return res.code(statusCode).send(message);
         }
     }
 
-    static #buildPage(entry, html, nonce, csrf = "", meta = null, props = {}) {
-        let processedMeta = meta || {};
+    static async #renderDevError(err, req, res, statusCode) {
+        try {
+            const { default: DevErrorPage } = await import("../Dev/DevErrorPage.js");
+            const nonce = randomBytes(16).toString("hex");
+            const devCtx = req.__devCtx || {};
 
-        if (meta?.title && typeof meta.title === "object") {
-            processedMeta = {
-                ...meta,
-                title: meta.title.default || "NitronJS"
+            devCtx.request = {
+                url: req.url,
+                method: req.method,
+                headers: { ...req.headers },
+                query: req.query || {},
+                params: req.params || {},
+                body: req.body || null,
+                cookies: req.cookies || {},
+                ip: req.ip
             };
+
+            const html = DevErrorPage.render(err, devCtx, nonce);
+
+            this.#setSecurityHeaders(res, nonce);
+
+            return res
+                .code(statusCode)
+                .type("text/html")
+                .send(html);
         }
+        catch (fallbackError) {
+            Log.error("Dev error page failed", { error: fallbackError.message });
+            return res.code(statusCode).send("Internal Server Error");
+        }
+    }
 
+    static #buildPage(entry, html, nonce, csrf = "", meta = null, flightPayload = null, devData = null, translations = null) {
         const cssFiles = (entry?.css || []).map(href => `/storage${href}`);
 
         return this.#generateHtml({
             html,
-            meta: processedMeta,
+            meta: meta || {},
             css: cssFiles,
-            hydrationScript: entry?.hydrationScript,
             layouts: entry?.layouts || [],
             nonce,
             csrf,
-            props
+            flightPayload,
+            devData,
+            translations
         });
     }
 
-    static #getUsedRoutes(script) {
-        if (!script) {
-            return [];
-        }
-
-        if (this.#isDev) {
-            this.#routesCache = new Map();
-            this.#scanBundles();
-        } else if (!this.#routesCache) {
-            this.#routesCache = new Map();
-            this.#scanBundles();
-        }
-
-        return this.#routesCache.get(script) || [];
-    }
-
-    static #scanBundles() {
-        const jsDir = path.join(this.#root, "storage/app/public/js");
-
-        if (!existsSync(jsDir)) {
-            return;
-        }
-
-        const scan = (dir) => {
-            for (const entry of readdirSync(dir, { withFileTypes: true })) {
-                const fullPath = path.join(dir, entry.name);
-
-                if (entry.isDirectory()) {
-                    scan(fullPath);
-                    continue;
-                }
-
-                if (!entry.name.endsWith(".js") || entry.name === "vendor.js") {
-                    continue;
-                }
-
-                const content = readFileSync(fullPath, "utf8");
-                
-                // Match both old format (routes["name"]) and new format (route("name"))
-                const oldMatches = [...content.matchAll(/routes\["([^"]+)"\]/g)];
-                const newMatches = [...content.matchAll(/route\s*\(\s*['"]([^'"]+)['"]/g)];
-                
-                const routes = [
-                    ...oldMatches.map(match => match[1]),
-                    ...newMatches.map(match => match[1])
-                ];
-                
-                const relativePath = "/js/" + path.relative(jsDir, fullPath).replace(/\\/g, "/");
-
-                this.#routesCache.set(relativePath, [...new Set(routes)]);
-            }
-        };
-
-        scan(jsDir);
-    }
-
-    static #generateHtml({ html, meta, css, hydrationScript, layouts, nonce, csrf, props }) {
+    static #generateHtml({ html, meta, css, layouts, nonce, csrf, flightPayload, devData, translations }) {
         const nonceAttr = nonce ? ` nonce="${escapeHtml(nonce)}"` : "";
-        const hasHydration = !!hydrationScript;
-
-        const allRoutes = Router.getClientManifest();
-        const usedRouteNames = hasHydration ? this.#getUsedRoutes(hydrationScript) : [];
-        const routes = {};
-        for (const name of usedRouteNames) {
-            if (allRoutes[name]) routes[name] = allRoutes[name];
-        }
+        const hasFlightPayload = !!flightPayload;
 
         const runtimeData = {
             csrf: csrf || "",
-            routes,
+            routes: Router.getClientManifest(),
             layouts: layouts || []
         };
 
-        let runtimeScript;
-        if (hasHydration) {
-            const propsJson = JSON.stringify(props || {}).replace(/</g, "\\u003c").replace(/>/g, "\\u003e");
-            runtimeScript = `<script${nonceAttr}>window.__NITRON_RUNTIME__=${JSON.stringify(runtimeData)};window.__NITRON_PROPS__=${propsJson};</script>`;
-        } else {
-            runtimeScript = `<script${nonceAttr}>window.__NITRON_RUNTIME__=${JSON.stringify(runtimeData)};</script>`;
+        let runtimeScript = `<script${nonceAttr}>window.__NITRON_RUNTIME__=${JSON.stringify(runtimeData)};`;
+
+        if (hasFlightPayload) {
+            const escapedPayload = flightPayload.replace(/</g, "\\u003c").replace(/>/g, "\\u003e");
+            runtimeScript += `window.__NITRON_FLIGHT__=${JSON.stringify(escapedPayload)};`;
         }
 
-        const vendorScript = hasHydration || this.#isDev
-            ? `<script src="/storage/js/vendor.js"${nonceAttr}></script>`
-            : "";
+        if (translations && Object.keys(translations).length > 0) {
+            const escapedTranslations = JSON.stringify(translations).replace(/</g, "\\u003c").replace(/>/g, "\\u003e");
+            runtimeScript += `window.__NITRON_TRANSLATIONS__=${escapedTranslations};`;
+        }
+
+        runtimeScript += `</script>`;
+
+        const vendorScript = `<script src="/storage/js/vendor.js"${nonceAttr}></script>`;
 
         const hmrScript = this.#isDev
             ? `<script src="/__nitron_client/socket.io.js"${nonceAttr}></script><script src="/storage/js/hmr.js"${nonceAttr}></script>`
             : "";
 
-        const hydrateScript = hasHydration
-            ? `<script type="module" src="/storage${hydrationScript}"${nonceAttr}></script>`
+        const consumerScript = hasFlightPayload
+            ? `<script type="module" src="/storage/js/rsc-consumer.js"${nonceAttr}></script>`
             : "";
 
         const spaScript = `<script${nonceAttr} src="/storage/js/spa.js"></script>`;
 
-        const devIndicator = this.#isDev ? this.#generateDevIndicator(nonceAttr) : "";
+        const devIndicator = this.#isDev ? this.#generateDevIndicator(nonceAttr, devData) : "";
 
         return `<!DOCTYPE html>
-<html lang="${meta?.lang || "en"}">
+<html lang="${escapeHtml(meta?.lang || "en")}">
 <head>
 ${this.#generateHead(meta, css)}
 </head>
 <body>
 <div id="app">${html}</div>
 ${runtimeScript}
-${vendorScript}${hmrScript}${hydrateScript}${spaScript}${devIndicator}
+${vendorScript}${hmrScript}${consumerScript}${spaScript}${devIndicator}
 </body>
 </html>`;
     }
@@ -906,7 +730,11 @@ ${vendorScript}${hmrScript}${hydrateScript}${spaScript}${devIndicator}
         }
 
         if (meta.favicon) {
-            parts.push(`<link rel="icon" href="${escapeHtml(meta.favicon)}">`);
+            const faviconLower = meta.favicon.toLowerCase().trim();
+            
+            if (faviconLower.startsWith("/") || faviconLower.startsWith("https://") || faviconLower.startsWith("http://")) {
+                parts.push(`<link rel="icon" href="${escapeHtml(meta.favicon)}">`);
+            }
         }
 
         for (const href of css) {
@@ -916,124 +744,9 @@ ${vendorScript}${hmrScript}${hydrateScript}${spaScript}${devIndicator}
         return parts.join("\n");
     }
 
-    static #generateDevIndicator(nonceAttr) {
-        const nodeVersion = process.version;
-        const port = Config.get("server.port", 3000);
-        
-        return `
-<div id="__nitron_dev__" style="position:fixed;bottom:16px;left:16px;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
-  <style${nonceAttr}>
-    #__nitron_dev__ * { box-sizing: border-box; }
-    #__nitron_dev_btn__ {
-      display:flex;align-items:center;gap:8px;padding:8px 14px;
-      background:#0a0a0a;
-      color:#fff;border:1px solid #1f1f1f;border-radius:10px;
-      cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,0.5);
-      transition:all 0.2s ease;font-size:13px;font-weight:500;
-    }
-    #__nitron_dev_btn__:hover {
-      background:#111;border-color:#2a2a2a;
-      box-shadow:0 6px 24px rgba(0,0,0,0.6);
-    }
-    #__nitron_dev_btn__ .logo { 
-      width:20px;height:20px;
-      display:flex;align-items:center;justify-content:center;
-    }
-    #__nitron_dev_btn__ .logo svg { width:20px;height:20px; }
-    #__nitron_dev_btn__ .dot { width:6px;height:6px;border-radius:50%;animation:pulse 2s infinite; }
-    @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
-    #__nitron_dev_panel__ {
-      display:none;position:absolute;bottom:48px;left:0;width:260px;
-      background:#0a0a0a;
-      border:1px solid #1f1f1f;border-radius:12px;
-      box-shadow:0 16px 48px rgba(0,0,0,0.6);
-      overflow:hidden;animation:slideUp 0.15s ease-out;
-    }
-    @keyframes slideUp { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
-    #__nitron_dev_panel__ .header {
-      padding:14px 16px;background:#111;
-      border-bottom:1px solid #1f1f1f;display:flex;align-items:center;gap:10px;
-    }
-    #__nitron_dev_panel__ .header .icon {
-      width:28px;height:28px;
-      border-radius:6px;display:flex;align-items:center;justify-content:center;
-    }
-    #__nitron_dev_panel__ .header .info { display:flex;flex-direction:column; }
-    #__nitron_dev_panel__ .header .title { font-size:14px;font-weight:600;color:#fff;line-height:1.2; }
-    #__nitron_dev_panel__ .header .version { font-size:11px;color:#666;line-height:1.2; }
-    #__nitron_dev_panel__ .header .badge {
-      margin-left:auto;padding:3px 8px;background:#1a1a1a;
-      color:#4ade80;font-size:10px;font-weight:600;border-radius:4px;text-transform:uppercase;
-      border:1px solid #2a2a2a;
-    }
-    #__nitron_dev_panel__ .body { padding:12px 16px; }
-    #__nitron_dev_panel__ .row {
-      display:flex;justify-content:space-between;align-items:center;
-      padding:7px 0;border-bottom:1px solid #1a1a1a;
-    }
-    #__nitron_dev_panel__ .row:last-child { border-bottom:none; }
-    #__nitron_dev_panel__ .row .label { color:#666;font-size:12px; }
-    #__nitron_dev_panel__ .row .value { color:#999;font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px; }
-    #__nitron_dev_panel__ .row .status { width:6px;height:6px;border-radius:50%; }
-    #__nitron_dev_panel__ .row .status.ok { background:#4ade80; }
-    #__nitron_dev_panel__ .row .status.warn { background:#fbbf24; }
-    #__nitron_dev_panel__ .row .status.err { background:#ef4444; }
-    #__nitron_dev_panel__ .footer {
-      padding:10px 16px;background:#080808;border-top:1px solid #1a1a1a;
-      display:flex;gap:6px;
-    }
-    #__nitron_dev_panel__ .footer a {
-      flex:1;padding:6px;background:#111;border:1px solid #1f1f1f;
-      border-radius:6px;color:#666;font-size:10px;text-decoration:none;text-align:center;
-      transition:all 0.15s;
-    }
-    #__nitron_dev_panel__ .footer a:hover { background:#1a1a1a;color:#999;border-color:#2a2a2a; }
-  </style>
-  <button id="__nitron_dev_btn__">
-    <span class="logo"><img src="/__nitron/icon.png" alt="N" style="width:20px;height:20px;"></span>
-    <span style="color:#888;">NitronJS</span>
-    <span class="dot" id="__nitron_status_dot__" style="background:#4ade80;"></span>
-  </button>
-  <div id="__nitron_dev_panel__" style="display:none;">
-    <div class="header">
-      <div class="icon"><img src="/__nitron/icon.png" alt="N" style="width:28px;height:28px;"></div>
-      <div class="info">
-        <span class="title">NitronJS</span>
-        <span class="version">v${FRAMEWORK_VERSION}</span>
-      </div>
-      <span class="badge">dev</span>
-    </div>
-    <div class="body">
-      <div class="row"><span class="label">HMR</span><span class="value"><span class="status" id="__nitron_hmr_ind__"></span><span id="__nitron_hmr_txt__">Checking...</span></span></div>
-      <div class="row"><span class="label">Server</span><span class="value">localhost:${port}</span></div>
-      <div class="row"><span class="label">Node.js</span><span class="value">${nodeVersion}</span></div>
-    </div>
-    <div class="footer">
-      <a href="/__nitron/routes" target="_blank">Routes</a>
-      <a href="/__nitron/info" target="_blank">Info</a>
-      <a href="https://nitronjs.dev/docs" target="_blank">Docs</a>
-    </div>
-  </div>
-</div>
-<script${nonceAttr}>
-(function(){
-  var btn=document.getElementById('__nitron_dev_btn__');
-  var panel=document.getElementById('__nitron_dev_panel__');
-  var dot=document.getElementById('__nitron_status_dot__');
-  var hmrInd=document.getElementById('__nitron_hmr_ind__');
-  var hmrTxt=document.getElementById('__nitron_hmr_txt__');
-  btn.onclick=function(e){e.stopPropagation();panel.style.display=panel.style.display==='none'?'block':'none';};
-  document.addEventListener('click',function(e){if(!e.target.closest('#__nitron_dev__'))panel.style.display='none';});
-  function updateHmr(){
-    var connected=window.__nitron_hmr_connected__;
-    hmrInd.className='status '+(connected?'ok':'err');
-    hmrTxt.textContent=connected?'Connected':'Disconnected';
-    dot.style.background=connected?'#4ade80':'#ef4444';
-  }
-  if(typeof io!=='undefined'){setInterval(updateHmr,1000);updateHmr();}
-  else{hmrInd.className='status warn';hmrTxt.textContent='Not Available';}
-})();
-</script>`;
+    static #generateDevIndicator(nonceAttr, devData = null) {
+        if (!this.#devIndicatorModule) return "";
+        return this.#devIndicatorModule.render(nonceAttr, devData);
     }
 
     static #setSecurityHeaders(res, nonce) {
@@ -1044,11 +757,12 @@ ${vendorScript}${hmrScript}${hydrateScript}${spaScript}${devIndicator}
         // Example: csp: ["https://fonts.googleapis.com", "https://fonts.gstatic.com"]
         // Or detailed format: csp: { styles: [...], fonts: [...] }
         const isSimpleFormat = Array.isArray(cspConfig);
-        
+        const sanitizeCspValue = (v) => String(v).replace(/[;\r\n,]/g, "").trim();
+
         let whitelist;
         if (isSimpleFormat) {
             // Simple format: apply URLs to all relevant directives
-            const urls = cspConfig.filter(u => u !== "*");
+            const urls = cspConfig.filter(u => u !== "*").map(sanitizeCspValue);
             const hasWildcard = cspConfig.includes("*");
             whitelist = {
                 styles: hasWildcard ? ["*"] : urls,
@@ -1058,14 +772,16 @@ ${vendorScript}${hmrScript}${hydrateScript}${spaScript}${devIndicator}
                 connect: hasWildcard ? ["*"] : urls,
                 frames: hasWildcard ? ["*"] : [],
             };
-        } else {
+        }
+        else {
+            const sanitizeList = (arr) => (arr || []).map(sanitizeCspValue);
             whitelist = {
-                styles: cspConfig.styles || [],
-                fonts: cspConfig.fonts || [],
-                images: cspConfig.images || [],
-                scripts: cspConfig.scripts || [],
-                connect: cspConfig.connect || [],
-                frames: cspConfig.frames || [],
+                styles: sanitizeList(cspConfig.styles),
+                fonts: sanitizeList(cspConfig.fonts),
+                images: sanitizeList(cspConfig.images),
+                scripts: sanitizeList(cspConfig.scripts),
+                connect: sanitizeList(cspConfig.connect),
+                frames: sanitizeList(cspConfig.frames),
             };
         }
 
@@ -1106,4 +822,23 @@ ${vendorScript}${hmrScript}${hydrateScript}${spaScript}${devIndicator}
     }
 }
 
+/**
+ * Recursively converts Model instances (Proxy-wrapped objects with toJSON)
+ * to plain objects so RSC Flight serializer can process them.
+ */
+function toPlainProps(value) {
+    if (value == null || typeof value !== "object") return value;
+    if (value instanceof Date) return value;
+    if (Array.isArray(value)) return value.map(toPlainProps);
+    if (typeof value.toJSON === "function") return toPlainProps(value.toJSON());
+
+    const result = {};
+
+    for (const [key, val] of Object.entries(value)) {
+        result[key] = toPlainProps(val);
+    }
+
+    return result;
+}
+
 export default View;