@flexireact/core 3.0.3 → 4.0.0

package/dist/core/start-dev.js

@@ -0,0 +1,3095 @@
+// core/server/index.ts
+import http from "http";
+import fs8 from "fs";
+import path7 from "path";
+import { fileURLToPath, pathToFileURL as pathToFileURL4 } from "url";
+
+// core/config.ts
+import fs from "fs";
+import path from "path";
+import { pathToFileURL } from "url";
+var defaultConfig = {
+  // Directories
+  pagesDir: "pages",
+  layoutsDir: "layouts",
+  publicDir: "public",
+  outDir: ".flexi",
+  // Build options
+  build: {
+    target: "es2022",
+    minify: true,
+    sourcemap: true,
+    splitting: true
+  },
+  // Server options
+  server: {
+    port: 3e3,
+    host: "localhost"
+  },
+  // SSG options
+  ssg: {
+    enabled: false,
+    paths: []
+  },
+  // Islands (partial hydration)
+  islands: {
+    enabled: true
+  },
+  // RSC options
+  rsc: {
+    enabled: true
+  },
+  // Plugins
+  plugins: [],
+  // Styles (CSS files to include)
+  styles: [],
+  // Scripts (JS files to include)
+  scripts: [],
+  // Favicon path
+  favicon: null
+};
+async function loadConfig(projectRoot) {
+  const configPathTs = path.join(projectRoot, "flexireact.config.ts");
+  const configPathJs = path.join(projectRoot, "flexireact.config.js");
+  const configPath = fs.existsSync(configPathTs) ? configPathTs : configPathJs;
+  let userConfig = {};
+  if (fs.existsSync(configPath)) {
+    try {
+      const configUrl = pathToFileURL(configPath).href;
+      const module = await import(`${configUrl}?t=${Date.now()}`);
+      userConfig = module.default || module;
+    } catch (error) {
+      console.warn("Warning: Failed to load flexireact config:", error.message);
+    }
+  }
+  return deepMerge(defaultConfig, userConfig);
+}
+function deepMerge(target, source) {
+  const result = { ...target };
+  for (const key in source) {
+    if (source[key] && typeof source[key] === "object" && !Array.isArray(source[key])) {
+      result[key] = deepMerge(target[key] || {}, source[key]);
+    } else {
+      result[key] = source[key];
+    }
+  }
+  return result;
+}
+function resolvePaths(config, projectRoot) {
+  return {
+    ...config,
+    pagesDir: path.resolve(projectRoot, config.pagesDir),
+    layoutsDir: path.resolve(projectRoot, config.layoutsDir),
+    publicDir: path.resolve(projectRoot, config.publicDir),
+    outDir: path.resolve(projectRoot, config.outDir)
+  };
+}
+
+// core/router/index.ts
+import fs3 from "fs";
+import path2 from "path";
+
+// core/utils.ts
+import fs2 from "fs";
+function escapeHtml(str) {
+  const htmlEntities = {
+    "&": "&",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;"
+  };
+  return String(str).replace(/[&<>"']/g, (char) => htmlEntities[char]);
+}
+function isServerComponent(filePath) {
+  try {
+    const content = fs2.readFileSync(filePath, "utf-8");
+    const firstLine = content.split("\n")[0].trim();
+    return firstLine === "'use server'" || firstLine === '"use server"';
+  } catch {
+    return false;
+  }
+}
+function isClientComponent(filePath) {
+  try {
+    const content = fs2.readFileSync(filePath, "utf-8");
+    const firstLine = content.split("\n")[0].trim();
+    return firstLine === "'use client'" || firstLine === '"use client"';
+  } catch {
+    return false;
+  }
+}
+function isIsland(filePath) {
+  try {
+    const content = fs2.readFileSync(filePath, "utf-8");
+    const firstLine = content.split("\n")[0].trim();
+    return firstLine === "'use island'" || firstLine === '"use island"';
+  } catch {
+    return false;
+  }
+}
+
+// core/router/index.ts
+var RouteType = {
+  PAGE: "page",
+  API: "api",
+  LAYOUT: "layout",
+  LOADING: "loading",
+  ERROR: "error",
+  NOT_FOUND: "not-found"
+};
+function buildRouteTree(pagesDir, layoutsDir, appDir = null, routesDir = null) {
+  const projectRoot = path2.dirname(pagesDir);
+  const routes = {
+    pages: [],
+    api: [],
+    layouts: /* @__PURE__ */ new Map(),
+    tree: {},
+    appRoutes: [],
+    // Next.js style app router routes
+    flexiRoutes: []
+    // FlexiReact v2 routes/ directory
+  };
+  const routesDirPath = routesDir || path2.join(projectRoot, "routes");
+  if (fs3.existsSync(routesDirPath)) {
+    scanRoutesDirectory(routesDirPath, routesDirPath, routes);
+  }
+  const appDirPath = appDir || path2.join(projectRoot, "app");
+  if (fs3.existsSync(appDirPath)) {
+    scanAppDirectory(appDirPath, appDirPath, routes);
+  }
+  if (fs3.existsSync(pagesDir)) {
+    scanDirectory(pagesDir, pagesDir, routes);
+  }
+  if (fs3.existsSync(layoutsDir)) {
+    scanLayouts(layoutsDir, routes.layouts);
+  }
+  const rootLayoutPath = path2.join(appDirPath, "layout.tsx");
+  const rootLayoutPathJs = path2.join(appDirPath, "layout.jsx");
+  if (fs3.existsSync(rootLayoutPath)) {
+    routes.rootLayout = rootLayoutPath;
+  } else if (fs3.existsSync(rootLayoutPathJs)) {
+    routes.rootLayout = rootLayoutPathJs;
+  }
+  routes.tree = buildTree([...routes.flexiRoutes, ...routes.appRoutes, ...routes.pages]);
+  return routes;
+}
+function scanRoutesDirectory(baseDir, currentDir, routes, parentSegments = [], parentLayout = null, parentMiddleware = null) {
+  const entries = fs3.readdirSync(currentDir, { withFileTypes: true });
+  let layoutFile = null;
+  let loadingFile = null;
+  let errorFile = null;
+  let middlewareFile = null;
+  for (const entry of entries) {
+    if (entry.isFile()) {
+      const name = entry.name.replace(/\.(jsx|js|tsx|ts)$/, "");
+      const fullPath = path2.join(currentDir, entry.name);
+      const ext = path2.extname(entry.name);
+      if (name === "layout") layoutFile = fullPath;
+      if (name === "loading") loadingFile = fullPath;
+      if (name === "error") errorFile = fullPath;
+      if (name === "_middleware" || name === "middleware") middlewareFile = fullPath;
+      if (["layout", "loading", "error", "not-found", "_middleware", "middleware"].includes(name)) continue;
+      if (![".tsx", ".jsx", ".ts", ".js"].includes(ext)) continue;
+      const relativePath = path2.relative(baseDir, currentDir);
+      const isApiRoute = relativePath.startsWith("api") || relativePath.startsWith("api/");
+      if (isApiRoute && [".ts", ".js"].includes(ext)) {
+        const apiPath = "/" + [...parentSegments, name === "index" ? "" : name].filter(Boolean).join("/");
+        routes.api.push({
+          type: RouteType.API,
+          path: apiPath.replace(/\/+/g, "/") || "/",
+          filePath: fullPath,
+          pattern: createRoutePattern(apiPath),
+          segments: [...parentSegments, name === "index" ? "" : name].filter(Boolean)
+        });
+        continue;
+      }
+      if ([".tsx", ".jsx"].includes(ext)) {
+        let routePath;
+        if (name === "home" && parentSegments.length === 0) {
+          routePath = "/";
+        } else if (name === "index") {
+          routePath = "/" + parentSegments.join("/") || "/";
+        } else if (name.startsWith("[") && name.endsWith("]")) {
+          const paramName = name.slice(1, -1);
+          if (paramName.startsWith("...")) {
+            routePath = "/" + [...parentSegments, "*" + paramName.slice(3)].join("/");
+          } else {
+            routePath = "/" + [...parentSegments, ":" + paramName].join("/");
+          }
+        } else {
+          routePath = "/" + [...parentSegments, name].join("/");
+        }
+        routes.flexiRoutes.push({
+          type: RouteType.PAGE,
+          path: routePath.replace(/\/+/g, "/"),
+          filePath: fullPath,
+          pattern: createRoutePattern(routePath),
+          segments: routePath.split("/").filter(Boolean),
+          layout: layoutFile || parentLayout,
+          loading: loadingFile,
+          error: errorFile,
+          middleware: middlewareFile || parentMiddleware,
+          isFlexiRouter: true,
+          isServerComponent: isServerComponent(fullPath),
+          isClientComponent: isClientComponent(fullPath),
+          isIsland: isIsland(fullPath)
+        });
+      }
+    }
+  }
+  for (const entry of entries) {
+    if (entry.isDirectory()) {
+      const fullPath = path2.join(currentDir, entry.name);
+      const dirName = entry.name;
+      if (dirName.startsWith("_") || dirName.startsWith(".")) continue;
+      const isGroup = dirName.startsWith("(") && dirName.endsWith(")");
+      let segmentName = dirName;
+      if (dirName.startsWith("[") && dirName.endsWith("]")) {
+        const paramName = dirName.slice(1, -1);
+        if (paramName.startsWith("...")) {
+          segmentName = "*" + paramName.slice(3);
+        } else {
+          segmentName = ":" + paramName;
+        }
+      }
+      const newSegments = isGroup ? parentSegments : [...parentSegments, segmentName];
+      const newLayout = layoutFile || parentLayout;
+      const newMiddleware = middlewareFile || parentMiddleware;
+      scanRoutesDirectory(baseDir, fullPath, routes, newSegments, newLayout, newMiddleware);
+    }
+  }
+}
+function scanAppDirectory(baseDir, currentDir, routes, parentSegments = [], parentLayout = null, parentMiddleware = null) {
+  const entries = fs3.readdirSync(currentDir, { withFileTypes: true });
+  const specialFiles = {
+    page: null,
+    layout: null,
+    loading: null,
+    error: null,
+    notFound: null,
+    template: null,
+    middleware: null
+  };
+  for (const entry of entries) {
+    if (entry.isFile()) {
+      const name = entry.name.replace(/\.(jsx|js|tsx|ts)$/, "");
+      const fullPath = path2.join(currentDir, entry.name);
+      if (name === "page") specialFiles.page = fullPath;
+      if (name === "layout") specialFiles.layout = fullPath;
+      if (name === "loading") specialFiles.loading = fullPath;
+      if (name === "error") specialFiles.error = fullPath;
+      if (name === "not-found") specialFiles.notFound = fullPath;
+      if (name === "template") specialFiles.template = fullPath;
+      if (name === "middleware" || name === "_middleware") specialFiles.middleware = fullPath;
+    }
+  }
+  if (specialFiles.page) {
+    const routePath = "/" + parentSegments.join("/") || "/";
+    routes.appRoutes.push({
+      type: RouteType.PAGE,
+      path: routePath.replace(/\/+/g, "/"),
+      filePath: specialFiles.page,
+      pattern: createRoutePattern(routePath),
+      segments: parentSegments,
+      layout: specialFiles.layout || parentLayout,
+      loading: specialFiles.loading,
+      error: specialFiles.error,
+      notFound: specialFiles.notFound,
+      template: specialFiles.template,
+      middleware: specialFiles.middleware || parentMiddleware,
+      isAppRouter: true,
+      isServerComponent: isServerComponent(specialFiles.page),
+      isClientComponent: isClientComponent(specialFiles.page),
+      isIsland: isIsland(specialFiles.page)
+    });
+  }
+  for (const entry of entries) {
+    if (entry.isDirectory()) {
+      const fullPath = path2.join(currentDir, entry.name);
+      const isGroup = entry.name.startsWith("(") && entry.name.endsWith(")");
+      let segmentName = entry.name;
+      if (entry.name.startsWith("[") && entry.name.endsWith("]")) {
+        segmentName = ":" + entry.name.slice(1, -1);
+        if (entry.name.startsWith("[...")) {
+          segmentName = "*" + entry.name.slice(4, -1);
+        }
+        if (entry.name.startsWith("[[...")) {
+          segmentName = "*" + entry.name.slice(5, -2);
+        }
+      }
+      const newSegments = isGroup ? parentSegments : [...parentSegments, segmentName];
+      const newLayout = specialFiles.layout || parentLayout;
+      const newMiddleware = specialFiles.middleware || parentMiddleware;
+      scanAppDirectory(baseDir, fullPath, routes, newSegments, newLayout, newMiddleware);
+    }
+  }
+}
+function scanDirectory(baseDir, currentDir, routes, parentSegments = []) {
+  const entries = fs3.readdirSync(currentDir, { withFileTypes: true });
+  const specialFiles = {
+    layout: null,
+    loading: null,
+    error: null,
+    notFound: null
+  };
+  for (const entry of entries) {
+    if (entry.isFile()) {
+      const name = entry.name.replace(/\.(jsx|js|tsx|ts)$/, "");
+      const fullPath = path2.join(currentDir, entry.name);
+      if (name === "layout") specialFiles.layout = fullPath;
+      if (name === "loading") specialFiles.loading = fullPath;
+      if (name === "error") specialFiles.error = fullPath;
+      if (name === "not-found" || name === "404") specialFiles.notFound = fullPath;
+    }
+  }
+  for (const entry of entries) {
+    const fullPath = path2.join(currentDir, entry.name);
+    const relativePath = path2.relative(baseDir, fullPath);
+    if (entry.isDirectory()) {
+      const isGroup = entry.name.startsWith("(") && entry.name.endsWith(")");
+      const newSegments = isGroup ? parentSegments : [...parentSegments, entry.name];
+      scanDirectory(baseDir, fullPath, routes, newSegments);
+    } else if (entry.isFile()) {
+      const ext = path2.extname(entry.name);
+      const baseName = path2.basename(entry.name, ext);
+      if (["layout", "loading", "error", "not-found", "404"].includes(baseName)) {
+        continue;
+      }
+      if ([".jsx", ".js", ".tsx", ".ts"].includes(ext)) {
+        const isApi = relativePath.startsWith("api" + path2.sep) || relativePath.startsWith("api/");
+        if (isApi && [".js", ".ts"].includes(ext)) {
+          routes.api.push(createRoute(fullPath, baseDir, specialFiles, RouteType.API));
+        } else if (!isApi && [".jsx", ".tsx"].includes(ext)) {
+          routes.pages.push(createRoute(fullPath, baseDir, specialFiles, RouteType.PAGE));
+        }
+      }
+    }
+  }
+}
+function createRoute(filePath, baseDir, specialFiles, type) {
+  const relativePath = path2.relative(baseDir, filePath);
+  const routePath = filePathToRoute(relativePath);
+  return {
+    type,
+    path: routePath,
+    filePath,
+    pattern: createRoutePattern(routePath),
+    segments: routePath.split("/").filter(Boolean),
+    layout: specialFiles.layout,
+    loading: specialFiles.loading,
+    error: specialFiles.error,
+    notFound: specialFiles.notFound,
+    isServerComponent: isServerComponent(filePath),
+    isClientComponent: isClientComponent(filePath),
+    isIsland: isIsland(filePath)
+  };
+}
+function scanLayouts(layoutsDir, layoutsMap) {
+  const entries = fs3.readdirSync(layoutsDir, { withFileTypes: true });
+  for (const entry of entries) {
+    if (entry.isFile() && /\.(jsx|tsx)$/.test(entry.name)) {
+      const name = entry.name.replace(/\.(jsx|tsx)$/, "");
+      layoutsMap.set(name, path2.join(layoutsDir, entry.name));
+    }
+  }
+}
+function filePathToRoute(filePath) {
+  let route = filePath.replace(/\\/g, "/");
+  route = route.replace(/\.(jsx|js|tsx|ts)$/, "");
+  route = route.replace(/\[\.\.\.([^\]]+)\]/g, "*$1");
+  route = route.replace(/\[([^\]]+)\]/g, ":$1");
+  if (route.endsWith("/index")) {
+    route = route.slice(0, -6) || "/";
+  } else if (route === "index") {
+    route = "/";
+  }
+  route = route.replace(/\/?\([^)]+\)\/?/g, "/");
+  if (!route.startsWith("/")) {
+    route = "/" + route;
+  }
+  route = route.replace(/\/+/g, "/");
+  return route;
+}
+function createRoutePattern(routePath) {
+  let pattern = routePath.replace(/\*[^/]*/g, "(.*)").replace(/:[^/]+/g, "([^/]+)").replace(/\//g, "\\/");
+  return new RegExp(`^${pattern}$`);
+}
+function buildTree(routes) {
+  const tree = { children: {}, routes: [] };
+  for (const route of routes) {
+    let current = tree;
+    for (const segment of route.segments) {
+      if (!current.children[segment]) {
+        current.children[segment] = { children: {}, routes: [] };
+      }
+      current = current.children[segment];
+    }
+    current.routes.push(route);
+  }
+  return tree;
+}
+function matchRoute(urlPath, routes) {
+  const normalizedPath = urlPath === "" ? "/" : urlPath.split("?")[0];
+  for (const route of routes) {
+    const match = normalizedPath.match(route.pattern);
+    if (match) {
+      const params = extractParams(route.path, match);
+      return { ...route, params };
+    }
+  }
+  return null;
+}
+function extractParams(routePath, match) {
+  const params = {};
+  const paramNames = [];
+  const paramRegex = /:([^/]+)|\*([^/]*)/g;
+  let paramMatch;
+  while ((paramMatch = paramRegex.exec(routePath)) !== null) {
+    paramNames.push(paramMatch[1] || paramMatch[2] || "splat");
+  }
+  paramNames.forEach((name, index) => {
+    params[name] = match[index + 1];
+  });
+  return params;
+}
+function findRouteLayouts(route, layoutsMap) {
+  const layouts = [];
+  let currentPath = "";
+  for (const segment of route.segments) {
+    currentPath += "/" + segment;
+    const layoutName = segment;
+    if (layoutsMap.has(layoutName)) {
+      layouts.push({
+        name: layoutName,
+        filePath: layoutsMap.get(layoutName)
+      });
+    }
+  }
+  if (route.layout) {
+    layouts.push({
+      name: "route",
+      filePath: route.layout
+    });
+  }
+  if (layoutsMap.has("root")) {
+    layouts.unshift({
+      name: "root",
+      filePath: layoutsMap.get("root")
+    });
+  }
+  return layouts;
+}
+
+// core/render/index.ts
+import React from "react";
+import { renderToString, renderToPipeableStream } from "react-dom/server";
+async function renderPage(options) {
+  const {
+    Component,
+    props = {},
+    layouts = [],
+    loading = null,
+    error = null,
+    islands = [],
+    title = "FlexiReact App",
+    meta = {},
+    scripts = [],
+    styles = [],
+    favicon = null,
+    isSSG = false,
+    route = "/",
+    needsHydration = false
+  } = options;
+  const renderStart = Date.now();
+  try {
+    let element = React.createElement(Component, props);
+    if (error) {
+      element = React.createElement(ErrorBoundaryWrapper, {
+        fallback: error,
+        children: element
+      });
+    }
+    if (loading) {
+      element = React.createElement(React.Suspense, {
+        fallback: React.createElement(loading),
+        children: element
+      });
+    }
+    for (const layout of [...layouts].reverse()) {
+      if (layout.Component) {
+        const LayoutComponent = layout.Component;
+        element = React.createElement(LayoutComponent, {
+          ...layout.props
+        }, element);
+      }
+    }
+    const content = renderToString(element);
+    const renderTime = Date.now() - renderStart;
+    const islandScripts = generateIslandScripts(islands);
+    return buildHtmlDocument({
+      content,
+      title,
+      meta,
+      scripts: [...scripts, ...islandScripts],
+      styles,
+      favicon,
+      props,
+      isSSG,
+      renderTime,
+      route,
+      isClientComponent: needsHydration
+    });
+  } catch (err) {
+    console.error("Render Error:", err);
+    throw err;
+  }
+}
+var ErrorBoundaryWrapper = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  render() {
+    if (this.state.hasError) {
+      const FallbackComponent = this.props.fallback;
+      return React.createElement(FallbackComponent, { error: this.state.error });
+    }
+    return this.props.children;
+  }
+};
+function generateIslandScripts(islands) {
+  if (!islands.length) return [];
+  const scripts = [];
+  for (const island of islands) {
+    scripts.push({
+      type: "module",
+      content: `
+        import { hydrateIsland } from '/_flexi/client.js';
+        import ${island.name} from '${island.clientPath}';
+        hydrateIsland('${island.id}', ${island.name}, ${JSON.stringify(island.props)});
+      `
+    });
+  }
+  return scripts;
+}
+function generateDevToolbar(options = {}) {
+  const {
+    renderTime = 0,
+    pageType = "SSR",
+    route = "/",
+    hasError = false,
+    isHydrated = false,
+    errorMessage = null,
+    componentName = null
+  } = options;
+  const timeColor = renderTime < 50 ? "#00FF9C" : renderTime < 200 ? "#fbbf24" : "#ef4444";
+  const timeLabel = renderTime < 50 ? "Fast" : renderTime < 200 ? "OK" : "Slow";
+  return `
+<!-- FlexiReact v2 Dev Toolbar -->
+<div id="flexi-dev-toolbar" class="flexi-dev-collapsed">
+  <style>
+    #flexi-dev-toolbar {
+      position: fixed;
+      bottom: 16px;
+      left: 16px;
+      z-index: 99999;
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-size: 13px;
+    }
+    
+    /* Main Button */
+    .flexi-dev-trigger {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      background: rgba(10, 10, 10, 0.95);
+      backdrop-filter: blur(20px);
+      border: 1px solid rgba(0, 255, 156, 0.2);
+      border-radius: 10px;
+      color: #fafafa;
+      cursor: pointer;
+      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+    }
+    
+    .flexi-dev-trigger:hover {
+      border-color: rgba(0, 255, 156, 0.5);
+      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 255, 156, 0.15);
+      transform: translateY(-2px);
+    }
+    
+    .flexi-dev-trigger.has-error {
+      border-color: rgba(239, 68, 68, 0.5);
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(239, 68, 68, 0.2);
+    }
+    
+    .flexi-dev-logo {
+      width: 20px;
+      height: 20px;
+      background: linear-gradient(135deg, #00FF9C, #00D68F);
+      border-radius: 5px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 800;
+      font-size: 11px;
+      color: #000;
+    }
+    
+    .flexi-dev-trigger.has-error .flexi-dev-logo {
+      background: linear-gradient(135deg, #ef4444, #dc2626);
+    }
+    
+    .flexi-dev-indicator {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    
+    .flexi-dev-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: #00FF9C;
+      box-shadow: 0 0 8px rgba(0, 255, 156, 0.6);
+    }
+    
+    .flexi-dev-dot.error {
+      background: #ef4444;
+      box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
+      animation: errorPulse 1s infinite;
+    }
+    
+    @keyframes errorPulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.4; }
+    }
+    
+    .flexi-dev-time {
+      font-size: 11px;
+      font-weight: 600;
+      color: ${timeColor};
+      font-variant-numeric: tabular-nums;
+    }
+    
+    /* Panel */
+    .flexi-dev-panel {
+      position: absolute;
+      bottom: calc(100% + 8px);
+      left: 0;
+      min-width: 340px;
+      background: rgba(10, 10, 10, 0.98);
+      backdrop-filter: blur(20px);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 16px;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(8px) scale(0.96);
+      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
+      overflow: hidden;
+    }
+    
+    #flexi-dev-toolbar.flexi-dev-open .flexi-dev-panel {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0) scale(1);
+    }
+    
+    /* Header */
+    .flexi-dev-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 14px 16px;
+      background: linear-gradient(135deg, rgba(0, 255, 156, 0.08), rgba(0, 214, 143, 0.04));
+      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    }
+    
+    .flexi-dev-header-logo {
+      width: 26px;
+      height: 26px;
+      background: linear-gradient(135deg, #00FF9C, #00D68F);
+      border-radius: 7px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 800;
+      font-size: 13px;
+      color: #000;
+    }
+    
+    .flexi-dev-header-info {
+      flex: 1;
+    }
+    
+    .flexi-dev-header-title {
+      font-weight: 700;
+      font-size: 14px;
+      color: #fafafa;
+    }
+    
+    .flexi-dev-header-subtitle {
+      font-size: 11px;
+      color: #52525b;
+      margin-top: 1px;
+    }
+    
+    .flexi-dev-close {
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255, 255, 255, 0.05);
+      border: none;
+      border-radius: 6px;
+      color: #71717a;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+    
+    .flexi-dev-close:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: #fafafa;
+    }
+    
+    /* Content */
+    .flexi-dev-content {
+      padding: 12px 16px;
+    }
+    
+    .flexi-dev-section {
+      margin-bottom: 12px;
+    }
+    
+    .flexi-dev-section:last-child {
+      margin-bottom: 0;
+    }
+    
+    .flexi-dev-section-title {
+      font-size: 10px;
+      font-weight: 600;
+      color: #52525b;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 8px;
+    }
+    
+    .flexi-dev-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+    }
+    
+    .flexi-dev-stat {
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      border-radius: 10px;
+      padding: 10px 12px;
+    }
+    
+    .flexi-dev-stat-label {
+      font-size: 10px;
+      color: #52525b;
+      margin-bottom: 4px;
+    }
+    
+    .flexi-dev-stat-value {
+      font-size: 14px;
+      font-weight: 600;
+      color: #fafafa;
+    }
+    
+    .flexi-dev-stat-value.success { color: #00FF9C; }
+    .flexi-dev-stat-value.warning { color: #fbbf24; }
+    .flexi-dev-stat-value.error { color: #ef4444; }
+    
+    /* Badges */
+    .flexi-dev-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 3px 8px;
+      border-radius: 5px;
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: 0.3px;
+    }
+    
+    .flexi-dev-badge.ssr { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
+    .flexi-dev-badge.ssg { background: rgba(0, 255, 156, 0.15); color: #00FF9C; }
+    .flexi-dev-badge.csr { background: rgba(6, 182, 212, 0.15); color: #06b6d4; }
+    .flexi-dev-badge.isr { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
+    
+    /* Error Display */
+    .flexi-dev-error {
+      background: rgba(239, 68, 68, 0.1);
+      border: 1px solid rgba(239, 68, 68, 0.2);
+      border-radius: 10px;
+      padding: 12px;
+      margin-top: 8px;
+    }
+    
+    .flexi-dev-error-title {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 11px;
+      font-weight: 600;
+      color: #ef4444;
+      margin-bottom: 6px;
+    }
+    
+    .flexi-dev-error-message {
+      font-size: 12px;
+      color: #fca5a5;
+      font-family: 'SF Mono', 'Fira Code', monospace;
+      word-break: break-word;
+      line-height: 1.5;
+    }
+    
+    /* Footer */
+    .flexi-dev-footer {
+      display: flex;
+      gap: 6px;
+      padding: 12px 16px;
+      background: rgba(0, 0, 0, 0.3);
+      border-top: 1px solid rgba(255, 255, 255, 0.05);
+    }
+    
+    .flexi-dev-action {
+      flex: 1;
+      padding: 8px;
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid rgba(255, 255, 255, 0.06);
+      border-radius: 8px;
+      color: #71717a;
+      font-size: 11px;
+      font-weight: 500;
+      text-decoration: none;
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+    
+    .flexi-dev-action:hover {
+      background: rgba(0, 255, 156, 0.1);
+      border-color: rgba(0, 255, 156, 0.2);
+      color: #00FF9C;
+    }
+  </style>
+  
+  <button class="flexi-dev-trigger ${hasError ? "has-error" : ""}" onclick="this.parentElement.classList.toggle('flexi-dev-open')">
+    <div class="flexi-dev-logo">F</div>
+    <div class="flexi-dev-indicator">
+      <div class="flexi-dev-dot ${hasError ? "error" : ""}"></div>
+      <span class="flexi-dev-time">${renderTime}ms</span>
+    </div>
+  </button>
+  
+  <div class="flexi-dev-panel">
+    <div class="flexi-dev-header">
+      <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>
+      <button class="flexi-dev-close" onclick="this.closest('#flexi-dev-toolbar').classList.remove('flexi-dev-open')">\u2715</button>
+    </div>
+    
+    <div class="flexi-dev-content">
+      <div class="flexi-dev-section">
+        <div class="flexi-dev-section-title">Page Info</div>
+        <div class="flexi-dev-grid">
+          <div class="flexi-dev-stat">
+            <div class="flexi-dev-stat-label">Route</div>
+            <div class="flexi-dev-stat-value">${route}</div>
+          </div>
+          <div class="flexi-dev-stat">
+            <div class="flexi-dev-stat-label">Type</div>
+            <div class="flexi-dev-stat-value"><span class="flexi-dev-badge ${pageType.toLowerCase()}">${pageType}</span></div>
+          </div>
+        </div>
+      </div>
+      
+      <div class="flexi-dev-section">
+        <div class="flexi-dev-section-title">Performance</div>
+        <div class="flexi-dev-grid">
+          <div class="flexi-dev-stat">
+            <div class="flexi-dev-stat-label">Render Time</div>
+            <div class="flexi-dev-stat-value ${renderTime < 50 ? "success" : renderTime < 200 ? "warning" : "error"}">${renderTime}ms <small style="color:#52525b">${timeLabel}</small></div>
+          </div>
+          <div class="flexi-dev-stat">
+            <div class="flexi-dev-stat-label">Hydration</div>
+            <div class="flexi-dev-stat-value" id="flexi-hydration-status">${isHydrated ? "\u2713 Client" : "\u25CB Server"}</div>
+          </div>
+        </div>
+      </div>
+      
+      ${hasError && errorMessage ? `
+      <div class="flexi-dev-error">
+        <div class="flexi-dev-error-title">
+          <span>\u26A0</span> Runtime Error
+        </div>
+        <div class="flexi-dev-error-message">${errorMessage}</div>
+      </div>
+      ` : ""}
+    </div>
+    
+    <div class="flexi-dev-footer">
+      <a href="/_flexi/routes" class="flexi-dev-action">Routes</a>
+      <button class="flexi-dev-action" onclick="location.reload()">Refresh</button>
+      <a href="https://github.com/flexireact/flexireact" target="_blank" class="flexi-dev-action">Docs \u2197</a>
+    </div>
+  </div>
+</div>
+
+<script>
+  // FlexiReact v2 DevTools
+  window.__FLEXI_DEV__ = {
+    version: '2.0.0',
+    renderTime: ${renderTime},
+    pageType: '${pageType}',
+    route: '${route}',
+    hydrated: false,
+    errors: []
+  };
+  
+  // Track hydration
+  const root = document.getElementById('root');
+  if (root) {
+    const observer = new MutationObserver(() => {
+      if (root.children.length > 0) {
+        window.__FLEXI_DEV__.hydrated = true;
+        const el = document.getElementById('flexi-hydration-status');
+        if (el) el.textContent = '\u2713 Client';
+        observer.disconnect();
+      }
+    });
+    observer.observe(root, { childList: true, subtree: true });
+  }
+  
+  // Capture runtime errors
+  window.addEventListener('error', (e) => {
+    window.__FLEXI_DEV__.errors.push({
+      message: e.message,
+      file: e.filename,
+      line: e.lineno,
+      col: e.colno
+    });
+    console.error('%c[FlexiReact Error]', 'color: #ef4444; font-weight: bold;', e.message);
+  });
+  
+  // Console branding
+  console.log(
+    '%c \u26A1 FlexiReact v2 %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;'
+  );
+</script>
+`;
+}
+function buildHtmlDocument(options) {
+  const {
+    content,
+    title,
+    meta = {},
+    scripts = [],
+    styles = [],
+    props = {},
+    isSSG = false,
+    renderTime = 0,
+    route = "/",
+    isClientComponent: isClientComponent2 = false,
+    favicon = null
+  } = options;
+  const metaTags = Object.entries(meta).map(([name, content2]) => {
+    if (name.startsWith("og:")) {
+      return `<meta property="${escapeHtml(name)}" content="${escapeHtml(content2)}">`;
+    }
+    return `<meta name="${escapeHtml(name)}" content="${escapeHtml(content2)}">`;
+  }).join("\n    ");
+  const styleTags = styles.map((style) => {
+    if (typeof style === "string") {
+      return `<link rel="stylesheet" href="${escapeHtml(style)}">`;
+    }
+    return `<style>${style.content}</style>`;
+  }).join("\n    ");
+  const scriptTags = scripts.map((script) => {
+    if (typeof script === "string") {
+      return `<script src="${escapeHtml(script)}"></script>`;
+    }
+    const type = script.type ? ` type="${script.type}"` : "";
+    if (script.src) {
+      return `<script${type} src="${escapeHtml(script.src)}"></script>`;
+    }
+    return `<script${type}>${script.content}</script>`;
+  }).join("\n    ");
+  const faviconSvg = encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="#00FF9C"/><text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" fill="#000" font-family="system-ui" font-weight="bold" font-size="16">F</text></svg>`);
+  const isDev = process.env.NODE_ENV !== "production";
+  const pageType = isSSG ? "SSG" : isClientComponent2 ? "CSR" : "SSR";
+  const devToolbar = isDev ? generateDevToolbar({
+    renderTime,
+    pageType,
+    route,
+    isHydrated: isClientComponent2
+  }) : "";
+  const faviconLink = favicon ? `<link rel="icon" href="${escapeHtml(favicon)}">` : `<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,${faviconSvg}">`;
+  return `<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${escapeHtml(title)}</title>
+    ${faviconLink}
+    ${metaTags}
+    <style>
+      :root { --flexi-bg: #0f172a; --flexi-fg: #f8fafc; }
+      html, body { background-color: #0f172a; color: #f8fafc; min-height: 100vh; margin: 0; }
+    </style>
+    ${styleTags}
+    <script>
+      (function() {
+        var theme = localStorage.getItem('theme');
+        if (theme === 'light') {
+          document.documentElement.classList.remove('dark');
+          document.documentElement.style.backgroundColor = '#ffffff';
+          document.documentElement.style.color = '#0f172a';
+          document.body.style.backgroundColor = '#ffffff';
+          document.body.style.color = '#0f172a';
+        }
+      })();
+    </script>
+</head>
+<body>
+    <div id="root">${content}</div>
+    <script>
+      window.__FLEXI_DATA__ = ${JSON.stringify({ props, isSSG })};
+    </script>
+    ${scriptTags}
+    ${devToolbar}
+</body>
+</html>`;
+}
+function renderError(statusCode, message, stack = null) {
+  const showStack = process.env.NODE_ENV !== "production" && stack;
+  const isDev = process.env.NODE_ENV !== "production";
+  const errorDetails = parseErrorStack(stack);
+  const errorMessages = {
+    404: { title: "Page Not Found", icon: "search", color: "#00FF9C", desc: "The page you're looking for doesn't exist or has been moved." },
+    500: { title: "Server Error", icon: "alert", color: "#ef4444", desc: "Something went wrong on our end." },
+    403: { title: "Forbidden", icon: "lock", color: "#f59e0b", desc: "You don't have permission to access this resource." },
+    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) => `
+        <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>
+        </div>
+      `).join("") : "";
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${statusCode} - ${errorInfo.title} | FlexiReact</title>
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%2300FF9C'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='central' text-anchor='middle' fill='%23000' font-family='system-ui' font-weight='bold' font-size='16'%3EF%3C/text%3E%3C/svg%3E">
+    <style>
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      
+      body {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        min-height: 100vh;
+        background: #0a0a0a;
+        color: #fafafa;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow-x: hidden;
+      }
+      
+      /* Animated background */
+      .bg-pattern {
+        position: fixed;
+        inset: 0;
+        background-image: 
+          radial-gradient(circle at 25% 25%, rgba(0, 255, 156, 0.03) 0%, transparent 50%),
+          radial-gradient(circle at 75% 75%, rgba(99, 102, 241, 0.03) 0%, transparent 50%);
+        pointer-events: none;
+      }
+      
+      .bg-grid {
+        position: fixed;
+        inset: 0;
+        background-image: 
+          linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
+        background-size: 64px 64px;
+        pointer-events: none;
+      }
+      
+      .container {
+        position: relative;
+        width: 100%;
+        max-width: ${showStack ? "800px" : "500px"};
+        padding: 2rem;
+        animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+      }
+      
+      @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(30px); }
+        to { opacity: 1; transform: translateY(0); }
+      }
+      
+      /* Error Card */
+      .error-card {
+        background: linear-gradient(145deg, rgba(23, 23, 23, 0.9), rgba(10, 10, 10, 0.95));
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 24px;
+        padding: 3rem;
+        text-align: center;
+        backdrop-filter: blur(20px);
+        box-shadow: 
+          0 0 0 1px rgba(255, 255, 255, 0.05),
+          0 20px 50px -20px rgba(0, 0, 0, 0.5),
+          0 0 100px -50px ${errorInfo.color}40;
+      }
+      
+      /* Logo */
+      .logo {
+        width: 56px;
+        height: 56px;
+        background: linear-gradient(135deg, #00FF9C, #00D68F);
+        border-radius: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto 2rem;
+        font-weight: 800;
+        font-size: 24px;
+        color: #000;
+        box-shadow: 0 0 30px rgba(0, 255, 156, 0.3);
+      }
+      
+      /* Error Code */
+      .error-code {
+        font-size: 7rem;
+        font-weight: 800;
+        line-height: 1;
+        background: linear-gradient(135deg, ${errorInfo.color}, ${errorInfo.color}99);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        margin-bottom: 0.5rem;
+        letter-spacing: -4px;
+      }
+      
+      .error-title {
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: #fafafa;
+        margin-bottom: 0.75rem;
+      }
+      
+      .error-desc {
+        font-size: 1rem;
+        color: #71717a;
+        line-height: 1.6;
+        margin-bottom: 2rem;
+      }
+      
+      /* Buttons */
+      .buttons {
+        display: flex;
+        gap: 12px;
+        justify-content: center;
+        flex-wrap: wrap;
+      }
+      
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 12px 24px;
+        border-radius: 12px;
+        font-weight: 600;
+        font-size: 14px;
+        text-decoration: none;
+        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+        border: none;
+        cursor: pointer;
+      }
+      
+      .btn-primary {
+        background: #00FF9C;
+        color: #000;
+        box-shadow: 0 0 20px rgba(0, 255, 156, 0.3);
+      }
+      
+      .btn-primary:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 0 30px rgba(0, 255, 156, 0.5);
+      }
+      
+      .btn-secondary {
+        background: rgba(255, 255, 255, 0.06);
+        color: #a1a1aa;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+      }
+      
+      .btn-secondary:hover {
+        background: rgba(255, 255, 255, 0.1);
+        color: #fafafa;
+        border-color: rgba(255, 255, 255, 0.2);
+      }
+      
+      /* Error Stack (Dev Mode) */
+      .error-stack {
+        margin-top: 2rem;
+        text-align: left;
+      }
+      
+      .error-stack-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 12px;
+        font-size: 12px;
+        font-weight: 600;
+        color: #ef4444;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+      
+      .error-stack-header::before {
+        content: '';
+        width: 8px;
+        height: 8px;
+        background: #ef4444;
+        border-radius: 50%;
+        animation: pulse 2s infinite;
+      }
+      
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+      
+      .error-message {
+        background: rgba(239, 68, 68, 0.1);
+        border: 1px solid rgba(239, 68, 68, 0.2);
+        border-radius: 12px;
+        padding: 16px;
+        margin-bottom: 12px;
+        font-family: 'SF Mono', 'Fira Code', monospace;
+        font-size: 13px;
+        color: #fca5a5;
+        word-break: break-word;
+      }
+      
+      .error-frames {
+        background: rgba(0, 0, 0, 0.4);
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        border-radius: 12px;
+        overflow: hidden;
+      }
+      
+      .error-frame {
+        padding: 12px 16px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        font-family: 'SF Mono', 'Fira Code', monospace;
+        font-size: 12px;
+      }
+      
+      .error-frame:last-child {
+        border-bottom: none;
+      }
+      
+      .error-frame-first {
+        background: rgba(239, 68, 68, 0.05);
+      }
+      
+      .error-frame-fn {
+        color: #fafafa;
+        font-weight: 500;
+        margin-bottom: 4px;
+      }
+      
+      .error-frame-loc {
+        color: #52525b;
+        font-size: 11px;
+      }
+      
+      /* Dev Badge */
+      .dev-badge {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 14px;
+        background: rgba(0, 0, 0, 0.8);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 10px;
+        font-size: 12px;
+        font-weight: 500;
+        color: #71717a;
+        backdrop-filter: blur(10px);
+      }
+      
+      .dev-badge-dot {
+        width: 8px;
+        height: 8px;
+        background: #00FF9C;
+        border-radius: 50%;
+        box-shadow: 0 0 10px rgba(0, 255, 156, 0.5);
+      }
+    </style>
+</head>
+<body>
+    <div class="bg-pattern"></div>
+    <div class="bg-grid"></div>
+    
+    <div class="container">
+      <div class="error-card">
+        <div class="logo">F</div>
+        
+        <div class="error-code">${statusCode}</div>
+        <h1 class="error-title">${errorInfo.title}</h1>
+        <p class="error-desc">${errorInfo.desc}</p>
+        
+        <div class="buttons">
+          <a href="/" class="btn btn-primary">
+            \u2190 Back to Home
+          </a>
+          <a href="javascript:history.back()" class="btn btn-secondary">
+            Go Back
+          </a>
+        </div>
+        
+        ${showStack ? `
+        <div class="error-stack">
+          <div class="error-stack-header">Error Details</div>
+          <div class="error-message">${escapeHtml(message)}</div>
+          ${errorFramesHtml ? `<div class="error-frames">${errorFramesHtml}</div>` : ""}
+        </div>
+        ` : ""}
+      </div>
+    </div>
+    
+    ${isDev ? `
+    <div class="dev-badge">
+      <div class="dev-badge-dot"></div>
+      FlexiReact v2
+    </div>
+    ` : ""}
+</body>
+</html>`;
+}
+function parseErrorStack(stack) {
+  if (!stack) return null;
+  const lines = stack.split("\n");
+  const parsed = {
+    message: lines[0] || "",
+    frames: []
+  };
+  for (let i = 1; i < lines.length; i++) {
+    const line = lines[i].trim();
+    const match = line.match(/at\s+(.+?)\s+\((.+?):(\d+):(\d+)\)/) || line.match(/at\s+(.+?):(\d+):(\d+)/);
+    if (match) {
+      parsed.frames.push({
+        fn: match[1] || "anonymous",
+        file: match[2] || match[1],
+        line: match[3] || match[2],
+        col: match[4] || match[3]
+      });
+    }
+  }
+  return parsed;
+}
+
+// core/middleware/index.ts
+import fs4 from "fs";
+import path3 from "path";
+import { pathToFileURL as pathToFileURL2 } from "url";
+var MiddlewareRequest = class {
+  raw;
+  method;
+  url;
+  headers;
+  pathname;
+  searchParams;
+  query;
+  cookies;
+  constructor(req) {
+    this.raw = req;
+    this.method = req.method;
+    this.url = req.url;
+    this.headers = new Map(Object.entries(req.headers || {}));
+    const parsedUrl = new URL(req.url, `http://${req.headers.host || "localhost"}`);
+    this.pathname = parsedUrl.pathname;
+    this.searchParams = parsedUrl.searchParams;
+    this.query = Object.fromEntries(parsedUrl.searchParams);
+    this.cookies = this._parseCookies(req.headers.cookie || "");
+  }
+  _parseCookies(cookieHeader) {
+    const cookies2 = /* @__PURE__ */ new Map();
+    if (!cookieHeader) return cookies2;
+    cookieHeader.split(";").forEach((cookie) => {
+      const [name, ...rest] = cookie.split("=");
+      if (name) {
+        cookies2.set(name.trim(), rest.join("=").trim());
+      }
+    });
+    return cookies2;
+  }
+  /**
+   * Get a header value
+   */
+  header(name) {
+    return this.headers.get(name.toLowerCase());
+  }
+  /**
+   * Get a cookie value
+   */
+  cookie(name) {
+    return this.cookies.get(name);
+  }
+  /**
+   * Check if request matches a path pattern
+   */
+  matches(pattern) {
+    return matchPath(this.pathname, pattern);
+  }
+};
+async function loadMiddleware(projectRoot) {
+  const middlewarePath = path3.join(projectRoot, "middleware.js");
+  if (!fs4.existsSync(middlewarePath)) {
+    return null;
+  }
+  try {
+    const url = pathToFileURL2(middlewarePath).href;
+    const module = await import(`${url}?t=${Date.now()}`);
+    return {
+      handler: module.default,
+      config: module.config || {}
+    };
+  } catch (error) {
+    console.error("Failed to load middleware:", error);
+    return null;
+  }
+}
+async function runMiddleware(req, res, middleware) {
+  if (!middleware) {
+    return { continue: true };
+  }
+  const { handler, config } = middleware;
+  const request = new MiddlewareRequest(req);
+  if (config.matcher) {
+    const patterns = Array.isArray(config.matcher) ? config.matcher : [config.matcher];
+    const matches = patterns.some((pattern) => matchPath(request.pathname, pattern));
+    if (!matches) {
+      return { continue: true };
+    }
+  }
+  try {
+    const response = await handler(request);
+    if (!response || response.type === "next") {
+      if (response?.headers) {
+        for (const [key, value] of response.headers) {
+          res.setHeader(key, value);
+        }
+      }
+      return { continue: true };
+    }
+    if (response.type === "redirect") {
+      res.writeHead(response.status, { Location: response.url });
+      res.end();
+      return { continue: false };
+    }
+    if (response.type === "rewrite") {
+      req.url = response.url;
+      return { continue: true, rewritten: true };
+    }
+    if (response.type === "response") {
+      for (const [key, value] of response.headers) {
+        res.setHeader(key, value);
+      }
+      res.writeHead(response.status);
+      res.end(response.body);
+      return { continue: false };
+    }
+    return { continue: true };
+  } catch (error) {
+    console.error("Middleware error:", error);
+    return { continue: true, error };
+  }
+}
+function matchPath(pathname, pattern) {
+  let regex = pattern.replace(/\*/g, ".*").replace(/:path\*/g, ".*").replace(/:(\w+)/g, "[^/]+");
+  regex = `^${regex}$`;
+  return new RegExp(regex).test(pathname);
+}
+
+// core/plugins/index.ts
+import fs5 from "fs";
+import path4 from "path";
+import { pathToFileURL as pathToFileURL3 } from "url";
+var PluginHooks = {
+  // Server lifecycle
+  SERVER_START: "onServerStart",
+  SERVER_STOP: "onServerStop",
+  // Request lifecycle
+  REQUEST: "onRequest",
+  RESPONSE: "onResponse",
+  // Render lifecycle
+  BEFORE_RENDER: "onBeforeRender",
+  AFTER_RENDER: "onAfterRender",
+  // Build lifecycle
+  BUILD_START: "onBuildStart",
+  BUILD_END: "onBuildEnd",
+  // Route lifecycle
+  ROUTES_LOADED: "onRoutesLoaded",
+  // Config
+  CONFIG: "onConfig",
+  ESBUILD_CONFIG: "esbuildConfig"
+};
+var PluginManager = class {
+  plugins;
+  hooks;
+  constructor() {
+    this.plugins = [];
+    this.hooks = /* @__PURE__ */ new Map();
+    for (const hook of Object.values(PluginHooks)) {
+      this.hooks.set(hook, []);
+    }
+  }
+  /**
+   * Registers a plugin
+   */
+  register(plugin) {
+    if (!plugin.name) {
+      throw new Error("Plugin must have a name");
+    }
+    if (this.plugins.find((p) => p.name === plugin.name)) {
+      console.warn(`Plugin "${plugin.name}" is already registered`);
+      return;
+    }
+    this.plugins.push(plugin);
+    for (const [hookName, handlers] of this.hooks) {
+      if (typeof plugin[hookName] === "function") {
+        handlers.push({
+          plugin: plugin.name,
+          handler: plugin[hookName].bind(plugin)
+        });
+      }
+    }
+    console.log(`  \u2713 Plugin loaded: ${plugin.name}`);
+  }
+  /**
+   * Unregisters a plugin
+   */
+  unregister(pluginName) {
+    const index = this.plugins.findIndex((p) => p.name === pluginName);
+    if (index === -1) return;
+    this.plugins.splice(index, 1);
+    for (const handlers of this.hooks.values()) {
+      const hookIndex = handlers.findIndex((h) => h.plugin === pluginName);
+      if (hookIndex !== -1) {
+        handlers.splice(hookIndex, 1);
+      }
+    }
+  }
+  /**
+   * Runs a hook with all registered handlers
+   */
+  async runHook(hookName, ...args) {
+    const handlers = this.hooks.get(hookName) || [];
+    const results = [];
+    for (const { plugin, handler } of handlers) {
+      try {
+        const result = await handler(...args);
+        results.push({ plugin, result });
+      } catch (error) {
+        console.error(`Plugin "${plugin}" error in ${hookName}:`, error);
+        results.push({ plugin, error });
+      }
+    }
+    return results;
+  }
+  /**
+   * Runs a hook that can modify a value (waterfall)
+   */
+  async runWaterfallHook(hookName, initialValue, ...args) {
+    const handlers = this.hooks.get(hookName) || [];
+    let value = initialValue;
+    for (const { plugin, handler } of handlers) {
+      try {
+        const result = await handler(value, ...args);
+        if (result !== void 0) {
+          value = result;
+        }
+      } catch (error) {
+        console.error(`Plugin "${plugin}" error in ${hookName}:`, error);
+      }
+    }
+    return value;
+  }
+  /**
+   * Checks if any plugin handles a hook
+   */
+  hasHook(hookName) {
+    const handlers = this.hooks.get(hookName) || [];
+    return handlers.length > 0;
+  }
+  /**
+   * Gets all registered plugins
+   */
+  getPlugins() {
+    return [...this.plugins];
+  }
+};
+var pluginManager = new PluginManager();
+async function loadPlugins(projectRoot, config) {
+  console.log("\n\u{1F4E6} Loading plugins...\n");
+  const pluginPath = path4.join(projectRoot, "flexireact.plugin.js");
+  if (fs5.existsSync(pluginPath)) {
+    try {
+      const url = pathToFileURL3(pluginPath).href;
+      const module = await import(`${url}?t=${Date.now()}`);
+      const plugin = module.default;
+      if (plugin) {
+        pluginManager.register(plugin);
+      }
+    } catch (error) {
+      console.error("Failed to load flexireact.plugin.js:", error);
+    }
+  }
+  if (config.plugins && Array.isArray(config.plugins)) {
+    for (const pluginConfig of config.plugins) {
+      try {
+        if (typeof pluginConfig === "string") {
+          const module = await import(pluginConfig);
+          pluginManager.register(module.default);
+        } else if (typeof pluginConfig === "object") {
+          pluginManager.register(pluginConfig);
+        } else if (typeof pluginConfig === "function") {
+          pluginManager.register(pluginConfig());
+        }
+      } catch (error) {
+        console.error(`Failed to load plugin:`, error);
+      }
+    }
+  }
+  console.log(`
+  Total plugins: ${pluginManager.getPlugins().length}
+`);
+  return pluginManager;
+}
+
+// core/islands/index.ts
+import React2 from "react";
+import { renderToString as renderToString2 } from "react-dom/server";
+var islandRegistry = /* @__PURE__ */ new Map();
+function getRegisteredIslands() {
+  const islands = Array.from(islandRegistry.values());
+  islandRegistry.clear();
+  return islands;
+}
+var LoadStrategy = {
+  // Hydrate immediately when page loads
+  IMMEDIATE: "immediate",
+  // Hydrate when island becomes visible
+  VISIBLE: "visible",
+  // Hydrate when user interacts with the page
+  IDLE: "idle",
+  // Hydrate on specific media query
+  MEDIA: "media"
+};
+function generateAdvancedHydrationScript(islands) {
+  if (!islands.length) return "";
+  const islandData = islands.map((island) => ({
+    id: island.id,
+    name: island.name,
+    path: island.clientPath,
+    props: island.props,
+    strategy: island.strategy || LoadStrategy.IMMEDIATE,
+    media: island.media
+  }));
+  return `
+<script type="module">
+  const islands = ${JSON.stringify(islandData)};
+  
+  async function hydrateIsland(island) {
+    const element = document.querySelector(\`[data-island="\${island.id}"]\`);
+    if (!element || element.hasAttribute('data-hydrated')) return;
+    
+    try {
+      const { hydrateRoot } = await import('/_flexi/react-dom-client.js');
+      const React = await import('/_flexi/react.js');
+      const module = await import(island.path);
+      const Component = module.default;
+      
+      hydrateRoot(element, React.createElement(Component, island.props));
+      element.setAttribute('data-hydrated', 'true');
+    } catch (error) {
+      console.error(\`Failed to hydrate island \${island.name}:\`, error);
+    }
+  }
+  
+  // Intersection Observer for visible strategy
+  const visibleObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        const id = entry.target.getAttribute('data-island');
+        const island = islands.find(i => i.id === id);
+        if (island) {
+          hydrateIsland(island);
+          visibleObserver.unobserve(entry.target);
+        }
+      }
+    });
+  }, { rootMargin: '50px' });
+  
+  // Process islands based on strategy
+  function processIslands() {
+    for (const island of islands) {
+      const element = document.querySelector(\`[data-island="\${island.id}"]\`);
+      if (!element) continue;
+      
+      switch (island.strategy) {
+        case 'immediate':
+          hydrateIsland(island);
+          break;
+        case 'visible':
+          visibleObserver.observe(element);
+          break;
+        case 'idle':
+          requestIdleCallback(() => hydrateIsland(island));
+          break;
+        case 'media':
+          if (island.media && window.matchMedia(island.media).matches) {
+            hydrateIsland(island);
+          }
+          break;
+      }
+    }
+  }
+  
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', processIslands);
+  } else {
+    processIslands();
+  }
+</script>`;
+}
+
+// core/context.ts
+import React3 from "react";
+var RequestContext = React3.createContext(null);
+var RouteContext = React3.createContext(null);
+var LayoutContext = React3.createContext(null);
+function createRequestContext(req, res, params = {}, query = {}) {
+  return {
+    req,
+    res,
+    params,
+    query,
+    url: req.url,
+    method: req.method,
+    headers: req.headers,
+    cookies: parseCookies(req.headers.cookie || "")
+  };
+}
+function parseCookies(cookieHeader) {
+  const cookies2 = {};
+  if (!cookieHeader) return cookies2;
+  cookieHeader.split(";").forEach((cookie) => {
+    const [name, ...rest] = cookie.split("=");
+    if (name) {
+      cookies2[name.trim()] = rest.join("=").trim();
+    }
+  });
+  return cookies2;
+}
+
+// core/logger.ts
+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",
+  blue: "\x1B[34m",
+  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"
+};
+var c = colors;
+function getStatusColor(status) {
+  if (status >= 500) return c.red;
+  if (status >= 400) return c.yellow;
+  if (status >= 300) return c.cyan;
+  if (status >= 200) return c.green;
+  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;
+}
+function formatTime(ms) {
+  if (ms < 1) return `${c.gray}<1ms${c.reset}`;
+  if (ms < 100) return `${c.green}${ms}ms${c.reset}`;
+  if (ms < 500) return `${c.yellow}${ms}ms${c.reset}`;
+  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}
+`;
+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);
+  },
+  // Server started - Next.js style
+  serverStart(config, startTime = Date.now()) {
+    const { port, host, mode, pagesDir, islands, rsc } = config;
+    const elapsed = Date.now() - startTime;
+    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("");
+  },
+  // HTTP request log - Compact single line like Next.js
+  request(method, path8, status, time, extra = {}) {
+    const methodColor = getMethodColor(method);
+    const statusColor = getStatusColor(status);
+    const timeStr = formatTime(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}`;
+    } 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}`;
+    }
+    const statusStr = `${statusColor}${status}${c.reset}`;
+    const methodStr = `${methodColor}${method}${c.reset}`;
+    console.log(`   ${badge} ${methodStr} ${path8} ${statusStr} ${c.dim}in${c.reset} ${timeStr}`);
+  },
+  // Info message
+  info(msg) {
+    console.log(`   ${c.cyan}\u2139${c.reset} ${msg}`);
+  },
+  // Success message
+  success(msg) {
+    console.log(`   ${c.green}\u2713${c.reset} ${msg}`);
+  },
+  // Warning message
+  warn(msg) {
+    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}`);
+    if (err && err.stack) {
+      const stack = err.stack.split("\n").slice(1, 4).join("\n");
+      console.log(`${c.dim}${stack}${c.reset}`);
+    }
+  },
+  // Compilation message
+  compile(file, time) {
+    console.log(`   ${c.magenta}\u25C9${c.reset} Compiled ${c.cyan}${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}`);
+  },
+  // Plugin loaded
+  plugin(name) {
+    console.log(`   ${c.blue}\u2B21${c.reset} Plugin: ${c.cyan}${name}${c.reset}`);
+  },
+  // Route info
+  route(path8, 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} ${path8} ${color}[${type}]${c.reset}`);
+  },
+  // 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}`);
+  },
+  // Blank line
+  blank() {
+    console.log("");
+  },
+  // Port in use error with solution
+  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}
+`);
+  },
+  // 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}
+`);
+  }
+};
+
+// core/helpers.ts
+var RedirectError = class extends Error {
+  url;
+  statusCode;
+  type = "redirect";
+  constructor(url, statusCode = 307) {
+    super(`Redirect to ${url}`);
+    this.name = "RedirectError";
+    this.url = url;
+    this.statusCode = statusCode;
+  }
+};
+var NotFoundError = class extends Error {
+  type = "notFound";
+  constructor(message = "Page not found") {
+    super(message);
+    this.name = "NotFoundError";
+  }
+};
+function redirect(url, type = "replace") {
+  const statusCode = type === "permanent" ? 308 : 307;
+  throw new RedirectError(url, statusCode);
+}
+function notFound(message) {
+  throw new NotFoundError(message);
+}
+var cookies = {
+  /**
+   * Parse cookies from a cookie header string
+   */
+  parse(cookieHeader) {
+    const cookies2 = {};
+    if (!cookieHeader) return cookies2;
+    cookieHeader.split(";").forEach((cookie) => {
+      const [name, ...rest] = cookie.split("=");
+      if (name) {
+        const value = rest.join("=");
+        cookies2[name.trim()] = decodeURIComponent(value.trim());
+      }
+    });
+    return cookies2;
+  },
+  /**
+   * Get a cookie value from request headers
+   */
+  get(request, name) {
+    const cookieHeader = request.headers.get("cookie") || "";
+    const parsed = this.parse(cookieHeader);
+    return parsed[name];
+  },
+  /**
+   * Get all cookies from request
+   */
+  getAll(request) {
+    const cookieHeader = request.headers.get("cookie") || "";
+    return this.parse(cookieHeader);
+  },
+  /**
+   * Serialize a cookie for Set-Cookie header
+   */
+  serialize(name, value, options = {}) {
+    let cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
+    if (options.maxAge !== void 0) {
+      cookie += `; Max-Age=${options.maxAge}`;
+    }
+    if (options.expires) {
+      cookie += `; Expires=${options.expires.toUTCString()}`;
+    }
+    if (options.path) {
+      cookie += `; Path=${options.path}`;
+    }
+    if (options.domain) {
+      cookie += `; Domain=${options.domain}`;
+    }
+    if (options.secure) {
+      cookie += "; Secure";
+    }
+    if (options.httpOnly) {
+      cookie += "; HttpOnly";
+    }
+    if (options.sameSite) {
+      cookie += `; SameSite=${options.sameSite.charAt(0).toUpperCase() + options.sameSite.slice(1)}`;
+    }
+    return cookie;
+  },
+  /**
+   * Create a Set-Cookie header value
+   */
+  set(name, value, options = {}) {
+    return this.serialize(name, value, {
+      path: "/",
+      httpOnly: true,
+      secure: process.env.NODE_ENV === "production",
+      sameSite: "lax",
+      ...options
+    });
+  },
+  /**
+   * Create a cookie deletion header
+   */
+  delete(name, options = {}) {
+    return this.serialize(name, "", {
+      ...options,
+      path: "/",
+      maxAge: 0
+    });
+  }
+};
+var headers = {
+  /**
+   * Create a new Headers object with common defaults
+   */
+  create(init) {
+    return new Headers(init);
+  },
+  /**
+   * Get a header value from request
+   */
+  get(request, name) {
+    return request.headers.get(name);
+  },
+  /**
+   * Get all headers as an object
+   */
+  getAll(request) {
+    const result = {};
+    request.headers.forEach((value, key) => {
+      result[key] = value;
+    });
+    return result;
+  },
+  /**
+   * Check if request has a specific header
+   */
+  has(request, name) {
+    return request.headers.has(name);
+  },
+  /**
+   * Get content type from request
+   */
+  contentType(request) {
+    return request.headers.get("content-type");
+  },
+  /**
+   * Check if request accepts JSON
+   */
+  acceptsJson(request) {
+    const accept = request.headers.get("accept") || "";
+    return accept.includes("application/json") || accept.includes("*/*");
+  },
+  /**
+   * Check if request is AJAX/fetch
+   */
+  isAjax(request) {
+    return request.headers.get("x-requested-with") === "XMLHttpRequest" || this.acceptsJson(request);
+  },
+  /**
+   * Get authorization header
+   */
+  authorization(request) {
+    const auth = request.headers.get("authorization");
+    if (!auth) return null;
+    const [type, ...rest] = auth.split(" ");
+    return {
+      type: type.toLowerCase(),
+      credentials: rest.join(" ")
+    };
+  },
+  /**
+   * Get bearer token from authorization header
+   */
+  bearerToken(request) {
+    const auth = this.authorization(request);
+    if (auth?.type === "bearer") {
+      return auth.credentials;
+    }
+    return null;
+  },
+  /**
+   * Common security headers
+   */
+  security() {
+    return {
+      "X-Content-Type-Options": "nosniff",
+      "X-Frame-Options": "DENY",
+      "X-XSS-Protection": "1; mode=block",
+      "Referrer-Policy": "strict-origin-when-cross-origin",
+      "Permissions-Policy": "camera=(), microphone=(), geolocation=()"
+    };
+  },
+  /**
+   * CORS headers
+   */
+  cors(options = {}) {
+    const {
+      origin = "*",
+      methods = ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"],
+      headers: allowHeaders = ["Content-Type", "Authorization"],
+      credentials = false,
+      maxAge = 86400
+    } = options;
+    const corsHeaders = {
+      "Access-Control-Allow-Origin": origin,
+      "Access-Control-Allow-Methods": methods.join(", "),
+      "Access-Control-Allow-Headers": allowHeaders.join(", "),
+      "Access-Control-Max-Age": String(maxAge)
+    };
+    if (credentials) {
+      corsHeaders["Access-Control-Allow-Credentials"] = "true";
+    }
+    return corsHeaders;
+  },
+  /**
+   * Cache control headers
+   */
+  cache(options = {}) {
+    if (options.noStore) {
+      return { "Cache-Control": "no-store, no-cache, must-revalidate" };
+    }
+    const directives = [];
+    if (options.private) {
+      directives.push("private");
+    } else {
+      directives.push("public");
+    }
+    if (options.maxAge !== void 0) {
+      directives.push(`max-age=${options.maxAge}`);
+    }
+    if (options.sMaxAge !== void 0) {
+      directives.push(`s-maxage=${options.sMaxAge}`);
+    }
+    if (options.staleWhileRevalidate !== void 0) {
+      directives.push(`stale-while-revalidate=${options.staleWhileRevalidate}`);
+    }
+    return { "Cache-Control": directives.join(", ") };
+  }
+};
+
+// core/actions/index.ts
+import { useActionState, useOptimistic } from "react";
+import { useFormStatus } from "react-dom";
+import { useActionState as useActionStateReact } from "react";
+globalThis.__FLEXI_ACTIONS__ = globalThis.__FLEXI_ACTIONS__ || {};
+globalThis.__FLEXI_ACTION_CONTEXT__ = null;
+async function executeAction(actionId, args, context) {
+  const action = globalThis.__FLEXI_ACTIONS__[actionId];
+  if (!action) {
+    return {
+      success: false,
+      error: `Server action not found: ${actionId}`
+    };
+  }
+  const actionContext = {
+    request: context?.request || new Request("http://localhost"),
+    cookies,
+    headers,
+    redirect,
+    notFound
+  };
+  globalThis.__FLEXI_ACTION_CONTEXT__ = actionContext;
+  try {
+    const result = await action(...args);
+    return {
+      success: true,
+      data: result
+    };
+  } catch (error) {
+    if (error instanceof RedirectError) {
+      return {
+        success: true,
+        redirect: error.url
+      };
+    }
+    if (error instanceof NotFoundError) {
+      return {
+        success: false,
+        error: "Not found"
+      };
+    }
+    return {
+      success: false,
+      error: error.message || "Action failed"
+    };
+  } finally {
+    globalThis.__FLEXI_ACTION_CONTEXT__ = null;
+  }
+}
+function deserializeArgs(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)) {
+          if (Array.isArray(value)) {
+            value.forEach((v) => formData.append(key, v));
+          } else {
+            formData.append(key, value);
+          }
+        }
+        return formData;
+      }
+      if (arg.$$type === "Date") {
+        return new Date(arg.value);
+      }
+    }
+    return arg;
+  });
+}
+
+// core/image/index.ts
+import React4 from "react";
+import path5 from "path";
+import fs6 from "fs";
+import crypto from "crypto";
+var defaultImageConfig = {
+  domains: [],
+  deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+  imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+  formats: ["webp", "avif"],
+  minimumCacheTTL: 60 * 60 * 24 * 30,
+  // 30 days
+  dangerouslyAllowSVG: false,
+  quality: 75,
+  cacheDir: ".flexi/image-cache"
+};
+function generateSrcSet(src, widths, quality = 75) {
+  return widths.map((w) => `/_flexi/image?url=${encodeURIComponent(src)}&w=${w}&q=${quality} ${w}w`).join(", ");
+}
+function generateSizes(sizes) {
+  if (sizes) return sizes;
+  return "100vw";
+}
+async function handleImageOptimization(req, res, config = {}) {
+  const fullConfig = { ...defaultImageConfig, ...config };
+  const url = new URL(req.url, `http://${req.headers.host}`);
+  const imageUrl = url.searchParams.get("url");
+  const width = parseInt(url.searchParams.get("w") || "0", 10);
+  const quality = parseInt(url.searchParams.get("q") || String(fullConfig.quality), 10);
+  const format = url.searchParams.get("f");
+  if (!imageUrl) {
+    res.writeHead(400, { "Content-Type": "text/plain" });
+    res.end("Missing url parameter");
+    return;
+  }
+  try {
+    let imageBuffer;
+    let contentType;
+    if (imageUrl.startsWith("http")) {
+      const response = await fetch(imageUrl);
+      if (!response.ok) throw new Error("Failed to fetch image");
+      imageBuffer = Buffer.from(await response.arrayBuffer());
+      contentType = response.headers.get("content-type") || "image/jpeg";
+    } else {
+      const imagePath = path5.join(process.cwd(), "public", imageUrl);
+      if (!fs6.existsSync(imagePath)) {
+        res.writeHead(404, { "Content-Type": "text/plain" });
+        res.end("Image not found");
+        return;
+      }
+      imageBuffer = fs6.readFileSync(imagePath);
+      contentType = getContentType(imagePath);
+    }
+    const cacheKey = crypto.createHash("md5").update(`${imageUrl}-${width}-${quality}-${format}`).digest("hex");
+    const cacheDir = path5.join(process.cwd(), fullConfig.cacheDir);
+    const cachePath = path5.join(cacheDir, `${cacheKey}.${format || "webp"}`);
+    if (fs6.existsSync(cachePath)) {
+      const cachedImage = fs6.readFileSync(cachePath);
+      res.writeHead(200, {
+        "Content-Type": `image/${format || "webp"}`,
+        "Cache-Control": `public, max-age=${fullConfig.minimumCacheTTL}`,
+        "X-Flexi-Image-Cache": "HIT"
+      });
+      res.end(cachedImage);
+      return;
+    }
+    res.writeHead(200, {
+      "Content-Type": contentType,
+      "Cache-Control": `public, max-age=${fullConfig.minimumCacheTTL}`,
+      "X-Flexi-Image-Cache": "MISS"
+    });
+    res.end(imageBuffer);
+  } catch (error) {
+    console.error("Image optimization error:", error);
+    res.writeHead(500, { "Content-Type": "text/plain" });
+    res.end("Image optimization failed");
+  }
+}
+function getContentType(filePath) {
+  const ext = path5.extname(filePath).toLowerCase();
+  const types = {
+    ".jpg": "image/jpeg",
+    ".jpeg": "image/jpeg",
+    ".png": "image/png",
+    ".gif": "image/gif",
+    ".webp": "image/webp",
+    ".avif": "image/avif",
+    ".svg": "image/svg+xml",
+    ".ico": "image/x-icon"
+  };
+  return types[ext] || "application/octet-stream";
+}
+function createImageComponent(config = {}) {
+  const fullConfig = { ...defaultImageConfig, ...config };
+  return function Image2(props) {
+    const {
+      src,
+      alt,
+      width,
+      height,
+      fill = false,
+      sizes,
+      quality = fullConfig.quality,
+      priority = false,
+      placeholder = "empty",
+      blurDataURL,
+      loading,
+      className = "",
+      style = {},
+      unoptimized = false,
+      ...rest
+    } = props;
+    const loadingAttr = priority ? "eager" : loading || "lazy";
+    const optimizedSrc = unoptimized ? src : `/_flexi/image?url=${encodeURIComponent(src)}&w=${width || 1920}&q=${quality}`;
+    const allSizes = [...fullConfig.imageSizes, ...fullConfig.deviceSizes].sort((a, b) => a - b);
+    const relevantSizes = width ? allSizes.filter((s) => s <= width * 2) : allSizes;
+    const srcSet = unoptimized ? void 0 : generateSrcSet(src, relevantSizes, quality);
+    const imgStyle = {
+      ...style,
+      ...fill ? {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        objectFit: "cover"
+      } : {}
+    };
+    const wrapperStyle = fill ? {
+      position: "relative",
+      width: "100%",
+      height: "100%"
+    } : {};
+    const placeholderStyle = placeholder === "blur" ? {
+      backgroundImage: `url(${blurDataURL || generateBlurPlaceholderSync()})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      filter: "blur(20px)",
+      transform: "scale(1.1)"
+    } : {};
+    const imgElement = React4.createElement("img", {
+      src: optimizedSrc,
+      alt,
+      width: fill ? void 0 : width,
+      height: fill ? void 0 : height,
+      loading: loadingAttr,
+      decoding: "async",
+      srcSet,
+      sizes: generateSizes(sizes),
+      className: `flexi-image ${className}`.trim(),
+      style: imgStyle,
+      fetchPriority: priority ? "high" : void 0,
+      ...rest
+    });
+    if (fill || placeholder === "blur") {
+      return React4.createElement("div", {
+        className: "flexi-image-wrapper",
+        style: { ...wrapperStyle, ...placeholderStyle }
+      }, imgElement);
+    }
+    return imgElement;
+  };
+}
+function generateBlurPlaceholderSync() {
+  return `data:image/svg+xml;base64,${Buffer.from(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 5">
+      <filter id="b" color-interpolation-filters="sRGB">
+        <feGaussianBlur stdDeviation="1"/>
+      </filter>
+      <rect width="100%" height="100%" fill="#1a1a1a"/>
+    </svg>`
+  ).toString("base64")}`;
+}
+var Image = createImageComponent();
+
+// core/font/index.ts
+import fs7 from "fs";
+import path6 from "path";
+import crypto2 from "crypto";
+var GOOGLE_FONTS_API = "https://fonts.googleapis.com/css2";
+async function handleFontRequest(req, res) {
+  const url = new URL(req.url, `http://${req.headers.host}`);
+  const pathParts = url.pathname.split("/");
+  const fontFamily = decodeURIComponent(pathParts[pathParts.length - 1] || "");
+  const weight = url.searchParams.get("weight") || "400";
+  const style = url.searchParams.get("style") || "normal";
+  if (!fontFamily) {
+    res.writeHead(400, { "Content-Type": "text/plain" });
+    res.end("Missing font family");
+    return;
+  }
+  try {
+    const cacheDir = path6.join(process.cwd(), ".flexi", "font-cache");
+    const cacheKey = crypto2.createHash("md5").update(`${fontFamily}-${weight}-${style}`).digest("hex");
+    const cachePath = path6.join(cacheDir, `${cacheKey}.woff2`);
+    if (fs7.existsSync(cachePath)) {
+      const fontData = fs7.readFileSync(cachePath);
+      res.writeHead(200, {
+        "Content-Type": "font/woff2",
+        "Cache-Control": "public, max-age=31536000, immutable",
+        "X-Flexi-Font-Cache": "HIT"
+      });
+      res.end(fontData);
+      return;
+    }
+    const googleUrl = `${GOOGLE_FONTS_API}?family=${encodeURIComponent(fontFamily)}:wght@${weight}&display=swap`;
+    const cssResponse = await fetch(googleUrl, {
+      headers: {
+        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36"
+      }
+    });
+    if (!cssResponse.ok) {
+      throw new Error("Failed to fetch font CSS");
+    }
+    const css = await cssResponse.text();
+    const woff2Match = css.match(/url\((https:\/\/fonts\.gstatic\.com[^)]+\.woff2)\)/);
+    if (!woff2Match) {
+      throw new Error("Could not find woff2 URL");
+    }
+    const fontResponse = await fetch(woff2Match[1]);
+    if (!fontResponse.ok) {
+      throw new Error("Failed to fetch font file");
+    }
+    const fontBuffer = Buffer.from(await fontResponse.arrayBuffer());
+    if (!fs7.existsSync(cacheDir)) {
+      fs7.mkdirSync(cacheDir, { recursive: true });
+    }
+    fs7.writeFileSync(cachePath, fontBuffer);
+    res.writeHead(200, {
+      "Content-Type": "font/woff2",
+      "Cache-Control": "public, max-age=31536000, immutable",
+      "X-Flexi-Font-Cache": "MISS"
+    });
+    res.end(fontBuffer);
+  } catch (error) {
+    console.error("Font loading error:", error);
+    res.writeHead(500, { "Content-Type": "text/plain" });
+    res.end("Font loading failed");
+  }
+}
+
+// core/server/index.ts
+var __filename2 = fileURLToPath(import.meta.url);
+var __dirname2 = path7.dirname(__filename2);
+var MIME_TYPES = {
+  ".html": "text/html",
+  ".css": "text/css",
+  ".js": "application/javascript",
+  ".mjs": "application/javascript",
+  ".json": "application/json",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".svg": "image/svg+xml",
+  ".ico": "image/x-icon",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  ".ttf": "font/ttf",
+  ".webp": "image/webp",
+  ".mp4": "video/mp4",
+  ".webm": "video/webm"
+};
+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);
+  await pluginManager.runHook(PluginHooks.CONFIG, config);
+  const middleware = await loadMiddleware(projectRoot);
+  let routes = buildRouteTree(config.pagesDir, config.layoutsDir);
+  await pluginManager.runHook(PluginHooks.ROUTES_LOADED, routes);
+  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 pathname = url.pathname;
+    try {
+      await pluginManager.runHook(PluginHooks.REQUEST, req, res);
+      const middlewareResult = await runMiddleware(req, res, middleware);
+      if (!middlewareResult.continue) {
+        return;
+      }
+      const effectivePath = middlewareResult.rewritten ? new URL(req.url, `http://${req.headers.host}`).pathname : pathname;
+      if (await serveStaticFile(res, config.publicDir, effectivePath)) {
+        return;
+      }
+      if (!isDev && effectivePath.startsWith("/_flexi/")) {
+        const assetPath = path7.join(config.outDir, "client", effectivePath.slice(8));
+        if (await serveStaticFile(res, path7.dirname(assetPath), path7.basename(assetPath))) {
+          return;
+        }
+      }
+      if (effectivePath.startsWith("/_flexi/component/")) {
+        const componentName = effectivePath.slice(18).replace(".js", "");
+        return await serveClientComponent(res, config.pagesDir, componentName);
+      }
+      if (effectivePath === "/_flexi/action" && req.method === "POST") {
+        return await handleServerAction(req, res);
+      }
+      if (effectivePath.startsWith("/_flexi/image")) {
+        return await handleImageOptimization(req, res, config.images || {});
+      }
+      if (effectivePath.startsWith("/_flexi/font")) {
+        return await handleFontRequest(req, res);
+      }
+      if (isDev) {
+        routes = buildRouteTree(config.pagesDir, config.layoutsDir);
+      }
+      const apiRoute = matchRoute(effectivePath, routes.api);
+      if (apiRoute) {
+        return await handleApiRoute(req, res, apiRoute, loadModule);
+      }
+      const flexiRoute = matchRoute(effectivePath, routes.flexiRoutes || []);
+      if (flexiRoute) {
+        return await handlePageRoute(req, res, flexiRoute, routes, config, loadModule, url);
+      }
+      const appRoute = matchRoute(effectivePath, routes.appRoutes || []);
+      if (appRoute) {
+        return await handlePageRoute(req, res, appRoute, routes, config, loadModule, url);
+      }
+      const pageRoute = matchRoute(effectivePath, routes.pages);
+      if (pageRoute) {
+        return await handlePageRoute(req, res, pageRoute, routes, config, loadModule, url);
+      }
+      res.writeHead(404, { "Content-Type": "text/html" });
+      res.end(renderError(404, "Page not found"));
+    } catch (error) {
+      if (error instanceof RedirectError) {
+        res.writeHead(error.statusCode, { "Location": error.url });
+        res.end();
+        return;
+      }
+      if (error instanceof NotFoundError) {
+        res.writeHead(404, { "Content-Type": "text/html" });
+        res.end(renderError(404, error.message));
+        return;
+      }
+      console.error("Server Error:", error);
+      if (!res.headersSent) {
+        res.writeHead(500, { "Content-Type": "text/html" });
+        res.end(renderError(500, error.message, isDev ? error.stack : null));
+      }
+    } finally {
+      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 });
+      }
+      await pluginManager.runHook(PluginHooks.RESPONSE, req, res, duration);
+    }
+  });
+  const port = process.env.PORT || options.port || config.server.port;
+  const host = options.host || config.server.host;
+  return new Promise((resolve, reject) => {
+    server.on("error", (err) => {
+      if (err.code === "EADDRINUSE") {
+        logger.portInUse(port);
+        process.exit(1);
+      } else {
+        logger.error("Server error", err);
+        reject(err);
+      }
+    });
+    server.listen(port, host, async () => {
+      logger.serverStart({
+        port,
+        host,
+        mode: isDev ? "development" : "production",
+        pagesDir: config.pagesDir,
+        islands: config.islands?.enabled,
+        rsc: config.rsc?.enabled
+      }, serverStartTime);
+      await pluginManager.runHook(PluginHooks.SERVER_START, server);
+      resolve(server);
+    });
+  });
+}
+function createModuleLoader(isDev) {
+  return async (filePath) => {
+    const url = pathToFileURL4(filePath).href;
+    const cacheBuster = isDev ? `?t=${Date.now()}` : "";
+    return import(`${url}${cacheBuster}`);
+  };
+}
+async function serveStaticFile(res, baseDir, pathname) {
+  const safePath = path7.normalize(pathname).replace(/^(\.\.[\/\\])+/, "");
+  const filePath = path7.join(baseDir, safePath);
+  if (!filePath.startsWith(baseDir) || !fs8.existsSync(filePath)) {
+    return false;
+  }
+  const stat = fs8.statSync(filePath);
+  if (!stat.isFile()) {
+    return false;
+  }
+  const ext = path7.extname(filePath).toLowerCase();
+  const contentType = MIME_TYPES[ext] || "application/octet-stream";
+  res.writeHead(200, {
+    "Content-Type": contentType,
+    "Content-Length": stat.size,
+    "Cache-Control": "public, max-age=31536000"
+  });
+  fs8.createReadStream(filePath).pipe(res);
+  return true;
+}
+async function handleApiRoute(req, res, route, loadModule) {
+  try {
+    const module = await loadModule(route.filePath);
+    const method = req.method.toLowerCase();
+    const body = await parseBody(req);
+    const url = new URL(req.url, `http://${req.headers.host}`);
+    const query = Object.fromEntries(url.searchParams);
+    const enhancedReq = {
+      ...req,
+      body,
+      query,
+      params: route.params,
+      method: req.method
+    };
+    const enhancedRes = createApiResponse(res);
+    const handler = module[method] || module[method.toUpperCase()] || module.default;
+    if (!handler) {
+      enhancedRes.status(405).json({ error: "Method not allowed" });
+      return;
+    }
+    await handler(enhancedReq, enhancedRes);
+  } catch (error) {
+    console.error("API Error:", error);
+    if (!res.headersSent) {
+      res.writeHead(500, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ error: "Internal Server Error" }));
+    }
+  }
+}
+async function handleServerAction(req, res) {
+  try {
+    const body = await parseBody(req);
+    const { actionId, args } = body;
+    if (!actionId) {
+      res.writeHead(400, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ success: false, error: "Missing actionId" }));
+      return;
+    }
+    const deserializedArgs = deserializeArgs(args || []);
+    const result = await executeAction(actionId, deserializedArgs, {
+      request: new Request(`http://${req.headers.host}${req.url}`, {
+        method: req.method,
+        headers: req.headers
+      })
+    });
+    res.writeHead(200, {
+      "Content-Type": "application/json",
+      "X-Flexi-Action": actionId
+    });
+    res.end(JSON.stringify(result));
+  } catch (error) {
+    console.error("Server Action Error:", error);
+    res.writeHead(500, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({
+      success: false,
+      error: error.message || "Action execution failed"
+    }));
+  }
+}
+function createApiResponse(res) {
+  return {
+    _res: res,
+    _status: 200,
+    _headers: {},
+    status(code) {
+      this._status = code;
+      return this;
+    },
+    setHeader(name, value) {
+      this._headers[name] = value;
+      return this;
+    },
+    json(data) {
+      this._headers["Content-Type"] = "application/json";
+      this._send(JSON.stringify(data));
+    },
+    send(data) {
+      if (typeof data === "object") {
+        this.json(data);
+      } else {
+        this._headers["Content-Type"] = this._headers["Content-Type"] || "text/plain";
+        this._send(String(data));
+      }
+    },
+    html(data) {
+      this._headers["Content-Type"] = "text/html";
+      this._send(data);
+    },
+    redirect(url, status = 302) {
+      this._status = status;
+      this._headers["Location"] = url;
+      this._send("");
+    },
+    _send(body) {
+      if (!this._res.headersSent) {
+        this._res.writeHead(this._status, this._headers);
+        this._res.end(body);
+      }
+    }
+  };
+}
+async function handlePageRoute(req, res, route, routes, config, loadModule, url) {
+  try {
+    if (route.middleware) {
+      try {
+        const middlewareModule = await loadModule(route.middleware);
+        const middlewareFn = middlewareModule.default || middlewareModule.middleware;
+        if (typeof middlewareFn === "function") {
+          const result = await middlewareFn(req, res, { route, params: route.params });
+          if (result?.redirect) {
+            res.writeHead(result.statusCode || 307, { "Location": result.redirect });
+            res.end();
+            return;
+          }
+          if (result?.rewrite) {
+            req.url = result.rewrite;
+          }
+          if (result === false || result?.stop) {
+            return;
+          }
+        }
+      } catch (middlewareError) {
+        console.error("Route middleware error:", middlewareError.message);
+      }
+    }
+    const pageModule = await loadModule(route.filePath);
+    const Component = pageModule.default;
+    if (!Component) {
+      throw new Error(`No default export in ${route.filePath}`);
+    }
+    const query = Object.fromEntries(url.searchParams);
+    const context = createRequestContext(req, res, route.params, query);
+    let props = { params: route.params, query };
+    if (pageModule.getServerSideProps) {
+      const result = await pageModule.getServerSideProps({
+        params: route.params,
+        query,
+        req,
+        res
+      });
+      if (result.redirect) {
+        res.writeHead(result.redirect.statusCode || 302, {
+          Location: result.redirect.destination
+        });
+        res.end();
+        return;
+      }
+      if (result.notFound) {
+        res.writeHead(404, { "Content-Type": "text/html" });
+        res.end(renderError(404, "Page not found"));
+        return;
+      }
+      props = { ...props, ...result.props };
+    }
+    if (pageModule.getStaticProps) {
+      const result = await pageModule.getStaticProps({ params: route.params });
+      if (result.notFound) {
+        res.writeHead(404, { "Content-Type": "text/html" });
+        res.end(renderError(404, "Page not found"));
+        return;
+      }
+      props = { ...props, ...result.props };
+    }
+    const layouts = [];
+    try {
+      const layoutConfigs = findRouteLayouts(route, routes.layouts);
+      for (const layoutConfig of layoutConfigs) {
+        if (layoutConfig.filePath) {
+          const layoutModule = await loadModule(layoutConfig.filePath);
+          if (layoutModule.default) {
+            layouts.push({
+              Component: layoutModule.default,
+              props: {}
+            });
+          }
+        }
+      }
+    } catch (layoutError) {
+      console.warn("Layout loading skipped:", layoutError.message);
+    }
+    let LoadingComponent = null;
+    if (route.loading) {
+      const loadingModule = await loadModule(route.loading);
+      LoadingComponent = loadingModule.default;
+    }
+    let ErrorComponent = null;
+    if (route.error) {
+      const errorModule = await loadModule(route.error);
+      ErrorComponent = errorModule.default;
+    }
+    props = await pluginManager.runWaterfallHook(
+      PluginHooks.BEFORE_RENDER,
+      props,
+      { route, Component }
+    );
+    const isClientComponent2 = route.isClientComponent || pageModule.__isClient || typeof pageModule.default === "function" && pageModule.default.toString().includes("useState");
+    let html = await renderPage({
+      Component,
+      props,
+      layouts,
+      loading: LoadingComponent,
+      error: ErrorComponent,
+      islands: getRegisteredIslands(),
+      title: pageModule.title || pageModule.metadata?.title || "FlexiReact App",
+      meta: pageModule.metadata || {},
+      styles: config.styles || [],
+      scripts: config.scripts || [],
+      favicon: config.favicon || null,
+      needsHydration: isClientComponent2,
+      componentPath: route.filePath,
+      route: route.path || url.pathname,
+      isSSG: !!pageModule.getStaticProps
+    });
+    const islands = getRegisteredIslands();
+    if (islands.length > 0 && config.islands.enabled) {
+      const hydrationScript = generateAdvancedHydrationScript(islands);
+      html = html.replace("</body>", `${hydrationScript}</body>`);
+    }
+    if (isClientComponent2) {
+      const hydrationScript = generateClientHydrationScript(route.filePath, props);
+      html = html.replace("</body>", `${hydrationScript}</body>`);
+    }
+    html = await pluginManager.runWaterfallHook(
+      PluginHooks.AFTER_RENDER,
+      html,
+      { route, Component, props }
+    );
+    res.writeHead(200, { "Content-Type": "text/html" });
+    res.end(html);
+  } catch (error) {
+    console.error("Page Render Error:", error);
+    throw error;
+  }
+}
+async function serveClientComponent(res, pagesDir, componentName) {
+  const { transformSync } = await import("esbuild");
+  const cleanName = componentName.replace(/\.(tsx|jsx|ts|js)\.js$/, "").replace(/\.js$/, "");
+  const possiblePaths = [
+    path7.join(pagesDir, `${cleanName}.tsx`),
+    path7.join(pagesDir, `${cleanName}.ts`),
+    path7.join(pagesDir, `${cleanName}.jsx`),
+    path7.join(pagesDir, `${cleanName}.js`)
+  ];
+  let componentPath = null;
+  for (const p of possiblePaths) {
+    if (fs8.existsSync(p)) {
+      componentPath = p;
+      break;
+    }
+  }
+  if (!componentPath) {
+    res.writeHead(404, { "Content-Type": "text/plain" });
+    res.end(`Component not found: ${cleanName}`);
+    return;
+  }
+  const ext = path7.extname(componentPath);
+  const loader = ext === ".tsx" ? "tsx" : ext === ".ts" ? "ts" : "jsx";
+  try {
+    let source = fs8.readFileSync(componentPath, "utf-8");
+    source = source.replace(/^['"]use (client|server|island)['"];?\s*/m, "");
+    const result = transformSync(source, {
+      loader,
+      format: "esm",
+      jsx: "transform",
+      jsxFactory: "React.createElement",
+      jsxFragment: "React.Fragment",
+      target: "es2020",
+      // Replace React imports with global
+      banner: `
+        const React = window.React;
+        const useState = window.useState;
+        const useEffect = window.useEffect;
+        const useCallback = window.useCallback;
+        const useMemo = window.useMemo;
+        const useRef = window.useRef;
+      `
+    });
+    let code = result.code;
+    code = code.replace(/import\s+React\s+from\s+['"]react['"];?\s*/g, "");
+    code = code.replace(/import\s+\{[^}]+\}\s+from\s+['"]react['"];?\s*/g, "");
+    code = code.replace(/import\s+React\s*,\s*\{[^}]+\}\s+from\s+['"]react['"];?\s*/g, "");
+    res.writeHead(200, {
+      "Content-Type": "application/javascript",
+      "Cache-Control": "no-cache"
+    });
+    res.end(code);
+  } catch (error) {
+    console.error("Error serving client component:", error);
+    res.writeHead(500, { "Content-Type": "text/plain" });
+    res.end("Error compiling component");
+  }
+}
+function generateClientHydrationScript(componentPath, props) {
+  const ext = path7.extname(componentPath);
+  const componentName = path7.basename(componentPath, ext);
+  return `
+<script type="module">
+  // FlexiReact Client Hydration
+  (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');
+      
+      // 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)};
+      
+      // Hydrate the root
+      const root = document.getElementById('root');
+      ReactDOM.hydrateRoot(root, window.React.createElement(Component, props));
+      
+      console.log('\u26A1 FlexiReact: Component hydrated successfully');
+    } catch (error) {
+      console.error('\u26A1 FlexiReact: Hydration failed', error);
+    }
+  })();
+</script>`;
+}
+async function parseBody(req) {
+  return new Promise((resolve) => {
+    const contentType = req.headers["content-type"] || "";
+    let body = "";
+    req.on("data", (chunk) => {
+      body += chunk.toString();
+    });
+    req.on("end", () => {
+      try {
+        if (contentType.includes("application/json") && body) {
+          resolve(JSON.parse(body));
+        } else if (contentType.includes("application/x-www-form-urlencoded") && body) {
+          resolve(Object.fromEntries(new URLSearchParams(body)));
+        } else {
+          resolve(body || null);
+        }
+      } catch {
+        resolve(body);
+      }
+    });
+    req.on("error", () => resolve(null));
+  });
+}
+
+// core/start-dev.ts
+createServer({ mode: "development" });
+//# sourceMappingURL=start-dev.js.map