@pulse-js/tools 0.1.1 → 0.1.3

package/dist/index.cjs

@@ -17,18 +17,17 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/index.tsx
+// src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  PulseDevTools: () => PulseDevTools
+  PulseInspector: () => PulseInspector
 });
 module.exports = __toCommonJS(index_exports);
-var import_react = require("react");
+
+// src/pulse-inspector.ts
 var import_core = require("@pulse-js/core");
-var import_react2 = require("@pulse-js/react");
-var import_jsx_runtime = require("react/jsx-runtime");
 var COLORS = {
-  bg: "rgba(13, 13, 18, 0.85)",
+  bg: "rgba(13, 13, 18, 0.95)",
   border: "rgba(255, 255, 255, 0.1)",
   accent: "linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%)",
   error: "#ff4b2b",
@@ -38,312 +37,339 @@ var COLORS = {
   secondaryText: "#a0a0a0",
   cardBg: "rgba(255, 255, 255, 0.05)"
 };
-var SCROLLBAR_CSS = `
-  .pulse-devtools-list::-webkit-scrollbar {
-    width: 6px;
-  }
-  .pulse-devtools-list::-webkit-scrollbar-track {
-    background: transparent;
+var STORAGE_KEY = "pulse-devtools-pos";
+var PulseInspector = class extends HTMLElement {
+  shadow;
+  units = [];
+  isOpen = false;
+  position = { x: window.innerWidth - 140, y: window.innerHeight - 65 };
+  isDragging = false;
+  offset = { x: 0, y: 0 };
+  totalMovement = 0;
+  lastMousePos = { x: 0, y: 0 };
+  unsubscribeRegistry;
+  unitSubscriptions = /* @__PURE__ */ new Map();
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.loadPosition();
   }
-  .pulse-devtools-list::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
+  connectedCallback() {
+    this.render();
+    this.setupListeners();
+    this.refreshUnits();
+    this.unsubscribeRegistry = import_core.PulseRegistry.onRegister(() => {
+      this.refreshUnits();
+    });
+    window.addEventListener("keydown", this.handleKeyDown);
   }
-  .pulse-devtools-list::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.2);
+  disconnectedCallback() {
+    if (this.unsubscribeRegistry) this.unsubscribeRegistry();
+    this.unitSubscriptions.forEach((unsub) => unsub());
+    window.removeEventListener("keydown", this.handleKeyDown);
   }
-`;
-var HeaderStyle = {
-  padding: "12px 16px",
-  background: "rgba(0,0,0,0.3)",
-  borderBottom: `1px solid ${COLORS.border}`,
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  cursor: "grab",
-  userSelect: "none"
-};
-var ListStyle = {
-  padding: "12px",
-  overflowY: "auto",
-  maxHeight: "320px",
-  // Limits height after ~4-5 items
-  flex: "0 1 auto"
-};
-var UnitStyle = (status, isError) => ({
-  padding: "10px",
-  marginBottom: "10px",
-  borderRadius: "10px",
-  backgroundColor: COLORS.cardBg,
-  border: `1px solid ${isError ? COLORS.error : COLORS.border}`,
-  fontSize: "13px",
-  transition: "all 0.2s ease",
-  boxShadow: isError ? `0 0 10px ${COLORS.error}44` : "none"
-});
-var StatusDot = (status) => ({
-  width: "8px",
-  height: "8px",
-  borderRadius: "50%",
-  display: "inline-block",
-  marginRight: "8px",
-  backgroundColor: status === "ok" ? COLORS.success : status === "fail" ? COLORS.error : COLORS.pending,
-  boxShadow: `0 0 8px ${status === "ok" ? COLORS.success : status === "fail" ? COLORS.error : COLORS.pending}`
-});
-var STORAGE_KEY = "pulse-devtools-pos";
-var clamp = (val, min, max) => Math.max(min, Math.min(max, val));
-function useDraggable() {
-  const [position, setPositionState] = (0, import_react.useState)(() => {
+  loadPosition() {
     try {
       const saved = localStorage.getItem(STORAGE_KEY);
-      if (saved) return JSON.parse(saved);
+      if (saved) this.position = JSON.parse(saved);
     } catch (e) {
     }
-    return { x: window.innerWidth - 140, y: window.innerHeight - 65 };
-  });
-  const isDragging = (0, import_react.useRef)(false);
-  const startMousePos = (0, import_react.useRef)({ x: 0, y: 0 });
-  const offset = (0, import_react.useRef)({ x: 0, y: 0 });
-  const totalMovement = (0, import_react.useRef)(0);
-  const updatePosition = (0, import_react.useCallback)((newPos) => {
-    setPositionState(newPos);
+  }
+  savePosition() {
     try {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(newPos));
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(this.position));
     } catch (e) {
     }
-  }, []);
-  const onMouseMove = (0, import_react.useCallback)((e, currentW, currentH) => {
-    if (!isDragging.current) return;
-    totalMovement.current += Math.abs(e.clientX - startMousePos.current.x) + Math.abs(e.clientY - startMousePos.current.y);
-    startMousePos.current = { x: e.clientX, y: e.clientY };
-    updatePosition({
-      x: clamp(e.clientX - offset.current.x, 0, Math.max(0, window.innerWidth - currentW)),
-      y: clamp(e.clientY - offset.current.y, 0, Math.max(0, window.innerHeight - currentH))
-    });
-  }, [updatePosition]);
-  const startDragging = (0, import_react.useCallback)((e, w, h) => {
-    isDragging.current = true;
-    totalMovement.current = 0;
-    startMousePos.current = { x: e.clientX, y: e.clientY };
-    offset.current = {
-      x: e.clientX - position.x,
-      y: e.clientY - position.y
-    };
-    const handleMove = (moveEv) => onMouseMove(moveEv, w, h);
-    const handleUp = () => {
-      isDragging.current = false;
-      document.removeEventListener("mousemove", handleMove);
-      document.removeEventListener("mouseup", handleUp);
-    };
-    document.addEventListener("mousemove", handleMove);
-    document.addEventListener("mouseup", handleUp);
-  }, [position, onMouseMove]);
-  return { position, updatePosition, startDragging, totalMovement };
-}
-var UnitItem = ({ unit }) => {
-  const isGuard = "state" in unit;
-  const name = unit._name || (isGuard ? "Unnamed Guard" : "Unnamed Source");
-  const hasWarning = !unit._name;
-  if (isGuard) {
-    const state = (0, import_react2.usePulse)(unit);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: UnitStyle(state.status, state.status === "fail"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "6px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: StatusDot(state.status) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { style: { color: COLORS.text }, children: name })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "10px", color: COLORS.secondaryText }, children: "GUARD" })
-      ] }),
-      state.status === "ok" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { wordBreak: "break-all", color: COLORS.secondaryText }, children: [
-        "Value: ",
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { style: { color: COLORS.success }, children: JSON.stringify(state.value) })
-      ] }),
-      state.status === "fail" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { color: COLORS.error, fontSize: "11px", marginTop: "4px", background: `${COLORS.error}11`, padding: "4px", borderRadius: "4px" }, children: [
-        "Error: ",
-        state.reason
-      ] }),
-      hasWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: "10px", color: COLORS.pending, marginTop: "5px", opacity: 0.8 }, children: "\u26A0\uFE0F Best practice: Give guards a name for better debugging." })
-    ] });
-  } else {
-    const value = (0, import_react2.usePulse)(unit);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: UnitStyle("ok", false), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "6px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: StatusDot("ok") }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { style: { color: COLORS.text }, children: name })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "10px", color: COLORS.secondaryText }, children: "SOURCE" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { wordBreak: "break-all", color: COLORS.secondaryText }, children: [
-        "Value: ",
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { style: { color: "#00d2ff" }, children: JSON.stringify(value) })
-      ] }),
-      hasWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: "10px", color: COLORS.pending, marginTop: "5px", opacity: 0.8 }, children: [
-        "\u26A0\uFE0F Tip: Name this source in `source(val, ",
-        "{ name: '...' }",
-        ")`"
-      ] })
-    ] });
   }
-};
-var PulseDevTools = ({ shortcut = "Ctrl+D" }) => {
-  const [units, setUnits] = (0, import_react.useState)(() => import_core.PulseRegistry.getAll());
-  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
-  const W = 350;
-  const H = 450;
-  const BTN_W = 120;
-  const BTN_H = 45;
-  const { position, updatePosition, startDragging, totalMovement } = useDraggable();
-  const handleToggle = (0, import_react.useCallback)(() => {
-    if (totalMovement.current < 5) {
-      setIsOpen((prev) => {
-        const next = !prev;
-        const isLeft = position.x < window.innerWidth / 2;
-        const isTop = position.y < window.innerHeight / 2;
-        if (next) {
-          updatePosition({
-            x: clamp(isLeft ? position.x : position.x + BTN_W - W, 0, window.innerWidth - W),
-            y: clamp(isTop ? position.y : position.y + BTN_H - H, 0, window.innerHeight - H)
-          });
-        } else {
-          updatePosition({
-            x: clamp(isLeft ? position.x : position.x + W - BTN_W, 0, window.innerWidth - BTN_W),
-            y: clamp(isTop ? position.y : position.y + H - BTN_H, 0, window.innerHeight - BTN_H)
-          });
-        }
-        return next;
-      });
-    }
-  }, [totalMovement, updatePosition, position.x, position.y]);
-  (0, import_react.useEffect)(() => {
-    const style = document.createElement("style");
-    style.innerHTML = SCROLLBAR_CSS;
-    document.head.appendChild(style);
-    return () => {
-      document.head.removeChild(style);
-    };
-  }, []);
-  (0, import_react.useEffect)(() => {
-    const unsubscribe = import_core.PulseRegistry.onRegister((newUnit) => {
-      setUnits((prev) => {
-        const name = newUnit._name;
-        if (name) {
-          const index = prev.findIndex((u) => u._name === name);
-          if (index !== -1) {
-            const next = [...prev];
-            next[index] = newUnit;
-            return next;
-          }
-        }
-        return [...prev, newUnit];
+  refreshUnits() {
+    this.units = import_core.PulseRegistry.getAll();
+    this.updateUnitSubscriptions();
+    this.render();
+  }
+  updateUnitSubscriptions() {
+    this.unitSubscriptions.forEach((unsub) => unsub());
+    this.unitSubscriptions.clear();
+    this.units.forEach((unit) => {
+      const unsub = unit.subscribe(() => {
+        this.render();
       });
+      this.unitSubscriptions.set(unit, unsub);
     });
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-  (0, import_react.useEffect)(() => {
-    const handleKey = (e) => {
-      const parts = shortcut.toLowerCase().split("+");
-      const needsCtrl = parts.includes("ctrl");
-      const key = parts[parts.length - 1];
-      if (needsCtrl && e.ctrlKey && e.key.toLowerCase() === key) {
-        e.preventDefault();
-        handleToggle();
+  }
+  setupListeners() {
+    this.shadow.addEventListener("mousedown", (e) => this.startDragging(e));
+  }
+  handleKeyDown = (e) => {
+    if (e.ctrlKey && e.key.toLowerCase() === "d") {
+      e.preventDefault();
+      this.toggle();
+    }
+  };
+  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();
+    }
+  }
+  startDragging(e) {
+    const target = e.target;
+    const isHeader = target.closest(".header") || target.classList.contains("toggle-btn");
+    if (!isHeader) return;
+    this.isDragging = true;
+    this.totalMovement = 0;
+    this.lastMousePos = { x: e.clientX, y: e.clientY };
+    this.offset = {
+      x: e.clientX - this.position.x,
+      y: e.clientY - this.position.y
     };
-    window.addEventListener("keydown", handleKey);
-    return () => window.removeEventListener("keydown", handleKey);
-  }, [shortcut, handleToggle]);
-  if (!isOpen) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "button",
-      {
-        onMouseDown: (e) => startDragging(e, BTN_W, BTN_H),
-        onClick: handleToggle,
-        title: `Toggle Pulse DevTools (${shortcut})`,
-        style: {
-          position: "fixed",
-          left: `${position.x}px`,
-          top: `${position.y}px`,
-          width: `${BTN_W}px`,
-          height: `${BTN_H}px`,
-          padding: 0,
-          borderRadius: "30px",
-          border: `1px solid ${COLORS.border}`,
-          background: COLORS.bg,
-          backdropFilter: "blur(15px)",
-          color: "white",
-          fontWeight: 600,
-          cursor: "grab",
-          boxShadow: "0 8px 32px rgba(0,0,0,0.4)",
-          zIndex: 9999,
-          fontSize: "13px",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          userSelect: "none"
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: "10px", height: "10px", borderRadius: "50%", background: COLORS.accent, marginRight: "10px", boxShadow: `0 0 10px #00d2ff` } }),
-          "Pulse (",
-          units.length,
-          ")"
-        ]
+    const onMouseMove = (moveEv) => {
+      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))
+      };
+      const container = this.shadow.querySelector(".container");
+      if (container) {
+        container.style.left = `${this.position.x}px`;
+        container.style.top = `${this.position.y}px`;
       }
-    );
+    };
+    const onMouseUp = () => {
+      this.isDragging = false;
+      this.savePosition();
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  }
+  render() {
+    const w = this.isOpen ? 350 : 120;
+    const h = this.isOpen ? 450 : 45;
+    this.shadow.innerHTML = `
+      <style>
+        :host {
+          all: initial;
+        }
+        .container {
+          position: fixed;
+          left: ${this.position.x}px;
+          top: ${this.position.y}px;
+          width: ${w}px;
+          z-index: 999999;
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+          color: white;
+          user-select: none;
+        }
+        .glass {
+          background: ${COLORS.bg};
+          backdrop-filter: blur(20px);
+          -webkit-backdrop-filter: blur(20px);
+          border: 1px solid ${COLORS.border};
+          border-radius: ${this.isOpen ? "16px" : "30px"};
+          box-shadow: 0 10px 40px rgba(0,0,0,0.5);
+          overflow: hidden;
+          transition: border-radius 0.2s ease;
+          display: flex;
+          flex-direction: column;
+        }
+        .toggle-btn {
+          width: 120px;
+          height: 45px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: grab;
+          font-weight: 600;
+          font-size: 13px;
+        }
+        .dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: ${COLORS.accent};
+          margin-right: 10px;
+          box-shadow: 0 0 10px #00d2ff;
+        }
+        .header {
+          padding: 12px 16px;
+          background: rgba(0,0,0,0.3);
+          border-bottom: 1px solid ${COLORS.border};
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          cursor: grab;
+        }
+        .list {
+          flex: 1;
+          overflow-y: auto;
+          max-height: 380px;
+          padding: 12px;
+        }
+        .list::-webkit-scrollbar { width: 5px; }
+        .list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
+        
+        .unit-card {
+          padding: 10px;
+          margin-bottom: 10px;
+          border-radius: 10px;
+          background: ${COLORS.cardBg};
+          border: 1px solid ${COLORS.border};
+          font-size: 12px;
+        }
+        .unit-header {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 5px;
+        }
+        .unit-type {
+          font-size: 9px;
+          opacity: 0.5;
+          text-transform: uppercase;
+        }
+        .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;
+          font-family: monospace;
+          word-break: break-all;
+        }
+        .reason {
+          color: ${COLORS.error};
+          margin-top: 4px;
+          font-size: 11px;
+          background: rgba(255,75,43,0.1);
+          padding: 4px;
+          border-radius: 4px;
+        }
+        .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 {
+          margin-top: 8px;
+          padding-top: 8px;
+          border-top: 1px dashed ${COLORS.border};
+        }
+        .dep-item {
+          display: flex;
+          justify-content: space-between;
+          padding: 2px 0;
+          opacity: 0.8;
+        }
+      </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());
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
-    {
-      style: {
-        position: "fixed",
-        left: `${position.x}px`,
-        top: `${position.y}px`,
-        width: `${W}px`,
-        maxHeight: `${H}px`,
-        backgroundColor: COLORS.bg,
-        backdropFilter: "blur(15px)",
-        border: `1px solid ${COLORS.border}`,
-        borderRadius: "16px",
-        boxShadow: "0 20px 40px rgba(0,0,0,0.4)",
-        display: "flex",
-        flexDirection: "column",
-        zIndex: 9999,
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: HeaderStyle, onMouseDown: (e) => startDragging(e, W, H), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: "12px", height: "12px", borderRadius: "4px", background: COLORS.accent, marginRight: "10px", boxShadow: `0 0 8px #00d2ff` } }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "white", fontWeight: 600 }, children: "Pulse Inspector" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              onClick: handleToggle,
-              style: { background: "transparent", border: "none", color: COLORS.secondaryText, cursor: "pointer", fontSize: "20px", padding: "0 5px" },
-              children: "\xD7"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: ListStyle, className: "pulse-devtools-list", children: units.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", color: COLORS.secondaryText, marginTop: "40px", fontSize: "14px" }, children: [
-          "No reactive units detected.",
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "11px", opacity: 0.6 }, children: "Use source() or guard() to begin." })
-        ] }) : units.map((u, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UnitItem, { unit: u }, u._name || i)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "10px", background: "rgba(0,0,0,0.2)", display: "flex", justifyContent: "space-between", fontSize: "10px", color: COLORS.secondaryText }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "v0.1.0" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-            "Drag header to move \u2022 ",
-            shortcut,
-            " to 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")) {
+  customElements.define("pulse-inspector", PulseInspector);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  PulseDevTools
+  PulseInspector
 });