@pulse-js/tools 0.1.5 → 0.1.7

package/README.md

@@ -2,6 +2,10 @@
 
 The official visual debugging suite for the Pulse ecosystem. Inspect, monitor, and debug your reactive graph in real-time with a premium, developer-focused UI.
 
+<div align="center">
+  <img width="383" height="575" alt="image" src="https://github.com/user-attachments/assets/9b557924-3a2d-4558-843f-f8f2793cc2f1" />
+</div>
+
 ## Features
 
 - **Tabbed Interface**: Switch between the standard "Inspector" list and the new "Pulse Tree" dependency graph.
@@ -58,7 +62,7 @@ document.body.appendChild(inspector);
 - **Naming Matters**: Ensure you provide string names to your Sources and Guards (e.g., `source(val, { name: 'my-source' })`). The DevTools rely on these names to provide meaningful debugging information. Unnamed units will appear but are harder to trace.
 - **Status Indicators**:
   - 🟢 **Green**: OK / Active
-  - 🔴 **Red**: Fails (Hover to see semantic failure reasons)
+  - 🔴 **Red**: Fails
   - 🟡 **Yellow**: Pending (Async operations in flight)
 
 ## Architecture

package/dist/index.cjs

@@ -202,8 +202,9 @@ var PulseInspector = class extends HTMLElement {
     }
     const valueEl = target.closest(".editable-value");
     if (valueEl) {
+      const id = valueEl.getAttribute("data-id");
       const name = valueEl.getAttribute("data-name");
-      const unit = this.units.find((u) => u._name === name);
+      const unit = this.units.find((u) => u._id === id || u._name === name);
       if (unit && !("state" in unit)) {
         this.editingUnit = unit;
         this.editValue = JSON.stringify(unit());
@@ -324,6 +325,7 @@ var PulseInspector = class extends HTMLElement {
   renderUnitCard(unit) {
     const isGuard = "state" in unit;
     const name = unit._name || "unnamed";
+    const id = unit._id;
     const explanation = isGuard ? unit.explain() : null;
     const value = isGuard ? explanation.value : unit();
     let status = "ok";
@@ -345,7 +347,10 @@ var PulseInspector = class extends HTMLElement {
               <input class="edit-input" value='${this.safeStringify(value)}' />
             </form>
           ` : `
-            <div class="value-row ${!isGuard ? "editable-value" : ""}" data-name="${name}" title="${!isGuard ? "Click to edit" : ""}">
+            <div class="value-row ${!isGuard ? "editable-value" : ""}" 
+                 data-id="${id}" 
+                 data-name="${name}" 
+                 title="${!isGuard ? "Click to edit" : ""}">
               <span style="opacity:0.5;margin-right:6px">Value:</span> 
               <span class="value-text">${this.formatValue(value)}</span>
               ${!isGuard ? `<span class="edit-icon">${ICONS.edit}</span>` : ""}

package/dist/index.js

@@ -176,8 +176,9 @@ var PulseInspector = class extends HTMLElement {
     }
     const valueEl = target.closest(".editable-value");
     if (valueEl) {
+      const id = valueEl.getAttribute("data-id");
       const name = valueEl.getAttribute("data-name");
-      const unit = this.units.find((u) => u._name === name);
+      const unit = this.units.find((u) => u._id === id || u._name === name);
       if (unit && !("state" in unit)) {
         this.editingUnit = unit;
         this.editValue = JSON.stringify(unit());
@@ -298,6 +299,7 @@ var PulseInspector = class extends HTMLElement {
   renderUnitCard(unit) {
     const isGuard = "state" in unit;
     const name = unit._name || "unnamed";
+    const id = unit._id;
     const explanation = isGuard ? unit.explain() : null;
     const value = isGuard ? explanation.value : unit();
     let status = "ok";
@@ -319,7 +321,10 @@ var PulseInspector = class extends HTMLElement {
               <input class="edit-input" value='${this.safeStringify(value)}' />
             </form>
           ` : `
-            <div class="value-row ${!isGuard ? "editable-value" : ""}" data-name="${name}" title="${!isGuard ? "Click to edit" : ""}">
+            <div class="value-row ${!isGuard ? "editable-value" : ""}" 
+                 data-id="${id}" 
+                 data-name="${name}" 
+                 title="${!isGuard ? "Click to edit" : ""}">
               <span style="opacity:0.5;margin-right:6px">Value:</span> 
               <span class="value-text">${this.formatValue(value)}</span>
               ${!isGuard ? `<span class="edit-icon">${ICONS.edit}</span>` : ""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pulse-js/tools",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -13,6 +13,6 @@
     "lint": "bun x tsc --noEmit"
   },
   "dependencies": {
-    "@pulse-js/core": "^0.1.8"
+    "@pulse-js/core": "^0.1.9"
   }
 }