@nitronjs/framework 0.2.27 → 0.3.0

package/lib/Dev/DevIndicator.js

@@ -0,0 +1,836 @@
+/**
+ * DevIndicator — Enhanced development mode indicator panel.
+ *
+ * Shows NitronJS branding, HMR status, server info, and expandable
+ * debug panels for Route, Timing, Middleware, and Props.
+ *
+ * Only imported via dynamic import() when Environment.isDev is true.
+ * Production never loads this module.
+ */
+
+import { readFileSync } from "fs";
+import { fileURLToPath } from "url";
+import path from "path";
+import Config from "../Core/Config.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const packageJsonPath = path.join(__dirname, "../../package.json");
+const FRAMEWORK_VERSION = JSON.parse(readFileSync(packageJsonPath, "utf-8")).version;
+const ICON_BASE64 = "data:image/png;base64," + readFileSync(path.join(__dirname, "../View/Client/nitronjs-icon.png")).toString("base64");
+
+const ESC = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
+
+class DevIndicator {
+
+    static render(nonceAttr, devData = null) {
+        const nodeVersion = process.version;
+        const port = String(Config.get("server.port", 3000)).replace(/[<>"'&]/g, "");
+
+        const route = devData?.route;
+        const timing = devData ? buildTimingSummary(devData) : null;
+        const mwCount = devData?.middlewareTiming?.length || 0;
+        const propsInfo = devData?.rawProps ? buildPropsSummary(devData) : null;
+
+        const totalMs = timing ? parseFloat(timing.total) : 0;
+        const timingWarnClass = totalMs >= 300 ? " ndi-critical" : totalMs >= 100 ? " ndi-warn" : "";
+
+        const propsTreeData = propsInfo ? buildPropsTreeData(devData) : null;
+        const propsJson = propsTreeData ? safeJsonEmbed(propsTreeData) : "null";
+
+        return `
+<div id="__nitron_dev__" style="position:fixed;bottom:16px;left:16px;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
+  <style${nonceAttr}>
+    #__nitron_dev__ {
+      --bg:#0a0a0a;--surface:rgba(8,8,8,0.96);
+      --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.04);
+      --text:#e0e0e0;--text2:#aaa;--text3:#888;--text4:#666;--text5:#555;--text6:#444;
+      --accent:#3b82f6;--red:#ef4444;--yellow:#fbbf24;--green:#4ade80;
+      --blue:#3b82f6;--orange:#f97316;--purple:#a78bfa;
+      --mono:'SF Mono','Cascadia Code',Consolas,monospace;
+    }
+    #__nitron_dev__ * { box-sizing:border-box; }
+
+    /* ── Button ── */
+    #__nitron_dev_btn__ {
+      position:relative;display:flex;align-items:center;justify-content:center;
+      width:42px;height:42px;padding:0;
+      background:var(--bg);color:#fff;border:1px solid rgba(255,255,255,0.1);border-radius:50%;
+      cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,0.5);
+      transition:all 0.2s ease;touch-action:none;
+    }
+    #__nitron_dev_btn__:hover {
+      transform:scale(1.05);
+      box-shadow:0 0 20px rgba(59,130,246,0.15);
+      border-color:rgba(59,130,246,0.3);
+    }
+    #__nitron_dev_btn__.dragging {
+      cursor:grabbing;
+      box-shadow:0 0 0 2px rgba(59,130,246,0.3),0 12px 40px rgba(0,0,0,0.7);
+      transform:scale(1.1);opacity:0.9;
+    }
+    .ndi-dot {
+      position:absolute;top:0;right:2px;
+      width:10px;height:10px;border-radius:50%;
+      border:2px solid var(--bg);background:var(--green);
+      animation:__nitron_pulse 2s infinite;
+    }
+
+    /* ── Panel ── */
+    #__nitron_dev_panel__ {
+      display:none;position:absolute;width:400px;
+      background:var(--surface);
+      backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
+      border:1px solid var(--border);border-radius:20px;
+      overflow:hidden;
+      box-shadow:
+        0 24px 64px rgba(0,0,0,0.6),
+        0 0 0 1px rgba(59,130,246,0.05),
+        inset 0 1px 0 rgba(255,255,255,0.04),
+        -40px -20px 80px rgba(59,130,246,0.05),
+        40px 30px 60px rgba(167,139,250,0.04);
+    }
+    #__nitron_dev_panel__::before {
+      content:'';display:block;height:2px;
+      background:linear-gradient(90deg,var(--accent),var(--purple),var(--accent));
+      background-size:200% 100%;
+      animation:__nitron_gradient 3s ease infinite;
+    }
+
+    /* ── Header ── */
+    .ndi-hdr {
+      padding:16px 20px 14px;
+      display:flex;align-items:center;gap:12px;
+    }
+    .ndi-hdr-ring {
+      width:36px;height:36px;border-radius:50%;
+      border:1.5px solid rgba(59,130,246,0.25);
+      display:flex;align-items:center;justify-content:center;
+      background:rgba(59,130,246,0.05);flex-shrink:0;
+    }
+    .ndi-hdr-ring img { width:20px;height:20px;object-fit:contain; }
+    .ndi-hdr-text { flex:1;min-width:0; }
+    .ndi-hdr-title { font-size:14px;font-weight:600;color:var(--text); }
+    .ndi-hdr-ver { font-weight:400;color:var(--text6);font-size:11px; }
+    .ndi-hdr-sub { font-size:10px;color:var(--text6);margin-top:1px; }
+    .ndi-live {
+      display:flex;align-items:center;gap:5px;
+      font-size:10px;font-weight:600;color:var(--green);
+      background:rgba(74,222,128,0.06);padding:4px 10px;
+      border-radius:20px;border:1px solid rgba(74,222,128,0.12);flex-shrink:0;
+    }
+    .ndi-live-dot {
+      width:5px;height:5px;border-radius:50%;background:var(--green);
+      animation:__nitron_pulse 2s infinite;
+    }
+
+    /* ── Route Bar ── */
+    .ndi-route {
+      margin:0 14px;padding:10px 16px;
+      background:rgba(255,255,255,0.025);
+      border:1px solid var(--border2);border-radius:12px;
+      display:flex;align-items:center;gap:10px;
+    }
+    .ndi-route-label { font-size:10px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text5);flex-shrink:0; }
+    .ndi-route-path {
+      flex:1;min-width:0;font-size:13px;font-family:var(--mono);
+      color:#ccc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+    }
+    .ndi-method {
+      font-size:10px;font-weight:700;color:var(--green);
+      background:rgba(74,222,128,0.08);padding:3px 8px;
+      border-radius:5px;flex-shrink:0;
+    }
+
+    /* ── Sections ── */
+    .ndi-sections { padding:8px 14px 10px;display:flex;flex-direction:column;gap:2px; }
+    .ndi-sec {
+      background:rgba(255,255,255,0.02);
+      border:1px solid var(--border2);border-radius:12px;
+      overflow:hidden;cursor:pointer;
+      transition:background 0.2s,border-color 0.2s;
+    }
+    .ndi-sec:hover { background:rgba(255,255,255,0.035);border-color:rgba(255,255,255,0.06); }
+    .ndi-sec.active { border-color:rgba(59,130,246,0.10);background:rgba(59,130,246,0.02); }
+    .ndi-sec-head { padding:12px 16px;display:flex;align-items:center;gap:12px; }
+    .ndi-sec-icon {
+      width:32px;height:32px;border-radius:9px;
+      display:flex;align-items:center;justify-content:center;flex-shrink:0;
+    }
+    .ndi-sec-icon.blue { background:rgba(59,130,246,0.08);color:var(--blue); }
+    .ndi-sec-icon.orange { background:rgba(249,115,22,0.08);color:var(--orange); }
+    .ndi-sec-icon.purple { background:rgba(167,139,250,0.08);color:var(--purple); }
+    .ndi-sec-body { flex:1;min-width:0; }
+    .ndi-sec-label { font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.3px; }
+    .ndi-sec-value { font-size:18px;font-weight:300;color:var(--text);line-height:1.3;margin-top:1px; }
+    .ndi-sec-value .u { font-size:12px;color:var(--text5);font-weight:400; }
+    .ndi-sec-hint { font-size:10px;color:var(--text5);margin-top:1px; }
+    .ndi-sec-hint .a { color:var(--red);font-weight:500; }
+    .ndi-sec-arrow {
+      font-size:10px;color:#333;
+      transition:transform 0.2s,color 0.2s;flex-shrink:0;margin-left:auto;
+    }
+    .ndi-sec:hover .ndi-sec-arrow { color:var(--accent); }
+    .ndi-sec.active .ndi-sec-arrow { transform:rotate(90deg);color:var(--accent); }
+    .ndi-warn .ndi-sec-value { color:var(--yellow); }
+    .ndi-critical .ndi-sec-value { color:var(--red); }
+
+    /* ── Section Details ── */
+    .ndi-sec-details { max-height:0;overflow:hidden;transition:max-height 0.3s ease-out; }
+    .ndi-sec-details-inner { padding:0 16px 14px;margin-top:-2px; }
+    .ndi-sec-divider { height:1px;background:var(--border2);margin-bottom:10px; }
+    .ndi-d-row { display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:12px; }
+    .ndi-d-key { color:var(--text4);display:flex;align-items:center;gap:6px; }
+    .ndi-d-val { color:var(--text2);font-family:var(--mono);font-size:12px; }
+    .ndi-d-dot { width:6px;height:6px;border-radius:50%;flex-shrink:0; }
+    .ndi-timing-bar {
+      display:flex;height:4px;border-radius:3px;overflow:hidden;
+      background:rgba(255,255,255,0.04);margin-bottom:10px;
+    }
+
+    /* Middleware list */
+    .ndi-mw-item { display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12px; }
+    .ndi-mw-dot { width:4px;height:4px;border-radius:50%;background:var(--orange);flex-shrink:0;opacity:0.6; }
+    .ndi-mw-name { color:var(--text2);font-family:var(--mono); }
+    .ndi-mw-time { margin-left:auto;color:var(--text5);font-family:var(--mono);font-size:11px; }
+
+    /* ── Props Scroll ── */
+    .ndi-props-scroll {
+      max-height:300px;overflow-y:auto;overflow-x:hidden;
+      overscroll-behavior:contain;
+      margin:0 -4px;padding:0 4px;
+      scrollbar-width:thin;
+      scrollbar-color:rgba(255,255,255,0.08) transparent;
+    }
+    .ndi-props-scroll::-webkit-scrollbar { width:4px; }
+    .ndi-props-scroll::-webkit-scrollbar-track { background:transparent; }
+    .ndi-props-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.08);border-radius:4px; }
+    .ndi-props-scroll::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.14); }
+
+    /* ── Tree View ── */
+    .ndi-tree { font-family:var(--mono);font-size:12px; }
+    .ndi-tree-row {
+      display:flex;align-items:flex-start;padding:4px 0;
+      min-height:24px;cursor:default;border-radius:4px;transition:background 0.1s;
+    }
+    .ndi-tree-row:hover { background:rgba(255,255,255,0.02); }
+    .ndi-tree-row.exp { cursor:pointer; }
+    .ndi-tree-guide { display:inline-block;width:20px;position:relative;flex-shrink:0;align-self:stretch; }
+    .ndi-tree-guide::before {
+      content:'';position:absolute;left:8px;top:0;bottom:0;
+      width:1px;background:rgba(255,255,255,0.06);
+    }
+    .ndi-tree-arrow {
+      display:inline-block;width:16px;flex-shrink:0;color:var(--text6);font-size:9px;
+      line-height:24px;text-align:center;transition:transform 0.15s,color 0.15s;user-select:none;
+    }
+    .ndi-tree-row.exp:hover .ndi-tree-arrow { color:var(--accent); }
+    .ndi-tree-row.exp.open .ndi-tree-arrow { transform:rotate(90deg);color:var(--accent); }
+    .ndi-tree-arrow.h { visibility:hidden; }
+    .ndi-tree-key { color:#c4a0ff;margin-right:4px;white-space:nowrap; }
+    .ndi-tree-colon { color:var(--text6);margin-right:6px; }
+    .ndi-tree-str { color:#7dd3a8; }
+    .ndi-tree-str::before,.ndi-tree-str::after { content:'"';color:#5a9e7d; }
+    .ndi-tree-num { color:#79b8ff; }
+    .ndi-tree-bool { color:#f97583; }
+    .ndi-tree-null { color:var(--text4);font-style:italic; }
+    .ndi-tree-badge {
+      font-size:10px;color:var(--text4);
+      background:rgba(255,255,255,0.03);padding:1px 6px;
+      border-radius:3px;border:1px solid var(--border2);white-space:nowrap;
+    }
+    .ndi-tree-children { /* controlled by JS display toggle */ }
+
+    /* Filtered props separator */
+    .ndi-tree-sep { display:flex;align-items:center;gap:8px;padding:10px 0 6px; }
+    .ndi-tree-sep-line { flex:1;height:1px;background:var(--border2); }
+    .ndi-tree-sep-text {
+      font-size:9px;font-weight:600;text-transform:uppercase;
+      letter-spacing:0.8px;color:var(--red);flex-shrink:0;
+    }
+    .ndi-tree-row.filtered .ndi-tree-key {
+      color:var(--text3);text-decoration:line-through;
+      text-decoration-color:rgba(239,68,68,0.5);
+    }
+    .ndi-tree-stripped {
+      font-size:9px;color:var(--red);
+      background:rgba(239,68,68,0.08);padding:1px 6px;
+      border-radius:3px;border:1px solid rgba(239,68,68,0.12);margin-left:6px;
+    }
+
+    /* "N more items" button */
+    .ndi-tree-more {
+      display:flex;align-items:center;gap:6px;padding:5px 0 3px;
+      font-size:11px;color:var(--accent);cursor:pointer;user-select:none;
+      transition:color 0.15s;
+    }
+    .ndi-tree-more:hover { color:#60a5fa; }
+    .ndi-tree-more-dots { letter-spacing:2px;opacity:0.5; }
+
+    /* ── Footer ── */
+    .ndi-footer {
+      display:flex;align-items:center;gap:16px;
+      padding:10px 20px 12px;border-top:1px solid var(--border2);
+    }
+    .ndi-foot { display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text6); }
+    .ndi-foot-val { color:var(--text4); }
+    .ndi-foot-dot { width:5px;height:5px;border-radius:50%; }
+    .ndi-foot-dot.ok { background:var(--green); }
+    .ndi-foot-dot.err { background:var(--red); }
+    .ndi-foot-dot.warn { background:var(--yellow); }
+
+    /* ── Tooltip ── */
+    .ndi-tooltip {
+      position:absolute;white-space:nowrap;padding:5px 10px;
+      background:rgba(20,20,20,0.95);border:1px solid rgba(59,130,246,0.3);border-radius:6px;
+      font-size:11px;color:var(--text2);pointer-events:none;transition:opacity 0.3s;
+    }
+
+    /* ── Keyframes ── */
+    @keyframes __nitron_slideUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
+    @keyframes __nitron_slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
+    @keyframes __nitron_pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
+    @keyframes __nitron_gradient { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+  </style>
+
+  <button id="__nitron_dev_btn__" title="NitronJS Dev Tools \u2014 Drag to reposition">
+    <img src="${ICON_BASE64}" alt="N" style="width:20px;height:20px;">
+    <span class="ndi-dot" id="__nitron_status_dot__"></span>
+  </button>
+
+  <div id="__nitron_dev_panel__">
+    <div class="ndi-hdr">
+      <div class="ndi-hdr-ring"><img src="${ICON_BASE64}" alt="N"></div>
+      <div class="ndi-hdr-text">
+        <div class="ndi-hdr-title">NitronJS <span class="ndi-hdr-ver">v${esc(FRAMEWORK_VERSION)}</span></div>
+        <div class="ndi-hdr-sub">localhost:${port}</div>
+      </div>
+      <div class="ndi-live" id="__nitron_hmr_badge__">
+        <span class="ndi-live-dot" id="__nitron_hmr_dot__"></span>
+        <span id="__nitron_hmr_txt__">HMR</span>
+      </div>
+    </div>
+${route ? `
+    <div class="ndi-route">
+      <span class="ndi-route-label">Route</span>
+      <span class="ndi-route-path">${esc(route.pattern)}</span>
+      <span class="ndi-method">${esc(route.method)}</span>
+    </div>` : ""}
+
+    <div class="ndi-sections">
+${timing ? `
+      <div class="ndi-sec${timingWarnClass}" data-section="response">
+        <div class="ndi-sec-head">
+          <div class="ndi-sec-icon blue">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+          </div>
+          <div class="ndi-sec-body">
+            <div class="ndi-sec-label">Response</div>
+            <div class="ndi-sec-value">${timing.total} <span class="u">ms</span></div>
+          </div>
+          <span class="ndi-sec-arrow">\u25B8</span>
+        </div>
+        <div class="ndi-sec-details" id="ndi-det-response">
+          <div class="ndi-sec-details-inner">
+            <div class="ndi-sec-divider"></div>
+            <div class="ndi-timing-bar">
+              ${timing.mwPct > 0 ? `<div style="width:${timing.mwPct}%;background:var(--blue);border-radius:3px 0 0 3px"></div>` : ""}
+              ${timing.ctrlPct > 0 ? `<div style="width:${timing.ctrlPct}%;background:var(--orange)"></div>` : ""}
+              ${timing.renderPct > 0 ? `<div style="width:${timing.renderPct}%;background:var(--purple);border-radius:0 3px 3px 0"></div>` : ""}
+            </div>
+            ${timing.middlewareTotal > 0 ? `<div class="ndi-d-row"><span class="ndi-d-key"><span class="ndi-d-dot" style="background:var(--blue)"></span> Middleware</span><span class="ndi-d-val">${timing.middlewareTotal}ms</span></div>` : ""}
+            ${timing.controller > 0 ? `<div class="ndi-d-row"><span class="ndi-d-key"><span class="ndi-d-dot" style="background:var(--orange)"></span> Controller</span><span class="ndi-d-val">${timing.controller}ms</span></div>` : ""}
+            ${timing.render > 0 ? `<div class="ndi-d-row"><span class="ndi-d-key"><span class="ndi-d-dot" style="background:var(--purple)"></span> Render</span><span class="ndi-d-val">${timing.render}ms</span></div>` : ""}
+          </div>
+        </div>
+      </div>` : ""}
+${mwCount > 0 ? `
+      <div class="ndi-sec" data-section="middleware">
+        <div class="ndi-sec-head">
+          <div class="ndi-sec-icon orange">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
+          </div>
+          <div class="ndi-sec-body">
+            <div class="ndi-sec-label">Middleware</div>
+            <div class="ndi-sec-value">${mwCount} <span class="u">applied</span></div>
+          </div>
+          <span class="ndi-sec-arrow">\u25B8</span>
+        </div>
+        <div class="ndi-sec-details" id="ndi-det-middleware">
+          <div class="ndi-sec-details-inner">
+            <div class="ndi-sec-divider"></div>
+            ${(devData.middlewareTiming || []).map(function(m) {
+                return '<div class="ndi-mw-item"><span class="ndi-mw-dot"></span><span class="ndi-mw-name">' + esc(m.name) + '</span><span class="ndi-mw-time">' + (m.duration ?? 0).toFixed(1) + 'ms</span></div>';
+            }).join("")}
+          </div>
+        </div>
+      </div>` : ""}
+${propsInfo ? `
+      <div class="ndi-sec" data-section="props">
+        <div class="ndi-sec-head">
+          <div class="ndi-sec-icon purple">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
+          </div>
+          <div class="ndi-sec-body">
+            <div class="ndi-sec-label">Props</div>
+            <div class="ndi-sec-value">${esc(String(propsInfo.sent))} <span class="u">sent</span></div>
+            ${propsInfo.removed > 0 ? '<div class="ndi-sec-hint"><span class="a">' + esc(String(propsInfo.removed)) + ' filtered</span></div>' : ""}
+          </div>
+          <span class="ndi-sec-arrow">\u25B8</span>
+        </div>
+        <div class="ndi-sec-details" id="ndi-det-props">
+          <div class="ndi-sec-details-inner">
+            <div class="ndi-sec-divider"></div>
+            <div class="ndi-props-scroll">
+              <div class="ndi-tree" id="ndi-props-tree"></div>
+            </div>
+          </div>
+        </div>
+      </div>` : ""}
+    </div>
+
+    <div class="ndi-footer">
+      <div class="ndi-foot"><span class="ndi-foot-dot ok" id="__nitron_foot_dot__"></span> <span class="ndi-foot-val" id="__nitron_foot_hmr__">HMR</span></div>
+      <div class="ndi-foot">Node <span class="ndi-foot-val">${esc(nodeVersion)}</span></div>
+${route?.name ? '      <div class="ndi-foot" style="margin-left:auto"><span class="ndi-foot-val">' + esc(route.name) + "</span></div>" : ""}
+    </div>
+  </div>
+</div>
+<script${nonceAttr}>
+(function(){
+  var PROPS_DATA = ${propsJson};
+  var ARRAY_INITIAL = 3;
+  var DRAG_THRESHOLD = 5;
+  var EDGE_MARGIN = 16;
+  var startX, startY, isDragging = false;
+  var currentCorner = 'bottom-left';
+  var panelOpen = false;
+  var closingTimer = null;
+  var propsTreeBuilt = false;
+  var moreCounter = 0;
+
+  var container = document.getElementById('__nitron_dev__');
+  var btn = document.getElementById('__nitron_dev_btn__');
+  var panel = document.getElementById('__nitron_dev_panel__');
+  var dot = document.getElementById('__nitron_status_dot__');
+  var hmrDot = document.getElementById('__nitron_hmr_dot__');
+  var hmrTxt = document.getElementById('__nitron_hmr_txt__');
+  var hmrBadge = document.getElementById('__nitron_hmr_badge__');
+  var footDot = document.getElementById('__nitron_foot_dot__');
+  var footHmr = document.getElementById('__nitron_foot_hmr__');
+
+  var hasStoredPos = false;
+
+  try {
+    var saved = JSON.parse(localStorage.getItem('__nitron_indicator_pos__'));
+    if (saved && saved.corner) { currentCorner = saved.corner; hasStoredPos = true; }
+  }
+  catch (e) {}
+
+  applyCorner(currentCorner, false);
+
+  if (!hasStoredPos) {
+    var tip = document.createElement('div');
+    tip.className = 'ndi-tooltip';
+    tip.textContent = 'Grab to reposition';
+    positionTooltip(tip);
+    container.appendChild(tip);
+    setTimeout(function() {
+      tip.style.opacity = '0';
+      setTimeout(function() { tip.remove(); }, 300);
+    }, 3000);
+  }
+
+  /* ── Drag System ── */
+  btn.addEventListener('pointerdown', function(e) {
+    e.preventDefault();
+    startX = e.clientX;
+    startY = e.clientY;
+    isDragging = false;
+    btn.setPointerCapture(e.pointerId);
+  });
+
+  btn.addEventListener('pointermove', function(e) {
+    if (startX === undefined) return;
+    var dx = e.clientX - startX, dy = e.clientY - startY;
+
+    if (!isDragging && Math.sqrt(dx * dx + dy * dy) > DRAG_THRESHOLD) {
+      isDragging = true;
+      btn.classList.add('dragging');
+      closePanel();
+    }
+
+    if (isDragging) {
+      container.style.transition = 'none';
+      container.style.left = (e.clientX - 21) + 'px';
+      container.style.top = (e.clientY - 21) + 'px';
+      container.style.right = 'auto';
+      container.style.bottom = 'auto';
+    }
+  });
+
+  btn.addEventListener('pointerup', function(e) {
+    if (isDragging) {
+      btn.classList.remove('dragging');
+      currentCorner = getClosestCorner(e.clientX, e.clientY);
+      applyCorner(currentCorner, true);
+      try { localStorage.setItem('__nitron_indicator_pos__', JSON.stringify({ corner: currentCorner })); }
+      catch (e) {}
+    }
+    else if (startX !== undefined) {
+      togglePanel();
+    }
+    startX = startY = undefined;
+  });
+
+  btn.addEventListener('pointercancel', function() {
+    btn.classList.remove('dragging');
+    isDragging = false;
+    startX = startY = undefined;
+  });
+
+  document.addEventListener('click', function(e) {
+    if (e.target.closest('#__nitron_dev_btn__')) return;
+    if (!e.target.closest('#__nitron_dev__')) closePanel();
+  });
+
+  /* ── Corner Positioning ── */
+  function getClosestCorner(x, y) {
+    var vw = window.innerWidth, vh = window.innerHeight;
+    return (y > vh / 2 ? 'bottom' : 'top') + '-' + (x > vw / 2 ? 'right' : 'left');
+  }
+
+  function applyCorner(corner, animate) {
+    var s = container.style;
+    if (animate) {
+      s.transition = 'left 0.3s cubic-bezier(0.25,1,0.5,1),right 0.3s cubic-bezier(0.25,1,0.5,1),top 0.3s cubic-bezier(0.25,1,0.5,1),bottom 0.3s cubic-bezier(0.25,1,0.5,1)';
+      setTimeout(function() { s.transition = ''; }, 350);
+    }
+    else {
+      s.transition = '';
+    }
+    s.left = corner.includes('left') ? EDGE_MARGIN + 'px' : 'auto';
+    s.right = corner.includes('right') ? EDGE_MARGIN + 'px' : 'auto';
+    s.top = corner.includes('top') ? EDGE_MARGIN + 'px' : 'auto';
+    s.bottom = corner.includes('bottom') ? EDGE_MARGIN + 'px' : 'auto';
+  }
+
+  function positionTooltip(tip) {
+    var isRight = currentCorner.includes('right');
+    var isTop = currentCorner.includes('top');
+    if (isRight) { tip.style.right = '52px'; tip.style.left = 'auto'; }
+    else { tip.style.left = '52px'; tip.style.right = 'auto'; }
+    if (isTop) { tip.style.top = '10px'; tip.style.bottom = 'auto'; }
+    else { tip.style.bottom = '10px'; tip.style.top = 'auto'; }
+  }
+
+  /* ── Panel Open/Close ── */
+  function togglePanel() {
+    if (panelOpen) closePanel();
+    else openPanel();
+  }
+
+  function openPanel() {
+    if (closingTimer) { clearTimeout(closingTimer); closingTimer = null; }
+    var isTop = currentCorner.includes('top');
+    var isRight = currentCorner.includes('right');
+
+    panel.style.bottom = isTop ? 'auto' : '52px';
+    panel.style.top = isTop ? '52px' : 'auto';
+    panel.style.left = isRight ? 'auto' : '0';
+    panel.style.right = isRight ? '0' : 'auto';
+    panel.style.opacity = '';
+    panel.style.transform = '';
+    panel.style.animation = isTop ? '__nitron_slideDown 0.15s ease-out' : '__nitron_slideUp 0.15s ease-out';
+    panel.style.display = 'block';
+    panelOpen = true;
+  }
+
+  function closePanel() {
+    if (!panelOpen) return;
+    panelOpen = false;
+    panel.style.opacity = '0';
+    panel.style.transform = 'translateY(4px)';
+    closingTimer = setTimeout(function() {
+      closingTimer = null;
+      panel.style.display = 'none';
+      panel.style.opacity = '';
+      panel.style.transform = '';
+    }, 120);
+  }
+
+  /* ── Section Accordion ── */
+  document.querySelectorAll('.ndi-sec').forEach(function(sec) {
+    sec.addEventListener('click', function(e) {
+      if (e.target.closest('.ndi-tree-row') || e.target.closest('.ndi-tree-more')) return;
+      var name = this.dataset.section;
+      var details = document.getElementById('ndi-det-' + name);
+      if (!details) return;
+      var isOpen = this.classList.contains('active');
+      this.classList.toggle('active');
+
+      if (isOpen) {
+        details.style.maxHeight = '0';
+      }
+      else {
+        if (name === 'props' && !propsTreeBuilt && PROPS_DATA) {
+          buildPropsTree();
+          propsTreeBuilt = true;
+        }
+        details.style.maxHeight = details.scrollHeight + 'px';
+        setTimeout(function() { details.style.maxHeight = 'none'; }, 350);
+      }
+    });
+  });
+
+  /* ── Tree View Renderer ── */
+  function escHtml(s) {
+    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
+  function buildPropsTree() {
+    var el = document.getElementById('ndi-props-tree');
+    if (!el || !PROPS_DATA) return;
+
+    var html = '';
+    for (var i = 0; i < PROPS_DATA.sent.length; i++) {
+      var p = PROPS_DATA.sent[i];
+      html += renderNode(p.key, p.value, 0);
+    }
+
+    if (PROPS_DATA.filtered.length > 0) {
+      html += '<div class="ndi-tree-sep"><div class="ndi-tree-sep-line"></div><span class="ndi-tree-sep-text">Filtered</span><div class="ndi-tree-sep-line"></div></div>';
+      for (var i = 0; i < PROPS_DATA.filtered.length; i++) {
+        html += '<div class="ndi-tree-row filtered">';
+        html += '<span class="ndi-tree-arrow h">\u25B8</span>';
+        html += '<span class="ndi-tree-key">' + escHtml(PROPS_DATA.filtered[i]) + '</span>';
+        html += '<span class="ndi-tree-stripped">stripped</span>';
+        html += '</div>';
+      }
+    }
+
+    el.innerHTML = html;
+  }
+
+  function renderNode(key, value, depth) {
+    var indent = '';
+    for (var d = 0; d < depth; d++) indent += '<span class="ndi-tree-guide"></span>';
+
+    if (value === null) {
+      return '<div class="ndi-tree-row">' + indent + '<span class="ndi-tree-arrow h">\u25B8</span><span class="ndi-tree-key">' + escHtml(key) + '</span><span class="ndi-tree-colon">:</span><span class="ndi-tree-null">null</span></div>';
+    }
+
+    var type = typeof value;
+
+    if (type === 'string') {
+      var display = value.length > 120 ? escHtml(value.substring(0, 120)) + '...' : escHtml(value);
+      return '<div class="ndi-tree-row">' + indent + '<span class="ndi-tree-arrow h">\u25B8</span><span class="ndi-tree-key">' + escHtml(key) + '</span><span class="ndi-tree-colon">:</span><span class="ndi-tree-str">' + display + '</span></div>';
+    }
+
+    if (type === 'number') {
+      return '<div class="ndi-tree-row">' + indent + '<span class="ndi-tree-arrow h">\u25B8</span><span class="ndi-tree-key">' + escHtml(key) + '</span><span class="ndi-tree-colon">:</span><span class="ndi-tree-num">' + value + '</span></div>';
+    }
+
+    if (type === 'boolean') {
+      return '<div class="ndi-tree-row">' + indent + '<span class="ndi-tree-arrow h">\u25B8</span><span class="ndi-tree-key">' + escHtml(key) + '</span><span class="ndi-tree-colon">:</span><span class="ndi-tree-bool">' + value + '</span></div>';
+    }
+
+    if (Array.isArray(value)) {
+      var id = 'ndi-tc-' + (++moreCounter);
+      var html = '<div class="ndi-tree-row exp" data-children="' + id + '">' + indent + '<span class="ndi-tree-arrow">\u25B8</span><span class="ndi-tree-key">' + escHtml(key) + '</span><span class="ndi-tree-colon">:</span><span class="ndi-tree-badge">Array [' + value.length + ']</span></div>';
+      html += '<div class="ndi-tree-children" id="' + id + '" style="display:none">';
+
+      var showCount = Math.min(ARRAY_INITIAL, value.length);
+      for (var i = 0; i < showCount; i++) {
+        html += renderNode('[' + i + ']', value[i], depth + 1);
+      }
+
+      if (value.length > ARRAY_INITIAL) {
+        var moreId = 'ndi-more-' + (++moreCounter);
+        html += '<div class="ndi-tree-more" data-more="' + moreId + '" style="padding-left:' + ((depth + 1) * 20) + 'px"><span class="ndi-tree-more-dots">\u2022\u2022\u2022</span> ' + (value.length - ARRAY_INITIAL) + ' more items</div>';
+        html += '<div id="' + moreId + '" style="display:none">';
+        for (var i = ARRAY_INITIAL; i < value.length; i++) {
+          html += renderNode('[' + i + ']', value[i], depth + 1);
+        }
+        html += '</div>';
+      }
+
+      html += '</div>';
+      return html;
+    }
+
+    if (type === 'object') {
+      var keys = Object.keys(value);
+      var id = 'ndi-tc-' + (++moreCounter);
+      var html = '<div class="ndi-tree-row exp" data-children="' + id + '">' + indent + '<span class="ndi-tree-arrow">\u25B8</span><span class="ndi-tree-key">' + escHtml(key) + '</span><span class="ndi-tree-colon">:</span><span class="ndi-tree-badge">Object {' + keys.length + '}</span></div>';
+      html += '<div class="ndi-tree-children" id="' + id + '" style="display:none">';
+
+      for (var i = 0; i < keys.length; i++) {
+        html += renderNode(keys[i], value[keys[i]], depth + 1);
+      }
+
+      html += '</div>';
+      return html;
+    }
+
+    return '<div class="ndi-tree-row">' + indent + '<span class="ndi-tree-arrow h">\u25B8</span><span class="ndi-tree-key">' + escHtml(key) + '</span><span class="ndi-tree-colon">:</span><span class="ndi-tree-null">' + escHtml(String(value)) + '</span></div>';
+  }
+
+  /* ── Tree Event Delegation ── */
+  var treeEl = document.getElementById('ndi-props-tree');
+  if (treeEl) {
+    treeEl.addEventListener('click', function(e) {
+      var row = e.target.closest('.ndi-tree-row.exp');
+      if (row) {
+        var childrenId = row.dataset.children;
+        var children = document.getElementById(childrenId);
+        if (children) {
+          var isOpen = row.classList.contains('open');
+          row.classList.toggle('open');
+          children.style.display = isOpen ? 'none' : '';
+          var det = document.getElementById('ndi-det-props');
+          if (det) det.style.maxHeight = 'none';
+        }
+        return;
+      }
+
+      var more = e.target.closest('.ndi-tree-more');
+      if (more) {
+        var hiddenId = more.dataset.more;
+        var hidden = document.getElementById(hiddenId);
+        if (hidden) {
+          hidden.style.display = '';
+          more.style.display = 'none';
+          var det = document.getElementById('ndi-det-props');
+          if (det) det.style.maxHeight = 'none';
+        }
+      }
+    });
+  }
+
+  /* ── HMR Status ── */
+  function updateHmr() {
+    var connected = window.__nitron_hmr_connected__;
+    if (dot) dot.style.background = connected ? '#4ade80' : '#ef4444';
+    if (hmrDot) hmrDot.style.background = connected ? '#4ade80' : '#ef4444';
+    if (hmrTxt) hmrTxt.textContent = connected ? 'HMR' : 'Disconnected';
+    if (hmrBadge) {
+      hmrBadge.style.color = connected ? '#4ade80' : '#ef4444';
+      hmrBadge.style.background = connected ? 'rgba(74,222,128,0.06)' : 'rgba(239,68,68,0.06)';
+      hmrBadge.style.borderColor = connected ? 'rgba(74,222,128,0.12)' : 'rgba(239,68,68,0.12)';
+    }
+    if (footDot) footDot.className = 'ndi-foot-dot ' + (connected ? 'ok' : 'err');
+    if (footHmr) footHmr.textContent = connected ? 'HMR' : 'Disconnected';
+  }
+
+  if (typeof io !== 'undefined') {
+    var hmrInterval = setInterval(function() {
+      if (!container.isConnected) { clearInterval(hmrInterval); return; }
+      updateHmr();
+    }, 1000);
+    updateHmr();
+  }
+  else {
+    if (hmrTxt) hmrTxt.textContent = 'N/A';
+    if (hmrBadge) { hmrBadge.style.color = 'var(--yellow)'; hmrBadge.style.borderColor = 'rgba(251,191,36,0.12)'; }
+    if (footDot) footDot.className = 'ndi-foot-dot warn';
+    if (footHmr) footHmr.textContent = 'N/A';
+  }
+})();
+</script>`;
+    }
+}
+
+export default DevIndicator;
+
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helper Functions
+// ─────────────────────────────────────────────────────────────────────────────
+
+function esc(str) {
+    if (!str) return "";
+    return String(str).replace(/[&<>"']/g, c => ESC[c]);
+}
+
+function buildTimingSummary(devData) {
+    const middlewareTotal = (devData.middlewareTiming || []).reduce((s, m) => s + m.duration, 0);
+    const controller = (devData.controllerStart && devData.renderStart)
+        ? (devData.renderStart - devData.controllerStart)
+        : (devData.controllerDuration || 0);
+    const render = devData.renderDuration || 0;
+    const total = devData.startTime ? performance.now() - devData.startTime : (middlewareTotal + controller + render);
+
+    if (!isFinite(total) || total <= 0) {
+        return { total: "0.0", middlewareTotal: "0.0", controller: "0.0", render: "0.0", mwPct: "0", ctrlPct: "0", renderPct: "0", otherPct: "0" };
+    }
+
+    const mwPct = (middlewareTotal / total * 100);
+    const ctrlPct = (controller / total * 100);
+    const renderPct = (render / total * 100);
+    const otherPct = Math.max(0, 100 - mwPct - ctrlPct - renderPct);
+
+    return {
+        total: total.toFixed(1),
+        middlewareTotal: middlewareTotal.toFixed(1),
+        controller: controller.toFixed(1),
+        render: render.toFixed(1),
+        mwPct: mwPct.toFixed(1),
+        ctrlPct: ctrlPct.toFixed(1),
+        renderPct: renderPct.toFixed(1),
+        otherPct: otherPct.toFixed(1)
+    };
+}
+
+function buildPropsSummary(devData) {
+    const rawKeys = Object.keys(devData.rawProps || {});
+    const usageKeys = devData.propUsage ? Object.keys(devData.propUsage) : rawKeys;
+    const removedKeys = rawKeys.filter(k => !usageKeys.includes(k));
+
+    return {
+        sent: rawKeys.length,
+        removed: removedKeys.length,
+        keys: rawKeys,
+        removedKeys
+    };
+}
+
+function buildPropsTreeData(devData) {
+    const raw = devData.rawProps || {};
+    const usageKeys = devData.propUsage ? Object.keys(devData.propUsage) : null;
+    const allKeys = Object.keys(raw);
+
+    const sent = [];
+    const filtered = [];
+
+    for (const key of allKeys) {
+        if (!usageKeys || usageKeys.includes(key)) {
+            sent.push({ key, value: raw[key] });
+        }
+        else {
+            filtered.push(key);
+        }
+    }
+
+    return { sent, filtered };
+}
+
+function safeJsonEmbed(data) {
+    try {
+        const seen = new WeakSet();
+        const json = JSON.stringify(data, function(key, value) {
+            if (typeof value === "object" && value !== null) {
+                if (seen.has(value)) return "[Circular]";
+                seen.add(value);
+            }
+            if (typeof value === "string" && value.length > 200) return value.substring(0, 200) + "...";
+            if (typeof value === "function") return undefined;
+            if (typeof value === "symbol") return undefined;
+            if (typeof value === "bigint") return String(value);
+            return value;
+        });
+        return json.replace(/<\//g, "<\\/");
+    }
+    catch (e) {
+        return "null";
+    }
+}