@pulse-js/tools 0.1.4 → 0.1.6

package/dist/index.js

@@ -1,32 +1,47 @@
 // src/pulse-inspector.ts
 import { PulseRegistry } from "@pulse-js/core";
 var COLORS = {
-  bg: "rgba(13, 13, 18, 0.95)",
+  bg: "rgba(13, 13, 18, 0.96)",
   border: "rgba(255, 255, 255, 0.1)",
   accent: "linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%)",
+  accentColor: "#00d2ff",
   error: "#ff4b2b",
   success: "#00f260",
   pending: "#fdbb2d",
   text: "#ffffff",
   secondaryText: "#a0a0a0",
-  cardBg: "rgba(255, 255, 255, 0.05)"
+  cardBg: "rgba(255, 255, 255, 0.05)",
+  cardHover: "rgba(255, 255, 255, 0.08)",
+  inputBg: "rgba(0,0,0,0.3)"
 };
-var STORAGE_KEY = "pulse-devtools-pos";
+var ICONS = {
+  tree: `<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="M21 12h-4l-3 8-4-16-3 8H2"/></svg>`,
+  list: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>`,
+  chevronRight: `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>`,
+  chevronDown: `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>`,
+  edit: `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>`
+};
+var STORAGE_KEY = "pulse-devtools-state";
 var PulseInspector = class extends HTMLElement {
   shadow;
   units = [];
-  isOpen = false;
-  position = { x: window.innerWidth - 140, y: window.innerHeight - 65 };
+  // State
+  state = {
+    pos: { x: window.innerWidth - 360, y: 20 },
+    isOpen: true,
+    activeTab: "inspector",
+    expandedNodes: []
+  };
   isDragging = false;
   offset = { x: 0, y: 0 };
-  totalMovement = 0;
-  lastMousePos = { x: 0, y: 0 };
+  editingUnit = null;
+  editValue = "";
   unsubscribeRegistry;
   unitSubscriptions = /* @__PURE__ */ new Map();
   constructor() {
     super();
     this.shadow = this.attachShadow({ mode: "open" });
-    this.loadPosition();
+    this.loadState();
   }
   connectedCallback() {
     this.render();
@@ -36,22 +51,27 @@ var PulseInspector = class extends HTMLElement {
       this.refreshUnits();
     });
     window.addEventListener("keydown", this.handleKeyDown);
+    window.addEventListener("resize", this.handleResize);
   }
   disconnectedCallback() {
     if (this.unsubscribeRegistry) this.unsubscribeRegistry();
     this.unitSubscriptions.forEach((unsub) => unsub());
     window.removeEventListener("keydown", this.handleKeyDown);
+    window.removeEventListener("resize", this.handleResize);
   }
-  loadPosition() {
+  loadState() {
     try {
       const saved = localStorage.getItem(STORAGE_KEY);
-      if (saved) this.position = JSON.parse(saved);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        this.state = { ...this.state, ...parsed };
+      }
     } catch (e) {
     }
   }
-  savePosition() {
+  saveState() {
     try {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(this.position));
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state));
     } catch (e) {
     }
   }
@@ -71,273 +91,547 @@ var PulseInspector = class extends HTMLElement {
     });
   }
   setupListeners() {
-    this.shadow.addEventListener("mousedown", (e) => this.startDragging(e));
+    this.shadow.addEventListener("mousedown", this.handleMouseDown);
+    this.shadow.addEventListener("click", this.handleClick);
+    this.shadow.addEventListener("submit", this.handleEditSubmit);
+    this.shadow.addEventListener("keydown", this.handleEditKeydown);
   }
   handleKeyDown = (e) => {
-    if (e.ctrlKey && e.key.toLowerCase() === "d") {
+    if (e.ctrlKey && e.key.toLowerCase() === "m") {
       e.preventDefault();
       this.toggle();
     }
   };
+  handleResize = () => {
+    const maxW = window.innerWidth - (this.state.isOpen ? 400 : 120);
+    const maxH = window.innerHeight - (this.state.isOpen ? 500 : 45);
+    this.state.pos.x = Math.max(0, Math.min(maxW, this.state.pos.x));
+    this.state.pos.y = Math.max(0, Math.min(maxH, this.state.pos.y));
+    this.render();
+  };
   toggle() {
-    if (this.totalMovement < 5) {
-      this.isOpen = !this.isOpen;
-      if (this.isOpen) {
-        this.position.x = Math.max(0, Math.min(window.innerWidth - 350, this.position.x));
-        this.position.y = Math.max(0, Math.min(window.innerHeight - 450, this.position.y));
-      } else {
-        this.position.x = Math.max(0, Math.min(window.innerWidth - 120, this.position.x));
-        this.position.y = Math.max(0, Math.min(window.innerHeight - 45, this.position.y));
-      }
-      this.savePosition();
-      this.render();
-    }
+    this.state.isOpen = !this.state.isOpen;
+    this.saveState();
+    this.render();
   }
-  startDragging(e) {
-    const target = e.target;
+  // --- DRAG LOGIC ---
+  totalDragDistance = 0;
+  handleMouseDown = (e) => {
+    const me = e;
+    const target = me.target;
     const isHeader = target.closest(".header") || target.classList.contains("toggle-btn");
-    if (!isHeader) return;
+    const isClose = target.closest("#close");
+    if (!isHeader || isClose) return;
     this.isDragging = true;
-    this.totalMovement = 0;
-    this.lastMousePos = { x: e.clientX, y: e.clientY };
+    this.totalDragDistance = 0;
     this.offset = {
-      x: e.clientX - this.position.x,
-      y: e.clientY - this.position.y
+      x: me.clientX - this.state.pos.x,
+      y: me.clientY - this.state.pos.y
     };
-    const onMouseMove = (moveEv) => {
+    const move = (ev) => {
       if (!this.isDragging) return;
-      this.totalMovement += Math.abs(moveEv.clientX - this.lastMousePos.x) + Math.abs(moveEv.clientY - this.lastMousePos.y);
-      this.lastMousePos = { x: moveEv.clientX, y: moveEv.clientY };
-      const w = this.isOpen ? 350 : 120;
-      const h = this.isOpen ? 450 : 45;
-      this.position = {
-        x: Math.max(0, Math.min(window.innerWidth - w, moveEv.clientX - this.offset.x)),
-        y: Math.max(0, Math.min(window.innerHeight - h, moveEv.clientY - this.offset.y))
+      ev.preventDefault();
+      this.totalDragDistance += Math.abs(ev.movementX) + Math.abs(ev.movementY);
+      const width = this.state.isOpen ? 400 : 140;
+      const height = this.state.isOpen ? 600 : 48;
+      this.state.pos = {
+        x: Math.max(0, Math.min(window.innerWidth - width, ev.clientX - this.offset.x)),
+        y: Math.max(0, Math.min(window.innerHeight - height, ev.clientY - this.offset.y))
       };
       const container = this.shadow.querySelector(".container");
       if (container) {
-        container.style.left = `${this.position.x}px`;
-        container.style.top = `${this.position.y}px`;
+        container.style.left = `${this.state.pos.x}px`;
+        container.style.top = `${this.state.pos.y}px`;
       }
     };
-    const onMouseUp = () => {
+    const up = () => {
       this.isDragging = false;
-      this.savePosition();
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
+      this.saveState();
+      document.removeEventListener("mousemove", move);
+      document.removeEventListener("mouseup", up);
     };
-    document.addEventListener("mousemove", onMouseMove);
-    document.addEventListener("mouseup", onMouseUp);
-  }
+    document.addEventListener("mousemove", move);
+    document.addEventListener("mouseup", up);
+  };
+  // --- INTERACTION LOGIC ---
+  handleClick = (e) => {
+    if (this.totalDragDistance > 5) {
+      this.totalDragDistance = 0;
+      return;
+    }
+    const target = e.target;
+    if (target.id === "toggle" || target.closest("#close")) {
+      this.toggle();
+      return;
+    }
+    const tabEl = target.closest(".tab-btn");
+    if (tabEl) {
+      const tab = tabEl.getAttribute("data-tab");
+      if (tab) {
+        this.state.activeTab = tab;
+        this.saveState();
+        this.render();
+      }
+      return;
+    }
+    const valueEl = target.closest(".editable-value");
+    if (valueEl) {
+      const name = valueEl.getAttribute("data-name");
+      const unit = this.units.find((u) => u._name === name);
+      const hasName = unit._name && unit._name !== "unnamed";
+      if (unit && !("state" in unit) && hasName) {
+        this.editingUnit = unit;
+        this.editValue = JSON.stringify(unit());
+        this.render();
+        requestAnimationFrame(() => {
+          const input = this.shadow.querySelector(".edit-input");
+          if (input) {
+            input.focus();
+            input.select();
+          }
+        });
+      }
+      return;
+    }
+    if (this.editingUnit && !target.closest(".edit-form")) {
+      this.editingUnit = null;
+      this.render();
+    }
+    const treeNode = target.closest(".tree-toggle");
+    if (treeNode) {
+      e.stopPropagation();
+      const id = treeNode.getAttribute("data-id");
+      if (id) {
+        if (this.state.expandedNodes.includes(id)) {
+          this.state.expandedNodes = this.state.expandedNodes.filter((n) => n !== id);
+        } else {
+          this.state.expandedNodes.push(id);
+        }
+        this.saveState();
+        this.render();
+      }
+    }
+  };
+  handleEditSubmit = (e) => {
+    e.preventDefault();
+    if (!this.editingUnit) return;
+    try {
+      const form = e.target;
+      const input = form.querySelector("input");
+      let val = input.value;
+      try {
+        if (val === "true") val = true;
+        else if (val === "false") val = false;
+        else if (val === "null") val = null;
+        else if (val === "undefined") val = void 0;
+        else if (!isNaN(Number(val)) && val.trim() !== "") val = Number(val);
+        else if (val.startsWith("{") || val.startsWith("[")) val = JSON.parse(val);
+      } catch (err) {
+      }
+      this.editingUnit.set(val);
+      this.editingUnit = null;
+      this.render();
+    } catch (err) {
+      console.error("Pulse DevTools: Failed to update value", err);
+    }
+  };
+  handleEditKeydown = (e) => {
+    if (this.editingUnit && e.key === "Escape") {
+      this.editingUnit = null;
+      this.render();
+    }
+  };
+  // --- RENDERERS ---
   render() {
-    const w = this.isOpen ? 350 : 120;
-    const h = this.isOpen ? 450 : 45;
-    this.shadow.innerHTML = `
+    if (!this.state.isOpen) {
+      this.shadow.innerHTML = this.getStyles() + `
+        <div class="container" style="left: ${this.state.pos.x}px; top: ${this.state.pos.y}px">
+          <div class="glass" style="border-radius:30px; width:auto;">
+            <div class="toggle-btn" id="toggle">
+              <div class="dot"></div>
+              Pulse (${this.units.length})
+            </div>
+          </div>
+        </div>
+      `;
+      return;
+    }
+    this.shadow.innerHTML = this.getStyles() + `
+      <div class="container" style="left: ${this.state.pos.x}px; top: ${this.state.pos.y}px">
+        <div class="glass">
+          
+          <div class="header">
+            <div style="display:flex;align-items:center;gap:10px">
+              <div class="dot" style="width:10px;height:10px"></div>
+              <strong style="font-size:14px;letter-spacing:0.5px">PULSE</strong>
+              <span style="font-size:10px;opacity:0.5;margin-top:2px">v0.2.0</span>
+            </div>
+            <div id="close" class="icon-btn">\xD7</div>
+          </div>
+
+          <div class="tabs">
+            <div class="tab-btn ${this.state.activeTab === "inspector" ? "active" : ""}" data-tab="inspector">
+              ${ICONS.list} Inspector
+            </div>
+            <div class="tab-btn ${this.state.activeTab === "tree" ? "active" : ""}" data-tab="tree">
+              ${ICONS.tree} Pulse Tree
+            </div>
+          </div>
+
+          <div class="content">
+            ${this.state.activeTab === "inspector" ? this.renderInspector() : this.renderTree()}
+          </div>
+
+        </div>
+      </div>
+    `;
+  }
+  renderInspector() {
+    if (this.units.length === 0) {
+      return `<div class="empty-state">No Pulse units detected.</div>`;
+    }
+    return `
+      <div class="list">
+        ${this.units.map((u) => this.renderUnitCard(u)).join("")}
+      </div>
+    `;
+  }
+  renderUnitCard(unit) {
+    const isGuard = "state" in unit;
+    const name = unit._name || "unnamed";
+    const explanation = isGuard ? unit.explain() : null;
+    const value = isGuard ? explanation.value : unit();
+    let status = "ok";
+    if (isGuard) status = explanation.status;
+    const isEditing = this.editingUnit === unit;
+    return `
+      <div class="unit-card ${isGuard ? "" : "source-card"}" style="border-left-color: ${this.getStatusColor(status)}">
+        <div class="unit-header">
+          <div style="display:flex;align-items:center;gap:6px">
+            <div class="status-dot status-${status}"></div>
+            <strong title="${name}">${name}</strong>
+          </div>
+          <span class="badg type-${isGuard ? "guard" : "source"}">${isGuard ? "GUARD" : "SOURCE"}</span>
+        </div>
+
+        <div class="unit-body">
+          ${isEditing ? `
+            <form class="edit-form">
+              <input class="edit-input" value='${this.safeStringify(value)}' />
+            </form>
+          ` : `
+            <div class="value-row ${!isGuard && name !== "unnamed" ? "editable-value" : ""}" 
+                 data-name="${name}" 
+                 title="${!isGuard ? name === "unnamed" ? "Unnamed sources cannot be edited (not trackable)" : "Click to edit" : ""}">
+              <span style="opacity:0.5;margin-right:6px">Value:</span> 
+              <span class="value-text">${this.formatValue(value)}</span>
+              ${!isGuard && name !== "unnamed" ? `<span class="edit-icon">${ICONS.edit}</span>` : ""}
+              ${!isGuard && name === "unnamed" ? `<span style="opacity:0.3;font-size:10px;margin-left:auto">\u{1F512} Locked</span>` : ""}
+            </div>
+          `}
+
+          ${isGuard && explanation.status === "fail" ? this.renderReason(explanation.reason) : ""}
+          ${isGuard && explanation.status === "pending" ? `
+             <div class="reason pending-reason">
+                \u23F3 Evaluating... ${explanation.lastReason ? `<br/><span style="opacity:0.7;font-size:9px">Last error: ${this.formatReasonText(explanation.lastReason)}</span>` : ""}
+             </div>
+          ` : ""}
+        </div>
+      </div>
+    `;
+  }
+  renderTree() {
+    const guards = this.units.filter((u) => "state" in u);
+    if (guards.length === 0) return `<div class="empty-state">No Guards to visualize.</div>`;
+    return `
+      <div class="tree-view">
+        ${guards.map((g) => this.renderTreeNode(g, 0, g._name)).join("")}
+      </div>
+    `;
+  }
+  renderTreeNode(guard, depth, key) {
+    const isExpanded = this.state.expandedNodes.includes(key);
+    const explanation = guard.explain();
+    const deps = explanation.dependencies || [];
+    const hasDeps = deps.length > 0;
+    const statusColor = this.getStatusColor(explanation.status);
+    return `
+      <div class="tree-node" style="padding-left:${depth * 12}px">
+        <div class="tree-row tree-toggle" data-id="${key}">
+          <span class="tree-icon" style="visibility:${hasDeps ? "visible" : "hidden"}">
+            ${isExpanded ? ICONS.chevronDown : ICONS.chevronRight}
+          </span>
+          <span class="status-dot status-${explanation.status}" style="width:6px;height:6px;margin:0 6px"></span>
+          <span class="tree-name" style="color:${explanation.status === "fail" ? COLORS.error : "inherit"}">
+            ${explanation.name}
+          </span>
+           ${explanation.status === "fail" ? `
+            <span class="mini-badge fail">!</span>
+           ` : ""}
+        </div>
+      </div>
+      ${isExpanded && hasDeps ? `
+        <div class="tree-children">
+           ${deps.map((dep) => {
+      const unit = this.units.find((u) => u._name === dep.name);
+      const childKey = key + "-" + dep.name;
+      if (unit && "state" in unit) {
+        return this.renderTreeNode(unit, depth + 1, childKey);
+      } else {
+        return `
+                   <div class="tree-node" style="padding-left:${(depth + 1) * 12}px">
+                      <div class="tree-row">
+                        <span class="tree-icon" style="visibility:hidden"></span>
+                        <span class="status-dot status-ok" style="background:${COLORS.secondaryText}"></span>
+                        <span class="tree-name" style="opacity:0.7">${dep.name}</span>
+                        <span class="mini-badge source">S</span>
+                      </div>
+                   </div>
+                 `;
+      }
+    }).join("")}
+        </div>
+      ` : ""}
+    `;
+  }
+  // --- HELPERS ---
+  renderReason(reason) {
+    if (!reason) return "";
+    const text = this.formatReasonText(reason);
+    const meta = typeof reason === "object" && reason.meta ? reason.meta : null;
+    return `
+      <div class="reason">
+        <strong>${typeof reason === "object" ? reason.code || "ERROR" : "FAIL"}</strong>
+        <div>${text}</div>
+        ${meta ? `<pre class="meta-block">${JSON.stringify(meta, null, 2)}</pre>` : ""}
+      </div>
+    `;
+  }
+  formatReasonText(reason) {
+    if (typeof reason === "string") return reason;
+    return reason.message || JSON.stringify(reason);
+  }
+  formatValue(val) {
+    if (val === void 0) return "undefined";
+    if (val === null) return "null";
+    if (typeof val === "function") return "\u0192()";
+    if (typeof val === "object") return "{...}";
+    return String(val);
+  }
+  safeStringify(val) {
+    try {
+      if (val === void 0) return "undefined";
+      return JSON.stringify(val);
+    } catch {
+      return String(val);
+    }
+  }
+  getStatusColor(status) {
+    switch (status) {
+      case "ok":
+        return COLORS.success;
+      case "fail":
+        return COLORS.error;
+      case "pending":
+        return COLORS.pending;
+      default:
+        return COLORS.secondaryText;
+    }
+  }
+  getStyles() {
+    return `
       <style>
-        :host {
-          all: initial;
-        }
+        :host { all: initial; font-family: 'Inter', -apple-system, sans-serif; }
+        * { box-sizing: border-box; }
+        
         .container {
           position: fixed;
-          left: ${this.position.x}px;
-          top: ${this.position.y}px;
-          width: ${w}px;
+          height: auto;
           z-index: 999999;
-          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-          color: white;
-          user-select: none;
+          filter: drop-shadow(0 8px 32px rgba(0,0,0,0.5));
+          color: ${COLORS.text};
         }
+
         .glass {
           background: ${COLORS.bg};
-          backdrop-filter: blur(20px);
-          -webkit-backdrop-filter: blur(20px);
+          backdrop-filter: blur(12px);
           border: 1px solid ${COLORS.border};
-          border-radius: ${this.isOpen ? "16px" : "30px"};
-          box-shadow: 0 10px 40px rgba(0,0,0,0.5);
+          border-radius: 12px;
           overflow: hidden;
-          transition: border-radius 0.2s ease;
           display: flex;
           flex-direction: column;
+          width: 400px;
+          max-height: 80vh;
+          transition: width 0.2s, height 0.2s;
         }
+
+        /* TOGGLE BUTTON MODE */
         .toggle-btn {
-          width: 120px;
-          height: 45px;
+          width: 140px;
+          height: 48px;
           display: flex;
           align-items: center;
           justify-content: center;
-          cursor: grab;
+          gap: 10px;
+          cursor: pointer;
           font-weight: 600;
           font-size: 13px;
+          background: rgba(255,255,255,0.03);
+        }
+        .toggle-btn:hover { background: rgba(255,255,255,0.08); }
+
+        /* HEADER */
+        .header {
+          padding: 12px 16px;
+          background: rgba(0,0,0,0.2);
+          border-bottom: 1px solid ${COLORS.border};
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          cursor: move;
+          flex-shrink: 0;
         }
         .dot {
           width: 8px;
           height: 8px;
           border-radius: 50%;
           background: ${COLORS.accent};
-          margin-right: 10px;
-          box-shadow: 0 0 10px #00d2ff;
+          box-shadow: 0 0 12px ${COLORS.accentColor};
         }
-        .header {
-          padding: 12px 16px;
-          background: rgba(0,0,0,0.3);
+        .icon-btn { cursor: pointer; opacity: 0.6; padding: 4px; font-size: 18px; line-height: 1; }
+        .icon-btn:hover { opacity: 1; color: white; }
+
+        /* TABS */
+        .tabs {
+          display: flex;
+          background: rgba(0,0,0,0.2);
           border-bottom: 1px solid ${COLORS.border};
+          font-size: 11px;
+          font-weight: 600;
+        }
+        .tab-btn {
+          flex: 1;
+          padding: 10px;
+          text-align: center;
+          cursor: pointer;
+          opacity: 0.6;
+          border-bottom: 2px solid transparent;
           display: flex;
-          justify-content: space-between;
           align-items: center;
-          cursor: grab;
+          justify-content: center;
+          gap: 6px;
         }
-        .list {
+        .tab-btn:hover { opacity: 0.9; background: rgba(255,255,255,0.02); }
+        .tab-btn.active { opacity: 1; border-bottom-color: ${COLORS.accentColor}; color: ${COLORS.accentColor}; background: rgba(0,210,255,0.05); }
+
+        /* CONTENT */
+        .content {
           flex: 1;
           overflow-y: auto;
-          max-height: 380px;
-          padding: 12px;
+          overflow-x: hidden;
+          min-height: 300px;
         }
-        .list::-webkit-scrollbar { width: 5px; }
-        .list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
-        
+        .content::-webkit-scrollbar { width: 6px; }
+        .content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
+
+        /* INSPECTOR LIST */
+        .list { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
+        .empty-state { padding: 40px; text-align: center; opacity: 0.4; font-size: 12px; }
+
         .unit-card {
-          padding: 10px;
-          margin-bottom: 10px;
-          border-radius: 10px;
           background: ${COLORS.cardBg};
           border: 1px solid ${COLORS.border};
-          font-size: 12px;
+          border-left: 3px solid transparent;
+          border-radius: 6px;
+          padding: 10px;
+          transition: background 0.1s;
         }
+        .unit-card:hover { background: ${COLORS.cardHover}; }
+        .source-card { border-left-color: ${COLORS.secondaryText} !important; }
+
         .unit-header {
           display: flex;
           justify-content: space-between;
-          margin-bottom: 5px;
-        }
-        .unit-type {
-          font-size: 9px;
-          opacity: 0.5;
-          text-transform: uppercase;
+          align-items: center;
+          margin-bottom: 8px;
         }
         .status-dot {
           width: 6px;
           height: 6px;
           border-radius: 50%;
-          display: inline-block;
-          margin-right: 6px;
         }
-        .status-ok { background: ${COLORS.success}; box-shadow: 0 0 5px ${COLORS.success}; }
-        .status-fail { background: ${COLORS.error}; box-shadow: 0 0 5px ${COLORS.error}; }
-        .status-pending { background: ${COLORS.pending}; box-shadow: 0 0 5px ${COLORS.pending}; }
-        
-        .value {
-          color: #00d2ff;
+        .status-ok { background: ${COLORS.success}; box-shadow: 0 0 6px ${COLORS.success}; }
+        .status-fail { background: ${COLORS.error}; box-shadow: 0 0 6px ${COLORS.error}; }
+        .status-pending { background: ${COLORS.pending}; box-shadow: 0 0 6px ${COLORS.pending}; }
+
+        .badg { font-size: 8px; font-weight: 700; padding: 2px 4px; border-radius: 3px; background: rgba(255,255,255,0.1); }
+        .type-guard { color: ${COLORS.accentColor}; background: rgba(0,210,255,0.1); }
+        .type-source { color: ${COLORS.secondaryText}; }
+
+        .value-row {
+          font-size: 11px;
           font-family: monospace;
-          word-break: break-all;
+          background: rgba(0,0,0,0.2);
+          padding: 6px 8px;
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
         }
-        .reason {
-          color: ${COLORS.error};
-          margin-top: 4px;
+        .value-text { color: ${COLORS.accentColor}; }
+        .editable-value { cursor: pointer; border: 1px dashed transparent; }
+        .editable-value:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); }
+        .edit-icon { opacity: 0; transition: opacity 0.2s; }
+        .editable-value:hover .edit-icon { opacity: 0.7; }
+
+        .edit-form { margin: 0; padding: 0; width: 100%; }
+        .edit-input {
+          width: 100%;
+          background: ${COLORS.inputBg};
+          border: 1px solid ${COLORS.accentColor};
+          color: white;
+          font-family: monospace;
           font-size: 11px;
-          background: rgba(255,75,43,0.1);
-          padding: 4px;
+          padding: 6px;
           border-radius: 4px;
+          outline: none;
         }
-        .footer {
-          padding: 8px 12px;
-          font-size: 10px;
-          opacity: 0.5;
-          text-align: right;
-          background: rgba(0,0,0,0.1);
-        }
-        .explain-toggle {
-          margin-top: 8px;
-          font-size: 10px;
-          color: ${COLORS.secondaryText};
-          cursor: pointer;
-          text-decoration: underline;
-        }
-        .explanation {
+
+        .reason {
           margin-top: 8px;
-          padding-top: 8px;
-          border-top: 1px dashed ${COLORS.border};
+          padding: 8px;
+          background: rgba(255, 75, 43, 0.1);
+          border: 1px solid rgba(255, 75, 43, 0.2);
+          border-radius: 4px;
+          color: ${COLORS.error};
+          font-size: 11px;
         }
-        .dep-item {
+        .pending-reason { color: ${COLORS.pending} !important; background: rgba(253, 187, 45, 0.1); border-color: rgba(253, 187, 45, 0.2); }
+        .meta-block { margin: 4px 0 0 0; opacity: 0.7; font-size: 10px; }
+
+        /* TREE VIEW */
+        .tree-view { padding: 12px; font-size: 12px; }
+        .tree-node { margin-bottom: 2px; }
+        .tree-row {
           display: flex;
-          justify-content: space-between;
-          padding: 2px 0;
-          opacity: 0.8;
+          align-items: center;
+          padding: 4px 6px;
+          border-radius: 4px;
+          cursor: pointer;
+          user-select: none;
+        }
+        .tree-row:hover { background: rgba(255,255,255,0.05); }
+        .tree-icon { margin-right: 4px; opacity: 0.5; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; }
+        .tree-name { opacity: 0.9; }
+        .mini-badge { 
+          font-size: 9px; margin-left: auto; padding: 1px 4px; border-radius: 3px; 
+          font-weight: bold; opacity: 0.6;
         }
+        .mini-badge.fail { background: ${COLORS.error}; color: white; opacity: 1; }
+        .mini-badge.source { background: rgba(255,255,255,0.1); }
+
       </style>
-      <div class="container">
-        <div class="glass">
-          ${!this.isOpen ? `
-            <div class="toggle-btn" id="toggle">
-              <div class="dot"></div>
-              Pulse (${this.units.length})
-            </div>
-          ` : `
-            <div class="header">
-              <div style="display:flex;align-items:center">
-                <div class="dot" style="width:10px;height:10px"></div>
-                <strong style="font-size:14px">Pulse Inspector</strong>
-              </div>
-              <div id="close" style="cursor:pointer;font-size:18px;opacity:0.6">\xD7</div>
-            </div>
-            <div class="list">
-              ${this.units.length === 0 ? '<div style="text-align:center;padding:20px;opacity:0.5">No units detected</div>' : ""}
-              ${this.units.map((u) => this.renderUnit(u)).join("")}
-            </div>
-            <div class="footer">v0.2.0 \u2022 Framework-Agnostic</div>
-          `}
-        </div>
-      </div>
     `;
-    this.shadow.getElementById("toggle")?.addEventListener("click", () => this.toggle());
-    this.shadow.getElementById("close")?.addEventListener("click", () => this.toggle());
-  }
-  renderUnit(unit) {
-    const isGuard = "state" in unit;
-    const name = unit._name || "unnamed";
-    if (isGuard) {
-      const g = unit;
-      const explanation = g.explain();
-      const statusClass = `status-${explanation.status}`;
-      return `
-        <div class="unit-card" style="border-color: ${explanation.status === "fail" ? COLORS.error + "44" : COLORS.border}">
-          <div class="unit-header">
-            <span>
-              <span class="status-dot ${statusClass}"></span>
-              <strong>${name}</strong>
-            </span>
-            <span class="unit-type">Guard</span>
-          </div>
-          ${explanation.status === "ok" ? `<div class="value">Value: ${JSON.stringify(explanation.value)}</div>` : ""}
-          ${explanation.status === "fail" ? `<div class="reason">${explanation.reason}</div>` : ""}
-          ${explanation.status === "pending" ? `<div style="opacity:0.5">Evaluating...</div>` : ""}
-          
-          ${explanation.dependencies.length > 0 ? `
-            <div class="explanation">
-              <div style="font-size:9px;opacity:0.5;margin-bottom:4px">DEPENDENCIES</div>
-              ${explanation.dependencies.map((dep) => `
-                <div class="dep-item">
-                  <span>${dep.name} <small opacity="0.5">(${dep.type})</small></span>
-                  ${dep.status ? `<span class="status-dot status-${dep.status}" style="width:4px;height:4px"></span>` : ""}
-                </div>
-              `).join("")}
-            </div>
-          ` : ""}
-        </div>
-      `;
-    } else {
-      const value = unit();
-      return `
-        <div class="unit-card">
-          <div class="unit-header">
-            <span>
-              <span class="status-dot status-ok"></span>
-              <strong>${name}</strong>
-            </span>
-            <span class="unit-type">Source</span>
-          </div>
-          <div class="value">Value: ${JSON.stringify(value)}</div>
-        </div>
-      `;
-    }
   }
 };
 if (!customElements.get("pulse-inspector")) {