@teamvelix/velix 5.0.9 → 5.1.0

package/dist/{chunk-XZYJGF3O.js → chunk-QOGL32T2.js}

@@ -1,5 +1,5 @@
 import { getRegisteredIslands, generateAdvancedHydrationScript } from './chunk-OIZNYND3.js';
-import { logger_default, buildRouteTree, matchRoute } from './chunk-SPIGTNT7.js';
+import { logger_default, buildRouteTree, matchRoute, VERSION } from './chunk-4FVTRM76.js';
 import { loadConfig, resolvePaths } from './chunk-F24Q2MX3.js';
 import http from 'http';
 import fs4 from 'fs';
@@ -306,7 +306,6 @@ function definePlugin(definition) {
 function detectTailwindCli() {
   const v4 = spawnSync("npx", ["@tailwindcss/cli", "--help"], {
     stdio: "pipe",
-    shell: process.platform === "win32",
     timeout: 15e3
   });
   if (v4.status === 0) return "@tailwindcss/cli";
@@ -340,8 +339,7 @@ function tailwindPlugin(options = {}) {
           if (options.minify !== false) args.push("--minify");
           spawnSync("npx", args, {
             stdio: "inherit",
-            cwd: process.cwd(),
-            shell: process.platform === "win32"
+            cwd: process.cwd()
           });
           logger_default.success("Tailwind CSS built successfully");
         } catch (err) {
@@ -363,8 +361,7 @@ function tailwindPlugin(options = {}) {
           const cli2 = getCli();
           const buildResult = spawnSync("npx", [cli2, "-i", input, "-o", output], {
             cwd: process.cwd(),
-            stdio: "pipe",
-            shell: process.platform === "win32"
+            stdio: "pipe"
           });
           if (buildResult.error) {
             logger_default.error("Tailwind CSS not installed. Run: npm install -D tailwindcss @tailwindcss/postcss");
@@ -384,8 +381,7 @@ function tailwindPlugin(options = {}) {
         const cli = getCli();
         const watcher = spawn("npx", [cli, "-i", input, "-o", output, "--watch"], {
           stdio: "pipe",
-          cwd: process.cwd(),
-          shell: process.platform === "win32"
+          cwd: process.cwd()
         });
         watcher.stdout.on("data", (data) => {
           const msg = data.toString().trim();
@@ -968,163 +964,332 @@ function bindArgs(action, ...boundArgs) {
 }
 
 // server/devtools.ts
-function generateDevToolsHtml(isDev) {
+var ICON_ROUTE = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>`;
+var ICON_PERF = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>`;
+var ICON_INFO = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`;
+var ICON_FILE = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>`;
+var ICON_GEAR = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>`;
+var ICON_MON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>`;
+var ICON_TS = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>`;
+var ICON_CLOCK = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>`;
+var ICON_TRI = `<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 19h20L12 2z"/></svg>`;
+var ICON_TERM = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>`;
+function generateDevToolsHtml(isDev, ctx = {}) {
   if (!isDev) return "";
-  return `<style>
-@keyframes velix-pulse {
-  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.7); }
-  70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); }
-  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
-}
+  const version = ctx.version ?? "5.1.0";
+  const port = ctx.port ?? 3e3;
+  const host = ctx.host ?? "localhost";
+  const nodeVersion = ctx.nodeVersion ?? process.version.replace("v", "");
+  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;}
+/* header */
+.__vdt-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #1f2937;}
+.__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-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-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;}
+/* 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-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-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-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 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-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-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;}
+/* 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-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;}
+/* footer */
+.__vdt-footer{padding:10px 16px;border-top:1px solid #1f2937;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;}
 
-@keyframes velix-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
+/* \u2500\u2500 Widget state colors \u2500\u2500 */
+.vdt-idle{border-color:#22D3EE !important;}
+.vdt-compiling{border-color:#4ade80 !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.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;}
+</style>
 
-.velix-idle { background: #0f172a !important; border: 2px solid #22D3EE !important; }
-.velix-rendering { background: #ea580c !important; border: 2px solid #fb923c !important; animation: velix-pulse 1.5s infinite !important; }
-.velix-compiling { background: #16a34a !important; border: 2px solid #4ade80 !important; animation: velix-spin 2s linear infinite !important; }
-.velix-navigating { background: #2563eb !important; border: 2px solid #60a5fa !important; animation: velix-pulse 1s infinite !important; }
-.velix-error { background: #dc2626 !important; border: 2px solid #f87171 !important; animation: velix-pulse 0.8s infinite !important; }
+<!-- \u2500\u2500 Floating button \u2500\u2500 -->
+<button id="__vdt-btn" class="vdt-idle" onclick="__vdtOpen()" title="Velix DevTools (${version})">
+  ${ICON_TRI}
+  <div id="__vdt-dot" class="idle"></div>
+</button>
 
-.velix-status-badge {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  border: 2px solid #0f172a;
-}
+<!-- \u2500\u2500 Panel \u2500\u2500 -->
+<div id="__vdt">
+  <!-- Header -->
+  <div class="__vdt-header">
+    <div class="__vdt-brand">
+      ${ICON_TRI}
+      Velix
+      <span class="__vdt-badge">${version}</span>
+    </div>
+    <button class="__vdt-close" onclick="__vdtClose()" title="Close">&times;</button>
+  </div>
 
-.velix-status-idle { background: #22D3EE; }
-.velix-status-rendering { background: #fb923c; }
-.velix-status-compiling { background: #4ade80; }
-.velix-status-navigating { background: #60a5fa; }
-.velix-status-error { background: #f87171; }
-</style>
+  <!-- Tabs -->
+  <div class="__vdt-tabs">
+    <button class="__vdt-tab active" id="__vtab-btn-route" onclick="__vdtTab('route')">${ICON_ROUTE} Route</button>
+    <button class="__vdt-tab" id="__vtab-btn-perf"  onclick="__vdtTab('perf')">${ICON_PERF} Performance</button>
+    <button class="__vdt-tab" id="__vtab-btn-info"  onclick="__vdtTab('info')">${ICON_INFO} Info</button>
+  </div>
+
+  <!-- Tab: Route -->
+  <div class="__vdt-body" id="__vtab-route">
+    <div class="__vdt-section">
+      <div class="__vdt-label">Current Route</div>
+      <div class="__vdt-box" id="__vdt-route-path">/</div>
+    </div>
+    <div class="__vdt-section">
+      <div class="__vdt-label">Route Segments</div>
+      <div class="__vdt-row">
+        <div class="__vdt-row-left">${ICON_FILE} <span>app</span></div>
+        <span class="__vdt-pill __vdt-pill-blue">layout</span>
+      </div>
+      <div class="__vdt-row" id="__vdt-page-row">
+        <div class="__vdt-row-left">${ICON_FILE} <span id="__vdt-page-name">page.tsx</span></div>
+        <span class="__vdt-pill __vdt-pill-green">page</span>
+      </div>
+    </div>
+    <div class="__vdt-render" id="__vdt-rendering">
+      ${ICON_TERM} Rendering: <strong id="__vdt-render-type" style="color:#d1d5db;margin-left:4px;">SSR</strong>
+    </div>
+  </div>
+
+  <!-- Tab: Performance -->
+  <div class="__vdt-body" id="__vtab-perf" style="display:none;">
+    <div class="__vdt-section">
+      <div class="__vdt-label">Vitals</div>
+      <div class="__vdt-vital">
+        <div class="__vdt-vital-left"><div class="__vdt-dot-good"></div><span class="__vdt-vital-name">FCP</span></div>
+        <span class="__vdt-vital-val" id="__vdt-fcp">\u2014</span>
+      </div>
+      <div class="__vdt-vital">
+        <div class="__vdt-vital-left"><div class="__vdt-dot-good"></div><span class="__vdt-vital-name">LCP</span></div>
+        <span class="__vdt-vital-val" id="__vdt-lcp">\u2014</span>
+      </div>
+      <div class="__vdt-vital">
+        <div class="__vdt-vital-left"><div class="__vdt-dot-good"></div><span class="__vdt-vital-name">CLS</span></div>
+        <span class="__vdt-vital-val" id="__vdt-cls">\u2014</span>
+      </div>
+      <div class="__vdt-vital">
+        <div class="__vdt-vital-left"><div class="__vdt-dot-good"></div><span class="__vdt-vital-name">TTFB</span></div>
+        <span class="__vdt-vital-val" id="__vdt-ttfb">\u2014</span>
+      </div>
+    </div>
+    <div class="__vdt-build">
+      <div style="display:flex;align-items:center;gap:6px;">${ICON_CLOCK} Build time:</div>
+      <span id="__vdt-build-time" style="color:#d1d5db;font-family:ui-monospace,monospace;font-size:12px;">\u2014</span>
+    </div>
+  </div>
+
+  <!-- Tab: Info -->
+  <div class="__vdt-body" id="__vtab-info" style="display:none;">
+    <div class="__vdt-info-row">
+      <div class="__vdt-info-left">${ICON_TRI} <span>Velix</span></div>
+      <span class="__vdt-info-val">${version}</span>
+    </div>
+    <div class="__vdt-info-row">
+      <div class="__vdt-info-left">${ICON_GEAR} <span>React</span></div>
+      <span class="__vdt-info-val" id="__vdt-react-ver">\u2014</span>
+    </div>
+    <div class="__vdt-info-row">
+      <div class="__vdt-info-left">${ICON_MON} <span>Node.js</span></div>
+      <span class="__vdt-info-val">${nodeVersion}</span>
+    </div>
+    <div class="__vdt-info-row">
+      <div class="__vdt-info-left">${ICON_TS} <span>TypeScript</span></div>
+      <span class="__vdt-info-val" id="__vdt-ts-ver">\u2014</span>
+    </div>
+    <div class="__vdt-dev-badge">
+      ${ICON_TERM} Development mode active
+    </div>
+  </div>
+
+  <!-- Footer -->
+  <div class="__vdt-footer">
+    <span class="__vdt-host">${host}:${port}</span>
+    <div class="__vdt-conn">
+      <div class="__vdt-conn-dot" id="__vdt-conn-dot"></div>
+      <span id="__vdt-conn-text">connected</span>
+    </div>
+  </div>
+</div>
 
 <script>
-  // DevTools State Management
-  window.__VELIX_DEV_TOOLS__ = {
-    status: 'idle',
-    setStatus: function(newStatus) {
-      this.status = newStatus;
-      const widget = document.getElementById('__velix-dev-tools');
-      const badge = document.getElementById('__velix-status-badge');
-      const statusText = document.getElementById('__velix-status-text');
-      
-      if (widget) {
-        widget.className = 'velix-' + newStatus;
-      }
-      
-      if (badge) {
-        badge.className = 'velix-status-badge velix-status-' + newStatus;
-      }
-      
-      if (statusText) {
-        const statusLabels = {
-          idle: 'Ready',
-          rendering: 'Rendering',
-          compiling: 'Compiling',
-          navigating: 'Navigating',
-          error: 'Error'
-        };
-        statusText.textContent = statusLabels[newStatus] || 'Unknown';
-        statusText.style.color = {
-          idle: '#22D3EE',
-          rendering: '#fb923c',
-          compiling: '#4ade80',
-          navigating: '#60a5fa',
-          error: '#f87171'
-        }[newStatus] || '#94a3b8';
-      }
-    }
+(function(){
+  /* \u2500\u2500 Tab switching \u2500\u2500 */
+  window.__vdtTab = function(name){
+    ['route','perf','info'].forEach(function(t){
+      var body = document.getElementById('__vtab-' + t);
+      var btn  = document.getElementById('__vtab-btn-' + t);
+      if(!body || !btn) return;
+      var active = t === name;
+      body.style.display = active ? '' : 'none';
+      btn.classList.toggle('active', active);
+    });
   };
 
-  // HMR Connection
-  const es = new EventSource('/__velix/hmr');
-  es.onmessage = (e) => {
-    const data = e.data;
-    
-    if (data === 'reload') {
-      window.__VELIX_DEV_TOOLS__.setStatus('idle');
-      setTimeout(() => location.reload(), 100);
-    }
-    
-    if (data === 'building') {
-      window.__VELIX_DEV_TOOLS__.setStatus('compiling');
+  window.__vdtOpen  = function(){ document.getElementById('__vdt').style.display = ''; };
+  window.__vdtClose = function(){ document.getElementById('__vdt').style.display = 'none'; };
+
+  /* \u2500\u2500 Route info \u2500\u2500 */
+  function updateRoute(){
+    var p = window.location.pathname;
+    var el = document.getElementById('__vdt-route-path');
+    if(el) el.textContent = p;
+    var seg = p.split('/').filter(Boolean);
+    var pageName = seg.length ? seg[seg.length-1] + '.tsx' : 'page.tsx';
+    var pn = document.getElementById('__vdt-page-name');
+    if(pn) pn.textContent = pageName;
+    /* Detect rendering mode from meta generator or search param */
+    var rt = document.getElementById('__vdt-render-type');
+    if(rt){
+      var sp = new URLSearchParams(window.location.search);
+      rt.textContent = sp.get('_render') || (document.querySelector('meta[name="generator"]') ? 'SSR' : 'Static');
     }
-    
-    if (data === 'built') {
-      window.__VELIX_DEV_TOOLS__.setStatus('idle');
+  }
+  updateRoute();
+  window.addEventListener('popstate', updateRoute);
+
+  /* \u2500\u2500 Web Vitals \u2500\u2500 */
+  function fmtMs(v){ return v < 1000 ? Math.round(v) + 'ms' : (v/1000).toFixed(2) + 's'; }
+  function setVital(id, v, threshGood, threshOk){
+    var el = document.getElementById(id);
+    if(!el) return;
+    el.textContent = typeof v === 'number' ? (id === '__vdt-cls' ? v.toFixed(3) : fmtMs(v)) : v;
+    var dot = el.closest('.__vdt-vital')?.querySelector('[class^="__vdt-dot"]');
+    if(dot && typeof v === 'number'){
+      dot.className = v <= threshGood ? '__vdt-dot-good' : v <= threshOk ? '__vdt-dot-warn' : '__vdt-dot-bad';
     }
-    
-    if (data.startsWith('rendering:')) {
-      window.__VELIX_DEV_TOOLS__.setStatus('rendering');
-      setTimeout(() => window.__VELIX_DEV_TOOLS__.setStatus('idle'), 1000);
+    if(el && typeof v === 'number'){
+      el.style.color = v <= threshGood ? '#10b981' : v <= threshOk ? '#f59e0b' : '#ef4444';
     }
-    
-    if (data.startsWith('error:')) {
-      window.__VELIX_DEV_TOOLS__.setStatus('error');
+  }
+
+  try {
+    /* FCP */
+    new PerformanceObserver(function(l){
+      var e = l.getEntries()[0]; if(e) setVital('__vdt-fcp', e.startTime, 1800, 3000);
+    }).observe({ type:'paint', buffered:true });
+
+    /* LCP */
+    new PerformanceObserver(function(l){
+      var entries = l.getEntries();
+      var e = entries[entries.length-1]; if(e) setVital('__vdt-lcp', e.startTime, 2500, 4000);
+    }).observe({ type:'largest-contentful-paint', buffered:true });
+
+    /* CLS */
+    var _cls = 0;
+    new PerformanceObserver(function(l){
+      l.getEntries().forEach(function(e){ if(!e.hadRecentInput) _cls += e.value; });
+      setVital('__vdt-cls', _cls, 0.1, 0.25);
+    }).observe({ type:'layout-shift', buffered:true });
+
+    /* TTFB */
+    new PerformanceObserver(function(l){
+      var e = l.getEntries()[0]; if(e) setVital('__vdt-ttfb', e.responseStart - e.requestStart, 800, 1800);
+    }).observe({ type:'navigation', buffered:true });
+  } catch(e){}
+
+  /* Build time from server-injected global */
+  var bt = window.__VELIX_BUILD_TIME__;
+  var btel = document.getElementById('__vdt-build-time');
+  if(btel) btel.textContent = bt ? bt + 'ms' : '\u2014';
+
+  /* React version from window.React */
+  var rv = document.getElementById('__vdt-react-ver');
+  if(rv && window.React) rv.textContent = window.React.version;
+
+  /* TypeScript version (injected by server if available) */
+  var tsv = document.getElementById('__vdt-ts-ver');
+  if(tsv) tsv.textContent = window.__VELIX_TS_VERSION__ || '\u2014';
+
+  /* \u2500\u2500 HMR + Status \u2500\u2500 */
+  var btn = document.getElementById('__vdt-btn');
+  var dot = document.getElementById('__vdt-dot');
+  var connDot  = document.getElementById('__vdt-conn-dot');
+  var connText = document.getElementById('__vdt-conn-text');
+
+  function setStatus(s){
+    if(btn){ btn.className = 'vdt-' + s; }
+    if(dot){ dot.className = s; }
+  }
+
+  function setConn(ok){
+    if(connDot)  connDot.style.background  = ok ? '#10b981' : '#ef4444';
+    if(connText) connText.textContent = ok ? 'connected' : 'disconnected';
+    if(connText) connText.style.color = ok ? '#10b981' : '#ef4444';
+  }
+
+  var es = new EventSource('/__velix/hmr');
+
+  es.onopen = function(){ setConn(true); };
+
+  es.onmessage = function(e){
+    var data = e.data;
+    if(data === 'reload'){
+      setStatus('navigating');
+      setTimeout(function(){ location.reload(); }, 120);
+    } else if(data === 'building'){
+      setStatus('compiling');
+    } else if(data === 'built'){
+      setStatus('idle');
+    } else if(data.startsWith('rendering:')){
+      setStatus('rendering');
+      setTimeout(function(){ setStatus('idle'); }, 900);
+    } else if(data.startsWith('error:')){
+      setStatus('error');
     }
   };
 
-  es.onerror = () => {
-    // EventSource auto-reconnects \u2014 only show error if connection is fully closed
-    if (es.readyState === 2) {
-      window.__VELIX_DEV_TOOLS__.setStatus('error');
+  es.onerror = function(){
+    if(es.readyState === 2){
+      setStatus('error');
+      setConn(false);
     }
   };
-</script>
-
-<div id="__velix-dev-tools" class="velix-idle" style="position:fixed;bottom:16px;left:16px;z-index:9999;border-radius:50%;padding:4px;box-shadow:0 4px 12px rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;width:40px;height:40px;cursor:pointer;transition:all 0.3s ease;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'" onclick="document.getElementById('__velix-dev-panel').style.display='block'" title="Velix DevTools">
-  <img src="/__velix/logo.webp" alt="Velix DevTools" style="width:22px;height:22px;" />
-  <div id="__velix-status-badge" class="velix-status-badge velix-status-idle"></div>
-</div>
 
-<div id="__velix-dev-panel" style="display:none;position:fixed;bottom:70px;left:16px;width:320px;background:#0f172a;color:white;border-radius:16px;padding:20px;font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;box-shadow:0 20px 50px rgba(0,0,0,0.4);z-index:10000;border:1px solid #1e293b;">
-  <div style="display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #334155;padding-bottom:16px;margin-bottom:16px;">
-    <h3 style="margin:0;font-size:16px;font-weight:700;display:flex;align-items:center;gap:10px;">
-      <img src="/__velix/logo.webp" style="width:18px;height:18px;" /> 
-      Velix DevTools
-    </h3>
-    <button onclick="document.getElementById('__velix-dev-panel').style.display='none'" style="background:transparent;border:none;color:#94a3b8;cursor:pointer;font-size:22px;line-height:1;padding:0;margin:0;transition:color 0.2s;" onmouseover="this.style.color='white'" onmouseout="this.style.color='#94a3b8'">&times;</button>
-  </div>
-  
-  <div style="margin-bottom:16px;padding:12px;background:#1e293b;border-radius:8px;border:1px solid #334155;">
-    <div style="font-size:12px;color:#94a3b8;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.5px;">Status</div>
-    <div id="__velix-status-text" style="font-size:16px;font-weight:600;color:#22D3EE;">Ready</div>
-  </div>
-  
-  <div style="font-size:13px;color:#cbd5e1;line-height:2;">
-    <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #1e293b;">
-      <span style="color:#94a3b8;">Framework</span>
-      <strong style="color:white;font-weight:600;">v5.0.4</strong>
-    </div>
-    <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #1e293b;">
-      <span style="color:#94a3b8;">Environment</span>
-      <strong style="color:#10b981;font-weight:600;">Development</strong>
-    </div>
-    <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #1e293b;">
-      <span style="color:#94a3b8;">Router</span>
-      <strong style="color:white;font-weight:600;">App Directory</strong>
-    </div>
-    <div style="display:flex;justify-content:space-between;padding:8px 0;">
-      <span style="color:#94a3b8;">Rendering</span>
-      <strong style="color:#60a5fa;font-weight:600;">Streaming SSR</strong>
-    </div>
-  </div>
-  
-  <div style="margin-top:16px;padding-top:16px;border-top:1px solid #334155;">
-    <div style="font-size:11px;color:#64748b;text-align:center;">
-      <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#22D3EE;margin-right:4px;"></span> Idle
-      <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#fb923c;margin:0 4px 0 12px;"></span> Rendering
-      <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#4ade80;margin:0 4px 0 12px;"></span> Compiling
-    </div>
-  </div>
-</div>`;
+  setStatus('idle');
+})();
+</script>`;
 }
 
 // server/error-pages.ts
@@ -1581,7 +1746,7 @@ function generate500Page(options) {
         <div class="footer">
             <div class="brand">
                 <img src="/__velix/logo.webp" alt="Velix" onerror="this.style.display='none'"/>
-                <span>Velix v5.0.9</span>
+                <span>Velix v${VERSION}</span>
             </div>
             <div class="footer-links">
                 <a href="/">Home</a>
@@ -1942,12 +2107,17 @@ async function handlePageRoute(route, routes, req, res, url, config, isDev, proj
     const baseUrl = config.app.url || `http://${config.server.host}:${config.server.port}`;
     const metaTags = generateMetadataTags({
       ...metadata,
-      generator: `Velix v5.0.9`,
+      generator: `Velix v${VERSION}`,
       viewport: metadata.viewport || "width=device-width, initial-scale=1"
     }, baseUrl);
     const islands = getRegisteredIslands();
     const hydrationScript = generateAdvancedHydrationScript(islands);
-    const devToolsHtml = generateDevToolsHtml(isDev);
+    const devToolsHtml = generateDevToolsHtml(isDev, {
+      version: VERSION,
+      port: config.server.port,
+      host: config.server.host,
+      nodeVersion: process.version.replace("v", "")
+    });
     const headInjections = `
     <meta charset="utf-8">
     ${metaTags}
@@ -2147,5 +2317,5 @@ function parseRequestBody(req) {
 var server_default = { createServer, tailwindPlugin };
 
 export { NotFoundError, 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-XZYJGF3O.js.map
-//# sourceMappingURL=chunk-XZYJGF3O.js.map
+//# sourceMappingURL=chunk-QOGL32T2.js.map
+//# sourceMappingURL=chunk-QOGL32T2.js.map