@teamvelix/velix 5.2.9 → 5.3.0

package/dist/runtime/start-dev.js

@@ -707,7 +707,7 @@ init_esm_shims();
 
 // version.ts
 init_esm_shims();
-var VERSION = "5.2.8";
+var VERSION = "5.3.0";
 
 // logger.ts
 var colors = {
@@ -1307,73 +1307,76 @@ function generateDevToolsHtml(isDev, ctx = {}) {
   return `
 <style>
 /* \u2500\u2500 Velix DevTools v5.1 \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 */
-#__vdt-btn{position:fixed;bottom:16px;left:16px;z-index:9999;width:40px;height:40px;border-radius:50%;background:#111827;border:2px solid #22D3EE;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.5);transition:transform .2s,box-shadow .2s;outline:none;}
-#__vdt-btn:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(34,211,238,.25);}
-#__vdt-dot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:#22D3EE;border:2px solid #111827;transition:background .3s;}
-#__vdt{display:none;position:fixed;bottom:68px;left:16px;width:340px;background:#111827;color:#f3f4f6;border-radius:14px;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13px;box-shadow:0 24px 60px rgba(0,0,0,.6);z-index:10000;border:1px solid #1f2937;overflow:hidden;}
+#__vdt-btn{position:fixed;bottom:16px;left:16px;z-index:9999;min-width:40px;height:40px;border-radius:20px;background:#0B1120;border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.5);transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);outline:none;padding:0 12px;gap:8px;color:#fff;overflow:hidden;}
+#__vdt-btn:hover{transform:scale(1.05);background:#0F172A;border-color:rgba(255,255,255,0.2);}
+#__vdt-status-text{font-size:12px;font-weight:600;white-space:nowrap;opacity:0;max-width:0;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);font-family:ui-sans-serif,system-ui,sans-serif;letter-spacing:0.3px;}
+#__vdt-btn.vdt-compiling #__vdt-status-text, #__vdt-btn.vdt-navigating #__vdt-status-text{opacity:1;max-width:120px;}
+
+#__vdt-dot{display:none;}
+#__vdt{display:none;position:fixed;bottom:68px;left:16px;width:340px;background:#0B1120;color:#f3f4f6;border-radius:14px;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13px;box-shadow:0 24px 60px rgba(0,0,0,.6);z-index:10000;border:1px solid #0F172A;overflow:hidden;}
 /* header */
-.__vdt-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #1f2937;}
+.__vdt-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #0F172A;}
 .__vdt-brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:#f9fafb;}
-.__vdt-badge{font-size:11px;font-weight:600;background:#1f2937;color:#9ca3af;border-radius:5px;padding:2px 7px;letter-spacing:.3px;}
+.__vdt-badge{font-size:11px;font-weight:600;background:#0F172A;color:#9ca3af;border-radius:5px;padding:2px 7px;letter-spacing:.3px;}
 .__vdt-close{background:none;border:none;color:#6b7280;cursor:pointer;font-size:20px;line-height:1;padding:0;transition:color .15s;}
 .__vdt-close:hover{color:#f9fafb;}
 /* tabs */
-.__vdt-tabs{display:flex;border-bottom:1px solid #1f2937;}
+.__vdt-tabs{display:flex;border-bottom:1px solid #0F172A;}
 .__vdt-tab{flex:1;padding:10px 0;background:none;border:none;color:#6b7280;font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;font-family:inherit;letter-spacing:.1px;}
 .__vdt-tab:hover{color:#d1d5db;}
-.__vdt-tab.active{color:#10b981;border-bottom-color:#10b981;}
+.__vdt-tab.active{color:#2563EB;border-bottom-color:#2563EB;}
 /* body */
 .__vdt-body{padding:14px 16px;min-height:200px;}
 .__vdt-section{margin-bottom:14px;}
 .__vdt-label{font-size:11px;color:#6b7280;text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;}
-.__vdt-box{background:#1f2937;border-radius:8px;padding:10px 13px;font-size:13px;color:#e5e7eb;font-family:ui-monospace,'Cascadia Code','Fira Code',monospace;border:1px solid #374151;}
-.__vdt-row{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;background:#1f2937;border-radius:8px;margin-bottom:6px;border:1px solid #374151;}
+.__vdt-box{background:#0F172A;border-radius:8px;padding:10px 13px;font-size:13px;color:#e5e7eb;font-family:ui-monospace,'Cascadia Code','Fira Code',monospace;border:1px solid #162032;}
+.__vdt-row{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;background:#0F172A;border-radius:8px;margin-bottom:6px;border:1px solid #162032;}
 .__vdt-row-left{display:flex;align-items:center;gap:8px;color:#d1d5db;}
-.__vdt-row-right{font-family:ui-monospace,'Cascadia Code',monospace;color:#10b981;font-size:12px;font-weight:500;}
+.__vdt-row-right{font-family:ui-monospace,'Cascadia Code',monospace;color:#2563EB;font-size:12px;font-weight:500;}
 .__vdt-pill{font-size:10px;font-weight:600;padding:2px 7px;border-radius:4px;letter-spacing:.2px;}
-.__vdt-pill-green{background:#052e16;color:#4ade80;border:1px solid #166534;}
+.__vdt-pill-green{background:#162032;color:#38BDF8;border:1px solid #2563EB;}
 .__vdt-pill-blue{background:#0c1a3a;color:#60a5fa;border:1px solid #1e3a8a;}
-.__vdt-render{display:flex;align-items:center;gap:6px;padding:8px 13px;background:#1f2937;border-radius:8px;border:1px solid #374151;color:#9ca3af;font-size:12px;}
+.__vdt-render{display:flex;align-items:center;gap:6px;padding:8px 13px;background:#0F172A;border-radius:8px;border:1px solid #162032;color:#9ca3af;font-size:12px;}
 .__vdt-render svg{color:#6b7280;}
 /* vitals */
-.__vdt-vital{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;background:#1f2937;border-radius:8px;margin-bottom:6px;border:1px solid #374151;}
+.__vdt-vital{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;background:#0F172A;border-radius:8px;margin-bottom:6px;border:1px solid #162032;}
 .__vdt-vital-left{display:flex;align-items:center;gap:8px;}
-.__vdt-dot-good{width:8px;height:8px;border-radius:50%;background:#10b981;flex-shrink:0;}
+.__vdt-dot-good{width:8px;height:8px;border-radius:50%;background:#2563EB;flex-shrink:0;}
 .__vdt-dot-warn{width:8px;height:8px;border-radius:50%;background:#f59e0b;flex-shrink:0;}
 .__vdt-dot-bad{width:8px;height:8px;border-radius:50%;background:#ef4444;flex-shrink:0;}
 .__vdt-vital-name{color:#d1d5db;font-weight:500;}
-.__vdt-vital-val{font-family:ui-monospace,'Cascadia Code',monospace;color:#10b981;font-size:12px;font-weight:600;}
-.__vdt-build{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;color:#9ca3af;font-size:12px;border-top:1px solid #374151;margin-top:8px;padding-top:12px;}
+.__vdt-vital-val{font-family:ui-monospace,'Cascadia Code',monospace;color:#2563EB;font-size:12px;font-weight:600;}
+.__vdt-build{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;color:#9ca3af;font-size:12px;border-top:1px solid #162032;margin-top:8px;padding-top:12px;}
 /* info rows */
-.__vdt-info-row{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;background:#1f2937;border-radius:8px;margin-bottom:6px;border:1px solid #374151;}
+.__vdt-info-row{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;background:#0F172A;border-radius:8px;margin-bottom:6px;border:1px solid #162032;}
 .__vdt-info-left{display:flex;align-items:center;gap:8px;color:#d1d5db;}
 .__vdt-info-val{font-family:ui-monospace,'Cascadia Code',monospace;color:#9ca3af;font-size:12px;}
-.__vdt-dev-badge{display:flex;align-items:center;gap:8px;padding:10px 13px;background:#052e16;border:1px solid #166534;border-radius:8px;color:#4ade80;font-size:12px;font-weight:500;margin-top:10px;}
+.__vdt-dev-badge{display:flex;align-items:center;gap:8px;padding:10px 13px;background:#162032;border:1px solid #2563EB;border-radius:8px;color:#38BDF8;font-size:12px;font-weight:500;margin-top:10px;}
 /* footer */
-.__vdt-footer{padding:10px 16px;border-top:1px solid #1f2937;display:flex;align-items:center;justify-content:space-between;}
+.__vdt-footer{padding:10px 16px;border-top:1px solid #0F172A;display:flex;align-items:center;justify-content:space-between;}
 .__vdt-host{color:#6b7280;font-size:11px;font-family:ui-monospace,'Cascadia Code',monospace;}
-.__vdt-conn{display:flex;align-items:center;gap:5px;font-size:11px;color:#10b981;}
-.__vdt-conn-dot{width:6px;height:6px;border-radius:50%;background:#10b981;}
+.__vdt-conn{display:flex;align-items:center;gap:5px;font-size:11px;color:#2563EB;}
+.__vdt-conn-dot{width:6px;height:6px;border-radius:50%;background:#2563EB;}
 
 /* \u2500\u2500 Widget state colors \u2500\u2500 */
 .vdt-idle{border-color:#22D3EE !important;}
-.vdt-compiling{border-color:#4ade80 !important;}
+.vdt-compiling{border-color:#38BDF8 !important;}
 .vdt-rendering{border-color:#fb923c !important;}
 .vdt-navigating{border-color:#60a5fa !important;}
 .vdt-error{border-color:#f87171 !important;}
 #__vdt-dot.idle{background:#22D3EE;}
-#__vdt-dot.compiling{background:#4ade80;}
+#__vdt-dot.compiling{background:#38BDF8;}
 #__vdt-dot.rendering{background:#fb923c;}
 #__vdt-dot.navigating{background:#60a5fa;}
 #__vdt-dot.error{background:#f87171;}
 @keyframes __vdt-pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
-.vdt-compiling #__vdt-dot,.vdt-rendering #__vdt-dot,.vdt-navigating #__vdt-dot{animation:__vdt-pulse .9s ease-in-out infinite;}
+.vdt-compiling svg, .vdt-navigating svg{animation:__vdt-pulse .8s alternate infinite;}
 </style>
 
 <!-- \u2500\u2500 Floating button \u2500\u2500 -->
 <button id="__vdt-btn" class="vdt-idle" onclick="__vdtOpen()" title="Velix DevTools (${version})">
   ${ICON_LOGO}
-  <div id="__vdt-dot" class="idle"></div>
+  <span id="__vdt-status-text"></span>
 </button>
 
 <!-- \u2500\u2500 Panel \u2500\u2500 -->
@@ -1524,7 +1527,7 @@ function generateDevToolsHtml(isDev, ctx = {}) {
       dot.className = v <= threshGood ? '__vdt-dot-good' : v <= threshOk ? '__vdt-dot-warn' : '__vdt-dot-bad';
     }
     if(el && typeof v === 'number'){
-      el.style.color = v <= threshGood ? '#10b981' : v <= threshOk ? '#f59e0b' : '#ef4444';
+      el.style.color = v <= threshGood ? '#2563EB' : v <= threshOk ? '#f59e0b' : '#ef4444';
     }
   }
 
@@ -1574,13 +1577,18 @@ function generateDevToolsHtml(isDev, ctx = {}) {
 
   function setStatus(s){
     if(btn){ btn.className = 'vdt-' + s; }
-    if(dot){ dot.className = s; }
+    var text = document.getElementById('__vdt-status-text');
+    if(text) {
+      if(s === 'compiling') text.textContent = 'Compiling...';
+      else if(s === 'navigating') text.textContent = 'Loading...';
+      else text.textContent = '';
+    }
   }
 
   function setConn(ok){
-    if(connDot)  connDot.style.background  = ok ? '#10b981' : '#ef4444';
+    if(connDot)  connDot.style.background  = ok ? '#2563EB' : '#ef4444';
     if(connText) connText.textContent = ok ? 'connected' : 'disconnected';
-    if(connText) connText.style.color = ok ? '#10b981' : '#ef4444';
+    if(connText) connText.style.color = ok ? '#2563EB' : '#ef4444';
   }
 
   var ws = new WebSocket('ws://' + window.location.host + '/__velix_hmr');
@@ -1635,88 +1643,203 @@ function generate404Page(pathname = "/") {
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>404 - Page Not Found | Velix v${VERSION}</title>
+    <title>404 \u2014 Page Not Found | Velix v${VERSION}</title>
     <link rel="icon" href="/favicon.webp">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
     <style>
         *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
+        @keyframes fadeUp {
+          from { opacity: 0; transform: translateY(16px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes pulse {
+          0%, 100% { opacity: 1; }
+          50%       { opacity: 0.4; }
+        }
+
         body {
-          background: #0a0a0a;
-          color: #ededed;
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+          background-color: #0B1120;
+          background-image:
+            linear-gradient(to right,  rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+            linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+          background-size: 60px 60px;
+          color: #F8FAFC;
+          font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
           display: flex;
+          flex-direction: column;
           align-items: center;
           justify-content: center;
           min-height: 100vh;
+          padding: 2rem;
           -webkit-font-smoothing: antialiased;
         }
-        .container {
+
+        /* radial vignette over the grid */
+        body::before {
+          content: '';
+          position: fixed;
+          inset: 0;
+          background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, #0B1120 80%);
+          pointer-events: none;
+          z-index: 0;
+        }
+
+        .card {
+          position: relative;
+          z-index: 1;
           display: flex;
+          flex-direction: column;
           align-items: center;
-          gap: 32px;
-          padding: 32px;
+          text-align: center;
+          max-width: 480px;
+          animation: fadeUp 0.25s ease forwards;
         }
-        .code {
-          font-size: 48px;
-          font-weight: 700;
+
+        /* \u2500\u2500 glowing 404 number \u2500\u2500 */
+        .status-number {
+          font-family: 'DM Mono', monospace;
+          font-size: clamp(80px, 18vw, 140px);
+          font-weight: 500;
           line-height: 1;
-          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;
+          letter-spacing: -0.04em;
+          color: #F8FAFC;
+          position: relative;
           margin-bottom: 8px;
         }
-        .body p {
-          font-size: 14px;
-          color: #888;
-          margin-bottom: 20px;
+        .status-number::after {
+          content: attr(data-value);
+          position: absolute;
+          inset: 0;
+          color: #2563EB;
+          opacity: 0.12;
+          filter: blur(24px);
+          pointer-events: none;
+        }
+
+        /* \u2500\u2500 accent line \u2500\u2500 */
+        .accent-line {
+          width: 40px;
+          height: 3px;
+          background: #2563EB;
+          border-radius: 9999px;
+          margin-bottom: 24px;
         }
-        .body p code {
-          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+        /* \u2500\u2500 heading \u2500\u2500 */
+        h1 {
+          font-size: 22px;
+          font-weight: 700;
+          color: #fff;
+          margin-bottom: 10px;
+          letter-spacing: -0.01em;
+        }
+
+        /* \u2500\u2500 route badge \u2500\u2500 */
+        .route-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 8px;
+          font-family: 'DM Mono', monospace;
           font-size: 13px;
-          background: rgba(255,255,255,0.07);
-          padding: 2px 6px;
-          border-radius: 4px;
-          color: #ccc;
+          color: #94A3B8;
+          background: #0F172A;
+          border: 1px solid #1E293B;
+          padding: 5px 14px;
+          border-radius: 9999px;
+          margin-bottom: 32px;
+        }
+        .route-badge .dot {
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          background: #ff6b6b;
+          animation: pulse 1.8s ease-in-out infinite;
+          flex-shrink: 0;
+        }
+
+        /* \u2500\u2500 actions \u2500\u2500 */
+        .actions {
+          display: flex;
+          gap: 12px;
         }
-        .actions { display: flex; gap: 10px; }
         .btn {
-          display: inline-block;
-          padding: 8px 18px;
-          border-radius: 8px;
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          padding: 10px 22px;
+          border-radius: 10px;
           font-size: 14px;
-          font-weight: 500;
+          font-weight: 600;
           text-decoration: none;
-          transition: all .15s;
-          border: 1px solid transparent;
+          transition: all 0.15s ease;
         }
         .btn-primary {
-          background: #fff;
-          color: #000;
+          background: #2563EB;
+          color: #0B1120;
+          border: 1px solid #2563EB;
+        }
+        .btn-primary:hover {
+          background: #3B82F6;
+          transform: translateY(-1px);
+          box-shadow: 0 0 20px rgba(37, 99, 235, 0.35);
         }
-        .btn-primary:hover { background: #e5e5e5; }
         .btn-secondary {
-          background: rgba(255,255,255,0.06);
-          color: #ededed;
-          border-color: rgba(255,255,255,0.1);
+          background: transparent;
+          color: #F8FAFC;
+          border: 1px solid #1E293B;
+        }
+        .btn-secondary:hover {
+          background: #0F172A;
+          border-color: #334155;
+        }
+
+        /* \u2500\u2500 footer branding \u2500\u2500 */
+        .brand {
+          position: fixed;
+          bottom: 28px;
+          left: 50%;
+          transform: translateX(-50%);
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          font-size: 12px;
+          color: #475569;
+          font-family: 'DM Mono', monospace;
+        }
+        .brand-dot {
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          background: #2563EB;
         }
-        .btn-secondary:hover { background: rgba(255,255,255,0.1); }
     </style>
 </head>
 <body>
-    <div class="container">
-        <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 class="card">
+      <div class="status-number" data-value="404">404</div>
+      <div class="accent-line"></div>
+      <h1>Page not found</h1>
+      <div class="route-badge">
+        <span class="dot"></span>
+        <span>${escapeHtml2(pathname)}</span>
+      </div>
+      <div class="actions">
+        <a href="/" class="btn btn-primary">
+          <svg width="14" height="14" fill="none" viewBox="0 0 24 24"><path d="M3 12L12 3l9 9M5 10v9a1 1 0 001 1h4v-5h4v5h4a1 1 0 001-1v-9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          Home
+        </a>
+        <a href="javascript:history.back()" class="btn btn-secondary">
+          <svg width="14" height="14" fill="none" viewBox="0 0 24 24"><path d="M19 12H5M5 12l7-7M5 12l7 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          Go back
+        </a>
+      </div>
+    </div>
+
+    <div class="brand">
+      <span class="brand-dot"></span>
+      Velix v${VERSION}
     </div>
 </body>
 </html>`;
@@ -1747,14 +1870,23 @@ function generate500Page(options) {
             const src = fs8.readFileSync(errorFile, "utf-8").split("\n");
             const start = Math.max(0, errorLine - 4);
             const end = Math.min(src.length, errorLine + 3);
+            const syntaxHighlight = (code) => {
+              let hl = code;
+              hl = hl.replace(/\\b(let|const|function|return|import|export|if|else|for|while|await|async|class|var)\\b/g, '<span style="color:#c084fc">$1</span>');
+              hl = hl.replace(/(&quot;.*?&quot;|&#39;.*?&#39;|`.*?`)/g, '<span style="color:#86efac">$1</span>');
+              hl = hl.replace(/(\\&#x2F;\\&#x2F;.*)$/g, '<span style="color:#94A3B8">$1</span>');
+              hl = hl.replace(/\\b(\\d+)\\b/g, '<span style="color:#f59e0b">$1</span>');
+              return hl;
+            };
             sourceSnippet = src.slice(start, end).map((l, i) => {
               const num = start + i + 1;
               const isErr = num === errorLine;
               const numStr = String(num).padStart(3, " ");
+              const highlightedLine = syntaxHighlight(escapeHtml2(l));
               if (isErr) {
-                return `<div class="src-line src-err"><span class="ln">${numStr}</span>${escapeHtml2(l)}</div>`;
+                return `<div class="src-line src-err"><span class="ln">${numStr}</span><span class="active-arrow">\u25B6</span><span class="code-content">${highlightedLine}</span></div>`;
               }
-              return `<div class="src-line"><span class="ln">${numStr}</span>${escapeHtml2(l)}</div>`;
+              return `<div class="src-line"><span class="ln">${numStr}</span><span class="active-arrow"> </span><span class="code-content">${highlightedLine}</span></div>`;
             }).join("");
           }
         } catch (_) {
@@ -1762,6 +1894,13 @@ function generate500Page(options) {
       }
     }
   }
+  const formatErrorMessage = (msg) => {
+    let formatted = escapeHtml2(msg);
+    const pathSpan = `<span style="color:#2563EB;cursor:pointer;" onclick="console.log('open in editor')">`;
+    formatted = formatted.replace(/([A-Z]:\\[^\s<]+|\/(?:Users|home|var|srv)\/[^\s<]+)/g, pathSpan + "$1</span>");
+    formatted = formatted.replace(/(ERROR:)/g, '<strong style="color:#ff6b6b">$1</strong>');
+    return formatted;
+  };
   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\/)/, "");
@@ -1776,7 +1915,7 @@ function generate500Page(options) {
     <style>
         *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
         body {
-          background: #0a0a0a;
+          background: #0B1120;
           color: #ededed;
           font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
           display: flex; align-items: center; justify-content: center;
@@ -1811,327 +1950,459 @@ function generate500Page(options) {
     <title>Error | Velix v${VERSION}</title>
     <link rel="icon" href="/favicon.webp">
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');
+
         *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 
+        @keyframes fadeIn {
+          from { opacity: 0; transform: translateY(10px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+
         body {
-          background: rgba(0, 0, 0, 0.85);
-          color: #ededed;
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+          background-color: #0B1120;
+          background-image: 
+            linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+            linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+          background-size: 60px 60px;
+          color: #F8FAFC;
+          font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
           min-height: 100vh;
           display: flex;
-          align-items: center;
+          align-items: flex-start;
           justify-content: center;
-          padding: 24px;
+          padding: 2rem;
           -webkit-font-smoothing: antialiased;
         }
 
-        /* \u2500\u2500 Overlay Card \u2500\u2500 */
-        .overlay {
+        /* Radial mask for the grid background */
+        .bg-mask {
+          position: fixed;
+          top: 0; left: 0; right: 0; bottom: 0;
+          background: radial-gradient(circle at center, transparent 0%, #0B1120 80%);
+          z-index: -1;
+          pointer-events: none;
+        }
+
+        /* \u2500\u2500 Main Container \u2500\u2500 */
+        .container {
           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;
+          max-width: 780px;
+          margin-top: 4vh;
+          animation: fadeIn 0.2s ease forwards;
           display: flex;
           flex-direction: column;
-          max-height: calc(100vh - 48px);
+          gap: 24px;
         }
 
         /* \u2500\u2500 Header Bar \u2500\u2500 */
         .header {
+          position: relative;
+          background: transparent;
           display: flex;
           align-items: center;
           justify-content: space-between;
-          padding: 12px 20px;
-          background: #161616;
-          border-bottom: 1px solid #2a2a2a;
-          gap: 12px;
-          flex-shrink: 0;
+          padding-top: 12px;
+        }
+        .header::before {
+          content: '';
+          position: absolute;
+          top: -12px; left: 0; right: 0;
+          height: 4px;
+          background: #ff6b6b;
+          border-radius: 4px;
         }
         .header-left {
           display: flex;
           align-items: center;
-          gap: 8px;
-          font-size: 13px;
-          color: #888;
+          gap: 12px;
         }
-        .counter-badge {
-          background: #1e1e1e;
-          border: 1px solid #333;
-          border-radius: 6px;
-          padding: 2px 8px;
+        .header-icon {
+          width: 20px;
+          height: 20px;
+          fill: #ff6b6b;
+        }
+        .header-title {
+          font-size: 18px;
+          font-weight: 700;
+          color: #fff;
+        }
+        .dev-badge {
+          background: rgba(255, 107, 107, 0.1);
+          border: 1px solid rgba(255, 107, 107, 0.2);
+          color: #ff6b6b;
+          padding: 2px 10px;
+          border-radius: 9999px;
           font-size: 12px;
-          color: #999;
-          font-variant-numeric: tabular-nums;
+          font-weight: 600;
+          letter-spacing: 0.05em;
         }
-        .nav-btn {
-          background: #1e1e1e;
-          border: 1px solid #333;
-          border-radius: 6px;
-          color: #888;
-          cursor: pointer;
-          width: 24px;
-          height: 24px;
+
+        /* \u2500\u2500 Status & Route \u2500\u2500 */
+        .status-bar {
           display: flex;
           align-items: center;
-          justify-content: center;
+          gap: 12px;
+          margin-top: 8px;
+          font-family: 'DM Mono', monospace;
           font-size: 13px;
-          transition: all .15s;
         }
-        .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: 6px;
-          font-size: 12px;
-          color: #666;
+        .status-badge {
+          background: #0F172A;
+          border: 1px solid #1E293B;
+          color: #ff6b6b;
+          padding: 4px 10px;
+          border-radius: 6px;
         }
-        .framework-tag::before {
-          content: '';
-          display: inline-block;
-          width: 6px; height: 6px;
-          border-radius: 50%;
-          background: #3b82f6;
+        .route-badge {
+          background: #0F172A;
+          border: 1px solid #1E293B;
+          color: #2563EB;
+          padding: 4px 10px;
+          border-radius: 6px;
         }
-
-        /* \u2500\u2500 Scrollable Content \u2500\u2500 */
-        .content {
-          overflow-y: auto;
-          flex: 1;
+        .separator { color: #94A3B8; }
+        .timestamp { color: #94A3B8; font-family: system-ui; font-size: 13px; }
+
+        /* \u2500\u2500 Error Message \u2500\u2500 */
+        .error-message-box {
+          background: #0F172A;
+          border: 1px solid #1E293B;
+          border-left: 3px solid #ff6b6b;
+          border-radius: 10px;
+          padding: 1rem 1.25rem;
+          font-family: 'DM Mono', monospace;
+          font-size: 14px;
+          color: #F8FAFC;
+          line-height: 1.6;
+          white-space: pre-wrap;
+          word-break: break-word;
         }
 
-        /* \u2500\u2500 Error Summary \u2500\u2500 */
-        .error-summary {
-          padding: 28px 24px 20px;
-          border-bottom: 1px solid #1e1e1e;
+        /* \u2500\u2500 Source Code Viewer \u2500\u2500 */
+        .source-viewer {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
         }
-        .error-label {
-          display: inline-flex;
+        .source-header {
+          display: flex;
           align-items: center;
-          gap: 6px;
-          font-size: 11px;
-          font-weight: 700;
-          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-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;
+          justify-content: space-between;
         }
-        .error-location {
-          margin-top: 10px;
+        .source-filepath {
+          font-family: 'DM Mono', monospace;
           font-size: 13px;
-          color: #888;
-        }
-        .error-location strong { color: #ccc; }
-
-        /* \u2500\u2500 Source Block \u2500\u2500 */
-        .source-block {
-          border-bottom: 1px solid #1e1e1e;
+          color: #2563EB;
         }
-        .source-topbar {
+        .open-in-editor {
+          color: #94A3B8;
+          cursor: pointer;
+          transition: color 0.15s;
           display: flex;
           align-items: center;
-          padding: 10px 16px;
-          background: #161616;
-          border-bottom: 1px solid #1e1e1e;
-          gap: 8px;
-          font-size: 12px;
-          color: #666;
+          gap: 6px;
+          font-size: 13px;
+          text-decoration: none;
         }
-        .source-topbar .filepath { color: #aaa; font-family: ui-monospace, monospace; }
-        .source-code {
-          background: #0d0d0d;
+        .open-in-editor:hover { color: #F8FAFC; }
+        .open-in-editor svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
+
+        .source-body {
+          background: #020617;
+          border: 1px solid #1E293B;
+          border-radius: 8px;
+          padding: 16px 0;
           overflow-x: auto;
-          padding: 10px 0;
-          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+          font-family: 'DM Mono', monospace;
           font-size: 13px;
-          line-height: 1.7;
+          line-height: 1.6;
         }
         .src-line {
           display: flex;
-          align-items: flex-start;
-          padding: 0 20px;
-          white-space: pre;
-          color: #555;
+          padding: 0 16px;
         }
-        .src-line .ln {
-          color: #3a3a3a;
+        .ln {
+          color: #475569;
+          width: 32px;
           text-align: right;
-          width: 36px;
           margin-right: 16px;
-          flex-shrink: 0;
           user-select: none;
+          flex-shrink: 0;
         }
-        .src-err {
-          background: rgba(239, 68, 68, 0.08);
-          color: #fca5a5;
-          position: relative;
+        .active-arrow {
+          color: transparent;
+          margin-right: 12px;
+          width: 14px;
+          text-align: center;
+          flex-shrink: 0;
         }
-        .src-err .ln { color: #ef4444; }
-        .src-err::before {
-          content: '';
-          position: absolute;
-          left: 0;
-          top: 0; bottom: 0;
-          width: 3px;
-          background: #ef4444;
+        .code-content { white-space: pre; }
+        
+        .src-err {
+          background: rgba(37, 99, 235, 0.04);
         }
+        .src-err .ln { color: #2563EB; }
+        .src-err .active-arrow { color: #2563EB; }
+        .src-err .code-content { color: #F8FAFC; }
 
         /* \u2500\u2500 Call Stack \u2500\u2500 */
-        .callstack {
-          padding: 20px 24px;
+        .callstack-section {
+          margin-top: 16px;
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
         }
         .callstack-header {
           display: flex;
           align-items: center;
           justify-content: space-between;
-          margin-bottom: 14px;
         }
         .callstack-title {
-          font-size: 13px;
+          font-size: 16px;
           font-weight: 600;
-          color: #aaa;
-          text-transform: uppercase;
-          letter-spacing: 0.06em;
+          display: flex;
+          align-items: center;
+          gap: 12px;
         }
-        .ignore-btn {
+        .callstack-count {
+          background: #1E293B;
+          color: #F8FAFC;
+          padding: 2px 10px;
+          border-radius: 9999px;
           font-size: 12px;
-          color: #555;
+          font-weight: 500;
+        }
+        
+        .toggle-node-modules {
+          color: #94A3B8;
+          font-size: 13px;
           background: none;
           border: none;
           cursor: pointer;
+          transition: color 0.15s;
+        }
+        .toggle-node-modules:hover { color: #F8FAFC; }
+
+        .frame {
+          background: #0F172A;
+          border: 1px solid #1E293B;
+          border-radius: 8px;
+          padding: 0.875rem 1rem;
           display: flex;
+          justify-content: space-between;
           align-items: center;
+          transition: background-color 0.15s, transform 0.15s;
+        }
+        .frame:hover { background: #1E293B; }
+        
+        .frame-info {
+          display: flex;
+          flex-direction: column;
           gap: 4px;
-          transition: color .15s;
         }
-        .ignore-btn:hover { color: #aaa; }
-        .ignore-caret { transition: transform .2s; }
-        .ignore-btn.open .ignore-caret { transform: rotate(90deg); }
+        .frame-call {
+          font-family: 'DM Mono', monospace;
+          font-size: 14px;
+          font-weight: 700;
+          color: #2563EB;
+        }
+        .frame-file {
+          font-family: 'DM Mono', monospace;
+          font-size: 13px;
+          color: #94A3B8;
+        }
+        
+        .frame.node-modules .frame-call { color: #94A3B8; font-weight: 400; }
+        .frame.node-modules .frame-file { color: #475569; }
+        
+        .frame-number {
+          background: #1E293B;
+          color: #94A3B8;
+          padding: 2px 8px;
+          border-radius: 6px;
+          font-size: 12px;
+          font-variant-numeric: tabular-nums;
+        }
 
-        .frame {
-          padding: 10px 12px;
+        .pagination {
+          display: flex;
+          justify-content: flex-end;
+          gap: 8px;
+          margin-top: 8px;
+        }
+        .page-btn {
+          background: transparent;
+          border: 1px solid #1E293B;
+          color: #F8FAFC;
+          padding: 6px 14px;
           border-radius: 6px;
-          margin-bottom: 4px;
           font-size: 13px;
-          cursor: default;
+          cursor: pointer;
+          transition: all 0.15s;
         }
-        .frame:hover { background: rgba(255,255,255,0.03); }
-        .frame-call {
-          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+        .page-btn:hover:not(:disabled) { background: #1E293B; }
+        .page-btn:disabled { opacity: 0.3; cursor: default; }
+        
+        .node-modules-list { display: none; flex-direction: column; gap: 12px; margin-top: 12px; }
+        .node-modules-list.visible { display: flex; }
+
+        /* \u2500\u2500 Footer \u2500\u2500 */
+        .footer {
+          margin-top: 32px;
+          padding-top: 24px;
+          border-top: 1px solid #1E293B;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .footer-left {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          font-size: 13px;
           font-weight: 600;
-          color: #e2e8f0;
-          margin-bottom: 3px;
+          color: #F8FAFC;
+        }
+        .velix-dot { width: 8px; height: 8px; border-radius: 50%; background: #2563EB; }
+        .footer-right {
+          display: flex;
+          align-items: center;
+          gap: 16px;
         }
-        .frame-loc {
-          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+        .footer-link {
+          color: #94A3B8;
+          text-decoration: none;
+          font-size: 13px;
+          transition: color 0.15s;
+        }
+        .footer-link:hover { color: #F8FAFC; }
+        .dev-pill {
+          background: #1E293B;
+          color: #F8FAFC;
+          padding: 4px 12px;
+          border-radius: 9999px;
           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="overlay">
-
-      <!-- Header bar -->
+    <div class="bg-mask"></div>
+    <div class="container">
+      
+      <!-- Header -->
       <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>
+          <svg class="header-icon" viewBox="0 0 24 24"><path d="M12 2L1 21h22L12 2zm0 3.83L19.17 19H4.83L12 5.83zM11 10h2v5h-2v-5zm0 6h2v2h-2v-2z"/></svg>
+          <div class="header-title">Unhandled Runtime Error</div>
         </div>
-        <div class="framework-tag">Velix v${VERSION} \xB7 esbuild</div>
+        <div class="dev-badge">DEV</div>
       </div>
 
-      <!-- Scrollable content -->
-      <div class="content">
+      <!-- Status & Route -->
+      <div class="status-bar">
+        <div class="status-badge">${options.statusCode || 500}</div>
+        <div class="separator">\xB7</div>
+        <div class="route-badge">Route: ${pathname || "/"}</div>
+        <div class="separator">\xB7</div>
+        <div class="timestamp">just now</div>
+      </div>
 
-        <!-- 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>
+      <!-- Error Message -->
+      <div class="error-message-box">
+        ${formatErrorMessage(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>
+      ${sourceSnippet ? `
+      <!-- Source Viewer -->
+      <div class="source-viewer">
+        <div class="source-header">
+          <div class="source-filepath">${escapeHtml2(shortFile)}${errorLine ? ` (${errorLine})` : ""} @ runtime</div>
+          <a href="#" class="open-in-editor" onclick="console.log('Open in editor clicked')">
+            Open in editor
+            <svg viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
+          </a>
         </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 class="source-body">
+          ${sourceSnippet}
+        </div>
+      </div>
+      ` : ""}
+
+      <!-- Call Stack -->
+      <div class="callstack-section">
+        <div class="callstack-header">
+          <div class="callstack-title">
+            Call Stack
+            <div class="callstack-count">${frames.length}</div>
           </div>
+          ${ignoredFrames.length > 0 ? `
+          <button class="toggle-node-modules" id="toggleNodeModules" onclick="toggleNodeModules()">
+            Show ${ignoredFrames.length} node_modules frames
+          </button>
+          ` : ""}
+        </div>
 
-          <!-- User frames -->
-          ${userFrames.map((f) => `
-          <div class="frame">
+        ${userFrames.map((f, i) => `
+        <div class="frame">
+          <div class="frame-info">
             <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 class="frame-file">${escapeHtml2(f.file.replace(/\\\\/g, "/"))}${f.line ? `:${f.line}` : ""}</div>
           </div>
-          `).join("")}
+          <div class="frame-number">${i + 1}</div>
+        </div>
+        `).join("")}
 
-          <!-- Ignored frames -->
-          ${ignoredFrames.length > 0 ? `
-          <div class="ignored-section" id="ignoredSection">
-            ${ignoredFrames.map((f) => `
-            <div class="frame ignored">
+        ${ignoredFrames.length > 0 ? `
+        <div class="node-modules-list" id="nodeModulesList">
+          ${ignoredFrames.map((f, i) => `
+          <div class="frame node-modules">
+            <div class="frame-info">
               <div class="frame-call">${escapeHtml2(f.call)}</div>
-              <div class="frame-loc">${escapeHtml2(f.file)}${f.line ? `:${f.line}` : ""}</div>
+              <div class="frame-file">${escapeHtml2(f.file)}${f.line ? `:${f.line}` : ""}</div>
             </div>
-            `).join("")}
+            <div class="frame-number">${userFrames.length + i + 1}</div>
           </div>
-          ` : ""}
+          `).join("")}
+        </div>
+        ` : ""}
+        
+        <div class="pagination">
+          <button class="page-btn" disabled>Previous</button>
+          <button class="page-btn" disabled>Next</button>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="footer">
+        <div class="footer-left">
+          <div class="velix-dot"></div>
+          Velix v${VERSION}
         </div>
+        <div class="footer-right">
+          <a href="/" class="footer-link">Home</a>
+          <a href="#" class="footer-link" onclick="window.location.reload()">Reload</a>
+          <a href="https://velixcloud.io/docs" class="footer-link" target="_blank">Documentation</a>
+          <div class="dev-pill">Development Mode</div>
+        </div>
+      </div>
 
-      </div><!-- /content -->
-    </div><!-- /overlay -->
+    </div>
 
     <script>
-      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);
+      function toggleNodeModules() {
+        const list = document.getElementById('nodeModulesList');
+        const btn = document.getElementById('toggleNodeModules');
+        if (!list || !btn) return;
+        
+        const isVisible = list.classList.contains('visible');
+        if (isVisible) {
+          list.classList.remove('visible');
+          btn.textContent = 'Show ' + list.children.length + ' node_modules frames';
+        } else {
+          list.classList.add('visible');
+          btn.textContent = 'Hide node_modules frames';
+        }
       }
     </script>
 </body>