@teamvelix/velix 5.2.5 → 5.2.7

package/dist/{chunk-HGP4TUJS.js → chunk-MAAAP4QR.js}

@@ -1,10 +1,10 @@
-import { logger_default, buildRouteTree, matchRoute, VERSION } from './chunk-MLLSS7Y5.js';
+import { definePlugin, PluginHooks, logger_default, loadPlugins, pluginManager, buildRouteTree, matchRoute, VERSION } from './chunk-SNWXKPXR.js';
 import { loadConfig, resolvePaths } from './chunk-F24Q2MX3.js';
 import { getRegisteredIslands, generateAdvancedHydrationScript } from './chunk-JI2HJFUT.js';
-import { __dirname as __dirname$1 } from './chunk-4S5YQJHB.js';
+import { __dirname as __dirname$1, __require } from './chunk-BQ4HFLRL.js';
 import http from 'http';
-import fs4 from 'fs';
-import path4 from 'path';
+import fs3 from 'fs';
+import path3 from 'path';
 import { pathToFileURL, fileURLToPath } from 'url';
 import { createRequire } from 'module';
 import React, { useActionState } from 'react';
@@ -73,11 +73,11 @@ async function loadMiddleware(projectRoot) {
   const fns = [];
   const possibleFiles = ["proxy.ts", "proxy.js"];
   for (const file of possibleFiles) {
-    const filePath = path4.join(projectRoot, file);
-    if (!fs4.existsSync(filePath)) continue;
+    const filePath = path3.join(projectRoot, file);
+    if (!fs3.existsSync(filePath)) continue;
     try {
-      const { pathToFileURL: pathToFileURL3 } = await import('url');
-      const url = pathToFileURL3(filePath).href;
+      const { pathToFileURL: pathToFileURL2 } = await import('url');
+      const url = pathToFileURL2(filePath).href;
       const mod = await import(`${url}?t=${Date.now()}`);
       const fn = mod.default || mod.proxy || mod.middleware;
       if (typeof fn === "function") {
@@ -179,140 +179,6 @@ function composeMiddleware(...fns) {
     await run();
   };
 }
-var PluginHooks = {
-  CONFIG: "config",
-  SERVER_START: "server:start",
-  REQUEST: "request",
-  RESPONSE: "response",
-  ROUTES_LOADED: "routes:loaded",
-  BEFORE_RENDER: "render:before",
-  AFTER_RENDER: "render:after",
-  BUILD_START: "build:start",
-  BUILD_END: "build:end"
-};
-var PluginManager = class {
-  plugins = [];
-  hooks = /* @__PURE__ */ new Map();
-  /**
-   * Register a plugin
-   */
-  register(plugin) {
-    this.plugins.push(plugin);
-    if (plugin.hooks) {
-      for (const [hookName, handler] of Object.entries(plugin.hooks)) {
-        if (handler) {
-          const existing = this.hooks.get(hookName) || [];
-          existing.push(handler);
-          this.hooks.set(hookName, existing);
-        }
-      }
-    }
-  }
-  /**
-   * Run a hook with arguments
-   */
-  async runHook(hookName, ...args) {
-    const handlers = this.hooks.get(hookName) || [];
-    for (const handler of handlers) {
-      await handler(...args);
-    }
-  }
-  /**
-   * Run a waterfall hook — each handler transforms the first argument
-   */
-  async runWaterfallHook(hookName, value, ...args) {
-    const handlers = this.hooks.get(hookName) || [];
-    let result = value;
-    for (const handler of handlers) {
-      const transformed = await handler(result, ...args);
-      if (transformed !== void 0) result = transformed;
-    }
-    return result;
-  }
-  /**
-   * Get all registered plugins
-   */
-  getPlugins() {
-    return [...this.plugins];
-  }
-  /**
-   * Check if a plugin is registered
-   */
-  hasPlugin(name) {
-    return this.plugins.some((p) => p.name === name);
-  }
-};
-var pluginManager = new PluginManager();
-async function loadPlugins(projectRoot, config) {
-  const pluginEntries = config.plugins || [];
-  for (const entry of pluginEntries) {
-    try {
-      if (typeof entry === "string") {
-        const localPath = path4.join(projectRoot, "plugins", entry + ".ts");
-        const localPathJs = path4.join(projectRoot, "plugins", entry + ".js");
-        const localPathDir = path4.join(projectRoot, "plugins", entry, "index.ts");
-        let pluginPath = null;
-        if (fs4.existsSync(localPath)) pluginPath = localPath;
-        else if (fs4.existsSync(localPathJs)) pluginPath = localPathJs;
-        else if (fs4.existsSync(localPathDir)) pluginPath = localPathDir;
-        if (pluginPath) {
-          const url = pathToFileURL(pluginPath).href;
-          const mod = await import(`${url}?t=${Date.now()}`);
-          const plugin = mod.default || mod;
-          if (plugin.name) {
-            pluginManager.register(plugin);
-          }
-        } else {
-          try {
-            const mod = await import(entry);
-            const plugin = mod.default || mod;
-            if (plugin.name) pluginManager.register(plugin);
-          } catch {
-            console.warn(`\u26A0 Plugin not found: ${entry}`);
-          }
-        }
-      } else if (typeof entry === "object" && entry !== null && "name" in entry) {
-        pluginManager.register(entry);
-      }
-    } catch (err) {
-      const error = err;
-      console.warn(`\u26A0 Failed to load plugin: ${error?.message || String(error)}`);
-    }
-  }
-}
-function definePlugin(definition) {
-  return definition;
-}
-({
-  /**
-   * Security headers plugin
-   */
-  security: definePlugin({
-    name: "velix:security",
-    hooks: {
-      [PluginHooks.RESPONSE]: (_req, res) => {
-        const response = res;
-        if (!response.headersSent) {
-          response.setHeader("X-Content-Type-Options", "nosniff");
-          response.setHeader("X-Frame-Options", "DENY");
-          response.setHeader("X-XSS-Protection", "1; mode=block");
-        }
-      }
-    }
-  }),
-  /**
-   * Request logging plugin
-   */
-  logger: definePlugin({
-    name: "velix:logger",
-    hooks: {
-      [PluginHooks.RESPONSE]: (req, _res, duration) => {
-        const request = req;
-        console.log(`  ${request.method} ${request.url} ${duration}ms`);
-      }
-    }
-  })
-});
 function detectTailwindCli() {
   const v4 = spawnSync("npx @tailwindcss/cli --help", {
     stdio: "pipe",
@@ -362,13 +228,13 @@ function tailwindPlugin(options = {}) {
       [PluginHooks.SERVER_START]: async (server, isDevArg) => {
         const isDev = isDevArg;
         if (!isDev) return;
-        if (!fs4.existsSync(input)) {
+        if (!fs3.existsSync(input)) {
           logger_default.warn(`Tailwind input file not found: ${input}`);
           return;
         }
-        const outputDir = path4.dirname(output);
-        if (!fs4.existsSync(outputDir)) {
-          fs4.mkdirSync(outputDir, { recursive: true });
+        const outputDir = path3.dirname(output);
+        if (!fs3.existsSync(outputDir)) {
+          fs3.mkdirSync(outputDir, { recursive: true });
         }
         logger_default.info("Building initial Tailwind CSS...");
         try {
@@ -1313,27 +1179,30 @@ function generateDevToolsHtml(isDev, ctx = {}) {
 }
 
 // server/error-pages.ts
+function escapeHtml2(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
 function generate404Page(pathname = "/") {
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>404 - Page Not Found | Velix v5</title>
+    <title>404 - Page Not Found | Velix v${VERSION}</title>
     <link rel="icon" href="/favicon.webp">
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body { 
           margin: 0; 
-          background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); 
+          background: #161616;
           color: white; 
-          font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
           display: flex; 
           align-items: center; 
           justify-content: center; 
           min-height: 100vh; 
           text-align: center;
-          overflow: hidden;
+          -webkit-font-smoothing: antialiased;
         }
         .container { 
           max-width: 700px; 
@@ -1341,489 +1210,431 @@ function generate404Page(pathname = "/") {
           position: relative;
           z-index: 10;
         }
-        .bg-pattern {
-          position: absolute;
-          inset: 0;
-          background-image: radial-gradient(circle at 20% 50%, rgba(34, 211, 238, 0.1) 0%, transparent 50%),
-                            radial-gradient(circle at 80% 80%, rgba(37, 99, 235, 0.1) 0%, transparent 50%);
-          z-index: 1;
-        }
         h1 { 
-          font-size: 180px; 
+          font-size: 160px; 
           font-weight: 900; 
           margin: 0; 
-          background: linear-gradient(135deg, #22D3EE 0%, #2563EB 100%); 
+          background: linear-gradient(135deg, #00e87a 0%, #22d3ee 100%); 
           -webkit-background-clip: text; 
           -webkit-text-fill-color: transparent; 
           line-height: 1; 
           letter-spacing: -0.05em;
-          animation: fadeInUp 0.6s ease-out;
+          animation: fadeIn 0.5s ease-out;
         }
         h2 { 
-          font-size: 36px; 
-          font-weight: 800; 
-          margin: 30px 0 15px; 
-          color: #F8FAFC;
-          animation: fadeInUp 0.6s ease-out 0.1s backwards;
+          font-size: 32px; 
+          font-weight: 700; 
+          margin: 24px 0 12px; 
+          color: #ededed;
+          animation: fadeIn 0.5s ease-out 0.1s backwards;
         }
         p { 
-          color: #94A3B8; 
-          font-size: 18px; 
+          color: #888; 
+          font-size: 16px; 
           line-height: 1.7; 
-          margin-bottom: 40px;
-          animation: fadeInUp 0.6s ease-out 0.2s backwards;
+          margin-bottom: 36px;
+          animation: fadeIn 0.5s ease-out 0.2s backwards;
         }
         code { 
-          background: rgba(255,255,255,0.1); 
-          padding: 4px 10px; 
+          background: #222; 
+          padding: 3px 8px; 
           border-radius: 6px; 
-          font-family: 'Fira Code', 'Courier New', monospace; 
-          color: #22D3EE; 
-          font-size: 16px;
-          border: 1px solid rgba(34, 211, 238, 0.2);
+          font-family: 'JetBrains Mono', monospace; 
+          color: #00e87a; 
+          font-size: 14px;
+          border: 1px solid #333;
         }
         .btn-group {
           display: flex;
-          gap: 16px;
+          gap: 12px;
           justify-content: center;
-          flex-wrap: wrap;
-          animation: fadeInUp 0.6s ease-out 0.3s backwards;
+          animation: fadeIn 0.5s ease-out 0.3s backwards;
         }
         .btn { 
           display: inline-block; 
-          background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); 
+          background: #222; 
           color: white; 
           text-decoration: none; 
-          padding: 14px 36px; 
-          border-radius: 12px; 
+          padding: 12px 28px; 
+          border-radius: 10px; 
           font-weight: 600; 
-          font-size: 16px;
-          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
-          box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
-          border: none;
+          font-size: 14px;
+          transition: all 0.2s; 
+          border: 1px solid #333;
           cursor: pointer;
         }
-        .btn:hover { 
-          transform: translateY(-2px); 
-          box-shadow: 0 15px 40px rgba(37, 99, 235, 0.4);
-        }
-        .btn-outline { 
-          background: transparent; 
-          color: #22D3EE; 
-          border: 2px solid #22D3EE; 
-          box-shadow: none;
+        .btn:hover { background: #333; }
+        .btn-accent { 
+          background: #00e87a; 
+          color: #000; 
+          border-color: #00e87a;
         }
-        .btn-outline:hover { 
-          background: rgba(34, 211, 238, 0.1); 
-          box-shadow: 0 10px 30px rgba(34, 211, 238, 0.2);
-        }
-        @keyframes fadeInUp {
-          from {
-            opacity: 0;
-            transform: translateY(30px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
+        .btn-accent:hover { background: #00d46e; }
+        @keyframes fadeIn {
+          from { opacity: 0; transform: translateY(16px); }
+          to { opacity: 1; transform: translateY(0); }
         }
     </style>
 </head>
 <body>
-    <div class="bg-pattern"></div>
     <div class="container">
         <h1>404</h1>
         <h2>Page Not Found</h2>
         <p>The page <code>${pathname}</code> could not be found.<br>It may have been moved or deleted.</p>
         <div class="btn-group">
-          <a href="/" class="btn">Return Home</a>
-          <a href="javascript:history.back()" class="btn btn-outline">Go Back</a>
+          <a href="/" class="btn btn-accent">Return Home</a>
+          <a href="javascript:history.back()" class="btn">Go Back</a>
         </div>
     </div>
 </body>
 </html>`;
 }
 function generate500Page(options) {
-  const { title, message, stack, isDev, pathname } = options;
-  let callStackCards = "";
-  let frameCount = 0;
+  const { message, stack, isDev, pathname } = options;
+  let frames = [];
+  let sourceSnippet = "";
+  let errorLine = 0;
+  let errorFile = "";
   if (isDev && stack) {
-    const stackLines = stack.split("\n").filter((line) => line.trim());
-    const frames = stackLines.slice(1).filter((line) => line.includes("at "));
-    frameCount = frames.length;
-    callStackCards = frames.map((frame, index) => {
-      const match = frame.match(/at\s+(.+?)\s+\((.+?)\)/) || frame.match(/at\s+(.+)/);
-      if (match) {
-        const funcName = match[1] || "anonymous";
-        const location = match[2] || match[1];
-        return `
-          <div class="error-card" data-frame="${index}">
-            <div class="card-header">
-              <div class="card-title">${funcName.trim()}</div>
-              <div class="card-number">${index + 1}</div>
-            </div>
-            <div class="card-location">${location.trim()}</div>
-          </div>
-        `;
+    const stackLines = stack.split("\\n").filter((line) => line.trim());
+    frames = stackLines.slice(1).filter((line) => line.includes("at ")).map((frame) => {
+      const match = frame.match(/at\s+(.+?)\s+\((.+?):(\d+):(\d+)\)/) || frame.match(/at\s+(.+?):(\d+):(\d+)/);
+      if (match && match.length === 5) {
+        return { funcName: match[1].trim(), file: match[2], line: match[3], col: match[4] };
+      }
+      if (match && match.length === 4) {
+        return { funcName: "(anonymous)", file: match[1].trim(), line: match[2], col: match[3] };
+      }
+      const simpleMatch = frame.match(/at\s+(.+)/);
+      return { funcName: simpleMatch?.[1]?.trim() || "unknown", file: "", line: "", col: "" };
+    });
+    if (frames.length > 0) {
+      const firstFrame = frames.find((f) => f.file && !f.file.includes("node_modules")) || frames[0];
+      errorFile = firstFrame.file;
+      errorLine = parseInt(firstFrame.line, 10) || 0;
+      if (errorFile && errorLine > 0) {
+        try {
+          const fs4 = __require("fs");
+          if (fs4.existsSync(errorFile)) {
+            const src = fs4.readFileSync(errorFile, "utf-8").split("\\n");
+            const start = Math.max(0, errorLine - 3);
+            const end = Math.min(src.length, errorLine + 3);
+            sourceSnippet = src.slice(start, end).map((l, i) => {
+              const num = start + i + 1;
+              const isErr = num === errorLine;
+              const prefix = isErr ? "> " : "  ";
+              const numStr = String(num).padStart(4, " ");
+              return `<div class="src-line${isErr ? " src-err" : ""}">${prefix}${numStr} | ${escapeHtml2(l)}</div>`;
+            }).join("");
+          }
+        } catch (_) {
+        }
       }
-      return "";
-    }).join("");
+    }
   }
+  const userFrames = frames.filter((f) => f.file && !f.file.includes("node_modules"));
+  const ignoredCount = frames.length - userFrames.length;
+  const shortFile = errorFile.replace(/\\/g, "/").replace(/.*\/(?=app\/|server\/|src\/|pages\/)/, "");
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Error | Velix v5</title>
+    <title>Error | Velix v${VERSION}</title>
     <link rel="icon" href="/favicon.webp">
     <style>
+        :root {
+          --bg-body: #000;
+          --bg-card: #111;
+          --border: #333;
+          --text-main: #ededed;
+          --text-muted: #888;
+          --red-tag: #e5484d;
+          --red-bg: rgba(229, 72, 77, 0.15);
+          --code-bg: #000;
+          --code-hl: rgba(255,255,255,0.1);
+          --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+          --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        }
+
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { 
-          margin: 0; 
-          background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
-          color: #F8FAFC; 
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
+        body {
+          background: var(--bg-body);
+          color: var(--text-main);
+          font-family: var(--font-sans);
           min-height: 100vh;
-          overflow-x: hidden;
-        }
-        .container {
-          max-width: 900px;
-          margin: 0 auto;
-          padding: 40px 20px;
-        }
-        .error-header {
-          background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
-          color: white;
-          padding: 20px 28px;
-          border-radius: 16px;
-          display: flex;
-          align-items: center;
-          gap: 14px;
-          margin-bottom: 28px;
-          font-size: 18px;
-          font-weight: 700;
-          box-shadow: 0 10px 40px rgba(239, 68, 68, 0.3);
-        }
-        .error-header svg {
-          width: 24px;
-          height: 24px;
-          flex-shrink: 0;
-        }
-        .error-badge {
-          display: inline-block;
-          background: linear-gradient(135deg, #1E40AF 0%, #1E3A8A 100%);
-          color: #60A5FA;
-          padding: 6px 16px;
-          border-radius: 8px;
-          font-size: 13px;
-          font-weight: 700;
-          margin-bottom: 18px;
-          text-transform: uppercase;
-          letter-spacing: 0.8px;
-          box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
+          line-height: 1.7;
+          margin-bottom: 12px;
+          word-break: break-word;
         }
-        .route-badge {
-          background: linear-gradient(135deg, #0C4A6E 0%, #075985 100%);
-          color: #22D3EE;
-          padding: 10px 18px;
-          border-radius: 10px;
+        .error-hint {
+          color: #22c55e;
           font-size: 14px;
-          margin-bottom: 24px;
-          font-family: 'Courier New', monospace;
-          box-shadow: 0 4px 12px rgba(12, 74, 110, 0.3);
-          border: 1px solid rgba(34, 211, 238, 0.2);
-        }
-        .error-message {
-          background: rgba(239, 68, 68, 0.1);
-          border-left: 4px solid #EF4444;
-          padding: 18px 20px;
-          border-radius: 10px;
-          margin-bottom: 32px;
-        }
-        .error-message-text {
-          color: #FCA5A5;
-          font-size: 16px;
-          font-weight: 600;
-          line-height: 1.6;
-          font-family: 'Courier New', monospace;
+          margin-bottom: 20px;
         }
-        .stack-section {
-          margin-top: 32px;
+
+        /* Source block */
+        .source-block {
+          background: #1a1a1a;
+          border: 1px solid #2a2a2a;
+          border-radius: 12px;
+          overflow: hidden;
+          margin-bottom: 24px;
         }
-        .stack-header {
+        .source-header {
           display: flex;
           align-items: center;
           justify-content: space-between;
-          margin-bottom: 20px;
+          padding: 10px 16px;
+          background: #1e1e1e;
+          border-bottom: 1px solid #2a2a2a;
+          font-size: 13px;
+          color: #aaa;
         }
-        .stack-title {
-          font-size: 18px;
-          font-weight: 700;
-          color: #F1F5F9;
-          display: flex;
-          align-items: center;
-          gap: 10px;
+        .source-header .file-icon { color: #666; margin-right: 8px; }
+        .source-header a {
+          color: #666;
+          text-decoration: none;
+          transition: color .15s;
         }
-        .frame-counter {
-          background: linear-gradient(135deg, #1F2937 0%, #111827 100%);
-          color: #22D3EE;
-          padding: 6px 14px;
-          border-radius: 8px;
+        .source-header a:hover { color: #fff; }
+        .source-code {
+          padding: 12px 0;
+          overflow-x: auto;
+          font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, monospace;
           font-size: 13px;
-          font-weight: 700;
-          border: 1px solid rgba(34, 211, 238, 0.2);
+          line-height: 1.7;
         }
-        .error-card {
-          background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
-          border: 1px solid rgba(34, 211, 238, 0.2);
-          border-radius: 14px;
-          padding: 20px;
-          margin-bottom: 12px;
-          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-          display: none;
+        .src-line {
+          padding: 0 16px;
+          white-space: pre;
+          color: #888;
         }
-        .error-card.active {
-          display: block;
-          animation: slideIn 0.3s ease-out;
+        .src-err {
+          background: rgba(255,50,50,0.1);
+          color: #ff8a8a;
+          font-weight: 500;
         }
-        .error-card:hover {
-          border-color: rgba(34, 211, 238, 0.5);
-          box-shadow: 0 8px 24px rgba(34, 211, 238, 0.2);
-          transform: translateY(-2px);
-        }
-        .card-header {
+
+        /* Call stack */
+        .stack-section { margin-bottom: 24px; }
+        .stack-header {
           display: flex;
-          justify-content: space-between;
           align-items: center;
+          justify-content: space-between;
           margin-bottom: 12px;
         }
-        .card-title {
-          color: #22D3EE;
+        .stack-label {
           font-size: 15px;
           font-weight: 700;
-          font-family: 'Courier New', monospace;
+          color: #ededed;
+          display: flex;
+          align-items: center;
+          gap: 8px;
         }
-        .card-number {
-          background: rgba(34, 211, 238, 0.2);
-          color: #22D3EE;
-          padding: 4px 10px;
+        .stack-count {
+          background: #2a2a2a;
+          color: #aaa;
+          padding: 2px 8px;
           border-radius: 6px;
           font-size: 12px;
-          font-weight: 700;
+          font-weight: 600;
         }
-        .card-location {
-          color: #94A3B8;
+        .stack-toggle {
           font-size: 13px;
-          font-family: 'Courier New', monospace;
-          word-break: break-all;
-          line-height: 1.6;
-        }
-        .pagination {
+          color: #888;
+          cursor: pointer;
+          background: none;
+          border: none;
           display: flex;
-          justify-content: center;
           align-items: center;
-          gap: 12px;
-          margin-top: 24px;
-        }
-        .pagination-btn {
-          background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
-          border: 1px solid rgba(34, 211, 238, 0.3);
-          color: #22D3EE;
-          padding: 10px 20px;
-          border-radius: 10px;
-          font-size: 14px;
-          font-weight: 600;
-          cursor: pointer;
-          transition: all 0.2s;
-        }
-        .pagination-btn:hover:not(:disabled) {
-          background: linear-gradient(135deg, #22D3EE 0%, #06B6D4 100%);
-          color: #0F172A;
-          transform: translateY(-2px);
-          box-shadow: 0 6px 20px rgba(34, 211, 238, 0.4);
+          gap: 4px;
+          transition: color .15s;
         }
-        .pagination-btn:disabled {
-          opacity: 0.3;
-          cursor: not-allowed;
+        .stack-toggle:hover { color: #fff; }
+
+        .frame {
+          padding: 12px 0;
+          border-bottom: 1px solid #1e1e1e;
         }
-        .pagination-info {
-          color: #94A3B8;
+        .frame:last-child { border-bottom: none; }
+        .frame-name {
           font-size: 14px;
           font-weight: 600;
-        }
-        .footer {
-          margin-top: 48px;
-          padding-top: 28px;
-          border-top: 1px solid rgba(34, 211, 238, 0.2);
+          color: #ededed;
           display: flex;
-          justify-content: space-between;
           align-items: center;
-          flex-wrap: wrap;
-          gap: 20px;
+          gap: 6px;
+          margin-bottom: 4px;
         }
-        .brand {
-          display: flex;
-          align-items: center;
-          gap: 10px;
-          font-weight: 700;
-          color: #22D3EE;
-          font-size: 15px;
+        .frame-name a {
+          color: #666;
+          text-decoration: none;
+          transition: color .15s;
         }
-        .brand img {
-          width: 20px;
-          height: 20px;
+        .frame-name a:hover { color: #fff; }
+        .frame-loc {
+          font-size: 13px;
+          color: #666;
+          font-family: 'JetBrains Mono', 'Fira Code', monospace;
         }
-        .footer-links {
+
+        /* Footer */
+        .footer-row {
           display: flex;
-          gap: 24px;
-          flex-wrap: wrap;
+          justify-content: flex-end;
+          padding: 16px 0;
+          border-top: 1px solid #1e1e1e;
+          margin-top: 8px;
         }
-        .footer-links a {
-          color: #60A5FA;
+        .footer-row a {
+          color: #ff6b6b;
           text-decoration: none;
-          font-weight: 600;
-          transition: all 0.2s;
-          font-size: 14px;
-        }
-        .footer-links a:hover {
-          color: #22D3EE;
-          transform: translateY(-1px);
+          font-size: 13px;
+          font-weight: 500;
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          transition: opacity .15s;
         }
-        .no-stack {
-          background: rgba(239, 68, 68, 0.1);
-          border: 1px solid rgba(239, 68, 68, 0.3);
-          border-radius: 12px;
-          padding: 32px;
-          color: #FCA5A5;
+        .footer-row a:hover { opacity: 0.8; }
+
+        /* Prod mode */
+        .prod-card {
+          background: #1a1a1a;
+          border: 1px solid #2a2a2a;
+          border-radius: 16px;
+          padding: 48px 32px;
           text-align: center;
-          font-size: 15px;
+          margin-top: 32px;
         }
-        @keyframes slideIn {
-          from {
-            opacity: 0;
-            transform: translateY(10px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
+        .prod-card h2 { font-size: 20px; margin-bottom: 8px; color: #fff; }
+        .prod-card p { font-size: 15px; color: #888; margin-bottom: 24px; }
+        .prod-card a {
+          display: inline-block;
+          padding: 10px 24px;
+          border-radius: 10px;
+          background: #222;
+          border: 1px solid #333;
+          color: #fff;
+          text-decoration: none;
+          font-weight: 500;
+          font-size: 14px;
+          transition: all .15s;
         }
+        .prod-card a:hover { background: #333; }
     </style>
 </head>
 <body>
-    <div class="container">
-        <div class="error-header">
-            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
-            </svg>
-            <span>Unhandled Runtime Error</span>
+    <div class="overlay">
+        <!-- Top Bar -->
+        <div class="top-bar">
+            <div class="page-nav">
+                <button id="prev-btn" onclick="changePage(-1)" disabled>\u2039</button>
+                <span><span id="current-page">1</span>/<span id="total-pages">1</span></span>
+                <button id="next-btn" onclick="changePage(1)" disabled>\u203A</button>
+            </div>
+            <div class="version-badge">
+                <span class="version-dot"></span>
+                Velix v${VERSION} esbuild
+            </div>
         </div>
-        
-        <div class="error-badge">SERVER ERROR 500</div>
-        ${pathname ? `<div class="route-badge">Route: ${pathname}</div>` : ""}
-        
-        <div class="error-message">
-            <div class="error-message-text">${message}</div>
+
+        <!-- Error Tag -->
+        <div class="error-tag">Unhandled Runtime Error</div>
+
+        <!-- Error Message -->
+        <div class="error-msg">${escapeHtml2(message)}</div>
+        ${pathname ? `<div class="error-hint">Check the render method of '<strong>${escapeHtml2(pathname)}</strong>'.</div>` : ""}
+
+        ${isDev && sourceSnippet ? `
+        <!-- Source Code Block -->
+        <div class="source-block">
+            <div class="source-header">
+                <span><span class="file-icon">\u2699</span> ${escapeHtml2(shortFile)}${errorLine ? ` (${errorLine})` : ""}${userFrames[0]?.funcName ? ` @ ${escapeHtml2(userFrames[0].funcName)}` : ""}</span>
+                <a href="#" title="Open in editor">\u2197</a>
+            </div>
+            <div class="source-code">${sourceSnippet}</div>
         </div>
-        
-        ${isDev && callStackCards ? `
+        ` : ""}
+
+        ${isDev && frames.length > 0 ? `
+        <!-- Call Stack -->
         <div class="stack-section">
             <div class="stack-header">
-                <div class="stack-title">
-                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-                    </svg>
+                <div class="stack-label">
                     Call Stack
+                    <span class="stack-count">${frames.length}</span>
                 </div>
-                <div class="frame-counter">${frameCount}</div>
+                ${ignoredCount > 0 ? `<button class="stack-toggle" onclick="toggleIgnored()">Show ${ignoredCount} ignore-listed frames \u21D5</button>` : ""}
             </div>
-            <div id="error-cards">
-                ${callStackCards}
+            <div id="frames-list">
+                ${userFrames.map((f, i) => `
+                <div class="frame" data-frame="${i}">
+                    <div class="frame-name">
+                        <strong>${escapeHtml2(f.funcName)}</strong>
+                        <a href="#" title="Open in editor">\u2197</a>
+                    </div>
+                    <div class="frame-loc">${escapeHtml2(f.file.replace(/.*[\\\/](?=app[\\\/]|server[\\\/]|src[\\\/]|pages[\\\/])/, ""))}${f.line ? ` (${f.line}:${f.col})` : ""}</div>
+                </div>
+                `).join("")}
             </div>
-            ${frameCount > 1 ? `
-            <div class="pagination">
-                <button class="pagination-btn" id="prev-btn" onclick="changePage(-1)">
-                    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display:inline;vertical-align:middle;margin-right:4px;">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-                    </svg>
-                    Previous
-                </button>
-                <div class="pagination-info">
-                    <span id="current-page">1</span> / <span id="total-pages">${frameCount}</span>
+            <div id="ignored-frames" style="display:none;">
+                ${frames.filter((f) => !f.file || f.file.includes("node_modules")).map((f, i) => `
+                <div class="frame" data-frame="ignored-${i}">
+                    <div class="frame-name" style="color:#666;">
+                        <strong>${escapeHtml2(f.funcName)}</strong>
+                    </div>
+                    <div class="frame-loc">${escapeHtml2(f.file)}${f.line ? ` (${f.line}:${f.col})` : ""}</div>
                 </div>
-                <button class="pagination-btn" id="next-btn" onclick="changePage(1)">
-                    Next
-                    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display:inline;vertical-align:middle;margin-left:4px;">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-                    </svg>
-                </button>
+                `).join("")}
             </div>
-            ` : ""}
         </div>
-        ` : '<div class="no-stack">An error occurred while processing your request. Please check the server logs for more details.</div>'}
-        
-        <div class="footer">
-            <div class="brand">
-                <img src="/__velix/logo.webp" alt="Velix" onerror="this.style.display='none'"/>
-                <span>Velix v${VERSION}</span>
-            </div>
-            <div class="footer-links">
-                <a href="/">Home</a>
-                <a href="javascript:location.reload()">Reload</a>
-                <a href="https://github.com/velix/velix/tree/main/docs" target="_blank">Documentation</a>
-                ${isDev ? '<span style="color:#94A3B8;">Development Mode</span>' : ""}
-            </div>
+        ` : `
+        <div class="prod-card">
+            <h2>Application Error</h2>
+            <p>A server-side error occurred. Check your server logs for more details.</p>
+            <a href="/">Return Home</a>
+        </div>
+        `}
+
+        <!-- Footer -->
+        <div class="footer-row">
+            <a href="javascript:location.reload()">Was this helpful? \u21BB</a>
         </div>
     </div>
-    
-    ${isDev && frameCount > 0 ? `
+
     <script>
         let currentPage = 1;
-        const totalPages = ${frameCount};
-        const cards = document.querySelectorAll('.error-card');
-        const prevBtn = document.getElementById('prev-btn');
-        const nextBtn = document.getElementById('next-btn');
-        const currentPageSpan = document.getElementById('current-page');
-        
-        function showPage(page) {
-            cards.forEach((card, index) => {
-                card.classList.remove('active');
-                if (index === page - 1) {
-                    card.classList.add('active');
-                }
-            });
-            
-            currentPage = page;
-            currentPageSpan.textContent = page;
-            
-            if (prevBtn) prevBtn.disabled = page === 1;
-            if (nextBtn) nextBtn.disabled = page === totalPages;
-        }
-        
-        function changePage(direction) {
-            const newPage = currentPage + direction;
-            if (newPage >= 1 && newPage <= totalPages) {
-                showPage(newPage);
+        const totalPages = 1;
+        document.getElementById('total-pages').textContent = totalPages;
+
+        function changePage(d) {
+            const next = currentPage + d;
+            if (next >= 1 && next <= totalPages) {
+                currentPage = next;
+                document.getElementById('current-page').textContent = currentPage;
+                document.getElementById('prev-btn').disabled = currentPage === 1;
+                document.getElementById('next-btn').disabled = currentPage === totalPages;
             }
         }
-        
-        // Show first page on load
-        showPage(1);
-        
-        // Keyboard navigation
+
+        function toggleIgnored() {
+            const el = document.getElementById('ignored-frames');
+            if (el) el.style.display = el.style.display === 'none' ? 'block' : 'none';
+        }
+
         document.addEventListener('keydown', (e) => {
             if (e.key === 'ArrowLeft') changePage(-1);
             if (e.key === 'ArrowRight') changePage(1);
         });
     </script>
-    ` : ""}
 </body>
 </html>`;
 }
 function getProjectVersion(dep, projectRoot) {
   try {
-    const projectRequire = createRequire(pathToFileURL(path4.join(projectRoot, "package.json")).href);
+    const projectRequire = createRequire(pathToFileURL(path3.join(projectRoot, "package.json")).href);
     return projectRequire(`${dep}/package.json`).version;
   } catch (e) {
     try {
@@ -1868,7 +1679,7 @@ async function createServer(options = {}) {
   await loadPlugins(projectRoot, config);
   await pluginManager.runHook(PluginHooks.CONFIG, config);
   const middlewareFns = await loadMiddleware(projectRoot);
-  const appDir = config.resolvedAppDir || path4.join(projectRoot, "app");
+  const appDir = config.resolvedAppDir || path3.join(projectRoot, "app");
   const routes = buildRouteTree(appDir);
   await pluginManager.runHook(PluginHooks.ROUTES_LOADED, routes);
   const startTime = Date.now();
@@ -1902,7 +1713,7 @@ async function createServer(options = {}) {
         return;
       }
       if (pathname === "/__velix/image") {
-        const { handleImageOptimization } = await import('./image-optimizer-KPRXE5VI.js');
+        const { handleImageOptimization } = await import('./image-optimizer-QDXS3LHQ.js');
         await handleImageOptimization(req, res, projectRoot);
         return;
       }
@@ -1910,7 +1721,7 @@ async function createServer(options = {}) {
         await serveVelixInternal(pathname, req, res, projectRoot);
         return;
       }
-      const publicDir = config.resolvedPublicDir || path4.join(projectRoot, "public");
+      const publicDir = config.resolvedPublicDir || path3.join(projectRoot, "public");
       if (await serveStaticFile(pathname, publicDir, res, isDev)) {
         if (isDev) logger_default.request(req.method || "GET", pathname, 200, Date.now() - requestStart, { type: "static" });
         return;
@@ -1936,7 +1747,6 @@ async function createServer(options = {}) {
       if (!res.headersSent) {
         res.writeHead(500, { "Content-Type": "text/html; charset=utf-8" });
         res.end(generate500Page({
-          title: "Server Error",
           message: err.message || "An unexpected error occurred",
           stack: isDev ? err.stack : void 0,
           isDev,
@@ -1983,22 +1793,22 @@ async function importModuleSSR(filePath) {
   try {
     return await import(`${fileUrl}?t=${Date.now()}`);
   } catch (err) {
-    const source = fs4.readFileSync(filePath, "utf-8");
+    const source = fs3.readFileSync(filePath, "utf-8");
     if (source.match(/^import\s+['"][^'"]+\.(css|scss|less|sass)['"];?\s*$/m)) {
       const stripped = source.replace(/^import\s+['"][^'"]+\.(css|scss|less|sass)['"];?\s*$/gm, "// [velix:ssr] css import stripped");
-      const ext = path4.extname(filePath);
+      const ext = path3.extname(filePath);
       const tmpPath = filePath.replace(ext, `.__velix_ssr${ext}`);
-      fs4.writeFileSync(tmpPath, stripped);
+      fs3.writeFileSync(tmpPath, stripped);
       try {
         const mod = await import(`${pathToFileURL(tmpPath).href}?t=${Date.now()}`);
         try {
-          fs4.unlinkSync(tmpPath);
+          fs3.unlinkSync(tmpPath);
         } catch {
         }
         return mod;
       } catch (e2) {
         try {
-          fs4.unlinkSync(tmpPath);
+          fs3.unlinkSync(tmpPath);
         } catch {
         }
         throw e2;
@@ -2009,18 +1819,18 @@ async function importModuleSSR(filePath) {
 }
 function collectLayouts(pageFilePath, appDir) {
   const layouts = [];
-  const normalizedAppDir = path4.resolve(appDir);
-  let current = path4.dirname(path4.resolve(pageFilePath));
+  const normalizedAppDir = path3.resolve(appDir);
+  let current = path3.dirname(path3.resolve(pageFilePath));
   while (true) {
     for (const ext of [".tsx", ".jsx", ".ts", ".js"]) {
-      const layoutPath = path4.join(current, `layout${ext}`);
-      if (fs4.existsSync(layoutPath)) {
+      const layoutPath = path3.join(current, `layout${ext}`);
+      if (fs3.existsSync(layoutPath)) {
         layouts.unshift(layoutPath);
         break;
       }
     }
-    if (path4.resolve(current) === normalizedAppDir) break;
-    const parent = path4.dirname(current);
+    if (path3.resolve(current) === normalizedAppDir) break;
+    const parent = path3.dirname(current);
     if (parent === current) break;
     current = parent;
   }
@@ -2040,12 +1850,12 @@ async function renderComponentAsync(Component, props) {
   return element;
 }
 async function serveStaticFile(pathname, publicDir, res, isDev = false) {
-  const filePath = path4.join(publicDir, pathname);
+  const filePath = path3.join(publicDir, pathname);
   if (!filePath.startsWith(publicDir)) return false;
-  if (!fs4.existsSync(filePath) || fs4.statSync(filePath).isDirectory()) return false;
-  const ext = path4.extname(filePath);
+  if (!fs3.existsSync(filePath) || fs3.statSync(filePath).isDirectory()) return false;
+  const ext = path3.extname(filePath);
   const contentType = MIME_TYPES[ext] || "application/octet-stream";
-  const content = fs4.readFileSync(filePath);
+  const content = fs3.readFileSync(filePath);
   res.writeHead(200, {
     "Content-Type": contentType,
     "Content-Length": content.length,
@@ -2124,7 +1934,7 @@ async function handlePageRoute(route, routes, req, res, url, config, isDev, proj
     const mod = await import(`${fileUrl}?t=${Date.now()}`);
     const PageComponent = mod.default;
     let metadata = mod.metadata || mod.generateMetadata?.(route.params) || {};
-    const appDir = config.resolvedAppDir || path4.join(projectRoot, "app");
+    const appDir = config.resolvedAppDir || path3.join(projectRoot, "app");
     const layoutPaths = collectLayouts(route.filePath, appDir);
     const layoutModules = [];
     for (const lp of layoutPaths) {
@@ -2272,7 +2082,6 @@ async function handlePageRoute(route, routes, req, res, url, config, isDev, proj
     logger_default.error(`Render error: ${route.path}`, error);
     res.writeHead(500, { "Content-Type": "text/html; charset=utf-8" });
     res.end(generate500Page({
-      title: "Render Error",
       message: error.message || "Failed to render page",
       stack: isDev ? error.stack : void 0,
       isDev,
@@ -2298,19 +2107,19 @@ async function serveVelixInternal(pathname, req, res, projectRoot) {
   }
   if (pathname === "/__velix/logo.webp") {
     const __filename2 = fileURLToPath(import.meta.url);
-    const __dirname2 = path4.dirname(__filename2);
+    const __dirname2 = path3.dirname(__filename2);
     const candidates = [
-      path4.join(__dirname2, "..", "assets", "logo.webp"),
-      path4.join(__dirname2, "..", "..", "assets", "logo.webp"),
-      path4.join(process.cwd(), "node_modules", "@teamvelix", "velix", "assets", "logo.webp"),
-      path4.join(process.cwd(), "packages", "velix", "assets", "logo.webp"),
-      path4.join(process.cwd(), "node_modules", "velix", "assets", "logo.webp"),
-      path4.join(process.cwd(), "public", "favicon.webp")
+      path3.join(__dirname2, "..", "assets", "logo.webp"),
+      path3.join(__dirname2, "..", "..", "assets", "logo.webp"),
+      path3.join(process.cwd(), "node_modules", "@teamvelix", "velix", "assets", "logo.webp"),
+      path3.join(process.cwd(), "packages", "velix", "assets", "logo.webp"),
+      path3.join(process.cwd(), "node_modules", "velix", "assets", "logo.webp"),
+      path3.join(process.cwd(), "public", "favicon.webp")
     ];
-    const logoPath = candidates.find((p) => fs4.existsSync(p));
+    const logoPath = candidates.find((p) => fs3.existsSync(p));
     if (logoPath) {
       res.writeHead(200, { "Content-Type": "image/webp", "Cache-Control": "public, max-age=31536000, immutable" });
-      res.end(fs4.readFileSync(logoPath));
+      res.end(fs3.readFileSync(logoPath));
     } else {
       res.writeHead(404);
       res.end();
@@ -2320,11 +2129,11 @@ async function serveVelixInternal(pathname, req, res, projectRoot) {
   if (pathname === "/__velix/hmr-client.js") {
     try {
       const candidates = [
-        path4.join(process.cwd(), "packages", "velix-react", "src", "hmr", "hmr-client.ts"),
-        path4.join(process.cwd(), "node_modules", "@teamvelix", "velix-react", "src", "hmr", "hmr-client.ts"),
-        path4.join(__dirname$1, "..", "..", "velix-react", "src", "hmr", "hmr-client.ts")
+        path3.join(process.cwd(), "packages", "velix-react", "src", "hmr", "hmr-client.ts"),
+        path3.join(process.cwd(), "node_modules", "@teamvelix", "velix-react", "src", "hmr", "hmr-client.ts"),
+        path3.join(__dirname$1, "..", "..", "velix-react", "src", "hmr", "hmr-client.ts")
       ];
-      const hmrClientSrc = candidates.find((p) => fs4.existsSync(p));
+      const hmrClientSrc = candidates.find((p) => fs3.existsSync(p));
       if (!hmrClientSrc) {
         res.writeHead(404);
         res.end();
@@ -2353,17 +2162,17 @@ async function serveVelixInternal(pathname, req, res, projectRoot) {
     const componentName = pathname.replace("/__velix/islands/", "").replace(".js", "");
     try {
       const searchDirs = [
-        path4.join(projectRoot, "components"),
-        path4.join(projectRoot, "app"),
-        path4.join(projectRoot, "islands")
+        path3.join(projectRoot, "components"),
+        path3.join(projectRoot, "app"),
+        path3.join(projectRoot, "islands")
       ];
       let componentPath = "";
       for (const dir of searchDirs) {
-        if (!fs4.existsSync(dir)) continue;
-        const files = fs4.readdirSync(dir, { recursive: true });
+        if (!fs3.existsSync(dir)) continue;
+        const files = fs3.readdirSync(dir, { recursive: true });
         const found = files.find((f) => f.replace(/\\/g, "/").endsWith(`${componentName}.tsx`) || f.replace(/\\/g, "/").endsWith(`${componentName}.jsx`));
         if (found) {
-          componentPath = path4.join(dir, found);
+          componentPath = path3.join(dir, found);
           break;
         }
       }
@@ -2450,6 +2259,6 @@ function parseRawBody(req) {
 }
 var server_default = { createServer, tailwindPlugin };
 
-export { PluginHooks, PluginManager, RedirectError, bindArgs, callServerAction, composeMiddleware, cookies, createServer, definePlugin, deserializeArgs, executeAction, formAction, generateJsonLd, generateMetadataTags, generateRobotsTxt, generateSitemap, getAction, getMethod, getPathname, headers, html, isMethod, json, jsonLd, loadMiddleware, loadPlugins, mergeMetadata, middlewares, notFound, parseFormData, parseJson, parseSearchParams, pluginManager, redirect, registerAction, runMiddleware, serverAction, server_default, tailwindPlugin, text, useActionContext, useVelixAction };
-//# sourceMappingURL=chunk-HGP4TUJS.js.map
-//# sourceMappingURL=chunk-HGP4TUJS.js.map
+export { RedirectError, bindArgs, callServerAction, composeMiddleware, cookies, createServer, deserializeArgs, executeAction, formAction, generateJsonLd, generateMetadataTags, generateRobotsTxt, generateSitemap, getAction, getMethod, getPathname, headers, html, isMethod, json, jsonLd, loadMiddleware, mergeMetadata, middlewares, notFound, parseFormData, parseJson, parseSearchParams, redirect, registerAction, runMiddleware, serverAction, server_default, tailwindPlugin, text, useActionContext, useVelixAction };
+//# sourceMappingURL=chunk-MAAAP4QR.js.map
+//# sourceMappingURL=chunk-MAAAP4QR.js.map