@pulse-js/tools 0.1.6 → 0.1.8

package/README.md

@@ -59,7 +59,7 @@ document.body.appendChild(inspector);
 
 ## Tips
 
-- **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.
+- **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 not appear.
 - **Status Indicators**:
   - 🟢 **Green**: OK / Active
   - 🔴 **Red**: Fails

package/dist/index.cjs

@@ -45,7 +45,8 @@ var ICONS = {
   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>`
+  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>`,
+  refresh: `<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.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/></svg>`
 };
 var STORAGE_KEY = "pulse-devtools-state";
 var PulseInspector = class extends HTMLElement {
@@ -64,10 +65,16 @@ var PulseInspector = class extends HTMLElement {
   editValue = "";
   unsubscribeRegistry;
   unitSubscriptions = /* @__PURE__ */ new Map();
+  shortcut = "Ctrl+M";
+  // Default shortcut
   constructor() {
     super();
     this.shadow = this.attachShadow({ mode: "open" });
     this.loadState();
+    const shortcutAttr = this.getAttribute("shortcut");
+    if (shortcutAttr) {
+      this.shortcut = shortcutAttr;
+    }
   }
   connectedCallback() {
     this.render();
@@ -123,7 +130,14 @@ var PulseInspector = class extends HTMLElement {
     this.shadow.addEventListener("keydown", this.handleEditKeydown);
   }
   handleKeyDown = (e) => {
-    if (e.ctrlKey && e.key.toLowerCase() === "m") {
+    const parts = this.shortcut.split("+").map((p) => p.trim().toLowerCase());
+    const needsCtrl = parts.includes("ctrl");
+    const needsShift = parts.includes("shift");
+    const needsAlt = parts.includes("alt");
+    const key = parts.find((p) => !["ctrl", "shift", "alt"].includes(p));
+    if (!key) return;
+    const matches = e.ctrlKey === needsCtrl && e.shiftKey === needsShift && e.altKey === needsAlt && e.key.toLowerCase() === key;
+    if (matches) {
       e.preventDefault();
       this.toggle();
     }
@@ -190,6 +204,10 @@ var PulseInspector = class extends HTMLElement {
       this.toggle();
       return;
     }
+    if (target.id === "refresh" || target.closest("#refresh")) {
+      this.refreshUnits();
+      return;
+    }
     const tabEl = target.closest(".tab-btn");
     if (tabEl) {
       const tab = tabEl.getAttribute("data-tab");
@@ -202,10 +220,10 @@ 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 hasName = unit._name && unit._name !== "unnamed";
-      if (unit && !("state" in unit) && hasName) {
+      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());
         this.render();
@@ -292,7 +310,10 @@ var PulseInspector = class extends HTMLElement {
               <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 style="display:flex;gap:8px;align-items:center">
+              <div id="refresh" class="icon-btn" title="Refresh" style="font-size:16px">${ICONS.refresh}</div>
+              <div id="close" class="icon-btn" title="Close (${this.shortcut})">\xD7</div>
+            </div>
           </div>
 
           <div class="tabs">
@@ -325,6 +346,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";
@@ -346,13 +368,13 @@ var PulseInspector = class extends HTMLElement {
               <input class="edit-input" value='${this.safeStringify(value)}' />
             </form>
           ` : `
-            <div class="value-row ${!isGuard && name !== "unnamed" ? "editable-value" : ""}" 
+            <div class="value-row ${!isGuard ? "editable-value" : ""}" 
+                 data-id="${id}" 
                  data-name="${name}" 
-                 title="${!isGuard ? name === "unnamed" ? "Unnamed sources cannot be edited (not trackable)" : "Click to edit" : ""}">
+                 title="${!isGuard ? "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>` : ""}
+              ${!isGuard ? `<span class="edit-icon">${ICONS.edit}</span>` : ""}
             </div>
           `}
 

package/dist/index.d.cts

@@ -8,6 +8,7 @@ declare class PulseInspector extends HTMLElement {
     private editValue;
     private unsubscribeRegistry?;
     private unitSubscriptions;
+    private shortcut;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/index.d.ts

@@ -8,6 +8,7 @@ declare class PulseInspector extends HTMLElement {
     private editValue;
     private unsubscribeRegistry?;
     private unitSubscriptions;
+    private shortcut;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/index.js

@@ -19,7 +19,8 @@ var ICONS = {
   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>`
+  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>`,
+  refresh: `<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.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/></svg>`
 };
 var STORAGE_KEY = "pulse-devtools-state";
 var PulseInspector = class extends HTMLElement {
@@ -38,10 +39,16 @@ var PulseInspector = class extends HTMLElement {
   editValue = "";
   unsubscribeRegistry;
   unitSubscriptions = /* @__PURE__ */ new Map();
+  shortcut = "Ctrl+M";
+  // Default shortcut
   constructor() {
     super();
     this.shadow = this.attachShadow({ mode: "open" });
     this.loadState();
+    const shortcutAttr = this.getAttribute("shortcut");
+    if (shortcutAttr) {
+      this.shortcut = shortcutAttr;
+    }
   }
   connectedCallback() {
     this.render();
@@ -97,7 +104,14 @@ var PulseInspector = class extends HTMLElement {
     this.shadow.addEventListener("keydown", this.handleEditKeydown);
   }
   handleKeyDown = (e) => {
-    if (e.ctrlKey && e.key.toLowerCase() === "m") {
+    const parts = this.shortcut.split("+").map((p) => p.trim().toLowerCase());
+    const needsCtrl = parts.includes("ctrl");
+    const needsShift = parts.includes("shift");
+    const needsAlt = parts.includes("alt");
+    const key = parts.find((p) => !["ctrl", "shift", "alt"].includes(p));
+    if (!key) return;
+    const matches = e.ctrlKey === needsCtrl && e.shiftKey === needsShift && e.altKey === needsAlt && e.key.toLowerCase() === key;
+    if (matches) {
       e.preventDefault();
       this.toggle();
     }
@@ -164,6 +178,10 @@ var PulseInspector = class extends HTMLElement {
       this.toggle();
       return;
     }
+    if (target.id === "refresh" || target.closest("#refresh")) {
+      this.refreshUnits();
+      return;
+    }
     const tabEl = target.closest(".tab-btn");
     if (tabEl) {
       const tab = tabEl.getAttribute("data-tab");
@@ -176,10 +194,10 @@ 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 hasName = unit._name && unit._name !== "unnamed";
-      if (unit && !("state" in unit) && hasName) {
+      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());
         this.render();
@@ -266,7 +284,10 @@ var PulseInspector = class extends HTMLElement {
               <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 style="display:flex;gap:8px;align-items:center">
+              <div id="refresh" class="icon-btn" title="Refresh" style="font-size:16px">${ICONS.refresh}</div>
+              <div id="close" class="icon-btn" title="Close (${this.shortcut})">\xD7</div>
+            </div>
           </div>
 
           <div class="tabs">
@@ -299,6 +320,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";
@@ -320,13 +342,13 @@ var PulseInspector = class extends HTMLElement {
               <input class="edit-input" value='${this.safeStringify(value)}' />
             </form>
           ` : `
-            <div class="value-row ${!isGuard && name !== "unnamed" ? "editable-value" : ""}" 
+            <div class="value-row ${!isGuard ? "editable-value" : ""}" 
+                 data-id="${id}" 
                  data-name="${name}" 
-                 title="${!isGuard ? name === "unnamed" ? "Unnamed sources cannot be edited (not trackable)" : "Click to edit" : ""}">
+                 title="${!isGuard ? "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>` : ""}
+              ${!isGuard ? `<span class="edit-icon">${ICONS.edit}</span>` : ""}
             </div>
           `}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pulse-js/tools",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "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.2.0"
   }
 }