@flexireact/core 4.0.0 → 4.1.1

package/dist/core/index.js

@@ -2,46 +2,59 @@
 import fs from "fs";
 import path from "path";
 import { pathToFileURL } from "url";
-var defaultConfig = {
+import { z } from "zod";
+import pc from "picocolors";
+var BuildConfigSchema = z.object({
+  target: z.string().default("es2022"),
+  minify: z.boolean().default(true),
+  sourcemap: z.boolean().default(true),
+  splitting: z.boolean().default(true)
+}).default({});
+var ServerConfigSchema = z.object({
+  port: z.number().min(1).max(65535).default(3e3),
+  host: z.string().default("localhost")
+}).default({});
+var SSGConfigSchema = z.object({
+  enabled: z.boolean().default(false),
+  paths: z.array(z.string()).default([])
+}).default({});
+var IslandsConfigSchema = z.object({
+  enabled: z.boolean().default(true),
+  directive: z.string().default("use island")
+}).default({});
+var RSCConfigSchema = z.object({
+  enabled: z.boolean().default(true)
+}).default({});
+var PluginSchema = z.object({
+  name: z.string(),
+  setup: z.function().optional()
+}).passthrough();
+var FlexiReactConfigSchema = z.object({
   // Directories
-  pagesDir: "pages",
-  layoutsDir: "layouts",
-  publicDir: "public",
-  outDir: ".flexi",
+  pagesDir: z.string().default("pages"),
+  layoutsDir: z.string().default("layouts"),
+  publicDir: z.string().default("public"),
+  outDir: z.string().default(".flexi"),
   // Build options
-  build: {
-    target: "es2022",
-    minify: true,
-    sourcemap: true,
-    splitting: true
-  },
+  build: BuildConfigSchema,
   // Server options
-  server: {
-    port: 3e3,
-    host: "localhost"
-  },
+  server: ServerConfigSchema,
   // SSG options
-  ssg: {
-    enabled: false,
-    paths: []
-  },
+  ssg: SSGConfigSchema,
   // Islands (partial hydration)
-  islands: {
-    enabled: true
-  },
+  islands: IslandsConfigSchema,
   // RSC options
-  rsc: {
-    enabled: true
-  },
+  rsc: RSCConfigSchema,
   // Plugins
-  plugins: [],
+  plugins: z.array(PluginSchema).default([]),
   // Styles (CSS files to include)
-  styles: [],
+  styles: z.array(z.string()).default([]),
   // Scripts (JS files to include)
-  scripts: [],
+  scripts: z.array(z.string()).default([]),
   // Favicon path
-  favicon: null
-};
+  favicon: z.string().nullable().default(null)
+});
+var defaultConfig = FlexiReactConfigSchema.parse({});
 async function loadConfig(projectRoot) {
   const configPathTs = path.join(projectRoot, "flexireact.config.ts");
   const configPathJs = path.join(projectRoot, "flexireact.config.js");
@@ -53,10 +66,22 @@ async function loadConfig(projectRoot) {
       const module = await import(`${configUrl}?t=${Date.now()}`);
       userConfig = module.default || module;
     } catch (error) {
-      console.warn("Warning: Failed to load flexireact config:", error.message);
+      console.warn(pc.yellow(`\u26A0 Failed to load config: ${error.message}`));
+    }
+  }
+  const merged = deepMerge(defaultConfig, userConfig);
+  try {
+    return FlexiReactConfigSchema.parse(merged);
+  } catch (err) {
+    if (err instanceof z.ZodError) {
+      console.error(pc.red("\u2716 Configuration validation failed:"));
+      for (const issue of err.issues) {
+        console.error(pc.dim(`  - ${issue.path.join(".")}: ${issue.message}`));
+      }
+      process.exit(1);
     }
+    throw err;
   }
-  return deepMerge(defaultConfig, userConfig);
 }
 function deepMerge(target, source) {
   const result = { ...target };
@@ -259,7 +284,7 @@ function buildRouteTree(pagesDir, layoutsDir, appDir = null, routesDir = null) {
     appRoutes: [],
     // Next.js style app router routes
     flexiRoutes: []
-    // FlexiReact v2 routes/ directory
+    // FlexiReact v4 routes/ directory
   };
   const routesDirPath = routesDir || path3.join(projectRoot, "routes");
   if (fs3.existsSync(routesDirPath)) {
@@ -610,32 +635,72 @@ async function renderPage(options) {
     favicon = null,
     isSSG = false,
     route = "/",
-    needsHydration = false
+    needsHydration = false,
+    componentPath = ""
   } = options;
   const renderStart = Date.now();
   try {
-    let element = React2.createElement(Component, props);
-    if (error) {
-      element = React2.createElement(ErrorBoundaryWrapper, {
-        fallback: error,
-        children: element
-      });
-    }
-    if (loading) {
-      element = React2.createElement(React2.Suspense, {
-        fallback: React2.createElement(loading),
-        children: element
-      });
-    }
-    for (const layout of [...layouts].reverse()) {
-      if (layout.Component) {
-        const LayoutComponent = layout.Component;
-        element = React2.createElement(LayoutComponent, {
-          ...layout.props
-        }, element);
+    let element;
+    let content;
+    let isClientOnly = false;
+    try {
+      element = React2.createElement(Component, props);
+      if (error) {
+        element = React2.createElement(ErrorBoundaryWrapper, {
+          fallback: error,
+          children: element
+        });
+      }
+      if (loading) {
+        element = React2.createElement(React2.Suspense, {
+          fallback: React2.createElement(loading),
+          children: element
+        });
+      }
+      for (const layout of [...layouts].reverse()) {
+        if (layout.Component) {
+          const LayoutComponent = layout.Component;
+          element = React2.createElement(LayoutComponent, {
+            ...layout.props
+          }, element);
+        }
+      }
+      content = renderToString(element);
+    } catch (renderErr) {
+      const isHookError = renderErr.message?.includes("useState") || renderErr.message?.includes("useEffect") || renderErr.message?.includes("useContext") || renderErr.message?.includes("useReducer") || renderErr.message?.includes("useRef") || renderErr.message?.includes("Invalid hook call");
+      if (isHookError || needsHydration) {
+        isClientOnly = true;
+        const placeholderHtml = `
+          <div id="flexi-root" data-client-component="true" data-component-path="${escapeHtml(componentPath)}">
+            <div class="flexi-loading" style="display:flex;align-items:center;justify-content:center;min-height:200px;color:#666;">
+              <div style="text-align:center;">
+                <div style="width:40px;height:40px;border:3px solid #e0e0e0;border-top-color:#3b82f6;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 12px;"></div>
+                <div>Loading...</div>
+              </div>
+            </div>
+            <style>@keyframes spin{to{transform:rotate(360deg)}}</style>
+          </div>
+        `;
+        let wrappedContent = placeholderHtml;
+        for (const layout of [...layouts].reverse()) {
+          if (layout.Component) {
+            try {
+              const layoutElement = React2.createElement(layout.Component, {
+                ...layout.props,
+                children: React2.createElement("div", {
+                  dangerouslySetInnerHTML: { __html: wrappedContent }
+                })
+              });
+              wrappedContent = renderToString(layoutElement);
+            } catch {
+            }
+          }
+        }
+        content = wrappedContent;
+      } else {
+        throw renderErr;
       }
     }
-    const content = renderToString(element);
     const renderTime = Date.now() - renderStart;
     const islandScripts = generateIslandScripts(islands);
     return buildHtmlDocument({
@@ -649,7 +714,8 @@ async function renderPage(options) {
       isSSG,
       renderTime,
       route,
-      isClientComponent: needsHydration
+      isClientComponent: needsHydration || isClientOnly,
+      componentPath
     });
   } catch (err) {
     console.error("Render Error:", err);
@@ -807,7 +873,7 @@ function generateDevToolbar(options = {}) {
   const timeColor = renderTime < 50 ? "#00FF9C" : renderTime < 200 ? "#fbbf24" : "#ef4444";
   const timeLabel = renderTime < 50 ? "Fast" : renderTime < 200 ? "OK" : "Slow";
   return `
-<!-- FlexiReact v2 Dev Toolbar -->
+<!-- FlexiReact v4.1.0 Dev Toolbar -->
 <div id="flexi-dev-toolbar" class="flexi-dev-collapsed">
   <style>
     #flexi-dev-toolbar {
@@ -1115,7 +1181,7 @@ function generateDevToolbar(options = {}) {
       <div class="flexi-dev-header-logo">F</div>
       <div class="flexi-dev-header-info">
         <div class="flexi-dev-header-title">FlexiReact</div>
-        <div class="flexi-dev-header-subtitle">v2.0.0 \u2022 Development</div>
+        <div class="flexi-dev-header-subtitle">v4.1.0 \u2022 Development</div>
       </div>
       <button class="flexi-dev-close" onclick="this.closest('#flexi-dev-toolbar').classList.remove('flexi-dev-open')">\u2715</button>
     </div>
@@ -1168,9 +1234,9 @@ function generateDevToolbar(options = {}) {
 </div>
 
 <script>
-  // FlexiReact v2 DevTools
+  // FlexiReact v4 DevTools
   window.__FLEXI_DEV__ = {
-    version: '2.0.0',
+    version: '4.1.0',
     renderTime: ${renderTime},
     pageType: '${pageType}',
     route: '${route}',
@@ -1205,7 +1271,7 @@ function generateDevToolbar(options = {}) {
   
   // Console branding
   console.log(
-    '%c \u26A1 FlexiReact v2 %c ${pageType} %c ${renderTime}ms ',
+    '%c \u26A1 FlexiReact v4.1.0 %c ${pageType} %c ${renderTime}ms ',
     'background: #00FF9C; color: #000; font-weight: bold; padding: 2px 6px; border-radius: 4px 0 0 4px;',
     'background: #1e1e1e; color: #fafafa; padding: 2px 6px;',
     'background: ${timeColor}20; color: ${timeColor}; padding: 2px 6px; border-radius: 0 4px 4px 0;'
@@ -1306,7 +1372,7 @@ function renderError(statusCode, message, stack = null) {
     401: { title: "Unauthorized", icon: "key", color: "#8b5cf6", desc: "Please log in to access this page." }
   };
   const errorInfo = errorMessages[statusCode] || { title: "Error", icon: "alert", color: "#ef4444", desc: message };
-  const errorFramesHtml = showStack && errorDetails?.frames?.length > 0 ? errorDetails.frames.slice(0, 5).map((frame, i) => `
+  const errorFramesHtml = showStack && errorDetails?.frames?.length && errorDetails.frames.length > 0 ? errorDetails.frames.slice(0, 5).map((frame, i) => `
         <div class="error-frame ${i === 0 ? "error-frame-first" : ""}">
           <div class="error-frame-fn">${escapeHtml(frame.fn)}</div>
           <div class="error-frame-loc">${escapeHtml(frame.file)}:${frame.line}:${frame.col}</div>
@@ -1606,7 +1672,7 @@ function renderError(statusCode, message, stack = null) {
     ${isDev ? `
     <div class="dev-badge">
       <div class="dev-badge-dot"></div>
-      FlexiReact v2
+      FlexiReact v4.1.0
     </div>
     ` : ""}
 </body>
@@ -2229,12 +2295,12 @@ function Island({ component: Component, props = {}, name, clientPath }) {
     clientPath,
     props
   });
-  const content = renderToString2(React3.createElement(Component, props));
+  const placeholder = `<div class="island-loading" data-island-placeholder="${name}">Loading...</div>`;
   return React3.createElement("div", {
     "data-island": islandId,
     "data-island-name": name,
     "data-island-props": JSON.stringify(props),
-    dangerouslySetInnerHTML: { __html: content }
+    dangerouslySetInnerHTML: { __html: placeholder }
   });
 }
 function getRegisteredIslands() {
@@ -2425,10 +2491,7 @@ var colors = {
   reset: "\x1B[0m",
   bold: "\x1B[1m",
   dim: "\x1B[2m",
-  italic: "\x1B[3m",
-  underline: "\x1B[4m",
   // Text colors
-  black: "\x1B[30m",
   red: "\x1B[31m",
   green: "\x1B[32m",
   yellow: "\x1B[33m",
@@ -2436,22 +2499,7 @@ var colors = {
   magenta: "\x1B[35m",
   cyan: "\x1B[36m",
   white: "\x1B[37m",
-  gray: "\x1B[90m",
-  // Bright colors
-  brightRed: "\x1B[91m",
-  brightGreen: "\x1B[92m",
-  brightYellow: "\x1B[93m",
-  brightBlue: "\x1B[94m",
-  brightMagenta: "\x1B[95m",
-  brightCyan: "\x1B[96m",
-  brightWhite: "\x1B[97m",
-  // Background colors
-  bgRed: "\x1B[41m",
-  bgGreen: "\x1B[42m",
-  bgYellow: "\x1B[43m",
-  bgBlue: "\x1B[44m",
-  bgMagenta: "\x1B[45m",
-  bgCyan: "\x1B[46m"
+  gray: "\x1B[90m"
 };
 var c = colors;
 function getStatusColor(status) {
@@ -2462,16 +2510,7 @@ function getStatusColor(status) {
   return c.white;
 }
 function getMethodColor(method) {
-  const methodColors = {
-    GET: c.brightGreen,
-    POST: c.brightBlue,
-    PUT: c.brightYellow,
-    PATCH: c.brightMagenta,
-    DELETE: c.brightRed,
-    OPTIONS: c.gray,
-    HEAD: c.gray
-  };
-  return methodColors[method] || c.white;
+  return c.white;
 }
 function formatTime2(ms) {
   if (ms < 1) return `${c.gray}<1ms${c.reset}`;
@@ -2480,137 +2519,107 @@ function formatTime2(ms) {
   return `${c.red}${ms}ms${c.reset}`;
 }
 var LOGO = `
-${c.green}   \u256D\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256E${c.reset}
-${c.green}   \u2502${c.reset}                                             ${c.green}\u2502${c.reset}
-${c.green}   \u2502${c.reset}   ${c.brightGreen}\u26A1${c.reset} ${c.bold}${c.white}F L E X I R E A C T${c.reset}   ${c.dim}v1.0.0${c.reset}       ${c.green}\u2502${c.reset}
-${c.green}   \u2502${c.reset}                                             ${c.green}\u2502${c.reset}
-${c.green}   \u2502${c.reset}   ${c.dim}The Modern React Framework${c.reset}              ${c.green}\u2502${c.reset}
-${c.green}   \u2502${c.reset}                                             ${c.green}\u2502${c.reset}
-${c.green}   \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F${c.reset}
+  ${c.white}\u25B2${c.reset} ${c.bold}FlexiReact${c.reset} ${c.dim}4.1.0${c.reset}
 `;
-var MINI_LOGO = `${c.brightGreen}\u26A1${c.reset} ${c.bold}FlexiReact${c.reset}`;
-var READY_MSG = `   ${c.green}\u25B2${c.reset} ${c.bold}Ready${c.reset} in`;
 var logger = {
   // Show startup logo
   logo() {
     console.log(LOGO);
+    console.log(`${c.dim}  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500${c.reset}`);
+    console.log("");
   },
-  // Server started - Next.js style
+  // Server started - Minimalist style
   serverStart(config, startTime = Date.now()) {
-    const { port, host, mode, pagesDir, islands, rsc } = config;
+    const { port, host, mode, pagesDir } = config;
     const elapsed = Date.now() - startTime;
+    console.log(`  ${c.green}\u2714${c.reset} ${c.bold}Ready${c.reset} in ${elapsed}ms`);
     console.log("");
-    console.log(`   ${c.green}\u25B2${c.reset} ${c.bold}Ready${c.reset} in ${c.cyan}${elapsed}ms${c.reset}`);
-    console.log("");
-    console.log(`   ${c.dim}\u250C${c.reset} ${c.bold}Local:${c.reset}        ${c.cyan}http://${host}:${port}${c.reset}`);
-    console.log(`   ${c.dim}\u251C${c.reset} ${c.bold}Environment:${c.reset}  ${mode === "development" ? `${c.yellow}development${c.reset}` : `${c.green}production${c.reset}`}`);
-    if (islands) {
-      console.log(`   ${c.dim}\u251C${c.reset} ${c.bold}Islands:${c.reset}      ${c.green}enabled${c.reset}`);
-    }
-    if (rsc) {
-      console.log(`   ${c.dim}\u251C${c.reset} ${c.bold}RSC:${c.reset}          ${c.green}enabled${c.reset}`);
-    }
-    console.log(`   ${c.dim}\u2514${c.reset} ${c.bold}Pages:${c.reset}        ${c.dim}${pagesDir}${c.reset}`);
+    console.log(`  ${c.bold}Local:${c.reset}      ${c.cyan}http://${host}:${port}${c.reset}`);
+    console.log(`  ${c.bold}Mode:${c.reset}       ${mode === "development" ? c.yellow : c.green}${mode}${c.reset}`);
+    console.log(`  ${c.bold}Pages:${c.reset}      ${c.dim}${pagesDir}${c.reset}`);
     console.log("");
   },
-  // HTTP request log - Compact single line like Next.js
+  // HTTP request log - Compact single line
   request(method, path11, status, time, extra = {}) {
     const methodColor = getMethodColor(method);
     const statusColor = getStatusColor(status);
     const timeStr = formatTime2(time);
-    let badge = "";
-    if (extra.type === "static" || extra.type === "ssg") {
-      badge = `${c.dim}\u25CB${c.reset}`;
-    } else if (extra.type === "dynamic" || extra.type === "ssr") {
-      badge = `${c.magenta}\u0192${c.reset}`;
+    let badge = `${c.dim}\u25CB${c.reset}`;
+    if (extra.type === "dynamic" || extra.type === "ssr") {
+      badge = `${c.white}\u0192${c.reset}`;
     } else if (extra.type === "api") {
-      badge = `${c.blue}\u03BB${c.reset}`;
-    } else if (extra.type === "asset") {
-      badge = `${c.dim}\u25E6${c.reset}`;
-    } else {
-      badge = `${c.magenta}\u0192${c.reset}`;
+      badge = `${c.cyan}\u03BB${c.reset}`;
     }
     const statusStr = `${statusColor}${status}${c.reset}`;
     const methodStr = `${methodColor}${method}${c.reset}`;
-    console.log(`   ${badge} ${methodStr} ${path11} ${statusStr} ${c.dim}in${c.reset} ${timeStr}`);
+    console.log(`  ${badge} ${methodStr} ${path11} ${statusStr} ${c.dim}${timeStr}${c.reset}`);
   },
   // Info message
   info(msg) {
-    console.log(`   ${c.cyan}\u2139${c.reset} ${msg}`);
+    console.log(`  ${c.cyan}\u2139${c.reset} ${msg}`);
   },
   // Success message
   success(msg) {
-    console.log(`   ${c.green}\u2713${c.reset} ${msg}`);
+    console.log(`  ${c.green}\u2714${c.reset} ${msg}`);
   },
   // Warning message
   warn(msg) {
-    console.log(`   ${c.yellow}\u26A0${c.reset} ${c.yellow}${msg}${c.reset}`);
+    console.log(`  ${c.yellow}\u26A0${c.reset} ${c.yellow}${msg}${c.reset}`);
   },
   // Error message
   error(msg, err = null) {
-    console.log(`   ${c.red}\u2717${c.reset} ${c.red}${msg}${c.reset}`);
+    console.log(`  ${c.red}\u2716${c.reset} ${c.red}${msg}${c.reset}`);
     if (err && err.stack) {
+      console.log("");
       const stack = err.stack.split("\n").slice(1, 4).join("\n");
       console.log(`${c.dim}${stack}${c.reset}`);
+      console.log("");
     }
   },
   // Compilation message
   compile(file, time) {
-    console.log(`   ${c.magenta}\u25C9${c.reset} Compiled ${c.cyan}${file}${c.reset} ${c.dim}(${time}ms)${c.reset}`);
+    console.log(`  ${c.white}\u25CF${c.reset} Compiling ${c.dim}${file}${c.reset} ${c.dim}(${time}ms)${c.reset}`);
   },
   // Hot reload
   hmr(file) {
-    console.log(`   ${c.yellow}\u21BB${c.reset} HMR update: ${c.cyan}${file}${c.reset}`);
+    console.log(`  ${c.green}\u21BB${c.reset} Fast Refresh ${c.dim}${file}${c.reset}`);
   },
   // Plugin loaded
   plugin(name) {
-    console.log(`   ${c.blue}\u2B21${c.reset} Plugin: ${c.cyan}${name}${c.reset}`);
+    console.log(`  ${c.cyan}\u25C6${c.reset} Plugin ${c.dim}${name}${c.reset}`);
   },
   // Route info
   route(path11, type) {
-    const typeColors = {
-      static: c.green,
-      dynamic: c.yellow,
-      api: c.blue
-    };
-    const color = typeColors[type] || c.white;
-    console.log(`   ${c.dim}\u251C\u2500${c.reset} ${path11} ${color}[${type}]${c.reset}`);
+    const typeLabel = type === "api" ? "\u03BB" : type === "dynamic" ? "\u0192" : "\u25CB";
+    const color = type === "api" ? c.cyan : type === "dynamic" ? c.white : c.dim;
+    console.log(`  ${color}${typeLabel}${c.reset} ${path11}`);
   },
   // Divider
   divider() {
-    console.log(`${c.dim}   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500${c.reset}`);
+    console.log(`${c.dim}  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500${c.reset}`);
   },
   // Blank line
   blank() {
     console.log("");
   },
-  // Port in use error with solution
+  // Port in use error
   portInUse(port) {
-    console.log(`
-${c.red}   \u2717 Port ${port} is already in use${c.reset}
-
-   ${c.dim}Try one of these solutions:${c.reset}
-   
-   ${c.yellow}1.${c.reset} Kill the process using the port:
-      ${c.cyan}npx kill-port ${port}${c.reset}
-   
-   ${c.yellow}2.${c.reset} Use a different port in ${c.cyan}flexireact.config.js${c.reset}:
-      ${c.dim}server: { port: 3001 }${c.reset}
-   
-   ${c.yellow}3.${c.reset} Set PORT environment variable:
-      ${c.cyan}PORT=3001 npm run dev${c.reset}
-`);
+    this.error(`Port ${port} is already in use.`);
+    this.blank();
+    console.log(`  ${c.dim}Try:${c.reset}`);
+    console.log(`  1. Kill the process on port ${port}`);
+    console.log(`  2. Use a different port via PORT env var`);
+    this.blank();
   },
   // Build info
   build(stats) {
-    console.log(`
-   ${c.green}\u2713${c.reset} Build complete!
-   
-   ${c.dim}\u251C\u2500${c.reset} Pages:    ${c.cyan}${stats.pages}${c.reset}
-   ${c.dim}\u251C\u2500${c.reset} API:      ${c.cyan}${stats.api}${c.reset}
-   ${c.dim}\u251C\u2500${c.reset} Assets:   ${c.cyan}${stats.assets}${c.reset}
-   ${c.dim}\u2514\u2500${c.reset} Time:     ${c.green}${stats.time}ms${c.reset}
-`);
+    this.blank();
+    console.log(`  ${c.green}\u2714${c.reset} Build completed`);
+    this.blank();
+    console.log(`  ${c.dim}Route${c.reset}                               ${c.dim}Size${c.reset}`);
+    console.log(`  ${c.dim}\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500${c.reset}`);
+    console.log(`  ${c.dim}Total time:${c.reset} ${c.white}${stats.time}ms${c.reset}`);
+    this.blank();
   }
 };
 
@@ -3038,22 +3047,69 @@ function serializeArgs(args) {
     return arg;
   });
 }
+var ALLOWED_SERIALIZED_TYPES = /* @__PURE__ */ new Set(["FormData", "Date", "File"]);
+var MAX_PAYLOAD_DEPTH = 10;
+var MAX_STRING_LENGTH = 1e6;
+function validateInput(obj, depth = 0) {
+  if (depth > MAX_PAYLOAD_DEPTH) {
+    throw new Error("Payload too deeply nested");
+  }
+  if (obj === null || obj === void 0) return true;
+  if (typeof obj === "string") {
+    if (obj.length > MAX_STRING_LENGTH) {
+      throw new Error("String value too long");
+    }
+    return true;
+  }
+  if (typeof obj !== "object") return true;
+  if ("__proto__" in obj || "constructor" in obj || "prototype" in obj) {
+    throw new Error("Invalid payload: prototype pollution attempt detected");
+  }
+  if ("$$type" in obj) {
+    if (!ALLOWED_SERIALIZED_TYPES.has(obj.$$type)) {
+      throw new Error(`Invalid serialized type: ${obj.$$type}`);
+    }
+  }
+  if (Array.isArray(obj)) {
+    for (const item of obj) {
+      validateInput(item, depth + 1);
+    }
+  } else {
+    for (const value of Object.values(obj)) {
+      validateInput(value, depth + 1);
+    }
+  }
+  return true;
+}
 function deserializeArgs(args) {
+  validateInput(args);
   return args.map((arg) => {
     if (arg && typeof arg === "object") {
       if (arg.$$type === "FormData") {
         const formData = new FormData();
-        for (const [key, value] of Object.entries(arg.data)) {
+        for (const [key, value] of Object.entries(arg.data || {})) {
+          if (typeof key !== "string" || key.startsWith("__")) continue;
           if (Array.isArray(value)) {
-            value.forEach((v) => formData.append(key, v));
-          } else {
-            formData.append(key, value);
+            value.forEach((v) => {
+              if (typeof v === "string" || typeof v === "number") {
+                formData.append(key, String(v));
+              }
+            });
+          } else if (typeof value === "string" || typeof value === "number") {
+            formData.append(key, String(value));
           }
         }
         return formData;
       }
       if (arg.$$type === "Date") {
-        return new Date(arg.value);
+        const date = new Date(arg.value);
+        if (isNaN(date.getTime())) {
+          throw new Error("Invalid date value");
+        }
+        return date;
+      }
+      if (arg.$$type === "File") {
+        return { name: String(arg.name || ""), type: String(arg.type || ""), size: Number(arg.size || 0) };
       }
     }
     return arg;
@@ -3586,7 +3642,6 @@ async function createServer(options = {}) {
   const serverStartTime = Date.now();
   const projectRoot = options.projectRoot || process.cwd();
   const isDev = options.mode === "development";
-  logger.logo();
   const rawConfig = await loadConfig(projectRoot);
   const config = resolvePaths(rawConfig, projectRoot);
   await loadPlugins(projectRoot, config);
@@ -3597,7 +3652,7 @@ async function createServer(options = {}) {
   const loadModule = createModuleLoader(isDev);
   const server = http.createServer(async (req, res) => {
     const startTime = Date.now();
-    const url = new URL(req.url, `http://${req.headers.host || "localhost"}`);
+    const url = new URL(req.url || "/", `http://${req.headers.host || "localhost"}`);
     const pathname = url.pathname;
     try {
       await pluginManager.runHook(PluginHooks.REQUEST, req, res);
@@ -3605,7 +3660,7 @@ async function createServer(options = {}) {
       if (!middlewareResult.continue) {
         return;
       }
-      const effectivePath = middlewareResult.rewritten ? new URL(req.url, `http://${req.headers.host}`).pathname : pathname;
+      const effectivePath = middlewareResult.rewritten ? new URL(req.url || "/", `http://${req.headers.host}`).pathname : pathname;
       if (await serveStaticFile(res, config.publicDir, effectivePath)) {
         return;
       }
@@ -3619,6 +3674,26 @@ async function createServer(options = {}) {
         const componentName = effectivePath.slice(18).replace(".js", "");
         return await serveClientComponent(res, config.pagesDir, componentName);
       }
+      if (effectivePath.startsWith("/_flexi/client/")) {
+        const componentName = effectivePath.slice(15).replace(".js", "");
+        const searchDirs = [
+          config.pagesDir,
+          path8.join(process.cwd(), "app", "components"),
+          path8.join(process.cwd(), "routes"),
+          path8.join(process.cwd(), "routes", "(public)")
+        ];
+        for (const dir of searchDirs) {
+          try {
+            await serveClientComponent(res, dir, componentName);
+            return;
+          } catch {
+            continue;
+          }
+        }
+        res.writeHead(404, { "Content-Type": "text/plain" });
+        res.end("Component not found: " + componentName);
+        return;
+      }
       if (effectivePath === "/_flexi/action" && req.method === "POST") {
         return await handleServerAction(req, res);
       }
@@ -3669,7 +3744,7 @@ async function createServer(options = {}) {
       const duration = Date.now() - startTime;
       if (isDev) {
         const routeType = pathname.startsWith("/api/") ? "api" : pathname.startsWith("/_flexi/") ? "asset" : pathname.match(/\.(js|css|png|jpg|svg|ico)$/) ? "asset" : "dynamic";
-        logger.request(req.method, pathname, res.statusCode, duration, { type: routeType });
+        logger.request(req.method || "GET", pathname, res.statusCode, duration, { type: routeType });
       }
       await pluginManager.runHook(PluginHooks.RESPONSE, req, res, duration);
     }
@@ -3730,9 +3805,9 @@ async function serveStaticFile(res, baseDir, pathname) {
 async function handleApiRoute(req, res, route, loadModule) {
   try {
     const module = await loadModule(route.filePath);
-    const method = req.method.toLowerCase();
+    const method = (req.method || "GET").toLowerCase();
     const body = await parseBody(req);
-    const url = new URL(req.url, `http://${req.headers.host}`);
+    const url = new URL(req.url || "/", `http://${req.headers.host}`);
     const query = Object.fromEntries(url.searchParams);
     const enhancedReq = {
       ...req,
@@ -3758,11 +3833,28 @@ async function handleApiRoute(req, res, route, loadModule) {
 }
 async function handleServerAction(req, res) {
   try {
+    const contentType = req.headers["content-type"];
+    if (!contentType?.includes("application/json")) {
+      res.writeHead(400, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ success: false, error: "Invalid content type" }));
+      return;
+    }
+    const contentLength = parseInt(req.headers["content-length"] || "0", 10);
+    if (contentLength > 10 * 1024 * 1024) {
+      res.writeHead(413, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ success: false, error: "Payload too large" }));
+      return;
+    }
     const body = await parseBody(req);
     const { actionId, args } = body;
-    if (!actionId) {
+    if (!actionId || typeof actionId !== "string" || !/^[a-zA-Z0-9_]+$/.test(actionId)) {
       res.writeHead(400, { "Content-Type": "application/json" });
-      res.end(JSON.stringify({ success: false, error: "Missing actionId" }));
+      res.end(JSON.stringify({ success: false, error: "Invalid actionId format" }));
+      return;
+    }
+    if (args !== void 0 && !Array.isArray(args)) {
+      res.writeHead(400, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ success: false, error: "Invalid args format" }));
       return;
     }
     const deserializedArgs = deserializeArgs(args || []);
@@ -3779,10 +3871,11 @@ async function handleServerAction(req, res) {
     res.end(JSON.stringify(result));
   } catch (error) {
     console.error("Server Action Error:", error);
+    const isDev = process.env.NODE_ENV !== "production";
     res.writeHead(500, { "Content-Type": "application/json" });
     res.end(JSON.stringify({
       success: false,
-      error: error.message || "Action execution failed"
+      error: isDev ? error.message : "Action execution failed"
     }));
   }
 }
@@ -4002,6 +4095,8 @@ async function serveClientComponent(res, pagesDir, componentName) {
         const useCallback = window.useCallback;
         const useMemo = window.useMemo;
         const useRef = window.useRef;
+        const useContext = window.useContext;
+        const useReducer = window.useReducer;
       `
     });
     let code = result.code;
@@ -4022,41 +4117,53 @@ async function serveClientComponent(res, pagesDir, componentName) {
 function generateClientHydrationScript(componentPath, props) {
   const ext = path8.extname(componentPath);
   const componentName = path8.basename(componentPath, ext);
+  const propsJson = JSON.stringify(props);
   return `
 <script type="module">
-  // FlexiReact Client Hydration
+  // FlexiReact Client Hydration v4.1
+  import React, { useState, useEffect, useCallback, useMemo, useRef, useContext, useReducer } from 'https://esm.sh/react@19.0.0';
+  import { createRoot, hydrateRoot } from 'https://esm.sh/react-dom@19.0.0/client';
+  
+  // Make React hooks available globally
+  window.React = React;
+  window.useState = useState;
+  window.useEffect = useEffect;
+  window.useCallback = useCallback;
+  window.useMemo = useMemo;
+  window.useRef = useRef;
+  window.useContext = useContext;
+  window.useReducer = useReducer;
+
   (async function() {
     try {
-      const React = await import('https://esm.sh/react@18.3.1');
-      const ReactDOM = await import('https://esm.sh/react-dom@18.3.1/client');
+      // Fetch and execute the component
+      const response = await fetch('/_flexi/client/${componentName}.js');
+      if (!response.ok) throw new Error('Failed to load component: ' + response.status);
       
-      // Make React available globally for the component
-      window.React = React.default || React;
-      window.useState = React.useState;
-      window.useEffect = React.useEffect;
-      window.useCallback = React.useCallback;
-      window.useMemo = React.useMemo;
-      window.useRef = React.useRef;
-      
-      // Fetch the component code
-      const response = await fetch('/_flexi/component/${componentName}.js');
       const code = await response.text();
-      
-      // Create and import the module
       const blob = new Blob([code], { type: 'application/javascript' });
       const moduleUrl = URL.createObjectURL(blob);
       const module = await import(moduleUrl);
       
       const Component = module.default;
-      const props = ${JSON.stringify(props)};
+      if (!Component) throw new Error('No default export found');
       
-      // Hydrate the root
-      const root = document.getElementById('root');
-      ReactDOM.hydrateRoot(root, window.React.createElement(Component, props));
+      const props = ${propsJson};
+      const container = document.getElementById('flexi-root') || document.getElementById('root');
       
-      console.log('\u26A1 FlexiReact: Component hydrated successfully');
+      if (container) {
+        // Use createRoot for client components (not hydrate since we rendered placeholder)
+        const root = createRoot(container);
+        root.render(React.createElement(Component, props));
+        console.log('%c\u26A1 FlexiReact', 'color: #00FF9C; font-weight: bold', 'Component mounted');
+      }
     } catch (error) {
-      console.error('\u26A1 FlexiReact: Hydration failed', error);
+      console.error('%c\u26A1 FlexiReact', 'color: #ef4444; font-weight: bold', 'Hydration failed:', error);
+      // Show error in UI
+      const container = document.getElementById('flexi-root');
+      if (container) {
+        container.innerHTML = '<div style="color:#ef4444;padding:20px;text-align:center;">Failed to load component: ' + error.message + '</div>';
+      }
     }
   })();
 </script>`;
@@ -4341,7 +4448,7 @@ async function copyPublicAssets(publicDir, outDir) {
 function generateManifest(options) {
   const { routes, clientResult, serverResult, config } = options;
   return {
-    version: "2.0.0",
+    version: "4.1.0",
     generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
     routes: {
       pages: routes.pages.map((r) => ({
@@ -6302,7 +6409,7 @@ function formatBytes2(bytes) {
 }
 
 // core/index.ts
-var VERSION = "3.1.0";
+var VERSION = "4.0.0";
 var core_default = {
   VERSION,
   createServer