@pulse-js/tools 0.1.5 → 0.1.6

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

@@ -204,7 +204,8 @@ var PulseInspector = class extends HTMLElement {
     if (valueEl) {
       const name = valueEl.getAttribute("data-name");
       const unit = this.units.find((u) => u._name === name);
-      if (unit && !("state" in unit)) {
+      const hasName = unit._name && unit._name !== "unnamed";
+      if (unit && !("state" in unit) && hasName) {
         this.editingUnit = unit;
         this.editValue = JSON.stringify(unit());
         this.render();
@@ -345,10 +346,13 @@ 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 && 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 ? `<span class="edit-icon">${ICONS.edit}</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>
           `}
 

package/dist/index.js

@@ -178,7 +178,8 @@ var PulseInspector = class extends HTMLElement {
     if (valueEl) {
       const name = valueEl.getAttribute("data-name");
       const unit = this.units.find((u) => u._name === name);
-      if (unit && !("state" in unit)) {
+      const hasName = unit._name && unit._name !== "unnamed";
+      if (unit && !("state" in unit) && hasName) {
         this.editingUnit = unit;
         this.editValue = JSON.stringify(unit());
         this.render();
@@ -319,10 +320,13 @@ 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 && 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 ? `<span class="edit-icon">${ICONS.edit}</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>
           `}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pulse-js/tools",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",