npm - @teamvelix/velix - Versions diffs - 5.2.6 → 5.2.8 - Mend

@teamvelix/velix 5.2.6 → 5.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/dist/build/index.js +3 -3
package/dist/chunk-BQ4HFLRL.js +16 -0
package/dist/chunk-BQ4HFLRL.js.map +1 -0
package/dist/{chunk-HGP4TUJS.js → chunk-HMCBOHTD.js} +472 -605
package/dist/chunk-HMCBOHTD.js.map +1 -0
package/dist/{chunk-MLLSS7Y5.js → chunk-RU23OKU5.js} +143 -8
package/dist/chunk-RU23OKU5.js.map +1 -0
package/dist/{chunk-3LWUS6AC.js → chunk-YZDIHMDS.js} +7 -3
package/dist/chunk-YZDIHMDS.js.map +1 -0
package/dist/client/index.js +1 -1
package/dist/config.js +1 -1
package/dist/{image-optimizer-KPRXE5VI.js → image-optimizer-QDXS3LHQ.js} +3 -3
package/dist/{image-optimizer-KPRXE5VI.js.map → image-optimizer-QDXS3LHQ.js.map} +1 -1
package/dist/index.js +4 -4
package/dist/islands/index.js +1 -1
package/dist/runtime/start-build.js +164 -21
package/dist/runtime/start-build.js.map +1 -1
package/dist/runtime/start-dev.js +425 -416
package/dist/runtime/start-dev.js.map +1 -1
package/dist/runtime/start-prod.js +425 -416
package/dist/runtime/start-prod.js.map +1 -1
package/dist/server/index.js +3 -3
package/package.json +3 -3
package/dist/chunk-3LWUS6AC.js.map +0 -1
package/dist/chunk-4S5YQJHB.js +0 -11
package/dist/chunk-4S5YQJHB.js.map +0 -1
package/dist/chunk-HGP4TUJS.js.map +0 -1
package/dist/chunk-MLLSS7Y5.js.map +0 -1

package/dist/runtime/start-dev.js CHANGED Viewed

@@ -1,5 +1,11 @@
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
@@ -701,7 +707,7 @@ init_esm_shims();
 // version.ts
 init_esm_shims();
-var VERSION = "5.2.3";
+var VERSION = "5.2.8";
 // logger.ts
 var colors = {
@@ -1620,511 +1626,514 @@ function generateDevToolsHtml(isDev, ctx = {}) {
 // server/error-pages.ts
 init_esm_shims();
+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%);
-          color: white;
-          font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          min-height: 100vh;
-          text-align: center;
-          overflow: hidden;
-        }
-        .container {
-          max-width: 700px;
-          padding: 60px 40px;
-          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-weight: 900;
-          margin: 0;
-          background: linear-gradient(135deg, #22D3EE 0%, #2563EB 100%);
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-          line-height: 1;
-          letter-spacing: -0.05em;
-          animation: fadeInUp 0.6s ease-out;
-        }
-        h2 {
-          font-size: 36px;
-          font-weight: 800;
-          margin: 30px 0 15px;
-          color: #F8FAFC;
-          animation: fadeInUp 0.6s ease-out 0.1s backwards;
+        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+          background: #0a0a0a;
+          color: #ededed;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          min-height: 100vh;
+          -webkit-font-smoothing: antialiased;
         }
-        p {
-          color: #94A3B8;
-          font-size: 18px;
-          line-height: 1.7;
-          margin-bottom: 40px;
-          animation: fadeInUp 0.6s ease-out 0.2s backwards;
+        .container {
+          display: flex;
+          align-items: center;
+          gap: 32px;
+          padding: 32px;
         }
-        code {
-          background: rgba(255,255,255,0.1);
-          padding: 4px 10px;
-          border-radius: 6px;
-          font-family: 'Fira Code', 'Courier New', monospace;
-          color: #22D3EE;
-          font-size: 16px;
-          border: 1px solid rgba(34, 211, 238, 0.2);
+        .code {
+          font-size: 48px;
+          font-weight: 700;
+          line-height: 1;
+          color: #fff;
+          border-right: 1px solid rgba(255,255,255,0.15);
+          padding-right: 32px;
         }
-        .btn-group {
-          display: flex;
-          gap: 16px;
-          justify-content: center;
-          flex-wrap: wrap;
-          animation: fadeInUp 0.6s ease-out 0.3s backwards;
+        .body h1 {
+          font-size: 18px;
+          font-weight: 600;
+          color: #ededed;
+          margin-bottom: 8px;
         }
-        .btn {
-          display: inline-block;
-          background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
-          color: white;
-          text-decoration: none;
-          padding: 14px 36px;
-          border-radius: 12px;
-          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;
-          cursor: pointer;
+        .body p {
+          font-size: 14px;
+          color: #888;
+          margin-bottom: 20px;
         }
-        .btn:hover {
-          transform: translateY(-2px);
-          box-shadow: 0 15px 40px rgba(37, 99, 235, 0.4);
+        .body p code {
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+          font-size: 13px;
+          background: rgba(255,255,255,0.07);
+          padding: 2px 6px;
+          border-radius: 4px;
+          color: #ccc;
         }
-        .btn-outline {
-          background: transparent;
-          color: #22D3EE;
-          border: 2px solid #22D3EE;
-          box-shadow: none;
+        .actions { display: flex; gap: 10px; }
+        .btn {
+          display: inline-block;
+          padding: 8px 18px;
+          border-radius: 8px;
+          font-size: 14px;
+          font-weight: 500;
+          text-decoration: none;
+          transition: all .15s;
+          border: 1px solid transparent;
         }
-        .btn-outline:hover {
-          background: rgba(34, 211, 238, 0.1);
-          box-shadow: 0 10px 30px rgba(34, 211, 238, 0.2);
+        .btn-primary {
+          background: #fff;
+          color: #000;
         }
-        @keyframes fadeInUp {
-          from {
-            opacity: 0;
-            transform: translateY(30px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
+        .btn-primary:hover { background: #e5e5e5; }
+        .btn-secondary {
+          background: rgba(255,255,255,0.06);
+          color: #ededed;
+          border-color: rgba(255,255,255,0.1);
         }
+        .btn-secondary:hover { background: rgba(255,255,255,0.1); }
     </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>
+        <div class="code">404</div>
+        <div class="body">
+            <h1>This page could not be found</h1>
+            <p>The path <code>${escapeHtml2(pathname)}</code> does not exist.</p>
+            <div class="actions">
+                <a href="/" class="btn btn-primary">Return Home</a>
+                <a href="javascript:history.back()" class="btn btn-secondary">Go Back</a>
+            </div>
         </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((l) => l.trim());
+    frames = stackLines.slice(1).filter((line) => line.includes("at ")).map((frame) => {
+      const m1 = frame.match(/at\s+(.+?)\s+\((.+?):(\d+):\d+\)/);
+      if (m1) return { call: m1[1].trim(), file: m1[2], line: parseInt(m1[3], 10) };
+      const m2 = frame.match(/at\s+(.+?):(\d+):\d+/);
+      if (m2) return { call: "(anonymous)", file: m2[1].trim(), line: parseInt(m2[2], 10) };
+      return { call: frame.replace(/^\s*at\s+/, "").trim(), file: "", line: null };
+    });
+    const firstUserFrame = frames.find((f) => f.file && !f.file.includes("node_modules")) || frames[0];
+    if (firstUserFrame) {
+      errorFile = firstUserFrame.file;
+      errorLine = firstUserFrame.line || 0;
+      if (errorFile && errorLine > 0) {
+        try {
+          const fs8 = __require("fs");
+          if (fs8.existsSync(errorFile)) {
+            const src = fs8.readFileSync(errorFile, "utf-8").split("\n");
+            const start = Math.max(0, errorLine - 4);
+            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 numStr = String(num).padStart(3, " ");
+              if (isErr) {
+                return `<div class="src-line src-err"><span class="ln">${numStr}</span>${escapeHtml2(l)}</div>`;
+              }
+              return `<div class="src-line"><span class="ln">${numStr}</span>${escapeHtml2(l)}</div>`;
+            }).join("");
+          }
+        } catch (_) {
+        }
       }
-      return "";
-    }).join("");
+    }
+  }
+  const userFrames = frames.filter((f) => f.file && !f.file.includes("node_modules"));
+  const ignoredFrames = frames.filter((f) => !f.file || f.file.includes("node_modules"));
+  const shortFile = errorFile.replace(/\\/g, "/").replace(/.*\/(?=app\/|server\/|src\/|pages\/)/, "");
+  if (!isDev) {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>500 - Internal Server Error | Velix</title>
+    <link rel="icon" href="/favicon.webp">
+    <style>
+        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+          background: #0a0a0a;
+          color: #ededed;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+          display: flex; align-items: center; justify-content: center;
+          min-height: 100vh;
+          -webkit-font-smoothing: antialiased;
+        }
+        .container { display: flex; align-items: center; gap: 32px; padding: 32px; }
+        .code { font-size: 48px; font-weight: 700; color: #fff; border-right: 1px solid rgba(255,255,255,0.15); padding-right: 32px; }
+        .body h1 { font-size: 18px; font-weight: 600; color: #ededed; margin-bottom: 8px; }
+        .body p { font-size: 14px; color: #888; margin-bottom: 20px; }
+        .btn { display: inline-block; padding: 8px 18px; border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none; background: #fff; color: #000; transition: all .15s; }
+        .btn:hover { background: #e5e5e5; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="code">500</div>
+        <div class="body">
+            <h1>Internal Server Error</h1>
+            <p>A server-side exception has occurred. Please try again later.</p>
+            <a href="/" class="btn">Return Home</a>
+        </div>
+    </div>
+</body>
+</html>`;
   }
   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>
-        * { 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;
+        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+          background: rgba(0, 0, 0, 0.85);
+          color: #ededed;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
           min-height: 100vh;
-          overflow-x: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 24px;
+          -webkit-font-smoothing: antialiased;
         }
-        .container {
-          max-width: 900px;
-          margin: 0 auto;
-          padding: 40px 20px;
+        /* \u2500\u2500 Overlay Card \u2500\u2500 */
+        .overlay {
+          width: 100%;
+          max-width: 940px;
+          background: #111;
+          border: 1px solid #2a2a2a;
+          border-radius: 12px;
+          box-shadow: 0 24px 64px rgba(0,0,0,0.6);
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+          max-height: calc(100vh - 48px);
         }
-        .error-header {
-          background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
-          color: white;
-          padding: 20px 28px;
-          border-radius: 16px;
+        /* \u2500\u2500 Header Bar \u2500\u2500 */
+        .header {
           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;
+          justify-content: space-between;
+          padding: 12px 20px;
+          background: #161616;
+          border-bottom: 1px solid #2a2a2a;
+          gap: 12px;
           flex-shrink: 0;
         }
-        .error-badge {
-          display: inline-block;
-          background: linear-gradient(135deg, #1E40AF 0%, #1E3A8A 100%);
-          color: #60A5FA;
-          padding: 6px 16px;
-          border-radius: 8px;
+        .header-left {
+          display: flex;
+          align-items: center;
+          gap: 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);
+          color: #888;
         }
-        .route-badge {
-          background: linear-gradient(135deg, #0C4A6E 0%, #075985 100%);
-          color: #22D3EE;
-          padding: 10px 18px;
-          border-radius: 10px;
-          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;
-        }
-        .stack-section {
-          margin-top: 32px;
+        .counter-badge {
+          background: #1e1e1e;
+          border: 1px solid #333;
+          border-radius: 6px;
+          padding: 2px 8px;
+          font-size: 12px;
+          color: #999;
+          font-variant-numeric: tabular-nums;
         }
-        .stack-header {
+        .nav-btn {
+          background: #1e1e1e;
+          border: 1px solid #333;
+          border-radius: 6px;
+          color: #888;
+          cursor: pointer;
+          width: 24px;
+          height: 24px;
           display: flex;
           align-items: center;
-          justify-content: space-between;
-          margin-bottom: 20px;
+          justify-content: center;
+          font-size: 13px;
+          transition: all .15s;
         }
-        .stack-title {
-          font-size: 18px;
-          font-weight: 700;
-          color: #F1F5F9;
+        .nav-btn:hover:not(:disabled) { background: #2a2a2a; color: #fff; }
+        .nav-btn:disabled { opacity: 0.3; cursor: default; }
+        .framework-tag {
           display: flex;
           align-items: center;
-          gap: 10px;
+          gap: 6px;
+          font-size: 12px;
+          color: #666;
         }
-        .frame-counter {
-          background: linear-gradient(135deg, #1F2937 0%, #111827 100%);
-          color: #22D3EE;
-          padding: 6px 14px;
-          border-radius: 8px;
-          font-size: 13px;
+        .framework-tag::before {
+          content: '';
+          display: inline-block;
+          width: 6px; height: 6px;
+          border-radius: 50%;
+          background: #3b82f6;
+        }
+        /* \u2500\u2500 Scrollable Content \u2500\u2500 */
+        .content {
+          overflow-y: auto;
+          flex: 1;
+        }
+        /* \u2500\u2500 Error Summary \u2500\u2500 */
+        .error-summary {
+          padding: 28px 24px 20px;
+          border-bottom: 1px solid #1e1e1e;
+        }
+        .error-label {
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          font-size: 11px;
           font-weight: 700;
-          border: 1px solid rgba(34, 211, 238, 0.2);
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: #f87171;
+          background: rgba(248, 113, 113, 0.1);
+          border: 1px solid rgba(248, 113, 113, 0.25);
+          padding: 3px 8px;
+          border-radius: 4px;
+          margin-bottom: 14px;
         }
-        .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;
+        .error-label svg { width: 10px; height: 10px; fill: currentColor; }
+        .error-message {
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+          font-size: 18px;
+          font-weight: 600;
+          line-height: 1.5;
+          color: #fff;
+          word-break: break-word;
         }
-        .error-card.active {
-          display: block;
-          animation: slideIn 0.3s ease-out;
+        .error-location {
+          margin-top: 10px;
+          font-size: 13px;
+          color: #888;
         }
-        .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);
+        .error-location strong { color: #ccc; }
+        /* \u2500\u2500 Source Block \u2500\u2500 */
+        .source-block {
+          border-bottom: 1px solid #1e1e1e;
         }
-        .card-header {
+        .source-topbar {
           display: flex;
-          justify-content: space-between;
           align-items: center;
-          margin-bottom: 12px;
-        }
-        .card-title {
-          color: #22D3EE;
-          font-size: 15px;
-          font-weight: 700;
-          font-family: 'Courier New', monospace;
-        }
-        .card-number {
-          background: rgba(34, 211, 238, 0.2);
-          color: #22D3EE;
-          padding: 4px 10px;
-          border-radius: 6px;
+          padding: 10px 16px;
+          background: #161616;
+          border-bottom: 1px solid #1e1e1e;
+          gap: 8px;
           font-size: 12px;
-          font-weight: 700;
+          color: #666;
         }
-        .card-location {
-          color: #94A3B8;
+        .source-topbar .filepath { color: #aaa; font-family: ui-monospace, monospace; }
+        .source-code {
+          background: #0d0d0d;
+          overflow-x: auto;
+          padding: 10px 0;
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
           font-size: 13px;
-          font-family: 'Courier New', monospace;
-          word-break: break-all;
-          line-height: 1.6;
+          line-height: 1.7;
         }
-        .pagination {
+        .src-line {
           display: flex;
-          justify-content: center;
-          align-items: center;
-          gap: 12px;
-          margin-top: 24px;
+          align-items: flex-start;
+          padding: 0 20px;
+          white-space: pre;
+          color: #555;
         }
-        .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;
+        .src-line .ln {
+          color: #3a3a3a;
+          text-align: right;
+          width: 36px;
+          margin-right: 16px;
+          flex-shrink: 0;
+          user-select: none;
         }
-        .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);
+        .src-err {
+          background: rgba(239, 68, 68, 0.08);
+          color: #fca5a5;
+          position: relative;
         }
-        .pagination-btn:disabled {
-          opacity: 0.3;
-          cursor: not-allowed;
+        .src-err .ln { color: #ef4444; }
+        .src-err::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0; bottom: 0;
+          width: 3px;
+          background: #ef4444;
         }
-        .pagination-info {
-          color: #94A3B8;
-          font-size: 14px;
-          font-weight: 600;
+        /* \u2500\u2500 Call Stack \u2500\u2500 */
+        .callstack {
+          padding: 20px 24px;
         }
-        .footer {
-          margin-top: 48px;
-          padding-top: 28px;
-          border-top: 1px solid rgba(34, 211, 238, 0.2);
+        .callstack-header {
           display: flex;
-          justify-content: space-between;
           align-items: center;
-          flex-wrap: wrap;
-          gap: 20px;
+          justify-content: space-between;
+          margin-bottom: 14px;
+        }
+        .callstack-title {
+          font-size: 13px;
+          font-weight: 600;
+          color: #aaa;
+          text-transform: uppercase;
+          letter-spacing: 0.06em;
         }
-        .brand {
+        .ignore-btn {
+          font-size: 12px;
+          color: #555;
+          background: none;
+          border: none;
+          cursor: pointer;
           display: flex;
           align-items: center;
-          gap: 10px;
-          font-weight: 700;
-          color: #22D3EE;
-          font-size: 15px;
-        }
-        .brand img {
-          width: 20px;
-          height: 20px;
+          gap: 4px;
+          transition: color .15s;
         }
-        .footer-links {
-          display: flex;
-          gap: 24px;
-          flex-wrap: wrap;
+        .ignore-btn:hover { color: #aaa; }
+        .ignore-caret { transition: transform .2s; }
+        .ignore-btn.open .ignore-caret { transform: rotate(90deg); }
+        .frame {
+          padding: 10px 12px;
+          border-radius: 6px;
+          margin-bottom: 4px;
+          font-size: 13px;
+          cursor: default;
         }
-        .footer-links a {
-          color: #60A5FA;
-          text-decoration: none;
+        .frame:hover { background: rgba(255,255,255,0.03); }
+        .frame-call {
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
           font-weight: 600;
-          transition: all 0.2s;
-          font-size: 14px;
-        }
-        .footer-links a:hover {
-          color: #22D3EE;
-          transform: translateY(-1px);
+          color: #e2e8f0;
+          margin-bottom: 3px;
         }
-        .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;
-          text-align: center;
-          font-size: 15px;
-        }
-        @keyframes slideIn {
-          from {
-            opacity: 0;
-            transform: translateY(10px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
+        .frame-loc {
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+          font-size: 12px;
+          color: #555;
         }
+        .frame.ignored .frame-call { color: #444; }
+        .ignored-section { margin-top: 8px; display: none; }
+        .ignored-section.open { display: block; }
     </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">
+      <!-- Header bar -->
+      <div class="header">
+        <div class="header-left">
+          <button class="nav-btn" disabled>\u2039</button>
+          <span class="counter-badge">1 / 1</span>
+          <button class="nav-btn" disabled>\u203A</button>
+          <span style="margin-left: 4px;">Unhandled Runtime Error</span>
+        </div>
+        <div class="framework-tag">Velix v${VERSION} \xB7 esbuild</div>
+      </div>
+      <!-- Scrollable content -->
+      <div class="content">
+        <!-- Error summary -->
+        <div class="error-summary">
+          <div class="error-label">
+            <svg viewBox="0 0 16 16"><path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm-.75 3.5a.75.75 0 0 1 1.5 0v4a.75.75 0 0 1-1.5 0v-4zm.75 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5z"/></svg>
+            Runtime Error
+          </div>
+          <div class="error-message">${escapeHtml2(message)}</div>
+          ${pathname ? `<div class="error-location">in <strong>${escapeHtml2(pathname)}</strong></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>
+        ${sourceSnippet ? `
+        <!-- Source code snippet -->
+        <div class="source-block">
+          <div class="source-topbar">
+            <svg width="12" height="12" fill="none" viewBox="0 0 24 24"><path stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/><polyline stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="14 2 14 8 20 8"/></svg>
+            <span class="filepath">${escapeHtml2(shortFile)}${errorLine ? `:${errorLine}` : ""}</span>
+          </div>
+          <div class="source-code">${sourceSnippet}</div>
         </div>
-        ${isDev && callStackCards ? `
-        <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>
-                    Call Stack
-                </div>
-                <div class="frame-counter">${frameCount}</div>
-            </div>
-            <div id="error-cards">
-                ${callStackCards}
-            </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>
-                <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>
-            </div>
+        ` : ""}
+        <!-- Call stack -->
+        <div class="callstack">
+          <div class="callstack-header">
+            <div class="callstack-title">Call Stack</div>
+            ${ignoredFrames.length > 0 ? `
+            <button class="ignore-btn" id="ignoreBtn" onclick="toggleIgnored()">
+              <svg class="ignore-caret" width="12" height="12" viewBox="0 0 12 12" fill="none">
+                <path d="M4.5 3L7.5 6L4.5 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              ${ignoredFrames.length} ignored frames
+            </button>
             ` : ""}
-        </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>
+          <!-- User frames -->
+          ${userFrames.map((f) => `
+          <div class="frame">
+            <div class="frame-call">${escapeHtml2(f.call)}</div>
+            <div class="frame-loc">${escapeHtml2(f.file.replace(/\\/g, "/").replace(/.*\/(?=app\/|server\/|src\/|pages\/)/, ""))}${f.line ? `:${f.line}` : ""}</div>
+          </div>
+          `).join("")}
+          <!-- Ignored frames -->
+          ${ignoredFrames.length > 0 ? `
+          <div class="ignored-section" id="ignoredSection">
+            ${ignoredFrames.map((f) => `
+            <div class="frame ignored">
+              <div class="frame-call">${escapeHtml2(f.call)}</div>
+              <div class="frame-loc">${escapeHtml2(f.file)}${f.line ? `:${f.line}` : ""}</div>
             </div>
+            `).join("")}
+          </div>
+          ` : ""}
         </div>
-    </div>
-    ${isDev && frameCount > 0 ? `
+      </div><!-- /content -->
+    </div><!-- /overlay -->
     <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);
-            }
-        }
-        // Show first page on load
-        showPage(1);
-        // Keyboard navigation
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'ArrowLeft') changePage(-1);
-            if (e.key === 'ArrowRight') changePage(1);
-        });
+      function toggleIgnored() {
+        const btn = document.getElementById('ignoreBtn');
+        const sec = document.getElementById('ignoredSection');
+        if (!btn || !sec) return;
+        const open = sec.classList.toggle('open');
+        btn.classList.toggle('open', open);
+      }
     </script>
-    ` : ""}
 </body>
 </html>`;
 }